IO-3202 HasFeatureAccess Boolean

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

.circleci/config.yml

@@ -15,7 +15,7 @@ jobs:
       - eb/setup
       - run:
           command: |
-            eb init imex-online-production-api -r ca-central-1 -p "Node.js 22 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
@@ -88,7 +88,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:production:imex
+      - run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:production:imex
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -114,7 +114,7 @@ jobs:
       - eb/setup
       - run:
           command: |
-            eb init romeonline-productionapi -r us-east-2 -p "Node.js 22 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
@@ -151,7 +151,7 @@ jobs:
   rome-app-build:
     docker:
       - image: cimg/node:22.13.1
-
+    resource_class: large
     working_directory: ~/repo/client
 
     steps:
@@ -161,7 +161,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:production:rome
+      - run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:production:rome
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -209,7 +209,7 @@ jobs:
   test-rome-app-build:
     docker:
       - image: cimg/node:22.13.1
-
+    resource_class: large
     working_directory: ~/repo/client
 
     steps:
@@ -219,7 +219,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:test:rome
+      - run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:test:rome
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -277,7 +277,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:test:imex
+      - run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:test:imex
 
       - aws-s3/sync:
           from: build
@@ -298,7 +298,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:test:imex
+      - run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:test:imex
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID

.gitignore

@@ -121,3 +121,10 @@ logs/oAuthClient-log.log
 /*.env.*
 .idea/*
 .idea
+
+# Vitest
+vitest-report*/ 
+vitest-coverage/
+*.vitest.log
+test-output.txt
+

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
@@ -6453,6 +6453,27 @@
                                                     </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>
@@ -6474,6 +6495,48 @@
                                                     </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>
@@ -11943,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>
@@ -12312,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>
@@ -19091,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>
@@ -19385,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>
@@ -43090,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>
@@ -48557,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>
@@ -52732,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>
@@ -54483,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>

client/.env.development.imex

@@ -9,6 +9,8 @@ VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
 VITE_APP_AXIOS_BASE_API_URL=/api/
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_REPORTS_SERVER_URL=https://reports.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=IMEX
+TEST_USERNAME="test@imex.dev"
+TEST_PASSWORD="test123"

client/.env.development.rome

@@ -10,7 +10,9 @@ VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
 VITE_APP_AXIOS_BASE_API_URL=/api/
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_COUNTRY=USA
 VITE_APP_INSTANCE=ROME
+TEST_USERNAME="test@imex.dev"
+TEST_PASSWORD="test123"

client/.env.test.imex

@@ -9,7 +9,7 @@ VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
 VITE_APP_AXIOS_BASE_API_URL=https://api.test.imex.online/
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_REPORTS_SERVER_URL=https://reports.test.imex.online
 VITE_APP_IS_TEST=true
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=IMEX

client/.gitignore

@@ -1,3 +1,14 @@
+# Vitest
+vitest-report*/ 
+vitest-coverage/
+*.vitest.log
+test-output.txt
+
+# Playwright
+playwright-report/
+test-results/
+playwright/.cache/
+*.playwright.log
 
 # Sentry Config File
 .sentryclirc

client/cypress.config.js

@@ -1,17 +0,0 @@
-const { defineConfig } = require("cypress");
-
-module.exports = defineConfig({
-  experimentalStudio: true,
-  env: {
-    FIREBASE_USERNAME: "cypress@imex.test",
-    FIREBASE_PASSWORD: "cypress"
-  },
-  e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
-    setupNodeEvents(on, config) {
-      return require("./cypress/plugins/index.js")(on, config);
-    },
-    baseUrl: "https://localhost:3000"
-  }
-});

client/cypress/e2e/01-General Render/01-home.cy.js

@@ -1,19 +0,0 @@
-/// <reference types="Cypress" />
-const { FIREBASE_USERNAME, FIREBASE_PASSWORcD } = Cypress.env();
-describe("Renders the General Page", () => {
-  beforeEach(() => {
-    cy.visit("/");
-  });
-  it("Renders Correctly", () => {});
-  it("Has the Slogan", () => {
-    cy.findByText("A whole x22new kind of shop management system.").should("exist");
-    /* ==== Generated with Cypress Studio ==== */
-    cy.get(".ant-menu-item-active > .ant-menu-title-content > .header0-item-block").click();
-    cy.get("#email").clear();
-    cy.get("#email").type("patrick@imex.dev");
-    cy.get("#password").clear();
-    cy.get("#password").type("patrick123{enter}");
-    cy.get(".ant-form > .ant-btn").click();
-    /* ==== End Cypress Studio ==== */
-  });
-});

client/cypress/e2e/1-getting-started/todo.cy.js

@@ -1,124 +0,0 @@
-/// <reference types="cypress" />
-
-// Welcome to Cypress!
-//
-// This spec file contains a variety of sample tests
-// for a todo list app that are designed to demonstrate
-// the power of writing tests in Cypress.
-//
-// To learn more about how Cypress works and
-// what makes it such an awesome testing tool,
-// please read our getting started guide:
-// https://on.cypress.io/introduction-to-cypress
-
-describe("example to-do app", () => {
-  beforeEach(() => {
-    // Cypress starts out with a blank slate for each test
-    // so we must tell it to visit our website with the `cy.visit()` command.
-    // Since we want to visit the same URL at the start of all our tests,
-    // we include it in our beforeEach function so that it runs before each test
-    cy.visit("https://example.cypress.io/todo");
-  });
-
-  it("displays two todo items by default", () => {
-    // We use the `cy.get()` command to get all elements that match the selector.
-    // Then, we use `should` to assert that there are two matched items,
-    // which are the two default items.
-    cy.get(".todo-list li").should("have.length", 2);
-
-    // We can go even further and check that the default todos each contain
-    // the correct text. We use the `first` and `last` functions
-    // to get just the first and last matched elements individually,
-    // and then perform an assertion with `should`.
-    cy.get(".todo-list li").first().should("have.text", "Pay electric bill");
-    cy.get(".todo-list li").last().should("have.text", "Walk the dog");
-  });
-
-  it("can add new todo items", () => {
-    // We'll store our item text in a variable so we can reuse it
-    const newItem = "Feed the cat";
-
-    // Let's get the input element and use the `type` command to
-    // input our new list item. After typing the content of our item,
-    // we need to type the enter key as well in order to submit the input.
-    // This input has a data-test attribute so we'll use that to select the
-    // element in accordance with best practices:
-    // https://on.cypress.io/selecting-elements
-    cy.get("[data-test=new-todo]").type(`${newItem}{enter}`);
-
-    // Now that we've typed our new item, let's check that it actually was added to the list.
-    // Since it's the newest item, it should exist as the last element in the list.
-    // In addition, with the two default items, we should have a total of 3 elements in the list.
-    // Since assertions yield the element that was asserted on,
-    // we can chain both of these assertions together into a single statement.
-    cy.get(".todo-list li").should("have.length", 3).last().should("have.text", newItem);
-  });
-
-  it("can check off an item as completed", () => {
-    // In addition to using the `get` command to get an element by selector,
-    // we can also use the `contains` command to get an element by its contents.
-    // However, this will yield the <label>, which is lowest-level element that contains the text.
-    // In order to check the item, we'll find the <input> element for this <label>
-    // by traversing up the dom to the parent element. From there, we can `find`
-    // the child checkbox <input> element and use the `check` command to check it.
-    cy.contains("Pay electric bill").parent().find("input[type=checkbox]").check();
-
-    // Now that we've checked the button, we can go ahead and make sure
-    // that the list element is now marked as completed.
-    // Again we'll use `contains` to find the <label> element and then use the `parents` command
-    // to traverse multiple levels up the dom until we find the corresponding <li> element.
-    // Once we get that element, we can assert that it has the completed class.
-    cy.contains("Pay electric bill").parents("li").should("have.class", "completed");
-  });
-
-  context("with a checked task", () => {
-    beforeEach(() => {
-      // We'll take the command we used above to check off an element
-      // Since we want to perform multiple tests that start with checking
-      // one element, we put it in the beforeEach hook
-      // so that it runs at the start of every test.
-      cy.contains("Pay electric bill").parent().find("input[type=checkbox]").check();
-    });
-
-    it("can filter for uncompleted tasks", () => {
-      // We'll click on the "active" button in order to
-      // display only incomplete items
-      cy.contains("Active").click();
-
-      // After filtering, we can assert that there is only the one
-      // incomplete item in the list.
-      cy.get(".todo-list li").should("have.length", 1).first().should("have.text", "Walk the dog");
-
-      // For good measure, let's also assert that the task we checked off
-      // does not exist on the page.
-      cy.contains("Pay electric bill").should("not.exist");
-    });
-
-    it("can filter for completed tasks", () => {
-      // We can perform similar steps as the test above to ensure
-      // that only completed tasks are shown
-      cy.contains("Completed").click();
-
-      cy.get(".todo-list li").should("have.length", 1).first().should("have.text", "Pay electric bill");
-
-      cy.contains("Walk the dog").should("not.exist");
-    });
-
-    it("can delete all completed tasks", () => {
-      // First, let's click the "Clear completed" button
-      // `contains` is actually serving two purposes here.
-      // First, it's ensuring that the button exists within the dom.
-      // This button only appears when at least one task is checked
-      // so this command is implicitly verifying that it does exist.
-      // Second, it selects the button so we can click it.
-      cy.contains("Clear completed").click();
-
-      // Then we can make sure that there is only one element
-      // in the list and our element does not exist
-      cy.get(".todo-list li").should("have.length", 1).should("not.have.text", "Pay electric bill");
-
-      // Finally, make sure that the clear button no longer exists.
-      cy.contains("Clear completed").should("not.exist");
-    });
-  });
-});

client/cypress/e2e/2-advanced-examples/actions.cy.js

@@ -1,284 +0,0 @@
-/// <reference types="cypress" />
-
-context("Actions", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/actions");
-  });
-
-  // https://on.cypress.io/interacting-with-elements
-
-  it(".type() - type into a DOM element", () => {
-    // https://on.cypress.io/type
-    cy.get(".action-email")
-      .type("fake@email.com")
-      .should("have.value", "fake@email.com")
-
-      // .type() with special character sequences
-      .type("{leftarrow}{rightarrow}{uparrow}{downarrow}")
-      .type("{del}{selectall}{backspace}")
-
-      // .type() with key modifiers
-      .type("{alt}{option}") //these are equivalent
-      .type("{ctrl}{control}") //these are equivalent
-      .type("{meta}{command}{cmd}") //these are equivalent
-      .type("{shift}")
-
-      // Delay each keypress by 0.1 sec
-      .type("slow.typing@email.com", { delay: 100 })
-      .should("have.value", "slow.typing@email.com");
-
-    cy.get(".action-disabled")
-      // Ignore error checking prior to type
-      // like whether the input is visible or disabled
-      .type("disabled error checking", { force: true })
-      .should("have.value", "disabled error checking");
-  });
-
-  it(".focus() - focus on a DOM element", () => {
-    // https://on.cypress.io/focus
-    cy.get(".action-focus").focus().should("have.class", "focus").prev().should("have.attr", "style", "color: orange;");
-  });
-
-  it(".blur() - blur off a DOM element", () => {
-    // https://on.cypress.io/blur
-    cy.get(".action-blur")
-      .type("About to blur")
-      .blur()
-      .should("have.class", "error")
-      .prev()
-      .should("have.attr", "style", "color: red;");
-  });
-
-  it(".clear() - clears an input or textarea element", () => {
-    // https://on.cypress.io/clear
-    cy.get(".action-clear")
-      .type("Clear this text")
-      .should("have.value", "Clear this text")
-      .clear()
-      .should("have.value", "");
-  });
-
-  it(".submit() - submit a form", () => {
-    // https://on.cypress.io/submit
-    cy.get(".action-form").find('[type="text"]').type("HALFOFF");
-
-    cy.get(".action-form").submit().next().should("contain", "Your form has been submitted!");
-  });
-
-  it(".click() - click on a DOM element", () => {
-    // https://on.cypress.io/click
-    cy.get(".action-btn").click();
-
-    // You can click on 9 specific positions of an element:
-    //  -----------------------------------
-    // | topLeft        top       topRight |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | left          center        right |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | bottomLeft   bottom   bottomRight |
-    //  -----------------------------------
-
-    // clicking in the center of the element is the default
-    cy.get("#action-canvas").click();
-
-    cy.get("#action-canvas").click("topLeft");
-    cy.get("#action-canvas").click("top");
-    cy.get("#action-canvas").click("topRight");
-    cy.get("#action-canvas").click("left");
-    cy.get("#action-canvas").click("right");
-    cy.get("#action-canvas").click("bottomLeft");
-    cy.get("#action-canvas").click("bottom");
-    cy.get("#action-canvas").click("bottomRight");
-
-    // .click() accepts an x and y coordinate
-    // that controls where the click occurs :)
-
-    cy.get("#action-canvas")
-      .click(80, 75) // click 80px on x coord and 75px on y coord
-      .click(170, 75)
-      .click(80, 165)
-      .click(100, 185)
-      .click(125, 190)
-      .click(150, 185)
-      .click(170, 165);
-
-    // click multiple elements by passing multiple: true
-    cy.get(".action-labels>.label").click({ multiple: true });
-
-    // Ignore error checking prior to clicking
-    cy.get(".action-opacity>.btn").click({ force: true });
-  });
-
-  it(".dblclick() - double click on a DOM element", () => {
-    // https://on.cypress.io/dblclick
-
-    // Our app has a listener on 'dblclick' event in our 'scripts.js'
-    // that hides the div and shows an input on double click
-    cy.get(".action-div").dblclick().should("not.be.visible");
-    cy.get(".action-input-hidden").should("be.visible");
-  });
-
-  it(".rightclick() - right click on a DOM element", () => {
-    // https://on.cypress.io/rightclick
-
-    // Our app has a listener on 'contextmenu' event in our 'scripts.js'
-    // that hides the div and shows an input on right click
-    cy.get(".rightclick-action-div").rightclick().should("not.be.visible");
-    cy.get(".rightclick-action-input-hidden").should("be.visible");
-  });
-
-  it(".check() - check a checkbox or radio element", () => {
-    // https://on.cypress.io/check
-
-    // By default, .check() will check all
-    // matching checkbox or radio elements in succession, one after another
-    cy.get('.action-checkboxes [type="checkbox"]').not("[disabled]").check().should("be.checked");
-
-    cy.get('.action-radios [type="radio"]').not("[disabled]").check().should("be.checked");
-
-    // .check() accepts a value argument
-    cy.get('.action-radios [type="radio"]').check("radio1").should("be.checked");
-
-    // .check() accepts an array of values
-    cy.get('.action-multiple-checkboxes [type="checkbox"]').check(["checkbox1", "checkbox2"]).should("be.checked");
-
-    // Ignore error checking prior to checking
-    cy.get(".action-checkboxes [disabled]").check({ force: true }).should("be.checked");
-
-    cy.get('.action-radios [type="radio"]').check("radio3", { force: true }).should("be.checked");
-  });
-
-  it(".uncheck() - uncheck a checkbox element", () => {
-    // https://on.cypress.io/uncheck
-
-    // By default, .uncheck() will uncheck all matching
-    // checkbox elements in succession, one after another
-    cy.get('.action-check [type="checkbox"]').not("[disabled]").uncheck().should("not.be.checked");
-
-    // .uncheck() accepts a value argument
-    cy.get('.action-check [type="checkbox"]').check("checkbox1").uncheck("checkbox1").should("not.be.checked");
-
-    // .uncheck() accepts an array of values
-    cy.get('.action-check [type="checkbox"]')
-      .check(["checkbox1", "checkbox3"])
-      .uncheck(["checkbox1", "checkbox3"])
-      .should("not.be.checked");
-
-    // Ignore error checking prior to unchecking
-    cy.get(".action-check [disabled]").uncheck({ force: true }).should("not.be.checked");
-  });
-
-  it(".select() - select an option in a <select> element", () => {
-    // https://on.cypress.io/select
-
-    // at first, no option should be selected
-    cy.get(".action-select").should("have.value", "--Select a fruit--");
-
-    // Select option(s) with matching text content
-    cy.get(".action-select").select("apples");
-    // confirm the apples were selected
-    // note that each value starts with "fr-" in our HTML
-    cy.get(".action-select").should("have.value", "fr-apples");
-
-    cy.get(".action-select-multiple")
-      .select(["apples", "oranges", "bananas"])
-      // when getting multiple values, invoke "val" method first
-      .invoke("val")
-      .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
-
-    // Select option(s) with matching value
-    cy.get(".action-select")
-      .select("fr-bananas")
-      // can attach an assertion right away to the element
-      .should("have.value", "fr-bananas");
-
-    cy.get(".action-select-multiple")
-      .select(["fr-apples", "fr-oranges", "fr-bananas"])
-      .invoke("val")
-      .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
-
-    // assert the selected values include oranges
-    cy.get(".action-select-multiple").invoke("val").should("include", "fr-oranges");
-  });
-
-  it(".scrollIntoView() - scroll an element into view", () => {
-    // https://on.cypress.io/scrollintoview
-
-    // normally all of these buttons are hidden,
-    // because they're not within
-    // the viewable area of their parent
-    // (we need to scroll to see them)
-    cy.get("#scroll-horizontal button").should("not.be.visible");
-
-    // scroll the button into view, as if the user had scrolled
-    cy.get("#scroll-horizontal button").scrollIntoView().should("be.visible");
-
-    cy.get("#scroll-vertical button").should("not.be.visible");
-
-    // Cypress handles the scroll direction needed
-    cy.get("#scroll-vertical button").scrollIntoView().should("be.visible");
-
-    cy.get("#scroll-both button").should("not.be.visible");
-
-    // Cypress knows to scroll to the right and down
-    cy.get("#scroll-both button").scrollIntoView().should("be.visible");
-  });
-
-  it(".trigger() - trigger an event on a DOM element", () => {
-    // https://on.cypress.io/trigger
-
-    // To interact with a range input (slider)
-    // we need to set its value & trigger the
-    // event to signal it changed
-
-    // Here, we invoke jQuery's val() method to set
-    // the value and trigger the 'change' event
-    cy.get(".trigger-input-range")
-      .invoke("val", 25)
-      .trigger("change")
-      .get("input[type=range]")
-      .siblings("p")
-      .should("have.text", "25");
-  });
-
-  it("cy.scrollTo() - scroll the window or element to a position", () => {
-    // https://on.cypress.io/scrollto
-
-    // You can scroll to 9 specific positions of an element:
-    //  -----------------------------------
-    // | topLeft        top       topRight |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | left          center        right |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | bottomLeft   bottom   bottomRight |
-    //  -----------------------------------
-
-    // if you chain .scrollTo() off of cy, we will
-    // scroll the entire window
-    cy.scrollTo("bottom");
-
-    cy.get("#scrollable-horizontal").scrollTo("right");
-
-    // or you can scroll to a specific coordinate:
-    // (x axis, y axis) in pixels
-    cy.get("#scrollable-vertical").scrollTo(250, 250);
-
-    // or you can scroll to a specific percentage
-    // of the (width, height) of the element
-    cy.get("#scrollable-both").scrollTo("75%", "25%");
-
-    // control the easing of the scroll (default is 'swing')
-    cy.get("#scrollable-vertical").scrollTo("center", { easing: "linear" });
-
-    // control the duration of the scroll (in ms)
-    cy.get("#scrollable-both").scrollTo("center", { duration: 2000 });
-  });
-});

client/cypress/e2e/2-advanced-examples/aliasing.cy.js

@@ -1,35 +0,0 @@
-/// <reference types="cypress" />
-
-context("Aliasing", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/aliasing");
-  });
-
-  it(".as() - alias a DOM element for later use", () => {
-    // https://on.cypress.io/as
-
-    // Alias a DOM element for use later
-    // We don't have to traverse to the element
-    // later in our code, we reference it with @
-
-    cy.get(".as-table").find("tbody>tr").first().find("td").first().find("button").as("firstBtn");
-
-    // when we reference the alias, we place an
-    // @ in front of its name
-    cy.get("@firstBtn").click();
-
-    cy.get("@firstBtn").should("have.class", "btn-success").and("contain", "Changed");
-  });
-
-  it(".as() - alias a route for later use", () => {
-    // Alias the route to wait for its response
-    cy.intercept("GET", "**/comments/*").as("getComment");
-
-    // we have code that gets a comment when
-    // the button is clicked in scripts.js
-    cy.get(".network-btn").click();
-
-    // https://on.cypress.io/wait
-    cy.wait("@getComment").its("response.statusCode").should("eq", 200);
-  });
-});

client/cypress/e2e/2-advanced-examples/assertions.cy.js

@@ -1,173 +0,0 @@
-/// <reference types="cypress" />
-
-context("Assertions", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/assertions");
-  });
-
-  describe("Implicit Assertions", () => {
-    it(".should() - make an assertion about the current subject", () => {
-      // https://on.cypress.io/should
-      cy.get(".assertion-table")
-        .find("tbody tr:last")
-        .should("have.class", "success")
-        .find("td")
-        .first()
-        // checking the text of the <td> element in various ways
-        .should("have.text", "Column content")
-        .should("contain", "Column content")
-        .should("have.html", "Column content")
-        // chai-jquery uses "is()" to check if element matches selector
-        .should("match", "td")
-        // to match text content against a regular expression
-        // first need to invoke jQuery method text()
-        // and then match using regular expression
-        .invoke("text")
-        .should("match", /column content/i);
-
-      // a better way to check element's text content against a regular expression
-      // is to use "cy.contains"
-      // https://on.cypress.io/contains
-      cy.get(".assertion-table")
-        .find("tbody tr:last")
-        // finds first <td> element with text content matching regular expression
-        .contains("td", /column content/i)
-        .should("be.visible");
-
-      // for more information about asserting element's text
-      // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
-    });
-
-    it(".and() - chain multiple assertions together", () => {
-      // https://on.cypress.io/and
-      cy.get(".assertions-link").should("have.class", "active").and("have.attr", "href").and("include", "cypress.io");
-    });
-  });
-
-  describe("Explicit Assertions", () => {
-    // https://on.cypress.io/assertions
-    it("expect - make an assertion about a specified subject", () => {
-      // We can use Chai's BDD style assertions
-      expect(true).to.be.true;
-      const o = { foo: "bar" };
-
-      expect(o).to.equal(o);
-      expect(o).to.deep.equal({ foo: "bar" });
-      // matching text using regular expression
-      expect("FooBar").to.match(/bar$/i);
-    });
-
-    it("pass your own callback function to should()", () => {
-      // Pass a function to should that can have any number
-      // of explicit assertions within it.
-      // The ".should(cb)" function will be retried
-      // automatically until it passes all your explicit assertions or times out.
-      cy.get(".assertions-p")
-        .find("p")
-        .should(($p) => {
-          // https://on.cypress.io/$
-          // return an array of texts from all of the p's
-          // @ts-ignore TS6133 unused variable
-          const texts = $p.map((i, el) => Cypress.$(el).text());
-
-          // jquery map returns jquery object
-          // and .get() convert this to simple array
-          const paragraphs = texts.get();
-
-          // array should have length of 3
-          expect(paragraphs, "has 3 paragraphs").to.have.length(3);
-
-          // use second argument to expect(...) to provide clear
-          // message with each assertion
-          expect(paragraphs, "has expected text in each paragraph").to.deep.eq([
-            "Some text from first p",
-            "More text from second p",
-            "And even more text from third p"
-          ]);
-        });
-    });
-
-    it("finds element by class name regex", () => {
-      cy.get(".docs-header")
-        .find("div")
-        // .should(cb) callback function will be retried
-        .should(($div) => {
-          expect($div).to.have.length(1);
-
-          const className = $div[0].className;
-
-          expect(className).to.match(/heading-/);
-        })
-        // .then(cb) callback is not retried,
-        // it either passes or fails
-        .then(($div) => {
-          expect($div, "text content").to.have.text("Introduction");
-        });
-    });
-
-    it("can throw any error", () => {
-      cy.get(".docs-header")
-        .find("div")
-        .should(($div) => {
-          if ($div.length !== 1) {
-            // you can throw your own errors
-            throw new Error("Did not find 1 element");
-          }
-
-          const className = $div[0].className;
-
-          if (!className.match(/heading-/)) {
-            throw new Error(`Could not find class "heading-" in ${className}`);
-          }
-        });
-    });
-
-    it("matches unknown text between two elements", () => {
-      /**
-       * Text from the first element.
-       * @type {string}
-       */
-      let text;
-
-      /**
-       * Normalizes passed text,
-       * useful before comparing text with spaces and different capitalization.
-       * @param {string} s Text to normalize
-       */
-      const normalizeText = (s) => s.replace(/\s/g, "").toLowerCase();
-
-      cy.get(".two-elements")
-        .find(".first")
-        .then(($first) => {
-          // save text from the first element
-          text = normalizeText($first.text());
-        });
-
-      cy.get(".two-elements")
-        .find(".second")
-        .should(($div) => {
-          // we can massage text before comparing
-          const secondText = normalizeText($div.text());
-
-          expect(secondText, "second text").to.equal(text);
-        });
-    });
-
-    it("assert - assert shape of an object", () => {
-      const person = {
-        name: "Joe",
-        age: 20
-      };
-
-      assert.isObject(person, "value is object");
-    });
-
-    it("retries the should callback until assertions pass", () => {
-      cy.get("#random-number").should(($div) => {
-        const n = parseFloat($div.text());
-
-        expect(n).to.be.gte(1).and.be.lte(10);
-      });
-    });
-  });
-});

client/cypress/e2e/2-advanced-examples/connectors.cy.js

