feature/IO-3160 - RC-COLLAPSE-ISSUE:

feature/IO-3096-GlobalNotifications - Checkpoint - Clean up previous socket usages by funneling them all through useSocket vs useContext(SocketConext), package updates.
Merge remote-tracking branch 'origin/master-AIO' into feature/IO-3096-GlobalNotifications
2025-02-27 13:01:23 -05:00 · 2025-02-27 11:56:31 -05:00 · 2025-02-26 16:46:00 -05:00 · 2025-02-26 16:44:25 -05:00 · 2025-02-26 16:30:16 -05:00 · 2025-02-26 15:52:21 -05:00
299 changed files with 16551 additions and 9460 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -9,13 +9,13 @@ orbs:
 jobs:
  imex-api-deploy:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
    steps:
      - checkout
      - eb/setup
      - run:
          command: |
-            eb init imex-online-production-api -r ca-central-1 -p "Node.js 18 running on 64bit Amazon Linux 2"
+            eb init imex-online-production-api -r ca-central-1 -p "Node.js 22 running on 64bit Amazon Linux 2023"
            eb status --verbose
            eb deploy
            eb status
@@ -28,7 +28,7 @@ jobs:

  imex-hasura-migrate:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
    parameters:
      secret:
        type: string
@@ -52,7 +52,7 @@ jobs:
          pipeline_number: << pipeline.number >>
  imex-app-build:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
    resource_class: large
    working_directory: ~/repo/client
    steps:
@@ -77,7 +77,7 @@ jobs:

  imex-app-beta-build:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
    resource_class: large
    working_directory: ~/repo/client

@@ -114,7 +114,7 @@ jobs:
      - eb/setup
      - run:
          command: |
-            eb init romeonline-productionapi -r us-east-2 -p "Node.js 18 running on 64bit Amazon Linux 2"
+            eb init romeonline-productionapi -r us-east-2 -p "Node.js 22 running on 64bit Amazon Linux 2023"
            eb status --verbose
            eb deploy
            eb status
@@ -126,7 +126,7 @@ jobs:
          pipeline_number: << pipeline.number >>
  rome-hasura-migrate:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
    parameters:
      secret:
        type: string
@@ -150,7 +150,7 @@ jobs:
          pipeline_number: << pipeline.number >>
  rome-app-build:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1

    working_directory: ~/repo/client

@@ -181,7 +181,7 @@ jobs:

  test-rome-hasura-migrate:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
    parameters:
      secret:
        type: string
@@ -208,7 +208,7 @@ jobs:

  test-rome-app-build:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1

    working_directory: ~/repo/client

@@ -239,7 +239,7 @@ jobs:

  test-hasura-migrate:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
    parameters:
      secret:
        type: string
@@ -266,7 +266,7 @@ jobs:

  imex-test-app-build:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
    resource_class: large
    working_directory: ~/repo/client

@@ -286,7 +286,7 @@ jobs:

  imex-test-app-beta-build:
    docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
    resource_class: large
    working_directory: ~/repo/client

--- a/2
+++ b/2
@@ -3,7 +3,7 @@ FROM amazonlinux:2023

 # Install Git and Node.js (Amazon Linux 2023 uses the DNF package manager)
 RUN dnf install -y git \
-    && curl -sL https://rpm.nodesource.com/setup_20.x | bash - \
+    && curl -sL https://rpm.nodesource.com/setup_22.x | bash - \
    && dnf install -y nodejs \
    && dnf clean all

--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
    <!--

    BabelEdit project file
@@ -6369,6 +6369,27 @@
                                    <folder_node>
                                        <name>md_parts_scan</name>
                                        <children>
+                                            <concept_node>
+                                                <name>caseInsensitive</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                            <concept_node>
                                                <name>expression</name>
                                                <definition_loaded>false</definition_loaded>
@@ -6390,6 +6411,27 @@
                                                    </translation>
                                                </translations>
                                            </concept_node>
+                                            <concept_node>
+                                                <name>field</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                            <concept_node>
                                                <name>flags</name>
                                                <definition_loaded>false</definition_loaded>
@@ -6411,6 +6453,111 @@
                                                    </translation>
                                                </translations>
                                            </concept_node>
+                                            <concept_node>
+                                                <name>mark_critical</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>operation</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>update_field</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>update_value</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>value</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                        </children>
                                    </folder_node>
                                    <concept_node>
@@ -11859,6 +12006,27 @@
                                            </translation>
                                        </translations>
                                    </concept_node>
+                                    <concept_node>
+                                        <name>shop_enabled_features</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                    <concept_node>
                                        <name>shopinfo</name>
                                        <definition_loaded>false</definition_loaded>
@@ -11987,6 +12155,158 @@
                                    </concept_node>
                                </children>
                            </folder_node>
+                            <folder_node>
+                                <name>operations</name>
+                                <children>
+                                    <concept_node>
+                                        <name>contains</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>ends_with</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>equals</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>greater_than</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>less_than</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>not_equals</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>starts_with</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                            <folder_node>
                                <name>successes</name>
                                <children>
@@ -12076,6 +12396,37 @@
                                    </concept_node>
                                </children>
                            </folder_node>
+                            <folder_node>
+                                <name>tooltips</name>
+                                <children>
+                                    <folder_node>
+                                        <name>md_parts_scan</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>update_value_tooltip</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                        </children>
+                                    </folder_node>
+                                </children>
+                            </folder_node>
                            <folder_node>
                                <name>validation</name>
                                <children>
@@ -18855,6 +19206,27 @@
                                            </translation>
                                        </translations>
                                    </concept_node>
+                                    <concept_node>
+                                        <name>ok</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                    <concept_node>
                                        <name>previous</name>
                                        <definition_loaded>false</definition_loaded>
@@ -19149,6 +19521,27 @@
                                            </translation>
                                        </translations>
                                    </concept_node>
+                                    <concept_node>
+                                        <name>sharetoteams</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                    <concept_node>
                                        <name>submit</name>
                                        <definition_loaded>false</definition_loaded>
@@ -23131,6 +23524,27 @@
                                            </translation>
                                        </translations>
                                    </concept_node>
+                                    <concept_node>
+                                        <name>alt_partno</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                    <concept_node>
                                        <name>amount</name>
                                        <definition_loaded>false</definition_loaded>
@@ -23236,6 +23650,27 @@
                                            </translation>
                                        </translations>
                                    </concept_node>
+                                    <concept_node>
+                                        <name>include_in_part_cnt</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                    <folder_node>
                                        <name>lbr_types</name>
                                        <children>
@@ -42812,6 +43247,27 @@
                                            </translation>
                                        </translations>
                                    </concept_node>
+                                    <concept_node>
+                                        <name>parts_returns</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                    <concept_node>
                                        <name>print</name>
                                        <definition_loaded>false</definition_loaded>
@@ -48279,6 +48735,27 @@
                                            </translation>
                                        </translations>
                                    </concept_node>
+                                    <concept_node>
+                                        <name>unassigned</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                    <concept_node>
                                        <name>vertical</name>
                                        <definition_loaded>false</definition_loaded>
@@ -52454,6 +52931,27 @@
                                            </translation>
                                        </translations>
                                    </concept_node>
+                                    <concept_node>
+                                        <name>purchases_by_date_excel</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                    <concept_node>
                                        <name>purchases_by_date_range_detail</name>
                                        <definition_loaded>false</definition_loaded>
@@ -54205,6 +54703,27 @@
                                            </translation>
                                        </translations>
                                    </concept_node>
+                                    <concept_node>
+                                        <name>view</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                </children>
                            </folder_node>
                            <folder_node>
--- a/client/index.html
+++ b/client/index.html
@@ -62,7 +62,17 @@
      t = d.getElementsByTagName("script")[0];
      t.parentNode.insertBefore(s, t);
    </script>
-
+    <script type="text/javascript">
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
+      (function () {
+        d = document;
+        s = d.createElement("script");
+        s.src = "https://client.crisp.chat/l.js";
+        s.async = 1;
+        d.getElementsByTagName("head")[0].appendChild(s);
+      })();
+    </script>
    <% } %>
    <script>
      !(function () {
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@@ -8,78 +8,77 @@
  "private": true,
  "proxy": "http://localhost:4000",
  "dependencies": {
-    "@ant-design/pro-layout": "^7.19.12",
-    "@apollo/client": "^3.11.8",
+    "@ant-design/pro-layout": "^7.22.3",
+    "@apollo/client": "^3.13.1",
    "@emotion/is-prop-valid": "^1.3.1",
-    "@fingerprintjs/fingerprintjs": "^4.5.0",
+    "@fingerprintjs/fingerprintjs": "^4.6.1",
    "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.2.7",
-    "@sentry/cli": "^2.36.2",
+    "@reduxjs/toolkit": "^2.6.0",
+    "@sentry/cli": "^2.42.2",
    "@sentry/react": "^7.114.0",
    "@splitsoftware/splitio-react": "^1.13.0",
-    "@tanem/react-nprogress": "^5.0.51",
-    "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.20.1",
+    "@tanem/react-nprogress": "^5.0.53",
+    "@vitejs/plugin-react": "^4.3.4",
+    "antd": "^5.24.2",
    "apollo-link-logger": "^2.0.1",
    "apollo-link-sentry": "^3.3.0",
    "autosize": "^6.0.1",
-    "axios": "^1.7.7",
+    "axios": "^1.8.1",
    "classnames": "^2.5.1",
    "css-box-model": "^1.2.1",
    "dayjs": "^1.11.13",
-    "dayjs-business-days2": "^1.2.2",
+    "dayjs-business-days2": "^1.3.0",
    "dinero.js": "^1.9.1",
-    "dotenv": "^16.4.5",
+    "dotenv": "^16.4.7",
    "env-cmd": "^10.1.0",
    "exifr": "^7.1.3",
    "firebase": "^10.13.2",
-    "graphql": "^16.9.0",
+    "graphql": "^16.10.0",
    "i18next": "^23.15.1",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-browser-languagedetector": "^8.0.4",
    "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.11.9",
+    "libphonenumber-js": "^1.12.4",
    "logrocket": "^8.1.2",
-    "markerjs2": "^2.32.2",
+    "markerjs2": "^2.32.3",
    "memoize-one": "^6.0.0",
    "normalize-url": "^8.0.1",
    "object-hash": "^3.0.0",
    "prop-types": "^15.8.1",
-    "query-string": "^9.1.0",
+    "query-string": "^9.1.1",
    "raf-schd": "^4.0.3",
    "react": "^18.3.1",
-    "react-big-calendar": "^1.14.1",
+    "react-big-calendar": "^1.18.0",
    "react-color": "^2.19.3",
-    "react-cookie": "^7.2.0",
+    "react-cookie": "^7.2.2",
    "react-dom": "^18.3.1",
    "react-drag-listview": "^2.0.0",
    "react-grid-gallery": "^1.0.1",
    "react-grid-layout": "1.3.4",
    "react-i18next": "^14.1.3",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.5.0",
    "react-image-lightbox": "^5.1.4",
-    "react-markdown": "^9.0.1",
-    "react-number-format": "^5.4.2",
+    "react-markdown": "^9.0.3",
+    "react-number-format": "^5.4.3",
    "react-popopo": "^2.1.9",
    "react-product-fruits": "^2.2.61",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.2.0",
    "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^6.30.0",
    "react-sticky": "^6.0.3",
-    "react-virtualized": "^9.22.5",
-    "react-virtuoso": "^4.10.4",
-    "recharts": "^2.12.7",
+    "react-virtuoso": "^4.12.5",
+    "recharts": "^2.15.0",
    "redux": "^5.0.1",
    "redux-actions": "^3.0.3",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.3.0",
    "redux-state-sync": "^3.1.4",
    "reselect": "^5.1.1",
-    "sass": "^1.79.3",
-    "socket.io-client": "^4.8.0",
-    "styled-components": "^6.1.13",
+    "sass": "^1.85.1",
+    "socket.io-client": "^4.8.1",
+    "styled-components": "^6.1.15",
    "subscriptions-transport-ws": "^0.11.0",
    "use-memo-one": "^1.1.3",
-    "userpilot": "^1.3.6",
+    "userpilot": "^1.3.8",
    "vite-plugin-ejs": "^1.7.0",
    "web-vitals": "^3.5.2"
  },
@@ -121,36 +120,36 @@
    "@rollup/rollup-linux-x64-gnu": "4.6.1"
  },
  "devDependencies": {
-    "@ant-design/icons": "^5.5.1",
+    "@ant-design/icons": "^5.6.1",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.24.7",
-    "@dotenvx/dotenvx": "^1.14.1",
-    "@emotion/babel-plugin": "^11.12.0",
-    "@emotion/react": "^11.13.3",
-    "@eslint/js": "^9.15.0",
+    "@babel/preset-react": "^7.26.3",
+    "@dotenvx/dotenvx": "^1.38.3",
+    "@emotion/babel-plugin": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@eslint/js": "^9.21.0",
    "@sentry/webpack-plugin": "^2.22.4",
    "@testing-library/cypress": "^10.0.2",
-    "browserslist": "^4.23.3",
+    "browserslist": "^4.24.4",
    "browserslist-to-esbuild": "^2.1.1",
-    "chalk": "^5.3.0",
+    "chalk": "^5.4.1",
    "cross-env": "^7.0.3",
-    "cypress": "^13.14.2",
+    "cypress": "^13.17.0",
    "eslint": "^8.57.1",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-react": "^7.37.2",
-    "globals": "^15.12.0",
-    "memfs": "^4.12.0",
+    "eslint-plugin-react": "^7.37.4",
+    "globals": "^15.15.0",
+    "memfs": "^4.17.0",
    "os-browserify": "^0.3.0",
-    "react-error-overlay": "6.0.11",
+    "react-error-overlay": "^6.1.0",
    "redux-logger": "^3.0.6",
    "source-map-explorer": "^2.5.3",
-    "vite": "^5.4.7",
-    "vite-plugin-babel": "^1.2.0",
+    "vite": "^6.2.0",
+    "vite-plugin-babel": "^1.3.0",
    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-pwa": "^0.20.5",
+    "vite-plugin-node-polyfills": "^0.23.0",
+    "vite-plugin-pwa": "^0.21.1",
    "vite-plugin-style-import": "^2.0.0",
-    "workbox-window": "^7.1.0"
+    "workbox-window": "^7.3.0"
  }
 }
--- a/client/src/App/App.jsx
+++ b/client/src/App/App.jsx
@@ -1,10 +1,10 @@
 import { useSplitClient } from "@splitsoftware/splitio-react";
 import { Button, Result } from "antd";
 import LogRocket from "logrocket";
-import React, { lazy, Suspense, useEffect, useState } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import DocumentEditorContainer from "../components/document-editor/document-editor.container";
 import ErrorBoundary from "../components/error-boundary/error-boundary.component"; // Component Imports
@@ -22,6 +22,7 @@ import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
 import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
 import { SocketProvider } from "../contexts/SocketIO/socketContext.jsx";
+import { NotificationProvider } from "../contexts/Notifications/notificationContext.jsx";

 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
@@ -45,6 +46,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
  const client = useSplitClient().client;
  const [listenersAdded, setListenersAdded] = useState(false);
  const { t } = useTranslation();
+  const navigate = useNavigate();

  useEffect(() => {
    if (!navigator.onLine) {
@@ -145,84 +147,85 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
          rome: "9BkbEseqNqxw8jUH"
        })}
      />
