feature/IO-3291-Tasks-Notifications: Package Bumps

IO-3294 fix upload to image proxy for bills.

bodyshop_translations.babel

@@ -12791,27 +12791,6 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
-                                    <concept_node>
-                                        <name>allow_text_message</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>checklist</name>
                                         <definition_loaded>false</definition_loaded>
@@ -42614,27 +42593,6 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
-                                    <concept_node>
-                                        <name>allow_text_message</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>name</name>
                                         <definition_loaded>false</definition_loaded>

client/package.json

@@ -13,18 +13,18 @@
     "@emotion/is-prop-valid": "^1.3.1",
     "@fingerprintjs/fingerprintjs": "^4.6.1",
     "@firebase/analytics": "^0.10.16",
-    "@firebase/app": "^0.13.0",
+    "@firebase/app": "^0.13.1",
     "@firebase/auth": "^1.10.6",
-    "@firebase/firestore": "^4.7.16",
+    "@firebase/firestore": "^4.7.17",
     "@firebase/messaging": "^0.12.21",
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.8.2",
-    "@sentry/cli": "^2.45.0",
-    "@sentry/react": "^9.22.0",
+    "@sentry/cli": "^2.47.1",
+    "@sentry/react": "^9.38.0",
     "@sentry/vite-plugin": "^3.5.0",
-    "@splitsoftware/splitio-react": "^2.1.1",
+    "@splitsoftware/splitio-react": "^2.3.1",
     "@tanem/react-nprogress": "^5.0.53",
-    "antd": "^5.25.3",
+    "antd": "^5.25.4",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^4.3.0",
     "autosize": "^6.0.1",
@@ -41,18 +41,18 @@
     "i18next": "^24.2.3",
     "i18next-browser-languagedetector": "^8.1.0",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.8",
+    "libphonenumber-js": "^1.12.10",
     "logrocket": "^9.0.2",
     "markerjs2": "^2.32.4",
     "memoize-one": "^6.0.0",
-    "normalize-url": "^8.0.1",
+    "normalize-url": "^8.0.2",
     "object-hash": "^3.0.0",
     "phone": "^3.1.59",
     "prop-types": "^15.8.1",
     "query-string": "^9.2.0",
     "raf-schd": "^4.0.3",
     "react": "^18.3.1",
-    "react-big-calendar": "^1.18.0",
+    "react-big-calendar": "^1.19.2",
     "react-color": "^2.19.3",
     "react-cookie": "^8.0.1",
     "react-dom": "^18.3.1",
@@ -70,7 +70,7 @@
     "react-resizable": "^3.0.5",
     "react-router-dom": "^6.30.0",
     "react-sticky": "^6.0.3",
-    "react-virtuoso": "^4.12.7",
+    "react-virtuoso": "^4.12.8",
     "recharts": "^2.15.2",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
@@ -78,7 +78,7 @@
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
-    "sass": "^1.89.0",
+    "sass": "^1.89.1",
     "socket.io-client": "^4.8.1",
     "styled-components": "^6.1.18",
     "subscriptions-transport-ws": "^0.11.0",
@@ -131,17 +131,17 @@
     "@ant-design/icons": "^6.0.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.27.1",
-    "@dotenvx/dotenvx": "^1.44.1",
+    "@dotenvx/dotenvx": "^1.47.5",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.27.0",
-    "@playwright/test": "^1.51.1",
+    "@eslint/js": "^9.31.0",
+    "@playwright/test": "^1.54.1",
     "@sentry/webpack-plugin": "^3.5.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "@vitejs/plugin-react": "^4.5.0",
-    "browserslist": "^4.24.5",
+    "@vitejs/plugin-react": "^4.5.1",
+    "browserslist": "^4.25.0",
     "browserslist-to-esbuild": "^2.1.1",
     "chalk": "^5.4.1",
     "eslint": "^8.57.1",
@@ -151,7 +151,7 @@
     "jsdom": "^26.0.0",
     "memfs": "^4.17.2",
     "os-browserify": "^0.3.0",
-    "playwright": "^1.51.1",
+    "playwright": "^1.54.1",
     "react-error-overlay": "^6.1.0",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
@@ -161,7 +161,7 @@
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-pwa": "^1.0.0",
     "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^3.1.4",
+    "vitest": "^3.2.3",
     "workbox-window": "^7.3.0"
   }
 }

client/src/components/bill-enter-modal/bill-enter-modal.container.jsx

@@ -2,10 +2,11 @@ import { useApolloClient, useMutation } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, 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 { INSERT_NEW_BILL } from "../../graphql/bills.queries";
 import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
@@ -24,7 +25,7 @@ import BillFormContainer from "../bill-form/bill-form.container";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { handleUpload as handleUploadToImageProxy } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -53,10 +54,10 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   const notification = useNotification();
 
   const {
-    treatments: { Enhanced_Payroll }
+    treatments: { Enhanced_Payroll, Imgproxy }
   } = useSplitTreatments({
     attributes: {},
-    names: ["Enhanced_Payroll"],
+    names: ["Enhanced_Payroll", "Imgproxy"],
     splitKey: bodyshop.imexshopid
   });
 
@@ -196,7 +197,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
           job: { lbr_adjustments: newAdjustments }
         }
       });