@@ -1,96 +0,0 @@
-/// <reference types="cypress" />
-
-context("Connectors", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/connectors");
-  });
-
-  it(".each() - iterate over an array of elements", () => {
-    // https://on.cypress.io/each
-    cy.get(".connectors-each-ul>li").each(($el, index, $list) => {
-      console.log($el, index, $list);
-    });
-  });
-
-  it(".its() - get properties on the current subject", () => {
-    // https://on.cypress.io/its
-    cy.get(".connectors-its-ul>li")
-      // calls the 'length' property yielding that value
-      .its("length")
-      .should("be.gt", 2);
-  });
-
-  it(".invoke() - invoke a function on the current subject", () => {
-    // our div is hidden in our script.js
-    // $('.connectors-div').hide()
-
-    // https://on.cypress.io/invoke
-    cy.get(".connectors-div")
-      .should("be.hidden")
-      // call the jquery method 'show' on the 'div.container'
-      .invoke("show")
-      .should("be.visible");
-  });
-
-  it(".spread() - spread an array as individual args to callback function", () => {
-    // https://on.cypress.io/spread
-    const arr = ["foo", "bar", "baz"];
-
-    cy.wrap(arr).spread((foo, bar, baz) => {
-      expect(foo).to.eq("foo");
-      expect(bar).to.eq("bar");
-      expect(baz).to.eq("baz");
-    });
-  });
-
-  describe(".then()", () => {
-    it("invokes a callback function with the current subject", () => {
-      // https://on.cypress.io/then
-      cy.get(".connectors-list > li").then(($lis) => {
-        expect($lis, "3 items").to.have.length(3);
-        expect($lis.eq(0), "first item").to.contain("Walk the dog");
-        expect($lis.eq(1), "second item").to.contain("Feed the cat");
-        expect($lis.eq(2), "third item").to.contain("Write JavaScript");
-      });
-    });
-
-    it("yields the returned value to the next command", () => {
-      cy.wrap(1)
-        .then((num) => {
-          expect(num).to.equal(1);
-
-          return 2;
-        })
-        .then((num) => {
-          expect(num).to.equal(2);
-        });
-    });
-
-    it("yields the original subject without return", () => {
-      cy.wrap(1)
-        .then((num) => {
-          expect(num).to.equal(1);
-          // note that nothing is returned from this callback
-        })
-        .then((num) => {
-          // this callback receives the original unchanged value 1
-          expect(num).to.equal(1);
-        });
-    });
-
-    it("yields the value yielded by the last Cypress command inside", () => {
-      cy.wrap(1)
-        .then((num) => {
-          expect(num).to.equal(1);
-          // note how we run a Cypress command
-          // the result yielded by this Cypress command
-          // will be passed to the second ".then"
-          cy.wrap(2);
-        })
-        .then((num) => {
-          // this callback receives the value yielded by "cy.wrap(2)"
-          expect(num).to.equal(2);
-        });
-    });
-  });
-});

client/cypress/e2e/2-advanced-examples/cookies.cy.js

@@ -1,79 +0,0 @@
-/// <reference types="cypress" />
-
-context("Cookies", () => {
-  beforeEach(() => {
-    Cypress.Cookies.debug(true);
-
-    cy.visit("https://example.cypress.io/commands/cookies");
-
-    // clear cookies again after visiting to remove
-    // any 3rd party cookies picked up such as cloudflare
-    cy.clearCookies();
-  });
-
-  it("cy.getCookie() - get a browser cookie", () => {
-    // https://on.cypress.io/getcookie
-    cy.get("#getCookie .set-a-cookie").click();
-
-    // cy.getCookie() yields a cookie object
-    cy.getCookie("token").should("have.property", "value", "123ABC");
-  });
-
-  it("cy.getCookies() - get browser cookies", () => {
-    // https://on.cypress.io/getcookies
-    cy.getCookies().should("be.empty");
-
-    cy.get("#getCookies .set-a-cookie").click();
-
-    // cy.getCookies() yields an array of cookies
-    cy.getCookies()
-      .should("have.length", 1)
-      .should((cookies) => {
-        // each cookie has these properties
-        expect(cookies[0]).to.have.property("name", "token");
-        expect(cookies[0]).to.have.property("value", "123ABC");
-        expect(cookies[0]).to.have.property("httpOnly", false);
-        expect(cookies[0]).to.have.property("secure", false);
-        expect(cookies[0]).to.have.property("domain");
-        expect(cookies[0]).to.have.property("path");
-      });
-  });
-
-  it("cy.setCookie() - set a browser cookie", () => {
-    // https://on.cypress.io/setcookie
-    cy.getCookies().should("be.empty");
-
-    cy.setCookie("foo", "bar");
-
-    // cy.getCookie() yields a cookie object
-    cy.getCookie("foo").should("have.property", "value", "bar");
-  });
-
-  it("cy.clearCookie() - clear a browser cookie", () => {
-    // https://on.cypress.io/clearcookie
-    cy.getCookie("token").should("be.null");
-
-    cy.get("#clearCookie .set-a-cookie").click();
-
-    cy.getCookie("token").should("have.property", "value", "123ABC");
-
-    // cy.clearCookies() yields null
-    cy.clearCookie("token").should("be.null");
-
-    cy.getCookie("token").should("be.null");
-  });
-
-  it("cy.clearCookies() - clear browser cookies", () => {
-    // https://on.cypress.io/clearcookies
-    cy.getCookies().should("be.empty");
-
-    cy.get("#clearCookies .set-a-cookie").click();
-
-    cy.getCookies().should("have.length", 1);
-
-    // cy.clearCookies() yields null
-    cy.clearCookies();
-
-    cy.getCookies().should("be.empty");
-  });
-});

client/cypress/e2e/2-advanced-examples/cypress_api.cy.js

@@ -1,208 +0,0 @@
-/// <reference types="cypress" />
-
-context("Cypress.Commands", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/cypress-api");
-  });
-
-  // https://on.cypress.io/custom-commands
-
-  it(".add() - create a custom command", () => {
-    Cypress.Commands.add(
-      "console",
-      {
-        prevSubject: true
-      },
-      (subject, method) => {
-        // the previous subject is automatically received
-        // and the commands arguments are shifted
-
-        // allow us to change the console method used
-        method = method || "log";
-
-        // log the subject to the console
-        // @ts-ignore TS7017
-        console[method]("The subject is", subject);
-
-        // whatever we return becomes the new subject
-        // we don't want to change the subject so
-        // we return whatever was passed in
-        return subject;
-      }
-    );
-
-    // @ts-ignore TS2339
-    cy.get("button")
-      .console("info")
-      .then(($button) => {
-        // subject is still $button
-      });
-  });
-});
-
-context("Cypress.Cookies", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/cypress-api");
-  });
-
-  // https://on.cypress.io/cookies
-  it(".debug() - enable or disable debugging", () => {
-    Cypress.Cookies.debug(true);
-
-    // Cypress will now log in the console when
-    // cookies are set or cleared
-    cy.setCookie("fakeCookie", "123ABC");
-    cy.clearCookie("fakeCookie");
-    cy.setCookie("fakeCookie", "123ABC");
-    cy.clearCookie("fakeCookie");
-    cy.setCookie("fakeCookie", "123ABC");
-  });
-
-  it(".preserveOnce() - preserve cookies by key", () => {
-    // normally cookies are reset after each test
-    cy.getCookie("fakeCookie").should("not.be.ok");
-
-    // preserving a cookie will not clear it when
-    // the next test starts
-    cy.setCookie("lastCookie", "789XYZ");
-    Cypress.Cookies.preserveOnce("lastCookie");
-  });
-
-  it(".defaults() - set defaults for all cookies", () => {
-    // now any cookie with the name 'session_id' will
-    // not be cleared before each new test runs
-    Cypress.Cookies.defaults({
-      preserve: "session_id"
-    });
-  });
-});
-
-context("Cypress.arch", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/cypress-api");
-  });
-
-  it("Get CPU architecture name of underlying OS", () => {
-    // https://on.cypress.io/arch
-    expect(Cypress.arch).to.exist;
-  });
-});
-
-context("Cypress.config()", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/cypress-api");
-  });
-
-  it("Get and set configuration options", () => {
-    // https://on.cypress.io/config
-    let myConfig = Cypress.config();
-
-    expect(myConfig).to.have.property("animationDistanceThreshold", 5);
-    expect(myConfig).to.have.property("baseUrl", null);
-    expect(myConfig).to.have.property("defaultCommandTimeout", 4000);
-    expect(myConfig).to.have.property("requestTimeout", 5000);
-    expect(myConfig).to.have.property("responseTimeout", 30000);
-    expect(myConfig).to.have.property("viewportHeight", 660);
-    expect(myConfig).to.have.property("viewportWidth", 1000);
-    expect(myConfig).to.have.property("pageLoadTimeout", 60000);
-    expect(myConfig).to.have.property("waitForAnimations", true);
-
-    expect(Cypress.config("pageLoadTimeout")).to.eq(60000);
-
-    // this will change the config for the rest of your tests!
-    Cypress.config("pageLoadTimeout", 20000);
-
-    expect(Cypress.config("pageLoadTimeout")).to.eq(20000);
-
-    Cypress.config("pageLoadTimeout", 60000);
-  });
-});
-
-context("Cypress.dom", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/cypress-api");
-  });
-
-  // https://on.cypress.io/dom
-  it(".isHidden() - determine if a DOM element is hidden", () => {
-    let hiddenP = Cypress.$(".dom-p p.hidden").get(0);
-    let visibleP = Cypress.$(".dom-p p.visible").get(0);
-
-    // our first paragraph has css class 'hidden'
-    expect(Cypress.dom.isHidden(hiddenP)).to.be.true;
-    expect(Cypress.dom.isHidden(visibleP)).to.be.false;
-  });
-});
-
-context("Cypress.env()", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/cypress-api");
-  });
-
-  // We can set environment variables for highly dynamic values
-
-  // https://on.cypress.io/environment-variables
-  it("Get environment variables", () => {
-    // https://on.cypress.io/env
-    // set multiple environment variables
-    Cypress.env({
-      host: "veronica.dev.local",
-      api_server: "http://localhost:8888/v1/"
-    });
-
-    // get environment variable
-    expect(Cypress.env("host")).to.eq("veronica.dev.local");
-
-    // set environment variable
-    Cypress.env("api_server", "http://localhost:8888/v2/");
-    expect(Cypress.env("api_server")).to.eq("http://localhost:8888/v2/");
-
-    // get all environment variable
-    expect(Cypress.env()).to.have.property("host", "veronica.dev.local");
-    expect(Cypress.env()).to.have.property("api_server", "http://localhost:8888/v2/");
-  });
-});
-
-context("Cypress.log", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/cypress-api");
-  });
-
-  it("Control what is printed to the Command Log", () => {
-    // https://on.cypress.io/cypress-log
-  });
-});
-
-context("Cypress.platform", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/cypress-api");
-  });
-
-  it("Get underlying OS name", () => {
-    // https://on.cypress.io/platform
-    expect(Cypress.platform).to.be.exist;
-  });
-});
-
-context("Cypress.version", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/cypress-api");
-  });
-
-  it("Get current version of Cypress being run", () => {
-    // https://on.cypress.io/version
-    expect(Cypress.version).to.be.exist;
-  });
-});
-
-context("Cypress.spec", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/cypress-api");
-  });
-
-  it("Get current spec information", () => {
-    // https://on.cypress.io/spec
-    // wrap the object so we can inspect it easily by clicking in the command log
-    cy.wrap(Cypress.spec).should("include.keys", ["name", "relative", "absolute"]);
-  });
-});

client/cypress/e2e/2-advanced-examples/files.cy.js

@@ -1,86 +0,0 @@
-/// <reference types="cypress" />
-
-/// JSON fixture file can be loaded directly using
-// the built-in JavaScript bundler
-// @ts-ignore
-const requiredExample = require("../../fixtures/example");
-
-context("Files", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/files");
-  });
-
-  beforeEach(() => {
-    // load example.json fixture file and store
-    // in the test context object
-    cy.fixture("example.json").as("example");
-  });
-
-  it("cy.fixture() - load a fixture", () => {
-    // https://on.cypress.io/fixture
-
-    // Instead of writing a response inline you can
-    // use a fixture file's content.
-
-    // when application makes an Ajax request matching "GET **/comments/*"
-    // Cypress will intercept it and reply with the object in `example.json` fixture
-    cy.intercept("GET", "**/comments/*", { fixture: "example.json" }).as("getComment");
-
-    // we have code that gets a comment when
-    // the button is clicked in scripts.js
-    cy.get(".fixture-btn").click();
-
-    cy.wait("@getComment")
-      .its("response.body")
-      .should("have.property", "name")
-      .and("include", "Using fixtures to represent data");
-  });
-
-  it("cy.fixture() or require - load a fixture", function () {
-    // we are inside the "function () { ... }"
-    // callback and can use test context object "this"
-    // "this.example" was loaded in "beforeEach" function callback
-    expect(this.example, "fixture in the test context").to.deep.equal(requiredExample);
-
-    // or use "cy.wrap" and "should('deep.equal', ...)" assertion
-    cy.wrap(this.example).should("deep.equal", requiredExample);
-  });
-
-  it("cy.readFile() - read file contents", () => {
-    // https://on.cypress.io/readfile
-
-    // You can read a file and yield its contents
-    // The filePath is relative to your project's root.
-    cy.readFile("cypress.json").then((json) => {
-      expect(json).to.be.an("object");
-    });
-  });
-
-  it("cy.writeFile() - write to a file", () => {
-    // https://on.cypress.io/writefile
-
-    // You can write to a file
-
-    // Use a response from a request to automatically
-    // generate a fixture file for use later
-    cy.request("https://jsonplaceholder.cypress.io/users").then((response) => {
-      cy.writeFile("cypress/fixtures/users.json", response.body);
-    });
-
-    cy.fixture("users").should((users) => {
-      expect(users[0].name).to.exist;
-    });
-
-    // JavaScript arrays and objects are stringified
-    // and formatted into text.
-    cy.writeFile("cypress/fixtures/profile.json", {
-      id: 8739,
-      name: "Jane",
-      email: "jane@example.com"
-    });
-
-    cy.fixture("profile").should((profile) => {
-      expect(profile.name).to.eq("Jane");
-    });
-  });
-});

client/cypress/e2e/2-advanced-examples/local_storage.cy.js

@@ -1,58 +0,0 @@
-/// <reference types="cypress" />
-
-context("Local Storage", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/local-storage");
-  });
-  // Although local storage is automatically cleared
-  // in between tests to maintain a clean state
-  // sometimes we need to clear the local storage manually
-
-  it("cy.clearLocalStorage() - clear all data in local storage", () => {
-    // https://on.cypress.io/clearlocalstorage
-    cy.get(".ls-btn")
-      .click()
-      .should(() => {
-        expect(localStorage.getItem("prop1")).to.eq("red");
-        expect(localStorage.getItem("prop2")).to.eq("blue");
-        expect(localStorage.getItem("prop3")).to.eq("magenta");
-      });
-
-    // clearLocalStorage() yields the localStorage object
-    cy.clearLocalStorage().should((ls) => {
-      expect(ls.getItem("prop1")).to.be.null;
-      expect(ls.getItem("prop2")).to.be.null;
-      expect(ls.getItem("prop3")).to.be.null;
-    });
-
-    cy.get(".ls-btn")
-      .click()
-      .should(() => {
-        expect(localStorage.getItem("prop1")).to.eq("red");
-        expect(localStorage.getItem("prop2")).to.eq("blue");
-        expect(localStorage.getItem("prop3")).to.eq("magenta");
-      });
-
-    // Clear key matching string in Local Storage
-    cy.clearLocalStorage("prop1").should((ls) => {
-      expect(ls.getItem("prop1")).to.be.null;
-      expect(ls.getItem("prop2")).to.eq("blue");
-      expect(ls.getItem("prop3")).to.eq("magenta");
-    });
-
-    cy.get(".ls-btn")
-      .click()
-      .should(() => {
-        expect(localStorage.getItem("prop1")).to.eq("red");
-        expect(localStorage.getItem("prop2")).to.eq("blue");
-        expect(localStorage.getItem("prop3")).to.eq("magenta");
-      });
-
-    // Clear keys matching regex in Local Storage
-    cy.clearLocalStorage(/prop1|2/).should((ls) => {
-      expect(ls.getItem("prop1")).to.be.null;
-      expect(ls.getItem("prop2")).to.be.null;
-      expect(ls.getItem("prop3")).to.eq("magenta");
-    });
-  });
-});

client/cypress/e2e/2-advanced-examples/location.cy.js

@@ -1,32 +0,0 @@
-/// <reference types="cypress" />
-
-context("Location", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/location");
-  });
-
-  it("cy.hash() - get the current URL hash", () => {
-    // https://on.cypress.io/hash
-    cy.hash().should("be.empty");
-  });
-
-  it("cy.location() - get window.location", () => {
-    // https://on.cypress.io/location
-    cy.location().should((location) => {
-      expect(location.hash).to.be.empty;
-      expect(location.href).to.eq("https://example.cypress.io/commands/location");
-      expect(location.host).to.eq("example.cypress.io");
-      expect(location.hostname).to.eq("example.cypress.io");
-      expect(location.origin).to.eq("https://example.cypress.io");
-      expect(location.pathname).to.eq("/commands/location");
-      expect(location.port).to.eq("");
-      expect(location.protocol).to.eq("https:");
-      expect(location.search).to.be.empty;
-    });
-  });
-
-  it("cy.url() - get the current URL", () => {
-    // https://on.cypress.io/url
-    cy.url().should("eq", "https://example.cypress.io/commands/location");
-  });
-});

client/cypress/e2e/2-advanced-examples/misc.cy.js