-
-      <Routes>
-        <Route
-          path="*"
-          element={
-            <ErrorBoundary>
-              <LandingPage />
-            </ErrorBoundary>
-          }
-        />
-        <Route
-          path="/signin"
-          element={
-            <ErrorBoundary>
-              <SignInPage />
-            </ErrorBoundary>
-          }
-        />
-        <Route
-          path="/resetpassword"
-          element={
-            <ErrorBoundary>
-              <ResetPassword />
-            </ErrorBoundary>
-          }
-        />
-        <Route
-          path="/csi/:surveyId"
-          element={
-            <ErrorBoundary>
-              <CsiPage />
-            </ErrorBoundary>
-          }
-        />
-        <Route
-          path="/disclaimer"
-          element={
-            <ErrorBoundary>
-              <DisclaimerPage />
-            </ErrorBoundary>
-          }
-        />
-        <Route
-          path="/mp/:paymentIs"
-          element={
-            <ErrorBoundary>
-              <MobilePaymentContainer />
-            </ErrorBoundary>
-          }
-        />
-        <Route
-          path="/manage/*"
-          element={
-            <ErrorBoundary>
-              <SocketProvider bodyshop={bodyshop}>
-                <PrivateRoute isAuthorized={currentUser.authorized} />
-              </SocketProvider>
-            </ErrorBoundary>
-          }
-        >
-          <Route path="*" element={<ManagePage />} />
-        </Route>
-        <Route
-          path="/tech/*"
-          element={
-            <ErrorBoundary>
-              <SocketProvider bodyshop={bodyshop}>
-                <PrivateRoute isAuthorized={currentUser.authorized} />
-              </SocketProvider>
-            </ErrorBoundary>
-          }
-        >
-          <Route path="*" element={<TechPageContainer />} />
-        </Route>
-        <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
-          <Route path="*" element={<DocumentEditorContainer />} />
-        </Route>
-      </Routes>
+      <NotificationProvider>
+        <Routes>
+          <Route
+            path="*"
+            element={
+              <ErrorBoundary>
+                <LandingPage />
+              </ErrorBoundary>
+            }
+          />
+          <Route
+            path="/signin"
+            element={
+              <ErrorBoundary>
+                <SignInPage />
+              </ErrorBoundary>
+            }
+          />
+          <Route
+            path="/resetpassword"
+            element={
+              <ErrorBoundary>
+                <ResetPassword />
+              </ErrorBoundary>
+            }
+          />
+          <Route
+            path="/csi/:surveyId"
+            element={
+              <ErrorBoundary>
+                <CsiPage />
+              </ErrorBoundary>
+            }
+          />
+          <Route
+            path="/disclaimer"
+            element={
+              <ErrorBoundary>
+                <DisclaimerPage />
+              </ErrorBoundary>
+            }
+          />
+          <Route
+            path="/mp/:paymentIs"
+            element={
+              <ErrorBoundary>
+                <MobilePaymentContainer />
+              </ErrorBoundary>
+            }
+          />
+          <Route
+            path="/manage/*"
+            element={
+              <ErrorBoundary>
+                <SocketProvider bodyshop={bodyshop} navigate={navigate}>
+                  <PrivateRoute isAuthorized={currentUser.authorized} />
+                </SocketProvider>
+              </ErrorBoundary>
+            }
+          >
+            <Route path="*" element={<ManagePage />} />
+          </Route>
+          <Route
+            path="/tech/*"
+            element={
+              <ErrorBoundary>
+                <SocketProvider bodyshop={bodyshop} navigate={navigate}>
+                  <PrivateRoute isAuthorized={currentUser.authorized} />
+                </SocketProvider>
+              </ErrorBoundary>
+            }
+          >
+            <Route path="*" element={<TechPageContainer />} />
+          </Route>
+          <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
+            <Route path="*" element={<DocumentEditorContainer />} />
+          </Route>
+        </Routes>
+      </NotificationProvider>
    </Suspense>
  );
 }
--- a/client/src/App/App.styles.scss
+++ b/client/src/App/App.styles.scss
@@ -5,6 +5,13 @@
  border-bottom: 1px solid #74695c !important;
 }

+// TODO: This was added because the newest release of ant was making the text color and the background color the same on a selected header
+// Tried all available tokens (https://ant.design/components/menu?locale=en-US) and even reverted all our custom styles, to no avail
+// This should be kept an eye on, especially if implementing DARK MODE
+.ant-menu-submenu-title {
+  color: rgba(255, 255, 255, 0.65) !important;
+}
+
 .imex-table-header {
  display: flex;
  flex-wrap: wrap;
--- a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
+++ b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
@@ -85,6 +85,17 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
      sortOrder: state.sortedInfo.columnKey === "amount" && state.sortedInfo.order,
      render: (text, record) => <CurrencyFormatter>{record.amount}</CurrencyFormatter>
    },
+    {
+      title: t("payments.fields.type"),
+      dataIndex: "type",
+      key: "type",
+      sorter: (a, b) => a.type.localeCompare(b.type),
+      sortOrder: state.sortedInfo.columnKey === "type" && state.sortedInfo.order,
+      filters: bodyshop.md_payment_types.map((s) => {
+        return { text: s, value: [s] };
+      }),
+      onFilter: (value, record) => value.includes(record.type)
+    },
    {
      title: t("payments.fields.memo"),
      dataIndex: "memo",
--- a/client/src/components/allocations-assignment/allocations-assignment.container.jsx
+++ b/client/src/components/allocations-assignment/allocations-assignment.container.jsx
@@ -3,7 +3,7 @@ import AllocationsAssignmentComponent from "./allocations-assignment.component";
 import { useMutation } from "@apollo/client";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
-import { notification } from "antd";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function AllocationsAssignmentContainer({ jobLineId, hours, refetch }) {
  const visibilityState = useState(false);
@@ -14,6 +14,7 @@ export default function AllocationsAssignmentContainer({ jobLineId, hours, refet
    employeeid: null
  });
  const [insertAllocation] = useMutation(INSERT_ALLOCATION);
+  const notification = useNotification();

  const handleAssignment = () => {
    insertAllocation({ variables: { alloc: { ...assignment } } })
--- a/client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.container.jsx
+++ b/client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.container.jsx
@@ -3,7 +3,7 @@ import AllocationsBulkAssignment from "./allocations-bulk-assignment.component";
 import { useMutation } from "@apollo/client";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
-import { notification } from "antd";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function AllocationsBulkAssignmentContainer({ jobLines, refetch }) {
  const visibilityState = useState(false);
@@ -12,6 +12,7 @@ export default function AllocationsBulkAssignmentContainer({ jobLines, refetch }
    employeeid: null
  });
  const [insertAllocation] = useMutation(INSERT_ALLOCATION);
+  const notification = useNotification();

  const handleAssignment = () => {
    const allocs = jobLines.reduce((acc, value) => {
--- a/client/src/components/allocations-employee-label/allocations-employee-label.container.jsx
+++ b/client/src/components/allocations-employee-label/allocations-employee-label.container.jsx
@@ -2,12 +2,13 @@ import React from "react";
 import { useMutation } from "@apollo/client";
 import { DELETE_ALLOCATION } from "../../graphql/allocations.queries";
 import AllocationsLabelComponent from "./allocations-employee-label.component";
-import { notification } from "antd";
 import { useTranslation } from "react-i18next";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function AllocationsLabelContainer({ allocation, refetch }) {
  const [deleteAllocation] = useMutation(DELETE_ALLOCATION);
  const { t } = useTranslation();
+  const notification = useNotification();

  const handleClick = (e) => {
    e.preventDefault();
--- a/client/src/components/bill-delete-button/bill-delete-button.component.jsx
+++ b/client/src/components/bill-delete-button/bill-delete-button.component.jsx
@@ -1,6 +1,6 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DELETE_BILL } from "../../graphql/bills.queries";
@@ -9,6 +9,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
@@ -21,6 +22,7 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
  const [loading, setLoading] = useState(false);
  const { t } = useTranslation();
  const [deleteBill] = useMutation(DELETE_BILL);
+  const notification = useNotification();

  const handleDelete = async () => {
    setLoading(true);
--- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
+++ b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
@@ -1,6 +1,6 @@
 import { useApolloClient, useMutation } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Button, Checkbox, Form, Modal, notification, Space } from "antd";
+import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";
 import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -24,6 +24,7 @@ import BillFormContainer from "../bill-form/bill-form.container";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  billEnterModal: selectBillEnterModal,
@@ -49,6 +50,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
  const [loading, setLoading] = useState(false);
  const client = useApolloClient();
  const [generateLabel, setGenerateLabel] = useLocalStorage("enter_bill_generate_label", false);
+  const notification = useNotification();

  const {
    treatments: { Enhanced_Payroll }
@@ -291,7 +293,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
              jobid: values.jobid,
              invoice_number: remainingValues.invoice_number,
              vendorid: remainingValues.vendorid
-            }
+            },
+            notification
          });
        });
      } else {
@@ -305,7 +308,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
              billId: billId,
              tagsArray: null,
              callback: null
-            }
+            },
+            notification
          );
        });
      }
@@ -325,7 +329,9 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
          }
        },
        {},
-        "p"
+        "p",
+        null,
+        notification
      );
    }