-      if (!!jobUpdate.errors) {
+      if (jobUpdate.errors) {
         notification["error"]({
           message: t("jobs.errors.saving", {
             message: JSON.stringify(jobUpdate.errors)
@@ -213,7 +214,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         variables: { partsLineIds: markPolReceived.map((p) => p.id) },
         refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"]
       });
-      if (!!r2.errors) {
+      if (r2.errors) {
         setLoading(false);
         setEnterAgain(false);
         notification["error"]({
@@ -224,7 +225,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
       }
     }
 
-    if (!!r1.errors) {
+    if (r1.errors) {
       setLoading(false);
       setEnterAgain(false);
       notification["error"]({
@@ -244,7 +245,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
           consumedbybillid: billId
         }
       });
-      if (!!r2.errors) {
+      if (r2.errors) {
         setLoading(false);
         setEnterAgain(false);
         notification["error"]({
@@ -298,20 +299,39 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
           });
         });
       } else {
-        upload.forEach((u) => {
-          handleUpload(
-            { file: u.originFileObj },
-            {
-              bodyshop: bodyshop,
-              uploaded_by: currentUser.email,
-              jobId: values.jobid,
-              billId: billId,
-              tagsArray: null,
-              callback: null
-            },
-            notification
-          );
-        });
+        //Check if using Imgproxy or cloudinary
+
+        if (Imgproxy.treatment === "on") {
+          upload.forEach((u) => {
+            handleUploadToImageProxy(
+              { file: u.originFileObj },
+              {
+                bodyshop: bodyshop,
+                uploaded_by: currentUser.email,
+                jobId: values.jobid,
+                billId: billId,
+                tagsArray: null,
+                callback: null
+              },
+              notification
+            );
+          });
+        } else {
+          upload.forEach((u) => {
+            handleUpload(
+              { file: u.originFileObj },
+              {
+                bodyshop: bodyshop,
+                uploaded_by: currentUser.email,
+                jobId: values.jobid,
+                billId: billId,
+                tagsArray: null,
+                callback: null
+              },
+              notification
+            );
+          });
+        }
       }
     }
     ///////////////////////////
@@ -396,7 +416,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
             {t("bills.labels.generatepartslabel")}
           </Checkbox>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button loading={loading} onClick={() => form.submit()}>
+          <Button loading={loading} onClick={() => form.submit()} id="save-bill-enter-modal">
             {t("general.actions.save")}
           </Button>
           {billEnterModal.context && billEnterModal.context.id ? null : (
@@ -406,6 +426,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
               onClick={() => {
                 setEnterAgain(true);
               }}
+              id="save-and-new-bill-enter-modal"
             >
               {t("general.actions.saveandnew")}
             </Button>

client/src/components/bill-line-search-select/bill-line-search-select.component.jsx

@@ -1,5 +1,5 @@
 import { Select } from "antd";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import InstanceRenderMgr from "../../utils/instanceRenderMgr";
 
@@ -43,7 +43,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
             item.oem_partno ? ` - ${item.oem_partno}` : ""
           }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(),
           label: (
-            <div style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>
+            <div style={{ whiteSpace: "normal", wordBreak: "break-word" }}>
               <span>
                 {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
                   item.oem_partno ? ` - ${item.oem_partno}` : ""

client/src/components/bills-list-table/bills-list-table.component.jsx

@@ -1,6 +1,6 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Input, Space, Table } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
@@ -209,6 +209,7 @@ export function BillsListTableComponent({
                     }
                   });
                 }}
+                id="reconcile-bills-button"
               >
                 <LockerWrapperComponent featureName="bills"> {t("jobs.actions.reconcile")}</LockerWrapperComponent>
               </Button>

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

@@ -1,4 +1,4 @@
-import { Badge, Card, List, Space, Tag } from "antd";
+import { Badge, Card, List, Space, Tag, Tooltip } from "antd";
 import { useEffect, useMemo, useState } from "react";
 import { connect } from "react-redux";
 import { Virtuoso } from "react-virtuoso";
@@ -9,6 +9,7 @@ import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import _ from "lodash";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
 import "./chat-conversation-list.styles.scss";
 import { useQuery } from "@apollo/client";
 import { GET_PHONE_NUMBER_OPT_OUTS } from "../../graphql/phone-number-opt-out.queries.js";
@@ -88,7 +89,13 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
     const cardExtra = (
       <>
         <Badge count={item.messages_aggregate.aggregate.count} />
-        {hasOptOutEntry && <Tag color="red">{t("messaging.labels.no_consent")}</Tag>}
+        {hasOptOutEntry && (
+          <Tooltip title={t("consent.text_body")}>
+            <Tag color="red" icon={<ExclamationCircleOutlined />}>
+              {t("messaging.labels.no_consent")}
+            </Tag>
+          </Tooltip>
+        )}
       </>
     );
 

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

@@ -58,6 +58,7 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
               userid
               created_at
               read
+              is_system
             }
           `,
           data: message

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

@@ -13,13 +13,14 @@ import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-document
 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";
+import "./chat-media-selector.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+
+const mapDispatchToProps = (dispatch) => ({});
+
 export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);
 
 export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, conversation }) {
@@ -37,9 +38,8 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
     variables: {
-      jobId: conversation.job_conversations[0] && conversation.job_conversations[0]?.jobid
+      jobId: conversation.job_conversations[0]?.jobid
     },
-
     skip: !open || !conversation.job_conversations || conversation.job_conversations.length === 0
   });
 
@@ -56,11 +56,11 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
   //If Imageproxy is on, rely only on the LMS selector
   //If not on, use the old methods.
   const content = (
-    <div>
+    <div className="media-selector-content">
       {loading && <LoadingSpinner />}
       {error && <AlertComponent message={error.message} type="error" />}
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
-        <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
+        <div className="error-message">{t("messaging.labels.maxtenimages")}</div>
       ) : null}
 
       {Imgproxy.treatment === "on" ? (
@@ -74,7 +74,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
           {bodyshop.uselocalmediaserver && open && (
             <JobDocumentsLocalGalleryExternal
               externalMediaState={[selectedMedia, setSelectedMedia]}
-              jobId={conversation.job_conversations[0] && conversation.job_conversations[0]?.jobid}
+              jobId={conversation.job_conversations[0]?.jobid}
             />
           )}
         </>
@@ -89,7 +89,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
           {bodyshop.uselocalmediaserver && open && (
             <JobDocumentsLocalGalleryExternal
               externalMediaState={[selectedMedia, setSelectedMedia]}
-              jobId={conversation.job_conversations[0] && conversation.job_conversations[0]?.jobid}
+              jobId={conversation.job_conversations[0]?.jobid}
             />
           )}
         </>
@@ -100,12 +100,17 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
   return (
     <Popover
       content={
-        conversation.job_conversations.length === 0 ? <div>{t("messaging.errors.noattachedjobs")}</div> : content
+        conversation.job_conversations.length === 0 ? (
+          <div className="no-jobs-message">{t("messaging.errors.noattachedjobs")}</div>
+        ) : (
+          content
+        )
       }
       title={t("messaging.labels.selectmedia")}
       trigger="click"
       open={open}
       onOpenChange={handleVisibleChange}
+      classNames={{ root: "media-selector-popover" }}
     >
       <Badge count={selectedMedia.filter((s) => s.isSelected).length}>
         <PictureFilled style={{ margin: "0 .5rem" }} />

client/src/components/chat-media-selector/chat-media-selector.styles.scss

@@ -0,0 +1,48 @@
+.media-selector-popover {
+  .ant-popover-inner-content {
+    position: relative;
+    max-width: 640px;
+    max-height: 480px;
+    overflow-y: auto;
+    padding: 8px;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+}
+
+.media-selector-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.error-message {
+  color: red;
+  font-size: 12px;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.no-jobs-message {
+  font-size: 14px;
+  color: #888;
+  text-align: center;
+  padding: 8px;
+}
+
+/* Style images within gallery components */
+.media-selector-content img {
+
+  object-fit: cover;
+  border-radius: 4px;
+  margin: 4px;
+  cursor: pointer;
+}
+
+/* Grid layout for gallery components */
+.media-selector-content .ant-image, /* Assuming gallery components use Ant Design's Image */
+.media-selector-content .gallery-container { /* Fallback for custom gallery classes */
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 4px;
+}

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -4,13 +4,16 @@
   height: 100%;
   width: 100%;
 }
+
 .archive-button {
   height: 20px;
   border-radius: 4px;
 }
+
 .chat-title {
   margin-bottom: 5px;
 }
+
 .messages {
   display: flex;
   flex-direction: column;
@@ -37,11 +40,13 @@
     gap: 8px;
   }
 }
-.chat-send-message-button{
+
+.chat-send-message-button {
   margin: 0.3rem;
   padding-left: 0.5rem;
-  
+
 }
+
 .message-icon {
   position: absolute;
   bottom: 0.1rem;
@@ -125,6 +130,37 @@
   }
 }
 
+.system {
+  align-items: center;
+  margin: 0.5rem 10%;
+
+  .message {
+    background-color: #f5f5f5;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+    text-align: center;
+    font-style: italic;
+    color: #555;
+    width: fit-content;
+    max-width: 80%;
+  }
+
+  .system-label {
+    font-size: 0.75rem;
+    color: #888;
+    margin-bottom: 0.2rem;
+    display: block;
+  }
+
+  .system-date {
+    font-size: 0.75rem;
+    color: #888;
+    margin-top: 0.2rem;
+    text-align: center;
+  }
+}
+
+
 .virtuoso-container {
   flex: 1;
   overflow: auto;

client/src/components/chat-messages-list/renderMessage.jsx

@@ -7,12 +7,24 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 
 export const renderMessage = (messages, index) => {
   const message = messages[index];
+  const isSystem = message.is_system;
+
+  // Determine message class
+  const messageClass = isSystem ? "system messages" : message.isoutbound ? "mine messages" : "yours messages";
+
+  // Tooltip content based on message type
+  const tooltipTitle = isSystem ? (
+    i18n.t("consent.text_body")
+  ) : (
+    <DateTimeFormatter>{message.created_at}</DateTimeFormatter>
+  );
 
   return (
-    <div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
+    <div key={index} className={messageClass}>
       <div className="message msgmargin">
-        <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
+        <Tooltip title={tooltipTitle}>
           <div>
+            {isSystem && <span className="system-label">System</span>}
             {/* Render images if available */}
             {message.image && message.image_path?.length > 0 && (
               <div className="message-images">
@@ -26,23 +38,31 @@ export const renderMessage = (messages, index) => {
               </div>
             )}
             {/* Render text if available */}
-            {message.text && <div>{message.text}</div>}
+            {message.text && <div className="message-text">{message.text}</div>}
+            {/* Render date for system messages */}
+            {isSystem && (
+              <div className="system-date">
+                <DateTimeFormatter>{message.created_at}</DateTimeFormatter>
+              </div>
+            )}
           </div>
         </Tooltip>
 
-        {/* Message status icons */}
-        {message.status &&
+        {/* Message status icons for non-system messages */}
+        {!isSystem &&
+          message.status &&
           (message.status === "sent" || message.status === "delivered" || message.status === "failed") && (
             <div className="message-status">
               <Icon
                 component={message.status === "sent" ? MdDone : message.status === "delivered" ? MdDoneAll : MdClose}
                 className="message-icon"
+                style={message.status === "failed" ? { color: "#ff0000" } : undefined}
               />
             </div>
           )}
       </div>
-      {/* Outbound message metadata */}
-      {message.isoutbound && (
+      {/* Outbound message metadata for non-system messages */}
+      {!isSystem && message.isoutbound && (
         <div style={{ fontSize: 10 }}>
           {i18n.t("messaging.labels.sentby", {
             by: message.userid,

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -1,5 +1,5 @@
-import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
-import { Alert, Input, Space, Spin } from "antd";
+import { ExclamationCircleOutlined, LoadingOutlined, SendOutlined } from "@ant-design/icons";
+import { Alert, Input, Space, Spin, Tooltip } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -69,7 +69,16 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
 
   return (
     <Space direction="vertical" style={{ width: "100%" }} size="middle">
-      {isOptedOut && <Alert message={t("messaging.errors.no_consent")} type="error" />}
+      {isOptedOut && (
+        <Tooltip title={t("consent.text_body")}>
+          <Alert
+            showIcon={true}
+            icon={<ExclamationCircleOutlined />}
+            message={t("messaging.errors.no_consent")}
+            type="error"
+          />
+        </Tooltip>
+      )}
       <div className="imex-flex-row" style={{ width: "100%" }}>
         {!isOptedOut && (
           <>

client/src/components/contract-status-select/contract-status-select.component.jsx

@@ -1,10 +1,10 @@
-import React, { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";
 
 const { Option } = Select;
 
-const ContractStatusComponent = ({ value, onChange }, ref) => {
+const ContractStatusComponent = ({ value, onChange }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
 

client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx

@@ -1,5 +1,5 @@
 import { Slider } from "antd";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 
 const CourtesyCarFuelComponent = (props, ref) => {

client/src/components/header/buildAccountingChildren.jsx

@@ -0,0 +1,190 @@
+import { Link } from "react-router-dom";
+import { FaCreditCard, FaFileInvoiceDollar } from "react-icons/fa";
+import { GiPayMoney, GiPlayerTime } from "react-icons/gi";
+import { BankFilled, ExportOutlined, FieldTimeOutlined } from "@ant-design/icons";
+import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx";
+import { HasFeatureAccess } from "../../components/feature-wrapper/feature-wrapper.component";
+
+// --- Menu Item Builders ---
+const buildAccountingChildren = ({
+  t,
+  bodyshop,
+  currentUser,
+  setBillEnterContext,
+  setPaymentContext,
+  setCardPaymentContext,
+  setTimeTicketContext,
+  ImEXPay,
+  DmsAp,
+  Simple_Inventory
+}) => [
+  {
+    key: "bills",
+    id: "header-accounting-bills",
+    icon: <FaFileInvoiceDollar />,
+    label: (
+      <Link to="/manage/bills">
+        <LockWrapper featureName="bills" bodyshop={bodyshop}>
+          {t("menus.header.bills")}
+        </LockWrapper>
+      </Link>
+    )
+  },
+  {
+    key: "enterbills",
+    id: "header-accounting-enterbills",
+    icon: <GiPayMoney />,
+    label: (
+      <LockWrapper featureName="bills" bodyshop={bodyshop}>
+        {t("menus.header.enterbills")}
+      </LockWrapper>
+    ),
+    onClick: () =>
+      HasFeatureAccess({ featureName: "bills", bodyshop }) && 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">{t("menus.header.allpayments")}</Link>
+  },
+  {
+    key: "enterpayments",
+    id: "header-accounting-enterpayments",
+    icon: <FaCreditCard />,
+    label: t("menus.header.enterpayment"),
+    onClick: () => setPaymentContext({ actions: {}, 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",
+    icon: <FieldTimeOutlined />,
+    label: (
+      <Link to="/manage/timetickets">
+        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+          {t("menus.header.timetickets")}
+        </LockWrapper>
+      </Link>
+    )
+  },
+  ...(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",
+    id: "header-accounting-entertimetickets",
+    icon: <GiPlayerTime />,
+    label: (
+      <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+        {t("menus.header.entertimeticket")}
+      </LockWrapper>
+    ),
+    onClick: () =>
+      HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
+      setTimeTicketContext({
+        actions: {},
+        context: {
+          created_by: currentUser.displayName ? `${currentUser.email} | ${currentUser.displayName}` : currentUser.email
+        }
+      })
+  },
+  { type: "divider" },
+  {
+    key: "accountingexport",
+    id: "header-accounting-export",
+    icon: <ExportOutlined />,
+    label: (
+      <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>
+        )
+      }
+    ]
+  }
+];
+
+export default buildAccountingChildren;

client/src/components/header/buildLeftMenuItems.jsx

@@ -0,0 +1,390 @@
+import { Link } from "react-router-dom";
+import {
+  BarChartOutlined,
+  CarFilled,
+  CheckCircleOutlined,
+  ClockCircleFilled,
+  DashboardFilled,
+  DollarCircleFilled,
+  FileAddFilled,
+  FileAddOutlined,
+  FileFilled,
+  HomeFilled,
+  ImportOutlined,
+  LineChartOutlined,
+  OneToOneOutlined,
+  PaperClipOutlined,
+  PhoneOutlined,
+  PlusCircleOutlined,
+  QuestionCircleFilled,
+  ScheduleOutlined,
+  SettingOutlined,
+  TeamOutlined,
+  ToolFilled,
+  UnorderedListOutlined,
+  UsergroupAddOutlined,
+  UserOutlined
+} from "@ant-design/icons";
+import { FaCalendarAlt, FaCarCrash, FaTasks } from "react-icons/fa";
+import { BsKanban } from "react-icons/bs";
+import { FiLogOut } from "react-icons/fi";
+import { GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
+import { RiSurveyLine } from "react-icons/ri";
+import { IoBusinessOutline } from "react-icons/io5";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx";
+
+const buildLeftMenuItems = ({
+  t,
+  bodyshop,
+  recentItems,
+  setTaskUpsertContext,
+  setReportCenterContext,
+  signOutStart,
+  accountingChildren
+}) => {
+  return [
+    {
+      key: "home",
+      id: "header-home",
+      icon: <HomeFilled />,
+      label: <Link to="/manage/">{t("menus.header.home")}</Link>
+    },
+    {
+      key: "schedule",
+      id: "header-schedule",
+      icon: <FaCalendarAlt />,
+      label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
+    },
+    {
+      key: "jobssubmenu",
+      id: "header-jobs",
+      icon: <FaCarCrash />,
+      label: t("menus.header.jobs"),
+      children: [
+        {
+          key: "activejobs",
+          id: "header-active-jobs",
+          icon: <FileFilled />,
+          label: <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
+        },
+        {
+          key: "readyjobs",
+          id: "header-ready-jobs",
+          icon: <CheckCircleOutlined />,
+          label: <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
+        },
+        {
+          key: "parts-queue",
+          id: "header-parts-queue",
+          icon: <ToolFilled />,
+          label: <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
+        },
+        {
+          key: "availablejobs",
+          id: "header-jobs-available",
+          icon: <ImportOutlined />,
+          label: <Link to="/manage/available">{t("menus.header.availablejobs")}</Link>
+        },
+        {
+          key: "newjob",
+          id: "header-new-job",
+          icon: <FileAddOutlined />,
+          label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
+        },
+        { type: "divider" },
+        {
+          key: "alljobs",
+          id: "header-all-jobs",
+          icon: <UnorderedListOutlined />,
+          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
+        },
+        { 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: <BsKanban />,
+          label: (
+            <Link to="/manage/production/board">
+              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
+                {t("menus.header.productionboard")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        { type: "divider" },
+        {
+          key: "scoreboard",
+          id: "header-scoreboard",
+          icon: <LineChartOutlined />,
+          label: (
+            <Link to="/manage/scoreboard">
+              <LockWrapper featureName="scoreboard" bodyshop={bodyshop}>
+                {t("menus.header.scoreboard")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },
+    {
+      key: "customers",
+      id: "header-customers",
+      icon: <UserOutlined />,
+      label: t("menus.header.customers"),
+      children: [
+        {
+          key: "owners",
+          id: "header-owners",
+          icon: <TeamOutlined />,
+          label: <Link to="/manage/owners">{t("menus.header.owners")}</Link>
+        },
+        {
+          key: "vehicles",
+          id: "header-vehicles",
+          icon: <CarFilled />,
+          label: <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
+        }
+      ]
+    },
+    {
+      key: "ccs",
+      id: "header-css",
+      icon: <CarFilled />,
+      label: (
+        <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+          {t("menus.header.courtesycars")}
+        </LockWrapper>
+      ),
+      children: [
+        {
+          key: "courtesycarsall",
+          id: "header-courtesycars-all",
+          icon: <CarFilled />,
+          label: (
+            <Link to="/manage/courtesycars">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-all")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "contracts",
+          id: "header-contracts",
+          icon: <FileFilled />,
+          label: (
+            <Link to="/manage/courtesycars/contracts">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-contracts")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "newcontract",
+          id: "header-newcontract",
+          icon: <FileAddFilled />,
+          label: (
+            <Link to="/manage/courtesycars/contracts/new">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-newcontract")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },
+    ...(accountingChildren.length > 0
+      ? [
+          {
+            key: "accounting",
+            id: "header-accounting",
+            icon: <DollarCircleFilled />,
+            label: t("menus.header.accounting"),
+            children: accountingChildren
+          }
+        ]
+      : []),
+    {
+      key: "phonebook",
+      id: "header-phonebook",
+      icon: <PhoneOutlined />,
+      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
+    },
+    {
+      key: "temporarydocs",
+      id: "header-temporarydocs",
+      icon: <PaperClipOutlined />,
+      label: (
+        <Link to="/manage/temporarydocs">
+          <LockWrapper featureName="media" bodyshop={bodyshop}>
+            {t("menus.header.temporarydocs")}
+          </LockWrapper>
+        </Link>
+      )
+    },
+    {
+      key: "tasks",
+      id: "tasks",
+      icon: <FaTasks />,
+      label: t("menus.header.tasks"),
+      children: [
+        {
+          key: "createTask",
+          id: "header-create-task",
+          icon: <PlusCircleOutlined />,
+          label: t("menus.header.create_task"),
+          onClick: () => setTaskUpsertContext({ actions: {}, context: {} })
+        },
+        {
+          key: "mytasks",
+          id: "header-my-tasks",
+          icon: <FaTasks />,
+          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
+        },
+        {
+          key: "all_tasks",
+          id: "header-all-tasks",
+          icon: <FaTasks />,
+          label: <Link to="/manage/tasks/alltasks">{t("menus.header.all_tasks")}</Link>
+        }
+      ]
+    },
+    {
+      key: "shopsubmenu",
+      id: "header-shopsubmenu",
+      icon: <SettingOutlined />,
+      label: t("menus.header.shop"),
+      children: [
+        {
+          key: "shop",
+          id: "header-shop",
+          icon: <GiSettingsKnobs />,
+          label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
+        },
+        {
+          key: "dashboard",
+          id: "header-dashboard",
+          icon: <DashboardFilled />,
+          label: (
+            <Link to="/manage/dashboard">
+              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "reportcenter",
+          id: "header-reportcenter",
+          icon: <BarChartOutlined />,
+          label: t("menus.header.reportcenter"),
+          onClick: () => setReportCenterContext({ actions: {}, context: {} })
+        },
+        {
+          key: "shop-vendors",
+          id: "header-shop-vendors",
+          icon: <IoBusinessOutline />,
+          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
+        },
+        {
+          key: "shop-csi",
+          id: "header-shop-csi",
+          icon: <RiSurveyLine />,
+          label: (
+            <Link to="/manage/shop/csi">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.shop_csi")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },
+    {
+      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",
+      id: "header-user",
+      icon: <UserOutlined />,
+      label: t("menus.currentuser.profile"),
+      children: [
+        {
+          key: "signout",
+          id: "header-signout",
+          icon: <FiLogOut />,
+          danger: true,
+          label: t("user.actions.signout"),
+          onClick: () => signOutStart()
+        },
+        {
+          key: "help",
+          id: "header-help",
+          icon: <QuestionCircleFilled />,
+          label: t("menus.header.help"),
+          onClick: () => window.open("https://help.imex.online/", "_blank")
+        },
+        {
+          key: "remoteassist",
+          id: "header-remote-assist",
+          icon: <OneToOneOutlined />,
+          label: t("menus.header.remoteassist"),
+          children: [
+            ...(InstanceRenderManager({ imex: true, rome: false })
+              ? [
+                  {
+                    key: "rescue",
+                    id: "header-rescue",
+                    icon: <PlusCircleOutlined />,
+                    label: t("menus.header.rescueme"),
+                    onClick: () => window.open("https://imexrescue.com/", "_blank")
+                  }
+                ]
+              : []),
+            {
+              key: "rescue-zoho",
+              id: "header-rescue-zoho",
+              icon: <UsergroupAddOutlined />,
+              label: t("menus.header.rescuemezoho"),
+              onClick: () => window.open("https://join.zoho.com/", "_blank")
+            }
+          ]
+        },
+        {
+          key: "shiftclock",
+          id: "header-shiftclock",
+          icon: <GiPlayerTime />,
+          label: (
+            <Link to="/manage/shiftclock">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.shiftclock")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "profile",
+          id: "header-profile",
+          icon: <UserOutlined />,
+          label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
+        }
+      ]
+    }
+  ];
+};
+
+export default buildLeftMenuItems;

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

@@ -1,61 +1,29 @@
-import {
-  BankFilled,
-  BarChartOutlined,
-  BellFilled,
-  CarFilled,
-  CheckCircleOutlined,
-  ClockCircleFilled,
-  DashboardFilled,
-  DollarCircleFilled,
-  ExportOutlined,
-  FieldTimeOutlined,
-  FileAddFilled,
-  FileAddOutlined,
-  FileFilled,
-  HomeFilled,
-  ImportOutlined,
-  LineChartOutlined,
-  OneToOneOutlined,
-  PaperClipOutlined,
-  PhoneOutlined,
-  PlusCircleOutlined,
-  QuestionCircleFilled,
-  ScheduleOutlined,
-  SettingOutlined,
-  TeamOutlined,
-  ToolFilled,
-  UnorderedListOutlined,
-  UsergroupAddOutlined,
-  UserOutlined
-} from "@ant-design/icons";
+// noinspection RegExpAnonymousGroup
+
+import { BellFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Badge, Layout, Menu, Spin } from "antd";
-import { useEffect, useRef, useState } from "react";
+import { Badge, Layout, Menu, Spin, Tooltip } from "antd";
+import { useCallback, useEffect, useMemo, 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";
-import { FiLogOut } from "react-icons/fi";
-import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
-import { IoBusinessOutline } from "react-icons/io5";
-import { RiSurveyLine } from "react-icons/ri";
+import { FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import { TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
+import { QUERY_MY_TASKS_COUNT } from "../../graphql/tasks.queries.js";
 import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
 import { 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 { useIsEmployee } from "../../utils/useIsEmployee.js";
-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";
+import TaskCenterContainer from "../task-center/task-center.container.jsx";
+import buildAccountingChildren from "./buildAccountingChildren.jsx";
+import buildLeftMenuItems from "./buildLeftMenuItems.jsx";
 
-// Redux mappings
+// --- Redux mappings ---
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   recentItems: selectRecentItems,
@@ -73,36 +41,8 @@ const mapDispatchToProps = (dispatch) => ({
   setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
-function Header({
-  handleMenuClick,
-  currentUser,
-  bodyshop,
-  selectedHeader,
-  signOutStart,
-  setBillEnterContext,
-  setTimeTicketContext,
-  setPaymentContext,
-  setReportCenterContext,
-  recentItems,
-  setCardPaymentContext,
-  setTaskUpsertContext
-}) {
-  const {
-    treatments: { ImEXPay, DmsAp, Simple_Inventory }
-  } = useSplitTreatments({
-    attributes: {},
-    names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
-    splitKey: bodyshop && bodyshop.imexshopid
-  });
-
-  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 isEmployee = useIsEmployee(bodyshop, currentUser);
-
+// --- Utility Hooks ---
+function useUnreadNotifications(userAssociationId, isConnected, scenarioNotificationsOn) {
   const {
     data: unreadData,
     refetch: refetchUnread,
@@ -128,633 +68,286 @@ function Header({
     }
   }, [isConnected, unreadLoading, refetchUnread, userAssociationId]);
 
-  // Keep The unread count in the title.
+  return { unreadCount, unreadLoading };
+}
+
+function useIncompleteTaskCount(assignedToId, bodyshopId, isEmployee, isConnected) {
+  const { data: taskCountData, loading: taskCountLoading } = useQuery(QUERY_MY_TASKS_COUNT, {
+    variables: { assigned_to: assignedToId, bodyshopid: bodyshopId },
+    skip: !assignedToId || !bodyshopId || !isEmployee,
+    fetchPolicy: "network-only",
+    pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL
+  });
+
+  const incompleteTaskCount = taskCountData?.tasks_aggregate?.aggregate?.count ?? 0;
+  return { incompleteTaskCount, taskCountLoading };
+}
+
+// --- Main Component ---
+function Header(props) {
+  const {
+    handleMenuClick,
+    currentUser,
+    bodyshop,
+    selectedHeader,
+    signOutStart,
+    setBillEnterContext,
+    setTimeTicketContext,
+    setPaymentContext,
+    setReportCenterContext,
+    recentItems,
+    setCardPaymentContext,
+    setTaskUpsertContext
+  } = props;
+
+  // Feature flags
+  const {
+    treatments: { ImEXPay, DmsAp, Simple_Inventory }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
+
+  // Contexts and hooks
+  const { t } = useTranslation();
+  const { isConnected, scenarioNotificationsOn } = useSocket();
+  const [notificationVisible, setNotificationVisible] = useState(false);
+  const [taskCenterVisible, setTaskCenterVisible] = useState(false);
+  const baseTitleRef = useRef(document.title || "");
+  const lastSetTitleRef = useRef("");
+  const taskCenterRef = useRef(null);
+  const notificationRef = useRef(null);
+  const userAssociationId = bodyshop?.associations?.[0]?.id;
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
+
+  // Data hooks
+  const { unreadCount, unreadLoading } = useUnreadNotifications(
+    userAssociationId,
+    isConnected,
+    scenarioNotificationsOn
+  );
+  const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id;
+  const { incompleteTaskCount, taskCountLoading } = useIncompleteTaskCount(
+    assignedToId,
+    bodyshop?.id,
+    isEmployee,
+    isConnected
+  );
+
+  // --- Effects ---
+
+  // Update document title with unread count
   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
+        lastSetTitleRef.current = newTitle;
+      }
+    };
+    updateTitle();
+    const interval = setInterval(updateTitle, 100);
+    return () => {
+      clearInterval(interval);
+      document.title = baseTitleRef.current;
+    };
+  }, [unreadCount]);
+
+  // Handle outside clicks for popovers
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const isNotificationClick = event.target.closest("#header-notifications");
+      const isTaskCenterClick = event.target.closest("#header-taskcenter");
+
+      if (isNotificationClick && scenarioNotificationsOn) {
+        setTaskCenterVisible(false); // Close task center
+        return;
+      }
+
+      if (isTaskCenterClick) {
+        setNotificationVisible(scenarioNotificationsOn ? false : notificationVisible); // Close notification center if enabled
+        return;
+      }
+
+      if (taskCenterVisible && taskCenterRef.current && !taskCenterRef.current.contains(event.target)) {
+        setTaskCenterVisible(false);
+      }
+
+      if (
+        scenarioNotificationsOn &&
+        notificationVisible &&
+        notificationRef.current &&
+        !notificationRef.current.contains(event.target)
+      ) {
+        setNotificationVisible(false);
       }
     };
 
-    // Initial update
-    updateTitle();
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [taskCenterVisible, notificationVisible, scenarioNotificationsOn]);
 
-    // Poll every 100ms to catch child component changes
-    const interval = setInterval(updateTitle, 100);
+  // --- Event Handlers ---
+  const handleTaskCenterClick = useCallback(
+    (e) => {
+      setTaskCenterVisible((prev) => {
+        if (prev) return false;
+        return true;
+      });
+      if (handleMenuClick) handleMenuClick(e);
+    },
+    [handleMenuClick]
+  );
 
-    // Cleanup
-    return () => {
-      clearInterval(interval);
-      document.title = baseTitleRef.current; // Reset to base title on unmount
-    };
-  }, [unreadCount]); // Re-run when unreadCount changes
+  const handleNotificationClick = useCallback(
+    (e) => {
+      setNotificationVisible((prev) => {
+        if (prev) return false;
+        return true;
+      });
+      if (handleMenuClick) handleMenuClick(e);
+    },
+    [handleMenuClick]
+  );
 
-  const handleNotificationClick = (e) => {
-    setNotificationVisible(!notificationVisible);
-    if (handleMenuClick) handleMenuClick(e);
-  };
+  // --- Menu Items ---
 
-  const accountingChildren = [
-    {
-      key: "bills",
-      id: "header-accounting-bills",
-      icon: <FaFileInvoiceDollar />,
-      label: (
-        <Link to="/manage/bills">
-          <LockWrapper featureName="bills" bodyshop={bodyshop}>
-            {t("menus.header.bills")}
-          </LockWrapper>
-        </Link>
-      )
-    },
-    {
-      key: "enterbills",
-      id: "header-accounting-enterbills",
-      icon: <GiPayMoney />,
-      label: (
-        <LockWrapper featureName="bills" bodyshop={bodyshop}>
-          {t("menus.header.enterbills")}
-        </LockWrapper>
-      ),
-      onClick: () =>
-        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
-        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">{t("menus.header.allpayments")}</Link>
-    },
-    {
-      key: "enterpayments",
-      id: "header-accounting-enterpayments",
-      icon: <FaCreditCard />,
-      label: t("menus.header.enterpayment"),
-      onClick: () =>
-        setPaymentContext({
-          actions: {},
-          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",
-      icon: <FieldTimeOutlined />,
-      label: (
-        <Link to="/manage/timetickets">
-          <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
-            {t("menus.header.timetickets")}
-          </LockWrapper>
-        </Link>
-      )
-    },
-    ...(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",
-      id: "header-accounting-entertimetickets",
-      icon: <GiPlayerTime />,
-      label: (
-        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
-          {t("menus.header.entertimeticket")}
-        </LockWrapper>
-      ),
-      onClick: () =>
-        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
-        setTimeTicketContext({
-          actions: {},
-          context: {
-            created_by: currentUser.displayName
-              ? `${currentUser.email} | ${currentUser.displayName}`
-              : currentUser.email
-          }
-        })
-    },
-    { type: "divider" },
-    {
-      key: "accountingexport",
-      id: "header-accounting-export",
-      icon: <ExportOutlined />,
-      label: (
-        <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>
-          )
-        }
-      ]
+  // built externally to keep the component clean, but on this level to prevent unnecessary re-renders
+  const accountingChildren = useMemo(
+    () =>
+      buildAccountingChildren({
+        t,
+        bodyshop,
+        currentUser,
+        setBillEnterContext,
+        setPaymentContext,
+        setCardPaymentContext,
+        setTimeTicketContext,
+        ImEXPay,
+        DmsAp,
+        Simple_Inventory
+      }),
+    [
+      t,
+      bodyshop,
+      currentUser,
+      setBillEnterContext,
+      setPaymentContext,
+      setCardPaymentContext,
+      setTimeTicketContext,
+      ImEXPay,
+      DmsAp,
+      Simple_Inventory
+    ]
+  );
+
+  // Built externally to keep the component clean
+  const leftMenuItems = useMemo(
+    () =>
+      buildLeftMenuItems({
+        t,
+        bodyshop,
+        recentItems,
+        setTaskUpsertContext,
+        setReportCenterContext,
+        signOutStart,
+        accountingChildren
+      }),
+    [t, bodyshop, recentItems, setTaskUpsertContext, setReportCenterContext, signOutStart, accountingChildren]
+  );
+
+  const rightMenuItems = useMemo(() => {
+    const items = [];
+    if (scenarioNotificationsOn) {
+      items.push({
+        key: "notifications",
+        id: "header-notifications",
+        icon: unreadLoading ? (
+          <Spin size="small" />
+        ) : (
+          <Badge offset={[8, 0]} size="small" count={isEmployee ? unreadCount : 0}>
+            <BellFilled />
+          </Badge>
+        ),
+        onClick: handleNotificationClick
+      });
     }
-  ];
-
-  // Left menu items (includes original navigation items)
-  const leftMenuItems = [
-    {
-      key: "home",
-      id: "header-home",
-      icon: <HomeFilled />,
-      label: <Link to="/manage/">{t("menus.header.home")}</Link>
-    },
-    {
-      key: "schedule",
-      id: "header-schedule",
-      icon: <FaCalendarAlt />,
-      label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
-    },
-    {
-      key: "jobssubmenu",
-      id: "header-jobs",
-      icon: <FaCarCrash />,
-      label: t("menus.header.jobs"),
-      children: [
-        {
-          key: "activejobs",
-          id: "header-active-jobs",
-          icon: <FileFilled />,
-          label: <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
-        },
-        {
-          key: "readyjobs",
-          id: "header-ready-jobs",
-          icon: <CheckCircleOutlined />,
-          label: <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
-        },
-        {
-          key: "parts-queue",
-          id: "header-parts-queue",
-          icon: <ToolFilled />,
-          label: <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
-        },
-        {
-          key: "availablejobs",
-          id: "header-jobs-available",
-          icon: <ImportOutlined />,
-          label: <Link to="/manage/available">{t("menus.header.availablejobs")}</Link>
-        },
-        {
-          key: "newjob",
-          id: "header-new-job",
-          icon: <FileAddOutlined />,
-          label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
-        },
-        { type: "divider" },
-        {
-          key: "alljobs",
-          id: "header-all-jobs",
-          icon: <UnorderedListOutlined />,
-          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
-        },
-        { 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: <BsKanban />,
-          label: (
-            <Link to="/manage/production/board">
-              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
-                {t("menus.header.productionboard")}
-              </LockWrapper>
-            </Link>
-          )
-        },
-        { type: "divider" },
-        {
-          key: "scoreboard",
-          id: "header-scoreboard",
-          icon: <LineChartOutlined />,
-          label: (
-            <Link to="/manage/scoreboard">
-              <LockWrapper featureName="scoreboard" bodyshop={bodyshop}>
-                {t("menus.header.scoreboard")}
-              </LockWrapper>
-            </Link>
-          )
-        }
-      ]
-    },
-    {
-      key: "customers",
-      id: "header-customers",
-      icon: <UserOutlined />,
-      label: t("menus.header.customers"),
-      children: [
-        {
-          key: "owners",
-          id: "header-owners",
-          icon: <TeamOutlined />,
-          label: <Link to="/manage/owners">{t("menus.header.owners")}</Link>
-        },
-        {
-          key: "vehicles",
-          id: "header-vehicles",
-          icon: <CarFilled />,
-          label: <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
-        }
-      ]
-    },
-    {
-      key: "ccs",
-      id: "header-css",
-      icon: <CarFilled />,
-      label: (
-        <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
-          {t("menus.header.courtesycars")}
-        </LockWrapper>
+    items.push({
+      key: "taskcenter",
+      id: "header-taskcenter",
+      icon: taskCountLoading ? (
+        <Spin size="small" />
+      ) : (
+        <Badge offset={[8, 0]} size="small" count={incompleteTaskCount > 0 ? incompleteTaskCount : 0} showZero={false}>
+          <Tooltip title={t("menus.header.tasks")}>
+            <FaTasks />
+          </Tooltip>
+        </Badge>
       ),
-      children: [
-        {
-          key: "courtesycarsall",
-          id: "header-courtesycars-all",
-          icon: <CarFilled />,
-          label: (
-            <Link to="/manage/courtesycars">
-              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
-                {t("menus.header.courtesycars-all")}
-              </LockWrapper>
-            </Link>
-          )
-        },
-        {
-          key: "contracts",
-          id: "header-contracts",
-          icon: <FileFilled />,
-          label: (
-            <Link to="/manage/courtesycars/contracts">
-              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
-                {t("menus.header.courtesycars-contracts")}
-              </LockWrapper>
-            </Link>
-          )
-        },
-        {
-          key: "newcontract",
-          id: "header-newcontract",
-          icon: <FileAddFilled />,
-          label: (
-            <Link to="/manage/courtesycars/contracts/new">
-              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
-                {t("menus.header.courtesycars-newcontract")}
-              </LockWrapper>
-            </Link>
-          )
-        }
-      ]
-    },
-    ...(accountingChildren.length > 0
-      ? [
-          {
-            key: "accounting",
-            id: "header-accounting",
-            icon: <DollarCircleFilled />,
-            label: t("menus.header.accounting"),
-            children: accountingChildren
-          }
-        ]
-      : []),
-    {
-      key: "phonebook",
-      id: "header-phonebook",
-      icon: <PhoneOutlined />,
-      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
-    },
-    {
-      key: "temporarydocs",
-      id: "header-temporarydocs",
-      icon: <PaperClipOutlined />,
-      label: (
-        <Link to="/manage/temporarydocs">
-          <LockWrapper featureName="media" bodyshop={bodyshop}>
-            {t("menus.header.temporarydocs")}
-          </LockWrapper>
-        </Link>
-      )
-    },
-    {
-      key: "tasks",
-      id: "tasks",
-      icon: <FaTasks />,
-      label: t("menus.header.tasks"),
-      children: [
-        {
-          key: "createTask",
-          id: "header-create-task",
-          icon: <PlusCircleOutlined />,
-          label: t("menus.header.create_task"),
-          onClick: () => setTaskUpsertContext({ actions: {}, context: {} })
-        },
-        {
-          key: "mytasks",
-          id: "header-my-tasks",
-          icon: <FaTasks />,
-          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
-        },
-        {
-          key: "all_tasks",
-          id: "header-all-tasks",
-          icon: <FaTasks />,
-          label: <Link to="/manage/tasks/alltasks">{t("menus.header.all_tasks")}</Link>
-        }
-      ]
-    },
-    {
-      key: "shopsubmenu",
-      id: "header-shopsubmenu",
-      icon: <SettingOutlined />,
-      label: t("menus.header.shop"),
-      children: [
-        {
-          key: "shop",
-          id: "header-shop",
-          icon: <GiSettingsKnobs />,
-          label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
-        },
-        {
-          key: "dashboard",
-          id: "header-dashboard",
-          icon: <DashboardFilled />,
-          label: (
-            <Link to="/manage/dashboard">
-              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
-            </Link>
-          )
-        },
-        {
-          key: "reportcenter",
-          id: "header-reportcenter",
-          icon: <BarChartOutlined />,
-          label: t("menus.header.reportcenter"),
-          onClick: () => setReportCenterContext({ actions: {}, context: {} })
-        },
-        {
-          key: "shop-vendors",
-          id: "header-shop-vendors",
-          icon: <IoBusinessOutline />,
-          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
-        },
-        {
-          key: "shop-csi",
-          id: "header-shop-csi",
-          icon: <RiSurveyLine />,
-          label: (
-            <Link to="/manage/shop/csi">
-              <LockWrapper featureName="export" bodyshop={bodyshop}>
-                {t("menus.header.shop_csi")}
-              </LockWrapper>
-            </Link>
-          )
-        }
-      ]
-    },
-    {
-      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",
-      id: "header-user",
-      icon: <UserOutlined />,
-      label: t("menus.currentuser.profile"),
-      children: [
-        {
-          key: "signout",
-          id: "header-signout",
-          icon: <FiLogOut />,
-          danger: true,
-          label: t("user.actions.signout"),
-          onClick: () => signOutStart()
-        },
-        {
-          key: "help",
-          id: "header-help",
-          icon: <QuestionCircleFilled />,
-          label: t("menus.header.help"),
-          onClick: () => window.open("https://help.imex.online/", "_blank")
-        },
-        {
-          key: "remoteassist",
-          id: "header-remote-assist",
-          icon: <OneToOneOutlined />,
-          label: t("menus.header.remoteassist"),
-          children: [
-            ...(InstanceRenderManager({ imex: true, rome: false })
-              ? [
-                  {
-                    key: "rescue",
-                    id: "header-rescue",
-                    icon: <PlusCircleOutlined />,
-                    label: t("menus.header.rescueme"),
-                    onClick: () => window.open("https://imexrescue.com/", "_blank")
-                  }
-                ]
-              : []),
-            {
-              key: "rescue-zoho",
-              id: "header-rescue-zoho",
-              icon: <UsergroupAddOutlined />,
-              label: t("menus.header.rescuemezoho"),
-              onClick: () => window.open("https://join.zoho.com/", "_blank")
-            }
-          ]
-        },
-        {
-          key: "shiftclock",
-          id: "header-shiftclock",
-          icon: <GiPlayerTime />,
-          label: (
-            <Link to="/manage/shiftclock">
-              <LockWrapper featureName="export" bodyshop={bodyshop}>
-                {t("menus.header.shiftclock")}
-              </LockWrapper>
-            </Link>
-          )
-        },
-        {
-          key: "profile",
-          id: "header-profile",
-          icon: <UserOutlined />,
-          label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</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={isEmployee ? unreadCount : 0}>
-              <BellFilled />
-            </Badge>
-          ),
-          onClick: handleNotificationClick
-        }
-      ]
-    : [];
+      onClick: handleTaskCenterClick
+    });
+    return items;
+  }, [
+    scenarioNotificationsOn,
+    unreadLoading,
+    unreadCount,
+    taskCountLoading,
+    incompleteTaskCount,
+    isEmployee,
+    handleNotificationClick,
+    handleTaskCenterClick,
+    t
+  ]);
 
+  // --- Render ---
   return (
     <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 && (
+      <div style={{ display: "flex", alignItems: "center", height: "100%", overflow: "hidden" }}>
+        <div style={{ flexGrow: 1, overflowX: "auto", whiteSpace: "nowrap" }}>
           <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" }}
+            items={leftMenuItems}
+            style={{ borderBottom: "none", background: "transparent", minWidth: "100%" }}
           />
-        )}
+        </div>
+        <div style={{ width: 120, flexShrink: 0 }}>
+          <Menu
+            mode="horizontal"
+            theme="dark"
+            selectedKeys={[selectedHeader]}
+            onClick={handleMenuClick}
+            subMenuCloseDelay={0.3}
+            items={rightMenuItems}
+            style={{ borderBottom: "none", background: "transparent", justifyContent: "flex-end" }}
+          />
+        </div>
       </div>
       {scenarioNotificationsOn && (
-        <NotificationCenterContainer
-          visible={notificationVisible}
-          onClose={() => setNotificationVisible(false)}
-          unreadCount={unreadCount}
-        />
+        <div ref={notificationRef}>
+          <NotificationCenterContainer
+            visible={notificationVisible}
+            onClose={() => setNotificationVisible(false)}
+            unreadCount={unreadCount}
+          />
+        </div>
       )}
+      <div ref={taskCenterRef}>
+        <TaskCenterContainer
+          incompleteTaskCount={incompleteTaskCount}
+          visible={taskCenterVisible}
+          onClose={() => setTaskCenterVisible(false)}
+        />
+      </div>
     </Layout.Header>
   );
 }

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

@@ -395,32 +395,33 @@ export function ScheduleEventComponent({
         ) : (
           <ScheduleManualEvent event={event} />
         )}
-        {event.isintake && HasFeatureAccess({ featureName: "checklist", bodyshop }) ? (
-          <Link
-            to={{
-              pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
-              search: `?appointmentId=${event.id}`
-            }}
-          >
-            <Button disabled={event.arrived}>{t("appointments.actions.intake")}</Button>
-          </Link>
-        ) : (
-          <Popover //open={open}
-            content={popMenu}
-            open={popOverVisible}
-            onOpenChange={setPopOverVisible}
-            onClick={(e) => {
-              if (event.job?.id) {
-                e.stopPropagation();
-                getJobDetails();
-              }
-            }}
-            getPopupContainer={(trigger) => trigger.parentNode}
-            trigger="click"
-          >
-            <Button disabled={event.arrived}>{t("jobs.actions.intake_quick")}</Button>
-          </Popover>
-        )}
+        {event.job &&
+          (HasFeatureAccess({ featureName: "checklist", bodyshop }) ? (
+            <Link
+              to={{
+                pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
+                search: `?appointmentId=${event.id}`
+              }}
+            >
+              <Button disabled={event.arrived}>{t("appointments.actions.intake")}</Button>
+            </Link>
+          ) : (
+            <Popover //open={open}
+              content={popMenu}
+              open={popOverVisible}
+              onOpenChange={setPopOverVisible}
+              onClick={(e) => {
+                if (event.job?.id) {
+                  e.stopPropagation();
+                  getJobDetails();
+                }
+              }}
+              getPopupContainer={(trigger) => trigger.parentNode}
+              trigger="click"
+            >
+              <Button disabled={event.arrived}>{t("jobs.actions.intake_quick")}</Button>
+            </Popover>
+          ))}
       </Space>
     </div>
   );

client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx

@@ -1,7 +1,7 @@
 import { useMutation } from "@apollo/client";
 import { Button, Card, Form, Input, Switch } from "antd";
 import queryString from "query-string";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
@@ -9,7 +9,6 @@ import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../../../firebase/firebase.utils";
 import { MARK_APPOINTMENT_ARRIVED, MARK_LATEST_APPOINTMENT_ARRIVED } from "../../../../graphql/appointments.queries";
 import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
-import { UPDATE_OWNER } from "../../../../graphql/owners.queries";
 import { insertAuditTrail } from "../../../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../../../redux/user/user.selectors";
 import AuditTrailMapping from "../../../../utils/AuditTrailMappings";
@@ -32,7 +31,6 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
   const [loading, setLoading] = useState(false);
   const [markAptArrived] = useMutation(MARK_APPOINTMENT_ARRIVED);
   const [markLatestAptArrived] = useMutation(MARK_LATEST_APPOINTMENT_ARRIVED);
-  const [updateOwner] = useMutation(UPDATE_OWNER);
   const notification = useNotification();
 
   const { jobId } = useParams();
@@ -129,24 +127,6 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
       }
     }
 
-    if (type === "intake" && job.owner && job.owner.id) {
-      //Updae Owner Allow to Text
-      const updateOwnerResult = await updateOwner({
-        variables: {
-          ownerId: job.owner.id,
-          owner: { allow_text_message: values.allow_text_message }
-        }
-      });
-
-      if (!!updateOwnerResult.errors) {
-        notification["error"]({
-          message: t("checklist.errors.complete", {
-            error: JSON.stringify(result.errors)
-          })
-        });
-      }
-    }
-
     setLoading(false);
 
     if (!!!result.errors) {
@@ -189,7 +169,6 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
         initialValues={{
           ...(type === "intake" && {
             addToProduction: true,
-            allow_text_message: job.owner && job.owner.allow_text_message,
             scheduled_completion:
               (job && job.scheduled_completion && dayjs(job.scheduled_completion)) ||
               (job &&
@@ -228,14 +207,6 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
             >
               <Switch disabled={readOnly} />
             </Form.Item>
-            <Form.Item
-              name="allow_text_message"
-              valuePropName="checked"
-              label={t("checklist.labels.allow_text_message")}
-              disabled={readOnly}
-            >
-              <Switch disabled={readOnly} />
-            </Form.Item>
             <Form.Item
               name="scheduled_completion"
               label={t("jobs.fields.scheduled_completion")}

client/src/components/jobs-available-scan/jobs-available-scan.component.jsx

@@ -1,19 +1,19 @@
 import { DownloadOutlined, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Input, Space, Table } from "antd";
 import axios from "axios";
-import React, { useState } from "react";
+import { 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 { selectPartnerVersion } from "../../redux/application/application.selectors";
 import { alphaSort } from "../../utils/sorters";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   partnerVersion: selectPartnerVersion
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobsAvailableScan);
@@ -126,6 +126,7 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
             onClick={() => {
               scanEstimates();
             }}
+            id="scan-estimates-button"
           >
             <SyncOutlined />
           </Button>

client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx

@@ -1,4 +1,4 @@
-import { Form, Input, Switch } from "antd";
+import { Form, Input } from "antd";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
@@ -129,13 +129,6 @@ export default function JobsCreateOwnerInfoNewComponent() {
         <Form.Item label={t("owners.fields.preferred_contact")} name={["owner", "data", "preferred_contact"]}>
           <Input disabled={!state.owner.new} />
         </Form.Item>
-        <Form.Item
-          label={t("owners.fields.allow_text_message")}
-          valuePropName="checked"
-          name={["owner", "data", "allow_text_message"]}
-        >
-          <Switch disabled={!state.owner.new} />
-        </Form.Item>
       </LayoutFormRow>
     </div>
   );

client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx

@@ -1,5 +1,5 @@
 import { Card, Input, Table } from "antd";
-import React, { useContext, useState } from "react";
+import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import PhoneFormatter from "../../utils/PhoneFormatter";
@@ -91,6 +91,7 @@ export default function JobsCreateOwnerInfoSearchComponent({ loading, owners })
             });
           }}
           enterButton
+          id="search-owner"
         />
       }
     >
@@ -112,9 +113,9 @@ export default function JobsCreateOwnerInfoSearchComponent({ loading, owners })
           type: "radio",
           selectedRowKeys: [state.owner.selectedid]
         }}
-        onRow={(record, rowIndex) => {
+        onRow={(record) => {
           return {
-            onClick: (event) => {
+            onClick: () => {
               if (record) {
                 if (record.id) {
                   setState({

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx

@@ -1,9 +1,9 @@
-import React, { useContext, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Card, Input, Space, Table } from "antd";
+import { useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { alphaSort } from "../../utils/sorters";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+import { alphaSort } from "../../utils/sorters";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 
 export default function JobsCreateVehicleInfoSearchComponent({ loading, vehicles }) {
@@ -63,6 +63,7 @@ export default function JobsCreateVehicleInfoSearchComponent({ loading, vehicles
               });
             }}
             enterButton
+            id="search-vehicle"
           />
         </Space>
       }
@@ -91,9 +92,9 @@ export default function JobsCreateVehicleInfoSearchComponent({ loading, vehicles
           type: "radio",
           selectedRowKeys: [state.vehicle.selectedid]
         }}
-        onRow={(record, rowIndex) => {
+        onRow={(record) => {
           return {
-            onClick: (event) => {
+            onClick: () => {
               if (record) {
                 if (record.id) {
                   setState({

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

@@ -335,7 +335,11 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail })
         </Card>
       </Col>
       <Col {...colSpan}>
-        <Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}>
+        <Card
+          style={{ height: "100%" }}
+          title={<span id="job-employee-assignments-title">{t("jobs.labels.employeeassignments")}</span>}
+          id={"job-employee-assignments"}
+        >
           <div>
             <JobEmployeeAssignments job={job} />
             <Divider style={{ margin: ".5rem" }} />

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

@@ -42,7 +42,7 @@ export function JobsDocumentsContainer({
     variables: { jobId: jobId },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: Imgproxy.treatment === "on" || !!billId
+    skip: !!billId
   });
 
   if (loading) return <LoadingSpinner />;

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

@@ -3,7 +3,6 @@ import axios from "axios";
 import { 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 { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,7 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -26,7 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyDownloadButton);
 
-export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, identifier, jobId }) {
+export function JobsDocumentsImgproxyDownloadButton({ galleryImages, identifier, jobId }) {
   const { t } = useTranslation();
   const [download, setDownload] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -46,32 +45,40 @@ export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, i
   }
 
   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();
+    try {
+      const a = document.createElement("a");
+      const url = window.URL.createObjectURL(new Blob([bufferData]));
+      a.href = url;
+      a.download = `${identifier || "documents"}.zip`;
+      a.click();
+    } catch (error) {
+      setLoading(false);
+      setDownload(null);
+    }
   }
 
   const handleDownload = async () => {
     logImEXEvent("jobs_documents_download");
     setLoading(true);
-    const zipUrl = await axios({
-      url: "/media/imgproxy/download",
-      method: "POST",
-      data: { jobId, documentids: imagesToDownload.map((_) => _.id) }
-    });
+    try {
+      const response = await axios({
+        url: "/media/imgproxy/download",
+        method: "POST",
+        responseType: "blob",
+        data: { jobId, documentids: imagesToDownload.map((_) => _.id) },
+        onDownloadProgress: downloadProgress
+      });
 
-    const theDownloadedZip = await cleanAxios({
-      url: zipUrl.data.url,
-      method: "GET",
-      responseType: "arraybuffer",
-      onDownloadProgress: downloadProgress
-    });
-    setLoading(false);
-    setDownload(null);
+      setLoading(false);
+      setDownload(null);
 
-    standardMediaDownload(theDownloadedZip.data);
+      // Use the response data (Blob) to trigger download
+      standardMediaDownload(response.data);
+    } catch (error) {
+      setLoading(false);
+      setDownload(null);
+      // handle error (optional)
+    }
   };
 
   return (

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

@@ -98,7 +98,13 @@ function JobsDocumentsImgproxyComponent({
               jobId={jobId}
               totalSize={totalSize}
               billId={billId}
-              callbackAfterUpload={billsCallback || fetchThumbnails || refetch}
+              callbackAfterUpload={
+                billsCallback ||
+                function () {
+                  isFunction(refetch) && refetch();
+                  isFunction(fetchThumbnails) && fetchThumbnails();
+                }
+              }
               ignoreSizeLimit={ignoreSizeLimit}
             />
           </Card>

client/src/components/jobs-find-modal/jobs-find-modal.component.jsx

@@ -1,9 +1,9 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Checkbox, Divider, Input, Space, Table } from "antd";
-import dayjs from "../../utils/day";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import dayjs from "../../utils/day";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -223,9 +223,9 @@ export default function JobsFindModalComponent({
           type: "radio",
           selectedRowKeys: [selectedJob]
         }}
-        onRow={(record, rowIndex) => {
+        onRow={(record) => {
           return {
-            onClick: (event) => {
+            onClick: () => {
               handleOnRowClick(record);
             }
           };
@@ -241,15 +241,17 @@ export default function JobsFindModalComponent({
               overrideHeaders: e.target.checked
             })
           }
+          id="override_header"
         >
           {t("jobs.labels.override_header")}
         </Checkbox>
-        <Checkbox checked={partsQueueToggle} onChange={(e) => setPartsQueueToggle(e.target.checked)}>
+        <Checkbox checked={partsQueueToggle} onChange={(e) => setPartsQueueToggle(e.target.checked)} id="parts_queue_toggle">
           {t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
         </Checkbox>
         <Checkbox
           checked={updateSchComp.checked}
           onChange={(e) => setSchComp({ ...updateSchComp, checked: e.target.checked })}
+          id="update_scheduled_completion"
         >
           {t("jobs.labels.update_scheduled_completion")}
         </Checkbox>
@@ -261,6 +263,7 @@ export default function JobsFindModalComponent({
                 onChange={(e) => {
                   setSchComp({ ...updateSchComp, scheduled_completion: e });
                 }}
+                id="scheduled_completion_date_time_picker"
               />
             ) : null}
             <Checkbox
@@ -273,6 +276,7 @@ export default function JobsFindModalComponent({
                   automatic: true
                 });
               }}
+              id="calculate_scheduled_completion"
             >
               {t("jobs.labels.calc_scheuled_completion")}
             </Checkbox>

client/src/components/jobs-find-modal/jobs-find-modal.container.jsx

@@ -1,6 +1,5 @@
 import { useQuery } from "@apollo/client";
 import { Modal } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -66,7 +65,7 @@ export default connect(
       title={t("jobs.labels.existing_jobs")}
       width={"80%"}
       destroyOnHidden
-      okButtonProps={{ disabled: selectedJob ? false : true }}
+      okButtonProps={{ disabled: selectedJob ? false : true, id: "jobs-find-modal-container-ok" }}
       {...modalProps}
     >
       {loading ? <LoadingSpinner /> : null}

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

@@ -131,4 +131,6 @@ const NotificationCenterComponent = forwardRef(
   }
 );
 
+NotificationCenterComponent.displayName = "NotificationCenterComponent";
+
 export default NotificationCenterComponent;

client/src/components/owner-detail-form/owner-detail-form.component.jsx

@@ -1,14 +1,15 @@
-import { Form, Input, Switch } from "antd";
-import React from "react";
+import { Form, Input, Tooltip } from "antd";
+import { CloseCircleFilled } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
-import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 
-export default function OwnerDetailFormComponent({ form, loading }) {
+export default function OwnerDetailFormComponent({ form, loading, isPhone1OptedOut, isPhone2OptedOut }) {
   const { t } = useTranslation();
   const { getFieldValue } = form;
+
   return (
     <div>
       <FormFieldsChanged form={form} />
@@ -26,7 +27,7 @@ export default function OwnerDetailFormComponent({ form, loading }) {
           <Input />
         </Form.Item>
         <Form.Item label={t("owners.fields.accountingid")} name="accountingid">
-          <Input disabled/>
+          <Input disabled />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow header={t("owners.forms.address")}>
@@ -50,9 +51,6 @@ export default function OwnerDetailFormComponent({ form, loading }) {
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow header={t("owners.forms.contact")}>
-        <Form.Item label={t("owners.fields.allow_text_message")} name="allow_text_message" valuePropName="checked">
-          <Switch />
-        </Form.Item>
         <Form.Item
           label={t("owners.fields.ownr_ea")}
           name="ownr_ea"
@@ -65,19 +63,55 @@ export default function OwnerDetailFormComponent({ form, loading }) {
         >
           <FormItemEmail email={getFieldValue("ownr_ea")} />
         </Form.Item>
-        <Form.Item
-          label={t("owners.fields.ownr_ph1")}
-          name="ownr_ph1"
-          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph1")]}
-        >
-          <FormItemPhone />
+        <Form.Item label={t("owners.fields.ownr_ph1")} style={{ marginBottom: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <Form.Item
+              name="ownr_ph1"
+              noStyle
+              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph1")]}
+            >
+              <Input style={{ flex: 1, minWidth: "150px" }} />
+            </Form.Item>
+            {isPhone1OptedOut && (
+              <Tooltip title={t("consent.text_body")}>
+                <CloseCircleFilled
+                  style={{
+                    color: "#ff4d4f",
+                    fontSize: 16,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%"
+                  }}
+                />
+              </Tooltip>
+            )}
+          </div>
         </Form.Item>
-        <Form.Item
-          label={t("owners.fields.ownr_ph2")}
-          name="ownr_ph2"
-          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph2")]}
-        >
-          <FormItemPhone />
+        <Form.Item label={t("owners.fields.ownr_ph2")} style={{ marginBottom: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <Form.Item
+              name="ownr_ph2"
+              noStyle
+              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph2")]}
+            >
+              <Input style={{ flex: 1, minWidth: "150px" }} />
+            </Form.Item>
+            {isPhone2OptedOut && (
+              <Tooltip title={t("consent.text_body")}>
+                <CloseCircleFilled
+                  style={{
+                    color: "#ff4d4f",
+                    fontSize: 16,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%"
+                  }}
+                />
+              </Tooltip>
+            )}
+          </div>
         </Form.Item>
         <Form.Item label={t("owners.fields.preferred_contact")} name="preferred_contact">
           <Input />

client/src/components/owner-detail-form/owner-detail-form.container.jsx

@@ -1,69 +1,115 @@
 import { Button, Form, Popconfirm } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useMutation } from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { DELETE_OWNER, UPDATE_OWNER } from "../../graphql/owners.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors"; // Adjust path
+import { phoneNumberOptOutService } from "../../utils/phoneOptOutService.js"; // Adjust path
 import OwnerDetailFormComponent from "./owner-detail-form.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { phone } from "phone"; // Import phone utility for formatting
 
-function OwnerDetailFormContainer({ owner, refetch }) {
+// Connect to Redux to access bodyshop
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+function OwnerDetailFormContainer({ owner, refetch, bodyshop }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const history = useNavigate();
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
+  const [optedOutPhones, setOptedOutPhones] = useState(new Set());
   const [updateOwner] = useMutation(UPDATE_OWNER);
   const [deleteOwner] = useMutation(DELETE_OWNER);
   const notification = useNotification();
+  const apolloClient = useApolloClient();
+
+  // Fetch opt-out status on mount
+  useEffect(() => {
+    const fetchOptOutStatus = async () => {
+      if (bodyshop?.id && bodyshop?.messagingservicesid && (owner?.ownr_ph1 || owner?.ownr_ph2)) {
+        const phoneNumbers = [owner.ownr_ph1, owner.ownr_ph2].filter(Boolean);
+        const optOutSet = await phoneNumberOptOutService(apolloClient, bodyshop.id, phoneNumbers);
+        setOptedOutPhones(optOutSet);
+      } else {
+        setOptedOutPhones(new Set());
+      }
+    };
+
+    fetchOptOutStatus();
+  }, [apolloClient, bodyshop?.id, bodyshop?.messagingservicesid, owner?.ownr_ph1, owner?.ownr_ph2]);
+
+  // Reset form fields when owner changes
+  useEffect(() => {
+    form.setFieldsValue({
+      ownr_ph1: owner?.ownr_ph1,
+      ownr_ph2: owner?.ownr_ph2,
+      ...owner
+    });
+  }, [owner, form]);
 
   const handleDelete = async () => {
     setLoading(true);
-    const result = await deleteOwner({
-      variables: { id: owner.id }
-    });
-    console.log(result);
-    if (result.errors) {
-      notification["error"]({
+    try {
+      const result = await deleteOwner({
+        variables: { id: owner.id }
+      });
+      if (result.errors) {
+        notification.error({
+          message: t("owners.errors.deleting", {
+            error: JSON.stringify(result.errors)
+          })
+        });
+      } else {
+        notification.success({
+          message: t("owners.successes.delete")
+        });
+        navigate(`/manage/owners`);
+      }
+    } catch (error) {
+      notification.error({
         message: t("owners.errors.deleting", {
-          error: JSON.stringify(result.errors)
+          error: error.message
         })
       });
+    } finally {
       setLoading(false);
-    } else {
-      notification["success"]({
-        message: t("owners.successes.delete")
-      });
-      setLoading(false);
-      history(`/manage/owners`);
     }
   };
 
   const handleFinish = async (values) => {
     setLoading(true);
-    const result = await updateOwner({
-      variables: { ownerId: owner.id, owner: values }
-    });
-
-    if (!!result.errors) {
-      notification["error"]({
+    try {
+      const result = await updateOwner({
+        variables: { ownerId: owner.id, owner: values }
+      });
+      if (result.errors) {
+        notification.error({
+          message: t("owners.errors.saving", {
+            error: JSON.stringify(result.errors)
+          })
+        });
+      } else {
+        notification.success({
+          message: t("owners.successes.save")
+        });
+        if (refetch) await refetch();
+        form.resetFields();
+      }
+    } catch (error) {
+      notification.error({
         message: t("owners.errors.saving", {
-          error: JSON.stringify(result.errors)
+          error: error.message
         })
       });
+    } finally {
       setLoading(false);
-      return;
     }
-
-    notification["success"]({
-      message: t("owners.successes.save")
-    });
-
-    if (refetch) await refetch();
-    form.resetFields();
-    form.resetFields();
-    setLoading(false);
   };
 
   return (
@@ -72,6 +118,7 @@ function OwnerDetailFormContainer({ owner, refetch }) {
         title={t("menus.header.owners")}
         extra={[
           <Popconfirm
+            key="delete"
             trigger="click"
             onConfirm={handleDelete}
             disabled={owner.jobs.length !== 0}
@@ -81,16 +128,29 @@ function OwnerDetailFormContainer({ owner, refetch }) {
               {t("general.actions.delete")}
             </Button>
           </Popconfirm>,
-          <Button type="primary" loading={loading} onClick={() => form.submit()}>
+          <Button key="save" type="primary" loading={loading} onClick={() => form.submit()}>
             {t("general.actions.save")}
           </Button>
         ]}
       />
       <Form form={form} onFinish={handleFinish} autoComplete="off" layout="vertical" initialValues={owner}>
-        <OwnerDetailFormComponent loading={loading} form={form} />
+        <OwnerDetailFormComponent
+          loading={loading}
+          form={form}
+          isPhone1OptedOut={
+            bodyshop?.messagingservicesid &&
+            owner?.ownr_ph1 &&
+            optedOutPhones.has(phone(owner.ownr_ph1, "CA").phoneNumber?.replace(/^\+1/, ""))
+          }
+          isPhone2OptedOut={
+            bodyshop?.messagingservicesid &&
+            owner?.ownr_ph2 &&
+            optedOutPhones.has(phone(owner.ownr_ph2, "CA").phoneNumber?.replace(/^\+1/, ""))
+          }
+        />
       </Form>
     </>
   );
 }
 
-export default OwnerDetailFormContainer;
+export default connect(mapStateToProps)(OwnerDetailFormContainer);

client/src/components/owner-find-modal/owner-find-modal.container.jsx

@@ -1,12 +1,12 @@
 import { useLazyQuery } from "@apollo/client";
 import { Input, Modal } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import OwnerFindModalComponent from "./owner-find-modal.component";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
+import OwnerFindModalComponent from "./owner-find-modal.component";
 
 export default function OwnerFindModalContainer({
   loading,
@@ -41,6 +41,7 @@ export default function OwnerFindModalContainer({
     <Modal
       title={<span id="owner-find-modal-title">{t("owners.labels.existing_owners")}</span>}
       width={"80%"}
+      okButtonProps={{ id: "owner-find-modal-ok-button" }}
       {...modalProps}
     >
       {loading ? <LoadingSpinner /> : null}

client/src/components/phone-number-consent/phone-number-consent.component.jsx

@@ -1,14 +1,20 @@
 import { useQuery } from "@apollo/client";
-import { Input, Table } from "antd";
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { Input, Table, Typography } from "antd";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import { GET_PHONE_NUMBER_OPT_OUTS, SEARCH_OWNERS_BY_PHONE_NUMBERS } from "../../graphql/phone-number-opt-out.queries";
-
-import PhoneNumberFormatter from "../../utils/PhoneFormatter";
+import { GET_PHONE_NUMBER_OPT_OUTS } from "../../graphql/phone-number-opt-out.queries";
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
+import ChatOpenButton from "../chat-open-button/chat-open-button.component";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
+const { Paragraph } = Typography;
+
+// Commented out Associated Owners section for now
+//import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+//import { Link } from "react-router-dom";
+//import { useMemo, useState } from "react";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -27,7 +33,8 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
     fetchPolicy: "network-only"
   });
 
-  // Prepare phone numbers for owner query
+  // Commented out Associated Owners section for now
+  /*// Prepare phone numbers for owner query
   const phoneNumbers = useMemo(() => {
     return optOutData?.phone_number_opt_out?.map((item) => item.phone_number) || [];
   }, [optOutData?.phone_number_opt_out]);
@@ -44,18 +51,6 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
     fetchPolicy: "network-only"
   });
 
-  // Format owner names for display
-  const formatOwnerName = (owner) => {
-    const parts = [];
-    if (owner.ownr_fn || owner.ownr_ln) {
-      parts.push([owner.ownr_fn, owner.ownr_ln].filter(Boolean).join(" "));
-    }
-    if (owner.ownr_co_nm) {
-      parts.push(owner.ownr_co_nm);
-    }
-    return parts.join(", ") || "-";
-  };
-
   // Map phone numbers to their associated owners and identify phone field
   const getAssociatedOwners = (phoneNumber) => {
     if (!ownersData?.owners) return [];
@@ -83,16 +78,17 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
               : t("consent.phone_2")
             : null
       }));
-  };
+  };*/
 
   const columns = [
     {
       title: t("consent.phone_number"),
       dataIndex: "phone_number",
-      render: (text) => <PhoneNumberFormatter>{text}</PhoneNumberFormatter>,
+      render: (text) => <ChatOpenButton phone={text} />,
       sorter: (a, b) => a.phone_number.localeCompare(b.phone_number)
     },
-    {
+    // Commented out Associated Owners section for now
+    /*{
       title: t("consent.associated_owners"),
       dataIndex: "phone_number",
       render: (phoneNumber) => {
@@ -102,18 +98,23 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
         }
         return owners.map((owner) => (
           <div key={owner.id}>
-            {formatOwnerName(owner)} ({owner.phoneField})
+            <Space direction="horizontal">
+              <Link to={"/manage/owners/" + owner.id}>
+                <OwnerNameDisplay ownerObject={owner} />
+              </Link>
+              ({owner.phoneField})
+            </Space>
           </div>
         ));
       },
       sorter: (a, b) => {
         const aOwners = getAssociatedOwners(a.phone_number);
         const bOwners = getAssociatedOwners(b.phone_number);
-        const aName = aOwners[0] ? formatOwnerName(aOwners[0]) : "";
-        const bName = bOwners[0] ? formatOwnerName(bOwners[0]) : "";
+        const aName = aOwners[0] ? `${aOwners[0].ownr_fn} ${aOwners[0].ownr_ln}` : "";
+        const bName = bOwners[0] ? `${bOwners[0].ownr_fn} ${bOwners[0].ownr_ln}` : "";
         return aName.localeCompare(bName);
       }
-    },
+    },*/
     {
       title: t("consent.created_at"),
       dataIndex: "created_at",
@@ -124,6 +125,7 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
 
   return (
     <div>
+      <Paragraph>{t("consent.text_body")}</Paragraph>
       <Input.Search
         placeholder={t("general.labels.search")}
         onSearch={(value) => setSearch(value)}
@@ -133,7 +135,7 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
       <Table
         columns={columns}
         dataSource={optOutData?.phone_number_opt_out}
-        loading={optOutLoading || ownersLoading}
+        loading={optOutLoading /* || ownersLoading*/}
         rowKey="id"
         style={{ marginTop: 16 }}
       />

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx

@@ -1,9 +1,9 @@
 import Icon from "@ant-design/icons";
 import { Card, Popover, Space } from "antd";
-import _ from "lodash";
+import { groupBy } from "lodash";
 import dayjs from "../../utils/day";
 
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { MdFileDownload, MdFileUpload } from "react-icons/md";
 import { connect } from "react-redux";
@@ -26,21 +26,12 @@ const mapStateToProps = createStructuredSelector({
   calculating: selectScheduleLoadCalculating
 });
 
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});
 
-export function ScheduleCalendarHeaderComponent({
-  bodyshop,
-  label,
-  refetch,
-  date,
-  load,
-  calculating,
-  events,
-  ...otherProps
-}) {
+export function ScheduleCalendarHeaderComponent({ bodyshop, label, refetch, date, load, calculating, events }) {
   const ATSToday = useMemo(() => {
     if (!events) return [];
-    return _.groupBy(
+    return groupBy(
       events.filter((e) => !e.vacation && e.isintake && dayjs(date).isSame(dayjs(e.start), "day")),
       "job.alt_transport"
     );
@@ -155,7 +146,11 @@ export function ScheduleCalendarHeaderComponent({
           <Space size="small">
             <Icon component={MdFileDownload} style={{ color: "green" }} />
             <BlurWrapper featureName="smartscheduling">
-              <span>{`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}</span>
+              <span>
+                {`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${
+                  (loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)
+                }/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}
+              </span>
             </BlurWrapper>
           </Space>
         </Popover>

client/src/components/scoreboard-chart/scoreboard-chart.component.jsx

@@ -1,8 +1,7 @@
 import { Card } from "antd";
 import Dinero from "dinero.js";
-import _ from "lodash";
+import { round } from "lodash";
 import dayjs from "../../utils/day";
-import React from "react";
 import { connect } from "react-redux";
 import {
   Area,
@@ -29,7 +28,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardChart);
@@ -40,7 +39,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
   const data = listOfBusDays.reduce((acc, val) => {
     //Sum up the current day.
     let dayhrs;
-    if (!!sbEntriesByDate[val]) {
+    if (sbEntriesByDate[val]) {
       dayhrs = sbEntriesByDate[val].reduce(
         (dayAcc, dayVal) => {
           return {
@@ -61,9 +60,9 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
 
     const theValue = {
       date: dayjs(val).format("D ddd"),
-      paintHrs: _.round(dayhrs.painthrs, 1),
-      bodyHrs: _.round(dayhrs.bodyhrs, 1),
-      accTargetHrs: _.round(
+      paintHrs: round(dayhrs.painthrs, 1),
+      bodyHrs: round(dayhrs.bodyhrs, 1),
+      accTargetHrs: round(
         Utils.AsOfDateTargetHours(
           bodyshop.scoreboard_target.dailyBodyTarget + bodyshop.scoreboard_target.dailyPaintTarget,
           val
@@ -72,14 +71,14 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
           bodyshop.scoreboard_target.dailyPaintTarget,
         1
       ),
-      accHrs: _.round(
+      accHrs: round(
         acc.length > 0
           ? acc[acc.length - 1].accHrs + dayhrs.painthrs + dayhrs.bodyhrs
           : dayhrs.painthrs + dayhrs.bodyhrs,
         1
       ),
-      sales: _.round(dayhrs.sales, 2),
-      accSales: _.round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2)
+      sales: round(dayhrs.sales, 2),
+      accSales: round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2)
     };
 
     return [...acc, theValue];

client/src/components/scoreboard-display/scoreboard-display.component.jsx

@@ -1,23 +1,25 @@
-import { Col, Row } from "antd";
-import React, { useEffect } from "react";
+import { Col, Row, Spin } from "antd";
+import { useEffect, useState } from "react";
 import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component";
 import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component";
 import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
-
 import { useApolloClient, useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { GET_BLOCKED_DAYS, QUERY_SCOREBOARD } from "../../graphql/scoreboard.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import dayjs from "../../utils/day";
+import {
+  clearHolidays,
+  clearWorkingWeekdays,
+  setHolidays,
+  setWorkingWeekdays
+} from "../scoreboard-targets-table/scoreboard-targets-table.util";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
 export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardDisplayComponent);
 
 export function ScoreboardDisplayComponent({ bodyshop }) {
@@ -26,63 +28,76 @@ export function ScoreboardDisplayComponent({ bodyshop }) {
       start: dayjs().startOf("month"),
       end: dayjs().endOf("month")
     },
-    pollInterval: 60000*5
+    pollInterval: 60000 * 5
   });
 
   const { data } = scoreboardSubscription;
   const client = useApolloClient();
-  const scoreBoardlist = (data && data.scoreboard) || [];
-
+  const scoreBoardlist = data?.scoreboard || [];
   const sbEntriesByDate = {};
 
   scoreBoardlist.forEach((i) => {
     const entryDate = i.date;
-    if (!!!sbEntriesByDate[entryDate]) {
+    if (!sbEntriesByDate[entryDate]) {
       sbEntriesByDate[entryDate] = [];
     }
     sbEntriesByDate[entryDate].push(i);
   });
 
+  const [loading, setLoading] = useState(true); // Loading state
+
   useEffect(() => {
-    //Update the locals.
     async function setDayJSSettings() {
-      let appointments;
+      try {
+        let appointments;
 
-      if (!bodyshop.scoreboard_target.ignoreblockeddays) {
-        const { data } = await client.query({
-          query: GET_BLOCKED_DAYS,
-          variables: {
-            start: dayjs().startOf("month"),
-            end: dayjs().endOf("month")
-          }
-        });
-        appointments = data.appointments;
-      }
-
-      dayjs.updateLocale("ca", {
-        workingWeekdays: translateSettingsToWorkingDays(bodyshop.workingdays),
-        ...(appointments
-          ? {
-              holidays: appointments.map((h) => dayjs(h.start).format("MM-DD-YYYY"))
+        if (!bodyshop.scoreboard_target.ignoreblockeddays) {
+          const { data } = await client.query({
+            query: GET_BLOCKED_DAYS,
+            variables: {
+              start: dayjs().startOf("month"),
+              end: dayjs().endOf("month")
             }
-          : {}),
-        holidayFormat: "MM-DD-YYYY"
-      });
+          });
+          appointments = data.appointments;
+        }
+
+        const holidays = appointments ? appointments.map((h) => dayjs(h.start).format("MM-DD-YYYY")) : [];
+        const workingWeekdays = translateSettingsToWorkingDays(bodyshop.workingdays);
+
+        // Set holidays and working weekdays
+        setHolidays(holidays);
+        setWorkingWeekdays(workingWeekdays);
+      } finally {
+        setLoading(false); // Set loading to false after processing
+      }
     }
 
     setDayJSSettings();
+
+    // Cleanup on unmount
+    return () => {
+      clearHolidays();
+      clearWorkingWeekdays();
+    };
   }, [client, bodyshop]);
 
+  if (loading) {
+    return (
+      <Row justify="center" align="middle" style={{ minHeight: "100vh" }}>
+        <Spin size="large" />
+      </Row>
+    );
+  }
+
   return (
     <Row gutter={[16, 16]}>
       <Col span={24}>
         <ScoreboardTargetsTable scoreBoardlist={scoreBoardlist} />
       </Col>
-
       <Col span={24}>
         <ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
       </Col>
-
       <Col span={24}>
         <ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
       </Col>
@@ -92,27 +107,12 @@ export function ScoreboardDisplayComponent({ bodyshop }) {
 
 function translateSettingsToWorkingDays(workingdays) {
   const days = [];
-
-  if (workingdays.monday) {
-    days.push(1);
-  }
-  if (workingdays.tuesday) {
-    days.push(2);
-  }
-  if (workingdays.wednesday) {
-    days.push(3);
-  }
-  if (workingdays.thursday) {
-    days.push(4);
-  }
-  if (workingdays.friday) {
-    days.push(5);
-  }
-  if (workingdays.saturday) {
-    days.push(6);
-  }
-  if (workingdays.sunday) {
-    days.push(0);
-  }
+  if (workingdays.monday) days.push(1);
+  if (workingdays.tuesday) days.push(2);
+  if (workingdays.wednesday) days.push(3);
+  if (workingdays.thursday) days.push(4);
+  if (workingdays.friday) days.push(5);
+  if (workingdays.saturday) days.push(6);
+  if (workingdays.sunday) days.push(0);
   return days;
 }

client/src/components/scoreboard-last-days/scoreboard-last-days.component.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -10,7 +9,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -26,7 +25,7 @@ export function ScoreboardLastDays({ bodyshop, sbEntriesByDate }) {
     <Row>
       {ArrayOfDate.map((a) => (
         <Col span={2} key={a}>
-          {!!sbEntriesByDate ? <ScoreboardDayStat date={a} entries={sbEntriesByDate[a] || []} /> : <LoadingSkeleton />}
+          {sbEntriesByDate ? <ScoreboardDayStat date={a} entries={sbEntriesByDate[a] || []} /> : <LoadingSkeleton />}
         </Col>
       ))}
     </Row>

client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx

@@ -1,8 +1,8 @@
 import { CalendarOutlined } from "@ant-design/icons";
 import { Card, Col, Divider, Row, Statistic } from "antd";
-import _ from "lodash";
+import { groupBy } from "lodash";
 import dayjs from "../../utils/day";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -13,7 +13,7 @@ import * as Util from "./scoreboard-targets-table.util";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -24,7 +24,7 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
   const { t } = useTranslation();
 
   const values = useMemo(() => {
-    const dateHash = _.groupBy(scoreBoardlist, "date");
+    const dateHash = groupBy(scoreBoardlist, "date");
 
     let ret = {
       todayBody: 0,
@@ -213,4 +213,5 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
     </Card>
   );
 }
+
 export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardTargetsTable);

client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js

@@ -1,29 +1,172 @@
 import dayjs from "../../utils/day";
 
-export const CalculateWorkingDaysThisMonth = () => dayjs().endOf("month").businessDaysInMonth().length;
+const DEFAULT_WORKING_DAYS = [1, 2, 3, 4, 5]; // Default to Monday-Friday
 
-export const CalculateWorkingDaysInPeriod = (start, end) => dayjs(end).businessDiff(dayjs(start));
+// Module-level state for holidays and working weekdays
+let holidays = [];
+let workingWeekdays = DEFAULT_WORKING_DAYS;
 
-export const CalculateWorkingDaysAsOfToday = () => dayjs().endOf("day").businessDiff(dayjs().startOf("month"));
+/**
+ * Sets the holidays for the business logic.
+ * @param newHolidays
+ */
+export const setHolidays = (newHolidays = []) => {
+  holidays = newHolidays;
+};
 
-export const CalculateWorkingDaysLastMonth = () =>
-  dayjs().subtract(1, "month").endOf("month").businessDaysInMonth().length;
+/**
+ * Clears the holidays.
+ */
+export const clearHolidays = () => {
+  holidays = [];
+};
 
+/**
+ * Sets the working weekdays for the business logic.
+ * @param newWorkingWeekdays
+ */
+export const setWorkingWeekdays = (newWorkingWeekdays = DEFAULT_WORKING_DAYS) => {
+  workingWeekdays = newWorkingWeekdays;
+};
+
+/**
+ * Clears the working weekdays, resetting to default (Monday-Friday).
+ */
+export const clearWorkingWeekdays = () => {
+  workingWeekdays = DEFAULT_WORKING_DAYS; // Reset to default
+};
+
+/**
+ * Translates the bodyshop working days settings to an array of weekdays.
+ * @returns {*[]}
+ */
+export const getHolidays = () => {
+  return holidays;
+};
+
+/**
+ * Translates the working days settings from the bodyshop to an array of weekdays.
+ * @returns {number[]}
+ */
+export const getWorkingWeekdays = () => {
+  return workingWeekdays;
+};
+
+/**
+ * Calculates the number of working days in the current month, excluding holidays.
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysThisMonth = () => {
+  const businessDays = dayjs().businessDaysInMonth();
+  return businessDays.filter((day) => !holidays.includes(dayjs(day).format("MM-DD-YYYY"))).length;
+};
+
+/**
+ * Calculates the number of working days in a given period, excluding holidays.
+ * @param start
+ * @param end
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysInPeriod = (start, end) => {
+  let businessDays = dayjs(end).businessDiff(dayjs(start));
+  if (dayjs(end).isBusinessDay() && !holidays.includes(dayjs(end).format("MM-DD-YYYY"))) {
+    businessDays += 1;
+  }
+  return businessDays;
+};
+
+/**
+ * Calculates the number of working days as of today, excluding holidays.
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysAsOfToday = () => {
+  const today = dayjs().startOf("day");
+  let businessDays = today.businessDiff(dayjs().startOf("month"));
+  if (today.isBusinessDay() && !holidays.includes(today.format("MM-DD-YYYY"))) {
+    businessDays += 1;
+  }
+  return businessDays;
+};
+
+/**
+ * Calculates the number of working days in the last month, excluding holidays.
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysLastMonth = () => {
+  const businessDays = dayjs().subtract(1, "month").businessDaysInMonth();
+  return businessDays.filter((day) => !holidays.includes(dayjs(day).format("MM-DD-YYYY"))).length;
+};
+
+/**
+ * Calculates the weekly target hours based on daily target hours and the number of working days in the current week.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const WeeklyTargetHrs = (dailyTargetHrs) =>
   dailyTargetHrs * CalculateWorkingDaysInPeriod(dayjs().startOf("week"), dayjs().endOf("week"));
 
+/**
+ * Calculates the weekly target hours for a specific period.
+ * @param dailyTargetHrs
+ * @param start
+ * @param end
+ * @returns {number}
+ * @constructor
+ */
 export const WeeklyTargetHrsInPeriod = (dailyTargetHrs, start, end) =>
   dailyTargetHrs * CalculateWorkingDaysInPeriod(start, end);
 
+/**
+ * Calculates the monthly target hours based on daily target hours and the number of working days in the current month.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const MonthlyTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysThisMonth();
 
+/**
+ * Calculates the monthly target hours for the last month based on daily target hours and the number of working days
+ * in the last month.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const LastMonthTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysLastMonth();
 
+/**
+ * Calculates the target hours as of today based on daily target hours and the number of working days as of today.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const AsOfTodayTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysAsOfToday();
 
-export const AsOfDateTargetHours = (dailyTargetHours, date) =>
-  dailyTargetHours * dayjs(date).businessDiff(dayjs().startOf("month"));
+/**
+ * Calculates the target hours as of a specific date based on daily target hours and the number of business days up to
+ * that date.
+ * @param dailyTargetHours
+ * @param date
+ * @returns {number}
+ * @constructor
+ */
+export const AsOfDateTargetHours = (dailyTargetHours, date) => {
+  let businessDays = dayjs(date).businessDiff(dayjs().startOf("month"));
+  if (dayjs(date).isBusinessDay() && !holidays.includes(dayjs(date).format("MM-DD-YYYY"))) {
+    businessDays += 1;
+  }
+  return dailyTargetHours * businessDays;
+};
 
+/**
+ * Generates a list of all days in the current month.
+ * @returns {*[]}
+ * @constructor
+ */
 export const ListOfDaysInCurrentMonth = () => {
   const days = [];
   let dateStart = dayjs().startOf("month");
@@ -36,6 +179,13 @@ export const ListOfDaysInCurrentMonth = () => {
   return days;
 };
 
+/**
+ * Generates a list of all days between two dates.
+ * @param start
+ * @param end
+ * @returns {*[]}
+ * @constructor
+ */
 export const ListDaysBetween = ({ start, end }) => {
   const days = [];
   let dateStart = dayjs(start);

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -1,13 +1,15 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation, useQuery } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Form, Input, InputNumber, Select, Switch, Table } from "antd";
 import { useForm } from "antd/es/form/Form";
-import dayjs from "../../utils/day";
-import React, { useEffect } from "react";
+import queryString from "query-string";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
   CHECK_EMPLOYEE_NUMBER,
@@ -20,19 +22,17 @@ import {
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
 import { DateFormatter } from "../../utils/DateFormatter";
+import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
-import queryString from "query-string";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -83,7 +83,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
           }
         }
       })
-        .then((r) => {
+        .then(() => {
           notification["success"]({
             message: t("employees.successes.save")
           });
@@ -120,13 +120,13 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
       title: t("employees.fields.vacation.start"),
       dataIndex: "start",
       key: "start",
-      render: (text, record) => <DateFormatter>{text}</DateFormatter>
+      render: (text) => <DateFormatter>{text}</DateFormatter>
     },
     {
       title: t("employees.fields.vacation.end"),
       dataIndex: "end",
       key: "end",
-      render: (text, record) => <DateFormatter>{text}</DateFormatter>
+      render: (text) => <DateFormatter>{text}</DateFormatter>
     },
     {
       title: t("employees.fields.vacation.length"),
@@ -210,7 +210,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                 required: true
                 //message: t("general.validation.required"),
               },
-              ({ getFieldValue }) => ({
+              () => ({
                 async validator(rule, value) {
                   if (value) {
                     const response = await client.query({
@@ -369,8 +369,9 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                       add();
                     }}
                     style={{ width: "100%" }}
+                    id="add-employee-rate-button"
                   >
-                    {t("employees.actions.newrate")}
+                    <span id="new-employee-rate">{t("employees.actions.newrate")}</span>
                   </Button>
                 </Form.Item>
               </div>
@@ -383,7 +384,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
         title={() => <ShopEmployeeAddVacation employee={data && data.employees_by_pk} />}
         columns={columns}
         rowKey={"id"}
-        dataSource={data ? data.employees_by_pk.employee_vacations : []}
+        dataSource={data?.employees_by_pk?.employee_vacations ?? []}
       />
     </Card>
   );

client/src/components/shop-info/shop-info.component.jsx

@@ -1,35 +1,34 @@
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Tabs } from "antd";
-import React from "react";
+import queryString from "query-string";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import ShopInfoGeneral from "./shop-info.general.component";
 import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
 import ShopInfoLaborRates from "./shop-info.laborrates.component";
+import ShopInfoNotificationsAutoadd from "./shop-info.notifications-autoadd.component.jsx";
 import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
 import ShopInfoPartsScan from "./shop-info.parts-scan";
 import ShopInfoRbacComponent from "./shop-info.rbac.component";
 import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
+import ShopInfoRoGuard from "./shop-info.roguard.component";
 import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
 import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
 import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
-import { useLocation, useNavigate } from "react-router-dom";
 import ShopInfoTaskPresets from "./shop-info.task-presets.component";
-import queryString from "query-string";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import ShopInfoRoGuard from "./shop-info.roguard.component";
 import ShopInfoIntellipay from "./shop-intellipay-config.component";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
-import { useSocket } from "../../contexts/SocketIO/useSocket.js";
-import ShopInfoNotificationsAutoadd from "./shop-info.notifications-autoadd.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoComponent);
@@ -158,7 +157,7 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
   return (
     <Card
       extra={
-        <Button type="primary" loading={saveLoading} onClick={() => form.submit()}>
+        <Button type="primary" loading={saveLoading} onClick={() => form.submit()} id="shop-info-save-button">
           {t("general.actions.save")}
         </Button>
       }

client/src/components/shop-info/shop-info.general.component.jsx

@@ -1,7 +1,6 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, DatePicker, Form, Input, InputNumber, Radio, Select, Space, Switch } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -15,11 +14,12 @@ import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-forma
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
+// eslint-disable-next-line no-undef
 const timeZonesList = Intl.supportedValuesOf("timeZone");
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoGeneral);
@@ -144,236 +144,246 @@ export function ShopInfoGeneral({ form, bodyshop }) {
           <InputNumber min={0} />
         </Form.Item>
       </LayoutFormRow>
-      <FeatureWrapper featureName="export" noauth={() => null}>
-        <LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
-          <Form.Item label={t("bodyshop.labels.qbo")} valuePropName="checked" name={["accountingconfig", "qbo"]}>
-            <Switch />
-          </Form.Item>
-          {InstanceRenderManager({
-            imex: (
-              <Form.Item shouldUpdate noStyle>
-                {() => (
+      <LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
+        {HasFeatureAccess({ featureName: "export", bodyshop }) && (
+          <>
+            <Form.Item label={t("bodyshop.labels.qbo")} valuePropName="checked" name={["accountingconfig", "qbo"]}>
+              <Switch />
+            </Form.Item>
+            {InstanceRenderManager({
+              imex: (
+                <Form.Item shouldUpdate noStyle>
+                  {() => (
+                    <Form.Item
+                      label={t("bodyshop.labels.qbo_usa")}
+                      shouldUpdate
+                      valuePropName="checked"
+                      name={["accountingconfig", "qbo_usa"]}
+                    >
+                      <Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
+                    </Form.Item>
+                  )}
+                </Form.Item>
+              )
+            })}
+            <Form.Item label={t("bodyshop.labels.qbo_departmentid")} name={["accountingconfig", "qbo_departmentid"]}>
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.labels.accountingtiers")}
+              rules={[
+                {
+                  required: true
+                  //message: t("general.validation.required"),
+                }
+              ]}
+              name={["accountingconfig", "tiers"]}
+            >
+              <Radio.Group>
+                <Radio value={2}>2</Radio>
+                <Radio value={3}>3</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item shouldUpdate>
+              {() => {
+                return (
                   <Form.Item
-                    label={t("bodyshop.labels.qbo_usa")}
+                    label={t("bodyshop.labels.2tiersetup")}
                     shouldUpdate
-                    valuePropName="checked"
-                    name={["accountingconfig", "qbo_usa"]}
+                    rules={[
+                      {
+                        required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
+                        //message: t("general.validation.required"),
+                      }
+                    ]}
+                    name={["accountingconfig", "twotierpref"]}
                   >
-                    <Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
+                    <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
+                      <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
+                      <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
+                    </Radio.Group>
                   </Form.Item>
-                )}
-              </Form.Item>
-            )
-          })}
-          <Form.Item label={t("bodyshop.labels.qbo_departmentid")} name={["accountingconfig", "qbo_departmentid"]}>
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.labels.accountingtiers")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["accountingconfig", "tiers"]}
-          >
-            <Radio.Group>
-              <Radio value={2}>2</Radio>
-              <Radio value={3}>3</Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
+                );
+              }}
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.labels.printlater")}
+              valuePropName="checked"
+              name={["accountingconfig", "printlater"]}
+            >
+              <Switch />
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.labels.emaillater")}
+              valuePropName="checked"
+              name={["accountingconfig", "emaillater"]}
+            >
+              <Switch />
+            </Form.Item>
+          </>
+        )}
+        <Form.Item
+          label={t("bodyshop.fields.inhousevendorid")}
+          name={"inhousevendorid"}
+          rules={[
+            {
+              required: true
+              //message: t("general.validation.required"),
+            }
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.default_adjustment_rate")}
+          name={"default_adjustment_rate"}
+          rules={[
+            {
+              required: true
+              //message: t("general.validation.required"),
+            }
+          ]}
+        >
+          <InputNumber min={0} precision={2} />
+        </Form.Item>
+        {InstanceRenderManager({
+          imex: (
+            <Form.Item label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
+              <Input />
+            </Form.Item>
+          )
+        })}
+        <Form.Item label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
+          <Input />
+        </Form.Item>
+        {HasFeatureAccess({ featureName: "bills", bodyshop }) && (
+          <>
+            {InstanceRenderManager({
+              imex: (
                 <Form.Item
-                  label={t("bodyshop.labels.2tiersetup")}
-                  shouldUpdate
+                  label={t("bodyshop.fields.invoice_federal_tax_rate")}
+                  name={["bill_tax_rates", "federal_tax_rate"]}
                   rules={[
                     {
-                      required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
+                      required: true
                       //message: t("general.validation.required"),
                     }
                   ]}
-                  name={["accountingconfig", "twotierpref"]}
                 >
-                  <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
-                    <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
-                    <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
-                  </Radio.Group>
+                  <InputNumber />
                 </Form.Item>
-              );
-            }}
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.labels.printlater")}
-            valuePropName="checked"
-            name={["accountingconfig", "printlater"]}
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.labels.emaillater")}
-            valuePropName="checked"
-            name={["accountingconfig", "emaillater"]}
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.inhousevendorid")}
-            name={"inhousevendorid"}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.default_adjustment_rate")}
-            name={"default_adjustment_rate"}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <InputNumber min={0} precision={2} />
-          </Form.Item>
-          {InstanceRenderManager({
-            imex: (
-              <Form.Item label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
+              )
+            })}
+            <Form.Item
+              label={t("bodyshop.fields.invoice_state_tax_rate")}
+              name={["bill_tax_rates", "state_tax_rate"]}
+              rules={[
+                {
+                  required: true
+                  //message: t("general.validation.required"),
+                }
+              ]}
+            >
+              <InputNumber />
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.fields.invoice_local_tax_rate")}
+              name={["bill_tax_rates", "local_tax_rate"]}
+              rules={[
+                {
+                  required: true
+                  //message: t("general.validation.required"),
+                }
+              ]}
+            >
+              <InputNumber />
+            </Form.Item>
+          </>
+        )}
+        <Form.Item
+          name={["md_payment_types"]}
+          label={t("bodyshop.fields.md_payment_types")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+              type: "array"
+            }
+          ]}
+        >
+          <Select mode="tags" />
+        </Form.Item>
+        <Form.Item
+          name={["md_categories"]}
+          label={t("bodyshop.fields.md_categories")}
+          rules={[
+            {
+              //message: t("general.validation.required"),
+              type: "array"
+            }
+          ]}
+        >
+          <Select mode="tags" />
+        </Form.Item>
+        {HasFeatureAccess({ featureName: "export", bodyshop }) && (
+          <>
+            <Form.Item
+              name={["accountingconfig", "ReceivableCustomField1"]}
+              label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
+            >
+              {ReceivableCustomFieldSelect}
+            </Form.Item>
+            <Form.Item
+              name={["accountingconfig", "ReceivableCustomField2"]}
+              label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
+            >
+              {ReceivableCustomFieldSelect}
+            </Form.Item>
+            <Form.Item
+              name={["accountingconfig", "ReceivableCustomField3"]}
+              label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
+            >
+              {ReceivableCustomFieldSelect}
+            </Form.Item>
+            <Form.Item
+              name={["md_classes"]}
+              label={t("bodyshop.fields.md_classes")}
+              rules={[
+                ({ getFieldValue }) => {
+                  return {
+                    required: getFieldValue("enforce_class"),
+                    //message: t("general.validation.required"),
+                    type: "array"
+                  };
+                }
+              ]}
+            >
+              <Select mode="tags" />
+            </Form.Item>
+            <Form.Item name={["enforce_class"]} label={t("bodyshop.fields.enforce_class")} valuePropName="checked">
+              <Switch />
+            </Form.Item>
+            {ClosingPeriod.treatment === "on" && (
+              <Form.Item
+                name={["accountingconfig", "ClosingPeriod"]}
+                label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
+              >
+                <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
+              </Form.Item>
+            )}
+            {ADPPayroll.treatment === "on" && (
+              <Form.Item name={["accountingconfig", "companyCode"]} label={t("bodyshop.fields.companycode")}>
                 <Input />
               </Form.Item>
-            )
-          })}
-          <Form.Item label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
-            <Input />
-          </Form.Item>
-          {InstanceRenderManager({
-            imex: (
-              <Form.Item
-                label={t("bodyshop.fields.invoice_federal_tax_rate")}
-                name={["bill_tax_rates", "federal_tax_rate"]}
-                rules={[
-                  {
-                    required: true
-                    //message: t("general.validation.required"),
-                  }
-                ]}
-              >
-                <InputNumber />
+            )}
+            {ADPPayroll.treatment === "on" && (
+              <Form.Item name={["accountingconfig", "batchID"]} label={t("bodyshop.fields.batchid")}>
+                <Input />
               </Form.Item>
-            )
-          })}
-          <Form.Item
-            label={t("bodyshop.fields.invoice_state_tax_rate")}
-            name={["bill_tax_rates", "state_tax_rate"]}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <InputNumber />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.invoice_local_tax_rate")}
-            name={["bill_tax_rates", "local_tax_rate"]}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <InputNumber />
-          </Form.Item>
-          <Form.Item
-            name={["md_payment_types"]}
-            label={t("bodyshop.fields.md_payment_types")}
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-                type: "array"
-              }
-            ]}
-          >
-            <Select mode="tags" />
-          </Form.Item>
-          <Form.Item
-            name={["md_categories"]}
-            label={t("bodyshop.fields.md_categories")}
-            rules={[
-              {
-                //message: t("general.validation.required"),
-                type: "array"
-              }
-            ]}
-          >
-            <Select mode="tags" />
-          </Form.Item>
-          <Form.Item name={["enforce_class"]} label={t("bodyshop.fields.enforce_class")} valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            name={["accountingconfig", "ReceivableCustomField1"]}
-            label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
-          >
-            {ReceivableCustomFieldSelect}
-          </Form.Item>
-          <Form.Item
-            name={["accountingconfig", "ReceivableCustomField2"]}
-            label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
-          >
-            {ReceivableCustomFieldSelect}
-          </Form.Item>
-          <Form.Item
-            name={["accountingconfig", "ReceivableCustomField3"]}
-            label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
-          >
-            {ReceivableCustomFieldSelect}
-          </Form.Item>
-          <Form.Item
-            name={["md_classes"]}
-            label={t("bodyshop.fields.md_classes")}
-            rules={[
-              ({ getFieldValue }) => {
-                return {
-                  required: getFieldValue("enforce_class"),
-                  //message: t("general.validation.required"),
-                  type: "array"
-                };
-              }
-            ]}
-          >
-            <Select mode="tags" />
-          </Form.Item>
-          {ClosingPeriod.treatment === "on" && (
-            <Form.Item
-              name={["accountingconfig", "ClosingPeriod"]}
-              label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
-            >
-              <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
-            </Form.Item>
-          )}
-          {ADPPayroll.treatment === "on" && (
-            <Form.Item name={["accountingconfig", "companyCode"]} label={t("bodyshop.fields.companycode")}>
-              <Input />
-            </Form.Item>
-          )}
-          {ADPPayroll.treatment === "on" && (
-            <Form.Item name={["accountingconfig", "batchID"]} label={t("bodyshop.fields.batchid")}>
-              <Input />
-            </Form.Item>
-          )}
-        </LayoutFormRow>
-      </FeatureWrapper>
+            )}
+          </>
+        )}
+      </LayoutFormRow>
       <FeatureWrapper featureName="scoreboard" noauth={() => null}>
         <LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")} id="scoreboardsetup">
           <Form.Item
@@ -823,7 +833,11 @@ export function ShopInfoGeneral({ form, bodyshop }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.labels.insurancecos")} id="insurancecos">
+      <LayoutFormRow
+        grow
+        header=<span id="insurancecos-header">{t("bodyshop.labels.insurancecos")}</span>
+        id="insurancecos"
+      >
         <Form.List name={["md_ins_cos"]}>
           {(fields, { add, remove, move }) => {
             return (

client/src/components/shop-info/shop-info.scheduling.component.jsx

@@ -13,7 +13,7 @@ import { ColorPicker } from "./shop-info.rostatus.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -22,7 +22,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
 
   return (
     <div>
-      <LayoutFormRow>
+      <LayoutFormRow id="shopinfo-scheduling">
         <Form.Item
           label={t("bodyshop.fields.appt_length")}
           name={"appt_length"}
@@ -44,6 +44,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
               //message: t("general.validation.required"),
             }
           ]}
+          id="schedule_start_time"
         >
           <TimePicker disableSeconds={true} format="HH:mm" />
         </Form.Item>
@@ -56,6 +57,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
               //message: t("general.validation.required"),
             }
           ]}
+          id="schedule_end_time"
         >
           <TimePicker disableSeconds={true} format="HH:mm" />
         </Form.Item>

client/src/components/shop-sub-status/shop-sub-status.component.jsx

@@ -16,5 +16,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShopSubStatus);
 export function ShopSubStatus({ bodyshop }) {
   const { t } = useTranslation();
   const { sub_status } = bodyshop;
-  return <Result status="403" title={t(`general.labels.sub_status.${sub_status}`)} />;
+  // ‘expired’ ‘trail-expired' are the valid sub_status values
+  return <Result status="403" title={t(`general.errors.sub_status.${sub_status}`)} />;
 }

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

@@ -0,0 +1,156 @@
+import { Virtuoso } from "react-virtuoso";
+import { Badge, Button, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { forwardRef, useMemo, useRef } from "react";
+import day from "../../utils/day.js";
+import "./task-center.styles.scss";
+import {
+  ArrowRightOutlined,
+  CalendarOutlined,
+  ClockCircleOutlined,
+  PlusCircleOutlined,
+  QuestionCircleOutlined
+} from "@ant-design/icons";
+
+const TaskCenterComponent = forwardRef(
+  ({ visible, tasks, loading, error, onTaskClick, onLoadMore, hasMore, createNewTask, incompleteTaskCount }, ref) => {
+    const { t } = useTranslation();
+    const virtuosoRef = useRef(null);
+
+    const sectionIcons = {
+      [t("tasks.labels.overdue")]: <ClockCircleOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.due_today")]: <CalendarOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.upcoming")]: <ArrowRightOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.no_due_date")]: <QuestionCircleOutlined style={{ marginRight: 8 }} />
+    };
+
+    const groups = useMemo(() => {
+      const now = day();
+      const today = now.startOf("day");
+
+      const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
+      const dueToday = tasks.filter((t) => t.due_date && day(t.due_date).isSame(today, "day"));
+      const upcoming = tasks.filter(
+        (t) => t.due_date && day(t.due_date).isAfter(today) && !day(t.due_date).isSame(today, "day")
+      );
+      const noDueDate = tasks.filter((t) => !t.due_date);
+
+      return [
+        { label: t("tasks.labels.overdue"), tasks: overdue },
+        { label: t("tasks.labels.due_today"), tasks: dueToday },
+        { label: t("tasks.labels.upcoming"), tasks: upcoming },
+        { label: t("tasks.labels.no_due_date"), tasks: noDueDate }
+      ].filter((group) => group.tasks.length > 0);
+    }, [tasks, t]);
+
+    const groupCounts = useMemo(() => groups.map((group) => group.tasks.length), [groups]);
+
+    const flatTasks = useMemo(() => groups.flatMap((group) => group.tasks), [groups]);
+
+    const priorityColors = {
+      1: "red",
+      2: "orange",
+      3: "green"
+    };
+
+    const getPriorityColor = (priority) => priorityColors[priority] || null;
+
+    const groupContent = (groupIndex) => {
+      const { label, tasks } = groups[groupIndex];
+      let displayCount = tasks.length;
+      if (label === t("tasks.labels.no_due_date")) {
+        displayCount =
+          incompleteTaskCount -
+          groups.reduce((sum, group, idx) => (idx !== groupIndex ? sum + group.tasks.length : sum), 0);
+      }
+      return (
+        <div className="section-title">
+          {sectionIcons[label]}
+          {label} ({displayCount})
+        </div>
+      );
+    };
+
+    const itemContent = (index) => {
+      const task = flatTasks[index];
+      const priorityColor = getPriorityColor(task.priority);
+      return (
+        <div
+          className="task-row"
+          onClick={() => onTaskClick(task.id)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              onTaskClick(task.id);
+            }
+          }}
+        >
+          <div className="task-title-cell">
+            <div className="task-row-container">
+              <div className="task-title">{task.title}</div>
+              <div className="task-ro-number">
+                {t("tasks.labels.ro-number", {
+                  ro_number: task.job?.ro_number || t("general.labels.na")
+                })}
+              </div>
+            </div>
+          </div>
+          <div className="task-due-cell">
+            {task.due_date && <span>{day(task.due_date).fromNow()}</span>}
+            {!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
+          </div>
+        </div>
+      );
+    };
+
+    if (error) {
+      return (
+        <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
+          <div className="task-header">
+            <h3>{t("tasks.labels.my_tasks_center")}</h3>
+          </div>
+          <div className="error-message">{t("tasks.errors.load_failed")}</div>
+        </div>
+      );
+    }
+
+    return (
+      <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
+        <div className="task-header">
+          <Badge count={incompleteTaskCount} size="medium" offset={[13, -5]}>
+            <h3>{t("tasks.labels.my_tasks_center")}</h3>
+          </Badge>
+          <div className="task-header-actions">
+            <Button className="create-task-button" type="link" icon={<PlusCircleOutlined />} onClick={createNewTask} />
+            {loading && <Spin spinning={loading} size="small" />}
+          </div>
+        </div>
+
+        {tasks.length === 0 && !loading ? (
+          <div className="no-tasks-message">{t("tasks.labels.no_tasks")}</div>
+        ) : (
+          <Virtuoso
+            ref={virtuosoRef}
+            style={{ height: "550px", width: "100%" }}
+            groupCounts={groupCounts}
+            groupContent={groupContent}
+            itemContent={itemContent}
+            endReached={hasMore && !loading ? onLoadMore : undefined}
+            components={{
+              Footer: () =>
+                loading ? (
+                  <div className="loading-footer">
+                    <Spin />
+                  </div>
+                ) : null
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+TaskCenterComponent.displayName = "TaskCenterComponent";
+export default TaskCenterComponent;

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

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery } from "@apollo/client";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { INITIAL_TASKS, TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket";
+import { useIsEmployee } from "../../utils/useIsEmployee";
+import TaskCenterComponent from "./task-center.component";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { QUERY_TASKS_NO_DUE_DATE_PAGINATED, QUERY_TASKS_WITH_DUE_DATES } from "../../graphql/tasks.queries";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
+});
+
+const TaskCenterContainer = ({
+  visible,
+  onClose,
+  bodyshop,
+  currentUser,
+  setTaskUpsertContext,
+  incompleteTaskCount
+}) => {
+  const [tasks, setTasks] = useState([]);
+  const { isConnected } = useSocket();
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
+
+  const assignedToId = useMemo(() => {
+    const employee = bodyshop?.employees?.find((e) => e.user_email === currentUser?.email);
+    return employee?.id || null;
+  }, [bodyshop, currentUser]);
+
+  // Query 1: Tasks with due dates
+  const {
+    data: dueDateData,
+    loading: dueLoading,
+    error: dueError
+  } = useQuery(QUERY_TASKS_WITH_DUE_DATES, {
+    variables: {
+      bodyshop: bodyshop?.id,
+      assigned_to: assignedToId,
+      order: [{ due_date: "asc" }, { created_at: "desc" }]
+    },
+    skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
+    fetchPolicy: "cache-and-network",
+    pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL
+  });
+
+  // Query 2: Tasks with no due date (paginated)
+  const {
+    data: noDueDateData,
+    loading: noDueLoading,
+    error: noDueError,
+    fetchMore
+  } = useQuery(QUERY_TASKS_NO_DUE_DATE_PAGINATED, {
+    variables: {
+      bodyshop: bodyshop?.id,
+      assigned_to: assignedToId,
+      order: [{ priority: "asc" }, { created_at: "desc" }],
+      limit: INITIAL_TASKS, // Adjust this constant as needed
+      offset: 0
+    },
+    skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
+    fetchPolicy: "cache-and-network",
+    pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL
+  });
+
+  // Combine tasks from both queries
+  useEffect(() => {
+    const dueDateTasks = dueDateData?.tasks || [];
+    const noDueDateTasks = noDueDateData?.tasks || [];
+    setTasks([...dueDateTasks, ...noDueDateTasks]);
+  }, [dueDateData, noDueDateData]);
+
+  const noDueDateLength = noDueDateData?.tasks?.length || 0;
+  const totalNoDueDate = noDueDateData?.tasks_aggregate?.aggregate?.count || 0;
+  const hasMore = noDueDateLength < totalNoDueDate;
+
+  // Handle pagination for no-due-date tasks
+  const handleLoadMore = () => {
+    fetchMore({
+      variables: {
+        offset: noDueDateData?.tasks?.length || 0
+      },
+      updateQuery: (prev, { fetchMoreResult }) => {
+        if (!fetchMoreResult) return prev;
+        return {
+          ...prev,
+          tasks: [...prev.tasks, ...fetchMoreResult.tasks],
+          tasks_aggregate: fetchMoreResult.tasks_aggregate
+        };
+      }
+    });
+  };
+
+  const handleTaskClick = useCallback(
+    (id) => {
+      const task = tasks.find((t) => t.id === id);
+      if (task) {
+        setTaskUpsertContext({
+          context: {
+            existingTask: task
+          }
+        });
+      }
+    },
+    [tasks, setTaskUpsertContext]
+  );
+
+  const createNewTask = () => {
+    setTaskUpsertContext({ actions: {}, context: {} });
+  };
+
+  return (
+    <TaskCenterComponent
+      visible={visible}
+      onClose={onClose}
+      tasks={tasks}
+      loading={dueLoading || noDueLoading}
+      error={dueError || noDueError}
+      onTaskClick={handleTaskClick}
+      onLoadMore={handleLoadMore}
+      hasMore={hasMore}
+      createNewTask={createNewTask}
+      incompleteTaskCount={incompleteTaskCount}
+    />
+  );
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskCenterContainer);

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

@@ -0,0 +1,147 @@
+.task-center {
+  position: absolute;
+  top: 64px;
+  right: 0;
+  width: 500px;
+  max-width: 500px;
+  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;
+  }
+
+  .task-header {
+    padding: 4px 10px;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #fafafa;
+
+    h3 {
+      font-size: 14px;
+      margin: 0;
+    }
+
+    .create-task-button {
+      border: none;
+      color: white;
+      padding: 4px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 500;
+
+      &:hover {
+        background-color: #40a9ff;
+      }
+    }
+  }
+
+  .task-section {
+    margin: 0;
+    padding: 0;
+  }
+
+  .section-title {
+    padding: 0px 10px;
+    margin: 0px;
+    //font-size: 12px;
+    background: #f5f5f5;
+    font-weight: 650;
+    border-bottom: 1px solid #e8e8e8;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .task-row-container {
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  .task-row {
+    cursor: pointer;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    &:hover {
+      background: #f5f5f5;
+    }
+
+    .task-title-cell {
+      flex: 1;
+      padding: 6px 8px;
+      vertical-align: top;
+      //font-size: 12px;
+      line-height: 1.2;
+      max-width: 350px; // or whatever fits your layout
+
+      .task-title {
+        font-size: 16px;
+        font-weight: 550;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%; // Or a specific width if you want more control
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      .task-ro-number {
+        margin-top: 20px;
+        color: #1677ff;
+      }
+    }
+
+    .task-due-cell {
+      padding: 6px 8px;
+      vertical-align: top;
+      //font-size: 12px;
+      line-height: 1.2;
+      text-align: right;
+      white-space: nowrap;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  button {
+    margin: 8px auto;
+    padding: 4px 10px;
+    background-color: #1677ff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    //font-size: 12px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #4096ff;
+    }
+
+    &:disabled {
+      background-color: #d9d9d9;
+      cursor: not-allowed;
+    }
+  }
+
+  .no-tasks-message,
+  .error-message {
+    padding: 16px;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.45);
+  }
+
+  .loading-footer {
+    padding: 16px;
+    text-align: center;
+  }
+}

client/src/components/task-list/task-list.component.jsx

@@ -4,13 +4,12 @@ import {
   DeleteFilled,
   DeleteOutlined,
   EditFilled,
-  ExclamationCircleFilled,
   PlusCircleFilled,
   SyncOutlined
 } from "@ant-design/icons";
 import { Button, Card, Space, Switch, Table } from "antd";
 import queryString from "query-string";
-import React, { useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -19,6 +18,7 @@ import { pageLimit } from "../../utils/config";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter.jsx";
 import dayjs from "../../utils/day";
 import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
+import PriorityLabel from "../../utils/tasksPriorityLabel.jsx";
 
 /**
  * Task List Component
@@ -54,47 +54,12 @@ const RemindAtRecord = ({ remindAt }) => {
   );
 };
 
-/**
- * Priority Label Component
- * @param priority
- * @returns {Element}
- * @constructor
- */
-const PriorityLabel = ({ priority }) => {
-  switch (priority) {
-    case 1:
-      return (
-        <div>
-          High <ExclamationCircleFilled style={{ marginLeft: "5px", color: "red" }} />
-        </div>
-      );
-    case 2:
-      return (
-        <div>
-          Medium <ExclamationCircleFilled style={{ marginLeft: "5px", color: "yellow" }} />
-        </div>
-      );
-    case 3:
-      return (
-        <div>
-          Low <ExclamationCircleFilled style={{ marginLeft: "5px", color: "green" }} />
-        </div>
-      );
-    default:
-      return (
-        <div>
-          None <ExclamationCircleFilled style={{ marginLeft: "5px" }} />
-        </div>
-      );
-  }
-};
-
 const mapDispatchToProps = (dispatch) => ({
   // Existing dispatch props...
   setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = () => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(TaskListComponent);
 

client/src/components/task-list/task-list.container.jsx

@@ -4,7 +4,6 @@ import { useMutation, useQuery } from "@apollo/client";
 import { MUTATION_TOGGLE_TASK_COMPLETED, MUTATION_TOGGLE_TASK_DELETED } from "../../graphql/tasks.queries.js";
 import { pageLimit } from "../../utils/config.js";
 import AlertComponent from "../alert/alert.component.jsx";
-import React from "react";
 import TaskListComponent from "./task-list.component.jsx";
 import { useTranslation } from "react-i18next";
 import { connect, useDispatch } from "react-redux";
@@ -20,7 +19,7 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
 });
 
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(TaskListContainer);
 
@@ -55,8 +54,8 @@ export function TaskListContainer({
       bodyshop: bodyshop.id,
       [relationshipType]: relationshipId,
       deleted: deleted === "true",
-      completed: completed === "true", //TODO: Find where mine is set.
-      assigned_to: onlyMine ? bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id : undefined, // replace currentUserID with the actual ID of the current user
+      completed: completed === "true",
+      assigned_to: onlyMine ? bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id : undefined,
       offset: page ? (page - 1) * pageLimit : 0,
       limit: pageLimit,
       order: [

client/src/components/task-upsert-modal/task-upsert-modal.component.jsx

@@ -1,5 +1,4 @@
 import { Col, Form, Input, Row, Select, Switch } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
@@ -8,6 +7,7 @@ import { connect } from "react-redux";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component.jsx";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import { Link } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -42,7 +42,7 @@ export function TaskUpsertModalComponent({
   ];
 
   const generatePresets = (job) => {
-    if (!job || !selectedJobDetails) return datePickerPresets; // return default presets if no job selected
+    if (!job || !selectedJobDetails) return datePickerPresets;
     const relativePresets = [];
 
     if (selectedJobDetails?.scheduled_completion) {
@@ -97,13 +97,8 @@ export function TaskUpsertModalComponent({
     });
   };
 
-  /**
-   * Change the selected job id
-   * @param jobId
-   */
   const changeJobId = (jobId) => {
     setSelectedJobId(jobId || null);
-    // Reset the form fields when selectedJobId changes
     clearRelations();
   };
 
@@ -163,6 +158,13 @@ export function TaskUpsertModalComponent({
                 required: true
               }
             ]}
+            extra={
+              existingTask && selectedJobId ? (
+                <div style={{ textAlign: "right" }}>
+                  <Link to={`/manage/jobs/${selectedJobId}`}>{t("tasks.labels.go_to_job")}</Link>
+                </div>
+              ) : null
+            }
           >
             <JobSearchSelectComponent
               placeholder={t("tasks.placeholders.jobid")}
@@ -203,7 +205,18 @@ export function TaskUpsertModalComponent({
           </Form.Item>
         </Col>
         <Col span={8}>
-          <Form.Item label={t("tasks.fields.billid")} name="billid">
+          <Form.Item
+            label={t("tasks.fields.billid")}
+            name="billid"
+            extra={
+              form.getFieldValue("billid") ? (
+                <Link to={`/manage/bills?billid=${form.getFieldValue("billid")}`}>
+                  {t("tasks.links.go_to_bill")} (
+                  {selectedJobDetails?.bills?.find((bill) => bill.id === form.getFieldValue("billid"))?.invoice_number})
+                </Link>
+              ) : null
+            }
+          >
             <Select
               allowClear
               placeholder={t("tasks.placeholders.billid")}

client/src/components/task-upsert-modal/task-upsert-modal.container.jsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form, Modal } 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";

client/src/contexts/SocketIO/socketProvider.jsx

@@ -1,4 +1,3 @@
-// SocketProvider.js
 import { useEffect, useRef, useState } from "react";
 import SocketIO from "socket.io-client";
 import { auth } from "../../firebase/firebase.utils";
@@ -16,7 +15,9 @@ import {
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { SocketContext, INITIAL_NOTIFICATIONS } from "./useSocket.js";
+import { INITIAL_NOTIFICATIONS, SocketContext } from "./useSocket.js";
+
+const LIMIT = INITIAL_NOTIFICATIONS;
 
 /**
  * Socket Provider - Scenario Notifications / Web Socket related items
@@ -167,12 +168,88 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
         switch (message.type) {
           case "alert-update":
             store.dispatch(addAlerts(message.payload));
+            break;
+          case "task-created":
+          case "task-updated":
+          case "task-deleted":
+            const payload = message.payload;
+            const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser?.email)?.id;
+            if (!assignedToId || payload.assigned_to !== assignedToId) return;
+
+            const dueVars = {
+              bodyshop: bodyshop?.id,
+              assigned_to: assignedToId,
+              order: [{ due_date: "asc" }, { created_at: "desc" }]
+            };
+            const noDueVars = {
+              bodyshop: bodyshop?.id,
+              assigned_to: assignedToId,
+              order: [{ created_at: "desc" }],
+              limit: LIMIT,
+              offset: 0
+            };
+
+            const whereBase = {
+              bodyshopid: { _eq: bodyshop?.id },
+              assigned_to: { _eq: assignedToId },
+              deleted: { _eq: false },
+              completed: { _eq: false }
+            };
+            const whereDue = { ...whereBase, due_date: { _is_null: false } };
+            const whereNoDue = { ...whereBase, due_date: { _is_null: true } };
+
+            // Helper to invalidate a cache entry
+            const invalidateCache = (fieldName, args) => {
+              try {
+                client.cache.evict({
+                  id: "ROOT_QUERY",
+                  fieldName,
+                  args
+                });
+              } catch (error) {
+                console.error("Error invalidating cache:", error);
+              }
+            };
+
+            // Invalidate lists and aggregates based on event type
+            if (message.type === "task-deleted" || message.type === "task-updated") {
+              // Invalidate both lists and no due aggregate for deletes and updates
+              invalidateCache("tasks", { where: whereDue, order_by: dueVars.order });
+              invalidateCache("tasks", {
+                where: whereNoDue,
+                order_by: noDueVars.order,
+                limit: noDueVars.limit,
+                offset: noDueVars.offset
+              });
+              invalidateCache("tasks_aggregate", { where: whereNoDue });
+            } else if (message.type === "task-created") {
+              // For creates, invalidate the target list and no due aggregate if applicable
+              const hasDue = !!payload.due_date;
+              if (hasDue) {
+                invalidateCache("tasks", { where: whereDue, order_by: dueVars.order });
+              } else {
+                invalidateCache("tasks", {
+                  where: whereNoDue,
+                  order_by: noDueVars.order,
+                  limit: noDueVars.limit,
+                  offset: noDueVars.offset
+                });
+                invalidateCache("tasks_aggregate", { where: whereNoDue });
+              }
+            }
+
+            // Always invalidate the total count for all events (handles creates, deletes, updates including completions)
+            invalidateCache("tasks_aggregate", { where: whereBase });
+
+            // Garbage collect after evictions
+            client.cache.gc();
+
             break;
           default:
             break;
         }
       };
-
+      
       const handleConnect = () => {
         socketInstance.emit("join-bodyshop-room", bodyshop.id);
         setClientId(socketInstance.id);

client/src/contexts/SocketIO/useSocket.js

@@ -3,6 +3,8 @@ import { createContext, useContext } from "react";
 const SocketContext = createContext(null);
 
 const INITIAL_NOTIFICATIONS = 10;
+const INITIAL_TASKS = 5;
+const TASKS_CENTER_POLL_INTERVAL = 60 * 60 * 1000; // 1 hour in milliseconds
 
 const useSocket = () => {
   const context = useContext(SocketContext);
@@ -10,4 +12,4 @@ const useSocket = () => {
   return context;
 };
 
-export { SocketContext, INITIAL_NOTIFICATIONS, useSocket };
+export { SocketContext, INITIAL_NOTIFICATIONS, INITIAL_TASKS, TASKS_CENTER_POLL_INTERVAL, useSocket };

client/src/graphql/bodyshop.queries.js

@@ -312,7 +312,6 @@ export const QUERY_INTAKE_CHECKLIST = gql`
       intakechecklist
       status
       owner {
-        allow_text_message
         id
       }
       labhrs: joblines_aggregate(where: { _and: [{ mod_lbr_ty: { _neq: "LAR" } }, { removed: { _eq: false } }] }) {

client/src/graphql/conversations.queries.js

@@ -43,6 +43,7 @@ export const CONVERSATION_SUBSCRIPTION_BY_PK = gql`
       id
       status
       text
+      is_system
       isoutbound
       image
       image_path
@@ -77,6 +78,7 @@ export const GET_CONVERSATION_DETAILS = gql`
         id
         status
         text
+        is_system
         isoutbound
         image
         image_path

client/src/graphql/jobs.queries.js

@@ -874,7 +874,6 @@ export const QUERY_JOB_CARD_DETAILS = gql`
       }
       owner {
         id
-        allow_text_message
         preferred_contact
         tax_number
       }
@@ -2071,7 +2070,6 @@ export const QUERY_JOB_CHECKLISTS = gql`
       production_vars
       owner {
         id
-        allow_text_message
       }
       bodyshop {
         id
@@ -2428,7 +2426,6 @@ export const QUERY_PARTS_QUEUE_CARD_DETAILS = gql`
       ownr_ph2
       owner {
         id
-        allow_text_message
         preferred_contact
         tax_number
       }

client/src/graphql/owners.queries.js

@@ -49,7 +49,6 @@ export const QUERY_OWNER_BY_ID = gql`
     owners_by_pk(id: $id) {
       id
       accountingid
-      allow_text_message
       ownr_addr1
       ownr_addr2
       ownr_co_nm
@@ -104,7 +103,6 @@ export const QUERY_ALL_OWNERS = gql`
   query QUERY_ALL_OWNERS {
     owners {
       id
-      allow_text_message
       created_at
       ownr_addr1
       ownr_addr2
@@ -129,7 +127,6 @@ export const QUERY_ALL_OWNERS_PAGINATED = gql`
   query QUERY_ALL_OWNERS_PAGINATED($search: String, $offset: Int, $limit: Int, $order: [owners_order_by!]!) {
     search_owners(args: { search: $search }, offset: $offset, limit: $limit, order_by: $order) {
       id
-      allow_text_message
       created_at
       ownr_addr1
       ownr_addr2

client/src/graphql/phone-number-opt-out.queries.js

@@ -27,6 +27,20 @@ export const GET_PHONE_NUMBER_OPT_OUTS = gql`
   }
 `;
 
+export const GET_PHONE_NUMBER_OPT_OUTS_BY_NUMBERS = gql`
+  query GET_PHONE_NUMBER_OPT_OUTS_BY_NUMBERS($bodyshopid: uuid!, $phone_numbers: [String!]) {
+    phone_number_opt_out(
+      where: { bodyshopid: { _eq: $bodyshopid }, phone_number: { _in: $phone_numbers } }
+    ) {
+      id
+      bodyshopid
+      phone_number
+      created_at
+      updated_at
+    }
+  }
+`;
+
 export const SEARCH_OWNERS_BY_PHONE_NUMBERS = gql`
   query SEARCH_OWNERS_BY_PHONE_NUMBERS($bodyshopid: uuid!, $phone_numbers: [String!]) {
     owners(

client/src/graphql/tasks.queries.js

@@ -67,6 +67,105 @@ export const PARTIAL_TASK_FIELDS = gql`
   }
 `;
 
+export const PARTIAL_TASK_CENTER_FIELDS = gql`
+  fragment PartialTaskFields on tasks {
+    id
+    title
+    description
+    due_date
+    priority
+    jobid
+    job {
+      ro_number
+    }
+    joblineid
+    partsorderid
+    billid
+    remind_at
+    created_at
+    assigned_to
+    bodyshopid
+    deleted
+    completed
+  }
+`;
+
+export const QUERY_TASKS_WITH_DUE_DATES = gql`
+  ${PARTIAL_TASK_CENTER_FIELDS}
+  query QUERY_TASKS_WITH_DUE_DATES($bodyshop: uuid!, $assigned_to: uuid!, $order: [tasks_order_by!]!) {
+    tasks(
+      where: {
+        bodyshopid: { _eq: $bodyshop }
+        assigned_to: { _eq: $assigned_to }
+        deleted: { _eq: false }
+        completed: { _eq: false }
+        due_date: { _is_null: false }
+      }
+      order_by: $order
+    ) {
+      ...PartialTaskFields
+    }
+  }
+`;
+export const QUERY_TASKS_NO_DUE_DATE_PAGINATED = gql`
+  ${PARTIAL_TASK_CENTER_FIELDS}
+  query QUERY_TASKS_NO_DUE_DATE_PAGINATED(
+    $bodyshop: uuid!
+    $assigned_to: uuid!
+    $order: [tasks_order_by!]!
+    $limit: Int!
+    $offset: Int!
+  ) {
+    tasks(
+      where: {
+        bodyshopid: { _eq: $bodyshop }
+        assigned_to: { _eq: $assigned_to }
+        deleted: { _eq: false }
+        completed: { _eq: false }
+        due_date: { _is_null: true }
+      }
+      order_by: $order
+      limit: $limit
+      offset: $offset
+    ) {
+      ...PartialTaskFields
+    }
+    tasks_aggregate(
+      where: {
+        bodyshopid: { _eq: $bodyshop }
+        assigned_to: { _eq: $assigned_to }
+        deleted: { _eq: false }
+        completed: { _eq: false }
+        due_date: { _is_null: true }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+/**
+ * Query to get the count of my tasks
+ * @type {DocumentNode}
+ */
+export const QUERY_MY_TASKS_COUNT = gql`
+  query QUERY_MY_TASKS_COUNT($assigned_to: uuid!, $bodyshopid: uuid!) {
+    tasks_aggregate(
+      where: {
+        assigned_to: { _eq: $assigned_to }
+        bodyshopid: { _eq: $bodyshopid }
+        completed: { _eq: false }
+        deleted: { _eq: false }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
 export const QUERY_GET_TASK_BY_ID = gql`
   ${PARTIAL_TASK_FIELDS}
   query QUERY_GET_TASK_BY_ID($id: uuid!) {
@@ -287,6 +386,43 @@ export const QUERY_JOB_TASKS_PAGINATED = gql`
   }
 `;
 
+export const QUERY_MY_ACTIVE_TASKS_PAGINATED = gql`
+  ${PARTIAL_TASK_FIELDS}
+  query QUERY_MY_ACTIVE_TASKS_PAGINATED(
+    $assigned_to: uuid!
+    $bodyshop: uuid!
+    $offset: Int
+    $limit: Int
+    $order: [tasks_order_by!]!
+  ) {
+    tasks(
+      offset: $offset
+      limit: $limit
+      order_by: $order
+      where: {
+        assigned_to: { _eq: $assigned_to }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: false }
+        completed: { _eq: false }
+      }
+    ) {
+      ...TaskFields
+    }
+    tasks_aggregate(
+      where: {
+        assigned_to: { _eq: $assigned_to }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: false }
+        completed: { _eq: false }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
 export const QUERY_MY_TASKS_PAGINATED = gql`
   ${PARTIAL_TASK_FIELDS}
   query QUERY_MY_TASKS_PAGINATED(

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -114,7 +114,6 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     if (!!!job.ownerid) {
       ownerData = job.owner.data;
       ownerData.shopid = bodyshop.id;
-      delete ownerData.allow_text_message;
       delete ownerData.preferred_contact;
       delete job.ownerid;
     } else {

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -14,7 +14,7 @@ import { Badge, Button, Divider, Form, Space, Tabs } from "antd";
 import Axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaHardHat, FaRegStickyNote, FaShieldAlt, FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
@@ -28,6 +28,7 @@ import JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal
 import JobProfileDataWarning from "../../components/job-profile-data-warning/job-profile-data-warning.component";
 import JobReconciliationModal from "../../components/job-reconciliation-modal/job-reconciliation.modal.container";
 import JobSyncButton from "../../components/job-sync-button/job-sync-button.component";
+import JobWatcherToggleContainer from "../../components/job-watcher-toggle/job-watcher-toggle.container.jsx";
 import JobsChangeStatus from "../../components/jobs-change-status/jobs-change-status.component";
 import JobsConvertButton from "../../components/jobs-convert-button/jobs-convert-button.component";
 import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component";
@@ -45,6 +46,8 @@ import LockWrapperComponent from "../../components/lock-wrapper/lock-wrapper.com
 import NoteUpsertModalComponent from "../../components/note-upsert-modal/note-upsert-modal.container";
 import ScheduleJobModalContainer from "../../components/schedule-job-modal/schedule-job-modal.container";
 import TaskListContainer from "../../components/task-list/task-list.container.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { QUERY_PARTS_BILLS_BY_JOBID } from "../../graphql/bills.queries.js";
 import { QUERY_JOB_TASKS_PAGINATED } from "../../graphql/tasks.queries.js";
 import { insertAuditTrail } from "../../redux/application/application.actions";
@@ -55,9 +58,6 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormat } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
 import UndefinedToNull from "../../utils/undefinedtonull";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-import { useSocket } from "../../contexts/SocketIO/useSocket.js";
-import JobWatcherToggleContainer from "../../components/job-watcher-toggle/job-watcher-toggle.container.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -322,11 +322,11 @@ export function JobsDetailPage({
       >
         <PageHeader
           // onBack={() => window.history.back()}
-
+          id="job-detail-header"
           title={
             <Space>
               {scenarioNotificationsOn && <JobWatcherToggleContainer job={job} />}
-              {job.ro_number || t("general.labels.na")}
+              <span id="job-ro_number">{job.ro_number || t("general.labels.na")}</span>
             </Space>
           }
           extra={menuExtra}

client/src/pages/scoreboard/scoreboard.page.container.jsx

@@ -1,7 +1,7 @@
 import Icon, { FieldTimeOutlined } from "@ant-design/icons";
 import { Card, Tabs } from "antd";
 import queryString from "query-string";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { FaShieldAlt } from "react-icons/fa";
 import { connect } from "react-redux";
@@ -78,7 +78,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
       <RbacWrapper action="scoreboard:view">
         <Tabs
           activeKey={tab || "sb"}
-          destroyInactiveTabPane
+          destroyOnHidden
           onChange={(key) => {
             searchParams.tab = key;
             history({

client/src/pages/shop/shop.page.component.jsx

@@ -92,13 +92,15 @@ export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
     });
   }
 
-  // Add Consent Settings tab
-  items.push({
-    key: "consent",
-    label: t("bodyshop.labels.consent_settings"),
-    children: <ShopInfoConsentComponent bodyshop={bodyshop} />
-  });
-
+  if (bodyshop.messagingservicesid) {
+    // Add Consent Settings tab
+    items.push({
+      key: "consent",
+      label: t("bodyshop.labels.consent_settings"),
+      children: <ShopInfoConsentComponent bodyshop={bodyshop} />
+    });
+  }
+  
   return (
     <RbacWrapper action="shop:config">
       <Tabs activeKey={search.tab} onChange={(key) => history({ search: `?tab=${key}` })} items={items} />

client/src/pages/tasks/allTasksPageContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import TasksPageComponent from "./tasks.page.component";
 import queryString from "query-string";

client/src/pages/tasks/myTasksPageContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import TasksPageComponent from "./tasks.page.component";
 

client/src/pages/tasks/tasks.page.component.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import TaskListContainer from "../../components/task-list/task-list.container.jsx";
 import { QUERY_ALL_TASKS_PAGINATED, QUERY_MY_TASKS_PAGINATED } from "../../graphql/tasks.queries.js";
 import taskPageTypes from "./taskPageTypes.jsx";
@@ -10,7 +9,7 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(TasksPageComponent);
 

client/src/translations/en_us/common.json

@@ -775,7 +775,6 @@
       },
       "labels": {
         "addtoproduction": "Add Job to Production?",
-        "allow_text_message": "Permission to Text?",
         "checklist": "Checklist",
         "printpack": "Job Intake Print Pack",
         "removefromproduction": "Remove Job from Production?"
@@ -1231,7 +1230,11 @@
         "fcm": "You must allow notification permissions to have real time messaging.  Click to try again.",
         "notfound": "No record was found.",
         "sizelimit": "The selected items exceed the size limit.",
-        "submit-for-testing": "Error submitting Job for testing."
+        "submit-for-testing": "Error submitting Job for testing.",
+        "sub_status": {
+          "expired": "The subscription for this shop has expired. Please contact Sales to reactivate.",
+          "trial-expired": "The trial for this shop has expired. Please contact Sales to reactivate."
+        }
       },
       "itemtypes": {
         "contract": "CC Contract",
@@ -2382,7 +2385,7 @@
         "invalidphone": "The phone number is invalid.  Unable to open conversation. ",
         "noattachedjobs": "No Jobs have been associated to this conversation. ",
         "updatinglabel": "Error updating label. {{error}}",
-        "no_consent": "This phone number has Opted-out of Messaging."
+        "no_consent": "This phone number has opted-out of Messaging."
       },
       "labels": {
         "addlabel": "Add a label to this conversation.",
@@ -2399,7 +2402,7 @@
         "sentby": "Sent by {{by}} at {{time}}",
         "typeamessage": "Send a message...",
         "unarchive": "Unarchive",
-        "no_consent": "Opt-out"
+        "no_consent": "Opted-out"
       },
       "render": {
         "conversation_list": "Conversation List"
@@ -2524,7 +2527,6 @@
       "fields": {
         "accountingid": "Accounting ID",
         "address": "Address",
-        "allow_text_message": "Permission to Text?",
         "name": "Name",
         "note": "Owner Note",
         "ownr_addr1": "Address",
@@ -3293,6 +3295,16 @@
       }
     },
     "tasks": {
+      "labels": {
+        "my_tasks_center": "Task Center",
+        "go_to_job": "Go to Job",
+        "overdue": "Overdue",
+        "due_today": "Today",
+        "upcoming": "Upcoming",
+        "no_due_date": "Incomplete",
+        "ro-number": "RO #{{ro_number}}",
+        "no_tasks": "No Tasks Found"
+      },
       "actions": {
         "edit": "Edit Task",
         "new": "New Task",
@@ -3307,6 +3319,9 @@
         "myTasks": "Mine",
         "refresh": "Refresh"
       },
+      "errors": {
+        "load_failure": "Failed to load Tasks."
+      },
       "date_presets": {
         "completion": "Completion",
         "day": "Day",
@@ -3876,7 +3891,8 @@
       "created_at": "Opt-Out Date",
       "no_owners": "No Associated Owners",
       "phone_1": "Phone 1",
-      "phone_2": "Phone 2"
+      "phone_2": "Phone 2",
+      "text_body": "Users can opt out of receiving SMS messages by replying with keywords such as STOP, UNSUBSCRIBE, CANCEL, END, QUIT, STOPALL, REVOKE and OPTOUT. To opt back in, users can reply with START, YES, or UNSTOP. Even after opting out, users can still send messages to us, which will be received and processed as needed. Ensure customers are informed to reply with these keywords to manage their messaging preferences. After opting out, users receive a confirmation message and will not receive further messages until they opt back in."
     },
     "settings": {
       "title": "Phone Number Opt-Out List"

client/src/translations/es/common.json

@@ -775,7 +775,6 @@
       },
       "labels": {
         "addtoproduction": "",
-        "allow_text_message": "",
         "checklist": "",
         "printpack": "",
         "removefromproduction": ""
@@ -1231,7 +1230,11 @@
         "fcm": "",
         "notfound": "",
         "sizelimit": "",
-        "submit-for-testing": ""
+        "submit-for-testing": "",
+        "sub_status": {
+          "expired": "",
+          "trial-expired": ""
+        }
       },
       "itemtypes": {
         "contract": "",
@@ -2526,7 +2529,6 @@
       "fields": {
         "accountingid": "",
         "address": "Dirección",
-        "allow_text_message": "Permiso de texto?",
         "name": "Nombre",
         "note": "",
         "ownr_addr1": "Dirección",
@@ -3295,6 +3297,16 @@
       }
     },
     "tasks": {
+      "labels": {
+        "my_tasks_center": "",
+        "go_to_job": "",
+        "overdue": "",
+        "due_today": "",
+        "upcoming": "",
+        "no_due_date": "",
+        "ro-number": "",
+        "no_tasks": ""
+      },
       "actions": {
         "edit": "",
         "new": "",
@@ -3309,6 +3321,9 @@
         "myTasks": "",
         "refresh": ""
       },
+      "errors": {
+        "load_failure": ""
+      },
       "date_presets": {
         "completion": "",
         "day": "",
@@ -3878,7 +3893,8 @@
       "created_at": "",
       "no_owners": "",
       "phone_1": "",
-      "phone_2": ""
+      "phone_2": "",
+      "text_body": ""
     },
     "settings": {
       "title": ""

client/src/translations/fr/common.json

@@ -775,7 +775,6 @@
       },
       "labels": {
         "addtoproduction": "",
-        "allow_text_message": "",
         "checklist": "",
         "printpack": "",
         "removefromproduction": ""
@@ -1231,7 +1230,11 @@
         "fcm": "",
         "notfound": "",
         "sizelimit": "",
-        "submit-for-testing": ""
+        "submit-for-testing": "",
+        "sub_status": {
+          "expired": "",
+          "trial-expired": ""
+        }
       },
       "itemtypes": {
         "contract": "",
@@ -2526,7 +2529,6 @@
       "fields": {
         "accountingid": "",
         "address": "Adresse",
-        "allow_text_message": "Autorisation de texte?",
         "name": "Prénom",
         "note": "",
         "ownr_addr1": "Adresse",
@@ -3295,6 +3297,16 @@
       }
     },
     "tasks": {
+      "labels": {
+        "my_tasks_center": "",
+        "go_to_job": "",
+        "overdue": "",
+        "due_today": "",
+        "upcoming": "",
+        "no_due_date": "",
+        "ro-number": "",
+        "no_tasks": ""
+      },
       "actions": {
         "edit": "",
         "new": "",
@@ -3309,6 +3321,9 @@
         "myTasks": "",
         "refresh": ""
       },
+      "errors": {
+        "load_failure": ""
+      },
       "date_presets": {
         "completion": "",
         "day": "",
@@ -3878,7 +3893,8 @@
       "created_at": "Opt-Out Date",
       "no_owners": "No Associated Owners",
       "phone_1": "Phone 1",
-      "phone_2": "Phone 2"
+      "phone_2": "Phone 2",
+      "text_body": ""
     },
     "settings": {
       "title": ""

client/src/utils/phoneOptOutService.js

@@ -0,0 +1,48 @@
+import { phone } from "phone";
+import { GET_PHONE_NUMBER_OPT_OUTS_BY_NUMBERS } from "../graphql/phone-number-opt-out.queries";
+
+/**
+ * Check if phone numbers are opted out for a given bodyshop
+ * @param {Object} apolloClient - Apollo Client instance
+ * @param {string} bodyshopId - The ID of the bodyshop
+ * @param {string[]} phoneNumbers - Array of phone numbers to check
+ * @returns {Promise<Set<string>>} - Set of normalized opted-out phone numbers
+ */
+export const phoneNumberOptOutService = async (apolloClient, bodyshopId, phoneNumbers) => {
+  if (!apolloClient || !bodyshopId || !phoneNumbers?.length) {
+    return new Set();
+  }
+
+  // Normalize phone numbers (remove +1 for CA numbers)
+  const normalizedPhones = phoneNumbers
+    .filter(Boolean)
+    .map((num) => phone(num, "CA").phoneNumber?.replace(/^\+1/, ""))
+    .filter(Boolean);
+
+  if (!normalizedPhones.length) {
+    return new Set();
+  }
+
+  const optedOutPhones = new Set();
+
+  try {
+    const { data } = await apolloClient.query({
+      query: GET_PHONE_NUMBER_OPT_OUTS_BY_NUMBERS,
+      variables: {
+        bodyshopid: bodyshopId,
+        phone_numbers: normalizedPhones // Array of phone numbers
+      },
+      fetchPolicy: "network-only"
+    });
+
+    if (data?.phone_number_opt_out?.length) {
+      data.phone_number_opt_out.forEach((optOut) => {
+        optedOutPhones.add(optOut.phone_number);
+      });
+    }
+  } catch (error) {
+    console.error("Error checking opt-out statuses:", error);
+  }
+
+  return optedOutPhones;
+};

client/src/utils/tasksPriorityLabel.jsx

@@ -0,0 +1,38 @@
+import { ExclamationCircleFilled } from "@ant-design/icons";
+
+/**
+ * Priority Label Component
+ * @param priority
+ * @returns {Element}
+ * @constructor
+ */
+const PriorityLabel = ({ priority }) => {
+  switch (priority) {
+    case 1:
+      return (
+        <div>
+          High <ExclamationCircleFilled style={{ marginLeft: "5px", color: "red" }} />
+        </div>
+      );
+    case 2:
+      return (
+        <div>
+          Medium <ExclamationCircleFilled style={{ marginLeft: "5px", color: "yellow" }} />
+        </div>
+      );
+    case 3:
+      return (
+        <div>
+          Low <ExclamationCircleFilled style={{ marginLeft: "5px", color: "green" }} />
+        </div>
+      );
+    default:
+      return (
+        <div>
+          None <ExclamationCircleFilled style={{ marginLeft: "5px" }} />
+        </div>
+      );
+  }
+};
+
+export default PriorityLabel;

hasura/metadata/tables.yaml

@@ -1035,6 +1035,7 @@
           - use_fippa
           - use_paint_scale_data
           - uselocalmediaserver
+          - external_shop_id
           - website
           - workingdays
           - zip_post
@@ -1130,6 +1131,7 @@
           - use_fippa
           - use_paint_scale_data
           - uselocalmediaserver
+          - external_shop_id
           - website
           - workingdays
           - zip_post
@@ -4742,6 +4744,7 @@
           - id
           - image
           - image_path
+          - is_system
           - isoutbound
           - msid
           - read
@@ -6341,11 +6344,13 @@
             - joblineid
             - assigned_to
             - due_date
+            - deleted
             - partsorderid
             - completed
             - description
             - billid
             - title
+            - jobid
             - priority
       retry_conf:
         interval_sec: 10

hasura/migrations/1748443780878_alter_table_public_messages_add_column_is_system/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."messages" add column "is_system" boolean
+--  null default 'false';

hasura/migrations/1748443780878_alter_table_public_messages_add_column_is_system/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."messages" add column "is_system" boolean
+ null default 'false';

hasura/migrations/1749499292683_alter_table_public_bodyshops_add_column_we_profile_id/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."bodyshops" add column "we_profile_id" text
+--  null;

hasura/migrations/1749499292683_alter_table_public_bodyshops_add_column_we_profile_id/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."bodyshops" add column "we_profile_id" text
+ null;

hasura/migrations/1749505657175_alter_table_public_bodyshops_alter_column_we_profile_id/down.sql

@@ -0,0 +1,2 @@
+alter table "public"."bodyshops" rename column "parts_management_key" to "we_profile_id";
+alter table "public"."bodyshops" drop constraint "bodyshops_we_profile_id_key";

hasura/migrations/1749505657175_alter_table_public_bodyshops_alter_column_we_profile_id/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."bodyshops" add constraint "bodyshops_we_profile_id_key" unique ("we_profile_id");
+alter table "public"."bodyshops" rename column "we_profile_id" to "parts_management_key";

hasura/migrations/1749507125123_alter_table_public_bodyshops_alter_column_parts_management_key/down.sql

@@ -0,0 +1 @@
+alter table "public"."bodyshops" rename column "external_shop_id" to "parts_management_key";

hasura/migrations/1749507125123_alter_table_public_bodyshops_alter_column_parts_management_key/up.sql

@@ -0,0 +1 @@
+alter table "public"."bodyshops" rename column "parts_management_key" to "external_shop_id";

new_bodyshop_translations.babel

@@ -10028,25 +10028,6 @@
 													</translation>
 												</translations>
 											</concept_node>
-											<concept_node>
-												<name>allow_text_message</name>
-												<description/>
-												<comment/>
-												<translations>
-													<translation>
-														<language>en-US</language>
-														<approved>false</approved>
-													</translation>
-													<translation>
-														<language>es-ES</language>
-														<approved>false</approved>
-													</translation>
-													<translation>
-														<language>fr-CA</language>
-														<approved>false</approved>
-													</translation>
-												</translations>
-											</concept_node>
 											<concept_node>
 												<name>checklist</name>
 												<description/>
@@ -33000,25 +32981,6 @@
 													</translation>
 												</translations>
 											</concept_node>
-											<concept_node>
-												<name>allow_text_message</name>
-												<description/>
-												<comment/>
-												<translations>
-													<translation>
-														<language>en-US</language>
-														<approved>false</approved>
-													</translation>
-													<translation>
-														<language>es-ES</language>
-														<approved>false</approved>
-													</translation>
-													<translation>
-														<language>fr-CA</language>
-														<approved>false</approved>
-													</translation>
-												</translations>
-											</concept_node>
 											<concept_node>
 												<name>name</name>
 												<description/>

package.json

@@ -16,29 +16,29 @@
     "job-totals-fixtures:local": "docker exec node-app /usr/bin/node /app/download-job-totals-fixtures.js"
   },
   "dependencies": {
-    "@aws-sdk/client-cloudwatch-logs": "^3.817.0",
-    "@aws-sdk/client-elasticache": "^3.817.0",
-    "@aws-sdk/client-s3": "^3.817.0",
-    "@aws-sdk/client-secrets-manager": "^3.817.0",
-    "@aws-sdk/client-ses": "^3.817.0",
-    "@aws-sdk/credential-provider-node": "^3.817.0",
-    "@aws-sdk/lib-storage": "^3.817.0",
-    "@aws-sdk/s3-request-presigner": "^3.817.0",
+    "@aws-sdk/client-cloudwatch-logs": "^3.844.0",
+    "@aws-sdk/client-elasticache": "^3.844.0",
+    "@aws-sdk/client-s3": "^3.844.0",
+    "@aws-sdk/client-secrets-manager": "^3.844.0",
+    "@aws-sdk/client-ses": "^3.844.0",
+    "@aws-sdk/credential-provider-node": "^3.844.0",
+    "@aws-sdk/lib-storage": "^3.844.0",
+    "@aws-sdk/s3-request-presigner": "^3.844.0",
     "@opensearch-project/opensearch": "^2.13.0",
     "@socket.io/admin-ui": "^0.5.1",
     "@socket.io/redis-adapter": "^8.3.0",
     "archiver": "^7.0.1",
     "aws4": "^1.13.2",
-    "axios": "^1.8.4",
+    "axios": "^1.10.0",
     "better-queue": "^3.8.12",
-    "bullmq": "^5.53.0",
-    "chart.js": "^4.4.8",
-    "cloudinary": "^2.6.1",
+    "bullmq": "^5.56.4",
+    "chart.js": "^4.5.0",
+    "cloudinary": "^2.7.0",
     "compression": "^1.8.0",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
     "crisp-status-reporter": "^1.2.2",
-    "dd-trace": "^5.53.0",
+    "dd-trace": "^5.58.0",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
@@ -56,31 +56,32 @@
     "multer": "^1.4.5-lts.1",
     "node-persist": "^4.0.4",
     "nodemailer": "^6.10.0",
-    "phone": "^3.1.58",
+    "phone": "^3.1.62",
     "query-string": "7.1.3",
     "recursive-diff": "^1.0.9",
     "rimraf": "^6.0.1",
     "skia-canvas": "^2.0.2",
-    "soap": "^1.1.10",
+    "soap": "^1.1.12",
     "socket.io": "^4.8.1",
     "socket.io-adapter": "^2.5.5",
     "ssh2-sftp-client": "^11.0.0",
-    "twilio": "^5.6.1",
+    "twilio": "^5.7.3",
     "uuid": "^11.1.0",
     "winston": "^3.17.0",
     "winston-cloudwatch": "^6.3.0",
     "xml2js": "^0.6.2",
-    "xmlbuilder2": "^3.1.1"
+    "xmlbuilder2": "^3.1.1",
+    "yazl": "^3.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.27.0",
-    "eslint": "^9.27.0",
+    "@eslint/js": "^9.31.0",
+    "eslint": "^9.31.0",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^15.15.0",
     "mock-require": "^3.0.3",
     "p-limit": "^3.1.0",
-    "prettier": "^3.5.3",
-    "supertest": "^7.1.1",
-    "vitest": "^3.1.4"
+    "prettier": "^3.6.2",
+    "supertest": "^7.1.3",
+    "vitest": "^3.2.4"
   }
 }

server/accounting/qbo/qbo-receivables.js

@@ -478,7 +478,7 @@ async function InsertJob(oauthClient, qbo_realmId, req, job, parentTierRef) {
 
 exports.InsertJob = InsertJob;
 
-async function QueryMetaData(oauthClient, qbo_realmId, req, bodyshopid) {
+async function QueryMetaData(oauthClient, qbo_realmId, req, bodyshopid, jobid) {
   const items = await oauthClient.makeApiCall({
     url: urlBuilder(qbo_realmId, "query", `select * From Item where active=true maxresults 1000`),
     method: "POST",
@@ -492,6 +492,7 @@ async function QueryMetaData(oauthClient, qbo_realmId, req, bodyshopid) {
     name: "QueryItems",
     status: items.response?.status,
     bodyshopid,
+    jobid: jobid,
     email: req.user.email
   })
   setNewRefreshToken(req.user.email, items);
@@ -508,6 +509,7 @@ async function QueryMetaData(oauthClient, qbo_realmId, req, bodyshopid) {
     name: "QueryTaxCodes",
     status: taxCodes.response?.status,
     bodyshopid,
+    jobid: jobid,
     email: req.user.email
   })
   const classes = await oauthClient.makeApiCall({
@@ -523,6 +525,7 @@ async function QueryMetaData(oauthClient, qbo_realmId, req, bodyshopid) {
     name: "QueryClasses",
     status: classes.response?.status,
     bodyshopid,
+    jobid: jobid,
     email: req.user.email
   })
   const taxCodeMapping = {};
@@ -559,7 +562,7 @@ async function QueryMetaData(oauthClient, qbo_realmId, req, bodyshopid) {
 }
 
 async function InsertInvoice(oauthClient, qbo_realmId, req, job, bodyshop, parentTierRef) {
-  const { items, taxCodes, classes } = await QueryMetaData(oauthClient, qbo_realmId, req, job.shopid);
+  const { items, taxCodes, classes } = await QueryMetaData(oauthClient, qbo_realmId, req, job.shopid, job.id);
   const InvoiceLineAdd = CreateInvoiceLines({
     bodyshop,
     jobs_by_pk: job,
@@ -653,7 +656,7 @@ async function InsertInvoice(oauthClient, qbo_realmId, req, job, bodyshop, paren
       platform: "QBO",
       method: "POST",
       name: "InsertInvoice",
-      status: result.status,
+      status: result.response?.status,
       bodyshopid: job.shopid,
       jobid: job.id,
       email: req.user.email
@@ -778,7 +781,7 @@ async function InsertInvoiceMultiPayerInvoice(
       platform: "QBO",
       method: "POST",
       name: "InsertInvoice",
-      status: result.response.status,
+      status: result.response?.status,
       bodyshopid: job.shopid,
       jobid: job.id,
       email: req.user.email

server/data/usageReport.js

@@ -35,7 +35,7 @@ exports.default = async (req, res) => {
     //Query the usage data.
     const queryResults = await client.request(queries.STATUS_UPDATE, {
       today: moment().startOf("day").subtract(7, "days"),
-      period: moment().subtract(90, "days").startOf("day")
+      period: moment().subtract(365, "days").startOf("day")
     });
 
     //Massage the data.
@@ -66,7 +66,7 @@ exports.default = async (req, res) => {
 Usage Report for ${moment().format("MM/DD/YYYY")} for Rome Online Customers. 
         
 Notes:
-  - Days Since Creation: The number of days since the shop was created. Only shops created in the last 90 days are included.
+  - Days Since Creation: The number of days since the shop was created. Only shops created in the last 365 days are included.
   - Updated values should be higher than created values.
   - Counts are inclusive of the last 7 days of data.
         `,

server/integrations/partsManagement/partsManagementProvisioning.js

@@ -0,0 +1,257 @@
+const crypto = require("crypto");
+const admin = require("firebase-admin");
+const client = require("../../graphql-client/graphql-client").client;
+const DefaultNewShop = require("./defaultNewShop.json");
+
+/**
+ * Ensures that the required fields are present in the payload.
+ * @param payload
+ * @param fields
+ */
+const requireFields = (payload, fields) => {
+  for (const field of fields) {
+    if (!payload[field]) {
+      throw { status: 400, message: `${field} is required.` };
+    }
+  }
+};
+
+/**
+ * Ensures that the email is not already registered in Firebase.
+ * @param email
+ * @returns {Promise<void>}
+ */
+const ensureEmailNotRegistered = async (email) => {
+  try {
+    await admin.auth().getUserByEmail(email);
+    throw { status: 400, message: "userEmail is already registered in Firebase." };
+  } catch (err) {
+    if (err.code !== "auth/user-not-found") {
+      throw { status: 500, message: "Error validating userEmail uniqueness", detail: err };
+    }
+  }
+};
+
+/**
+ * Creates a new Firebase user with the provided email.
+ * @param email
+ * @returns {Promise<UserRecord>}
+ */
+const createFirebaseUser = async (email) => {
+  return admin.auth().createUser({ email });
+};
+
+/**
+ * Deletes a Firebase user by their UID.
+ * @param uid
+ * @returns {Promise<void>}
+ */
+const deleteFirebaseUser = async (uid) => {
+  return admin.auth().deleteUser(uid);
+};
+
+/**
+ * Generates a password reset link for the given email.
+ * @param email
+ * @returns {Promise<string>}
+ */
+const generateResetLink = async (email) => {
+  return admin.auth().generatePasswordResetLink(email);
+};
+
+/**
+ * Ensures that the external shop ID is unique in the database.
+ * @param externalId
+ * @returns {Promise<void>}
+ */
+const ensureExternalIdUnique = async (externalId) => {
+  const query = `
+    query CHECK_KEY($key: String!) {
+      bodyshops(where: { external_shop_id: { _eq: $key } }) {
+        external_shop_id
+      }
+    }`;
+  const resp = await client.request(query, { key: externalId });
+  if (resp.bodyshops.length) {
+    throw { status: 400, message: `external_shop_id '${externalId}' is already in use.` };
+  }
+};
+
+/**
+ * Inserts a new bodyshop into the database.
+ * @param input
+ * @returns {Promise<*>}
+ */
+const insertBodyshop = async (input) => {
+  const mutation = `
+    mutation CREATE_SHOP($bs: bodyshops_insert_input!) {
+      insert_bodyshops_one(object: $bs) { id }
+    }`;
+  const resp = await client.request(mutation, { bs: input });
+  return resp.insert_bodyshops_one.id;
+};
+
+/**
+ * Deletes all vendors associated with a specific shop ID.
+ * @param shopId
+ * @returns {Promise<void>}
+ */
+const deleteVendorsByShop = async (shopId) => {
+  const mutation = `
+    mutation DELETE_VENDORS($shopId: uuid!) {
+      delete_vendors(where: { shopid: { _eq: $shopId } }) {
+        affected_rows
+      }
+    }`;
+  await client.request(mutation, { shopId });
+};
+
+/**
+ * Deletes a bodyshop by its ID.
+ * @param shopId
+ * @returns {Promise<void>}
+ */
+const deleteBodyshop = async (shopId) => {
+  const mutation = `
+    mutation DELETE_SHOP($id: uuid!) {
+      delete_bodyshops_by_pk(id: $id) { id }
+    }`;
+  await client.request(mutation, { id: shopId });
+};
+
+/**
+ * Inserts a new user association into the database.
+ * @param uid
+ * @param email
+ * @param shopId
+ * @returns {Promise<*>}
+ */
+const insertUserAssociation = async (uid, email, shopId) => {
+  const mutation = `
+    mutation CREATE_USER($u: users_insert_input!) {
+      insert_users_one(object: $u) {
+        id: authid
+        email
+      }
+    }`;
+  const vars = {
+    u: {
+      email,
+      authid: uid,
+      validemail: true,
+      associations: {
+        data: [{ shopid: shopId, authlevel: 80, active: true }]
+      }
+    }
+  };
+  const resp = await client.request(mutation, vars);
+  return resp.insert_users_one;
+};
+
+/**
+ * Handles the provisioning of a new parts management shop and user.
+ * @param req
+ * @param res
+ * @returns {Promise<*>}
+ */
+const partsManagementProvisioning = async (req, res) => {
+  const { logger } = req;
+  const p = { ...req.body, userEmail: req.body.userEmail?.toLowerCase() };
+
+  try {
+    //  Validate inputs
+    await ensureEmailNotRegistered(p.userEmail);
+    requireFields(p, [
+      "external_shop_id",
+      "shopname",
+      "address1",
+      "city",
+      "state",
+      "zip_post",
+      "country",
+      "email",
+      "phone",
+      "userEmail"
+    ]);
+    await ensureExternalIdUnique(p.external_shop_id);
+
+    logger.log("admin-create-shop-user", "debug", p.userEmail, null, {
+      request: req.body,
+      ioadmin: true
+    });
+
+    //  Create shop
+    const shopInput = {
+      shopname: p.shopname,
+      address1: p.address1,
+      address2: p.address2 || null,
+      city: p.city,
+      state: p.state,
+      zip_post: p.zip_post,
+      country: p.country,
+      email: p.email,
+      external_shop_id: p.external_shop_id,
+      timezone: p.timezone,
+      phone: p.phone,
+      logo_img_path: {
+        src: p.logoUrl,
+        width: "",
+        height: "",
+        headerMargin: DefaultNewShop.logo_img_path.headerMargin
+      },
+      md_ro_statuses: DefaultNewShop.md_ro_statuses,
+      vendors: {
+        data: p.vendors.map((v) => ({
+          name: v.name,
+          street1: v.street1 || null,
+          street2: v.street2 || null,
+          city: v.city || null,
+          state: v.state || null,
+          zip: v.zip || null,
+          country: v.country || null,
+          email: v.email || null,
+          discount: v.discount ?? 0,
+          due_date: v.due_date ?? null,
+          cost_center: v.cost_center || null,
+          favorite: v.favorite ?? [],
+          phone: v.phone || null,
+          active: v.active ?? true,
+          dmsid: v.dmsid || null
+        }))
+      }
+    };
+    const newShopId = await insertBodyshop(shopInput);
+
+    //  Create user + association
+    const userRecord = await createFirebaseUser(p.userEmail);
+    const resetLink = await generateResetLink(p.userEmail);
+    const createdUser = await insertUserAssociation(userRecord.uid, p.userEmail, newShopId);
+
+    return res.status(200).json({
+      shop: { id: newShopId, shopname: p.shopname },
+      user: {
+        id: createdUser.id,
+        email: createdUser.email,
+        resetLink
+      }
+    });
+  } catch (err) {
+    logger.log("admin-create-shop-user-error", "error", p.userEmail, null, {
+      message: err.message,
+      detail: err.detail || err
+    });
+
+    // Cleanup on failure
+    if (err.userRecord) {
+      await deleteFirebaseUser(err.userRecord.uid).catch(() => {});
+    }
+    if (err.newShopId) {
+      await deleteVendorsByShop(err.newShopId).catch(() => {});
+      await deleteBodyshop(err.newShopId).catch(() => {});
+    }
+
+    return res.status(err.status || 500).json({ error: err.message || "Internal server error" });
+  }
+};
+
+module.exports = partsManagementProvisioning;

server/integrations/partsManagement/swagger.yaml

@@ -0,0 +1,160 @@
+openapi: 3.0.3
+info:
+  title: Parts Management Provisioning API
+  description: API endpoint to provision a new shop and user in the Parts Management system.
+  version: 1.0.0
+
+paths:
+  /parts-management/provision:
+    post:
+      summary: Provision a new parts management shop and user
+      operationId: partsManagementProvisioning
+      tags:
+        - Parts Management
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required:
+                - external_shop_id
+                - shopname
+                - address1
+                - city
+                - state
+                - zip_post
+                - country
+                - email
+                - phone
+                - userEmail
+              properties:
+                external_shop_id:
+                  type: string
+                  description: External shop ID (must be unique)
+                shopname:
+                  type: string
+                address1:
+                  type: string
+                address2:
+                  type: string
+                  nullable: true
+                city:
+                  type: string
+                state:
+                  type: string
+                zip_post:
+                  type: string
+                country:
+                  type: string
+                email:
+                  type: string
+                phone:
+                  type: string
+                userEmail:
+                  type: string
+                  format: email
+                logoUrl:
+                  type: string
+                  format: uri
+                  nullable: true
+                timezone:
+                  type: string
+                  nullable: true
+                vendors:
+                  type: array
+                  items:
+                    type: object
+                    properties:
+                      name:
+                        type: string
+                      street1:
+                        type: string
+                        nullable: true
+                      street2:
+                        type: string
+                        nullable: true
+                      city:
+                        type: string
+                        nullable: true
+                      state:
+                        type: string
+                        nullable: true
+                      zip:
+                        type: string
+                        nullable: true
+                      country:
+                        type: string
+                        nullable: true
+                      email:
+                        type: string
+                        format: email
+                        nullable: true
+                      discount:
+                        type: number
+                        nullable: true
+                      due_date:
+                        type: string
+                        format: date
+                        nullable: true
+                      cost_center:
+                        type: string
+                        nullable: true
+                      favorite:
+                        type: array
+                        items:
+                          type: string
+                        nullable: true
+                      phone:
+                        type: string
+                        nullable: true
+                      active:
+                        type: boolean
+                        nullable: true
+                      dmsid:
+                        type: string
+                        nullable: true
+      responses:
+        '200':
+          description: Shop and user successfully created
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  shop:
+                    type: object
+                    properties:
+                      id:
+                        type: string
+                        format: uuid
+                      shopname:
+                        type: string
+                  user:
+                    type: object
+                    properties:
+                      id:
+                        type: string
+                      email:
+                        type: string
+                      resetLink:
+                        type: string
+                        format: uri
+        '400':
+          description: Bad request (missing or invalid fields)
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  error:
+                    type: string
+        '500':
+          description: Internal server error
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  error:
+                    type: string

server/job/job-totals-USA.js

@@ -381,7 +381,7 @@ async function CalculateRatesTotals({ job, client }) {
 
     if (item.mod_lbr_ty) {
       //Check to see if it has 0 hours and a price instead.
-      if (item.mod_lb_hrs === 0 && item.act_price > 0 && item.lbr_op === "OP14") {
+      if (item.lbr_op === "OP14" && item.act_price > 0 && (!item.part_type || item.mod_lb_hrs === 0)) {
         //Scenario where SGI may pay out hours using a part price.
         if (!ret[item.mod_lbr_ty.toLowerCase()].total) {
           ret[item.mod_lbr_ty.toLowerCase()].total = Dinero();

server/job/job-totals.js

@@ -314,7 +314,8 @@ function CalculateRatesTotals(ratesList) {
 
     if (item.mod_lbr_ty) {
       //Check to see if it has 0 hours and a price instead.
-      if (item.mod_lb_hrs === 0 && item.act_price > 0 && item.lbr_op === "OP14") {
+      //Extend for when there are hours and a price.
+      if (item.lbr_op === "OP14" && item.act_price > 0 && (!item.part_type || item.mod_lb_hrs === 0)) {
         //Scenario where SGI may pay out hours using a part price.
         if (!ret[item.mod_lbr_ty.toLowerCase()].total) {
           ret[item.mod_lbr_ty.toLowerCase()].total = Dinero();

server/media/imgproxy-media.js

@@ -20,6 +20,7 @@ const {
   GET_DOCUMENTS_BY_IDS,
   DELETE_MEDIA_DOCUMENTS
 } = require("../graphql-client/queries");
+const yazl = require("yazl");
 
 const imgproxyBaseUrl = process.env.IMGPROXY_BASE_URL; // `https://u4gzpp5wm437dnm75qa42tvza40fguqr.lambda-url.ca-central-1.on.aws` //Direct Lambda function access to bypass CDN.
 const imgproxySalt = process.env.IMGPROXY_SALT;
@@ -102,13 +103,7 @@ const getThumbnailUrls = async (req, res) => {
       //<Cloudfront_to_lambda>/<hmac with SHA of entire request URI path (with base64 encoded URL if needed), beginning with un-encoded/un-hashed Salt>/<remainder of url - resize params >/< base 64 URL encoded to image path>
       //When working with documents from Cloudinary, the URL does not include the extension.
 
-      let key;
-
-      if (/\.[^/.]+$/.test(document.key)) {
-        key = document.key;
-      } else {
-        key = `${document.key}.${document.extension.toLowerCase()}`;
-      }
+      let key = keyStandardize(document)
       // Build the S3 path to the object.
       const fullS3Path = `s3://${imgproxyDestinationBucket}/${key}`;
       const base64UrlEncodedKeyString = base64UrlEncode(fullS3Path);
@@ -168,78 +163,73 @@ const getThumbnailUrls = async (req, res) => {
  * @returns {Promise<*>}
  */
 const downloadFiles = async (req, res) => {
-  //Given a series of document IDs or keys, generate a file (or a link) to download all images in bulk
   const { jobId, billid, documentids } = req.body;
 
+  logger.log("imgproxy-download", "DEBUG", req.user?.email, jobId, { billid, jobId, documentids });
+
+  const client = req.userGraphQLClient;
+  let data;
   try {
-    logger.log("imgproxy-download", "DEBUG", req.user?.email, jobId, { billid, jobId, documentids });
-
-    //Delayed as the key structure may change slightly from what it is currently and will require evaluating mobile components.
-    const client = req.userGraphQLClient;
-
-    //Query for the keys of the document IDs
-    const data = await client.request(GET_DOCUMENTS_BY_IDS, { documentIds: documentids });
-
-    //Using the Keys, get all the S3 links, zip them, and send back to the client.
-    const s3client = new S3Client({ region: InstanceRegion() });
-    const archiveStream = archiver("zip");
-
-    archiveStream.on("error", (error) => {
-      console.error("Archival encountered an error:", error);
-      throw new Error(error);
-    });
-
-    const passThrough = new stream.PassThrough();
-
-    archiveStream.pipe(passThrough);
-
-    for (const key of data.documents.map((d) => d.key)) {
-      const response = await s3client.send(
-        new GetObjectCommand({
-          Bucket: imgproxyDestinationBucket,
-          Key: key
-        })
-      );
-
-      archiveStream.append(response.Body, { name: path.basename(key) });
-    }
-
-    await archiveStream.finalize();
-
-    const archiveKey = `archives/${jobId || "na"}/archive-${new Date().toISOString()}.zip`;
-
-    const parallelUploads3 = new Upload({
-      client: s3client,
-      queueSize: 4, // optional concurrency configuration
-      leavePartsOnError: false, // optional manually handle dropped parts
-      params: { Bucket: imgproxyDestinationBucket, Key: archiveKey, Body: passThrough }
-    });
-
-    // Disabled progress logging for upload, uncomment if needed
-    // parallelUploads3.on("httpUploadProgress", (progress) => {
-    //   console.log(progress);
-    // });
-
-    await parallelUploads3.done();
-
-    //Generate the presigned URL to download it.
-    const presignedUrl = await getSignedUrl(
-      s3client,
-      new GetObjectCommand({ Bucket: imgproxyDestinationBucket, Key: archiveKey }),
-      { expiresIn: 360 }
-    );
-
-    return res.json({ success: true, url: presignedUrl });
-    //Iterate over them, build the link based on the media type, and return the array.
+    data = await client.request(GET_DOCUMENTS_BY_IDS, { documentIds: documentids });
   } catch (error) {
-    logger.log("imgproxy-thumbnails-error", "ERROR", req.user?.email, jobId, {
+    logger.log("imgproxy-download-error", "ERROR", req.user?.email, jobId, {
       jobId,
       billid,
       message: error.message,
       stack: error.stack
     });
+    return res.status(400).json({ message: error.message });
+  }
 
-    return res.status(400).json({ message: error.message, stack: error.stack });
+  const s3client = new S3Client({ region: InstanceRegion() });
+  const zipfile = new yazl.ZipFile();
+
+  const filename = `archive-${jobId || "na"}-${new Date().toISOString().replace(/[:.]/g, "-")}.zip`;
+  res.setHeader("Content-Type", "application/zip");
+  res.setHeader("Content-Disposition", `attachment; filename="${filename}"`);
+
+  // Handle zipfile stream errors
+  zipfile.outputStream.on("error", (err) => {
+    logger.log("imgproxy-download-zipstream-error", "ERROR", req.user?.email, jobId, { message: err.message, stack: err.stack });
+    // Cannot send another response here, just destroy the connection
+    res.destroy(err);
+  });
+
+  zipfile.outputStream.pipe(res);
+
+  try {
+    for (const doc of data.documents) {
+      let key = keyStandardize(doc)
+      let response;
+      try {
+        response = await s3client.send(
+          new GetObjectCommand({
+            Bucket: imgproxyDestinationBucket,
+            Key: key
+          })
+        );
+      } catch (err) {
+        logger.log("imgproxy-download-s3-error", "ERROR", req.user?.email, jobId, { key, message: err.message, stack: err.stack });
+        // Optionally, skip this file or add a placeholder file in the zip
+        continue;
+      }
+      // Attach error handler to S3 stream
+      response.Body.on("error", (err) => {
+        logger.log("imgproxy-download-s3stream-error", "ERROR", req.user?.email, jobId, { key, message: err.message, stack: err.stack });
+        res.destroy(err);
+      });
+      zipfile.addReadStream(response.Body, path.basename(key));
+    }
+    zipfile.end();
+  } catch (error) {
+    logger.log("imgproxy-download-error", "ERROR", req.user?.email, jobId, {
+      jobId,
+      billid,
+      message: error.message,
+      stack: error.stack
+    });
+    // Cannot send another response here, just destroy the connection
+    res.destroy(error);
   }
 };
 
@@ -392,6 +382,15 @@ const moveFiles = async (req, res) => {
   }
 };
 
+const keyStandardize = (doc) => {
+  if (/\.[^/.]+$/.test(doc.key)) {
+    return doc.key;
+  } else {
+    return `${doc.key}.${doc.extension.toLowerCase()}`;
+  }
+};
+
+
 module.exports = {
   generateSignedUploadUrls,
   getThumbnailUrls,

server/middleware/partsManagementIntegrationMiddleware.js

@@ -0,0 +1,23 @@
+/**
+ * Middleware to check if the request is authorized for Parts Management Integration.
+ * @param req
+ * @param res
+ * @param next
+ * @returns {*}
+ */
+const partsManagementIntegrationMiddleware = (req, res, next) => {
+  const secret = process.env.PARTS_MANAGEMENT_INTEGRATION_SECRET;
+  if (typeof secret !== "string" || secret.length === 0) {
+    return res.status(500).send("Server misconfiguration");
+  }
+
+  const headerValue = req.headers["parts-management-integration-secret"];
+  if (typeof headerValue !== "string" || headerValue.trim() !== secret) {
+    return res.status(401).send("Unauthorized");
+  }
+
+  req.isPartsManagementIntegrationAuthorized = true;
+  next();
+};
+
+module.exports = partsManagementIntegrationMiddleware;

server/middleware/vsstaIntegrationMiddleware.js

@@ -1,16 +1,19 @@
 /**
  * VSSTA Integration Middleware
- * @param req
- * @param res
- * @param next
- * @returns {*}
+ * Fails closed if the env var is missing or empty, and strictly compares header.
  */
 const vsstaIntegrationMiddleware = (req, res, next) => {
-  if (req?.headers?.["vssta-integration-secret"] !== process.env?.VSSTA_INTEGRATION_SECRET) {
+  const secret = process.env.VSSTA_INTEGRATION_SECRET;
+  if (typeof secret !== "string" || secret.length === 0) {
+    return res.status(500).send("Server misconfiguration");
+  }
+
+  const headerValue = req.headers["vssta-integration-secret"];
+  if (typeof headerValue !== "string" || headerValue.trim() !== secret) {
     return res.status(401).send("Unauthorized");
   }
 
-  req.isIntegrationAuthorized = true;
+  req.isVsstaIntegrationAuthorized = true;
   next();
 };
 

server/notifications/eventHandlers.js

@@ -145,15 +145,70 @@ const handleNotesChange = async (req, res) =>
 const handlePaymentsChange = async (req, res) =>
   processNotificationEvent(req, res, "req.body.event.new.jobid", "Payments Changed Notification Event Handled.");
 
+/**
+ * Handle task socket emit.
+ * @param req
+ */
+const handleTaskSocketEmit = (req) => {
+  const {
+    logger,
+    ioRedis,
+    ioHelpers: { getBodyshopRoom }
+  } = req;
+  const event = req.body.event;
+  const op = event.op;
+  let taskData;
+  let type;
+  let bodyshopId;
+
+  if (op === "INSERT") {
+    taskData = event.data.new;
+    if (taskData.deleted) {
+      logger.log("tasks-event-insert-deleted", "warn", "notifications", null, { id: taskData.id });
+    } else {
+      type = "task-created";
+      bodyshopId = taskData.bodyshopid;
+    }
+  } else if (op === "UPDATE") {
+    const newData = event.data.new;
+    const oldData = event.data.old;
+    taskData = newData;
+    bodyshopId = newData.bodyshopid;
+
+    if (newData.deleted && !oldData.deleted) {
+      type = "task-deleted";
+      taskData = { id: newData.id, assigned_to: newData.assigned_to };
+    } else if (!newData.deleted && oldData.deleted) {
+      type = "task-created";
+    } else if (!newData.deleted) {
+      type = "task-updated";
+    }
+  } else {
+    logger.log("tasks-event-unknown-op", "warn", "notifications", null, { op });
+  }
+
+  if (bodyshopId && ioRedis && type) {
+    const room = getBodyshopRoom(bodyshopId);
+    ioRedis.to(room).emit("bodyshop-message", { type, payload: taskData });
+    logger.log("tasks-event-emitted", "info", "notifications", null, { type, bodyshopId });
+  } else if (type) {
+    logger.log("tasks-event-missing-data", "error", "notifications", null, { bodyshopId, hasIo: !!ioRedis, type });
+  }
+};
+
 /**
  * Handle tasks change notifications.
+ * Note: this also handles task center notifications.
  *
  * @param {Object} req - Express request object.
  * @param {Object} res - Express response object.
  * @returns {Promise<Object>} JSON response with a success message.
  */
-const handleTasksChange = async (req, res) =>
+const handleTasksChange = async (req, res) => {
+  // Handle Notification Event
   processNotificationEvent(req, res, "req.body.event.new.jobid", "Tasks Notifications Event Handled.");
+  handleTaskSocketEmit(req);
+};
 
 /**
  * Handle time tickets change notifications.

server/opensearch/os-handler.js

@@ -64,7 +64,7 @@ async function OpenSearchUpdateHandler(req, res) {
           document = pick(req.body.event.data.new, ["id", "ownr_fn", "ownr_ln", "ownr_co_nm", "ownr_ph1", "ownr_ph2"]);
           document.bodyshopid = req.body.event.data.new.shopid;
           break;
-        case "bills":
+        case "bills": {
           const bill = await client.request(
             `query ADMIN_GET_BILL_BY_ID($billId: uuid!) {
             bills_by_pk(id: $billId) {
@@ -97,7 +97,8 @@ async function OpenSearchUpdateHandler(req, res) {
             bodyshopid: bill.bills_by_pk.job.shopid
           };
           break;
-        case "payments":
+        }
+        case "payments": {
           //Query to get the job and RO number
 
           const payment = await client.request(
@@ -141,6 +142,7 @@ async function OpenSearchUpdateHandler(req, res) {
             bodyshopid: payment.payments_by_pk.job.shopid
           };
           break;
+        }
       }
       const payload = {
         id: req.body.event.data.new.id,
@@ -255,6 +257,7 @@ async function OpenSearchSearchHandler(req, res) {
                           "*ownr_co_nm^8",
                           "*ownr_ph1^8",
                           "*ownr_ph2^8",
+                          "*vendor.name^8",
                           "*comment^6"
                           //  "*"
                         ]

server/routes/intergrationRoutes.js

@@ -1,8 +1,27 @@
 const express = require("express");
-const vsstaIntegration = require("../integrations/VSSTA/vsstaIntegrationRoute");
-const vsstaMiddleware = require("../middleware/vsstaIntegrationMiddleware");
 const router = express.Router();
 
-router.post("/vssta", vsstaMiddleware, vsstaIntegration);
+// Pull secrets from env
+const { VSSTA_INTEGRATION_SECRET, PARTS_MANAGEMENT_INTEGRATION_SECRET } = process.env;
+
+// Only load VSSTA routes if the secret is set
+if (typeof VSSTA_INTEGRATION_SECRET === "string" && VSSTA_INTEGRATION_SECRET.length > 0) {
+  const vsstaIntegration = require("../integrations/VSSTA/vsstaIntegrationRoute");
+  const vsstaMiddleware = require("../middleware/vsstaIntegrationMiddleware");
+
+  router.post("/vssta", vsstaMiddleware, vsstaIntegration);
+} else {
+  console.warn("VSSTA_INTEGRATION_SECRET is not set — skipping /vssta integration route");
+}
+
+// Only load Parts Management routes if that secret is set
+if (typeof PARTS_MANAGEMENT_INTEGRATION_SECRET === "string" && PARTS_MANAGEMENT_INTEGRATION_SECRET.length > 0) {
+  const partsManagementProvisioning = require("../integrations/partsManagement/partsManagementProvisioning");
+  const partsManagementIntegrationMiddleware = require("../middleware/partsManagementIntegrationMiddleware");
+
+  router.post("/parts-management/provision", partsManagementIntegrationMiddleware, partsManagementProvisioning);
+} else {
+  console.warn("PARTS_MANAGEMENT_INTEGRATION_SECRET is not set — skipping /parts-management/provision route");
+}
 
 module.exports = router;

server/sms/receive.js

@@ -12,6 +12,16 @@ const { phone } = require("phone");
 const { admin } = require("../firebase/firebase-handler");
 const InstanceManager = require("../utils/instanceMgr").default;
 
+// Note: When we handle different languages, we might need to adjust these keywords accordingly.
+const optInKeywords = ["START", "YES", "UNSTOP"];
+const optOutKeywords = ["STOP", "STOPALL", "UNSUBSCRIBE", "CANCEL", "END", "QUIT", "REVOKE", "OPTOUT"];
+
+// System Message text, will also need to be localized if we support multiple languages
+const systemMessageOptions = {
+  optIn: "Customer has opted-in",
+  optOut: "Customer has opted-out"
+};
+
 /**
  * Receive SMS messages from Twilio and process them
  * @param req
@@ -57,9 +67,37 @@ const receive = async (req, res) => {
     const normalizedPhone = phone(req.body.From).phoneNumber.replace(/^\+1/, ""); // Normalize phone number (remove +1 for CA numbers)
     const messageText = (req.body.Body || "").trim().toUpperCase();
 
-    // Step 2: Check for opt-in or opt-out keywords
-    const optInKeywords = ["START", "YES", "UNSTOP"];
-    const optOutKeywords = ["STOP", "STOPALL", "UNSUBSCRIBE", "CANCEL", "END", "QUIT"];
+    // Step 2: Process conversation
+    const sortedConversations = bodyshop.conversations.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+    const existingConversation = sortedConversations.length
+      ? sortedConversations[sortedConversations.length - 1]
+      : null;
+
+    let conversationid;
+
+    if (existingConversation) {
+      conversationid = existingConversation.id;
+      if (existingConversation.archived) {
+        await client.request(UNARCHIVE_CONVERSATION, {
+          id: conversationid,
+          archived: false
+        });
+      }
+    } else {
+      const newConversationResponse = await client.request(CREATE_CONVERSATION, {
+        conversation: {
+          bodyshopid: bodyshop.id,
+          phone_num: phone(req.body.From).phoneNumber,
+          archived: false
+        }
+      });
+      const createdConversation = newConversationResponse.insert_conversations.returning[0];
+      conversationid = createdConversation.id;
+    }
+
+    // Step 3: Handle opt-in or opt-out keywords
+    let systemMessageText = "";
+    let socketEventType = "";
 
     if (optInKeywords.includes(messageText) || optOutKeywords.includes(messageText)) {
       // Check if the phone number is in phone_number_opt_out
@@ -68,6 +106,7 @@ const receive = async (req, res) => {
         phone_number: normalizedPhone
       });
 
+      // Opt In
       if (optInKeywords.includes(messageText)) {
         // Handle opt-in
         if (optOutCheck.phone_number_opt_out.length > 0) {
@@ -84,14 +123,12 @@ const receive = async (req, res) => {
             affected_rows: deleteResponse.delete_phone_number_opt_out.affected_rows
           });
 
-          // Emit WebSocket event to notify clients
-          const broadcastRoom = getBodyshopRoom(bodyshop.id);
-          ioRedis.to(broadcastRoom).emit("phone-number-opted-in", {
-            bodyshopid: bodyshop.id,
-            phone_number: normalizedPhone
-          });
+          systemMessageText = systemMessageOptions.optIn;
+          socketEventType = "phone-number-opted-in";
         }
-      } else if (optOutKeywords.includes(messageText)) {
+      }
+      // Opt Out
+      else if (optOutKeywords.includes(messageText)) {
         // Handle opt-out
         if (optOutCheck.phone_number_opt_out.length === 0) {
           // Phone number is not opted out; insert a new record
@@ -114,59 +151,78 @@ const receive = async (req, res) => {
             affected_rows: insertResponse.insert_phone_number_opt_out.affected_rows
           });
 
-          // Emit WebSocket event to notify clients
-          const broadcastRoom = getBodyshopRoom(bodyshop.id);
-          ioRedis.to(broadcastRoom).emit("phone-number-opted-out", {
-            bodyshopid: bodyshop.id,
-            phone_number: normalizedPhone
-          });
+          systemMessageText = systemMessageOptions.optOut;
+          socketEventType = "phone-number-opted-out";
         }
       }
 
-      // Respond immediately without processing as a regular message
-      res.status(200).send("");
-      return;
+      // Insert system message if an opt-in or opt-out action was taken
+      if (systemMessageText) {
+        const systemMessage = {
+          msid: `SYS_${req.body.SmsMessageSid}_${Date.now()}`, // Unique ID for system message
+          text: systemMessageText,
+          conversationid,
+          isoutbound: false,
+          userid: null,
+          image: false,
+          image_path: null,
+          is_system: true
+        };
+
+        const systemMessageResponse = await client.request(INSERT_MESSAGE, {
+          msg: systemMessage,
+          conversationid
+        });
+
+        const insertedSystemMessage = systemMessageResponse.insert_messages.returning[0];
+
+        // Emit WebSocket events for system message
+        const broadcastRoom = getBodyshopRoom(bodyshop.id);
+        const conversationRoom = getBodyshopConversationRoom({
+          bodyshopId: bodyshop.id,
+          conversationId: conversationid
+        });
+
+        const systemPayload = {
+          isoutbound: false,
+          conversationId: conversationid,
+          updated_at: insertedSystemMessage.updated_at,
+          msid: insertedSystemMessage.msid,
+          existingConversation: !!existingConversation,
+          newConversation: !existingConversation ? insertedSystemMessage.conversation : null
+        };
+
+        ioRedis.to(broadcastRoom).emit("new-message-summary", {
+          ...systemPayload,
+          summary: true
+        });
+
+        ioRedis.to(conversationRoom).emit("new-message-detailed", {
+          newMessage: insertedSystemMessage,
+          ...systemPayload,
+          summary: false
+        });
+
+        // Emit opt-in or opt-out event
+        ioRedis.to(broadcastRoom).emit(socketEventType, {
+          bodyshopid: bodyshop.id,
+          phone_number: normalizedPhone
+        });
+      }
     }
 
-    // Step 3: Process conversation
-    const sortedConversations = bodyshop.conversations.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
-    const existingConversation = sortedConversations.length
-      ? sortedConversations[sortedConversations.length - 1]
-      : null;
-
-    let conversationid;
-    let newMessage = {
+    // Step 4: Insert the original message
+    const newMessage = {
       msid: req.body.SmsMessageSid,
       text: req.body.Body,
       image: !!req.body.MediaUrl0,
       image_path: generateMediaArray(req.body, logger),
       isoutbound: false,
-      userid: null
+      userid: null,
+      conversationid,
+      is_system: false
     };
 
-    if (existingConversation) {
-      conversationid = existingConversation.id;
-      if (existingConversation.archived) {
-        await client.request(UNARCHIVE_CONVERSATION, {
-          id: conversationid,
-          archived: false
-        });
-      }
-    } else {
-      const newConversationResponse = await client.request(CREATE_CONVERSATION, {
-        conversation: {
-          bodyshopid: bodyshop.id,
-          phone_num: phone(req.body.From).phoneNumber,
-          archived: false
-        }
-      });
-      const createdConversation = newConversationResponse.insert_conversations.returning[0];
-      conversationid = createdConversation.id;
-    }
-
-    newMessage.conversationid = conversationid;
-
-    // Step 4: Insert the message
     const insertresp = await client.request(INSERT_MESSAGE, {
       msg: newMessage,
       conversationid
@@ -179,7 +235,7 @@ const receive = async (req, res) => {
       throw new Error("Conversation data is missing from the response.");
     }
 
-    // Step 5: Notify clients
+    // Step 5: Notify clients for original message
     const conversationRoom = getBodyshopConversationRoom({
       bodyshopId: conversation.bodyshop.id,
       conversationId: conversation.id
@@ -189,7 +245,7 @@ const receive = async (req, res) => {
       isoutbound: false,
       conversationId: conversation.id,
       updated_at: message.updated_at,
-      msid: message.sid
+      msid: message.msid
     };
 
     const broadcastRoom = getBodyshopRoom(conversation.bodyshop.id);