@@ -1,98 +0,0 @@
-/// <reference types="cypress" />
-
-context("Misc", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/misc");
-  });
-
-  it(".end() - end the command chain", () => {
-    // https://on.cypress.io/end
-
-    // cy.end is useful when you want to end a chain of commands
-    // and force Cypress to re-query from the root element
-    cy.get(".misc-table").within(() => {
-      // ends the current chain and yields null
-      cy.contains("Cheryl").click().end();
-
-      // queries the entire table again
-      cy.contains("Charles").click();
-    });
-  });
-
-  it("cy.exec() - execute a system command", () => {
-    // execute a system command.
-    // so you can take actions necessary for
-    // your test outside the scope of Cypress.
-    // https://on.cypress.io/exec
-
-    // we can use Cypress.platform string to
-    // select appropriate command
-    // https://on.cypress/io/platform
-    cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`);
-
-    // on CircleCI Windows build machines we have a failure to run bash shell
-    // https://github.com/cypress-io/cypress/issues/5169
-    // so skip some of the tests by passing flag "--env circle=true"
-    const isCircleOnWindows = Cypress.platform === "win32" && Cypress.env("circle");
-
-    if (isCircleOnWindows) {
-      cy.log("Skipping test on CircleCI");
-
-      return;
-    }
-
-    // cy.exec problem on Shippable CI
-    // https://github.com/cypress-io/cypress/issues/6718
-    const isShippable = Cypress.platform === "linux" && Cypress.env("shippable");
-
-    if (isShippable) {
-      cy.log("Skipping test on ShippableCI");
-
-      return;
-    }
-
-    cy.exec("echo Jane Lane").its("stdout").should("contain", "Jane Lane");
-
-    if (Cypress.platform === "win32") {
-      cy.exec("print cypress.json").its("stderr").should("be.empty");
-    } else {
-      cy.exec("cat cypress.json").its("stderr").should("be.empty");
-
-      cy.exec("pwd").its("code").should("eq", 0);
-    }
-  });
-
-  it("cy.focused() - get the DOM element that has focus", () => {
-    // https://on.cypress.io/focused
-    cy.get(".misc-form").find("#name").click();
-    cy.focused().should("have.id", "name");
-
-    cy.get(".misc-form").find("#description").click();
-    cy.focused().should("have.id", "description");
-  });
-
-  context("Cypress.Screenshot", function () {
-    it("cy.screenshot() - take a screenshot", () => {
-      // https://on.cypress.io/screenshot
-      cy.screenshot("my-image");
-    });
-
-    it("Cypress.Screenshot.defaults() - change default config of screenshots", function () {
-      Cypress.Screenshot.defaults({
-        blackout: [".foo"],
-        capture: "viewport",
-        clip: { x: 0, y: 0, width: 200, height: 200 },
-        scale: false,
-        disableTimersAndAnimations: true,
-        screenshotOnRunFailure: true,
-        onBeforeScreenshot() {},
-        onAfterScreenshot() {}
-      });
-    });
-  });
-
-  it("cy.wrap() - wrap an object", () => {
-    // https://on.cypress.io/wrap
-    cy.wrap({ foo: "bar" }).should("have.property", "foo").and("include", "bar");
-  });
-});

client/cypress/e2e/2-advanced-examples/navigation.cy.js

@@ -1,56 +0,0 @@
-/// <reference types="cypress" />
-
-context("Navigation", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io");
-    cy.get(".navbar-nav").contains("Commands").click();
-    cy.get(".dropdown-menu").contains("Navigation").click();
-  });
-
-  it("cy.go() - go back or forward in the browser's history", () => {
-    // https://on.cypress.io/go
-
-    cy.location("pathname").should("include", "navigation");
-
-    cy.go("back");
-    cy.location("pathname").should("not.include", "navigation");
-
-    cy.go("forward");
-    cy.location("pathname").should("include", "navigation");
-
-    // clicking back
-    cy.go(-1);
-    cy.location("pathname").should("not.include", "navigation");
-
-    // clicking forward
-    cy.go(1);
-    cy.location("pathname").should("include", "navigation");
-  });
-
-  it("cy.reload() - reload the page", () => {
-    // https://on.cypress.io/reload
-    cy.reload();
-
-    // reload the page without using the cache
-    cy.reload(true);
-  });
-
-  it("cy.visit() - visit a remote url", () => {
-    // https://on.cypress.io/visit
-
-    // Visit any sub-domain of your current domain
-
-    // Pass options to the visit
-    cy.visit("https://example.cypress.io/commands/navigation", {
-      timeout: 50000, // increase total time for the visit to resolve
-      onBeforeLoad(contentWindow) {
-        // contentWindow is the remote page's window object
-        expect(typeof contentWindow === "object").to.be.true;
-      },
-      onLoad(contentWindow) {
-        // contentWindow is the remote page's window object
-        expect(typeof contentWindow === "object").to.be.true;
-      }
-    });
-  });
-});

client/cypress/e2e/2-advanced-examples/network_requests.cy.js

@@ -1,165 +0,0 @@
-/// <reference types="cypress" />
-
-context("Network Requests", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/network-requests");
-  });
-
-  // Manage HTTP requests in your app
-
-  it("cy.request() - make an XHR request", () => {
-    // https://on.cypress.io/request
-    cy.request("https://jsonplaceholder.cypress.io/comments").should((response) => {
-      expect(response.status).to.eq(200);
-      // the server sometimes gets an extra comment posted from another machine
-      // which gets returned as 1 extra object
-      expect(response.body).to.have.property("length").and.be.oneOf([500, 501]);
-      expect(response).to.have.property("headers");
-      expect(response).to.have.property("duration");
-    });
-  });
-
-  it("cy.request() - verify response using BDD syntax", () => {
-    cy.request("https://jsonplaceholder.cypress.io/comments").then((response) => {
-      // https://on.cypress.io/assertions
-      expect(response).property("status").to.equal(200);
-      expect(response).property("body").to.have.property("length").and.be.oneOf([500, 501]);
-      expect(response).to.include.keys("headers", "duration");
-    });
-  });
-
-  it("cy.request() with query parameters", () => {
-    // will execute request
-    // https://jsonplaceholder.cypress.io/comments?postId=1&id=3
-    cy.request({
-      url: "https://jsonplaceholder.cypress.io/comments",
-      qs: {
-        postId: 1,
-        id: 3
-      }
-    })
-      .its("body")
-      .should("be.an", "array")
-      .and("have.length", 1)
-      .its("0") // yields first element of the array
-      .should("contain", {
-        postId: 1,
-        id: 3
-      });
-  });
-
-  it("cy.request() - pass result to the second request", () => {
-    // first, let's find out the userId of the first user we have
-    cy.request("https://jsonplaceholder.cypress.io/users?_limit=1")
-      .its("body") // yields the response object
-      .its("0") // yields the first element of the returned list
-      // the above two commands its('body').its('0')
-      // can be written as its('body.0')
-      // if you do not care about TypeScript checks
-      .then((user) => {
-        expect(user).property("id").to.be.a("number");
-        // make a new post on behalf of the user
-        cy.request("POST", "https://jsonplaceholder.cypress.io/posts", {
-          userId: user.id,
-          title: "Cypress Test Runner",
-          body: "Fast, easy and reliable testing for anything that runs in a browser."
-        });
-      })
-      // note that the value here is the returned value of the 2nd request
-      // which is the new post object
-      .then((response) => {
-        expect(response).property("status").to.equal(201); // new entity created
-        expect(response).property("body").to.contain({
-          title: "Cypress Test Runner"
-        });
-
-        // we don't know the exact post id - only that it will be > 100
-        // since JSONPlaceholder has built-in 100 posts
-        expect(response.body).property("id").to.be.a("number").and.to.be.gt(100);
-
-        // we don't know the user id here - since it was in above closure
-        // so in this test just confirm that the property is there
-        expect(response.body).property("userId").to.be.a("number");
-      });
-  });
-
-  it("cy.request() - save response in the shared test context", () => {
-    // https://on.cypress.io/variables-and-aliases
-    cy.request("https://jsonplaceholder.cypress.io/users?_limit=1")
-      .its("body")
-      .its("0") // yields the first element of the returned list
-      .as("user") // saves the object in the test context
-      .then(function () {
-        // NOTE 👀
-        //  By the time this callback runs the "as('user')" command
-        //  has saved the user object in the test context.
-        //  To access the test context we need to use
-        //  the "function () { ... }" callback form,
-        //  otherwise "this" points at a wrong or undefined object!
-        cy.request("POST", "https://jsonplaceholder.cypress.io/posts", {
-          userId: this.user.id,
-          title: "Cypress Test Runner",
-          body: "Fast, easy and reliable testing for anything that runs in a browser."
-        })
-          .its("body")
-          .as("post"); // save the new post from the response
-      })
-      .then(function () {
-        // When this callback runs, both "cy.request" API commands have finished
-        // and the test context has "user" and "post" objects set.
-        // Let's verify them.
-        expect(this.post, "post has the right user id").property("userId").to.equal(this.user.id);
-      });
-  });
-
-  it("cy.intercept() - route responses to matching requests", () => {
-    // https://on.cypress.io/intercept
-
-    let message = "whoa, this comment does not exist";
-
-    // Listen to GET to comments/1
-    cy.intercept("GET", "**/comments/*").as("getComment");
-
-    // we have code that gets a comment when
-    // the button is clicked in scripts.js
-    cy.get(".network-btn").click();
-
-    // https://on.cypress.io/wait
-    cy.wait("@getComment").its("response.statusCode").should("be.oneOf", [200, 304]);
-
-    // Listen to POST to comments
-    cy.intercept("POST", "**/comments").as("postComment");
-
-    // we have code that posts a comment when
-    // the button is clicked in scripts.js
-    cy.get(".network-post").click();
-    cy.wait("@postComment").should(({ request, response }) => {
-      expect(request.body).to.include("email");
-      expect(request.headers).to.have.property("content-type");
-      expect(response && response.body).to.have.property("name", "Using POST in cy.intercept()");
-    });
-
-    // Stub a response to PUT comments/ ****
-    cy.intercept(
-      {
-        method: "PUT",
-        url: "**/comments/*"
-      },
-      {
-        statusCode: 404,
-        body: { error: message },
-        headers: { "access-control-allow-origin": "*" },
-        delayMs: 500
-      }
-    ).as("putComment");
-
-    // we have code that puts a comment when
-    // the button is clicked in scripts.js
-    cy.get(".network-put").click();
-
-    cy.wait("@putComment");
-
-    // our 404 statusCode logic in scripts.js executed
-    cy.get(".network-put-comment").should("contain", message);
-  });
-});

client/cypress/e2e/2-advanced-examples/querying.cy.js

@@ -1,100 +0,0 @@
-/// <reference types="cypress" />
-
-context("Querying", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/querying");
-  });
-
-  // The most commonly used query is 'cy.get()', you can
-  // think of this like the '$' in jQuery
-
-  it("cy.get() - query DOM elements", () => {
-    // https://on.cypress.io/get
-
-    cy.get("#query-btn").should("contain", "Button");
-
-    cy.get(".query-btn").should("contain", "Button");
-
-    cy.get("#querying .well>button:first").should("contain", "Button");
-    //              ↲
-    // Use CSS selectors just like jQuery
-
-    cy.get('[data-test-id="test-example"]').should("have.class", "example");
-
-    // 'cy.get()' yields jQuery object, you can get its attribute
-    // by invoking `.attr()` method
-    cy.get('[data-test-id="test-example"]').invoke("attr", "data-test-id").should("equal", "test-example");
-
-    // or you can get element's CSS property
-    cy.get('[data-test-id="test-example"]').invoke("css", "position").should("equal", "static");
-
-    // or use assertions directly during 'cy.get()'
-    // https://on.cypress.io/assertions
-    cy.get('[data-test-id="test-example"]')
-      .should("have.attr", "data-test-id", "test-example")
-      .and("have.css", "position", "static");
-  });
-
-  it("cy.contains() - query DOM elements with matching content", () => {
-    // https://on.cypress.io/contains
-    cy.get(".query-list").contains("bananas").should("have.class", "third");
-
-    // we can pass a regexp to `.contains()`
-    cy.get(".query-list").contains(/^b\w+/).should("have.class", "third");
-
-    cy.get(".query-list").contains("apples").should("have.class", "first");
-
-    // passing a selector to contains will
-    // yield the selector containing the text
-    cy.get("#querying").contains("ul", "oranges").should("have.class", "query-list");
-
-    cy.get(".query-button").contains("Save Form").should("have.class", "btn");
-  });
-
-  it(".within() - query DOM elements within a specific element", () => {
-    // https://on.cypress.io/within
-    cy.get(".query-form").within(() => {
-      cy.get("input:first").should("have.attr", "placeholder", "Email");
-      cy.get("input:last").should("have.attr", "placeholder", "Password");
-    });
-  });
-
-  it("cy.root() - query the root DOM element", () => {
-    // https://on.cypress.io/root
-
-    // By default, root is the document
-    cy.root().should("match", "html");
-
-    cy.get(".query-ul").within(() => {
-      // In this within, the root is now the ul DOM element
-      cy.root().should("have.class", "query-ul");
-    });
-  });
-
-  it("best practices - selecting elements", () => {
-    // https://on.cypress.io/best-practices#Selecting-Elements
-    cy.get("[data-cy=best-practices-selecting-elements]").within(() => {
-      // Worst - too generic, no context
-      cy.get("button").click();
-
-      // Bad. Coupled to styling. Highly subject to change.
-      cy.get(".btn.btn-large").click();
-
-      // Average. Coupled to the `name` attribute which has HTML semantics.
-      cy.get("[name=submission]").click();
-
-      // Better. But still coupled to styling or JS event listeners.
-      cy.get("#main").click();
-
-      // Slightly better. Uses an ID but also ensures the element
-      // has an ARIA role attribute
-      cy.get("#main[role=button]").click();
-
-      // Much better. But still coupled to text content that may change.
-      cy.contains("Submit").click();
-
-      // Best. Insulated from all changes.
-      cy.get("[data-cy=submit]").click();
-    });
-  });
-});

client/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js

@@ -1,203 +0,0 @@
-/// <reference types="cypress" />
-// remove no check once Cypress.sinon is typed
-// https://github.com/cypress-io/cypress/issues/6720
-
-context("Spies, Stubs, and Clock", () => {
-  it("cy.spy() - wrap a method in a spy", () => {
-    // https://on.cypress.io/spy
-    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
-
-    const obj = {
-      foo() {}
-    };
-
-    const spy = cy.spy(obj, "foo").as("anyArgs");
-
-    obj.foo();
-
-    expect(spy).to.be.called;
-  });
-
-  it("cy.spy() retries until assertions pass", () => {
-    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
-
-    const obj = {
-      /**
-       * Prints the argument passed
-       * @param x {any}
-       */
-      foo(x) {
-        console.log("obj.foo called with", x);
-      }
-    };
-
-    cy.spy(obj, "foo").as("foo");
-
-    setTimeout(() => {
-      obj.foo("first");
-    }, 500);
-
-    setTimeout(() => {
-      obj.foo("second");
-    }, 2500);
-
-    cy.get("@foo").should("have.been.calledTwice");
-  });
-
-  it("cy.stub() - create a stub and/or replace a function with stub", () => {
-    // https://on.cypress.io/stub
-    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
-
-    const obj = {
-      /**
-       * prints both arguments to the console
-       * @param a {string}
-       * @param b {string}
-       */
-      foo(a, b) {
-        console.log("a", a, "b", b);
-      }
-    };
-
-    const stub = cy.stub(obj, "foo").as("foo");
-
-    obj.foo("foo", "bar");
-
-    expect(stub).to.be.called;
-  });
-
-  it("cy.clock() - control time in the browser", () => {
-    // https://on.cypress.io/clock
-
-    // create the date in UTC so its always the same
-    // no matter what local timezone the browser is running in
-    const now = new Date(Date.UTC(2017, 2, 14)).getTime();
-
-    cy.clock(now);
-    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
-    cy.get("#clock-div").click().should("have.text", "1489449600");
-  });
-
-  it("cy.tick() - move time in the browser", () => {
-    // https://on.cypress.io/tick
-
-    // create the date in UTC so its always the same
-    // no matter what local timezone the browser is running in
-    const now = new Date(Date.UTC(2017, 2, 14)).getTime();
-
-    cy.clock(now);
-    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
-    cy.get("#tick-div").click().should("have.text", "1489449600");
-
-    cy.tick(10000); // 10 seconds passed
-    cy.get("#tick-div").click().should("have.text", "1489449610");
-  });
-
-  it("cy.stub() matches depending on arguments", () => {
-    // see all possible matchers at
-    // https://sinonjs.org/releases/latest/matchers/
-    const greeter = {
-      /**
-       * Greets a person
-       * @param {string} name
-       */
-      greet(name) {
-        return `Hello, ${name}!`;
-      }
-    };
-
-    cy.stub(greeter, "greet")
-      .callThrough() // if you want non-matched calls to call the real method
-      .withArgs(Cypress.sinon.match.string)
-      .returns("Hi")
-      .withArgs(Cypress.sinon.match.number)
-      .throws(new Error("Invalid name"));
-
-    expect(greeter.greet("World")).to.equal("Hi");
-    // @ts-ignore
-    expect(() => greeter.greet(42)).to.throw("Invalid name");
-    expect(greeter.greet).to.have.been.calledTwice;
-
-    // non-matched calls goes the actual method
-    // @ts-ignore
-    expect(greeter.greet()).to.equal("Hello, undefined!");
-  });
-
-  it("matches call arguments using Sinon matchers", () => {
-    // see all possible matchers at
-    // https://sinonjs.org/releases/latest/matchers/
-    const calculator = {
-      /**
-       * returns the sum of two arguments
-       * @param a {number}
-       * @param b {number}
-       */
-      add(a, b) {
-        return a + b;
-      }
-    };
-
-    const spy = cy.spy(calculator, "add").as("add");
-
-    expect(calculator.add(2, 3)).to.equal(5);
-
-    // if we want to assert the exact values used during the call
-    expect(spy).to.be.calledWith(2, 3);
-
-    // let's confirm "add" method was called with two numbers
-    expect(spy).to.be.calledWith(Cypress.sinon.match.number, Cypress.sinon.match.number);
-
-    // alternatively, provide the value to match
-    expect(spy).to.be.calledWith(Cypress.sinon.match(2), Cypress.sinon.match(3));
-
-    // match any value
-    expect(spy).to.be.calledWith(Cypress.sinon.match.any, 3);
-
-    // match any value from a list
-    expect(spy).to.be.calledWith(Cypress.sinon.match.in([1, 2, 3]), 3);
-
-    /**
-     * Returns true if the given number is event
-     * @param {number} x
-     */
-    const isEven = (x) => x % 2 === 0;
-
-    // expect the value to pass a custom predicate function
-    // the second argument to "sinon.match(predicate, message)" is
-    // shown if the predicate does not pass and assertion fails
-    expect(spy).to.be.calledWith(Cypress.sinon.match(isEven, "isEven"), 3);
-
-    /**
-     * Returns a function that checks if a given number is larger than the limit
-     * @param {number} limit
-     * @returns {(x: number) => boolean}
-     */
-    const isGreaterThan = (limit) => (x) => x > limit;
-
-    /**
-     * Returns a function that checks if a given number is less than the limit
-     * @param {number} limit
-     * @returns {(x: number) => boolean}
-     */
-    const isLessThan = (limit) => (x) => x < limit;
-
-    // you can combine several matchers using "and", "or"
-    expect(spy).to.be.calledWith(
-      Cypress.sinon.match.number,
-      Cypress.sinon.match(isGreaterThan(2), "> 2").and(Cypress.sinon.match(isLessThan(4), "< 4"))
-    );
-
-    expect(spy).to.be.calledWith(
-      Cypress.sinon.match.number,
-      Cypress.sinon.match(isGreaterThan(200), "> 200").or(Cypress.sinon.match(3))
-    );
-
-    // matchers can be used from BDD assertions
-    cy.get("@add").should("have.been.calledWith", Cypress.sinon.match.number, Cypress.sinon.match(3));
-
-    // you can alias matchers for shorter test code
-    const { match: M } = Cypress.sinon;
-
-    cy.get("@add").should("have.been.calledWith", M.number, M(3));
-  });
-});

client/cypress/e2e/2-advanced-examples/traversal.cy.js

@@ -1,97 +0,0 @@
-/// <reference types="cypress" />
-
-context("Traversal", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/traversal");
-  });
-
-  it(".children() - get child DOM elements", () => {
-    // https://on.cypress.io/children
-    cy.get(".traversal-breadcrumb").children(".active").should("contain", "Data");
-  });
-
-  it(".closest() - get closest ancestor DOM element", () => {
-    // https://on.cypress.io/closest
-    cy.get(".traversal-badge").closest("ul").should("have.class", "list-group");
-  });
-
-  it(".eq() - get a DOM element at a specific index", () => {
-    // https://on.cypress.io/eq
-    cy.get(".traversal-list>li").eq(1).should("contain", "siamese");
-  });
-
-  it(".filter() - get DOM elements that match the selector", () => {
-    // https://on.cypress.io/filter
-    cy.get(".traversal-nav>li").filter(".active").should("contain", "About");
-  });
-
-  it(".find() - get descendant DOM elements of the selector", () => {
-    // https://on.cypress.io/find
-    cy.get(".traversal-pagination").find("li").find("a").should("have.length", 7);
-  });
-
-  it(".first() - get first DOM element", () => {
-    // https://on.cypress.io/first
-    cy.get(".traversal-table td").first().should("contain", "1");
-  });
-
-  it(".last() - get last DOM element", () => {
-    // https://on.cypress.io/last
-    cy.get(".traversal-buttons .btn").last().should("contain", "Submit");
-  });
-
-  it(".next() - get next sibling DOM element", () => {
-    // https://on.cypress.io/next
-    cy.get(".traversal-ul").contains("apples").next().should("contain", "oranges");
-  });
-
-  it(".nextAll() - get all next sibling DOM elements", () => {
-    // https://on.cypress.io/nextall
-    cy.get(".traversal-next-all").contains("oranges").nextAll().should("have.length", 3);
-  });
-
-  it(".nextUntil() - get next sibling DOM elements until next el", () => {
-    // https://on.cypress.io/nextuntil
-    cy.get("#veggies").nextUntil("#nuts").should("have.length", 3);
-  });
-
-  it(".not() - remove DOM elements from set of DOM elements", () => {
-    // https://on.cypress.io/not
-    cy.get(".traversal-disabled .btn").not("[disabled]").should("not.contain", "Disabled");
-  });
-
-  it(".parent() - get parent DOM element from DOM elements", () => {
-    // https://on.cypress.io/parent
-    cy.get(".traversal-mark").parent().should("contain", "Morbi leo risus");
-  });
-
-  it(".parents() - get parent DOM elements from DOM elements", () => {
-    // https://on.cypress.io/parents
-    cy.get(".traversal-cite").parents().should("match", "blockquote");
-  });
-
-  it(".parentsUntil() - get parent DOM elements from DOM elements until el", () => {
-    // https://on.cypress.io/parentsuntil
-    cy.get(".clothes-nav").find(".active").parentsUntil(".clothes-nav").should("have.length", 2);
-  });
-
-  it(".prev() - get previous sibling DOM element", () => {
-    // https://on.cypress.io/prev
-    cy.get(".birds").find(".active").prev().should("contain", "Lorikeets");
-  });
-
-  it(".prevAll() - get all previous sibling DOM elements", () => {
-    // https://on.cypress.io/prevall
-    cy.get(".fruits-list").find(".third").prevAll().should("have.length", 2);
-  });
-
-  it(".prevUntil() - get all previous sibling DOM elements until el", () => {
-    // https://on.cypress.io/prevuntil
-    cy.get(".foods-list").find("#nuts").prevUntil("#veggies").should("have.length", 3);
-  });
-
-  it(".siblings() - get all sibling DOM elements", () => {
-    // https://on.cypress.io/siblings
-    cy.get(".traversal-pills .active").siblings().should("have.length", 2);
-  });
-});

client/cypress/e2e/2-advanced-examples/utilities.cy.js

@@ -1,108 +0,0 @@
-/// <reference types="cypress" />
-
-context("Utilities", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/utilities");
-  });
-
-  it("Cypress._ - call a lodash method", () => {
-    // https://on.cypress.io/_
-    cy.request("https://jsonplaceholder.cypress.io/users").then((response) => {
-      let ids = Cypress._.chain(response.body).map("id").take(3).value();
-
-      expect(ids).to.deep.eq([1, 2, 3]);
-    });
-  });
-
-  it("Cypress.$ - call a jQuery method", () => {
-    // https://on.cypress.io/$
-    let $li = Cypress.$(".utility-jquery li:first");
-
-    cy.wrap($li).should("not.have.class", "active").click().should("have.class", "active");
-  });
-
-  it("Cypress.Blob - blob utilities and base64 string conversion", () => {
-    // https://on.cypress.io/blob
-    cy.get(".utility-blob").then(($div) => {
-      // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
-      // get the dataUrl string for the javascript-logo
-      return Cypress.Blob.imgSrcToDataURL(
-        "https://example.cypress.io/assets/img/javascript-logo.png",
-        undefined,
-        "anonymous"
-      ).then((dataUrl) => {
-        // create an <img> element and set its src to the dataUrl
-        let img = Cypress.$("<img />", { src: dataUrl });
-
-        // need to explicitly return cy here since we are initially returning
-        // the Cypress.Blob.imgSrcToDataURL promise to our test
-        // append the image
-        $div.append(img);
-
-        cy.get(".utility-blob img").click().should("have.attr", "src", dataUrl);
-      });
-    });
-  });
-
-  it("Cypress.minimatch - test out glob patterns against strings", () => {
-    // https://on.cypress.io/minimatch
-    let matching = Cypress.minimatch("/users/1/comments", "/users/*/comments", {
-      matchBase: true
-    });
-
-    expect(matching, "matching wildcard").to.be.true;
-
-    matching = Cypress.minimatch("/users/1/comments/2", "/users/*/comments", {
-      matchBase: true
-    });
-
-    expect(matching, "comments").to.be.false;
-
-    // ** matches against all downstream path segments
-    matching = Cypress.minimatch("/foo/bar/baz/123/quux?a=b&c=2", "/foo/**", {
-      matchBase: true
-    });
-
-    expect(matching, "comments").to.be.true;
-
-    // whereas * matches only the next path segment
-
-    matching = Cypress.minimatch("/foo/bar/baz/123/quux?a=b&c=2", "/foo/*", {
-      matchBase: false
-    });
-
-    expect(matching, "comments").to.be.false;
-  });
-
-  it("Cypress.Promise - instantiate a bluebird promise", () => {
-    // https://on.cypress.io/promise
-    let waited = false;
-
-    /**
-     * @return Bluebird<string>
-     */
-    function waitOneSecond() {
-      // return a promise that resolves after 1 second
-      // @ts-ignore TS2351 (new Cypress.Promise)
-      return new Cypress.Promise((resolve, reject) => {
-        setTimeout(() => {
-          // set waited to true
-          waited = true;
-
-          // resolve with 'foo' string
-          resolve("foo");
-        }, 1000);
-      });
-    }
-
-    cy.then(() => {
-      // return a promise to cy.then() that
-      // is awaited until it resolves
-      // @ts-ignore TS7006
-      return waitOneSecond().then((str) => {
-        expect(str).to.eq("foo");
-        expect(waited).to.be.true;
-      });
-    });
-  });
-});

client/cypress/e2e/2-advanced-examples/viewport.cy.js

@@ -1,59 +0,0 @@
-/// <reference types="cypress" />
-
-context("Viewport", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/viewport");
-  });
-
-  it("cy.viewport() - set the viewport size and dimension", () => {
-    // https://on.cypress.io/viewport
-
-    cy.get("#navbar").should("be.visible");
-    cy.viewport(320, 480);
-
-    // the navbar should have collapse since our screen is smaller
-    cy.get("#navbar").should("not.be.visible");
-    cy.get(".navbar-toggle").should("be.visible").click();
-    cy.get(".nav").find("a").should("be.visible");
-
-    // lets see what our app looks like on a super large screen
-    cy.viewport(2999, 2999);
-
-    // cy.viewport() accepts a set of preset sizes
-    // to easily set the screen to a device's width and height
-
-    // We added a cy.wait() between each viewport change so you can see
-    // the change otherwise it is a little too fast to see :)
-
-    cy.viewport("macbook-15");
-    cy.wait(200);
-    cy.viewport("macbook-13");
-    cy.wait(200);
-    cy.viewport("macbook-11");
-    cy.wait(200);
-    cy.viewport("ipad-2");
-    cy.wait(200);
-    cy.viewport("ipad-mini");
-    cy.wait(200);
-    cy.viewport("iphone-6+");
-    cy.wait(200);
-    cy.viewport("iphone-6");
-    cy.wait(200);
-    cy.viewport("iphone-5");
-    cy.wait(200);
-    cy.viewport("iphone-4");
-    cy.wait(200);
-    cy.viewport("iphone-3");
-    cy.wait(200);
-
-    // cy.viewport() accepts an orientation for all presets
-    // the default orientation is 'portrait'
-    cy.viewport("ipad-2", "portrait");
-    cy.wait(200);
-    cy.viewport("iphone-4", "landscape");
-    cy.wait(200);
-
-    // The viewport will be reset back to the default dimensions
-    // in between tests (the  default can be set in cypress.json)
-  });
-});

client/cypress/e2e/2-advanced-examples/waiting.cy.js

@@ -1,31 +0,0 @@
-/// <reference types="cypress" />
-
-context("Waiting", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/waiting");
-  });
-  // BE CAREFUL of adding unnecessary wait times.
-  // https://on.cypress.io/best-practices#Unnecessary-Waiting
-
-  // https://on.cypress.io/wait
-  it("cy.wait() - wait for a specific amount of time", () => {
-    cy.get(".wait-input1").type("Wait 1000ms after typing");
-    cy.wait(1000);
-    cy.get(".wait-input2").type("Wait 1000ms after typing");
-    cy.wait(1000);
-    cy.get(".wait-input3").type("Wait 1000ms after typing");
-    cy.wait(1000);
-  });
-
-  it("cy.wait() - wait for a specific route", () => {
-    // Listen to GET to comments/1
-    cy.intercept("GET", "**/comments/*").as("getComment");
-
-    // we have code that gets a comment when
-    // the button is clicked in scripts.js
-    cy.get(".network-btn").click();
-
-    // wait for GET comments/1
-    cy.wait("@getComment").its("response.statusCode").should("be.oneOf", [200, 304]);
-  });
-});

client/cypress/e2e/2-advanced-examples/window.cy.js

@@ -1,22 +0,0 @@
-/// <reference types="cypress" />
-
-context("Window", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/window");
-  });
-
-  it("cy.window() - get the global window object", () => {
-    // https://on.cypress.io/window
-    cy.window().should("have.property", "top");
-  });
-
-  it("cy.document() - get the document object", () => {
-    // https://on.cypress.io/document
-    cy.document().should("have.property", "charset").and("eq", "UTF-8");
-  });
-
-  it("cy.title() - get the title", () => {
-    // https://on.cypress.io/title
-    cy.title().should("include", "Kitchen Sink");
-  });
-});

client/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

client/cypress/fixtures/profile.json

@@ -1,5 +0,0 @@
-{
-  "id": 8739,
-  "name": "Jane",
-  "email": "jane@example.com"
-}

client/cypress/fixtures/users.json

@@ -1 +0,0 @@
-[]

client/cypress/plugins/index.js

@@ -1,22 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.jsx can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-// eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-};

client/cypress/support/commands.js

@@ -1,27 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-
-import "@testing-library/cypress/add-commands";

client/cypress/support/e2e.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.jsx is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import "./commands";
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

client/cypress/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": true,
-    "baseUrl": "../node_modules",
-    "types": ["cypress"]
-  },
-  "include": ["**/*.*"]
-}

client/package.json

@@ -2,44 +2,48 @@
   "name": "bodyshop",
   "version": "0.2.1",
   "engines": {
-    "node": ">=18.18.2"
+    "node": ">=22.0.0"
   },
   "type": "module",
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@ant-design/pro-layout": "^7.22.0",
-    "@apollo/client": "^3.12.6",
+    "@ant-design/pro-layout": "^7.22.3",
+    "@apollo/client": "^3.13.5",
     "@emotion/is-prop-valid": "^1.3.1",
-    "@fingerprintjs/fingerprintjs": "^4.5.1",
+    "@fingerprintjs/fingerprintjs": "^4.6.1",
+    "@firebase/analytics": "^0.10.12",
+    "@firebase/app": "^0.11.3",
+    "@firebase/auth": "^1.9.1",
+    "@firebase/firestore": "^4.7.10",
+    "@firebase/messaging": "^0.12.17",
     "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.5.0",
-    "@sentry/cli": "^2.40.0",
-    "@sentry/react": "^7.114.0",
-    "@splitsoftware/splitio-react": "^1.13.0",
+    "@reduxjs/toolkit": "^2.6.1",
+    "@sentry/cli": "^2.42.4",
+    "@sentry/react": "^9.9.0",
+    "@sentry/vite-plugin": "^3.2.2",
+    "@splitsoftware/splitio-react": "^2.0.1",
     "@tanem/react-nprogress": "^5.0.53",
-    "@vitejs/plugin-react": "^4.3.4",
-    "antd": "^5.23.1",
+    "antd": "^5.24.5",
     "apollo-link-logger": "^2.0.1",
-    "apollo-link-sentry": "^3.3.0",
+    "apollo-link-sentry": "^4.2.0",
     "autosize": "^6.0.1",
-    "axios": "^1.7.9",
+    "axios": "^1.8.4",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
     "dayjs": "^1.11.13",
-    "dayjs-business-days2": "^1.2.3",
+    "dayjs-business-days2": "^1.3.0",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.7",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^10.13.2",
     "graphql": "^16.10.0",
-    "i18next": "^23.15.1",
-    "i18next-browser-languagedetector": "^8.0.2",
+    "i18next": "^24.2.3",
+    "i18next-browser-languagedetector": "^8.0.4",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.11.18",
-    "logrocket": "^8.1.2",
-    "markerjs2": "^2.32.3",
+    "libphonenumber-js": "^1.12.6",
+    "logrocket": "^9.0.2",
+    "markerjs2": "^2.32.4",
     "memoize-one": "^6.0.0",
     "normalize-url": "^8.0.1",
     "object-hash": "^3.0.0",
@@ -47,25 +51,25 @@
     "query-string": "^9.1.1",
     "raf-schd": "^4.0.3",
     "react": "^18.3.1",
-    "react-big-calendar": "^1.17.1",
+    "react-big-calendar": "^1.18.0",
     "react-color": "^2.19.3",
-    "react-cookie": "^7.2.2",
+    "react-cookie": "^8.0.1",
     "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.4.0",
+    "react-i18next": "^15.4.1",
+    "react-icons": "^5.5.0",
     "react-image-lightbox": "^5.1.4",
-    "react-markdown": "^9.0.3",
+    "react-markdown": "^10.1.0",
     "react-number-format": "^5.4.3",
     "react-popopo": "^2.1.9",
     "react-product-fruits": "^2.2.61",
     "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-virtuoso": "^4.10.4",
+    "react-virtuoso": "^4.12.5",
     "recharts": "^2.15.0",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
@@ -73,12 +77,11 @@
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
-    "sass": "^1.83.4",
+    "sass": "^1.86.0",
     "socket.io-client": "^4.8.1",
-    "styled-components": "^6.1.14",
+    "styled-components": "^6.1.16",
     "subscriptions-transport-ws": "^0.11.0",
     "use-memo-one": "^1.1.3",
-    "userpilot": "^1.3.6",
     "vite-plugin-ejs": "^1.7.0",
     "web-vitals": "^3.5.2"
   },
@@ -95,11 +98,15 @@
     "build:test:rome": "env-cmd -f .env.test.rome npm run build",
     "build:production:imex": "env-cmd -f .env.production.imex npm run build",
     "build:production:rome": "env-cmd -f .env.production.rome npm run build",
-    "test": "cypress open",
-    "eject": "react-scripts eject",
     "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
     "eulaize": "node src/utils/eulaize.js",
-    "sentry:sourcemaps:imex": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
+    "test:unit": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e:imex": "playwright test --config playwright.config.js",
+    "test:e2e:rome": "playwright test --config playwright.rome.config.js",
+    "test:e2e:imex:headed": "playwright test --config playwright.config.js --headed",
+    "test:e2e:rome:headed": "playwright test --config playwright.rome.config.js --headed",
+    "test:e2e:report": "playwright show-report"
   },
   "browserslist": {
     "production": [
@@ -120,36 +127,40 @@
     "@rollup/rollup-linux-x64-gnu": "4.6.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5.5.2",
+    "@ant-design/icons": "^6.0.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.26.3",
-    "@dotenvx/dotenvx": "^1.33.0",
+    "@dotenvx/dotenvx": "^1.39.0",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.18.0",
-    "@sentry/webpack-plugin": "^2.22.4",
-    "@testing-library/cypress": "^10.0.2",
+    "@eslint/js": "^9.23.0",
+    "@playwright/test": "^1.51.1",
+    "@sentry/webpack-plugin": "^3.2.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "browserslist": "^4.24.4",
     "browserslist-to-esbuild": "^2.1.1",
     "chalk": "^5.4.1",
-    "cross-env": "^7.0.3",
-    "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.4",
-    "globals": "^15.14.0",
+    "globals": "^15.15.0",
+    "jsdom": "^26.0.0",
     "memfs": "^4.17.0",
     "os-browserify": "^0.3.0",
-    "react-error-overlay": "6.0.11",
+    "playwright": "^1.51.1",
+    "react-error-overlay": "^6.1.0",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^6.0.7",
+    "vite": "^6.2.3",
     "vite-plugin-babel": "^1.3.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-node-polyfills": "^0.23.0",
-    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-pwa": "^0.21.2",
     "vite-plugin-style-import": "^2.0.0",
+    "vitest": "^3.0.9",
     "workbox-window": "^7.3.0"
   }
 }

client/playwright.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from "@playwright/test";
+import dotenv from "dotenv";
+
+dotenv.config({
+  path: "./.env.development.imex",
+  prefix: "TEST_"
+});
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  testMatch: "*.e2e.js",
+  timeout: 60 * 1000,
+  reporter: [["list"], ["html"]],
+  use: {
+    baseURL: "https://localhost:3000",
+    browser: "chromium",
+    ignoreHTTPSErrors: true
+  },
+  webServer: {
+    command: "npm run start:imex",
+    ignoreHTTPSErrors: true,
+    url: "https://localhost:3000/health", // Health check endpoint will tell us when the server is ready
+    reuseExistingServer: !process.env.CI // Reuse server locally, not in CI
+  }
+});

client/playwright.rome.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from "@playwright/test";
+import dotenv from "dotenv";
+
+dotenv.config({
+  path: "./.env.development.rome",
+  prefix: "TEST_"
+});
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  testMatch: "*.e2e.js",
+  timeout: 60 * 1000,
+  reporter: [["list"], ["html"]],
+  use: {
+    baseURL: "https://localhost:3000",
+    browser: "chromium",
+    ignoreHTTPSErrors: true
+  },
+  webServer: {
+    command: "npm run start:rome",
+    ignoreHTTPSErrors: true,
+    url: "https://localhost:3000/health", // Health check endpoint will tell us when the server is ready
+    reuseExistingServer: !process.env.CI // Reuse server locally, not in CI
+  }
+});

client/src/App/App.container.jsx

@@ -1,53 +1,66 @@
 import { ApolloProvider } from "@apollo/client";
-import { SplitFactoryProvider, SplitSdk } from "@splitsoftware/splitio-react";
+import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
-import React from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 import * as Sentry from "@sentry/react";
-
 import themeProvider from "./themeProvider";
-import { Userpilot } from "userpilot";
-
-// Initialize Userpilot
-if (import.meta.env.DEV) {
-  Userpilot.initialize("NX-69145f08");
-}
+import { CookiesProvider } from "react-cookie";
 
+// Base Split configuration
 const config = {
   core: {
     authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
-    key: "anon"
+    key: "anon" // Default key, overridden dynamically by SplitClientProvider
   }
 };
-export const factory = SplitSdk(config);
+
+// Custom provider to manage the Split client key based on imexshopid from Redux
+function SplitClientProvider({ children }) {
+  const imexshopid = useSelector((state) => state.user.imexshopid); // Access imexshopid from Redux store
+  const splitClient = useSplitClient({ key: imexshopid || "anon" }); // Use imexshopid or fallback to "anon"
+
+  useEffect(() => {
+    if (splitClient && imexshopid) {
+      // Log readiness for debugging; no need for ready() since isReady is available
+      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
+    }
+  }, [splitClient, imexshopid]);
+
+  return children;
+}
 
 function AppContainer() {
   const { t } = useTranslation();
 
   return (
-    <ApolloProvider client={client}>
-      <ConfigProvider
-        //componentSize="small"
-        input={{ autoComplete: "new-password" }}
-        locale={enLocale}
-        theme={themeProvider}
-        form={{
-          validateMessages: {
-            // eslint-disable-next-line no-template-curly-in-string
-            required: t("general.validation.required", { label: "${label}" })
-          }
-        }}
-      >
-        <GlobalLoadingBar />
-        <SplitFactoryProvider factory={factory}>
-          <App />
-        </SplitFactoryProvider>
-      </ConfigProvider>
-    </ApolloProvider>
+    <CookiesProvider>
+      <ApolloProvider client={client}>
+        <ConfigProvider
+          input={{ autoComplete: "new-password" }}
+          locale={enLocale}
+          theme={themeProvider}
+          form={{
+            validateMessages: {
+              // eslint-disable-next-line no-template-curly-in-string
+              required: t("general.validation.required", { label: "${label}" })
+            }
+          }}
+        >
+          <GlobalLoadingBar />
+          <SplitFactoryProvider config={config}>
+            <SplitClientProvider>
+              <App />
+            </SplitClientProvider>
+          </SplitFactoryProvider>
+        </ConfigProvider>
+      </ApolloProvider>
+    </CookiesProvider>
   );
 }
 

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
@@ -21,7 +21,7 @@ import "./App.styles.scss";
 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 { SocketProvider } from "../contexts/SocketIO/useSocket.jsx";
 import { NotificationProvider } from "../contexts/Notifications/notificationContext.jsx";
 
 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
@@ -46,6 +46,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
   const client = useSplitClient().client;
   const [listenersAdded, setListenersAdded] = useState(false);
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (!navigator.onLine) {
@@ -200,7 +201,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
             path="/manage/*"
             element={
               <ErrorBoundary>
-                <SocketProvider bodyshop={bodyshop}>
+                <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
                   <PrivateRoute isAuthorized={currentUser.authorized} />
                 </SocketProvider>
               </ErrorBoundary>
@@ -212,7 +213,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
             path="/tech/*"
             element={
               <ErrorBoundary>
-                <SocketProvider bodyshop={bodyshop}>
+                <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
                   <PrivateRoute isAuthorized={currentUser.authorized} />
                 </SocketProvider>
               </ErrorBoundary>

client/src/App/App.styles.scss

@@ -180,3 +180,13 @@
 .muted-button:hover {
   color: darkgrey;
 }
+
+.notification-alert-unordered-list {
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+
+  .notification-alert-unordered-list-item {
+    margin-right: 0;
+  }
+}

client/src/components/alert/__snapshots__/alert.component.test.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Alert component should render Alert component 1`] = `ShallowWrapper {}`;

client/src/components/alert/alert.component.test.js

@@ -1,19 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import Alert from "./alert.component";
-
-describe("Alert component", () => {
-  let wrapper;
-  beforeEach(() => {
-    const mockProps = {
-      type: "error",
-      message: "Test error message."
-    };
-
-    wrapper = shallow(<Alert {...mockProps} />);
-  });
-
-  it("should render Alert component", () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-});

client/src/components/alert/alert.component.test.jsx

@@ -0,0 +1,31 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import AlertComponent from "./alert.component";
+
+describe("AlertComponent", () => {
+  it("renders with default props", () => {
+    render(<AlertComponent message="Default Alert" />);
+    expect(screen.getByText("Default Alert")).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveClass("ant-alert");
+  });
+
+  it("applies type prop correctly", () => {
+    render(<AlertComponent message="Success Alert" type="success" />);
+    const alert = screen.getByRole("alert");
+    expect(screen.getByText("Success Alert")).toBeInTheDocument();
+    expect(alert).toHaveClass("ant-alert-success");
+  });
+
+  it("displays description when provided", () => {
+    render(<AlertComponent message="Error Alert" description="Something went wrong" type="error" />);
+    expect(screen.getByText("Error Alert")).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveClass("ant-alert-error");
+  });
+
+  it("is closable and shows icon when props are set", () => {
+    render(<AlertComponent message="Warning Alert" type="warning" showIcon closable />);
+    expect(screen.getByText("Warning Alert")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /close/i })).toBeInTheDocument(); // Close button
+  });
+});