--- a/client/src/components/bill-form/bill-form.lines.component.jsx
+++ b/client/src/components/bill-form/bill-form.lines.component.jsx
@@ -473,7 +473,7 @@ export function BillEnterModalLinesComponent({
                valuePropName: "checked",
                initialValue: InstanceRenderManager({
                  imex: true,
-                  rome: false,
+                  rome: false
                }),
                name: [field.name, "applicable_taxes", "federal"]
              };
@@ -625,11 +625,15 @@ const EditableCell = ({
  wrapper,
  ...restProps
 }) => {
+  const propsFinal = formItemProps && formItemProps(record);
+  if (propsFinal && "key" in propsFinal) {
+    delete propsFinal.key;
+  }
  if (additional)
    return (
      <td {...restProps}>
        <div size="small">
-          <Form.Item name={dataIndex} labelCol={{ span: 0 }} {...(formItemProps && formItemProps(record))}>
+          <Form.Item name={dataIndex} labelCol={{ span: 0 }} {...propsFinal}>
            {(formInput && formInput(record, record.name)) || children}
          </Form.Item>
          {additional && additional(record, record.name)}
@@ -640,7 +644,7 @@ const EditableCell = ({
    return (
      <wrapper>
        <td {...restProps}>
-          <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...(formItemProps && formItemProps(record))}>
+          <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...propsFinal}>
            {(formInput && formInput(record, record.name)) || children}
          </Form.Item>
        </td>
@@ -648,7 +652,7 @@ const EditableCell = ({
    );
  return (
    <td {...restProps}>
-      <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...(formItemProps && formItemProps(record))}>
+      <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...propsFinal}>
        {(formInput && formInput(record, record.name)) || children}
      </Form.Item>
    </td>
--- a/client/src/components/bill-mark-exported-button/bill-mark-exported-button.component.jsx
+++ b/client/src/components/bill-mark-exported-button/bill-mark-exported-button.component.jsx
@@ -1,5 +1,5 @@
 import { gql, useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

@@ -8,6 +8,7 @@ import { createStructuredSelector } from "reselect";
 import { selectAuthLevel, selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -24,6 +25,7 @@ export function BillMarkExportedButton({ currentUser, bodyshop, authLevel, bill
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
+  const notification = useNotification();

  const [updateBill] = useMutation(gql`
    mutation UPDATE_BILL($billId: uuid!) {
--- a/client/src/components/bill-print-button/bill-print-button.component.jsx
+++ b/client/src/components/bill-print-button/bill-print-button.component.jsx
@@ -3,11 +3,13 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function BillPrintButton({ billid }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const Templates = TemplateList("job_special");
+  const notification = useNotification();

  const submitHandler = async () => {
    setLoading(true);
@@ -20,7 +22,9 @@ export default function BillPrintButton({ billid }) {
          }
        },
        {},
-        "p"
+        "p",
+        null,
+        notification
      );
    } catch (e) {
      console.warn("Warning: Error generating a document.");
--- a/client/src/components/bill-reexport-button/bill-reexport-button.component.jsx
+++ b/client/src/components/bill-reexport-button/bill-reexport-button.component.jsx
@@ -1,5 +1,5 @@
 import { gql, useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -21,6 +22,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(BillMarkForReexportB
 export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
+  const notification = useNotification();

  const [updateBill] = useMutation(gql`
    mutation UPDATE_BILL($billId: uuid!) {
--- a/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx
+++ b/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx
@@ -1,6 +1,6 @@
 import { FileAddFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, notification, Tooltip } from "antd";
+import { Button, Tooltip } from "antd";
 import { t } from "i18next";
 import dayjs from "./../../utils/day";
 import React, { useState } from "react";
@@ -11,6 +11,7 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import queryString from "query-string";
 import { useLocation } from "react-router-dom";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -25,6 +26,7 @@ export function BilllineAddInventory({ currentUser, bodyshop, billline, disabled
  const [loading, setLoading] = useState(false);
  const { billid } = queryString.parse(useLocation().search);
  const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
+  const notification = useNotification();

  const addToInventory = async () => {
    setLoading(true);
--- a/client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table-modal.container.jsx
+++ b/client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table-modal.container.jsx
@@ -9,6 +9,7 @@ import { selectCaBcEtfTableConvert } from "../../redux/modals/modals.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import CaBcEtfTableModalComponent from "./ca-bc-etf-table.modal.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  caBcEtfTableModal: selectCaBcEtfTableConvert
@@ -25,6 +26,7 @@ export function ContractsFindModalContainer({ caBcEtfTableModal, toggleModalVisi
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const EtfTemplate = TemplateList("special").ca_bc_etf_table;
+  const notification = useNotification();

  const handleFinish = async (values) => {
    logImEXEvent("ca_bc_etf_table_parse");
@@ -53,7 +55,9 @@ export function ContractsFindModalContainer({ caBcEtfTableModal, toggleModalVisi
        }
      },
      {},
-      values.sendby === "email" ? "e" : "p"
+      values.sendby === "email" ? "e" : "p",
+      null,
+      notification
    );
    setLoading(false);
  };
--- a/client/src/components/card-payment-modal/card-payment-modal.component..jsx
+++ b/client/src/components/card-payment-modal/card-payment-modal.component..jsx
@@ -1,6 +1,6 @@
 import { CopyFilled, DeleteFilled } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, Input, message, notification, Row, Space, Spin, Statistic } from "antd";
+import { Button, Card, Col, Form, Input, message, Row, Space, Spin, Statistic } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -15,6 +15,7 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
 import { getCurrentUser } from "../../firebase/firebase.utils";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  cardPaymentModal: selectCardPayment,
@@ -48,6 +49,7 @@ const CardPaymentModalComponent = ({
  const [loading, setLoading] = useState(false);
  const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
  const { t } = useTranslation();
+  const notification = useNotification();

  const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
    variables: { jobids: [context.jobid] },
@@ -133,15 +135,19 @@ const CardPaymentModalComponent = ({
      if (window.intellipay) {
        // eslint-disable-next-line no-eval
        eval(response.data);
-        SetIntellipayCallbackFunctions();
-        window.intellipay.autoOpen();
+        pollForIntelliPay(() => {
+          SetIntellipayCallbackFunctions();
+          window.intellipay.autoOpen();
+        });
      } else {
        const rg = document.createRange();
        const node = rg.createContextualFragment(response.data);
        document.documentElement.appendChild(node);
-        SetIntellipayCallbackFunctions();
-        window.intellipay.isAutoOpen = true;
-        window.intellipay.initialize();
+        pollForIntelliPay(() => {
+          SetIntellipayCallbackFunctions();
+          window.intellipay.isAutoOpen = true;
+          window.intellipay.initialize();
+        });
      }
    } catch (error) {
      notification.open({
@@ -345,3 +351,27 @@ const CardPaymentModalComponent = ({
 };

 export default connect(mapStateToProps, mapDispatchToProps)(CardPaymentModalComponent);
+
+//Poll for window.IntelliPay.fixAmount for 5 seconds. If it doesn't come up, just try anyways to force the possible error.
+function pollForIntelliPay(callbackFunction) {
+  const timeout = 5000;
+  const interval = 150; // Poll every 100 milliseconds
+  const startTime = Date.now();
+
+  function checkFixAmount() {
+    if (window.intellipay && window.intellipay.fixAmount !== undefined) {
+      callbackFunction();
+      return;
+    }
+
+    if (Date.now() - startTime >= timeout) {
+      console.log("Stopped polling IntelliPay after 10 seconds. Attemping to set functions anyways.");
+      callbackFunction();
+      return;
+    }
+
+    setTimeout(checkFixAmount, interval);
+  }
+
+  checkFixAmount();
+}
--- a/client/src/components/card-payment-modal/card-payment-modal.container..jsx
+++ b/client/src/components/card-payment-modal/card-payment-modal.container..jsx
@@ -6,7 +6,7 @@ import { createStructuredSelector } from "reselect";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectCardPayment } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import CardPaymentModalComponent from "./card-payment-modal.component.";
+import CardPaymentModalComponent from "./card-payment-modal.component";

 const mapStateToProps = createStructuredSelector({
  cardPaymentModal: selectCardPayment,
--- 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/socketContext";
 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/socketContext.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/socketContext.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/socketContext";
+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,13 +1,14 @@
 import { PlusOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Input, notification, Spin, Tag, Tooltip } from "antd";
-import React, { useContext, useState } from "react";
+import { Input, Spin, Tag, Tooltip } from "antd";
+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/socketContext.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -19,7 +20,8 @@ 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();
  const [updateLabel] = useMutation(UPDATE_CONVERSATION_LABEL);
--- 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/socketContext.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,6 +1,4 @@
-import { notification } from "antd";
 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";
@@ -9,7 +7,8 @@ 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/socketContext.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -22,7 +21,8 @@ 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/socketContext.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
@@ -42,8 +43,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
-    skip: chatVisible, // Skip when chat is visible
-    ...(pollInterval > 0 ? { pollInterval } : {})
+    pollInterval: 60 * 1000 // TODO: This is a fix for now, should be coming from sockets
  });

  // Socket connection status
@@ -85,29 +85,25 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh

  // Get unread count from the cache
  const unreadCount = (() => {
-    if (chatVisible) {
-      try {
-        const cachedData = client.readQuery({
-          query: CONVERSATION_LIST_QUERY,
-          variables: { offset: 0 }
-        });
+    try {
+      const cachedData = client.readQuery({
+        query: CONVERSATION_LIST_QUERY,
+        variables: { offset: 0 }
+      });

-        if (!cachedData?.conversations) return 0;
-
-        // Aggregate unread message count
-        return cachedData.conversations.reduce((total, conversation) => {
-          const unread = conversation.messages_aggregate?.aggregate?.count || 0;
-          return total + unread;
-        }, 0);
-      } catch (error) {
-        console.warn("Unread count not found in cache:", error);
-        return 0; // Fallback if not in cache
+      if (!cachedData?.conversations) {
+        return unreadData?.messages_aggregate?.aggregate?.count;
      }
-    } else if (unreadData?.messages_aggregate?.aggregate?.count) {
-      // Use the unread count from the query result
-      return unreadData.messages_aggregate.aggregate.count;
+
+      // Aggregate unread message count
+      return cachedData.conversations.reduce((total, conversation) => {
+        const unread = conversation.messages_aggregate?.aggregate?.count || 0;
+        return total + unread;
+      }, 0);
+    } catch (error) {
+      console.warn("Unread count not found in cache:", error);
+      return 0; // Fallback if not in cache
    }
-    return 0;
  })();

  return (
--- a/client/src/components/chat-print-button/chat-print-button.component.jsx
+++ b/client/src/components/chat-print-button/chat-print-button.component.jsx
@@ -6,6 +6,7 @@ import { createStructuredSelector } from "reselect";
 import { setEmailOptions } from "../../redux/email/email.actions";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({});

@@ -15,6 +16,7 @@ const mapDispatchToProps = (dispatch) => ({

 export function ChatPrintButton({ conversation }) {
  const [loading, setLoading] = useState(false);
+  const notification = useNotification();

  const generateDocument = (type) => {
    setLoading(true);
@@ -27,7 +29,8 @@ export function ChatPrintButton({ conversation }) {
        subject: TemplateList("messaging").conversation_list.subject
      },
      type,
-      conversation.id
+      conversation.id,
+      notification
    ).catch((e) => {
      console.warn("Something went wrong generating a document.");
    });
--- 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/socketContext.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/contract-convert-to-ro/contract-convert-to-ro.component.jsx
+++ b/client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, InputNumber, notification, Popover, Radio, Select, Space } from "antd";
+import { Button, Form, InputNumber, Popover, Radio, Select, Space } from "antd";
 import axios from "axios";
 import dayjs from "../../utils/day";
 import React, { useState } from "react";
@@ -9,6 +9,7 @@ import { useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -25,6 +26,7 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
  const [loading, setLoading] = useState(false);
  const [insertJob] = useMutation(INSERT_NEW_JOB);
  const history = useNavigate();
+  const notification = useNotification();

  const handleFinish = async (values) => {
    setLoading(true);
--- a/client/src/components/contract-form/contract-form-job-prefill.component.jsx
+++ b/client/src/components/contract-form/contract-form-job-prefill.component.jsx
@@ -1,12 +1,14 @@
 import { useLazyQuery } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { GET_JOB_FOR_CC_CONTRACT } from "../../graphql/jobs.queries";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function ContractCreateJobPrefillComponent({ jobId, form }) {
  const [call, { loading, error, data }] = useLazyQuery(GET_JOB_FOR_CC_CONTRACT);
  const { t } = useTranslation();
+  const notification = useNotification();

  const handleClick = () => {
    call({ variables: { id: jobId } });
--- a/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx
+++ b/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx
@@ -1,4 +1,4 @@
-import { Form, Modal, notification } from "antd";
+import { Form, Modal } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import CourtesyCarReturnModalComponent from "./courtesy-car-return-modal.compone
 import dayjs from "../../utils/day";
 import { RETURN_CONTRACT } from "../../graphql/cccontracts.queries";
 import { useMutation } from "@apollo/client";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  courtesyCarReturnModal: selectCourtesyCarReturn,
@@ -26,6 +27,8 @@ export function CCReturnModalContainer({ courtesyCarReturnModal, toggleModalVisi
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const [updateContract] = useMutation(RETURN_CONTRACT);
+  const notification = useNotification();
+
  const handleFinish = (values) => {
    setLoading(true);
    updateContract({
--- a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
+++ b/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
@@ -10,6 +10,7 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
  const [state, setState] = useState({
@@ -18,6 +19,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
  const [searchText, setSearchText] = useState("");
  const [filter, setFilter] = useLocalStorage("filter_courtesy_cars_list", null);
  const { t } = useTranslation();
+  const notification = useNotification();

  const columns = [
    {
@@ -64,8 +66,8 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
        },
        {
          text: t("courtesycars.status.unavailable"),
-          value: "courtesycars.status.unavailable",
-        },
+          value: "courtesycars.status.unavailable"
+        }
      ],
      onFilter: (value, record) => record.status === value,
      sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
@@ -239,7 +241,9 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
            }
          },
          {},
-          "p"
+          "p",
+          null,
+          notification
        )
    }
  ];
--- a/client/src/components/dashboard-grid/dashboard-grid.component.jsx
+++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx
@@ -1,6 +1,6 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
 import { gql, useMutation, useQuery } from "@apollo/client";
-import { Button, Dropdown, notification, Space } from "antd";
+import { Button, Dropdown, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import i18next from "i18next";
 import _ from "lodash";
@@ -46,6 +46,7 @@ import JobLifecycleDashboardComponent, {
 } from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component";
 import "./dashboard-grid.styles.scss";
 import { GenerateDashboardData } from "./dashboard-grid.utils";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const ResponsiveReactGridLayout = WidthProvider(Responsive);

@@ -64,6 +65,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
      ? bodyshop.associations[0].user.dashboardlayout
      : { items: [], layout: {}, layouts: [] })
  });
+  const notification = useNotification();

  const { loading, error, data, refetch } = useQuery(createDashboardQuery(state), {
    fetchPolicy: "network-only",
--- a/client/src/components/document-editor/document-editor.component.jsx
+++ b/client/src/components/document-editor/document-editor.component.jsx
@@ -9,6 +9,7 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import { handleUpload } from "../documents-upload/documents-upload.utility";
 import { GenerateSrcUrl } from "../jobs-documents-gallery/job-documents.utility";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -24,6 +25,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
  const [uploaded, setuploaded] = useState(false);
  const markerArea = useRef(null);
  const { t } = useTranslation();
+  const notification = useNotification();

  const triggerUpload = useCallback(
    async (dataUrl) => {
@@ -45,10 +47,11 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
          //billId: billId,
          tagsArray: ["edited"]
          //callback: callbackAfterUpload,
-        }
+        },
+        notification
      );
    },
-    [bodyshop, currentUser, document]
+    [bodyshop, currentUser, document, notification]
  );

  useEffect(() => {
--- a/client/src/components/documents-local-upload/documents-local-upload.component.jsx
+++ b/client/src/components/documents-local-upload/documents-local-upload.component.jsx
@@ -9,6 +9,7 @@ import { handleUpload } from "./documents-local-upload.utility";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import { useTranslation } from "react-i18next";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -27,6 +28,8 @@ export function DocumentsLocalUploadComponent({
 }) {
  const [fileList, setFileList] = useState([]);
  const { t } = useTranslation();
+  const notification = useNotification();
+
  const handleDone = (uid) => {
    setTimeout(() => {
      setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
@@ -53,7 +56,8 @@ export function DocumentsLocalUploadComponent({
            vendorid,
            invoice_number,
            callback: callbackAfterUpload
-          }
+          },
+          notification
        })
      }
      {...(!allowAllTypes && {
--- a/client/src/components/documents-local-upload/documents-local-upload.utility.js
+++ b/client/src/components/documents-local-upload/documents-local-upload.utility.js
@@ -2,10 +2,9 @@ import cleanAxios from "../../utils/CleanAxios";
 import { store } from "../../redux/store";
 import { addMediaForJob } from "../../redux/media/media.actions";
 import normalizeUrl from "normalize-url";
-import { notification } from "antd";
 import i18n from "i18next";

-export const handleUpload = async ({ ev, context }) => {
+export const handleUpload = async ({ ev, context, notification }) => {
  const { onError, onSuccess, onProgress, file } = ev;
  const { jobid, invoice_number, vendorid, callbackAfterUpload } = context;

@@ -43,11 +42,15 @@ export const handleUpload = async ({ ev, context }) => {
    }
  } else {
    onSuccess && onSuccess(file);
-    notification.open({
-      type: "success",
-      key: "docuploadsuccess",
-      message: i18n.t("documents.successes.insert")
-    });
+    if (notification) {
+      notification.open({
+        type: "success",
+        key: "docuploadsuccess",
+        message: i18n.t("documents.successes.insert")
+      });
+    } else {
+      console.error("No notification context found in document local upload utility.");
+    }
    store.dispatch(
      addMediaForJob({
        jobid,
--- a/client/src/components/documents-upload/documents-upload.component.jsx
+++ b/client/src/components/documents-upload/documents-upload.component.jsx
@@ -1,5 +1,5 @@
 import { UploadOutlined } from "@ant-design/icons";
-import { notification, Progress, Result, Space, Upload } from "antd";
+import { Progress, Result, Space, Upload } from "antd";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -9,6 +9,7 @@ import formatBytes from "../../utils/formatbytes";
 import { handleUpload } from "./documents-upload.utility";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -28,6 +29,7 @@ export function DocumentsUploadComponent({
 }) {
  const { t } = useTranslation();
  const [fileList, setFileList] = useState([]);
+  const notification = useNotification();

  const pct = useMemo(() => {
    return parseInt((totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100);
@@ -76,14 +78,18 @@ export function DocumentsUploadComponent({
        return true;
      }}
      customRequest={(ev) =>
-        handleUpload(ev, {
-          bodyshop: bodyshop,
-          uploaded_by: currentUser.email,
-          jobId: jobId,
-          billId: billId,
-          tagsArray: tagsArray,
-          callback: callbackAfterUpload
-        })
+        handleUpload(
+          ev,
+          {
+            bodyshop: bodyshop,
+            uploaded_by: currentUser.email,
+            jobId: jobId,
+            billId: billId,
+            tagsArray: tagsArray,
+            callback: callbackAfterUpload
+          },
+          notification
+        )
      }
      accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
      // showUploadList={false}
--- a/client/src/components/documents-upload/documents-upload.utility.js
+++ b/client/src/components/documents-upload/documents-upload.utility.js
@@ -1,4 +1,3 @@
-import { notification } from "antd";
 import axios from "axios";
 import i18n from "i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -14,7 +13,7 @@ import { store } from "../../redux/store";
 var cleanAxios = axios.create();
 cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);

-export const handleUpload = (ev, context) => {
+export const handleUpload = (ev, context, notification) => {
  logImEXEvent("document_upload", { filetype: ev.file.type });

  const { onError, onSuccess, onProgress } = ev;
@@ -24,10 +23,20 @@ export const handleUpload = (ev, context) => {

  let key = `${bodyshop.id}/${jobId}/${replaceAccents(fileName).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}`;
  let extension = fileName.split(".").pop();
-  uploadToCloudinary(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context);
+  uploadToCloudinary(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context, notification);
 };

-export const uploadToCloudinary = async (key, extension, fileType, file, onError, onSuccess, onProgress, context) => {
+export const uploadToCloudinary = async (
+  key,
+  extension,
+  fileType,
+  file,
+  onError,
+  onSuccess,
+  onProgress,
+  context,
+  notification
+) => {
  const { bodyshop, jobId, billId, uploaded_by, callback, tagsArray } = context;

  //Set variables for getting the signed URL.
--- a/client/src/components/email-overlay/email-overlay.container.jsx
+++ b/client/src/components/email-overlay/email-overlay.container.jsx
@@ -1,4 +1,4 @@
-import { Button, Divider, Form, Modal, notification, Space } from "antd";
+import { Button, Divider, Form, Modal, Space } from "antd";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +13,7 @@ import { EmailSettings } from "../../utils/TemplateConstants";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import EmailOverlayComponent from "./email-overlay.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  modalVisible: selectEmailVisible,
@@ -36,6 +37,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
    pdf: null
  });
  const [selectedMedia, setSelectedMedia] = useState([]);
+  const notification = useNotification();

  const defaultEmailFrom = {
    from: {
@@ -109,7 +111,14 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
  const render = async () => {
    logImEXEvent("email_render_template", { template: emailConfig.template });
    setLoading(true);
-    let { html, pdf, filename } = await RenderTemplate(emailConfig.template, bodyshop, true);
+    let { html, pdf, filename } = await RenderTemplate(
+      emailConfig.template,
+      bodyshop,
+      true,
+      false,
+      false,
+      notification
+    );

    const response = await axios.post("/render/inlinecss", {
      html: html,
--- a/client/src/components/email-test/email-test-component.jsx
+++ b/client/src/components/email-test/email-test-component.jsx
@@ -8,6 +8,7 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import dayjs from "../../utils/day";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser
@@ -19,6 +20,7 @@ const mapDispatchToProps = (dispatch) => ({

 export function EmailTestComponent({ currentUser, setEmailOptions }) {
  const [form] = Form.useForm();
+  const notification = useNotification();

  const handleFinish = (values) => {
    GenerateDocument(
@@ -40,7 +42,9 @@ export function EmailTestComponent({ currentUser, setEmailOptions }) {
      {
        to: values.to
      },
-      values.email ? "e" : "p"
+      values.email ? "e" : "p",
+      null,
+      notification
    );
  };

--- a/client/src/components/error-boundary/error-boundary.component.jsx
+++ b/client/src/components/error-boundary/error-boundary.component.jsx
@@ -1,10 +1,10 @@
+import * as Sentry from "@sentry/react";
 import { Button, Col, Collapse, Result, Row, Space } from "antd";
 import React from "react";
 import { withTranslation } from "react-i18next";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import * as Sentry from "@sentry/react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";

@@ -38,28 +38,23 @@ class ErrorBoundary extends React.Component {
  }

  handleErrorSubmit = () => {
-    InstanceRenderManager({
-      executeFunction: true,
-      args: [],
-      imex: () => {
-        window.$crisp.push([
-          "do",
-          "message:send",
-          [
-            "text",
-            `I hit the following error: \n\n
+    window.$crisp.push([
+      "do",
+      "message:send",
+      [
+        "text",
+        `I hit the following error: \n\n
              ${this.state.error.message}\n\n
              ${this.state.error.stack}\n\n
              URL:${window.location} as ${this.props.currentUser.email} for ${
                this.props.bodyshop && this.props.bodyshop.name
              }
              `
-          ]
-        ]);
+      ]
+    ]);
+
+    window.$crisp.push(["do", "chat:open"]);

-        window.$crisp.push(["do", "chat:open"]);
-      }
-    });
    //     const errorDescription = `**Please add relevant details about what you were doing before you encountered this issue**

    // ----
@@ -80,6 +75,22 @@ class ErrorBoundary extends React.Component {
  render() {
    const { t } = this.props;
    const { error, info } = this.state;
+
+    const collapseItems = error
+      ? [
+          {
+            key: "errors",
+            label: t("general.labels.errors"),
+            children: (
+              <div>
+                <strong>{error.message || "Unknown error"}</strong>
+                <div>{error.stack || "No stack trace available"}</div>
+              </div>
+            )
+          }
+        ]
+      : [];
+
    if (this.state.hasErrored === true) {
      logImEXEvent("error_boundary_rendered", { error, info });

@@ -127,14 +138,7 @@ class ErrorBoundary extends React.Component {
          />
          <Row>
            <Col offset={6} span={12}>
-              <Collapse bordered={false}>
-                <Collapse.Panel header={t("general.labels.errors")}>
-                  <div>
-                    <strong>{this.state.error.message}</strong>
-                  </div>
-                  <div>{this.state.error.stack}</div>
-                </Collapse.Panel>
-              </Collapse>
+              <Collapse bordered={false} items={collapseItems} />
            </Col>
          </Row>
        </div>
--- a/client/src/components/eula/eula.component.jsx
+++ b/client/src/components/eula/eula.component.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Button, Card, Checkbox, Col, Form, Input, Modal, notification, Row } from "antd";
+import { Button, Card, Checkbox, Col, Form, Input, Modal, Row } from "antd";
 import Markdown from "react-markdown";
 import { createStructuredSelector } from "reselect";
 import { selectCurrentEula, selectCurrentUser } from "../../redux/user/user.selectors";
@@ -12,6 +12,7 @@ import dayjs from "../../utils/day";

 import "./eula.styles.scss";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const Eula = ({ currentEula, currentUser, acceptEula }) => {
  const [formReady, setFormReady] = useState(false);
@@ -20,7 +21,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
  const [form] = Form.useForm();
  const markdownCardRef = useRef(null);
  const { t } = useTranslation();
-  const [api, contextHolder] = notification.useNotification();
+  const notification = useNotification();

  const handleScroll = useCallback(
    (e) => {
@@ -75,7 +76,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
      });
      acceptEula();
    } catch (err) {
-      api.error({
+      notification.error({
        message: t("eula.errors.acceptance.message"),
        description: t("eula.errors.acceptance.description"),
        placement: "bottomRight",
@@ -91,7 +92,6 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {

  return (
    <>
-      {contextHolder}
      <Modal
        title={t("eula.titles.modal")}
        className="eula-modal"
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -1,6 +1,7 @@
 import Icon, {
  BankFilled,
  BarChartOutlined,
+  BellFilled,
  CarFilled,
  CheckCircleOutlined,
  ClockCircleFilled,
@@ -26,7 +27,7 @@ import Icon, {
  UserOutlined
 } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu, Space } from "antd";
+import { Badge, Layout, Menu, Space, Spin } from "antd";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -44,6 +45,15 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapper from "../lock-wrapper/lock-wrapper.component";
+import { useState, useEffect } from "react";
+import { debounce } from "lodash";
+import { useQuery } from "@apollo/client";
+import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
+import NotificationCenterContainer from "../notification-center/notification-center.container.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+
+// Used to Determine if the Header is in Mobile Mode, and to toggle the multiple menus
+const HEADER_MOBILE_BREAKPOINT = 576;

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -116,18 +126,64 @@ function Header({

  const { t } = useTranslation();

-  // 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 { isConnected } = useSocket();
+  const [notificationVisible, setNotificationVisible] = useState(false);

+  const userAssociationId = bodyshop?.associations?.[0]?.id;
+
+  const {
+    data: unreadData,
+    refetch: refetchUnread,
+    loading: unreadLoading
+  } = useQuery(GET_UNREAD_COUNT, {
+    variables: { associationid: userAssociationId },
+    fetchPolicy: "network-only",
+    pollInterval: isConnected ? 0 : 30000, // Poll only if socket is down
+    skip: !userAssociationId // Skip query if no userAssociationId
+  });
+
+  const unreadCount = unreadData?.notifications_aggregate?.aggregate?.count ?? 0;
+
+  // Initial fetch and socket status handling
+  useEffect(() => {
+    if (userAssociationId) {
+      refetchUnread().catch((e) => console.error(`Something went wrong fetching unread notifications: ${e?.message}`));
+    }
+  }, [refetchUnread, userAssociationId]);
+
+  useEffect(() => {
+    if (!isConnected && !unreadLoading && userAssociationId) {
+      refetchUnread().catch((e) => console.error(`Something went wrong fetching unread notifications: ${e?.message}`));
+    }
+  }, [isConnected, unreadLoading, refetchUnread, userAssociationId]);
+
+  const handleNotificationClick = (e) => {
+    setNotificationVisible(!notificationVisible);
+    if (handleMenuClick) handleMenuClick(e);
+  };
+
+  const [isMobile, setIsMobile] = useState(() => {
+    const effectiveWidth = window.innerWidth / (window.devicePixelRatio || 1);
+    return effectiveWidth <= HEADER_MOBILE_BREAKPOINT;
+  });
+
+  const handleResize = debounce(() => {
+    const effectiveWidth = window.innerWidth / (window.devicePixelRatio || 1);
+    setIsMobile(effectiveWidth <= HEADER_MOBILE_BREAKPOINT);
+  }, 200);
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("orientationchange", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("orientationchange", handleResize);
+      handleResize.cancel(); // Cancel any pending debounced calls on cleanup
+    };
+  }, [handleResize]);
+
+  // Accounting children setup (unchanged)
  const accountingChildren = [];
-
  accountingChildren.push(
    {
      key: "bills",
@@ -350,6 +406,7 @@ function Header({
    children: accountingExportChildren
  });

+  // Define all menu items
  const menuItems = [
    {
      key: "home",
@@ -400,7 +457,8 @@ function Header({
          label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
        },
        {
-          type: "divider"
+          type: "divider",
+          id: "header-jobs-divider"
        },
        {
          key: "alljobs",
@@ -409,7 +467,8 @@ function Header({
          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
        },
        {
-          type: "divider"
+          type: "divider",
+          id: "header-jobs-divider2"
        },
        {
          key: "productionlist",
@@ -417,7 +476,6 @@ function Header({
          icon: <ScheduleOutlined />,
          label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
        },
-
        {
          key: "productionboard",
          id: "header-production-board",
@@ -430,9 +488,9 @@ function Header({
            </Link>
          )
        },
-
        {
-          type: "divider"
+          type: "divider",
+          id: "header-jobs-divider3"
        },
        {
          key: "scoreboard",
@@ -516,7 +574,6 @@ function Header({
        }
      ]
    },
-
    ...(accountingChildren.length > 0
      ? [
          {
@@ -534,7 +591,6 @@ function Header({
      icon: <PhoneOutlined />,
      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
    },
-
    {
      key: "temporarydocs",
      id: "header-temporarydocs",
@@ -547,7 +603,6 @@ function Header({
        </Link>
      )
    },
-
    {
      key: "tasks",
      id: "tasks",
@@ -556,6 +611,7 @@ function Header({
      children: [
        {
          key: "createTask",
+          id: "header-create-task",
          icon: <PlusCircleOutlined />,
          label: t("menus.header.create_task"),
          onClick: () => {
@@ -567,11 +623,13 @@ function Header({
        },
        {
          key: "mytasks",
+          id: "header-my-tasks",
          icon: <FaTasks />,
          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
        },
        {
          key: "all_tasks",
+          id: "header-all-tasks",
          icon: <FaTasks />,
          label: <Link to="/manage/tasks/alltasks">{t("menus.header.all_tasks")}</Link>
        }
@@ -617,7 +675,6 @@ function Header({
          icon: <Icon component={IoBusinessOutline} />,
          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
        },
-
        {
          key: "shop-csi",
          id: "header-shop-csi",
@@ -632,9 +689,33 @@ function Header({
        }
      ]
    },
+    // Right-aligned items on desktop, merged on mobile
+    {
+      key: "notifications",
+      icon: unreadLoading ? (
+        <Spin size="small" />
+      ) : (
+        <Badge count={unreadCount}>
+          <BellFilled />
+        </Badge>
+      ),
+      id: "header-notifications",
+      onClick: handleNotificationClick
+    },
+    {
+      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>
+      }))
+    },
    {
      key: "user",
-      label: currentUser.displayName || currentUser.email || t("general.labels.unknown"),
+      icon: <UserOutlined />,
+      // label: currentUser.displayName || currentUser.email || t("general.labels.unknown"),
      children: [
        {
          key: "signout",
@@ -650,14 +731,7 @@ function Header({
          icon: <Icon component={QuestionCircleFilled} />,
          label: t("menus.header.help"),
          onClick: () => {
-            window.open(
-              InstanceRenderManager({
-                imex: "https://help.imex.online/",
-                rome: "https://rometech.com//"
-              }),
-
-              "_blank"
-            );
+            window.open("https://help.imex.online/", "_blank");
          }
        },
        ...(InstanceRenderManager({
@@ -667,6 +741,7 @@ function Header({
          ? [
              {
                key: "rescue",
+                id: "header-rescue",
                icon: <Icon component={CarFilled} />,
                label: t("menus.header.rescueme"),
                onClick: () => {
@@ -675,7 +750,6 @@ function Header({
              }
            ]
          : []),
-
        {
          key: "shiftclock",
          id: "header-shiftclock",
@@ -688,63 +762,68 @@ 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,
-        label: <Link to={i.url}>{i.label}</Link>
-      }))
    }
  ];

  return (
-    <Layout.Header>
-      <Menu
-        mode="horizontal"
-        theme={"dark"}
-        selectedKeys={[selectedHeader]}
-        onClick={handleMenuClick}
-        subMenuCloseDelay={0.3}
-        items={menuItems}
-      />
+    <Layout.Header style={{ padding: 0 }}>
+      {isMobile ? (
+        <Menu
+          mode="horizontal"
+          theme="dark"
+          selectedKeys={[selectedHeader]}
+          onClick={handleMenuClick}
+          subMenuCloseDelay={0.3}
+          items={menuItems}
+          style={{ width: "100%" }}
+        />
+      ) : (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%"
+          }}
+        >
+          <Menu
+            mode="horizontal"
+            theme="dark"
+            selectedKeys={[selectedHeader]}
+            onClick={handleMenuClick}
+            subMenuCloseDelay={0.3}
+            items={menuItems.slice(0, -3)}
+            style={{
+              flex: "0 1 auto",
+              justifyContent: "flex-start",
+              minWidth: 0,
+              overflow: "visible"
+            }}
+          />
+          <div style={{ flex: "1 0 0" }} />
+          <Menu
+            mode="horizontal"
+            theme="dark"
+            selectedKeys={[selectedHeader]}
+            onClick={handleMenuClick}
+            subMenuCloseDelay={0.3}
+            items={menuItems.slice(-3)}
+            style={{
+              flex: "0 0 auto",
+              justifyContent: "flex-end",
+              overflow: "visible"
+            }}
+          />
+          <NotificationCenterContainer visible={notificationVisible} onClose={() => setNotificationVisible(false)} />
+        </div>
+      )}
    </Layout.Header>
  );
 }
--- a/client/src/components/header/header.container.jsx
+++ b/client/src/components/header/header.container.jsx
@@ -1,31 +1,8 @@
-import i18next from "i18next";
-import React from "react";
 import { connect } from "react-redux";
-import { setUserLanguage } from "../../redux/user/user.actions";
 import HeaderComponent from "./header.component";
-import { logImEXEvent } from "../../firebase/firebase.utils";

-const mapDispatchToProps = (dispatch) => ({
-  setUserLanguage: (language) => dispatch(setUserLanguage(language))
-});
-
-export function HeaderContainer({ setUserLanguage }) {
-  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} />;
+export function HeaderContainer() {
+  return <HeaderComponent />;
 }

-export default connect(null, mapDispatchToProps)(HeaderContainer);
+export default connect(null, null)(HeaderContainer);
--- a/client/src/components/inventory-line-delete/inventory-line-delete.component.jsx
+++ b/client/src/components/inventory-line-delete/inventory-line-delete.component.jsx
@@ -1,15 +1,17 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DELETE_INVENTORY_LINE } from "../../graphql/inventory.queries";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function InventoryLineDelete({ inventoryline, disabled, refetch }) {
  const [loading, setLoading] = useState(false);
  const { t } = useTranslation();
  const [deleteInventoryLine] = useMutation(DELETE_INVENTORY_LINE);
+  const notification = useNotification();

  const handleDelete = async () => {
    setLoading(true);
--- a/client/src/components/inventory-upsert-modal/inventory-upsert-modal.container.jsx
+++ b/client/src/components/inventory-upsert-modal/inventory-upsert-modal.container.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Form, Modal, notification } from "antd";
+import { Form, Modal } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectInventoryUpsert } from "../../redux/modals/modals.selectors";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import InventoryUpsertModal from "./inventory-upsert-modal.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -24,6 +25,7 @@ export function InventoryUpsertModalContainer({ currentUser, bodyshop, inventory
  const { t } = useTranslation();
  const [insertInventory] = useMutation(INSERT_INVENTORY_LINE);
  const [updateInventoryLine] = useMutation(UPDATE_INVENTORY_LINE);
+  const notification = useNotification();

  const { open, context, actions } = inventoryUpsertModal;
  const { existingInventory } = context;
--- a/client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx
+++ b/client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx
@@ -11,6 +11,7 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -30,6 +31,7 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });
+  const notification = useNotification();

  const showModal = () => {
    form.setFieldsValue({
@@ -59,7 +61,9 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
        context: restVals
      },
      { subject: TemplateList("job_special").special_thirdpartypayer.subject },
-      sendtype
+      sendtype,
+      null,
+      notification
    );
  };

--- a/client/src/components/job-at-change/job-at-change.component.jsx
+++ b/client/src/components/job-at-change/job-at-change.component.jsx
@@ -4,9 +4,10 @@ import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Dropdown, notification } from "antd";
+import { Dropdown } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -18,6 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function JobAltTransportChange({ bodyshop, job }) {
  const [updateJob] = useMutation(UPDATE_JOB);
  const { t } = useTranslation();
+  const notification = useNotification();

  const onClick = async ({ key }) => {
    const result = await updateJob({
--- a/client/src/components/job-at-change/schedule-event.color.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.color.component.jsx
@@ -4,9 +4,10 @@ import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Dropdown, notification } from "antd";
+import { Dropdown } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -18,6 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function ScheduleEventColor({ bodyshop, event }) {
  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
  const { t } = useTranslation();
+  const notification = useNotification();

  const onClick = async ({ key }) => {
    const result = await updateAppointment({
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -1,30 +1,31 @@
 import { AlertFilled } from "@ant-design/icons";
-import { Button, Divider, Dropdown, Form, Input, notification, Popover, Select, Space } from "antd";
+import { useMutation } from "@apollo/client";
+import { Button, Divider, Dropdown, Form, Input, Popover, Select, Space } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
-import dayjs from "../../utils/day";
 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 { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import dayjs from "../../utils/day";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
 import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
-import { useMutation } from "@apollo/client";
-import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
-import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -50,7 +51,8 @@ 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 = (
    <Space direction="vertical" wrap>
@@ -127,6 +129,9 @@ export function ScheduleEventComponent({
          <DataLabel label={t("jobs.fields.ownr_ph2")}>
            <ChatOpenButton phone={event.job && event.job.ownr_ph2} jobid={event.job.id} />
          </DataLabel>
+          <DataLabel hideIfNull label={t("jobs.fields.loss_of_use")}>
+            {(event.job && event.job.loss_of_use) || ""}
+          </DataLabel>
          <DataLabel label={t("jobs.fields.alt_transport")}>
            {(event.job && event.job.alt_transport) || ""}
            <ScheduleAtChange job={event && event.job} />
@@ -180,7 +185,8 @@ export function ScheduleEventComponent({
                        subject: Template.subject
                      },
                      "e",
-                      event.job && event.job.id
+                      event.job && event.job.id,
+                      notification
                    );
                  }
                },
--- a/client/src/components/job-at-change/schedule-event.container.jsx
+++ b/client/src/components/job-at-change/schedule-event.container.jsx
@@ -1,5 +1,4 @@
 import { useMutation } from "@apollo/client";
-import { notification } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
@@ -9,12 +8,15 @@ import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import ScheduleEventComponent from "./schedule-event.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
  const [updateJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();
+
  const handleCancel = async ({ id, lost_sale_reason }) => {
    logImEXEvent("schedule_cancel_appt");

--- a/client/src/components/job-at-change/schedule-event.note.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.note.component.jsx
@@ -1,6 +1,6 @@
 import { EditFilled, SaveFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Input, notification, Space } from "antd";
+import { Button, Input, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,6 +8,7 @@ import { createStructuredSelector } from "reselect";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import DataLabel from "../data-label/data-label.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -22,6 +23,7 @@ export function ScheduleEventNote({ event }) {
  const [loading, setLoading] = useState(false);
  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
  const { t } = useTranslation();
+  const notification = useNotification();

  const toggleEdit = async () => {
    if (editing) {
--- a/client/src/components/job-calculate-totals/job-calculate-totals.component.jsx
+++ b/client/src/components/job-calculate-totals/job-calculate-totals.component.jsx
@@ -1,11 +1,13 @@
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import Axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function JobCalculateTotals({ job, disabled, refetch }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
+  const notification = useNotification();

  const handleCalculate = async () => {
    try {
--- a/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
+++ b/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Form, Input, notification, Switch } from "antd";
+import { Button, Card, Form, Input, Switch } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,6 +16,7 @@ import AuditTrailMapping from "../../../../utils/AuditTrailMappings";
 import dayjs from "../../../../utils/day";
 import ConfigFormComponents from "../../../config-form-components/config-form-components.component";
 import DateTimePicker from "../../../form-date-time-picker/form-date-time-picker.component";
+import { useNotification } from "../../../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -32,6 +33,7 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
  const [markAptArrived] = useMutation(MARK_APPOINTMENT_ARRIVED);
  const [markLatestAptArrived] = useMutation(MARK_LATEST_APPOINTMENT_ARRIVED);
  const [updateOwner] = useMutation(UPDATE_OWNER);
+  const notification = useNotification();

  const { jobId } = useParams();
  const history = useNavigate();
--- a/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
+++ b/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
@@ -6,12 +6,14 @@ import { useParams } from "react-router-dom";
 import { logImEXEvent } from "../../../../firebase/firebase.utils";
 import { GenerateDocument, GenerateDocuments } from "../../../../utils/RenderTemplate";
 import { TemplateList } from "../../../../utils/TemplateConstants";
+import { useNotification } from "../../../../contexts/Notifications/notificationContext.jsx";
 const TemplateListGenerated = TemplateList();

 export default function JobIntakeTemplateList({ templates }) {
  const { jobId } = useParams();
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
+  const notification = useNotification();

  const renderTemplate = async (templateKey) => {
    setLoading(true);
@@ -23,7 +25,9 @@ export default function JobIntakeTemplateList({ templates }) {
        variables: { id: jobId }
      },
      {},
-      "p"
+      "p",
+      null,
+      notification
    );
    setLoading(false);
  };
@@ -35,7 +39,8 @@ export default function JobIntakeTemplateList({ templates }) {
    await GenerateDocuments(
      templates.map((key) => {
        return { name: key, variables: { id: jobId } };
-      })
+      }),
+      notification
    );
    setLoading(false);
  };
--- 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
@@ -16,7 +16,6 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import JobCloseRoGuardTtLifecycle from "./job-close-ro-guard.tt-lifecycle";

 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly
 });
@@ -40,34 +39,13 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {

  if (!bodyshop?.md_ro_guard?.enabled) return null;

-  return (
-    <>
-      {warnings.length > 0 && (
-        <Card
-          title={
-            <Space size="small">
-              <Badge count={warnings.length} />
-              {t("jobs.labels.roguardwarnings")}
-            </Space>
-          }
-        >
-          <ul>
-            {warnings.map((w, index) => (
-              <li key={index}>
-                {bodyshop.md_ro_guard[`enforce_${w.key}`] && (
-                  <Tooltip title={t("jobs.labels.ro_guard.enforced")}>
-                    <LockOutlined style={{ color: "tomato", marginRight: "8px" }} />
-                  </Tooltip>
-                )}
-                {w.warning}
-              </li>
-            ))}
-          </ul>
-        </Card>
-      )}
-
-      <Collapse>
-        <Collapse.Panel forceRender key="roguard" header={t("jobs.labels.roguard")}>
+  // Define collapse items for both panels
+  const collapseItems = [
+    {
+      key: "roguard",
+      label: t("jobs.labels.roguard"),
+      children: (
+        <>
          <Row gutter={[32, 32]}>
            <Col span={24}>
              <JobCloseRoGuardBills job={job} form={form} warningCallback={warningCallback} />
@@ -85,7 +63,6 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
            {InstanceRenderManager({
              rome: (
                <Col md={24} lg={8}>
-                  {/* <JobCloseRoGuardSublet job={job} warningCallback={warningCallback} /> */}
                  <JobCloseRoGuardPpd job={job} warningCallback={warningCallback} />
                </Col>
              )
@@ -214,16 +191,50 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
          >
            <Input prefix={<LockOutlined />} type="password" placeholder="Password" disabled={jobRO} />
          </Form.Item>
-        </Collapse.Panel>
+        </>
+      ),
+      forceRender: true // Preserve the forceRender prop from the original
+    },
+    {
+      key: "performance",
+      label: t("jobs.labels.performance"),
+      children: (
+        <Row gutter={[32, 32]}>
+          <Col className="ro-guard-col" span={24}>
+            <JobCloseRoGuardTtLifecycle job={job} />
+          </Col>
+        </Row>
+      )
+    }
+  ];

-        <Collapse.Panel header={t("jobs.labels.performance")}>
-          <Row gutter={[32, 32]}>
-            <Col className="ro-guard-col" span={24}>
-              <JobCloseRoGuardTtLifecycle job={job} />
-            </Col>
-          </Row>
-        </Collapse.Panel>
-      </Collapse>
+  return (
+    <>
+      {warnings.length > 0 && (
+        <Card
+          title={
+            <Space size="small">
+              <Badge count={warnings.length} />
+              {t("jobs.labels.roguardwarnings")}
+            </Space>
+          }
+        >
+          <ul>
+            {warnings.map((w, index) => (
+              <li key={index}>
+                {bodyshop.md_ro_guard[`enforce_${w.key}`] && (
+                  <Tooltip title={t("jobs.labels.ro_guard.enforced")}>
+                    <LockOutlined style={{ color: "tomato", marginRight: "8px" }} />
+                  </Tooltip>
+                )}
+                {w.warning}
+              </li>
+            ))}
+          </ul>
+        </Card>
+      )}
+
+      <Collapse items={collapseItems} />
    </>
  );
 }
--- a/client/src/components/job-create-iou/job-create-iou.component.jsx
+++ b/client/src/components/job-create-iou/job-create-iou.component.jsx
@@ -1,6 +1,6 @@
 import { useApolloClient } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import { UPDATE_JOB_LINES_IOU } from "../../graphql/jobs-lines.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { CreateIouForJob } from "../jobs-detail-header-actions/jobs-detail-header-actions.duplicate.util";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -27,6 +28,7 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines, tec
  const [loading, setLoading] = useState(false);
  const client = useApolloClient();
  const history = useNavigate();
+  const notification = useNotification();

  const {
    treatments: { IOU_Tracking }
--- a/client/src/components/job-detail-lines/job-lines-part-price-change.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines-part-price-change.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Tooltip } from "antd";
+import { Button, Form, Popover, Tooltip } from "antd";
 import axios from "axios";
 import { t } from "i18next";
 import React, { useState } from "react";
@@ -11,6 +11,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
 import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  technician: selectTechnician
@@ -20,6 +21,7 @@ const mapDispatchToProps = (dispatch) => ({});
 export function JobLinesPartPriceChange({ job, line, refetch, technician }) {
  const [loading, setLoading] = useState(false);
  const [updatePartPrice] = useMutation(UPDATE_LINE_PPC);
+  const notification = useNotification();

  const handleFinish = async (values) => {
    try {
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines.component.jsx
@@ -519,6 +519,7 @@ export function JobLinesComponent({
              {selectedLines.length > 0 && ` (${selectedLines.length})`}
            </Button>
            <Button
+              id="job-lines-order-parts-button"
              disabled={(job && !job.converted) || (selectedLines.length > 0 ? false : true) || jobRO || technician}
              onClick={() => {
                setPartsOrderContext({
@@ -541,6 +542,7 @@ export function JobLinesComponent({
              {selectedLines.length > 0 && ` (${selectedLines.length})`}
            </Button>
            <Button
+              id="job-lines-filter-parts-only-button"
              onClick={() => {
                setState((state) => ({
                  ...state,
@@ -554,7 +556,7 @@ export function JobLinesComponent({
              <FilterFilled /> {t("jobs.actions.filterpartsonly")}
            </Button>
            <Dropdown menu={markMenu} trigger={["click"]}>
-              <Button>{t("jobs.actions.mark")}</Button>
+              <Button id="repair-data-mark-button">{t("jobs.actions.mark")}</Button>
            </Dropdown>
            <Button
              disabled={jobRO || technician}
--- a/client/src/components/job-employee-assignments/job-employee-assignments.container.jsx
+++ b/client/src/components/job-employee-assignments/job-employee-assignments.container.jsx
@@ -1,5 +1,4 @@
 import { useMutation } from "@apollo/client";
-import { notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -10,6 +9,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -23,6 +23,7 @@ export function JobEmployeeAssignmentsContainer({ job, refetch, insertAuditTrail
  const { t } = useTranslation();
  const [updateJob] = useMutation(UPDATE_JOB_ASSIGNMENTS);
  const [loading, setLoading] = useState(false);
+  const notification = useNotification();

  const handleAdd = async (assignment) => {
    setLoading(true);
--- a/client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx
+++ b/client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";

 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Select, Space } from "antd";
+import { Button, Form, Popover, Select, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -10,6 +10,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -36,6 +37,7 @@ export function JoblineBulkAssign({

  const { t } = useTranslation();
  const [assignLines] = useMutation(UPDATE_LINE_BULK_ASSIGN);
+  const notification = useNotification();

  const handleConvert = async (values) => {
    try {
--- a/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
+++ b/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
@@ -1,6 +1,6 @@
 import { ClockCircleOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
-import { Button, Card, Form, notification, Popover, Select, Space, Tooltip } from "antd";
+import { Button, Card, Form, Popover, Select, Space, Tooltip } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -13,6 +13,7 @@ import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  technician: selectTechnician
@@ -29,6 +30,7 @@ export function JobLineConvertToLabor({ children, jobline, job, insertAuditTrail
  const [form] = Form.useForm();
  const [visibility, setVisibility] = useState(false);
  const client = useApolloClient();
+  const notification = useNotification();

  const handleFinish = async (values) => {
    const { mod_lbr_ty } = values;
--- a/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
+++ b/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";

 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Select, Space } from "antd";
+import { Button, Form, Popover, Select, Space } from "antd";
 import dayjs from "../../utils/day";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -11,6 +11,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -25,7 +26,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobLineDispatchButto
 export function JobLineDispatchButton({
  setSelectedLines,
  selectedLines,
-
  bodyshop,
  jobRO,
  job,
@@ -40,6 +40,7 @@ export function JobLineDispatchButton({
  });
  const { t } = useTranslation();
  const [dispatchLines] = useMutation(INSERT_PARTS_DISPATCH);
+  const notification = useNotification();

  const handleConvert = async (values) => {
    try {
@@ -80,7 +81,9 @@ export function JobLineDispatchButton({
            }
          },
          {},
-          "p"
+          "p",
+          null,
+          notification
        );
      }
      setVisible(false);
--- a/client/src/components/job-line-location-popup/job-line-location-popup.component.jsx
+++ b/client/src/components/job-line-location-popup/job-line-location-popup.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { notification, Select, Space } from "antd";
+import { Select, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -7,6 +7,7 @@ import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -22,6 +23,7 @@ export function JobLineLocationPopup({ bodyshop, jobline, disabled }) {
  const [location, setLocation] = useState(jobline.location);
  const [updateJob] = useMutation(UPDATE_JOB_LINE);
  const { t } = useTranslation();
+  const notification = useNotification();

  useEffect(() => {
    if (editing) setLocation(jobline.location);
--- a/client/src/components/job-line-note-popup/job-line-note-popup.component.jsx
+++ b/client/src/components/job-line-note-popup/job-line-note-popup.component.jsx
@@ -1,10 +1,11 @@
 import { FieldTimeOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Input, notification } from "antd";
+import { Input } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function JobLineNotePopup({ jobline, disabled }) {
  const [editing, setEditing] = useState(false);
@@ -12,6 +13,7 @@ export default function JobLineNotePopup({ jobline, disabled }) {
  const [note, setNote] = useState(jobline.note);
  const [updateJob] = useMutation(UPDATE_JOB_LINE);
  const { t } = useTranslation();
+  const notification = useNotification();

  useEffect(() => {
    if (editing) setNote(jobline.notes);
--- a/client/src/components/job-line-status-popup/job-line-status-popup.component.jsx
+++ b/client/src/components/job-line-status-popup/job-line-status-popup.component.jsx
@@ -1,4 +1,4 @@
-import { notification, Select } from "antd";
+import { Select } from "antd";
 import React, { useEffect, useState } from "react";
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
@@ -7,6 +7,7 @@ import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -22,6 +23,7 @@ export function JobLineStatusPopup({ bodyshop, jobline, disabled }) {
  const [status, setStatus] = useState(jobline.status);
  const [updateJob] = useMutation(UPDATE_JOB_LINE);
  const { t } = useTranslation();
+  const notification = useNotification();

  useEffect(() => {
    if (editing) setStatus(jobline.status);
--- a/client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx
+++ b/client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx
@@ -1,4 +1,4 @@
-import { notification, Select } from "antd";
+import { Select } from "antd";
 import React, { useEffect, useState } from "react";
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
@@ -9,6 +9,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -24,6 +25,7 @@ export function JoblineTeamAssignment({ bodyshop, jobline, disabled, jobId, inse
  const [assignedTeam, setAssignedTeam] = useState(jobline.assigned_team);
  const [updateJob] = useMutation(UPDATE_JOB_LINE);
  const { t } = useTranslation();
+  const notification = useNotification();

  useEffect(() => {
    if (editing) setAssignedTeam(jobline.assigned_team);
--- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
+++ b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
@@ -192,6 +192,23 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
          <Form.Item label={t("joblines.fields.tax_part")} name="tax_part" valuePropName="checked" initialValue={true}>
            <Switch />
          </Form.Item>
+          <Form.Item dependencies={[["act_price"]]} noStyle>
+            {() => {
+              if (form.getFieldValue("act_price") === 0) {
+                return (
+                  <Form.Item
+                    label={t("joblines.fields.include_in_part_cnt")}
+                    name="include_in_part_cnt"
+                    valuePropName="checked"
+                  >
+                    <Switch />
+                  </Form.Item>
+                );
+              } else {
+                return null;
+              }
+            }}
+          </Form.Item>
        </LayoutFormRow>
      </Form>
    </Modal>
--- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx
+++ b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx
@@ -1,6 +1,5 @@
 import { useMutation } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { notification } from "antd";
 import Axios from "axios";
 import Dinero from "dinero.js";
 import React, { useState } from "react";
@@ -14,6 +13,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CriticalPartsScan from "../../utils/criticalPartsScan";
 import UndefinedToNull from "../../utils/undefinedtonull";
 import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  jobLineEditModal: selectJobLineEditModal,
@@ -31,6 +31,7 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
    names: ["CriticalPartsScanning"],
    splitKey: bodyshop.imexshopid
  });
+  const notification = useNotification();

  const { t } = useTranslation();
  const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
@@ -61,6 +62,9 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
        refetchQueries: ["GET_LINE_TICKET_BY_PK"]
      });
      if (!r.errors) {
+        if (CriticalPartsScanning.treatment === "on") {
+          await CriticalPartsScan(jobLineEditModal.context.jobid, notification);
+        }
        await Axios.post("/job/totalsssu", {
          id: jobLineEditModal.context.jobid
        });
@@ -106,7 +110,9 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
          })
        });
      }
-
+      if (CriticalPartsScanning.treatment === "on") {
+        await CriticalPartsScan(jobLineEditModal.context.jobid, notification);
+      }
      if (jobLineEditModal.actions.submit) {
        jobLineEditModal.actions.submit();
      } else {
@@ -114,9 +120,7 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
      }
      toggleModalVisible();
    }
-    if (CriticalPartsScanning.treatment === "on") {
-      CriticalPartsScan(jobLineEditModal.context.jobid);
-    }
+
    setLoading(false);
  };

--- a/client/src/components/job-remove-from-parst-queue/job-remove-from-parts-queue.component.jsx
+++ b/client/src/components/job-remove-from-parst-queue/job-remove-from-parts-queue.component.jsx
@@ -1,14 +1,15 @@
 import { useMutation } from "@apollo/client";
-import { Checkbox, notification, Space, Spin } from "antd";
+import { Checkbox, Space, Spin } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function JobRemoveFromPartsQueue({ checked, jobId }) {
  const [updateJob] = useMutation(UPDATE_JOB);
  const { t } = useTranslation();
-
  const [loading, setLoading] = useState(false);
+  const notification = useNotification();

  const handleChange = async (e) => {
    setLoading(true);
--- a/client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx
+++ b/client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx
@@ -1,6 +1,6 @@
 import { CheckCircleOutlined } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Card, Form, InputNumber, notification, Popover, Space } from "antd";
+import { Button, Card, Form, InputNumber, Popover, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -17,6 +17,7 @@ import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component.j
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -33,6 +34,7 @@ export function ScoreboardAddButton({ bodyshop, job, disabled, ...otherBtnProps
  const [form] = Form.useForm();
  const [visibility, setVisibility] = useState(false);
  const [callQuery, { loading: entryLoading, data: entryData }] = useLazyQuery(QUERY_SCOREBOARD_ENTRY);
+  const notification = useNotification();

  useEffect(() => {
    if (visibility) {
--- a/client/src/components/job-send-parts-price-change/job-send-parts-price-change.component.jsx
+++ b/client/src/components/job-send-parts-price-change/job-send-parts-price-change.component.jsx
@@ -1,11 +1,14 @@
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function JobSendPartPriceChangeComponent({ job, disabled }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
+  const notification = useNotification();
+
  const handleClick = async () => {
    setLoading(true);
    try {
--- a/client/src/components/job-totals-table/job-totals-table.component.jsx
+++ b/client/src/components/job-totals-table/job-totals-table.component.jsx
@@ -27,7 +27,7 @@ const colSpan = {
 export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
  const { t } = useTranslation();

-  if (!!!job.job_totals) {
+  if (!job.job_totals) {
    return (
      <Card>
        <Result title={t("jobs.errors.nofinancial")} extra={<JobCalculateTotals job={job} disabled={jobRO} />} />
@@ -35,6 +35,29 @@ export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
    );
  }

+  // Define collapse items
+  const collapseItems = [
+    {
+      key: "json-tree-totals",
+      label: "JSON Tree Totals",
+      children: (
+        <div>
+          <pre>
+            {JSON.stringify(
+              {
+                CIECA: job.cieca_ttl && job.cieca_ttl.data,
+                CIECASTL: job.cieca_stl && job.cieca_stl.data,
+                ImEXCalc: job.job_totals
+              },
+              null,
+              2
+            )}
+          </pre>
+        </div>
+      )
+    }
+  ];
+
  return (
    <div>
      <Row gutter={[16, 16]}>
@@ -68,23 +91,7 @@ export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
              <Col span={24}>
                <Card title="DEVELOPMENT USE ONLY">
                  <JobCalculateTotals job={job} disabled={jobRO} />
-                  <Collapse>
-                    <Collapse.Panel header="JSON Tree Totals">
-                      <div>
-                        <pre>
-                          {JSON.stringify(
-                            {
-                              CIECA: job.cieca_ttl && job.cieca_ttl.data,
-                              CIECASTL: job.cieca_stl && job.cieca_stl.data,
-                              ImEXCalc: job.job_totals
-                            },
-                            null,
-                            2
-                          )}
-                        </pre>
-                      </div>
-                    </Collapse.Panel>
-                  </Collapse>
+                  <Collapse items={collapseItems} />
                </Card>
              </Col>
            )}
--- a/client/src/components/job-totals-table/jobs-totals.cash-discount-display.component.jsx
+++ b/client/src/components/job-totals-table/jobs-totals.cash-discount-display.component.jsx
@@ -1,4 +1,4 @@
-import { notification, Spin } from "antd";
+import { Spin } from "antd";
 import axios from "axios";
 import Dinero from "dinero.js";
 import React, { useCallback, useEffect, useState } from "react";
@@ -6,6 +6,8 @@ import React, { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
@@ -15,6 +17,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobTotalsCashDiscoun
 export function JobTotalsCashDiscount({ bodyshop, amountDinero }) {
  const [loading, setLoading] = useState(true);
  const [fee, setFee] = useState(0);
+  const notification = useNotification();

  const fetchData = useCallback(async () => {
    if (amountDinero && bodyshop) {
@@ -47,7 +50,7 @@ export function JobTotalsCashDiscount({ bodyshop, amountDinero }) {
        setLoading(false);
      }
    }
-  }, [amountDinero, bodyshop]);
+  }, [amountDinero, bodyshop, notification]);

  useEffect(() => {
    fetchData();
--- a/client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx
+++ b/client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx
@@ -1,6 +1,6 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Dropdown, notification } from "antd";
+import { Button, Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -9,6 +9,7 @@ import { UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -20,6 +21,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobsAdminStatus);

 export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
  const { t } = useTranslation();
+  const notification = useNotification();

  const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
  const updateJobStatus = (status) => {
--- a/client/src/components/jobs-admin-class/jobs-admin-class.component.jsx
+++ b/client/src/components/jobs-admin-class/jobs-admin-class.component.jsx
@@ -1,11 +1,12 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popconfirm, Select } from "antd";
+import { Button, Form, Popconfirm, Select } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -20,6 +21,7 @@ export function JobsAdminClass({ bodyshop, job }) {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const [updateJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();

  const handleFinish = async (values) => {
    setLoading(true);
--- a/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
+++ b/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification } from "antd";
+import { Button, Form } from "antd";
 import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +13,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { DateTimeFormat } from "./../../utils/DateFormatter";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -36,6 +37,7 @@ export function JobsAdminDatesChange({ insertAuditTrail, job }) {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const [updateJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();

  const handleFinish = async (values) => {
    setLoading(true);
--- a/client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx
+++ b/client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx
@@ -1,13 +1,15 @@
 import { useMutation } from "@apollo/client";
-import { Button, Space, notification } from "antd";
+import { Button, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DELETE_DELIVERY_CHECKLIST, DELETE_INTAKE_CHECKLIST } from "../../graphql/jobs.queries";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function JobAdminDeleteIntake({ job }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
+  const notification = useNotification();

  const [deleteIntake] = useMutation(DELETE_INTAKE_CHECKLIST);
  const [deleteDelivery] = useMutation(DELETE_DELIVERY_CHECKLIST);
@@ -50,7 +52,7 @@ export default function JobAdminDeleteIntake({ job }) {

  const InstanceRender = InstanceRenderManager({
    imex: true,
-    rome: "USE_IMEX",
+    rome: "USE_IMEX"
  });

  return InstanceRender ? (
--- a/client/src/components/jobs-admin-mark-reexport/jobs-admin-mark-reexport.component.jsx
+++ b/client/src/components/jobs-admin-mark-reexport/jobs-admin-mark-reexport.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Space, notification } from "antd";
+import { Button, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import dayjs from "../../utils/day";
@@ -10,6 +10,7 @@ import { MARK_JOB_AS_EXPORTED, MARK_JOB_AS_UNINVOICED, MARK_JOB_FOR_REEXPORT } f
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -24,6 +25,7 @@ export function JobAdminMarkReexport({ insertAuditTrail, bodyshop, currentUser,
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
+  const notification = useNotification();

  const [markJobForReexport] = useMutation(MARK_JOB_FOR_REEXPORT);
  const [markJobExported] = useMutation(MARK_JOB_AS_EXPORTED);
--- a/client/src/components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component.jsx
+++ b/client/src/components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component.jsx
@@ -1,15 +1,18 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification } from "antd";
+import { Button, Form } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import OwnerSearchSelect from "../owner-search-select/owner-search-select.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function JobAdminOwnerReassociate({ job }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const [updateJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();
+
  const handleFinish = async (values) => {
    setLoading(true);
    const result = await updateJob({
--- a/client/src/components/jobs-admin-remove-ar/jobs-admin-remove-ar.component.jsx
+++ b/client/src/components/jobs-admin-remove-ar/jobs-admin-remove-ar.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { notification, Switch } from "antd";
+import { Switch } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -7,6 +7,7 @@ import { createStructuredSelector } from "reselect";
 import { UPDATE_REMOVE_FROM_AR } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
@@ -19,6 +20,7 @@ export function JobsAdminRemoveAR({ insertAuditTrail, job }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [switchValue, setSwitchValue] = useState(job.remove_from_ar);
+  const notification = useNotification();

  const [mutationUpdateRemoveFromAR] = useMutation(UPDATE_REMOVE_FROM_AR);

--- a/client/src/components/jobs-admin-unvoid/jobs-admin-unvoid.component.jsx
+++ b/client/src/components/jobs-admin-unvoid/jobs-admin-unvoid.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,6 +8,7 @@ import { UNVOID_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -22,6 +23,7 @@ export function JobsAdminUnvoid({ insertAuditTrail, bodyshop, job, currentUser }
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [mutationUnvoidJob] = useMutation(UNVOID_JOB);
+  const notification = useNotification();

  const handleUpdate = async (values) => {
    setLoading(true);
--- a/client/src/components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component.jsx
+++ b/client/src/components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component.jsx
@@ -1,15 +1,18 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification } from "antd";
+import { Button, Form } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import VehicleSearchSelect from "../vehicle-search-select/vehicle-search-select.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 export default function JobAdminOwnerReassociate({ job }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const [updateJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();
+
  const handleFinish = async (values) => {
    setLoading(true);
    const result = await updateJob({
--- a/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx
+++ b/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx
@@ -1,5 +1,5 @@
 import { DownloadOutlined, SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, notification, Space, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectPartnerVersion } from "../../redux/application/application.selectors";
 import { alphaSort } from "../../utils/sorters";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -26,6 +27,7 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
    filteredInfo: { text: "" }
  });
  const { t } = useTranslation();
+  const notification = useNotification();

  const handleTableChange = (pagination, filters, sorter) => {
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
--- a/client/src/components/jobs-available-table/jobs-available-table.component.jsx
+++ b/client/src/components/jobs-available-table/jobs-available-table.component.jsx
@@ -1,6 +1,6 @@
 import { DeleteFilled, DownloadOutlined, PlusCircleFilled, SyncOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Alert, Button, Card, Input, notification, Space, Table } from "antd";
+import { Alert, Button, Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -11,6 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -29,6 +30,7 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
    sortedInfo: {},
    filteredInfo: { text: "" }
  });
+  const notification = useNotification();

  const handleTableChange = (pagination, filters, sorter) => {
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
--- a/client/src/components/jobs-available-table/jobs-available-table.container.jsx
+++ b/client/src/components/jobs-available-table/jobs-available-table.container.jsx
@@ -1,6 +1,6 @@
 import { gql, useApolloClient, useLazyQuery, useMutation, useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Col, Row, notification } from "antd"; //import { Button, Col, Row, notification } from "antd";
+import { Col, Row } from "antd";
 import Axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
@@ -33,6 +33,7 @@ import OwnerFindModalContainer from "../owner-find-modal/owner-find-modal.contai
 import { GetSupplementDelta } from "./jobs-available-supplement.estlines.util";
 import HeaderFields from "./jobs-available-supplement.headerfields";
 import JobsAvailableTableComponent from "./jobs-available-table.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -50,6 +51,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
    names: ["CriticalPartsScanning"],
    splitKey: bodyshop.imexshopid
  });
+  const notification = useNotification();

  const { loading, error, data, refetch } = useQuery(QUERY_AVAILABLE_JOBS, {
    fetchPolicy: "network-only",
@@ -170,13 +172,13 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
          job: newJob
        }
      });
+      if (CriticalPartsScanning.treatment === "on") {
+        await CriticalPartsScan(r.data.insert_jobs.returning[0].id, notification);
+      }
      await Axios.post("/job/totalsssu", {
        id: r.data.insert_jobs.returning[0].id
      });

-      if (CriticalPartsScanning.treatment === "on") {
-        CriticalPartsScan(r.data.insert_jobs.returning[0].id);
-      }
      notification["success"]({
        message: t("jobs.successes.created"),
        onClick: () => {
@@ -277,8 +279,9 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
      setPartsQueueToggle(bodyshop.md_functionality_toggles.parts_queue_toggle);

      if (CriticalPartsScanning.treatment === "on") {
-        CriticalPartsScan(updateResult.data.update_jobs.returning[0].id);
+        CriticalPartsScan(updateResult.data.update_jobs.returning[0].id, notification);
      }
+
      if (updateResult.errors) {
        //error while inserting
        notification["error"]({
--- a/client/src/components/jobs-change-status/jobs-change-status.component.jsx
+++ b/client/src/components/jobs-change-status/jobs-change-status.component.jsx
@@ -1,6 +1,6 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Dropdown, notification } from "antd";
+import { Button, Dropdown } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -25,6 +26,8 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
  const [availableStatuses, setAvailableStatuses] = useState([]);
  const [otherStages, setOtherStages] = useState([]);
  const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
+  const notification = useNotification();
+
  const updateJobStatus = (status) => {
    mutationUpdateJobstatus({
      variables: { jobId: job.id, status: status }
--- a/client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx
+++ b/client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +13,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import client from "../../utils/GraphQLClient";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -48,6 +49,7 @@ export function JobsCloseExportButton({
  const [updateJob] = useMutation(UPDATE_JOB);
  const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
  const [loading, setLoading] = useState(false);
+  const notification = useNotification();

  const handleQbxml = async () => {
    //Check if it's a CDK setup.
@@ -173,7 +175,7 @@ export function JobsCloseExportButton({
          }
        });

-        if (!!!jobUpdateResponse.errors) {
+        if (!jobUpdateResponse.errors) {
          notification.open({
            type: "success",
            key: "jobsuccessexport",
@@ -222,7 +224,7 @@ export function JobsCloseExportButton({
  };

  return (
-    <Button onClick={handleQbxml} loading={loading} disabled={disabled}>
+    <Button onClick={handleQbxml} loading={loading} disabled={disabled} type="primary">
      {t("jobs.actions.export")}
    </Button>
  );
--- a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
+++ b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
@@ -1,7 +1,8 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, Input, notification, Popover, Select, Space, Switch } from "antd";
+import { Button, Form, Input, Popover, Select, Space, Switch } from "antd";
 import axios from "axios";
-import React, { useState } from "react";
+import { some } from "lodash";
+import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -11,6 +12,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -18,7 +20,14 @@ const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });

 export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTrail, parentFormIsFieldsTouched }) {
@@ -27,6 +36,8 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
  const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
  const { t } = useTranslation();
  const [form] = Form.useForm();
+  const notification = useNotification();
+  const allFormValues = Form.useWatch([], form);

  const handleConvert = async ({ employee_csr, category, ...values }) => {
    if (parentFormIsFieldsTouched()) {
@@ -69,6 +80,8 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
    setLoading(false);
  };

+  const submitDisabled = useCallback(() => some(allFormValues, (v) => v === undefined), [allFormValues]);
+
  const popMenu = (
    <div>
      <Form
@@ -77,9 +90,12 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
        onFinish={handleConvert}
        initialValues={{
          driveable: true,
-          towin: false,
+          towin: job.towin,
+          ca_gst_registrant: job.ca_gst_registrant,
          employee_csr: job.employee_csr,
-          category: job.category
+          category: job.category,
+          referral_source: job.referral_source,
+          referral_source_extra: job.referral_source_extra ?? ""
        }}
      >
        <Form.Item
@@ -209,7 +225,7 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
          <Switch />
        </Form.Item>
        <Space wrap>
-          <Button type="primary" danger onClick={() => form.submit()} loading={loading}>
+          <Button disabled={submitDisabled()} type="primary" danger onClick={() => form.submit()} loading={loading}>
            {t("jobs.actions.convert")}
          </Button>
          <Button onClick={() => setOpen(false)}>{t("general.actions.close")}</Button>
@@ -231,11 +247,6 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
        loading={loading}
        onClick={() => {
          setOpen(true);
-          form.setFieldsValue({
-            driveable: true,
-            towin: false,
-            employee_csr: job.employee_csr
-          });
        }}
      >
        {t("jobs.actions.convert")}
--- a/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
+++ b/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
@@ -1,29 +1,25 @@
 import { Collapse, Form, Input, InputNumber, Select, Space, Switch } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 import JobsDetailChangeEstimator from "../jobs-detail-change-estimator/jobs-detail-change-estimator.component";
 import JobsDetailChangeFilehandler from "../jobs-detail-change-filehandler/jobs-detail-change-filehandler.component";
 import JobsDetailRatesChangeButton from "../jobs-detail-rates-change-button/jobs-detail-rates-change-button.component";
-import JobsDetailRatesParts from "../jobs-detail-rates/jobs-detail-rates.parts.component";
-
 import JobsDetailRatesLabor from "../jobs-detail-rates/jobs-detail-rates.labor.component";
 import JobsDetailRatesMaterials from "../jobs-detail-rates/jobs-detail-rates.materials.component";
 import JobsDetailRatesOther from "../jobs-detail-rates/jobs-detail-rates.other.component";
+import JobsDetailRatesParts from "../jobs-detail-rates/jobs-detail-rates.parts.component";
 import JobsDetailRatesTaxes from "../jobs-detail-rates/jobs-detail-rates.taxes.component";
-
 import JobsMarkPstExempt from "../jobs-mark-pst-exempt/jobs-mark-pst-exempt.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";

 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
@@ -42,164 +38,179 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
    }
  };

-  return (
-    <div>
-      <Collapse defaultActiveKey="insurance">
-        <Collapse.Panel key="insurance" header={t("menus.jobsdetail.insurance")} forceRender>
-          <LayoutFormRow>
-            <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.regie_number")} name="regie_number">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
-              <Select onChange={handleInsCoChange}>
-                {bodyshop.md_ins_cos.map((s) => (
-                  <Select.Option key={s.name} value={s.name}>
-                    {s.name}
-                  </Select.Option>
-                ))}
-              </Select>
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.ins_city")} name="ins_city">
-              <Input />
-            </Form.Item>
-            <Form.Item
-              label={
-                <Space>
-                  {t("jobs.fields.ins_ct_ln")}
-                  <JobsDetailChangeFilehandler form={form} />
-                </Space>
+  // Define collapse items for all three panels
+  const collapseItems = [
+    {
+      key: "insurance",
+      label: t("menus.jobsdetail.insurance"),
+      children: (
+        <LayoutFormRow>
+          <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.regie_number")} name="regie_number">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
+            <Select onChange={handleInsCoChange}>
+              {bodyshop.md_ins_cos.map((s) => (
+                <Select.Option key={s.name} value={s.name}>
+                  {s.name}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.ins_city")} name="ins_city">
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={
+              <Space>
+                {t("jobs.fields.ins_ct_ln")}
+                <JobsDetailChangeFilehandler form={form} />
+              </Space>
+            }
+            name="ins_ct_ln"
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.ins_ph1")}
+            name="ins_ph1"
+            rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ins_ph1")]}
+          >
+            <FormItemPhone />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.ins_ea")}
+            name="ins_ea"
+            rules={[
+              {
+                type: "email",
+                message: "This is not a valid email address."
              }
-              name="ins_ct_ln"
-            >
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
-              <Input />
-            </Form.Item>
-            <Form.Item
-              label={t("jobs.fields.ins_ph1")}
-              name="ins_ph1"
-              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ins_ph1")]}
-            >
-              <FormItemPhone />
-            </Form.Item>
-            <Form.Item
-              label={t("jobs.fields.ins_ea")}
-              name="ins_ea"
-              rules={[
-                {
-                  type: "email",
-                  message: "This is not a valid email address."
-                }
-              ]}
-            >
-              <FormItemEmail email={getFieldValue("ins_ea")} />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
-              <DateTimePicker isDateOnly />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.kmin")} name="kmin">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
-              <Input />
-            </Form.Item>
-            <Form.Item
-              label={
-                <Space>
-                  {t("jobs.fields.est_ct_fn")}
-                  <JobsDetailChangeEstimator form={form} />
-                </Space>
+            ]}
+          >
+            <FormItemEmail email={getFieldValue("ins_ea")} />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
+            <DateTimePicker isDateOnly />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.kmin")} name="kmin">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
+            sausage <Input />
+          </Form.Item>
+          <Form.Item
+            label={
+              <Space>
+                {t("jobs.fields.est_ct_fn")}
+                <JobsDetailChangeEstimator form={form} />
+              </Space>
+            }
+            name="est_ct_fn"
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.est_ct_ln")} name="est_ct_ln">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.est_ph1")} name="est_ph1">
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.est_ea")}
+            name="est_ea"
+            rules={[
+              {
+                type: "email",
+                message: "This is not a valid email address."
              }
-              name="est_ct_fn"
-            >
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.est_ct_ln")} name="est_ct_ln">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.est_ph1")} name="est_ph1">
-              <Input />
-            </Form.Item>
-            <Form.Item
-              label={t("jobs.fields.est_ea")}
-              name="est_ea"
-              rules={[
-                {
-                  type: "email",
-                  message: "This is not a valid email address."
-                }
-              ]}
-            >
-              <FormItemEmail email={getFieldValue("est_ea")} />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.servicing_dealer")} name="servicing_dealer">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.selling_dealer_contact")} name="selling_dealer_contact">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.servicing_dealer_contact")} name="servicing_dealer_contact">
-              <Input />
-            </Form.Item>
-          </LayoutFormRow>
-        </Collapse.Panel>
-        <Collapse.Panel forceRender key="claim" header={t("menus.jobsdetail.claimdetail")}>
-          <LayoutFormRow>
-            <Form.Item label={t("jobs.fields.loss_desc")} name="loss_desc">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.loss_of_use")} name="loss_of_use">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.ponumber")} name="po_number">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.unitnumber")} name="unit_number">
-              <Input />
-            </Form.Item>
-            <Form.Item
-              label={t("jobs.fields.specialcoveragepolicy")}
-              valuePropName="checked"
-              name="special_coverage_policy"
-            >
-              <Switch />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.kmin")} name="kmin">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.kmout")} name="kmout">
-              <Input />
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.referralsource")} name="referral_source">
-              <Select>
-                {bodyshop.md_referral_sources.map((s) => (
-                  <Select.Option key={s} value={s}>
-                    {s}
-                  </Select.Option>
-                ))}
-              </Select>
-            </Form.Item>
-            <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
-              <Input />
-            </Form.Item>
-          </LayoutFormRow>
-        </Collapse.Panel>
-        <Collapse.Panel forceRender key="financial" header={t("menus.jobsdetail.financials")}>
+            ]}
+          >
+            <FormItemEmail email={getFieldValue("est_ea")} />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.servicing_dealer")} name="servicing_dealer">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.selling_dealer_contact")} name="selling_dealer_contact">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.servicing_dealer_contact")} name="servicing_dealer_contact">
+            <Input />
+          </Form.Item>
+        </LayoutFormRow>
+      ),
+      forceRender: true
+    },
+    {
+      key: "claim",
+      label: t("menus.jobsdetail.claimdetail"),
+      children: (
+        <LayoutFormRow>
+          <Form.Item label={t("jobs.fields.loss_desc")} name="loss_desc">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.loss_of_use")} name="loss_of_use">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.ponumber")} name="po_number">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.unitnumber")} name="unit_number">
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.specialcoveragepolicy")}
+            valuePropName="checked"
+            name="special_coverage_policy"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.kmin")} name="kmin">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.kmout")} name="kmout">
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.referralsource")} name="referral_source">
+            <Select>
+              {bodyshop.md_referral_sources.map((s) => (
+                <Select.Option key={s} value={s}>
+                  {s}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
+            <Input />
+          </Form.Item>
+        </LayoutFormRow>
+      ),
+      forceRender: true
+    },
+    {
+      key: "financial",
+      label: t("menus.jobsdetail.financials"),
+      children: (
+        <>
          <JobsDetailRatesChangeButton form={form} />
-          <JobsMarkPstExempt form={form} />
+          {InstanceRenderManager({
+            imex: <JobsMarkPstExempt form={form} />
+          })}
          <LayoutFormRow>
            <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
              <CurrencyInput min={0} />
@@ -246,7 +257,6 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
              </LayoutFormRow>
            )
          })}
-
          <LayoutFormRow>
            <Form.Item label={t("jobs.fields.rate_lab")} name="rate_lab">
              <CurrencyInput />
@@ -317,8 +327,15 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
              <CurrencyInput />
            </Form.Item>
          </LayoutFormRow>
-        </Collapse.Panel>
-      </Collapse>
+        </>
+      ),
+      forceRender: true
+    }
+  ];
+
+  return (
+    <div>
+      <Collapse defaultActiveKey="insurance" items={collapseItems} />
      <JobsDetailRatesParts jobRO={false} expanded required={selected && true} form={form} />
      {InstanceRenderManager({
        rome: (
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.addtoproduction.util.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.addtoproduction.util.jsx
@@ -1,4 +1,3 @@
-import { notification } from "antd";
 import i18n from "i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
@@ -6,7 +5,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { store } from "../../redux/store";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";

-export default function AddToProduction(apolloClient, jobId, completionCallback, remove = false) {
+export default function AddToProduction(apolloClient, jobId, completionCallback, remove = false, notification) {
  logImEXEvent("job_add_to_production");

  //get a list of all fields on the job
--- 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
@@ -1,14 +1,15 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Button, Card, Dropdown, Form, Input, Modal, notification, Popconfirm, Popover, Select, Space } from "antd";
+import { Button, Card, Dropdown, Form, Input, Modal, Popconfirm, Popover, Select, Space } from "antd";
 import axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";
-import React, { 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 { useSocket } from "../../contexts/SocketIO/socketContext.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";
@@ -30,7 +31,8 @@ import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
 import JobsDetailHeaderActionsToggleProduction from "./jobs-detail-header-actions.toggle-production";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -120,6 +122,7 @@ export function JobsDetailHeaderActions({
  const history = useNavigate();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [isCancelScheduleModalVisible, setIsCancelScheduleModalVisible] = useState(false);
  const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
  const [deleteJob] = useMutation(DELETE_JOB);
@@ -127,7 +130,8 @@ 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 {
    treatments: { ImEXPay }
@@ -198,7 +202,10 @@ export function JobsDetailHeaderActions({
        message: t("appointments.successes.created")
      });
    } catch (error) {
-      notification.open({ type: "error", message: t("appointments.errors.saving", { error: error.message }) });
+      notification.open({
+        type: "error",
+        message: t("appointments.errors.saving", { error: error.message })
+      });
    } finally {
      setLoading(false);
      setVisibility(false);
@@ -716,7 +723,13 @@ export function JobsDetailHeaderActions({
      key: "toggleproduction",
      id: "job-actions-toggleproduction",
      disabled: !job.converted || jobRO,
-      label: <JobsDetailHeaderActionsToggleProduction job={job} refetch={refetch} />
+      label: (
+        <JobsDetailHeaderActionsToggleProduction
+          job={job}
+          refetch={refetch}
+          closeParentMenu={() => setDropdownOpen(false)}
+        />
+      )
    },

    {
@@ -822,14 +835,14 @@ export function JobsDetailHeaderActions({
          id: "job-actions-removefromproduction",
          disabled: !job.converted,
          label: t("jobs.actions.removefromproduction"),
-          onClick: () => AddToProduction(client, job.id, refetch, true)
+          onClick: () => AddToProduction(client, job.id, refetch, true, notification)
        }
      : {
          key: "addtoproduction",
          id: "job-actions-addtoproduction",
          disabled: !job.converted,
          label: t("jobs.actions.addtoproduction"),
-          onClick: () => AddToProduction(client, job.id, refetch)
+          onClick: () => AddToProduction(client, job.id, refetch, false, notification)
        }
  );

@@ -962,6 +975,14 @@ export function JobsDetailHeaderActions({
    }
  );

+  if (bodyshop?.md_functionality_toggles?.teams) {
+    menuItems.push({
+      key: "sharetoteams",
+      id: "job-actions-sharetoteams",
+      label: <ShareToTeamsButton noIcon={true} urlOverride={`${window.location.origin}${window.location.pathname}`} />
+    });
+  }
+
  menuItems.push({
    key: "exportcustdata",
    id: "job-actions-exportcustdata",
@@ -1146,7 +1167,7 @@ export function JobsDetailHeaderActions({
          </Form.Item>
        </Form>
      </Modal>
-      <Dropdown menu={menu} trigger={["click"]} key="changestatus">
+      <Dropdown menu={menu} trigger={["click"]} key="changestatus" open={dropdownOpen} onOpenChange={setDropdownOpen}>
        <Button>
          <span>{t("general.labels.actions")}</span>
          <DownCircleFilled />
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx
@@ -1,17 +1,19 @@
-import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Space } from "antd";
+import { useLazyQuery, useMutation } from "@apollo/client";
+import { Button, Form, Popover, Space } from "antd";
 import dayjs from "dayjs";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { JOB_PRODUCTION_TOGGLE } from "../../graphql/jobs.queries";
+import { GET_JOB_BY_PK_QUICK_INTAKE, JOB_PRODUCTION_TOGGLE } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser,
@@ -22,15 +24,40 @@ const mapDispatchToProps = (dispatch) => ({
  insertAuditTrail: ({ jobid, operation }) => dispatch(insertAuditTrail({ jobid, operation }))
 });

-export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO, insertAuditTrail }) {
+export function JobsDetailHeaderActionsToggleProduction({
+  bodyshop,
+  job,
+  jobRO,
+  refetch,
+  closeParentMenu,
+  insertAuditTrail
+}) {
  const [scenario, setScenario] = useState(false);
  const [loading, setLoading] = useState(false);
+  const [popOverVisible, setPopOverVisible] = useState(false);
  const [mutationUpdateJob] = useMutation(JOB_PRODUCTION_TOGGLE);
  const { t } = useTranslation();
  const [form] = Form.useForm();
+  const notification = useNotification();
+
+  const [getJobDetails, { loading: jobDetailsLoading }] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
+    variables: { id: job.id },
+    onCompleted: (data) => {
+      if (data?.jobs_by_pk) {
+        form.setFieldsValue({
+          actual_in: data.jobs_by_pk.actual_in ? data.jobs_by_pk.actual_in : dayjs(),
+          scheduled_completion: data.jobs_by_pk.scheduled_completion,
+          actual_completion: data.jobs_by_pk.actual_completion,
+          scheduled_delivery: data.jobs_by_pk.scheduled_delivery,
+          actual_delivery: data.jobs_by_pk.actual_delivery
+        });
+      }
+    },
+    fetchPolicy: "network-only"
+  });

  useEffect(() => {
-    //Figure out what scenario were in, populate accodingly
+    //Figure out what scenario were in, populate accordingly
    if (job && bodyshop) {
      if (bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status)) {
        setScenario("pre");
@@ -74,89 +101,90 @@ export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO,
                DateTimeFormatterFunction(values.actual_completion)
              )
      });
+      setPopOverVisible(false);
+      closeParentMenu();
+      refetch();
    }
    setLoading(false);
  };

  const popMenu = (
    <div onClick={(e) => e.stopPropagation()}>
-      <Form
-        layout="vertical"
-        form={form}
-        onFinish={handleConvert}
-        initialValues={{
-          actual_in: dayjs(),
-          scheduled_completion: job.scheduled_completion,
-          actual_completion: job.actual_completion,
-          scheduled_deliver: job.scheduled_deliver,
-          actual_delivery: job.actual_delivery
-        }}
-      >
-        {scenario === "pre" && (
-          <>
-            <Form.Item
-              name={["actual_in"]}
-              label={t("jobs.fields.actual_in")}
-              rules={[
-                {
-                  required: true
-                  //message: t("general.validation.required"),
-                }
-              ]}
-            >
-              <FormDateTimePickerComponent disabled={jobRO} />
-            </Form.Item>
-            <Form.Item
-              name={["scheduled_completion"]}
-              label={t("jobs.fields.scheduled_completion")}
-              rules={[
-                {
-                  required: true
-                  //message: t("general.validation.required"),
-                }
-              ]}
-            >
-              <FormDateTimePickerComponent disabled={jobRO} />
-            </Form.Item>
-            <Form.Item name={["scheduled_delivery"]} label={t("jobs.fields.scheduled_delivery")}>
-              <FormDateTimePickerComponent disabled={jobRO} />
-            </Form.Item>
-          </>
-        )}
-        {scenario === "prod" && (
-          <>
-            <Form.Item
-              name={["actual_completion"]}
-              label={t("jobs.fields.actual_completion")}
-              rules={[
-                {
-                  required: true
-                  //message: t("general.validation.required"),
-                }
-              ]}
-            >
-              <FormDateTimePickerComponent disabled={jobRO} />
-            </Form.Item>
+      {jobDetailsLoading ? (
+        <LoadingSpinner />
+      ) : (
+        <Form layout="vertical" form={form} onFinish={handleConvert}>
+          {scenario === "pre" && (
+            <>
+              <Form.Item
+                name={["actual_in"]}
+                label={t("jobs.fields.actual_in")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+              >
+                <FormDateTimePickerComponent disabled={jobRO} />
+              </Form.Item>
+              <Form.Item
+                name={["scheduled_completion"]}
+                label={t("jobs.fields.scheduled_completion")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+              >
+                <FormDateTimePickerComponent disabled={jobRO} />
+              </Form.Item>
+              <Form.Item name={["scheduled_delivery"]} label={t("jobs.fields.scheduled_delivery")}>
+                <FormDateTimePickerComponent disabled={jobRO} />
+              </Form.Item>
+            </>
+          )}
+          {scenario === "prod" && (
+            <>
+              <Form.Item
+                name={["actual_completion"]}
+                label={t("jobs.fields.actual_completion")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+              >
+                <FormDateTimePickerComponent disabled={jobRO} />
+              </Form.Item>

-            <Form.Item name={["actual_delivery"]} label={t("jobs.fields.actual_delivery")}>
-              <FormDateTimePickerComponent disabled={jobRO} />
-            </Form.Item>
-          </>
-        )}
+              <Form.Item name={["actual_delivery"]} label={t("jobs.fields.actual_delivery")}>
+                <FormDateTimePickerComponent disabled={jobRO} />
+              </Form.Item>
+            </>
+          )}

-        <Space wrap>
-          <Button type="primary" onClick={() => form.submit()} loading={loading}>
-            {t("general.actions.save")}
-          </Button>
-        </Space>
-      </Form>
+          <Space wrap>
+            <Button type="primary" onClick={() => form.submit()} loading={loading}>
+              {t("general.actions.save")}
+            </Button>
+          </Space>
+        </Form>
+      )}
    </div>
  );

  return (
    <Popover //open={open}
      content={popMenu}
-      onClick={(e) => e.stopPropagation()}
+      open={popOverVisible}
+      onOpenChange={setPopOverVisible}
+      onClick={(e) => {
+        getJobDetails();
+        e.stopPropagation();
+      }}
      getPopupContainer={(trigger) => trigger.parentNode}
      trigger="click"
    >
--- 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/jobs-detail-rates/jobs-detail-rates.labor.component.jsx
+++ b/client/src/components/jobs-detail-rates/jobs-detail-rates.labor.component.jsx
--- a/client/src/components/jobs-detail-rates/jobs-detail-rates.materials.component.jsx
+++ b/client/src/components/jobs-detail-rates/jobs-detail-rates.materials.component.jsx
@@ -13,154 +13,162 @@ const mapStateToProps = createStructuredSelector({
 export function JobsDetailRatesMaterials({ jobRO, expanded, required = true, form }) {
  const { t } = useTranslation();

-  return (
-    <Collapse defaultActiveKey={expanded && "rates"}>
-      <Collapse.Panel forceRender header={t("jobs.fields.materials.materials")} key="materials">
-        <LayoutFormRow header={t("jobs.fields.materials.MAPA")}>
-          <Form.Item label={t("jobs.fields.materials.cal_maxdlr")} name={["materials", "MAPA", "cal_maxdlr"]}>
-            <InputNumber min={0} precision={2} disabled={jobRO} />
-          </Form.Item>
-          <Form.Item label={t("jobs.fields.materials.cal_opcode")} name={["materials", "MAPA", "cal_opcode"]}>
-            <Input disabled={jobRO} />
-          </Form.Item>
-          <Form.Item label={t("jobs.fields.materials.mat_adjp")} name={["materials", "MAPA", "mat_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.tax_ind")}
-            name={["materials", "MAPA", "tax_ind"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.materials.mat_taxp")}
-                  name={["materials", "MAPA", "mat_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["materials", "MAPA", "tax_ind"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.mat_tx_in1")}
-            name={["materials", "MAPA", "mat_tx_in1"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.mat_tx_in2")}
-            name={["materials", "MAPA", "mat_tx_in2"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.mat_tx_in3")}
-            name={["materials", "MAPA", "mat_tx_in3"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.mat_tx_in4")}
-            name={["materials", "MAPA", "mat_tx_in4"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.mat_tx_in5")}
-            name={["materials", "MAPA", "mat_tx_in5"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-        </LayoutFormRow>
-        <LayoutFormRow header={t("jobs.fields.materials.MASH")}>
-          <Form.Item label={t("jobs.fields.materials.cal_maxdlr")} name={["materials", "MASH", "cal_maxdlr"]}>
-            <InputNumber min={0} precision={2} disabled={jobRO} />
-          </Form.Item>
-          <Form.Item label={t("jobs.fields.materials.cal_opcode")} name={["materials", "MASH", "cal_opcode"]}>
-            <Input disabled={jobRO} />
-          </Form.Item>
-          <Form.Item label={t("jobs.fields.materials.mat_adjp")} name={["materials", "MAPA", "mat_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.tax_ind")}
-            name={["materials", "MASH", "tax_ind"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.materials.mat_taxp")}
-                  name={["materials", "MASH", "mat_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["materials", "MASH", "tax_ind"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.mat_tx_in1")}
-            name={["materials", "MASH", "mat_tx_in1"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.mat_tx_in2")}
-            name={["materials", "MASH", "mat_tx_in2"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.mat_tx_in3")}
-            name={["materials", "MASH", "mat_tx_in3"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.mat_tx_in4")}
-            name={["materials", "MASH", "mat_tx_in4"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("jobs.fields.materials.mat_tx_in5")}
-            name={["materials", "MASH", "mat_tx_in5"]}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-        </LayoutFormRow>
-      </Collapse.Panel>
-    </Collapse>
-  );
+  // Define collapse items
+  const collapseItems = [
+    {
+      key: "materials",
+      label: t("jobs.fields.materials.materials"),
+      children: (
+        <>
+          <LayoutFormRow header={t("jobs.fields.materials.MAPA")}>
+            <Form.Item label={t("jobs.fields.materials.cal_maxdlr")} name={["materials", "MAPA", "cal_maxdlr"]}>
+              <InputNumber min={0} precision={2} disabled={jobRO} />
+            </Form.Item>
+            <Form.Item label={t("jobs.fields.materials.cal_opcode")} name={["materials", "MAPA", "cal_opcode"]}>
+              <Input disabled={jobRO} />
+            </Form.Item>
+            <Form.Item label={t("jobs.fields.materials.mat_adjp")} name={["materials", "MAPA", "mat_adjp"]}>
+              <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.tax_ind")}
+              name={["materials", "MAPA", "tax_ind"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item shouldUpdate>
+              {() => {
+                return (
+                  <Form.Item
+                    label={t("jobs.fields.materials.mat_taxp")}
+                    name={["materials", "MAPA", "mat_taxp"]}
+                    rules={[
+                      {
+                        required: form.getFieldValue(["materials", "MAPA", "tax_ind"])
+                        //message: t("general.validation.required"),
+                      }
+                    ]}
+                  >
+                    <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
+                  </Form.Item>
+                );
+              }}
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.mat_tx_in1")}
+              name={["materials", "MAPA", "mat_tx_in1"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.mat_tx_in2")}
+              name={["materials", "MAPA", "mat_tx_in2"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.mat_tx_in3")}
+              name={["materials", "MAPA", "mat_tx_in3"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.mat_tx_in4")}
+              name={["materials", "MAPA", "mat_tx_in4"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.mat_tx_in5")}
+              name={["materials", "MAPA", "mat_tx_in5"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+          </LayoutFormRow>
+          <LayoutFormRow header={t("jobs.fields.materials.MASH")}>
+            <Form.Item label={t("jobs.fields.materials.cal_maxdlr")} name={["materials", "MASH", "cal_maxdlr"]}>
+              <InputNumber min={0} precision={2} disabled={jobRO} />
+            </Form.Item>
+            <Form.Item label={t("jobs.fields.materials.cal_opcode")} name={["materials", "MASH", "cal_opcode"]}>
+              <Input disabled={jobRO} />
+            </Form.Item>
+            <Form.Item label={t("jobs.fields.materials.mat_adjp")} name={["materials", "MAPA", "mat_adjp"]}>
+              <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.tax_ind")}
+              name={["materials", "MASH", "tax_ind"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item shouldUpdate>
+              {() => {
+                return (
+                  <Form.Item
+                    label={t("jobs.fields.materials.mat_taxp")}
+                    name={["materials", "MASH", "mat_taxp"]}
+                    rules={[
+                      {
+                        required: form.getFieldValue(["materials", "MASH", "tax_ind"])
+                        //message: t("general.validation.required"),
+                      }
+                    ]}
+                  >
+                    <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
+                  </Form.Item>
+                );
+              }}
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.mat_tx_in1")}
+              name={["materials", "MASH", "mat_tx_in1"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.mat_tx_in2")}
+              name={["materials", "MASH", "mat_tx_in2"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.mat_tx_in3")}
+              name={["materials", "MASH", "mat_tx_in3"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.mat_tx_in4")}
+              name={["materials", "MASH", "mat_tx_in4"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.materials.mat_tx_in5")}
+              name={["materials", "MASH", "mat_tx_in5"]}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+          </LayoutFormRow>
+        </>
+      ),
+      forceRender: true
+    }
+  ];
+
+  return <Collapse defaultActiveKey={expanded && "rates"} items={collapseItems} />;
 }

 export default connect(mapStateToProps, null)(JobsDetailRatesMaterials);
--- a/Show More
+++ b/Show More