client/src/components/allocations-assignment/__snapshots__/allocations-assignment.component.test.js.snap

@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AllocationsAssignmentComponent component should create an allocation on save 1`] = `ReactWrapper {}`;
-
-exports[`AllocationsAssignmentComponent component should render AllocationsAssignmentComponent component 1`] = `ReactWrapper {}`;

client/src/components/allocations-assignment/allocations-assignment.component.test.js

@@ -1,35 +0,0 @@
-import { mount } from "enzyme";
-import React from "react";
-import { MockBodyshop } from "../../utils/TestingHelpers";
-import { AllocationsAssignmentComponent } from "./allocations-assignment.component";
-
-describe("AllocationsAssignmentComponent component", () => {
-  let wrapper;
-
-  beforeEach(() => {
-    const mockProps = {
-      bodyshop: MockBodyshop,
-      handleAssignment: jest.fn(),
-      assignment: {},
-      setAssignment: jest.fn(),
-      visibilityState: [false, jest.fn()],
-      maxHours: 4
-    };
-
-    wrapper = mount(<AllocationsAssignmentComponent {...mockProps} />);
-  });
-
-  it("should render AllocationsAssignmentComponent component", () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("should render a list of employees", () => {
-    const empList = wrapper.find("#employeeSelector");
-    expect(empList.children()).to.have.lengthOf(2);
-  });
-
-  it("should create an allocation on save", () => {
-    wrapper.find("Button").simulate("click");
-    expect(wrapper).toMatchSnapshot();
-  });
-});

client/src/components/chat-affix/chat-affix.container.jsx

@@ -1,9 +1,9 @@
 import { useApolloClient } from "@apollo/client";
 import { getToken } from "@firebase/messaging";
 import axios from "axios";
-import React, { useContext, useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import SocketContext from "../../contexts/SocketIO/socketContext";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
@@ -12,7 +12,7 @@ import { registerMessagingHandlers, unregisterMessagingHandlers } from "./regist
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
   const { t } = useTranslation();
   const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
 
   useEffect(() => {
     if (!bodyshop || !bodyshop.messagingservicesid) return;

client/src/components/chat-archive-button/chat-archive-button.component.jsx

@@ -1,9 +1,9 @@
 import { useMutation } from "@apollo/client";
 import { Button } from "antd";
-import React, { useContext, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
@@ -18,7 +18,7 @@ export function ChatArchiveButton({ conversation, bodyshop }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
 
   const handleToggleArchive = async () => {
     setLoading(true);

client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx

@@ -1,11 +1,10 @@
 import { useMutation } from "@apollo/client";
 import { Tag } from "antd";
-import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { REMOVE_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
@@ -18,7 +17,7 @@ const mapDispatchToProps = () => ({});
 
 export function ChatConversationTitleTags({ jobConversations, bodyshop }) {
   const [removeJobConversation] = useMutation(REMOVE_CONVERSATION_TAG);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
 
   const handleRemoveTag = async (jobId) => {
     const convId = jobConversations[0].conversationid;

client/src/components/chat-conversation/chat-conversation.container.jsx

@@ -1,10 +1,10 @@
 import { gql, useApolloClient, useQuery, useSubscription } from "@apollo/client";
 import axios from "axios";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import SocketContext from "../../contexts/SocketIO/socketContext";
-import { GET_CONVERSATION_DETAILS, CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { CONVERSATION_SUBSCRIPTION_BY_PK, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatConversationComponent from "./chat-conversation.component";
@@ -16,7 +16,7 @@ const mapStateToProps = createStructuredSelector({
 
 function ChatConversationContainer({ bodyshop, selectedConversation }) {
   const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
   const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
 
   // Fetch conversation details

client/src/components/chat-label/chat-label.component.jsx

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

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -1,7 +1,8 @@
 import { PictureFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Badge, Popover } from "antd";
-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";
@@ -9,6 +10,7 @@ import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
+import JobsDocumentImgproxyGalleryExternal from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component";
 import JobDocumentsLocalGalleryExternal from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
@@ -23,6 +25,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);
 export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, conversation }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
+  const {
+    treatments: { Imgproxy }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Imgproxy"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
 
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
     fetchPolicy: "network-only",
@@ -42,6 +51,10 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
     setSelectedMedia([]);
   }, [setSelectedMedia, conversation]);
 
+  //Knowingly taking on the technical debt of poor implementation below. Done this way to avoid an edge case where no component may be displayed.
+  //Cloudinary will be removed once the migration is completed.
+  //If Imageproxy is on, rely only on the LMS selector
+  //If not on, use the old methods.
   const content = (
     <div>
       {loading && <LoadingSpinner />}
@@ -49,17 +62,37 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
       ) : null}
-      {!bodyshop.uselocalmediaserver && data && (
-        <JobDocumentsGalleryExternal
-          data={data ? data.documents : []}
-          externalMediaState={[selectedMedia, setSelectedMedia]}
-        />
-      )}
-      {bodyshop.uselocalmediaserver && open && (
-        <JobDocumentsLocalGalleryExternal
-          externalMediaState={[selectedMedia, setSelectedMedia]}
-          jobId={conversation.job_conversations[0] && conversation.job_conversations[0].jobid}
-        />
+
+      {Imgproxy.treatment === "on" ? (
+        <>
+          {!bodyshop.uselocalmediaserver && (
+            <JobsDocumentImgproxyGalleryExternal
+              jobId={conversation.job_conversations[0].jobid}
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+            />
+          )}
+          {bodyshop.uselocalmediaserver && open && (
+            <JobDocumentsLocalGalleryExternal
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+              jobId={conversation.job_conversations[0] && conversation.job_conversations[0].jobid}
+            />
+          )}
+        </>
+      ) : (
+        <>
+          {!bodyshop.uselocalmediaserver && data && (
+            <JobDocumentsGalleryExternal
+              data={data ? data.documents : []}
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+            />
+          )}
+          {bodyshop.uselocalmediaserver && open && (
+            <JobDocumentsLocalGalleryExternal
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+              jobId={conversation.job_conversations[0] && conversation.job_conversations[0].jobid}
+            />
+          )}
+        </>
       )}
     </div>
   );

client/src/components/chat-new-conversation/chat-new-conversation.component.jsx

@@ -1,12 +1,11 @@
 import { PlusCircleFilled } from "@ant-design/icons";
 import { Button, Form, Popover } from "antd";
-import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -18,7 +17,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatNewConversation({ openChatByPhone }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
 
   const handleFinish = (values) => {
     openChatByPhone({ phone_num: values.phoneNumber, socket });

client/src/components/chat-open-button/chat-open-button.component.jsx

@@ -1,5 +1,4 @@
 import parsePhoneNumber from "libphonenumber-js";
-import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
@@ -8,7 +7,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
@@ -22,7 +21,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ChatOpenButton({ bodyshop, searchingForConversation, phone, jobid, openChatByPhone }) {
   const { t } = useTranslation();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
   const notification = useNotification();
 
   if (!phone) return <></>;

client/src/components/chat-popup/chat-popup.component.jsx

@@ -1,7 +1,7 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
 import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
-import React, { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,8 +12,9 @@ import ChatConversationListComponent from "../chat-conversation-list/chat-conver
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+
 import "./chat-popup.styles.scss";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
@@ -27,7 +28,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
   const { t } = useTranslation();
   const [pollInterval, setPollInterval] = useState(0);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
   const client = useApolloClient(); // Apollo Client instance for cache operations
 
   // Lazy query for conversations
@@ -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 (

client/src/components/chat-tag-ro/chat-tag-ro.container.jsx

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

client/src/components/dashboard-grid/componentList.js

@@ -0,0 +1,132 @@
+import i18next from "i18next";
+import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component.jsx";
+import {
+  DashboardTotalProductionHours,
+  DashboardTotalProductionHoursGql
+} from "../dashboard-components/total-production-hours/total-production-hours.component.jsx";
+import DashboardProjectedMonthlySales, {
+  DashboardProjectedMonthlySalesGql
+} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx";
+import DashboardMonthlyRevenueGraph, {
+  DashboardMonthlyRevenueGraphGql
+} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx";
+import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx";
+import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx";
+import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx";
+import DashboardMonthlyEmployeeEfficiency, {
+  DashboardMonthlyEmployeeEfficiencyGql
+} from "../dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx";
+import DashboardScheduledInToday, {
+  DashboardScheduledInTodayGql
+} from "../dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx";
+import DashboardScheduledOutToday, {
+  DashboardScheduledOutTodayGql
+} from "../dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx";
+import JobLifecycleDashboardComponent, {
+  JobLifecycleDashboardGQL
+} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx";
+
+const componentList = {
+  ProductionDollars: {
+    label: i18next.t("dashboard.titles.productiondollars"),
+    component: DashboardTotalProductionDollars,
+    gqlFragment: null,
+    w: 1,
+    h: 1,
+    minW: 2,
+    minH: 1
+  },
+  ProductionHours: {
+    label: i18next.t("dashboard.titles.productionhours"),
+    component: DashboardTotalProductionHours,
+    gqlFragment: DashboardTotalProductionHoursGql,
+    w: 3,
+    h: 1,
+    minW: 3,
+    minH: 1
+  },
+  ProjectedMonthlySales: {
+    label: i18next.t("dashboard.titles.projectedmonthlysales"),
+    component: DashboardProjectedMonthlySales,
+    gqlFragment: DashboardProjectedMonthlySalesGql,
+    w: 2,
+    h: 1,
+    minW: 2,
+    minH: 1
+  },
+  MonthlyRevenueGraph: {
+    label: i18next.t("dashboard.titles.monthlyrevenuegraph"),
+    component: DashboardMonthlyRevenueGraph,
+    gqlFragment: DashboardMonthlyRevenueGraphGql,
+    w: 4,
+    h: 2,
+    minW: 4,
+    minH: 2
+  },
+  MonthlyJobCosting: {
+    label: i18next.t("dashboard.titles.monthlyjobcosting"),
+    component: DashboardMonthlyJobCosting,
+    gqlFragment: null,
+    minW: 6,
+    minH: 3,
+    w: 6,
+    h: 3
+  },
+  MonthlyPartsSales: {
+    label: i18next.t("dashboard.titles.monthlypartssales"),
+    component: DashboardMonthlyPartsSales,
+    gqlFragment: null,
+    minW: 2,
+    minH: 2,
+    w: 2,
+    h: 2
+  },
+  MonthlyLaborSales: {
+    label: i18next.t("dashboard.titles.monthlylaborsales"),
+    component: DashboardMonthlyLaborSales,
+    gqlFragment: null,
+    minW: 2,
+    minH: 2,
+    w: 2,
+    h: 2
+  },
+  // Typo in Efficency should be Efficiency, but changing it would reset users dashboard settings
+  MonthlyEmployeeEfficency: {
+    label: i18next.t("dashboard.titles.monthlyemployeeefficiency"),
+    component: DashboardMonthlyEmployeeEfficiency,
+    gqlFragment: DashboardMonthlyEmployeeEfficiencyGql,
+    minW: 2,
+    minH: 2,
+    w: 2,
+    h: 2
+  },
+  ScheduleInToday: {
+    label: i18next.t("dashboard.titles.scheduledintoday"),
+    component: DashboardScheduledInToday,
+    gqlFragment: DashboardScheduledInTodayGql,
+    minW: 6,
+    minH: 2,
+    w: 10,
+    h: 3
+  },
+  ScheduleOutToday: {
+    label: i18next.t("dashboard.titles.scheduledouttoday"),
+    component: DashboardScheduledOutToday,
+    gqlFragment: DashboardScheduledOutTodayGql,
+    minW: 6,
+    minH: 2,
+    w: 10,
+    h: 3
+  },
+  JobLifecycle: {
+    label: i18next.t("dashboard.titles.joblifecycle"),
+    component: JobLifecycleDashboardComponent,
+    gqlFragment: JobLifecycleDashboardGQL,
+    minW: 6,
+    minH: 3,
+    w: 6,
+    h: 3
+  }
+};
+
+export default componentList;

client/src/components/dashboard-grid/createDashboardQuery.js

@@ -0,0 +1,85 @@
+import { gql } from "@apollo/client";
+import dayjs from "../../utils/day.js";
+import componentList from "./componentList.js";
+
+const createDashboardQuery = (state) => {
+  const componentBasedAdditions =
+    state &&
+    Array.isArray(state.layout) &&
+    state.layout.map((item, index) => componentList[item.i].gqlFragment || "").join("");
+  return gql`
+    query QUERY_DASHBOARD_DETAILS { ${componentBasedAdditions || ""}
+      monthly_sales: jobs(where: {_and: [
+        { voided: {_eq: false}},
+        {date_invoiced: {_gte: "${dayjs()
+          .startOf("month")
+          .startOf("day")
+          .toISOString()}"}}, {date_invoiced: {_lte: "${dayjs().endOf("month").endOf("day").toISOString()}"}}]}) {
+      id
+        ro_number
+        date_invoiced
+        job_totals
+        rate_la1
+        rate_la2
+        rate_la3
+        rate_la4
+        rate_laa
+        rate_lab
+        rate_lad
+        rate_lae
+        rate_laf
+        rate_lag
+        rate_lam
+        rate_lar
+        rate_las
+        rate_lau
+        rate_ma2s
+        rate_ma2t
+        rate_ma3s
+        rate_mabl
+        rate_macs
+        rate_mahw
+        rate_mapa
+        rate_mash
+        rate_matd
+        joblines(where: { removed: { _eq: false } }) {
+          id
+          mod_lbr_ty
+          mod_lb_hrs
+          act_price
+          part_qty
+          part_type
+        }
+        }
+        production_jobs: jobs(where: { inproduction: { _eq: true } }) {
+          id
+          ro_number
+          ins_co_nm
+          job_totals
+          joblines(where: { removed: { _eq: false } }) {
+          id
+          mod_lbr_ty
+          mod_lb_hrs
+          act_price
+          part_qty
+          part_type
+        }
+        labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }) {
+          aggregate {
+            sum {
+              mod_lb_hrs
+            }
+          }
+        }
+        larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) {
+          aggregate {
+            sum {
+              mod_lb_hrs
+            }
+          }
+        }
+        }
+      }`;
+};
+
+export default createDashboardQuery;

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -1,11 +1,9 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
-import { gql, useMutation, useQuery } from "@apollo/client";
+import { isEmpty, cloneDeep } from "lodash";
+import { useMutation, useQuery } from "@apollo/client";
 import { Button, Dropdown, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-import i18next from "i18next";
-import _ from "lodash";
-import dayjs from "../../utils/day";
-import React, { useState } from "react";
+import { useMemo, useState } from "react";
 import { Responsive, WidthProvider } from "react-grid-layout";
 import { useTranslation } from "react-i18next";
 import { MdClose } from "react-icons/md";
@@ -15,38 +13,13 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
-import DashboardMonthlyEmployeeEfficiency, {
-  DashboardMonthlyEmployeeEfficiencyGql
-} from "../dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component";
-import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component";
-import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component";
-import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component";
-import DashboardMonthlyRevenueGraph, {
-  DashboardMonthlyRevenueGraphGql
-} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
-import DashboardProjectedMonthlySales, {
-  DashboardProjectedMonthlySalesGql
-} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
-import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
-import DashboardTotalProductionHours, {
-  DashboardTotalProductionHoursGql
-} from "../dashboard-components/total-production-hours/total-production-hours.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
-//Combination of the following:
-// /node_modules/react-grid-layout/css/styles.css
-// /node_modules/react-resizable/css/styles.css
-import DashboardScheduledInToday, {
-  DashboardScheduledInTodayGql
-} from "../dashboard-components/scheduled-in-today/scheduled-in-today.component";
-import DashboardScheduledOutToday, {
-  DashboardScheduledOutTodayGql
-} from "../dashboard-components/scheduled-out-today/scheduled-out-today.component";
-import JobLifecycleDashboardComponent, {
-  JobLifecycleDashboardGQL
-} 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";
+import componentList from "./componentList.js";
+import createDashboardQuery from "./createDashboardQuery.js";
+
+import "./dashboard-grid.styles.scss";
 
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 
@@ -54,6 +27,7 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   bodyshop: selectBodyshop
 });
+
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
@@ -85,19 +59,21 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
         layout: { ...state, layout, layouts }
       }
     });
-    if (!!result.errors) {
-      notification["error"]({
+
+    if (!isEmpty(result?.errors)) {
+      notification.error({
         message: t("dashboard.errors.updatinglayout", {
           message: JSON.stringify(result.errors)
         })
       });
     }
   };
+
   const handleRemoveComponent = (key) => {
     logImEXEvent("dashboard_remove_component", { name: key });
     const idxToRemove = state.items.findIndex((i) => i.i === key);
 
-    const items = _.cloneDeep(state.items);
+    const items = cloneDeep(state.items);
 
     items.splice(idxToRemove, 1);
     setState({ ...state, items });
@@ -120,7 +96,8 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
     });
   };
 
-  const dashboarddata = React.useMemo(() => GenerateDashboardData(data), [data]);
+  const dashboardData = useMemo(() => GenerateDashboardData(data), [data]);
+
   const existingLayoutKeys = state.items.map((i) => i.i);
 
   const menuItems = Object.keys(componentList).map((key) => ({
@@ -156,7 +133,6 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
         width="100%"
         layouts={state.layouts}
         onLayoutChange={handleLayoutChange}
-        //   onBreakpointChange={onBreakpointChange}
       >
         {state.items.map((item, index) => {
           const TheComponent = componentList[item.i].component;
@@ -182,7 +158,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
                   }}
                   onClick={() => handleRemoveComponent(item.i)}
                 />
-                <TheComponent className="dashboard-card" bodyshop={bodyshop} data={dashboarddata} />
+                <TheComponent className="dashboard-card" bodyshop={bodyshop} data={dashboardData} />
               </LoadingSkeleton>
             </div>
           );
@@ -193,189 +169,3 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(DashboardGridComponent);
-
-const componentList = {
-  ProductionDollars: {
-    label: i18next.t("dashboard.titles.productiondollars"),
-    component: DashboardTotalProductionDollars,
-    gqlFragment: null,
-    w: 1,
-    h: 1,
-    minW: 2,
-    minH: 1
-  },
-  ProductionHours: {
-    label: i18next.t("dashboard.titles.productionhours"),
-    component: DashboardTotalProductionHours,
-    gqlFragment: DashboardTotalProductionHoursGql,
-    w: 3,
-    h: 1,
-    minW: 3,
-    minH: 1
-  },
-  ProjectedMonthlySales: {
-    label: i18next.t("dashboard.titles.projectedmonthlysales"),
-    component: DashboardProjectedMonthlySales,
-    gqlFragment: DashboardProjectedMonthlySalesGql,
-    w: 2,
-    h: 1,
-    minW: 2,
-    minH: 1
-  },
-  MonthlyRevenueGraph: {
-    label: i18next.t("dashboard.titles.monthlyrevenuegraph"),
-    component: DashboardMonthlyRevenueGraph,
-    gqlFragment: DashboardMonthlyRevenueGraphGql,
-    w: 4,
-    h: 2,
-    minW: 4,
-    minH: 2
-  },
-  MonthlyJobCosting: {
-    label: i18next.t("dashboard.titles.monthlyjobcosting"),
-    component: DashboardMonthlyJobCosting,
-    gqlFragment: null,
-    minW: 6,
-    minH: 3,
-    w: 6,
-    h: 3
-  },
-  MonthlyPartsSales: {
-    label: i18next.t("dashboard.titles.monthlypartssales"),
-    component: DashboardMonthlyPartsSales,
-    gqlFragment: null,
-    minW: 2,
-    minH: 2,
-    w: 2,
-    h: 2
-  },
-  MonthlyLaborSales: {
-    label: i18next.t("dashboard.titles.monthlylaborsales"),
-    component: DashboardMonthlyLaborSales,
-    gqlFragment: null,
-    minW: 2,
-    minH: 2,
-    w: 2,
-    h: 2
-  },
-  // Typo in Efficency should be Efficiency, but changing it would reset users dashboard settings
-  MonthlyEmployeeEfficency: {
-    label: i18next.t("dashboard.titles.monthlyemployeeefficiency"),
-    component: DashboardMonthlyEmployeeEfficiency,
-    gqlFragment: DashboardMonthlyEmployeeEfficiencyGql,
-    minW: 2,
-    minH: 2,
-    w: 2,
-    h: 2
-  },
-  ScheduleInToday: {
-    label: i18next.t("dashboard.titles.scheduledintoday"),
-    component: DashboardScheduledInToday,
-    gqlFragment: DashboardScheduledInTodayGql,
-    minW: 6,
-    minH: 2,
-    w: 10,
-    h: 3
-  },
-  ScheduleOutToday: {
-    label: i18next.t("dashboard.titles.scheduledouttoday"),
-    component: DashboardScheduledOutToday,
-    gqlFragment: DashboardScheduledOutTodayGql,
-    minW: 6,
-    minH: 2,
-    w: 10,
-    h: 3
-  },
-  JobLifecycle: {
-    label: i18next.t("dashboard.titles.joblifecycle"),
-    component: JobLifecycleDashboardComponent,
-    gqlFragment: JobLifecycleDashboardGQL,
-    minW: 6,
-    minH: 3,
-    w: 6,
-    h: 3
-  }
-};
-
-const createDashboardQuery = (state) => {
-  const componentBasedAdditions =
-    state &&
-    Array.isArray(state.layout) &&
-    state.layout.map((item, index) => componentList[item.i].gqlFragment || "").join("");
-  return gql`
-        query QUERY_DASHBOARD_DETAILS { ${componentBasedAdditions || ""}
-            monthly_sales: jobs(where: {_and: [
-                { voided: {_eq: false}},
-                {date_invoiced: {_gte: "${dayjs()
-                  .startOf("month")
-                  .startOf("day")
-                  .toISOString()}"}}, {date_invoiced: {_lte: "${dayjs()
-                  .endOf("month")
-                  .endOf("day")
-                  .toISOString()}"}}]}) {
-      id
-                ro_number
-                date_invoiced
-                job_totals
-                rate_la1
-                rate_la2
-                rate_la3
-                rate_la4
-                rate_laa
-                rate_lab
-                rate_lad
-                rate_lae
-                rate_laf
-                rate_lag
-                rate_lam
-                rate_lar
-                rate_las
-                rate_lau
-                rate_ma2s
-                rate_ma2t
-                rate_ma3s
-                rate_mabl
-                rate_macs
-                rate_mahw
-                rate_mapa
-                rate_mash
-                rate_matd
-                joblines(where: { removed: { _eq: false } }) {
-                    id
-                    mod_lbr_ty
-                    mod_lb_hrs
-                    act_price
-                    part_qty
-                    part_type
-                }
-                }
-                production_jobs: jobs(where: { inproduction: { _eq: true } }) {
-                    id
-                    ro_number
-                    ins_co_nm
-                    job_totals
-                    joblines(where: { removed: { _eq: false } }) {
-                    id
-                    mod_lbr_ty
-                    mod_lb_hrs
-                    act_price
-                    part_qty
-                    part_type
-                }
-                labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }) {
-                    aggregate {
-                        sum {
-                            mod_lb_hrs
-                        }
-                    }
-                }
-                larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) {
-                    aggregate {
-                        sum {
-                            mod_lb_hrs
-                        }
-                    }
-                }
-                }
-            }`;
-};

client/src/components/documents-upload-imgproxy/documents-upload-imgproxy.component.jsx

@@ -0,0 +1,122 @@
+import { UploadOutlined } from "@ant-design/icons";
+import { Progress, Result, Space, Upload } from "antd";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import formatBytes from "../../utils/formatbytes";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { handleUpload } from "./documents-upload-imgproxy.utility.js";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
+});
+
+export function DocumentsUploadImgproxyComponent({
+  children,
+  currentUser,
+  bodyshop,
+  jobId,
+  tagsArray,
+  billId,
+  callbackAfterUpload,
+  totalSize,
+  ignoreSizeLimit = false
+}) {
+  const { t } = useTranslation();
+  const [fileList, setFileList] = useState([]);
+  const notification = useNotification();
+
+  const pct = useMemo(() => {
+    return parseInt((totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100);
+  }, [bodyshop, totalSize]);
+
+  if (pct > 100 && !ignoreSizeLimit)
+    return (
+      <Result
+        status="error"
+        title={t("documents.labels.storageexceeded_title")}
+        subTitle={t("documents.labels.storageexceeded")}
+      />
+    );
+
+  const handleDone = (uid) => {
+    setTimeout(() => {
+      setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
+    }, 2000);
+  };
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+
+  return (
+    <Upload.Dragger
+      multiple={true}
+      fileList={fileList}
+      disabled={!hasMediaAccess}
+      onChange={(f) => {
+        if (f.event && f.event.percent === 100) handleDone(f.file.uid);
+        setFileList(f.fileList);
+      }}
+      beforeUpload={(file, fileList) => {
+        if (ignoreSizeLimit) return true;
+        const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
+        const shouldStopUpload = (totalSize + newFiles) / ((bodyshop && bodyshop.jobsizelimit) || 1) >= 1;
+
+        //Check to see if old files plus newly uploaded ones will be too much.
+        if (shouldStopUpload) {
+          notification.error({
+            key: "cannotuploaddocuments",
+            message: t("documents.labels.upload_limitexceeded_title"),
+            description: t("documents.labels.upload_limitexceeded")
+          });
+          return Upload.LIST_IGNORE;
+        }
+        return true;
+      }}
+      customRequest={(ev) =>
+        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}
+    >
+      {children || (
+        <>
+          <p className="ant-upload-drag-icon">
+            <UploadOutlined />
+          </p>
+          <p className="ant-upload-text">
+            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
+          </p>
+          {!ignoreSizeLimit && (
+            <Space wrap className="ant-upload-text">
+              <Progress type="dashboard" percent={pct} size="small" />
+              <span>
+                {t("documents.labels.usage", {
+                  percent: pct,
+                  used: formatBytes(totalSize),
+                  total: formatBytes(bodyshop && bodyshop.jobsizelimit)
+                })}
+              </span>
+            </Space>
+          )}
+        </>
+      )}
+    </Upload.Dragger>
+  );
+}
+
+export default connect(mapStateToProps, null)(DocumentsUploadImgproxyComponent);

client/src/components/documents-upload-imgproxy/documents-upload-imgproxy.utility.js

@@ -0,0 +1,172 @@
+import axios from "axios";
+import exifr from "exifr";
+import i18n from "i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
+import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
+import client from "../../utils/GraphQLClient";
+
+//Context: currentUserEmail, bodyshop, jobid, invoiceid
+
+//Required to prevent headers from getting set and rejected from Cloudinary.
+var cleanAxios = axios.create();
+cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
+
+export const handleUpload = (ev, context, notification) => {
+  logImEXEvent("document_upload", { filetype: ev.file?.type });
+
+  const { onError, onSuccess, onProgress } = ev;
+  const { bodyshop, jobId } = context;
+
+  const fileName = ev.file?.name || ev.filename;
+
+  let extension = fileName.split(".").pop();
+  let key = `${bodyshop.id}/${jobId}/${replaceAccents(fileName).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}.${extension}`;
+
+  uploadToS3(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context, notification).catch(
+    (error) => {
+      console.error("Error uploading file to S3", error);
+      notification.error({
+        message: i18n.t("documents.errors.insert", {
+          message: error.message
+        })
+      });
+    }
+  );
+};
+
+//Handles only 1 file at a time.
+export const uploadToS3 = async (
+  key,
+  extension,
+  fileType,
+  file,
+  onError,
+  onSuccess,
+  onProgress,
+  context,
+  notification
+) => {
+  const { bodyshop, jobId, billId, uploaded_by, callback } = context;
+
+  //Get the signed url allowing us to PUT to S3.
+  const signedURLResponse = await axios.post("/media/imgproxy/sign", {
+    filenames: [key],
+    bodyshopid: bodyshop.id,
+    jobid: jobId
+  });
+
+  if (signedURLResponse.status !== 200) {
+    if (onError) onError(signedURLResponse.statusText);
+    notification.error({
+      message: i18n.t("documents.errors.getpresignurl", {
+        message: signedURLResponse.statusText
+      })
+    });
+    return;
+  }
+
+  //Key should be same as we provided to maintain backwards compatibility.
+  const { presignedUrl: preSignedUploadUrlToS3, key: s3Key } = signedURLResponse.data.signedUrls[0];
+
+  const options = {
+    onUploadProgress: (e) => {
+      if (onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
+    }
+  };
+
+  try {
+    const s3UploadResponse = await cleanAxios.put(preSignedUploadUrlToS3, file, options);
+    //Insert the document with the matching key.
+    let takenat;
+    if (fileType.includes("image")) {
+      try {
+        const exif = await exifr.parse(file);
+        takenat = exif && exif.DateTimeOriginal;
+      } catch (error) {
+        console.log("Unable to parse image file for EXIF Data", error.message);
+      }
+    }
+
+    const documentInsert = await client.mutate({
+      mutation: INSERT_NEW_DOCUMENT,
+      variables: {
+        docInput: [
+          {
+            ...(jobId ? { jobid: jobId } : {}),
+            ...(billId ? { billid: billId } : {}),
+            uploaded_by: uploaded_by,
+            key: s3Key,
+            type: fileType,
+            extension: s3UploadResponse.data.format || extension,
+            bodyshopid: bodyshop.id,
+            size: s3UploadResponse.data.bytes || file.size, //Leftover from Cloudinary. We don't do any optimization on upload, so it will always be file.size.
+            takenat
+          }
+        ]
+      }
+    });
+
+    if (!documentInsert.errors) {
+      if (onSuccess)
+        onSuccess({
+          uid: documentInsert.data.insert_documents.returning[0].id,
+          name: documentInsert.data.insert_documents.returning[0].name,
+          status: "done",
+          key: documentInsert.data.insert_documents.returning[0].key
+        });
+      notification.success({
+        key: "docuploadsuccess",
+        message: i18n.t("documents.successes.insert")
+      });
+      if (callback) {
+        callback();
+      }
+    } else {
+      if (onError) onError(JSON.stringify(documentInsert.errors));
+      notification.error({
+        message: i18n.t("documents.errors.insert", {
+          message: JSON.stringify(documentInsert.errors)
+        })
+      });
+      return;
+    }
+  } catch (error) {
+    console.log("Error uploading file to S3", error.message, error.stack);
+    notification.error({
+      message: i18n.t("documents.errors.insert", {
+        message: error.message
+      })
+    });
+    if (onError) onError(JSON.stringify(error.message));
+  }
+};
+
+function replaceAccents(str) {
+  // Verifies if the String has accents and replace them
+  if (str.search(/[\xC0-\xFF]/g) > -1) {
+    str = str
+      .replace(/[\xC0-\xC5]/g, "A")
+      .replace(/[\xC6]/g, "AE")
+      .replace(/[\xC7]/g, "C")
+      .replace(/[\xC8-\xCB]/g, "E")
+      .replace(/[\xCC-\xCF]/g, "I")
+      .replace(/[\xD0]/g, "D")
+      .replace(/[\xD1]/g, "N")
+      .replace(/[\xD2-\xD6\xD8]/g, "O")
+      .replace(/[\xD9-\xDC]/g, "U")
+      .replace(/[\xDD]/g, "Y")
+      .replace(/[\xDE]/g, "P")
+      .replace(/[\xE0-\xE5]/g, "a")
+      .replace(/[\xE6]/g, "ae")
+      .replace(/[\xE7]/g, "c")
+      .replace(/[\xE8-\xEB]/g, "e")
+      .replace(/[\xEC-\xEF]/g, "i")
+      .replace(/[\xF1]/g, "n")
+      .replace(/[\xF2-\xF6\xF8]/g, "o")
+      .replace(/[\xF9-\xFC]/g, "u")
+      .replace(/[\xFE]/g, "p")
+      .replace(/[\xFD\xFF]/g, "y");
+  }
+  return str;
+}

client/src/components/email-documents/email-documents.component.jsx

@@ -10,6 +10,8 @@ import AlertComponent from "../alert/alert.component";
 import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
 import JobsDocumentsLocalGalleryExternalComponent from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import JobsDocumentImgproxyGalleryExternal from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -23,6 +25,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(EmailDocumentsCompon
 
 export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState, bodyshop }) {
   const { t } = useTranslation();
+  const {
+    treatments: { Imgproxy }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Imgproxy"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
 
   const [selectedMedia, setSelectedMedia] = selectedMediaState;
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
@@ -46,17 +55,37 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
         10485760 - new Blob([form.getFieldValue("html")]).size ? (
         <div style={{ color: "red" }}>{t("general.errors.sizelimit")}</div>
       ) : null}
-      {!bodyshop.uselocalmediaserver && data && (
-        <JobDocumentsGalleryExternal
-          data={data ? data.documents : []}
-          externalMediaState={[selectedMedia, setSelectedMedia]}
-        />
-      )}
-      {bodyshop.uselocalmediaserver && (
-        <JobsDocumentsLocalGalleryExternalComponent
-          externalMediaState={[selectedMedia, setSelectedMedia]}
-          jobId={emailConfig.jobid}
-        />
+
+      {Imgproxy.treatment === "on" ? (
+        <>
+          {!bodyshop.uselocalmediaserver && data && (
+            <JobsDocumentImgproxyGalleryExternal
+              jobId={emailConfig.jobid}
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+            />
+          )}
+          {bodyshop.uselocalmediaserver && (
+            <JobsDocumentsLocalGalleryExternalComponent
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+              jobId={emailConfig.jobid}
+            />
+          )}
+        </>
+      ) : (
+        <>
+          {!bodyshop.uselocalmediaserver && data && (
+            <JobDocumentsGalleryExternal
+              data={data ? data.documents : []}
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+            />
+          )}
+          {bodyshop.uselocalmediaserver && (
+            <JobsDocumentsLocalGalleryExternalComponent
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+              jobId={emailConfig.jobid}
+            />
+          )}
+        </>
       )}
     </div>
   );

client/src/components/error-boundary/error-boundary.component.jsx

@@ -123,7 +123,7 @@ class ErrorBoundary extends React.Component {
           <Row>
             <Col offset={6} span={12}>
               <Collapse bordered={false}>
-                <Collapse.Panel header={t("general.labels.errors")}>
+                <Collapse.Panel key="errors-panel" header={t("general.labels.errors")}>
                   <div>
                     <strong>{this.state.error.message}</strong>
                   </div>

client/src/components/eula/eula.component.jsx

@@ -78,9 +78,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
     } catch (err) {
       notification.error({
         message: t("eula.errors.acceptance.message"),
-        description: t("eula.errors.acceptance.description"),
-        placement: "bottomRight",
-        duration: 5000
+        description: t("eula.errors.acceptance.description")
       });
       console.log(`${t("eula.errors.acceptance.message")}`);
       console.dir({

client/src/components/feature-wrapper/feature-wrapper.component.jsx

@@ -20,6 +20,7 @@ function FeatureWrapper({
   children,
   upsellComponent,
   bypass,
+  // eslint-disable-next-line no-unused-vars
   ...restProps
 }) {
   const { t } = useTranslation();
@@ -78,7 +79,11 @@ export function HasFeatureAccess({ featureName, bodyshop, bypass, debug = false
     }
     return true;
   }
-  return bodyshop?.features?.allAccess || dayjs(bodyshop?.features[featureName]).isAfter(dayjs());
+  return (
+    bodyshop?.features?.allAccess ||
+    bodyshop?.features?.[featureName] ||
+    dayjs(bodyshop?.features[featureName]).isAfter(dayjs())
+  );
 }
 
 export default connect(mapStateToProps, null)(FeatureWrapper);

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

@@ -1,6 +1,7 @@
-import Icon, {
+import {
   BankFilled,
   BarChartOutlined,
+  BellFilled,
   CarFilled,
   CheckCircleOutlined,
   ClockCircleFilled,
@@ -25,8 +26,10 @@ import Icon, {
   UnorderedListOutlined,
   UserOutlined
 } from "@ant-design/icons";
+import { useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu, Space } from "antd";
+import { Badge, Layout, Menu, Spin } from "antd";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -37,14 +40,19 @@ import { RiSurveyLine } from "react-icons/ri";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
 import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import day from "../../utils/day.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapper from "../lock-wrapper/lock-wrapper.component";
+import NotificationCenterContainer from "../notification-center/notification-center.container.jsx";
 
+// Redux mappings
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   recentItems: selectRecentItems,
@@ -53,43 +61,13 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setBillEnterContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "billEnter"
-      })
-    ),
-  setTimeTicketContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "timeTicket"
-      })
-    ),
-  setPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "payment" })),
-  setReportCenterContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "reportCenter"
-      })
-    ),
+  setBillEnterContext: (context) => dispatch(setModalContext({ context, modal: "billEnter" })),
+  setTimeTicketContext: (context) => dispatch(setModalContext({ context, modal: "timeTicket" })),
+  setPaymentContext: (context) => dispatch(setModalContext({ context, modal: "payment" })),
+  setReportCenterContext: (context) => dispatch(setModalContext({ context, modal: "reportCenter" })),
   signOutStart: () => dispatch(signOutStart()),
-  setCardPaymentContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "cardPayment"
-      })
-    ),
-  setTaskUpsertContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "taskUpsert"
-      })
-    )
+  setCardPaymentContext: (context) => dispatch(setModalContext({ context, modal: "cardPayment" })),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
 function Header({
@@ -115,24 +93,81 @@ function Header({
   });
 
   const { t } = useTranslation();
+  const { isConnected, scenarioNotificationsOn } = useSocket();
+  const [notificationVisible, setNotificationVisible] = useState(false);
+  const baseTitleRef = useRef(document.title || "");
+  const lastSetTitleRef = useRef("");
+  const userAssociationId = bodyshop?.associations?.[0]?.id;
 
-  // const deleteBetaCookie = () => {
-  //   const cookieExists = document.cookie.split("; ").some((row) => row.startsWith(`betaSwitchImex=`));
-  //   if (cookieExists) {
-  //     const domain = window.location.hostname.split(".").slice(-2).join(".");
-  //     document.cookie = `betaSwitchImex=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${domain}`;
-  //   }
-  // };
-  //
-  // deleteBetaCookie();
+  const {
+    data: unreadData,
+    refetch: refetchUnread,
+    loading: unreadLoading
+  } = useQuery(GET_UNREAD_COUNT, {
+    variables: { associationid: userAssociationId },
+    fetchPolicy: "network-only",
+    pollInterval: isConnected ? 0 : day.duration(60, "seconds").asMilliseconds(),
+    skip: !userAssociationId || !scenarioNotificationsOn
+  });
 
-  const accountingChildren = [];
+  const unreadCount = unreadData?.notifications_aggregate?.aggregate?.count ?? 0;
 
-  accountingChildren.push(
+  useEffect(() => {
+    if (userAssociationId) {
+      refetchUnread().catch((e) => console.error(`Error fetching unread notifications: ${e?.message}`));
+    }
+  }, [refetchUnread, userAssociationId]);
+
+  useEffect(() => {
+    if (!isConnected && !unreadLoading && userAssociationId) {
+      refetchUnread().catch((e) => console.error(`Error fetching unread notifications: ${e?.message}`));
+    }
+  }, [isConnected, unreadLoading, refetchUnread, userAssociationId]);
+
+  // Keep The unread count in the title.
+  useEffect(() => {
+    const updateTitle = () => {
+      const currentTitle = document.title;
+      // Check if the current title differs from what we last set
+      if (currentTitle !== lastSetTitleRef.current) {
+        // Extract base title by removing any unread count prefix
+        const baseTitleMatch = currentTitle.match(/^\(\d+\)\s*(.*)$/);
+        baseTitleRef.current = baseTitleMatch ? baseTitleMatch[1] : currentTitle;
+      }
+
+      // Apply unread count to the base title
+      const newTitle = unreadCount > 0 ? `(${unreadCount}) ${baseTitleRef.current}` : baseTitleRef.current;
+
+      // Only update if the title has changed to avoid unnecessary DOM writes
+      if (document.title !== newTitle) {
+        document.title = newTitle;
+        lastSetTitleRef.current = newTitle; // Store what we set
+      }
+    };
+
+    // Initial update
+    updateTitle();
+
+    // Poll every 100ms to catch child component changes
+    const interval = setInterval(updateTitle, 100);
+
+    // Cleanup
+    return () => {
+      clearInterval(interval);
+      document.title = baseTitleRef.current; // Reset to base title on unmount
+    };
+  }, [unreadCount]); // Re-run when unreadCount changes
+
+  const handleNotificationClick = (e) => {
+    setNotificationVisible(!notificationVisible);
+    if (handleMenuClick) handleMenuClick(e);
+  };
+
+  const accountingChildren = [
     {
       key: "bills",
       id: "header-accounting-bills",
-      icon: <Icon component={FaFileInvoiceDollar} />,
+      icon: <FaFileInvoiceDollar />,
       label: (
         <Link to="/manage/bills">
           <LockWrapper featureName="bills" bodyshop={bodyshop}>
@@ -144,92 +179,60 @@ function Header({
     {
       key: "enterbills",
       id: "header-accounting-enterbills",
-      icon: <Icon component={GiPayMoney} />,
+      icon: <GiPayMoney />,
       label: (
-        <Space>
-          <LockWrapper featureName="bills" bodyshop={bodyshop}>
-            {t("menus.header.enterbills")}
-          </LockWrapper>
-        </Space>
+        <LockWrapper featureName="bills" bodyshop={bodyshop}>
+          {t("menus.header.enterbills")}
+        </LockWrapper>
       ),
-      onClick: () => {
+      onClick: () =>
         HasFeatureAccess({ featureName: "bills", bodyshop }) &&
-          setBillEnterContext({
-            actions: {},
-            context: {}
-          });
-      }
-    }
-  );
-
-  if (Simple_Inventory.treatment === "on") {
-    accountingChildren.push(
-      {
-        type: "divider"
-      },
-      {
-        key: "inventory",
-        id: "header-accounting-inventory",
-        icon: <Icon component={FaFileInvoiceDollar} />,
-        label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
-      }
-    );
-  }
-
-  accountingChildren.push(
-    {
-      type: "divider"
+        setBillEnterContext({
+          actions: {},
+          context: {}
+        })
     },
+    ...(Simple_Inventory.treatment === "on"
+      ? [
+          { type: "divider" },
+          {
+            key: "inventory",
+            id: "header-accounting-inventory",
+            icon: <FaFileInvoiceDollar />,
+            label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
+          }
+        ]
+      : []),
+    { type: "divider" },
     {
       key: "allpayments",
       id: "header-accounting-allpayments",
       icon: <BankFilled />,
-      label: (
-        <Link to="/manage/payments">
-          <LockWrapper featureName="payments" bodyshop={bodyshop}>
-            {t("menus.header.allpayments")}
-          </LockWrapper>
-        </Link>
-      )
+      label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
     },
     {
       key: "enterpayments",
       id: "header-accounting-enterpayments",
-      icon: <Icon component={FaCreditCard} />,
-      label: (
-        <LockWrapper featureName="payments" bodyshop={bodyshop}>
-          {t("menus.header.enterpayment")}
-        </LockWrapper>
-      ),
-      onClick: () => {
-        HasFeatureAccess({ featureName: "payments", bodyshop }) &&
-          setPaymentContext({
-            actions: {},
-            context: null
-          });
-      }
-    }
-  );
-
-  if (ImEXPay.treatment === "on") {
-    accountingChildren.push({
-      key: "entercardpayments",
-      id: "header-accounting-entercardpayments",
-      icon: <Icon component={FaCreditCard} />,
-      label: t("menus.header.entercardpayment"),
-      onClick: () => {
-        setCardPaymentContext({
+      icon: <FaCreditCard />,
+      label: t("menus.header.enterpayment"),
+      onClick: () =>
+        setPaymentContext({
           actions: {},
-          context: {}
-        });
-      }
-    });
-  }
-
-  accountingChildren.push(
-    {
-      type: "divider"
+          context: null
+        })
     },
+    ...(ImEXPay.treatment === "on"
+      ? [
+          {
+            key: "entercardpayments",
+            id: "header-accounting-entercardpayments",
+            icon: <FaCreditCard />,
+            label: t("menus.header.entercardpayment"),
+            onClick: () => setCardPaymentContext({ actions: {}, context: {} })
+          }
+        ]
+      : []),
+    { type: "divider" },
     {
       key: "timetickets",
       id: "header-accounting-timetickets",
@@ -241,132 +244,124 @@ function Header({
           </LockWrapper>
         </Link>
       )
-    }
-  );
-
-  if (bodyshop?.md_tasks_presets?.use_approvals) {
-    accountingChildren.push({
-      key: "ttapprovals",
-      id: "header-accounting-ttapprovals",
-      icon: <FieldTimeOutlined />,
-      label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
-    });
-  }
-  accountingChildren.push(
+    },
+    ...(bodyshop?.md_tasks_presets?.use_approvals
+      ? [
+          {
+            key: "ttapprovals",
+            id: "header-accounting-ttapprovals",
+            icon: <FieldTimeOutlined />,
+            label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
+          }
+        ]
+      : []),
     {
       key: "entertimetickets",
-      icon: <Icon component={GiPlayerTime} />,
+      id: "header-accounting-entertimetickets",
+      icon: <GiPlayerTime />,
       label: (
         <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
           {t("menus.header.entertimeticket")}
         </LockWrapper>
       ),
-      id: "header-accounting-entertimetickets",
-      onClick: () => {
+      onClick: () =>
         HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
-          setTimeTicketContext({
-            actions: {},
-            context: {
-              created_by: currentUser.displayName
-                ? currentUser.email.concat(" | ", currentUser.displayName)
-                : currentUser.email
-            }
-          });
-      }
+        setTimeTicketContext({
+          actions: {},
+          context: {
+            created_by: currentUser.displayName
+              ? `${currentUser.email} | ${currentUser.displayName}`
+              : currentUser.email
+          }
+        })
     },
+    { type: "divider" },
     {
-      type: "divider"
-    }
-  );
-
-  const accountingExportChildren = [
-    {
-      key: "receivables",
-      id: "header-accounting-receivables",
+      key: "accountingexport",
+      id: "header-accounting-export",
+      icon: <ExportOutlined />,
       label: (
-        <Link to="/manage/accounting/receivables">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.accounting-receivables")}
-          </LockWrapper>
-        </Link>
-      )
+        <LockWrapper featureName="export" bodyshop={bodyshop}>
+          {t("menus.header.export")}
+        </LockWrapper>
+      ),
+      children: [
+        {
+          key: "receivables",
+          id: "header-accounting-receivables",
+          label: (
+            <Link to="/manage/accounting/receivables">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.accounting-receivables")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) ||
+        DmsAp.treatment === "on"
+          ? [
+              {
+                key: "payables",
+                id: "header-accounting-payables",
+                label: (
+                  <Link to="/manage/accounting/payables">
+                    <LockWrapper featureName="export" bodyshop={bodyshop}>
+                      {t("menus.header.accounting-payables")}
+                    </LockWrapper>
+                  </Link>
+                )
+              }
+            ]
+          : []),
+        ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))
+          ? [
+              {
+                key: "payments",
+                id: "header-accounting-payments",
+                label: (
+                  <Link to="/manage/accounting/payments">
+                    <LockWrapper featureName="export" bodyshop={bodyshop}>
+                      {t("menus.header.accounting-payments")}
+                    </LockWrapper>
+                  </Link>
+                )
+              }
+            ]
+          : []),
+        { type: "divider" },
+        {
+          key: "exportlogs",
+          id: "header-accounting-exportlogs",
+          label: (
+            <Link to="/manage/accounting/exportlogs">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.export-logs")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
     }
   ];
 
-  if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
-    accountingExportChildren.push({
-      key: "payables",
-      id: "header-accounting-payables",
-      label: (
-        <Link to="/manage/accounting/payables">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.accounting-payables")}
-          </LockWrapper>
-        </Link>
-      )
-    });
-  }
-
-  if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))) {
-    accountingExportChildren.push({
-      key: "payments",
-      id: "header-accounting-payments",
-      label: (
-        <Link to="/manage/accounting/payments">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.accounting-payments")}
-          </LockWrapper>
-        </Link>
-      )
-    });
-  }
-
-  accountingExportChildren.push(
-    {
-      type: "divider"
-    },
-    {
-      key: "exportlogs",
-      id: "header-accounting-exportlogs",
-      label: (
-        <Link to="/manage/accounting/exportlogs">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.export-logs")}
-          </LockWrapper>
-        </Link>
-      )
-    }
-  );
-
-  accountingChildren.push({
-    key: "accountingexport",
-    id: "header-accounting-export",
-    icon: <ExportOutlined />,
-    label: (
-      <LockWrapper featureName="export" bodyshop={bodyshop}>
-        {t("menus.header.export")}
-      </LockWrapper>
-    ),
-    children: accountingExportChildren
-  });
-
-  const menuItems = [
+  // Left menu items (includes original navigation items)
+  const leftMenuItems = [
     {
       key: "home",
-      icon: <HomeFilled />,
       id: "header-home",
+      icon: <HomeFilled />,
       label: <Link to="/manage/">{t("menus.header.home")}</Link>
     },
     {
       key: "schedule",
       id: "header-schedule",
-      icon: <Icon component={FaCalendarAlt} />,
+      icon: <FaCalendarAlt />,
       label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
     },
     {
       key: "jobssubmenu",
       id: "header-jobs",
-      icon: <Icon component={FaCarCrash} />,
+      icon: <FaCarCrash />,
       label: t("menus.header.jobs"),
       children: [
         {
@@ -399,31 +394,24 @@ function Header({
           icon: <FileAddOutlined />,
           label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
         },
-        {
-          type: "divider",
-          id: "header-jobs-divider"
-        },
+        { type: "divider" },
         {
           key: "alljobs",
           id: "header-all-jobs",
           icon: <UnorderedListOutlined />,
           label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
         },
-        {
-          type: "divider",
-          id: "header-jobs-divider2"
-        },
+        { type: "divider" },
         {
           key: "productionlist",
           id: "header-production-list",
           icon: <ScheduleOutlined />,
           label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
         },
-
         {
           key: "productionboard",
           id: "header-production-board",
-          icon: <Icon component={BsKanban} />,
+          icon: <BsKanban />,
           label: (
             <Link to="/manage/production/board">
               <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
@@ -432,11 +420,7 @@ function Header({
             </Link>
           )
         },
-
-        {
-          type: "divider",
-          id: "header-jobs-divider3"
-        },
+        { type: "divider" },
         {
           key: "scoreboard",
           id: "header-scoreboard",
@@ -453,8 +437,8 @@ function Header({
     },
     {
       key: "customers",
-      icon: <UserOutlined />,
       id: "header-customers",
+      icon: <UserOutlined />,
       label: t("menus.header.customers"),
       children: [
         {
@@ -519,7 +503,6 @@ function Header({
         }
       ]
     },
-
     ...(accountingChildren.length > 0
       ? [
           {
@@ -537,7 +520,6 @@ function Header({
       icon: <PhoneOutlined />,
       label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
     },
-
     {
       key: "temporarydocs",
       id: "header-temporarydocs",
@@ -550,7 +532,6 @@ function Header({
         </Link>
       )
     },
-
     {
       key: "tasks",
       id: "tasks",
@@ -562,12 +543,7 @@ function Header({
           id: "header-create-task",
           icon: <PlusCircleOutlined />,
           label: t("menus.header.create_task"),
-          onClick: () => {
-            setTaskUpsertContext({
-              actions: {},
-              context: {}
-            });
-          }
+          onClick: () => setTaskUpsertContext({ actions: {}, context: {} })
         },
         {
           key: "mytasks",
@@ -592,7 +568,7 @@ function Header({
         {
           key: "shop",
           id: "header-shop",
-          icon: <Icon component={GiSettingsKnobs} />,
+          icon: <GiSettingsKnobs />,
           label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
         },
         {
@@ -610,24 +586,18 @@ function Header({
           id: "header-reportcenter",
           icon: <BarChartOutlined />,
           label: t("menus.header.reportcenter"),
-          onClick: () => {
-            setReportCenterContext({
-              actions: {},
-              context: {}
-            });
-          }
+          onClick: () => setReportCenterContext({ actions: {}, context: {} })
         },
         {
           key: "shop-vendors",
           id: "header-shop-vendors",
-          icon: <Icon component={IoBusinessOutline} />,
+          icon: <IoBusinessOutline />,
           label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
         },
-
         {
           key: "shop-csi",
           id: "header-shop-csi",
-          icon: <Icon component={RiSurveyLine} />,
+          icon: <RiSurveyLine />,
           label: (
             <Link to="/manage/shop/csi">
               <LockWrapper featureName="export" bodyshop={bodyshop}>
@@ -638,14 +608,27 @@ function Header({
         }
       ]
     },
+    {
+      key: "recent",
+      id: "header-recent",
+      icon: <ClockCircleFilled />,
+      label: t("menus.header.recent"),
+      children: recentItems.map((i, idx) => ({
+        key: idx,
+        id: `header-recent-${idx}`,
+        label: <Link to={i.url}>{i.label}</Link>
+      }))
+    },
     {
       key: "user",
-      label: currentUser.displayName || currentUser.email || t("general.labels.unknown"),
+      id: "header-user",
+      icon: <UserOutlined />,
+      label: t("menus.currentuser.profile"),
       children: [
         {
           key: "signout",
           id: "header-signout",
-          icon: <Icon component={FiLogOut} />,
+          icon: <FiLogOut />,
           danger: true,
           label: t("user.actions.signout"),
           onClick: () => signOutStart()
@@ -653,33 +636,25 @@ function Header({
         {
           key: "help",
           id: "header-help",
-          icon: <Icon component={QuestionCircleFilled} />,
+          icon: <QuestionCircleFilled />,
           label: t("menus.header.help"),
-          onClick: () => {
-            window.open("https://help.imex.online/", "_blank");
-          }
+          onClick: () => window.open("https://help.imex.online/", "_blank")
         },
-        ...(InstanceRenderManager({
-          imex: true,
-          rome: false
-        })
+        ...(InstanceRenderManager({ imex: true, rome: false })
           ? [
               {
                 key: "rescue",
                 id: "header-rescue",
-                icon: <Icon component={CarFilled} />,
+                icon: <CarFilled />,
                 label: t("menus.header.rescueme"),
-                onClick: () => {
-                  window.open("https://imexrescue.com/", "_blank");
-                }
+                onClick: () => window.open("https://imexrescue.com/", "_blank")
               }
             ]
           : []),
-
         {
           key: "shiftclock",
           id: "header-shiftclock",
-          icon: <Icon component={GiPlayerTime} />,
+          icon: <GiPlayerTime />,
           label: (
             <Link to="/manage/shiftclock">
               <LockWrapper featureName="export" bodyshop={bodyshop}>
@@ -688,64 +663,79 @@ function Header({
             </Link>
           )
         },
-
         {
           key: "profile",
           id: "header-profile",
           icon: <UserOutlined />,
           label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
         }
-        // {
-        //   key: 'langselecter',
-        //   label: t("menus.currentuser.languageselector"),
-        //   children: [
-        //     {
-        //       key: 'en-US',
-        //       label: t("general.languages.english"),
-        //       onClick: () => {
-        //         window.location.href = "/?lang=en-US";
-        //       }
-        //     },
-        //     {
-        //       key: 'fr-CA',
-        //       label: t("general.languages.french"),
-        //       onClick: () => {
-        //         window.location.href = "/?lang=fr-CA";
-        //       }
-        //     },
-        //     {
-        //       key: 'es-MX',
-        //       label: t("general.languages.spanish"),
-        //       onClick: () => {
-        //         window.location.href = "/?lang=es-MX";
-        //       }
-        //     },
-        //   ]
-        // },
       ]
-    },
-    {
-      key: "recent",
-      icon: <ClockCircleFilled />,
-      id: "header-recent",
-      children: recentItems.map((i, idx) => ({
-        key: idx,
-        id: `header-recent-${idx}`,
-        label: <Link to={i.url}>{i.label}</Link>
-      }))
     }
   ];
 
+  // Notifications item (always on the right)
+  const notificationItem = scenarioNotificationsOn
+    ? [
+        {
+          key: "notifications",
+          id: "header-notifications",
+          icon: unreadLoading ? (
+            <Spin size="small" />
+          ) : (
+            <Badge offset={[8, 0]} size="small" count={unreadCount}>
+              <BellFilled />
+            </Badge>
+          ),
+          onClick: handleNotificationClick
+        }
+      ]
+    : [];
+
   return (
-    <Layout.Header>
-      <Menu
-        mode="horizontal"
-        theme={"dark"}
-        selectedKeys={[selectedHeader]}
-        onClick={handleMenuClick}
-        subMenuCloseDelay={0.3}
-        items={menuItems}
-      />
+    <Layout.Header style={{ padding: 0, background: "#001529" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          height: "100%",
+          overflow: "hidden"
+        }}
+      >
+        <Menu
+          mode="horizontal"
+          theme="dark"
+          selectedKeys={[selectedHeader]}
+          onClick={handleMenuClick}
+          subMenuCloseDelay={0.3}
+          items={leftMenuItems}
+          style={{
+            flex: "1 1 auto",
+            minWidth: 0,
+            overflowX: "auto",
+            borderBottom: "none",
+            background: "transparent"
+          }}
+        />
+        {scenarioNotificationsOn && (
+          <Menu
+            mode="horizontal"
+            theme="dark"
+            selectedKeys={[selectedHeader]}
+            onClick={handleMenuClick}
+            subMenuCloseDelay={0.3}
+            items={notificationItem}
+            style={{ flex: "0 0 auto", minWidth: 0, borderBottom: "none", background: "transparent" }}
+          />
+        )}
+      </div>
+      {scenarioNotificationsOn && (
+        <NotificationCenterContainer
+          visible={notificationVisible}
+          onClose={() => setNotificationVisible(false)}
+          unreadCount={unreadCount}
+        />
+      )}
     </Layout.Header>
   );
 }

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);

client/src/components/job-at-change/schedule-event.component.jsx

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

client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx

@@ -216,7 +216,7 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
           </Form.Item>
         </Collapse.Panel>
 
-        <Collapse.Panel header={t("jobs.labels.performance")}>
+        <Collapse.Panel key="job-performance" header={t("jobs.labels.performance")}>
           <Row gutter={[32, 32]}>
             <Col className="ro-guard-col" span={24}>
               <JobCloseRoGuardTtLifecycle job={job} />

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -1,17 +1,21 @@
-import { PrinterFilled } from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
+import { PauseCircleOutlined, PlayCircleOutlined, PrinterFilled } from "@ant-design/icons";
+import { useMutation, useQuery } from "@apollo/client";
 import { Button, Card, Col, Divider, Drawer, Grid, Row, Space } from "antd";
 import queryString from "query-string";
-import React 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 { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { QUERY_JOB_CARD_DETAILS, UPDATE_JOB } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
 import AlertComponent from "../alert/alert.component";
 import JobSyncButton from "../job-sync-button/job-sync-button.component";
+import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
 import JobsDetailHeader from "../jobs-detail-header/jobs-detail-header.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
@@ -27,7 +31,15 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" }))
+  setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" })),
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });
 
 const span = {
@@ -36,7 +48,9 @@ const span = {
   xxl: { span: 8 }
 };
 
-export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
+export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTrail }) {
+  const { scenarioNotificationsOn } = useSocket();
+  const [updateJob] = useMutation(UPDATE_JOB);
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
     .slice(-1)[0];
@@ -78,12 +92,39 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
       {data ? (
         <Card
           title={
-            <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>{data.jobs_by_pk.ro_number || t("general.labels.na")}</Link>
+            <Space>
+              {scenarioNotificationsOn && <JobWatcherToggleContainer job={data.jobs_by_pk} />}
+              <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
+                {data.jobs_by_pk.ro_number || t("general.labels.na")}
+              </Link>
+            </Space>
           }
           extra={
             <Space wrap>
               <JobSyncButton job={data.jobs_by_pk} />
-
+              <Button
+                onClick={() => {
+                  logImEXEvent("production_toggle_alert");
+                  updateJob({
+                    variables: {
+                      jobId: data.jobs_by_pk.id,
+                      job: {
+                        suspended: !data.jobs_by_pk.suspended
+                      }
+                    }
+                  });
+                  insertAuditTrail({
+                    jobid: data.jobs_by_pk.id,
+                    operation: AuditTrailMapping.jobsuspend(
+                      data.jobs_by_pk.suspended ? !data.jobs_by_pk.suspended : true
+                    ),
+                    type: "jobsuspend"
+                  });
+                }}
+                icon={data.jobs_by_pk.suspended ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
+              >
+                {data.jobs_by_pk.suspended ? t("production.actions.unsuspend") : t("production.actions.suspend")}
+              </Button>
               <Button
                 onClick={() => {
                   setPrintCenterContext({
@@ -95,8 +136,8 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
                     }
                   });
                 }}
+                icon={<PrinterFilled />}
               >
-                <PrinterFilled />
                 {t("jobs.actions.printCenter")}
               </Button>
               <Link to={`/manage/jobs/${data.jobs_by_pk.id}?tab=repairdata`}>
@@ -122,7 +163,11 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
             </Col>
             {!bodyshop.uselocalmediaserver && (
               <Col {...span}>
-                <JobDetailCardsDocumentsComponent loading={loading} data={data ? data.jobs_by_pk : null} bodyshop={bodyshop} />
+                <JobDetailCardsDocumentsComponent
+                  loading={loading}
+                  data={data ? data.jobs_by_pk : null}
+                  bodyshop={bodyshop}
+                />
               </Col>
             )}
             <Col {...span}>

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -62,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
         });
@@ -107,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 {
@@ -115,9 +120,7 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
       }
       toggleModalVisible();
     }
-    if (CriticalPartsScanning.treatment === "on") {
-      CriticalPartsScan(jobLineEditModal.context.jobid, notification);
-    }
+
     setLoading(false);
   };
 

client/src/components/job-totals-table/job-totals-table.component.jsx

@@ -69,7 +69,7 @@ export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
                 <Card title="DEVELOPMENT USE ONLY">
                   <JobCalculateTotals job={job} disabled={jobRO} />
                   <Collapse>
-                    <Collapse.Panel header="JSON Tree Totals">
+                    <Collapse.Panel key="json-totals" header="JSON Tree Totals">
                       <div>
                         <pre>
                           {JSON.stringify(

client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx

@@ -0,0 +1,154 @@
+import React from "react";
+import { EyeFilled, EyeOutlined, UserOutlined } from "@ant-design/icons";
+import { Avatar, Button, Divider, List, Popover, Select, Tooltip, Typography } from "antd";
+import { useTranslation } from "react-i18next";
+import EmployeeSearchSelectComponent from "../../components/employee-search-select/employee-search-select.component.jsx";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component.jsx";
+import { BiSolidTrash } from "react-icons/bi";
+
+const { Text } = Typography;
+
+export default function JobWatcherToggleComponent({
+  jobWatchers,
+  isWatching,
+  watcherLoading,
+  adding,
+  removing,
+  open,
+  setOpen,
+  selectedWatcher,
+  setSelectedWatcher,
+  selectedTeam,
+  bodyshop,
+  Enhanced_Payroll,
+  handleToggleSelf,
+  handleRemoveWatcher,
+  handleWatcherSelect,
+  handleTeamSelect
+}) {
+  const { t } = useTranslation();
+
+  const handleRenderItem = (watcher) => {
+    // Check if watcher is defined and has user_email
+    if (!watcher || !watcher.user_email) {
+      return null; // Skip rendering invalid watchers
+    }
+
+    const employee = bodyshop?.employees?.find((e) => e.user_email === watcher.user_email);
+    const displayName = employee ? `${employee.first_name} ${employee.last_name}` : watcher.user_email;
+
+    return (
+      <List.Item
+        actions={[
+          <Button
+            type="default"
+            danger
+            size="medium"
+            icon={<BiSolidTrash />}
+            onClick={() => handleRemoveWatcher(watcher.user_email)}
+            disabled={adding || removing} // Optional: Disable button during mutations
+          >
+            {t("notifications.actions.remove")}
+          </Button>
+        ]}
+      >
+        <List.Item.Meta
+          avatar={<Avatar icon={<UserOutlined />} />}
+          title={<Text>{displayName}</Text>}
+          description={watcher.user_email}
+        />
+      </List.Item>
+    );
+  };
+
+  const popoverContent = (
+    <div style={{ width: "30em" }}>
+      <List>
+        <List.Item
+          actions={[
+            <Button
+              type={isWatching ? "primary" : "default"}
+              danger={!isWatching}
+              icon={isWatching ? <EyeOutlined /> : <EyeFilled />}
+              size="medium"
+              onClick={handleToggleSelf}
+              loading={adding || removing}
+            >
+              {isWatching ? t("notifications.labels.unwatch") : t("notifications.labels.watch")}
+            </Button>
+          ]}
+        >
+          <List.Item.Meta>
+            <Text type="secondary" style={{ marginBottom: 8, display: "block" }}>
+              {t("notifications.labels.watching-issue")}
+            </Text>
+          </List.Item.Meta>
+        </List.Item>
+      </List>
+      {watcherLoading ? (
+        <LoadingSpinner />
+      ) : jobWatchers && jobWatchers.length > 0 ? (
+        <List dataSource={jobWatchers} renderItem={handleRenderItem} />
+      ) : (
+        <Text type="secondary">{t("notifications.labels.no-watchers")}</Text>
+      )}
+
+      <Divider />
+      <Text type="secondary">{t("notifications.labels.add-watchers")}</Text>
+      <EmployeeSearchSelectComponent
+        style={{ minWidth: "100%" }}
+        options={
+          bodyshop?.employees?.filter((e) =>
+            jobWatchers.every((w) => w.user_email !== e.user_email && e.active && e.user_email)
+          ) || []
+        }
+        placeholder={t("notifications.labels.employee-search")}
+        value={selectedWatcher}
+        onChange={(value) => {
+          setSelectedWatcher(value);
+          handleWatcherSelect(value);
+        }}
+      />
+      {Enhanced_Payroll && bodyshop?.employee_teams?.length > 0 && (
+        <>
+          <Divider />
+          <Text type="secondary">{t("notifications.labels.add-watchers-team")}</Text>
+          <Select
+            showSearch
+            style={{ minWidth: "100%" }}
+            placeholder={t("notifications.labels.teams-search")}
+            value={selectedTeam}
+            onChange={handleTeamSelect}
+            options={
+              bodyshop?.employee_teams?.map((team) => {
+                const teamMembers = team.employee_team_members
+                  .map((member) => {
+                    const employee = bodyshop?.employees?.find((e) => e.id === member.employeeid);
+                    return employee?.user_email && employee?.active ? employee.user_email : null;
+                  })
+                  .filter(Boolean);
+                return {
+                  value: JSON.stringify(teamMembers),
+                  label: team.name
+                };
+              }) || []
+            }
+          />
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <Popover placement="rightTop" content={popoverContent} trigger="click" open={open} onOpenChange={setOpen}>
+      <Tooltip title={t("notifications.tooltips.job-watchers")}>
+        <Button
+          shape="circle"
+          type={isWatching ? "primary" : "default"}
+          icon={isWatching ? <EyeFilled /> : <EyeOutlined />}
+          loading={watcherLoading}
+        />
+      </Tooltip>
+    </Popover>
+  );
+}

client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx

@@ -0,0 +1,219 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery } from "@apollo/client";
+import { ADD_JOB_WATCHER, GET_JOB_WATCHERS, REMOVE_JOB_WATCHER } from "../../graphql/jobs.queries.js";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import JobWatcherToggleComponent from "./job-watcher-toggle.component.jsx";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
+  const {
+    treatments: { Enhanced_Payroll }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Enhanced_Payroll"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
+
+  const userEmail = currentUser.email;
+  const jobid = job.id;
+
+  const [open, setOpen] = useState(false);
+  const [selectedWatcher, setSelectedWatcher] = useState(null);
+  const [selectedTeam, setSelectedTeam] = useState(null);
+
+  // Fetch current watchers with refetch capability
+  const {
+    data: watcherData,
+    loading: watcherLoading,
+    refetch
+  } = useQuery(GET_JOB_WATCHERS, {
+    variables: { jobid },
+    fetchPolicy: "cache-and-network" // Ensure fresh data from server
+  });
+
+  // Refetch jobWatchers when the popover opens (open changes to true)
+  useEffect(() => {
+    if (open) {
+      refetch().catch((err) =>
+        console.error(`Something went wrong fetching Notification Watchers on popover open: ${err?.message}`, {
+          stack: err?.stack
+        })
+      );
+    }
+  }, [open, refetch]);
+
+  const jobWatchers = useMemo(() => (watcherData?.job_watchers ? [...watcherData.job_watchers] : []), [watcherData]);
+  const isWatching = jobWatchers.some((w) => w.user_email === userEmail);
+
+  const [addWatcher, { loading: adding }] = useMutation(ADD_JOB_WATCHER, {
+    onCompleted: () =>
+      refetch().catch((err) =>
+        console.error(`Something went wrong fetching Notification Watchers after add: ${err?.message}`, {
+          stack: err?.stack
+        })
+      ),
+    onError: (err) => {
+      if (err.graphQLErrors && err.graphQLErrors.length > 0) {
+        const errorMessage = err.graphQLErrors[0].message;
+        if (
+          errorMessage.includes("Uniqueness violation") ||
+          errorMessage.includes("idx_job_watchers_jobid_user_email_unique")
+        ) {
+          console.warn("Watcher already exists for this job and user.");
+          refetch().catch((err) =>
+            console.error(
+              `Something went wrong fetching Notification Watchers after uniqueness violation: ${err?.message}`,
+              { stack: err?.stack }
+            )
+          ); // Sync with server to ensure UI reflects actual state
+        } else {
+          console.error(`Error adding job watcher: ${errorMessage}`);
+        }
+      } else {
+        console.error(`Unexpected error adding job watcher: ${err.message || JSON.stringify(err)}`);
+      }
+    },
+    update(cache, { data }) {
+      if (!data || !data.insert_job_watchers_one) {
+        console.warn("No data or insert_job_watchers_one returned from mutation, skipping cache update.");
+        refetch().catch((err) =>
+          console.error(`Something went wrong updating Notification Watchers after add: ${err?.message}`, {
+            stack: err?.stack
+          })
+        );
+        return;
+      }
+
+      const insert_job_watchers_one = data.insert_job_watchers_one;
+      const existingData = cache.readQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid }
+      });
+
+      cache.writeQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid },
+        data: {
+          ...existingData,
+          job_watchers: [...(existingData?.job_watchers || []), insert_job_watchers_one]
+        }
+      });
+    }
+  });
+
+  const [removeWatcher, { loading: removing }] = useMutation(REMOVE_JOB_WATCHER, {
+    onCompleted: () =>
+      refetch().catch((err) =>
+        console.error(`Something went wrong fetching Notification Watchers after remove: ${err?.message}`, {
+          stack: err?.stack
+        })
+      ), // Refetch to sync with server after success
+    onError: (err) => console.error(`Error removing job watcher: ${err.message}`),
+    update(cache, { data: { delete_job_watchers } }) {
+      const existingData = cache.readQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid }
+      });
+
+      const deletedWatcher = delete_job_watchers.returning[0];
+      const updatedWatchers = deletedWatcher
+        ? (existingData?.job_watchers || []).filter((watcher) => watcher.user_email !== deletedWatcher.user_email)
+        : existingData?.job_watchers || [];
+
+      cache.writeQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid },
+        data: {
+          ...existingData,
+          job_watchers: updatedWatchers
+        }
+      });
+    }
+  });
+
+  const handleToggleSelf = useCallback(async () => {
+    if (adding || removing) return;
+    if (isWatching) {
+      await removeWatcher({ variables: { jobid, userEmail } });
+    } else {
+      await addWatcher({ variables: { jobid, userEmail } });
+    }
+  }, [isWatching, addWatcher, removeWatcher, jobid, userEmail, adding, removing]);
+
+  const handleRemoveWatcher = useCallback(
+    async (email) => {
+      if (removing) return;
+      await removeWatcher({ variables: { jobid, userEmail: email } });
+    },
+    [removeWatcher, jobid, removing]
+  );
+
+  const handleWatcherSelect = useCallback(
+    async (selectedUser) => {
+      if (adding || removing) return;
+      const employee = bodyshop.employees.find((e) => e.id === selectedUser);
+      if (!employee) return;
+
+      const email = employee.user_email;
+      const isAlreadyWatching = jobWatchers.some((w) => w.user_email === email);
+
+      if (isAlreadyWatching) {
+        await handleRemoveWatcher(email);
+      } else {
+        await addWatcher({ variables: { jobid, userEmail: email } });
+      }
+      setSelectedWatcher(null);
+    },
+    [jobWatchers, addWatcher, handleRemoveWatcher, jobid, bodyshop, adding, removing]
+  );
+
+  const handleTeamSelect = useCallback(
+    async (team) => {
+      if (adding) return;
+      const selectedTeamMembers = JSON.parse(team);
+      const newWatchers = selectedTeamMembers.filter(
+        (email) => !jobWatchers.some((watcher) => watcher.user_email === email)
+      );
+
+      if (newWatchers.length === 0) {
+        console.warn("All selected team members are already watchers.");
+        setSelectedTeam(null);
+        return;
+      }
+      await Promise.all(newWatchers.map((email) => addWatcher({ variables: { jobid, userEmail: email } })));
+    },
+    [jobWatchers, addWatcher, jobid, adding]
+  );
+
+  return (
+    <JobWatcherToggleComponent
+      jobWatchers={jobWatchers}
+      isWatching={isWatching}
+      watcherLoading={watcherLoading}
+      adding={adding}
+      removing={removing}
+      open={open}
+      setOpen={setOpen}
+      selectedWatcher={selectedWatcher}
+      setSelectedWatcher={setSelectedWatcher}
+      selectedTeam={selectedTeam}
+      setSelectedTeam={setSelectedTeam}
+      bodyshop={bodyshop}
+      Enhanced_Payroll={Enhanced_Payroll}
+      handleToggleSelf={handleToggleSelf}
+      handleRemoveWatcher={handleRemoveWatcher}
+      handleWatcherSelect={handleWatcherSelect}
+      handleTeamSelect={handleTeamSelect}
+      currentUser={currentUser}
+    />
+  );
+}
+
+export default connect(mapStateToProps)(JobWatcherToggleContainer);

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -172,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);
-      }
       notification["success"]({
         message: t("jobs.successes.created"),
         onClick: () => {
@@ -281,6 +281,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
       if (CriticalPartsScanning.treatment === "on") {
         CriticalPartsScan(updateResult.data.update_jobs.returning[0].id, notification);
       }
+
       if (updateResult.errors) {
         //error while inserting
         notification["error"]({

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -4,12 +4,12 @@ import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Dropdown, Form, Input, Modal, Popconfirm, Popover, Select, Space } from "antd";
 import axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";
-import { useContext, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
 import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
@@ -28,11 +28,11 @@ import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
+import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
 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 { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -130,7 +130,7 @@ export function JobsDetailHeaderActions({
   const [updateJob] = useMutation(UPDATE_JOB);
   const [voidJob] = useMutation(VOID_JOB);
   const [cancelAllAppointments] = useMutation(CANCEL_APPOINTMENTS_BY_JOB_ID);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
   const notification = useNotification();
 
   const {
@@ -775,15 +775,14 @@ export function JobsDetailHeaderActions({
     key: "enterpayments",
     id: "job-actions-enterpayments",
     disabled: !job.converted,
-    label: <LockerWrapperComponent featureName="payments">{t("menus.header.enterpayment")}</LockerWrapperComponent>,
+    label: t("menus.header.enterpayment"),
     onClick: () => {
       logImEXEvent("job_header_enter_payment");
 
-      HasFeatureAccess({ featureName: "payments", bodyshop }) &&
-        setPaymentContext({
-          actions: {},
-          context: { jobid: job.id }
-        });
+      setPaymentContext({
+        actions: {},
+        context: { jobid: job.id }
+      });
     }
   });
 

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>

client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import CABCpvrtCalculator from "../ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobsDetailRatesChangeButton from "../jobs-detail-rates-change-button/jobs-detail-rates-change-button.component";
@@ -14,9 +15,8 @@ import JobsDetailRatesLabor from "./jobs-detail-rates.labor.component";
 import JobsDetailRatesMaterials from "./jobs-detail-rates.materials.component";
 import JobsDetailRatesOther from "./jobs-detail-rates.other.component";
 import JobsDetailRatesParts from "./jobs-detail-rates.parts.component";
-import JobsDetailRatesTaxes from "./jobs-detail-rates.taxes.component";
 import JobsDetailRatesProfileOVerride from "./jobs-detail-rates.profile-override.component";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import JobsDetailRatesTaxes from "./jobs-detail-rates.taxes.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -66,14 +66,48 @@ export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
           </Space>
         )}
         <Form.Item label={t("jobs.fields.auto_add_ats")} name="auto_add_ats" valuePropName="checked">
-          <Switch disabled={jobRO} />
+          <Switch
+            disabled={jobRO}
+            onChange={(checked) => {
+              if (checked) {
+                form.setFieldsValue({ flat_rate_ats: false });
+                form.setFieldsValue({ rate_ats: form.getFieldValue('rate_ats') || bodyshop.shoprates.rate_ats });
+              }
+            }}
+          />
         </Form.Item>
-
         <Form.Item noStyle shouldUpdate={(prev, cur) => prev.auto_add_ats !== cur.auto_add_ats}>
           {() => {
             if (form.getFieldValue("auto_add_ats"))
               return (
-                <Form.Item label={t("jobs.fields.rate_ats")} name="rate_ats" initialValue={bodyshop.shoprates.rate_atp}>
+                <Form.Item label={t("jobs.fields.rate_ats")} name="rate_ats">
+                  <CurrencyInput disabled={jobRO} />
+                </Form.Item>
+              );
+
+            return null;
+          }}
+        </Form.Item>
+        <Form.Item label={t("jobs.fields.flat_rate_ats")} name="flat_rate_ats" valuePropName="checked">
+          <Switch
+            disabled={jobRO}
+            onChange={(checked) => {
+              if (checked) {
+                form.setFieldsValue({ auto_add_ats: false });
+                form.setFieldsValue({ rate_ats_flat: form.getFieldValue('rate_ats_flat') || bodyshop.shoprates.rate_ats_flat });
+
+              }
+            }}
+          />
+        </Form.Item>
+        <Form.Item noStyle shouldUpdate={(prev, cur) => prev.flat_rate_ats !== cur.flat_rate_ats}>
+          {() => {
+            if (form.getFieldValue("flat_rate_ats"))
+              return (
+                <Form.Item
+                  label={t("jobs.fields.rate_ats_flat")}
+                  name="rate_ats_flat"
+                >
                   <CurrencyInput disabled={jobRO} />
                 </Form.Item>
               );

client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx

@@ -19,7 +19,13 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsDownloadButton);
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
 export function JobsDocumentsDownloadButton({ bodyshop, galleryImages, identifier }) {
   const { t } = useTranslation();
   const [download, setDownload] = useState(null);

client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx

@@ -17,7 +17,13 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsGalleryReassign);
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
 export function JobsDocumentsGalleryReassign({ bodyshop, galleryImages, callback }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -1,29 +1,34 @@
 import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Col, Row, Space } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
+import Lightbox from "react-image-lightbox";
+import "react-image-lightbox/style.css";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import DocumentsUploadComponent from "../documents-upload/documents-upload.component";
 import { DetermineFileType } from "../documents-upload/documents-upload.utility";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";
 import JobsDocumentsDownloadButton from "./jobs-document-gallery.download.component";
 import JobsDocumentsGalleryReassign from "./jobs-document-gallery.reassign.component";
 import JobsDocumentsDeleteButton from "./jobs-documents-gallery.delete.component";
 import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-gallery.selectall.component";
 
-import Lightbox from "react-image-lightbox";
-import "react-image-lightbox/style.css";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({});
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
 function JobsDocumentsComponent({
   bodyshop,
   data,
@@ -114,6 +119,7 @@ function JobsDocumentsComponent({
     );
     setgalleryImages(documents);
   }, [data, setgalleryImages, t]);
+
   const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
   const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
   return (
@@ -137,7 +143,6 @@ function JobsDocumentsComponent({
             </Card>
           </Col>
         )}
-
         <Col span={24}>
           <Card>
             <DocumentsUploadComponent

client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx

@@ -2,29 +2,77 @@ import { useQuery } from "@apollo/client";
 import React from "react";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import AlertComponent from "../alert/alert.component";
+import JobDocumentsImgProxy from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobDocuments from "./jobs-documents-gallery.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({});
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsContainer);
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
+export function JobsDocumentsContainer({
+  jobId,
+  billId,
+  documentsList,
+  billsCallback,
+  refetchOverride,
+  ignoreSizeLimit,
+  bodyshop
+}) {
+  const {
+    treatments: { Imgproxy }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Imgproxy"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
 
-export default function JobsDocumentsContainer({ jobId, billId, documentsList, billsCallback }) {
   const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
     variables: { jobId: jobId },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: !!billId
+    skip: Imgproxy.treatment === "on" || !!billId
   });
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent type="error" message={error.message} />;
 
-  return (
-    <JobDocuments
-      data={(data && data.documents) || documentsList || []}
-      downloadIdentifier={data && data.jobs_by_pk.ro_number}
-      totalSize={data && data.documents_aggregate.aggregate.sum.size}
-      billId={billId}
-      jobId={jobId}
-      refetch={refetch}
-      billsCallback={billsCallback}
-    />
-  );
+  if (Imgproxy.treatment === "on") {
+    return (
+      <JobDocumentsImgProxy
+        data={(data && data.documents) || documentsList || []}
+        downloadIdentifier={data && data.jobs_by_pk.ro_number}
+        totalSize={data && data.documents_aggregate.aggregate.sum.size}
+        billId={billId}
+        jobId={jobId}
+        refetch={refetchOverride || refetch}
+        billsCallback={billsCallback}
+        ignoreSizeLimit={ignoreSizeLimit}
+      />
+    );
+  } else {
+    return (
+      <JobDocuments
+        data={(data && data.documents) || documentsList || []}
+        downloadIdentifier={data && data.jobs_by_pk.ro_number}
+        totalSize={data && data.documents_aggregate.aggregate.sum.size}
+        billId={billId}
+        jobId={jobId}
+        refetch={refetchOverride || refetch}
+        billsCallback={billsCallback}
+        ignoreSizeLimit={ignoreSizeLimit}
+      />
+    );
+  }
 }

client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx

@@ -5,8 +5,13 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-//Context: currentUserEmail, bodyshop, jobid, invoiceid
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
 export default function JobsDocumentsDeleteButton({ galleryImages, deletionCallback }) {
   const { t } = useTranslation();
   const notification = useNotification();

client/src/components/jobs-documents-gallery/jobs-documents-gallery.external.component.jsx

@@ -3,6 +3,13 @@ import { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
 import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";
 
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
 function JobsDocumentGalleryExternal({
   data,
 

client/src/components/jobs-documents-gallery/jobs-documents-gallery.selectall.component.jsx

@@ -2,6 +2,14 @@ import { Button, Space } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
+
 export default function JobsDocumentsGallerySelectAllComponent({ galleryImages, setGalleryImages }) {
   const { t } = useTranslation();
 

client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx

@@ -0,0 +1,87 @@
+import { Button, Space } from "antd";
+import axios from "axios";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import cleanAxios from "../../utils/CleanAxios";
+import formatBytes from "../../utils/formatbytes";
+//import yauzl from "yauzl";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyDownloadButton);
+
+export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, identifier }) {
+  const { t } = useTranslation();
+  const [download, setDownload] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const imagesToDownload = [
+    ...galleryImages.images.filter((image) => image.isSelected),
+    ...galleryImages.other.filter((image) => image.isSelected)
+  ];
+
+  function downloadProgress(progressEvent) {
+    setDownload((currentDownloadState) => {
+      return {
+        downloaded: progressEvent.loaded || 0,
+        speed: (progressEvent.loaded || 0) - ((currentDownloadState && currentDownloadState.downloaded) || 0)
+      };
+    });
+  }
+  function standardMediaDownload(bufferData) {
+    const a = document.createElement("a");
+    const url = window.URL.createObjectURL(new Blob([bufferData]));
+    a.href = url;
+    a.download = `${identifier || "documents"}.zip`;
+    a.click();
+  }
+  const handleDownload = async () => {
+    logImEXEvent("jobs_documents_download");
+    setLoading(true);
+    const zipUrl = await axios({
+      url: "/media/imgproxy/download",
+      method: "POST",
+      data: { documentids: imagesToDownload.map((_) => _.id) }
+    });
+
+    const theDownloadedZip = await cleanAxios({
+      url: zipUrl.data.url,
+      method: "GET",
+      responseType: "arraybuffer",
+      onDownloadProgress: downloadProgress
+    });
+    setLoading(false);
+    setDownload(null);
+
+    standardMediaDownload(theDownloadedZip.data);
+  };
+
+  return (
+    <>
+      <Button loading={download || loading} disabled={imagesToDownload.length < 1} onClick={handleDownload}>
+        <Space>
+          <span>{t("documents.actions.download")}</span>
+          {download && <span>{`(${formatBytes(download.downloaded)} @ ${formatBytes(download.speed)} / second)`}</span>}
+        </Space>
+      </Button>
+    </>
+  );
+}

client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.reassign.component.jsx

@@ -0,0 +1,134 @@
+import { useApolloClient } from "@apollo/client";
+import { Button, Form, Popover, Space } from "antd";
+import axios from "axios";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { GET_DOC_SIZE_BY_JOB } from "../../graphql/documents.queries.js";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import JobSearchSelect from "../job-search-select/job-search-select.component.jsx";
+import { isFunction } from "lodash";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyGalleryReassign);
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+export function JobsDocumentsImgproxyGalleryReassign({ bodyshop, galleryImages, callback }) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const notification = useNotification();
+
+  const selectedImages = useMemo(() => {
+    return [
+      ...galleryImages.images.filter((image) => image.isSelected),
+      ...galleryImages.other.filter((image) => image.isSelected)
+    ];
+  }, [galleryImages]);
+  const client = useApolloClient();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleFinish = async ({ jobid }) => {
+    setLoading(true);
+
+    //Check to see if the space remaining on the new job is sufficient. If it isn't cancel this.
+    const newJobData = await client.query({
+      query: GET_DOC_SIZE_BY_JOB,
+      variables: { jobId: jobid }
+    });
+
+    const transferedDocSizeTotal = selectedImages.reduce((acc, val) => acc + val.size, 0);
+
+    const shouldPreventTransfer =
+      bodyshop.jobsizelimit - newJobData.data.documents_aggregate.aggregate.sum.size < transferedDocSizeTotal;
+
+    if (shouldPreventTransfer) {
+      notification.error({
+        key: "cannotuploaddocuments",
+        message: t("documents.labels.reassign_limitexceeded_title"),
+        description: t("documents.labels.reassign_limitexceeded")
+      });
+      setLoading(false);
+      return;
+    }
+
+    const res = await axios.post("/media/imgproxy/rename", {
+      tojobid: jobid,
+      documents: selectedImages.map((i) => {
+        //Need to check if the current key folder is null, or another job.
+        const currentKeys = i.key.split("/");
+        currentKeys[1] = jobid;
+        currentKeys.join("/");
+        return {
+          id: i.id,
+          from: i.key,
+          to: currentKeys.join("/"),
+          extension: i.extension,
+          type: i.type
+        };
+      })
+    });
+    //Add in confirmation & errors.
+    if (isFunction(callback)) callback();
+
+    if (res.errors) {
+      notification.error({
+        message: t("documents.errors.updating", {
+          message: JSON.stringify(res.errors)
+        })
+      });
+    }
+    if (!res.mutationResult?.errors) {
+      notification.success({
+        message: t("documents.successes.updated")
+      });
+    }
+    setOpen(false);
+    setLoading(false);
+  };
+
+  const popContent = (
+    <div>
+      <Form onFinish={handleFinish} layout="vertical" form={form}>
+        <Form.Item
+          label={t("documents.labels.newjobid")}
+          style={{ width: "20rem" }}
+          rules={[
+            {
+              required: true
+              //message: t("general.validation.required"),
+            }
+          ]}
+          name={"jobid"}
+        >
+          <JobSearchSelect notExported={false} notInvoiced={false} />
+        </Form.Item>
+      </Form>
+      <Space>
+        <Button type="primary" onClick={() => form.submit()}>
+          {t("general.actions.submit")}
+        </Button>
+        <Button onClick={() => setOpen(false)}>{t("general.actions.cancel")}</Button>
+      </Space>
+    </div>
+  );
+
+  return (
+    <Popover content={popContent} open={open}>
+      <Button disabled={selectedImages.length < 1} onClick={() => setOpen(true)} loading={loading}>
+        {t("documents.actions.reassign")}
+      </Button>
+    </Popover>
+  );
+}

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx

@@ -0,0 +1,266 @@
+import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
+import { Button, Card, Col, Row, Space } from "antd";
+import axios from "axios";
+import i18n from "i18next";
+import { isFunction } from "lodash";
+import { useCallback, useEffect, useState } from "react";
+import { Gallery } from "react-grid-gallery";
+import { useTranslation } from "react-i18next";
+import Lightbox from "react-image-lightbox";
+import "react-image-lightbox/style.css";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import DocumentsUploadImgproxyComponent from "../documents-upload-imgproxy/documents-upload-imgproxy.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+import JobsDocumentsDownloadButton from "./jobs-document-imgproxy-gallery.download.component";
+import JobsDocumentsGalleryReassign from "./jobs-document-imgproxy-gallery.reassign.component";
+import JobsDocumentsDeleteButton from "./jobs-documents-imgproxy-gallery.delete.component";
+import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-imgproxy-gallery.selectall.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({});
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+function JobsDocumentsImgproxyComponent({
+  bodyshop,
+  data,
+  jobId,
+  refetch,
+  billId,
+  billsCallback,
+  totalSize,
+  downloadIdentifier,
+  ignoreSizeLimit
+}) {
+  const [galleryImages, setGalleryImages] = useState({ images: [], other: [] });
+  const { t } = useTranslation();
+  const [modalState, setModalState] = useState({ open: false, index: 0 });
+
+  const fetchThumbnails = useCallback(() => {
+    fetchImgproxyThumbnails({ setStateCallback: setGalleryImages, jobId });
+  }, [jobId, setGalleryImages]);
+
+  useEffect(() => {
+    if (data) {
+      fetchThumbnails();
+    }
+  }, [data, fetchThumbnails]);
+
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+  const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
+  return (
+    <div>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Space wrap>
+            <Button
+              onClick={() => {
+                //Handle any doc refresh.
+
+                isFunction(refetch) && refetch();
+
+                //Do the imgproxy refresh too
+                fetchThumbnails();
+              }}
+            >
+              <SyncOutlined />
+            </Button>
+            <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
+            <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} />
+            <JobsDocumentsDeleteButton
+              galleryImages={galleryImages}
+              deletionCallback={billsCallback || fetchThumbnails || refetch}
+            />
+            {!billId && (
+              <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />
+            )}
+          </Space>
+        </Col>
+        {!hasMediaAccess && (
+          <Col span={24}>
+            <Card>
+              <UpsellComponent disableMask upsell={upsellEnum().media.general} />
+            </Card>
+          </Col>
+        )}
+        <Col span={24}>
+          <Card>
+            <DocumentsUploadImgproxyComponent
+              jobId={jobId}
+              totalSize={totalSize}
+              billId={billId}
+              callbackAfterUpload={billsCallback || fetchThumbnails || refetch}
+              ignoreSizeLimit={ignoreSizeLimit}
+            />
+          </Card>
+        </Col>
+        {hasMediaAccess && !hasMobileAccess && (
+          <Col span={24}>
+            <Card>
+              <UpsellComponent upsell={upsellEnum().media.mobile} />
+            </Card>
+          </Col>
+        )}
+        <Col span={24}>
+          <Card title={t("jobs.labels.documents-images")}>
+            <Gallery
+              images={galleryImages.images}
+              onClick={(index, item) => {
+                setModalState({ open: true, index: index });
+                // window.open(
+                //   item.fullsize,
+                //   "_blank",
+                //   "toolbar=0,location=0,menubar=0"
+                // );
+              }}
+              onSelect={(index, image) => {
+                setGalleryImages({
+                  ...galleryImages,
+                  images: galleryImages.images.map((g, idx) =>
+                    index === idx ? { ...g, isSelected: !g.isSelected } : g
+                  )
+                });
+              }}
+            />
+          </Card>
+        </Col>
+        <Col span={24}>
+          <Card title={t("jobs.labels.documents-other")}>
+            <Gallery
+              images={galleryImages.other}
+              thumbnailStyle={() => {
+                return {
+                  backgroundImage: <FileExcelFilled />,
+                  height: "100%",
+                  width: "100%",
+                  cursor: "pointer"
+                };
+              }}
+              onClick={(index) => {
+                window.open(galleryImages.other[index].source, "_blank", "toolbar=0,location=0,menubar=0");
+              }}
+              onSelect={(index) => {
+                setGalleryImages({
+                  ...galleryImages,
+                  other: galleryImages.other.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g))
+                });
+              }}
+            />
+          </Card>
+        </Col>
+        {modalState.open && (
+          <Lightbox
+            toolbarButtons={[
+              <EditFilled
+                key="edit"
+                onClick={() => {
+                  const newWindow = window.open(
+                    `${window.location.protocol}//${window.location.host}/edit?documentId=${
+                      galleryImages.images[modalState.index].id
+                    }`,
+                    "_blank",
+                    "noopener,noreferrer"
+                  );
+                  if (newWindow) newWindow.opener = null;
+                }}
+              />
+            ]}
+            mainSrc={galleryImages.images[modalState.index].fullsize}
+            nextSrc={galleryImages.images[(modalState.index + 1) % galleryImages.images.length].fullsize}
+            prevSrc={
+              galleryImages.images[(modalState.index + galleryImages.images.length - 1) % galleryImages.images.length]
+                .fullsize
+            }
+            onCloseRequest={() => setModalState({ open: false, index: 0 })}
+            onMovePrevRequest={() =>
+              setModalState({
+                ...modalState,
+                index: (modalState.index + galleryImages.images.length - 1) % galleryImages.images.length
+              })
+            }
+            onMoveNextRequest={() =>
+              setModalState({
+                ...modalState,
+                index: (modalState.index + 1) % galleryImages.images.length
+              })
+            }
+          />
+        )}
+      </Row>
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyComponent);
+
+export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, imagesOnly }) => {
+  const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId });
+  const documents = result.data.reduce(
+    (acc, value) => {
+      if (value.type.startsWith("image")) {
+        acc.images.push({
+          src: value.thumbnailUrl,
+          fullsize: value.originalUrl,
+          height: 225,
+          width: 225,
+          isSelected: false,
+          key: value.key,
+          extension: value.extension,
+          id: value.id,
+          type: value.type,
+          size: value.size,
+          tags: [{ value: value.type, title: value.type }]
+        });
+      } else {
+        const fileName = value.key.split("/").pop();
+        acc.other.push({
+          source: value.originalUrlViaProxyPath,
+          src: value.thumbnailUrl,
+          fullsize: value.presignedGetUrl,
+          tags: [
+            {
+              value: fileName,
+              title: fileName
+            },
+
+            { value: value.type, title: value.type },
+            ...(value.bill
+              ? [
+                  {
+                    value: value.bill.vendor.name,
+                    title: i18n.t("vendors.fields.name")
+                  },
+                  { value: value.bill.date, title: i18n.t("bills.fields.date") },
+                  {
+                    value: value.bill.invoice_number,
+                    title: i18n.t("bills.fields.invoice_number")
+                  }
+                ]
+              : [])
+          ],
+          height: 225,
+          width: 225,
+          isSelected: false,
+          extension: value.extension,
+          key: value.key,
+          id: value.id,
+          type: value.type,
+          size: value.size
+        });
+      }
+      return acc;
+    },
+    { images: [], other: [] }
+  );
+
+  setStateCallback(imagesOnly ? documents.images : documents);
+};

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.container.jsx

@@ -0,0 +1,37 @@
+import { useQuery } from "@apollo/client";
+import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import JobDocuments from "./jobs-documents-imgproxy-gallery.component";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+export default function JobsDocumentsImgproxyContainer({ jobId, billId, documentsList, billsCallback }) {
+  const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
+    variables: { jobId: jobId },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    skip: !!billId
+  });
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent type="error" message={error.message} />;
+
+  return (
+    <JobDocuments
+      data={(data && data.documents) || documentsList || []}
+      downloadIdentifier={data && data.jobs_by_pk.ro_number}
+      totalSize={data && data.documents_aggregate.aggregate.sum.size}
+      billId={billId}
+      jobId={jobId}
+      refetch={refetch}
+      billsCallback={billsCallback}
+    />
+  );
+}

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.delete.component.jsx

@@ -0,0 +1,75 @@
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { Button, Popconfirm } from "antd";
+import axios from "axios";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { isFunction } from "lodash";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+export default function JobsDocumentsImgproxyDeleteButton({ galleryImages, deletionCallback }) {
+  const { t } = useTranslation();
+  const notification = useNotification();
+
+  const imagesToDelete = [
+    ...galleryImages.images.filter((image) => image.isSelected),
+    ...galleryImages.other.filter((image) => image.isSelected)
+  ];
+  const [loading, setLoading] = useState(false);
+
+  const handleDelete = async () => {
+    logImEXEvent("job_documents_delete", { count: imagesToDelete.length });
+    try {
+      setLoading(true);
+      const res = await axios.post("/media/imgproxy/delete", {
+        ids: imagesToDelete.map((d) => d.id)
+      });
+
+      if (res.data.error) {
+        notification.error({
+          message: t("documents.errors.deleting", {
+            error: JSON.stringify(res.data.error.response.errors)
+          })
+        });
+      } else {
+        notification.success({
+          key: "docdeletedsuccesfully",
+          message: t("documents.successes.delete")
+        });
+
+        if (isFunction(deletionCallback)) deletionCallback();
+      }
+    } catch (error) {
+      notification.error({
+        message: t("documents.errors.deleting", {
+          error: error.message
+        })
+      });
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Popconfirm
+      disabled={imagesToDelete.length < 1}
+      icon={<QuestionCircleOutlined style={{ color: "red" }} />}
+      onConfirm={handleDelete}
+      title={t("documents.labels.confirmdelete")}
+      okText={t("general.actions.delete")}
+      okButtonProps={{ danger: true }}
+      cancelText={t("general.actions.cancel")}
+    >
+      <Button disabled={imagesToDelete.length < 1} loading={loading}>
+        {t("documents.actions.delete")}
+      </Button>
+    </Popconfirm>
+  );
+}

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component.jsx

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { Gallery } from "react-grid-gallery";
+import { fetchImgproxyThumbnails } from "./jobs-documents-imgproxy-gallery.component";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+function JobsDocumentImgproxyGalleryExternal({ jobId, externalMediaState }) {
+  const [galleryImages, setgalleryImages] = externalMediaState;
+
+  useEffect(() => {
+    if (jobId) fetchImgproxyThumbnails({ setStateCallback: setgalleryImages, jobId, imagesOnly: true });
+  }, [jobId, setgalleryImages]);
+
+  return (
+    <div className="clearfix">
+      <Gallery
+        images={galleryImages}
+        backdropClosesModal={true}
+        onSelect={(index, image) => {
+          setgalleryImages(galleryImages.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g)));
+        }}
+      />
+    </div>
+  );
+}
+
+export default JobsDocumentImgproxyGalleryExternal;

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.selectall.component.jsx

@@ -0,0 +1,63 @@
+import { Button, Space } from "antd";
+import { useTranslation } from "react-i18next";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+export default function JobsDocumentsImgproxyGallerySelectAllComponent({ galleryImages, setGalleryImages }) {
+  const { t } = useTranslation();
+
+  const handleSelectAll = () => {
+    setGalleryImages({
+      ...galleryImages,
+      other: galleryImages.other.map((i) => {
+        return { ...i, isSelected: true };
+      }),
+      images: galleryImages.images.map((i) => {
+        return { ...i, isSelected: true };
+      })
+    });
+  };
+  const handleSelectAllImages = () => {
+    setGalleryImages({
+      ...galleryImages,
+
+      images: galleryImages.images.map((i) => {
+        return { ...i, isSelected: true };
+      })
+    });
+  };
+  const handleSelectAllDocuments = () => {
+    setGalleryImages({
+      ...galleryImages,
+      other: galleryImages.other.map((i) => {
+        return { ...i, isSelected: true };
+      })
+    });
+  };
+  const handleDeselectAll = () => {
+    setGalleryImages({
+      ...galleryImages,
+      other: galleryImages.other.map((i) => {
+        return { ...i, isSelected: false };
+      }),
+      images: galleryImages.images.map((i) => {
+        return { ...i, isSelected: false };
+      })
+    });
+  };
+
+  return (
+    <Space wrap>
+      <Button onClick={handleSelectAll}>{t("general.actions.selectall")}</Button>
+      <Button onClick={handleSelectAllImages}>{t("documents.actions.selectallimages")}</Button>
+      <Button onClick={handleSelectAllDocuments}>{t("documents.actions.selectallotherdocuments")}</Button>
+      <Button onClick={handleDeselectAll}>{t("general.actions.deselectall")}</Button>
+    </Space>
+  );
+}

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.styles.scss

@@ -0,0 +1,10 @@
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

client/src/components/notification-center/notification-center.component.jsx

@@ -0,0 +1,122 @@
+import { Virtuoso } from "react-virtuoso";
+import { Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
+import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import "./notification-center.styles.scss";
+import day from "../../utils/day.js";
+import { forwardRef, useRef, useEffect } from "react";
+import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
+
+const { Text, Title } = Typography;
+
+/**
+ * Notification Center Component
+ * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly visible?: *, readonly onClose?: *, readonly notifications?: *, readonly loading?: *, readonly showUnreadOnly?: *, readonly toggleUnreadOnly?: *, readonly markAllRead?: *, readonly loadMore?: *, readonly onNotificationClick?: *, readonly unreadCount?: *}> & React.RefAttributes<unknown>>}
+ */
+const NotificationCenterComponent = forwardRef(
+  (
+    {
+      visible,
+      onClose,
+      notifications,
+      loading,
+      showUnreadOnly,
+      toggleUnreadOnly,
+      markAllRead,
+      loadMore,
+      onNotificationClick,
+      unreadCount
+    },
+    ref
+  ) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const virtuosoRef = useRef(null);
+
+    // Scroll to top when showUnreadOnly changes
+    useEffect(() => {
+      if (virtuosoRef.current) {
+        virtuosoRef.current.scrollToIndex({ index: 0, behavior: "smooth" });
+      }
+    }, [showUnreadOnly]);
+
+    const renderNotification = (index, notification) => {
+      const handleClick = () => {
+        if (!notification.read) {
+          onNotificationClick(notification.id);
+        }
+        navigate(`/manage/jobs/${notification.jobid}`);
+      };
+
+      return (
+        <div
+          key={`${notification.id}-${index}`}
+          className={`notification-item ${notification.read ? "notification-read" : "notification-unread"}`}
+          onClick={handleClick}
+        >
+          <Badge dot={!notification.read}>
+            <div className="notification-content">
+              <Title level={5} className="notification-title">
+                <span className="ro-number">
+                  {t("notifications.labels.ro-number", { ro_number: notification.roNumber || t("general.labels.na") })}
+                </span>
+                <Text type="secondary" className="relative-time" title={DateTimeFormat(notification.created_at)}>
+                  {day(notification.created_at).fromNow()}
+                </Text>
+              </Title>
+              <Text strong={!notification.read} className="notification-body">
+                <ul>
+                  {notification.scenarioText.map((text, idx) => (
+                    <li key={`${notification.id}-${idx}`}>{text}</li>
+                  ))}
+                </ul>
+              </Text>
+            </div>
+          </Badge>
+        </div>
+      );
+    };
+
+    return (
+      <div className={`notification-center ${visible ? "visible" : ""}`} ref={ref}>
+        <div className="notification-header">
+          <Space direction="horizontal">
+            <h3>{t("notifications.labels.notification-center")}</h3>
+            {loading && <Spin spinning={loading} size="small"></Spin>}
+          </Space>
+          <div className="notification-controls">
+            <Tooltip title={t("notifications.labels.show-unread-only")}>
+              <Space size={4} align="center" className="notification-toggle">
+                {showUnreadOnly ? (
+                  <EyeFilled className="notification-toggle-icon" />
+                ) : (
+                  <EyeOutlined className="notification-toggle-icon" />
+                )}
+                <Switch checked={showUnreadOnly} onChange={(checked) => toggleUnreadOnly(checked)} size="small" />
+              </Space>
+            </Tooltip>
+            <Tooltip title={t("notifications.labels.mark-all-read")}>
+              <Button
+                type="link"
+                icon={!unreadCount ? <CheckCircleFilled /> : <CheckCircleOutlined />}
+                onClick={markAllRead}
+                disabled={!unreadCount}
+              />
+            </Tooltip>
+          </div>
+        </div>
+        <Virtuoso
+          ref={virtuosoRef}
+          style={{ height: "400px", width: "100%" }}
+          data={notifications}
+          totalCount={notifications.length}
+          endReached={loadMore}
+          itemContent={renderNotification}
+        />
+      </div>
+    );
+  }
+);
+
+export default NotificationCenterComponent;

client/src/components/notification-center/notification-center.container.jsx

@@ -0,0 +1,202 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@apollo/client";
+import { connect } from "react-redux";
+import NotificationCenterComponent from "./notification-center.component";
+import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
+import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import day from "../../utils/day.js";
+
+// This will be used to poll for notifications when the socket is disconnected
+const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
+
+/**
+ * Notification Center Container
+ * @param visible
+ * @param onClose
+ * @param bodyshop
+ * @param unreadCount
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }) => {
+  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
+  const [notifications, setNotifications] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const { isConnected, markNotificationRead, markAllNotificationsRead } = useSocket();
+  const notificationRef = useRef(null);
+
+  const userAssociationId = bodyshop?.associations?.[0]?.id;
+
+  const baseWhereClause = useMemo(() => {
+    return { associationid: { _eq: userAssociationId } };
+  }, [userAssociationId]);
+
+  const whereClause = useMemo(() => {
+    return showUnreadOnly ? { ...baseWhereClause, read: { _is_null: true } } : baseWhereClause;
+  }, [baseWhereClause, showUnreadOnly]);
+
+  const {
+    data,
+    fetchMore,
+    loading: queryLoading,
+    refetch
+  } = useQuery(GET_NOTIFICATIONS, {
+    variables: {
+      limit: INITIAL_NOTIFICATIONS,
+      offset: 0,
+      where: whereClause
+    },
+    fetchPolicy: "cache-and-network",
+    notifyOnNetworkStatusChange: true,
+    pollInterval: isConnected ? 0 : day.duration(NOTIFICATION_POLL_INTERVAL_SECONDS, "seconds").asMilliseconds(),
+    skip: !userAssociationId,
+    onError: (err) => {
+      console.error(`Error polling Notifications: ${err?.message || ""}`);
+      setTimeout(() => refetch(), day.duration(2, "seconds").asMilliseconds());
+    }
+  });
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      // Prevent open + close behavior from the header
+      if (event.target.closest("#header-notifications")) return;
+      if (visible && notificationRef.current && !notificationRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [visible, onClose]);
+
+  useEffect(() => {
+    if (data?.notifications) {
+      const processedNotifications = data.notifications
+        .map((notif) => {
+          let scenarioText;
+          let scenarioMeta;
+          try {
+            scenarioText = notif.scenario_text ? JSON.parse(notif.scenario_text) : [];
+            scenarioMeta = notif.scenario_meta ? JSON.parse(notif.scenario_meta) : {};
+          } catch (e) {
+            console.error("Error parsing JSON for notification:", notif.id, e);
+            scenarioText = [notif.fcm_text || "Invalid notification data"];
+            scenarioMeta = {};
+          }
+          if (!Array.isArray(scenarioText)) scenarioText = [scenarioText];
+          const roNumber = notif.job.ro_number;
+          if (!Array.isArray(scenarioMeta)) scenarioMeta = [scenarioMeta];
+          return {
+            id: notif.id,
+            jobid: notif.jobid,
+            associationid: notif.associationid,
+            scenarioText,
+            scenarioMeta,
+            roNumber,
+            created_at: notif.created_at,
+            read: notif.read,
+            __typename: notif.__typename
+          };
+        })
+        .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+      setNotifications(processedNotifications);
+    }
+  }, [data]);
+
+  const loadMore = useCallback(() => {
+    if (!queryLoading && data?.notifications.length) {
+      setIsLoading(true); // Show spinner during fetchMore
+      fetchMore({
+        variables: { offset: data.notifications.length, where: whereClause },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return prev;
+          return {
+            notifications: [...prev.notifications, ...fetchMoreResult.notifications]
+          };
+        }
+      })
+        .catch((err) => {
+          console.error("Fetch more error:", err);
+        })
+        .finally(() => setIsLoading(false)); // Hide spinner when done
+    }
+  }, [data?.notifications?.length, fetchMore, queryLoading, whereClause]);
+
+  const handleToggleUnreadOnly = (value) => {
+    setShowUnreadOnly(value);
+  };
+
+  const handleMarkAllRead = useCallback(() => {
+    setIsLoading(true);
+    markAllNotificationsRead()
+      .then(() => {
+        const timestamp = new Date().toISOString();
+        setNotifications((prev) => {
+          const updatedNotifications = prev.map((notif) =>
+            notif.read === null && notif.associationid === userAssociationId
+              ? {
+                  ...notif,
+                  read: timestamp
+                }
+              : notif
+          );
+          // Filter out read notifications if in unread only mode
+          return showUnreadOnly ? updatedNotifications.filter((notif) => !notif.read) : updatedNotifications;
+        });
+      })
+      .catch((e) => console.error(`Error marking all notifications read: ${e?.message || ""}`))
+      .finally(() => setIsLoading(false));
+  }, [markAllNotificationsRead, userAssociationId, showUnreadOnly]);
+
+  const handleNotificationClick = useCallback(
+    (notificationId) => {
+      setIsLoading(true);
+      markNotificationRead({ variables: { id: notificationId } })
+        .then(() => {
+          const timestamp = new Date().toISOString();
+          setNotifications((prev) => {
+            const updatedNotifications = prev.map((notif) =>
+              notif.id === notificationId && !notif.read ? { ...notif, read: timestamp } : notif
+            );
+            // Filter out the read notification if in unread only mode
+            return showUnreadOnly ? updatedNotifications.filter((notif) => !notif.read) : updatedNotifications;
+          });
+        })
+        .catch((e) => console.error(`Error marking notification read: ${e?.message || ""}`))
+        .finally(() => setIsLoading(false));
+    },
+    [markNotificationRead, showUnreadOnly]
+  );
+
+  useEffect(() => {
+    if (visible && !isConnected) {
+      setIsLoading(true);
+      refetch()
+        .catch((err) => console.error(`Error re-fetching notifications: ${err?.message || ""}`))
+        .finally(() => setIsLoading(false));
+    }
+  }, [visible, isConnected, refetch]);
+
+  return (
+    <NotificationCenterComponent
+      ref={notificationRef}
+      visible={visible}
+      onClose={onClose}
+      notifications={notifications}
+      loading={isLoading}
+      showUnreadOnly={showUnreadOnly}
+      toggleUnreadOnly={handleToggleUnreadOnly}
+      markAllRead={handleMarkAllRead}
+      loadMore={loadMore}
+      onNotificationClick={handleNotificationClick}
+      unreadCount={unreadCount}
+    />
+  );
+};
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+export default connect(mapStateToProps, null)(NotificationCenterContainer);

client/src/components/notification-center/notification-center.styles.scss

@@ -0,0 +1,175 @@
+.notification-center {
+  position: absolute;
+  top: 64px;
+  right: 0;
+  width: 400px;
+  max-width: 400px;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.85);
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
+  z-index: 1000;
+  display: none;
+  overflow-x: hidden;
+
+  &.visible {
+    display: block;
+  }
+
+  .notification-header {
+    padding: 4px 16px;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #fafafa;
+
+    h3 {
+      margin: 0;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    .notification-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      // Styles for the eye icon and switch (custom classes)
+      .notification-toggle {
+        align-items: center; // Ensure vertical alignment
+      }
+
+      .notification-toggle-icon {
+        font-size: 14px;
+        color: #1677ff;
+        vertical-align: middle;
+      }
+
+      .ant-switch {
+        &.ant-switch-small {
+          min-width: 28px;
+          height: 16px;
+          line-height: 16px;
+
+          .ant-switch-handle {
+            width: 12px;
+            height: 12px;
+          }
+
+          &.ant-switch-checked {
+            background-color: #1677ff;
+            .ant-switch-handle {
+              left: calc(100% - 14px);
+            }
+          }
+        }
+      }
+
+      // Styles for the "Mark All Read" button (restore original link button style)
+      .ant-btn-link {
+        padding: 0;
+        color: #1677ff;
+
+        &:hover {
+          color: #69b1ff;
+        }
+
+        &:disabled {
+          color: rgba(0, 0, 0, 0.25);
+          cursor: not-allowed;
+        }
+
+        &.active {
+          color: #0958d9;
+        }
+      }
+    }
+  }
+
+  .notification-read {
+    background: #fff;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  .notification-unread {
+    background: #f5f5f5;
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  .notification-item {
+    padding: 12px 16px;
+    border-bottom: 1px solid #f0f0f0;
+    display: block;
+    overflow: visible;
+    width: 100%;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    &:hover {
+      background: #fafafa;
+    }
+
+    .notification-content {
+      width: 100%;
+    }
+
+    .notification-title {
+      margin: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+
+      .ro-number {
+        margin: 0;
+        color: #1677ff;
+        flex-shrink: 0;
+        white-space: nowrap;
+      }
+
+      .relative-time {
+        margin: 0;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.45);
+        white-space: nowrap;
+        flex-shrink: 0;
+        margin-left: auto;
+      }
+    }
+
+    .notification-body {
+      margin-top: 4px;
+
+      .ant-typography {
+        color: inherit;
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        margin-bottom: 2px;
+      }
+    }
+  }
+
+  .ant-badge {
+    width: 100%;
+  }
+
+  .ant-alert {
+    margin: 8px;
+    background: #fff1f0;
+    color: rgba(0, 0, 0, 0.85);
+    border: 1px solid #ffa39e;
+
+    .ant-alert-message {
+      color: #ff4d4f;
+    }
+  }
+}

client/src/components/notification-settings/column-header-checkbox.component.jsx

@@ -0,0 +1,56 @@
+import { notificationScenarios } from "../../utils/jobNotificationScenarios.js";
+import { Checkbox, Form } from "antd";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+
+/**
+ * ColumnHeaderCheckbox
+ * @param channel
+ * @param form
+ * @param disabled
+ * @param onHeaderChange
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const ColumnHeaderCheckbox = ({ channel, form, disabled = false, onHeaderChange }) => {
+  const { t } = useTranslation();
+
+  // Subscribe to all form values so that this component re-renders on changes.
+  const formValues = Form.useWatch([], form) || {};
+
+  // Determine if all scenarios for this channel are checked.
+  const allChecked =
+    notificationScenarios.length > 0 && notificationScenarios.every((scenario) => formValues[scenario]?.[channel]);
+
+  const onChange = (e) => {
+    const checked = e.target.checked;
+    // Get current form values.
+    const currentValues = form.getFieldsValue();
+    // Update each scenario for this channel.
+    const newValues = { ...currentValues };
+    notificationScenarios.forEach((scenario) => {
+      newValues[scenario] = { ...newValues[scenario], [channel]: checked };
+    });
+    // Update form values.
+    form.setFieldsValue(newValues);
+    // Manually mark the form as dirty.
+    if (onHeaderChange) {
+      onHeaderChange();
+    }
+  };
+
+  return (
+    <Checkbox onChange={onChange} checked={allChecked} disabled={disabled}>
+      {t(`notifications.channels.${channel}`)}
+    </Checkbox>
+  );
+};
+
+ColumnHeaderCheckbox.propTypes = {
+  channel: PropTypes.oneOf(["app", "email", "fcm"]).isRequired,
+  form: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  onHeaderChange: PropTypes.func
+};
+
+export default ColumnHeaderCheckbox;

client/src/components/notification-settings/notification-settings-form.component.jsx

@@ -0,0 +1,168 @@
+import { useMutation, useQuery } from "@apollo/client";
+import { useEffect, useState } from "react";
+import { Button, Card, Checkbox, Form, Space, Table } from "antd";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import { QUERY_NOTIFICATION_SETTINGS, UPDATE_NOTIFICATION_SETTINGS } from "../../graphql/user.queries.js";
+import { notificationScenarios } from "../../utils/jobNotificationScenarios.js";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
+import PropTypes from "prop-types";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import ColumnHeaderCheckbox from "../notification-settings/column-header-checkbox.component.jsx";
+
+/**
+ * Notifications Settings Form
+ * @param currentUser
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NotificationSettingsForm = ({ currentUser }) => {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const [initialValues, setInitialValues] = useState({});
+  const [isDirty, setIsDirty] = useState(false);
+  const notification = useNotification();
+
+  // Fetch notification settings.
+  const { loading, error, data } = useQuery(QUERY_NOTIFICATION_SETTINGS, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    variables: { email: currentUser.email },
+    skip: !currentUser
+  });
+
+  const [updateNotificationSettings, { loading: saving }] = useMutation(UPDATE_NOTIFICATION_SETTINGS);
+
+  // Populate form with fetched data.
+  useEffect(() => {
+    if (data?.associations?.length > 0) {
+      const settings = data.associations[0].notification_settings || {};
+      // Ensure each scenario has an object with { app, email, fcm }.
+      const formattedValues = notificationScenarios.reduce((acc, scenario) => {
+        acc[scenario] = settings[scenario] ?? { app: false, email: false, fcm: false };
+        return acc;
+      }, {});
+
+      setInitialValues(formattedValues);
+      form.setFieldsValue(formattedValues);
+      setIsDirty(false); // Reset dirty state when new data loads.
+    }
+  }, [data, form]);
+
+  const handleSave = async (values) => {
+    if (data?.associations?.length > 0) {
+      const userId = data.associations[0].id;
+      // Save the updated notification settings.
+      const result = await updateNotificationSettings({ variables: { id: userId, ns: values } });
+      if (!result?.errors) {
+        notification.success({ message: t("notifications.labels.notification-settings-success") });
+        setInitialValues(values);
+        setIsDirty(false);
+      } else {
+        notification.error({ message: t("notifications.labels.notification-settings-failure") });
+      }
+    }
+  };
+
+  // Mark the form as dirty on any manual change.
+  const handleFormChange = () => {
+    setIsDirty(true);
+  };
+
+  const handleReset = () => {
+    form.setFieldsValue(initialValues);
+    setIsDirty(false);
+  };
+
+  if (error) return <AlertComponent type="error" message={error.message} />;
+  if (loading) return <LoadingSpinner />;
+
+  const columns = [
+    {
+      title: t("notifications.labels.scenario"),
+      dataIndex: "scenarioLabel",
+      key: "scenario",
+      render: (_, record) => t(`notifications.scenarios.${record.key}`),
+      width: "90%"
+    },
+    {
+      title: <ColumnHeaderCheckbox channel="app" form={form} onHeaderChange={() => setIsDirty(true)} />,
+      dataIndex: "app",
+      key: "app",
+      align: "center",
+      render: (_, record) => (
+        <Form.Item name={[record.key, "app"]} valuePropName="checked" noStyle>
+          <Checkbox />
+        </Form.Item>
+      )
+    },
+    {
+      title: <ColumnHeaderCheckbox channel="email" form={form} onHeaderChange={() => setIsDirty(true)} />,
+      dataIndex: "email",
+      key: "email",
+      align: "center",
+      render: (_, record) => (
+        <Form.Item name={[record.key, "email"]} valuePropName="checked" noStyle>
+          <Checkbox />
+        </Form.Item>
+      )
+    }
+    // TODO: Disabled for now until FCM is implemented.
+    // {
+    //   title: <ColumnHeaderCheckbox channel="fcm" form={form} disabled onHeaderChange={() => setIsDirty(true)} />,
+    //   dataIndex: "fcm",
+    //   key: "fcm",
+    //   align: "center",
+    //   render: (_, record) => (
+    //     <Form.Item name={[record.key, "fcm"]} valuePropName="checked" noStyle>
+    //       <Checkbox disabled />
+    //     </Form.Item>
+    //   )
+    // }
+  ];
+
+  const dataSource = notificationScenarios.map((scenario) => ({ key: scenario }));
+
+  return (
+    <Form
+      form={form}
+      onFinish={handleSave}
+      onValuesChange={handleFormChange}
+      initialValues={initialValues}
+      autoComplete="off"
+      layout="vertical"
+    >
+      <Card
+        title={t("notifications.labels.notificationscenarios")}
+        extra={
+          <Space>
+            <Button type="default" onClick={handleReset} disabled={!isDirty}>
+              {t("general.actions.clear")}
+            </Button>
+
+            <Button type="primary" htmlType="submit" disabled={!isDirty} loading={saving}>
+              {t("notifications.labels.save")}
+            </Button>
+          </Space>
+        }
+      >
+        <Table dataSource={dataSource} columns={columns} pagination={false} bordered rowKey="key" />
+      </Card>
+    </Form>
+  );
+};
+
+NotificationSettingsForm.propTypes = {
+  currentUser: PropTypes.shape({
+    email: PropTypes.string.isRequired
+  }).isRequired
+};
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+export default connect(mapStateToProps)(NotificationSettingsForm);