IO-2824 Dev Server Instance Switch

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

.prettierrc.js

@@ -9,10 +9,10 @@ const config = {
   arrowParens: "always",
   jsxSingleQuote: false,
   bracketSameLine: false,
-  endOfLine: "lf",
+  endOfLine: "lf"
-  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
+  // importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
-  importOrderSeparation: true,
+  // importOrderSeparation: true,
-  importOrderSortSpecifiers: true
+  // importOrderSortSpecifiers: true
 };
 
 module.exports = config;

client/.env.development.promanager

@@ -1,7 +1,8 @@
 VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
 VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
 VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+# VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
 VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
 VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
 VITE_APP_CLOUDINARY_API_KEY=957865933348715

client/.env.development.rome

@@ -1,7 +1,8 @@
 VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
 VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
 VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+# VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
 VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
 VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
 VITE_APP_CLOUDINARY_API_KEY=957865933348715

client/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "react-app"
+  ],
+  "rules": {
+    "no-useless-rename": "off"
+  }
+}

client/package-lock.json

@@ -96,6 +96,8 @@
         "browserslist-to-esbuild": "^2.1.1",
         "cross-env": "^7.0.3",
         "cypress": "^13.6.6",
+        "eslint": "^8.57.0",
+        "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-cypress": "^2.15.1",
         "memfs": "^4.6.0",
         "os-browserify": "^0.3.0",
@@ -104,6 +106,7 @@
         "source-map-explorer": "^2.5.3",
         "vite": "^5.0.11",
         "vite-plugin-babel": "^1.2.0",
+        "vite-plugin-eslint": "^1.8.1",
         "vite-plugin-legacy": "^2.1.0",
         "vite-plugin-node-polyfills": "^0.19.0",
         "vite-plugin-pwa": "^0.19.0",
@@ -11934,7 +11937,8 @@
     },
     "node_modules/eslint": {
       "version": "8.57.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -11987,7 +11991,8 @@
     },
     "node_modules/eslint-config-react-app": {
       "version": "7.0.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
+      "integrity": "sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@babel/eslint-parser": "^7.16.3",
@@ -26439,6 +26444,36 @@
         "vite": ">=5.0.0"
       }
     },
+    "node_modules/vite-plugin-eslint": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-eslint/-/vite-plugin-eslint-1.8.1.tgz",
+      "integrity": "sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^4.2.1",
+        "@types/eslint": "^8.4.5",
+        "rollup": "^2.77.2"
+      },
+      "peerDependencies": {
+        "eslint": ">=7",
+        "vite": ">=2"
+      }
+    },
+    "node_modules/vite-plugin-eslint/node_modules/rollup": {
+      "version": "2.79.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "dev": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/vite-plugin-legacy": {
       "version": "2.1.0",
       "dev": true,

client/package.json

@@ -140,6 +140,8 @@
     "browserslist-to-esbuild": "^2.1.1",
     "cross-env": "^7.0.3",
     "cypress": "^13.6.6",
+    "eslint": "^8.57.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
     "memfs": "^4.6.0",
     "os-browserify": "^0.3.0",
@@ -148,6 +150,7 @@
     "source-map-explorer": "^2.5.3",
     "vite": "^5.0.11",
     "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-legacy": "^2.1.0",
     "vite-plugin-node-polyfills": "^0.19.0",
     "vite-plugin-pwa": "^0.19.0",

client/public/firebase-messaging-sw.js

@@ -0,0 +1,56 @@
+// Scripts for firebase and firebase messaging
+importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
+importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js");
+
+// Initialize the Firebase app in the service worker by passing the generated config
+let firebaseConfig;
+switch (this.location.hostname) {
+  case "localhost":
+    firebaseConfig = {
+      apiKey: "AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc",
+      authDomain: "imex-dev.firebaseapp.com",
+      databaseURL: "https://imex-dev.firebaseio.com",
+      projectId: "imex-dev",
+      storageBucket: "imex-dev.appspot.com",
+      messagingSenderId: "759548147434",
+      appId: "1:759548147434:web:e8239868a48ceb36700993",
+      measurementId: "G-K5XRBVVB4S",
+    };
+    break;
+  case "test.imex.online":
+    firebaseConfig = {
+      apiKey: "AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",
+      authDomain: "imex-test.firebaseapp.com",
+      projectId: "imex-test",
+      storageBucket: "imex-test.appspot.com",
+      messagingSenderId: "991923618608",
+      appId: "1:991923618608:web:633437569cdad78299bef5",
+      // measurementId: "${config.measurementId}",
+    };
+    break;
+  case "imex.online":
+  default:
+    firebaseConfig = {
+      apiKey: "AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU",
+      authDomain: "imex-prod.firebaseapp.com",
+      databaseURL: "https://imex-prod.firebaseio.com",
+      projectId: "imex-prod",
+      storageBucket: "imex-prod.appspot.com",
+      messagingSenderId: "253497221485",
+      appId: "1:253497221485:web:3c81c483b94db84b227a64",
+      measurementId: "G-NTWBKG2L0M",
+    };
+}
+
+firebase.initializeApp(firebaseConfig);
+
+// Retrieve firebase messaging
+const messaging = firebase.messaging();
+
+messaging.onBackgroundMessage(function (payload) {
+  // Customize notification here
+  const channel = new BroadcastChannel("imex-sw-messages");
+  channel.postMessage(payload);
+
+  //self.registration.showNotification(notificationTitle, notificationOptions);
+});

client/src/App/App.jsx

@@ -150,7 +150,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
       <ProductFruits
         workspaceCode={InstanceRenderMgr({
           imex: null,
-          rome: null,
+          rome: "9BkbEseqNqxw8jUH",
           promanager: "aoJoEifvezYI0Z0P"
         })}
         debug

client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx

@@ -34,6 +34,7 @@ export function BillDetailEditReturn({ setPartsOrderContext, insertAuditTrail, b
       actions: {},
       context: {
         jobId: data.bills_by_pk.jobid,
+        job: data.bills_by_pk.job,
         vendorId: data.bills_by_pk.vendorid,
         returnFromBill: data.bills_by_pk.id,
         invoiceNumber: data.bills_by_pk.invoice_number,

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

@@ -25,31 +25,27 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
         );
       }}
       notFoundContent={"Removed."}
-      {...restProps}
+      options={[
-    >
+        { value: "noline", label: t("billlines.labels.other"), name: t("billlines.labels.other") },
-      <Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
+        ...options.map((item) => ({
-        {t("billlines.labels.other")}
+          disabled: allowRemoved ? false : item.removed,
-      </Select.Option>
+          key: item.id,
-      {options
+          value: item.id,
-        ? options.map((item) => (
+          cost: item.act_price ? item.act_price : 0,
-            <Option
+          part_type: item.part_type,
-              disabled={allowRemoved ? false : item.removed}
+          line_desc: item.line_desc,
-              key={item.id}
+          part_qty: item.part_qty,
-              value={item.id}
+          oem_partno: item.oem_partno,
-              cost={item.act_price ? item.act_price : 0}
+          alt_partno: item.alt_partno,
-              part_type={item.part_type}
+          act_price: item.act_price,
-              line_desc={item.line_desc}
+          style: {
-              part_qty={item.part_qty}
+            ...(item.removed ? { textDecoration: "line-through" } : {})
-              oem_partno={item.oem_partno}
+          },
-              alt_partno={item.alt_partno}
+          name: `${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
-              act_price={item.act_price}
+            item.oem_partno ? ` - ${item.oem_partno}` : ""
-              style={{
+          }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(),
-                ...(item.removed ? { textDecoration: "line-through" } : {})
+          label: (
-              }}
+            <>
-              name={`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
-                item.oem_partno ? ` - ${item.oem_partno}` : ""
-              }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
-            >
               <span>
                 {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
                   item.oem_partno ? ` - ${item.oem_partno}` : ""
@@ -60,14 +56,15 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
                   <span style={{ float: "right", paddingleft: "1rem" }}>{`${item.mod_lb_hrs} units`}</span>
                 )
               })}
-
               <span style={{ float: "right", paddingleft: "1rem" }}>
                 {item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
               </span>
-            </Option>
+            </>
-          ))
+          )
-        : null}
+        }))
-    </Select>
+      ]}
+      {...restProps}
+    ></Select>
   );
 };
 export default forwardRef(BillLineSearchSelect);

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

@@ -14,6 +14,7 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
 import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import { FaTasks } from "react-icons/fa";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -21,9 +22,21 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
+  setBillEnterContext: (context) =>
-  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
+    dispatch(
-  setReconciliationContext: (context) => dispatch(setModalContext({ context: context, modal: "reconciliation" }))
+      setModalContext({
+        context: context,
+        modal: "billEnter"
+      })
+    ),
+  setReconciliationContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "reconciliation"
+      })
+    ),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
 export function BillsListTableComponent({
@@ -32,9 +45,9 @@ export function BillsListTableComponent({
   job,
   billsQuery,
   handleOnRowClick,
-  setPartsOrderContext,
   setBillEnterContext,
-  setReconciliationContext
+  setReconciliationContext,
+  setTaskUpsertContext
 }) {
   const { t } = useTranslation();
 
@@ -48,6 +61,7 @@ export function BillsListTableComponent({
   const Templates = TemplateList("bill");
   const bills = billsQuery.data ? billsQuery.data.bills : [];
   const { refetch } = billsQuery;
+
   const recordActions = (record, showView = false) => (
     <Space wrap>
       {showView && (
@@ -55,9 +69,22 @@ export function BillsListTableComponent({
           <EditFilled />
         </Button>
       )}
+      <Button
+        title={t("tasks.buttons.create")}
+        onClick={() => {
+          setTaskUpsertContext({
+            context: {
+              jobid: job.id,
+              billid: record.id
+            }
+          });
+        }}
+      >
+        <FaTasks />
+      </Button>
       <BillDeleteButton bill={record} jobid={job.id} />
       <BillDetailEditReturnComponent
-        data={{ bills_by_pk: { ...record, jobid: job.id } }}
+        data={{ bills_by_pk: { ...record, jobid: job.id, job: job } }}
         disabled={record.is_credit_memo || record.vendorid === bodyshop.inhousevendorid || jobRO}
       />
 

client/src/components/card-payment-modal/card-payment-modal.component..jsx

@@ -1,14 +1,12 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, Input, notification, Row, Space, Spin, Statistic } from "antd";
+import { Button, Card, Col, Form, Input, Row, Space, Spin, Statistic, notification } from "antd";
 import axios from "axios";
-import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_PAYMENT_RESPONSE, QUERY_RO_AND_OWNER_BY_JOB_PKS } from "../../graphql/payment_response.queries";
-import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectCardPayment } from "../../redux/modals/modals.selectors";
@@ -28,12 +26,12 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisible, insertAuditTrail }) => {
-  const { context } = cardPaymentModal;
+  const { context, actions } = cardPaymentModal;
 
   const [form] = Form.useForm();
 
   const [loading, setLoading] = useState(false);
-  const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
+  // const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
   const { t } = useTranslation();
 
@@ -42,7 +40,6 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
     skip: true
   });
 
-  console.log("🚀 ~ file: card-payment-modal.component..jsx:61 ~ data:", data);
   //Initialize the intellipay window.
   const SetIntellipayCallbackFunctions = () => {
     console.log("*** Set IntelliPay callback functions.");
@@ -51,16 +48,20 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
     });
 
     window.intellipay.runOnApproval(async function (response) {
-      console.warn("*** Running On Approval Script ***");
+      //2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
-      form.setFieldValue("paymentResponse", response);
+      //Add a slight delay to allow the refetch to properly get the data.
-      form.submit();
+      setTimeout(() => {
+        if (actions && actions.refetch && typeof actions.refetch === "function")
+          actions.refetch();
+        setLoading(false);
+        toggleModalVisible();
+      }, 750);
     });
 
     window.intellipay.runOnNonApproval(async function (response) {
       // Mutate unsuccessful payment
 
       const { payments } = form.getFieldsValue();
-
       await insertPaymentResponse({
         variables: {
           paymentResponse: payments.map((payment) => ({
@@ -85,50 +86,9 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
     });
   };
 
-  const handleFinish = async (values) => {
-    try {
-      await insertPayment({
-        variables: {
-          paymentInput: values.payments.map((payment) => ({
-            amount: payment.amount,
-            transactionid: (values.paymentResponse.paymentid || "").toString(),
-            payer: t("payments.labels.customer"),
-            type: values.paymentResponse.cardbrand,
-            jobid: payment.jobid,
-            date: dayjs(Date.now()),
-            payment_responses: {
-              data: [
-                {
-                  amount: payment.amount,
-                  bodyshopid: bodyshop.id,
-
-                  jobid: payment.jobid,
-                  declinereason: values.paymentResponse.declinereason,
-                  ext_paymentid: values.paymentResponse.paymentid.toString(),
-                  successful: true,
-                  response: values.paymentResponse
-                }
-              ]
-            }
-          }))
-        },
-        refetchQueries: ["GET_JOB_BY_PK"]
-      });
-      toggleModalVisible();
-    } catch (error) {
-      console.error(error);
-      notification.open({
-        type: "error",
-        message: t("payments.errors.inserting", { error: error.message })
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
 
   const handleIntelliPayCharge = async () => {
     setLoading(true);
-
     //Validate
     try {
       await form.validateFields();
@@ -140,7 +100,8 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
     try {
       const response = await axios.post("/intellipay/lightbox_credentials", {
         bodyshop,
-        refresh: !!window.intellipay
+        refresh: !!window.intellipay,
+        paymentSplitMeta: form.getFieldsValue(),
       });
 
       if (window.intellipay) {
@@ -169,7 +130,6 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
     <Card title="Card Payment">
       <Spin spinning={loading}>
         <Form
-          onFinish={handleFinish}
           form={form}
           layout="vertical"
           initialValues={{
@@ -246,18 +206,14 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
             }
           >
             {() => {
-              console.log("Updating the owner info section.");
               //If all of the job ids have been fileld in, then query and update the IP field.
               const { payments } = form.getFieldsValue();
-              if (payments?.length > 0 && payments?.filter((p) => p?.jobid).length === payments?.length) {
+              if (
-                console.log("**Calling refetch.");
+                payments?.length > 0 &&
+                payments?.filter((p) => p?.jobid).length === payments?.length
+              ) {
                 refetch({ jobids: payments.map((p) => p.jobid) });
               }
-              console.log(
-                "Acc info",
-                data,
-                payments && data && data.jobs.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null
-              );
               return (
                 <>
                   <Input
@@ -300,6 +256,13 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
                     type="hidden"
                     value={totalAmountToCharge?.toFixed(2)}
                   />
+                  <Input
+                    className="ipayfield"
+                    data-ipayname="comment"
+                    type="hidden"
+                    value={btoa(JSON.stringify(payments))}
+                    hidden
+                  />
                   <Button
                     type="primary"
                     //  data-ipayname="submit"
@@ -314,11 +277,6 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
               );
             }}
           </Form.Item>
-
-          {/* Lightbox payment response when it is completed */}
-          <Form.Item name="paymentResponse" hidden>
-            <Input type="hidden" />
-          </Form.Item>
         </Form>
       </Spin>
     </Card>

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

@@ -28,6 +28,7 @@ const CourtesyCarStatusComponent = ({ value, onChange }, ref) => {
       <Option value="courtesycars.status.out">{t("courtesycars.status.out")}</Option>
       <Option value="courtesycars.status.sold">{t("courtesycars.status.sold")}</Option>
       <Option value="courtesycars.status.leasereturn">{t("courtesycars.status.leasereturn")}</Option>
+      <Option value="courtesycars.status.unavailable">{t("courtesycars.status.unavailable")}</Option>
     </Select>
   );
 };

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -61,7 +61,11 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
         {
           text: t("courtesycars.status.leasereturn"),
           value: "courtesycars.status.leasereturn"
-        }
+        },
+        {
+          text: t("courtesycars.status.unavailable"),
+          value: "courtesycars.status.unavailable",
+        },
       ],
       onFilter: (value, record) => record.status === value,
       sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,

client/src/components/employee-search-select/employee-search-select-email.component.jsx

@@ -0,0 +1,37 @@
+import { Select, Space, Tag } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const { Option } = Select;
+//To be used as a form element only.
+
+const EmployeeSearchSelectEmail = ({ options, ...props }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Select
+      showSearch
+      // value={option}
+      style={{
+        width: 400
+      }}
+      optionFilterProp="search"
+      {...props}
+    >
+      {options
+        ? options.map((o) => (
+            <Option key={o.id} value={o.user_email} search={`${o.employee_number}  ${o.first_name} ${o.last_name}`}>
+              <Space>
+                {`${o.employee_number}  ${o.first_name} ${o.last_name}`}
+
+                <Tag color="green">
+                  {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
+                </Tag>
+              </Space>
+            </Option>
+          ))
+        : null}
+    </Select>
+  );
+};
+export default EmployeeSearchSelectEmail;

client/src/components/form-date-time-picker-enhanced/form-date-time-picker-enhanced.component.jsx

@@ -0,0 +1,48 @@
+import { DatePicker } from "antd";
+import dayjs from "../../utils/day.js";
+import React, { useRef } from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(FormDateTimePickerEnhanced);
+
+const dateFormat = "MM/DD/YYYY h:mm a";
+
+export function FormDateTimePickerEnhanced({
+  bodyshop,
+  value,
+  onBlur,
+  onlyFuture,
+  onlyToday,
+  isDateOnly = true,
+  ...restProps
+}) {
+  const ref = useRef();
+  return (
+    <div>
+      <DatePicker
+        ref={ref}
+        value={value ? dayjs(value) : null}
+        format={dateFormat}
+        onBlur={onBlur}
+        showToday={false}
+        disabledDate={(d) => {
+          if (onlyToday) {
+            return !dayjs().isSame(d, "day");
+          } else if (onlyFuture) {
+            return dayjs().subtract(1, "day").isAfter(d);
+          }
+        }}
+        {...restProps}
+      />
+    </div>
+  );
+}

client/src/components/form-date-time-picker/form-date-time-picker.component.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 //import DatePicker from "react-datepicker";
 //import "react-datepicker/src/stylesheets/datepicker.scss";
-import { TimePicker } from "antd";
+import { Space, TimePicker } from "antd";
 import dayjs from "../../utils/day";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 //To be used as a form element only.
@@ -14,7 +14,7 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, ...restProps
   // };
 
   return (
-    <div id={id}>
+    <Space direction="vertical" style={{ width: "100%" }} id={id}>
       <FormDatePicker
         {...restProps}
         {...(onlyFuture && {
@@ -39,7 +39,7 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, ...restProps
         format="hh:mm a"
         {...restProps}
       />
-    </div>
+    </Space>
   );
 };
 

client/src/components/global-search/global-search-os.component.jsx

@@ -3,14 +3,13 @@ import axios from "axios";
 import _ from "lodash";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 
 export default function GlobalSearchOs() {
   const { t } = useTranslation();
-  const history = useNavigate();
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState(false);
 
@@ -178,15 +177,7 @@ export default function GlobalSearchOs() {
   };
 
   return (
-    <AutoComplete
+    <AutoComplete options={data} onSearch={handleSearch} defaultActiveFirstOption onClear={() => setData([])}>
-      options={data}
-      onSearch={handleSearch}
-      defaultActiveFirstOption
-      onSelect={(val, opt) => {
-        history(opt.label.props.to);
-      }}
-      onClear={() => setData([])}
-    >
       <Input.Search
         size="large"
         placeholder={t("general.labels.globalsearch")}

client/src/components/global-search/global-search.component.jsx

@@ -3,7 +3,7 @@ import { AutoComplete, Divider, Input, Space } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
@@ -12,7 +12,6 @@ import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.compon
 
 export default function GlobalSearch() {
   const { t } = useTranslation();
-  const history = useNavigate();
   const [callSearch, { loading, error, data }] = useLazyQuery(GLOBAL_SEARCH_QUERY);
 
   const executeSearch = (v) => {
@@ -157,14 +156,7 @@ export default function GlobalSearch() {
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <AutoComplete
+    <AutoComplete options={options} onSearch={handleSearch} defaultActiveFirstOption>
-      options={options}
-      onSearch={handleSearch}
-      defaultActiveFirstOption
-      onSelect={(val, opt) => {
-        history(opt.label.props.to);
-      }}
-    >
       <Input.Search
         size="large"
         placeholder={t("general.labels.globalsearch")}

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

@@ -17,6 +17,7 @@ import Icon, {
   LineChartOutlined,
   PaperClipOutlined,
   PhoneOutlined,
+  PlusCircleOutlined,
   QuestionCircleFilled,
   ScheduleOutlined,
   SettingOutlined,
@@ -30,7 +31,8 @@ import { Layout, Menu, Switch, Tooltip } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
-import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar } from "react-icons/fa";
+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";
@@ -41,7 +43,6 @@ import { selectRecentItems, selectSelectedHeader } from "../../redux/application
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import { FiLogOut } from "react-icons/fi";
 import { checkBeta, handleBeta, setBeta } from "../../utils/betaHandler";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
@@ -54,12 +55,43 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
+  setBillEnterContext: (context) =>
-  setTimeTicketContext: (context) => dispatch(setModalContext({ context: context, modal: "timeTicket" })),
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "billEnter"
+      })
+    ),
+  setTimeTicketContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "timeTicket"
+      })
+    ),
   setPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "payment" })),
-  setReportCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "reportCenter" })),
+  setReportCenterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "reportCenter"
+      })
+    ),
   signOutStart: () => dispatch(signOutStart()),
-  setCardPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "cardPayment" }))
+  setCardPaymentContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "cardPayment"
+      })
+    ),
+  setTaskUpsertContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "taskUpsert"
+      })
+    )
 });
 
 function Header({
@@ -73,7 +105,8 @@ function Header({
   setPaymentContext,
   setReportCenterContext,
   recentItems,
-  setCardPaymentContext
+  setCardPaymentContext,
+  setTaskUpsertContext
 }) {
   const {
     treatments: { ImEXPay, DmsAp, Simple_Inventory }
@@ -108,11 +141,13 @@ function Header({
     accountingChildren.push(
       {
         key: "bills",
+        id: "header-accounting-bills",
         icon: <Icon component={FaFileInvoiceDollar} />,
         label: <Link to="/manage/bills">{t("menus.header.bills")}</Link>
       },
       {
         key: "enterbills",
+        id: "header-accounting-enterbills",
         icon: <Icon component={GiPayMoney} />,
         label: t("menus.header.enterbills"),
         onClick: () => {
@@ -132,6 +167,7 @@ function Header({
       },
       {
         key: "inventory",
+        id: "header-accounting-inventory",
         icon: <Icon component={FaFileInvoiceDollar} />,
         label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
       }
@@ -150,11 +186,13 @@ function Header({
       },
       {
         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: <Icon component={FaCreditCard} />,
         label: t("menus.header.enterpayment"),
         onClick: () => {
@@ -170,6 +208,7 @@ function Header({
   if (ImEXPay.treatment === "on") {
     accountingChildren.push({
       key: "entercardpayments",
+      id: "header-accounting-entercardpayments",
       icon: <Icon component={FaCreditCard} />,
       label: t("menus.header.entercardpayment"),
       onClick: () => {
@@ -194,6 +233,7 @@ function Header({
       },
       {
         key: "timetickets",
+        id: "header-accounting-timetickets",
         icon: <FieldTimeOutlined />,
         label: <Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>
       }
@@ -202,6 +242,7 @@ function Header({
     if (bodyshop?.md_tasks_presets?.use_approvals) {
       accountingChildren.push({
         key: "ttapprovals",
+        id: "header-accounting-ttapprovals",
         icon: <FieldTimeOutlined />,
         label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
       });
@@ -211,6 +252,7 @@ function Header({
         key: "entertimetickets",
         icon: <Icon component={GiPlayerTime} />,
         label: t("menus.header.entertimeticket"),
+        id: "header-accounting-entertimetickets",
         onClick: () => {
           setTimeTicketContext({
             actions: {},
@@ -231,6 +273,7 @@ function Header({
   const accountingExportChildren = [
     {
       key: "receivables",
+      id: "header-accounting-receivables",
       label: <Link to="/manage/accounting/receivables">{t("menus.header.accounting-receivables")}</Link>
     }
   ];
@@ -238,6 +281,7 @@ function Header({
   if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
     accountingExportChildren.push({
       key: "payables",
+      id: "header-accounting-payables",
       label: <Link to="/manage/accounting/payables">{t("menus.header.accounting-payables")}</Link>
     });
   }
@@ -245,6 +289,7 @@ function Header({
   if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))) {
     accountingExportChildren.push({
       key: "payments",
+      id: "header-accounting-payments",
       label: <Link to="/manage/accounting/payments">{t("menus.header.accounting-payments")}</Link>
     });
   }
@@ -255,6 +300,7 @@ function Header({
     },
     {
       key: "exportlogs",
+      id: "header-accounting-exportlogs",
       label: <Link to="/manage/accounting/exportlogs">{t("menus.header.export-logs")}</Link>
     }
   );
@@ -268,6 +314,7 @@ function Header({
   ) {
     accountingChildren.push({
       key: "accountingexport",
+      id: "header-accounting-export",
       icon: <ExportOutlined />,
       label: t("menus.header.export"),
       children: accountingExportChildren
@@ -278,10 +325,12 @@ function Header({
     {
       key: "home",
       icon: <HomeFilled />,
+      id: "header-home",
       label: <Link to="/manage/">{t("menus.header.home")}</Link>
     },
     {
       key: "schedule",
+      id: "header-schedule",
       icon: <Icon component={FaCalendarAlt} />,
       label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
     },
@@ -293,16 +342,19 @@ function Header({
       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>
         },
@@ -314,6 +366,7 @@ function Header({
         },
         {
           key: "newjob",
+          id: "header-new-job",
           icon: <FileAddOutlined />,
           label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
         },
@@ -322,6 +375,7 @@ function Header({
         },
         {
           key: "alljobs",
+          id: "header-all-jobs",
           icon: <UnorderedListOutlined />,
           label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
         },
@@ -330,6 +384,7 @@ function Header({
         },
         {
           key: "productionlist",
+          id: "header-production-list",
           icon: <ScheduleOutlined />,
           label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
         },
@@ -341,6 +396,7 @@ function Header({
           ? [
               {
                 key: "productionboard",
+                id: "header-production-board",
                 icon: <Icon component={BsKanban} />,
                 label: <Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>
               }
@@ -358,6 +414,7 @@ function Header({
               },
               {
                 key: "scoreboard",
+                id: "header-scoreboard",
                 icon: <LineChartOutlined />,
                 label: <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
               }
@@ -368,15 +425,18 @@ function Header({
     {
       key: "customers",
       icon: <UserOutlined />,
+      id: "header-customers",
       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>
         }
@@ -390,21 +450,25 @@ function Header({
       ? [
           {
             key: "ccs",
+            id: "header-css",
             icon: <CarFilled />,
             label: t("menus.header.courtesycars"),
             children: [
               {
                 key: "courtesycarsall",
+                id: "header-courtesycars-all",
                 icon: <CarFilled />,
                 label: <Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>
               },
               {
                 key: "contracts",
+                id: "header-contracts",
                 icon: <FileFilled />,
                 label: <Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>
               },
               {
                 key: "newcontract",
+                id: "header-newcontract",
                 icon: <FileAddFilled />,
                 label: <Link to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>
               }
@@ -417,6 +481,7 @@ function Header({
       ? [
           {
             key: "accounting",
+            id: "header-accounting",
             icon: <DollarCircleFilled />,
             label: t("menus.header.accounting"),
             children: accountingChildren
@@ -425,6 +490,7 @@ function Header({
       : []),
     {
       key: "phonebook",
+      id: "header-phonebook",
       icon: <PhoneOutlined />,
       label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
     },
@@ -436,28 +502,62 @@ function Header({
       ? [
           {
             key: "temporarydocs",
+            id: "header-temporarydocs",
             icon: <PaperClipOutlined />,
             label: <Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>
           }
         ]
       : []),
+    {
+      key: "tasks",
+      id: "tasks",
+      icon: <FaTasks />,
+      label: t("menus.header.tasks"),
+      children: [
+        {
+          key: "createTask",
+          icon: <PlusCircleOutlined />,
+          label: t("menus.header.create_task"),
+          onClick: () => {
+            setTaskUpsertContext({
+              actions: {},
+              context: {}
+            });
+          }
+        },
+        {
+          key: "mytasks",
+          icon: <FaTasks />,
+          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
+        },
+        {
+          key: "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: <Icon component={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">{t("menus.header.dashboard")}</Link>
         },
         {
           key: "reportcenter",
+          id: "header-reportcenter",
           icon: <BarChartOutlined />,
           label: t("menus.header.reportcenter"),
           onClick: () => {
@@ -469,6 +569,7 @@ function Header({
         },
         {
           key: "shop-vendors",
+          id: "header-shop-vendors",
           icon: <Icon component={IoBusinessOutline} />,
           label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
         },
@@ -480,6 +581,7 @@ function Header({
           ? [
               {
                 key: "shop-csi",
+                id: "header-shop-csi",
                 icon: <Icon component={RiSurveyLine} />,
                 label: <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
               }
@@ -493,6 +595,7 @@ function Header({
       children: [
         {
           key: "signout",
+          id: "header-signout",
           icon: <Icon component={FiLogOut} />,
           danger: true,
           label: t("user.actions.signout"),
@@ -500,6 +603,7 @@ function Header({
         },
         {
           key: "help",
+          id: "header-help",
           icon: <Icon component={QuestionCircleFilled} />,
           label: t("menus.header.help"),
           onClick: () => {
@@ -514,14 +618,22 @@ function Header({
             );
           }
         },
-        // {
+        ...(InstanceRenderManager({
-        //     key: 'rescue',
+          imex: true,
-        //     icon: <Icon component={CarFilled}/>,
+          rome: false,
-        //     label: t("menus.header.rescueme"),
+          promanager: false
-        //     onClick: () => {
+        })
-        //         window.open("https://imexrescue.com/", "_blank");
+          ? [
-        //     }
+              {
-        // },
+                key: "rescue",
+                icon: <Icon component={CarFilled} />,
+                label: t("menus.header.rescueme"),
+                onClick: () => {
+                  window.open("https://imexrescue.com/", "_blank");
+                }
+              }
+            ]
+          : []),
 
         ...(InstanceRenderManager({
           imex: true,
@@ -531,6 +643,7 @@ function Header({
           ? [
               {
                 key: "shiftclock",
+                id: "header-shiftclock",
                 icon: <Icon component={GiPlayerTime} />,
                 label: <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
               }
@@ -538,6 +651,7 @@ function Header({
           : []),
         {
           key: "profile",
+          id: "header-profile",
           icon: <UserOutlined />,
           label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
         }
@@ -573,6 +687,7 @@ function Header({
     {
       key: "recent",
       icon: <ClockCircleFilled />,
+      id: "header-recent",
       children: recentItems.map((i, idx) => ({
         key: idx,
         label: <Link to={i.url}>{i.label}</Link>
@@ -586,6 +701,7 @@ function Header({
     imex: () => {
       menuItems.push({
         key: "beta-switch",
+        id: "header-beta-switch",
         style: { marginLeft: "auto" },
         label: (
           <Tooltip

client/src/components/job-bills-total/job-bills-total.component.jsx

@@ -1,11 +1,11 @@
-import { Alert,  Card, Col, Row, Space, Statistic, Tooltip, Typography  } from 'antd';
+import { Alert, Card, Col, Row, Space, Statistic, Tooltip, Typography } from "antd";
-import Dinero from 'dinero.js';
+import Dinero from "dinero.js";
-import React from 'react';
+import React from "react";
-import {  useTranslation  } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import InstanceRenderManager from '../../utils/instanceRenderMgr';
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import AlertComponent from '../alert/alert.component';
+import AlertComponent from "../alert/alert.component";
-import LoadingSkeleton from '../loading-skeleton/loading-skeleton.component';
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
-import './job-bills-total.styles.scss';
+import "./job-bills-total.styles.scss";
 
 export default function JobBillsTotalComponent({
   loading,
@@ -13,16 +13,16 @@ export default function JobBillsTotalComponent({
   partsOrders,
   jobTotals,
   showWarning,
-  warningCallback,
+  warningCallback
 }) {
   const { t } = useTranslation();
 
   if (loading) return <LoadingSkeleton />;
   if (!!!jobTotals) {
-    if (showWarning && warningCallback && typeof warningCallback === 'function') {
+    if (showWarning && warningCallback && typeof warningCallback === "function") {
-      warningCallback({ key: 'bills', warning: t('jobs.errors.nofinancial') });
+      warningCallback({ key: "bills", warning: t("jobs.errors.nofinancial") });
     }
-    return <AlertComponent type="error" message={t('jobs.errors.nofinancial')} />;
+    return <AlertComponent type="error" message={t("jobs.errors.nofinancial")} />;
   }
 
   const totals = jobTotals;
@@ -109,64 +109,60 @@ export default function JobBillsTotalComponent({
   const discrepWithCms = discrepWithLbrAdj.add(totalReturns);
   const calculatedCreditsNotReceived = totalReturns.subtract(billCms); //billCms is tracked as a negative number.
 
-  if (showWarning && warningCallback && typeof warningCallback === 'function') {
+  if (showWarning && warningCallback && typeof warningCallback === "function") {
-    if (
+    if (discrepWithCms.getAmount() !== 0) {
-      discrepWithCms.getAmount() !== 0 ||
-      discrepWithLbrAdj.getAmount() !== 0 ||
-      discrepancy.getAmount() !== 0
-    ) {
       warningCallback({
-        key: 'bills',
+        key: "bills",
-        warning: t('jobs.labels.outstanding_reconciliation_discrep'),
+        warning: t("jobs.labels.outstanding_reconciliation_discrep")
       });
     }
     if (calculatedCreditsNotReceived.getAmount() > 0) {
-      warningCallback({ key: 'cm', warning: t('jobs.labels.outstanding_credit_memos') });
+      warningCallback({ key: "cm", warning: t("jobs.labels.outstanding_credit_memos") });
     }
   }
 
   return (
     <Row gutter={[16, 16]}>
       <Col md={24} lg={18}>
-        <Card title={t('jobs.labels.jobtotals')} style={{ height: '100%' }}>
+        <Card title={t("jobs.labels.jobtotals")} style={{ height: "100%" }}>
           <Space wrap size="large">
             <Tooltip
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.partstotal'),
+                    __html: t("jobs.labels.plitooltips.partstotal")
                   }}
                 />
               }
             >
-              <Statistic title={t('jobs.labels.rosaletotal')} value={totalPartsSublet.toFormat()} />
+              <Statistic title={t("jobs.labels.rosaletotal")} value={totalPartsSublet.toFormat()} />
             </Tooltip>
             <Typography.Title>-</Typography.Title>
             <Tooltip
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.billtotal'),
+                    __html: t("jobs.labels.plitooltips.billtotal")
                   }}
                 />
               }
             >
-              <Statistic title={t('bills.labels.retailtotal')} value={billTotals.toFormat()} />
+              <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.discrep1'),
+                    __html: t("jobs.labels.plitooltips.discrep1")
                   }}
                 />
               }
             >
               <Statistic
-                title={t('bills.labels.discrepancy')}
+                title={t("bills.labels.discrepancy")}
                 valueStyle={{
-                  color: discrepancy.getAmount() === 0 ? 'green' : 'red',
+                  color: discrepancy.getAmount() === 0 ? "green" : "red"
                 }}
                 value={discrepancy.toFormat()}
               />
@@ -176,27 +172,27 @@ export default function JobBillsTotalComponent({
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.laboradj'),
+                    __html: t("jobs.labels.plitooltips.laboradj")
                   }}
                 />
               }
             >
-              <Statistic title={t('bills.labels.dedfromlbr')} value={lbrAdjustments.toFormat()} />
+              <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.discrep2'),
+                    __html: t("jobs.labels.plitooltips.discrep2")
                   }}
                 />
               }
             >
               <Statistic
-                title={t('bills.labels.discrepancy')}
+                title={t("bills.labels.discrepancy")}
                 valueStyle={{
-                  color: discrepWithLbrAdj.getAmount() === 0 ? 'green' : 'red',
+                  color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
                 }}
                 value={discrepWithLbrAdj.toFormat()}
               />
@@ -206,27 +202,27 @@ export default function JobBillsTotalComponent({
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.creditmemos'),
+                    __html: t("jobs.labels.plitooltips.creditmemos")
                   }}
                 />
               }
             >
-              <Statistic title={t('bills.labels.totalreturns')} value={totalReturns.toFormat()} />
+              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.discrep3'),
+                    __html: t("jobs.labels.plitooltips.discrep3")
                   }}
                 />
               }
             >
               <Statistic
-                title={t('bills.labels.discrepancy')}
+                title={t("bills.labels.discrepancy")}
                 valueStyle={{
-                  color: discrepWithCms.getAmount() === 0 ? 'green' : 'red',
+                  color: discrepWithCms.getAmount() === 0 ? "green" : "red"
                 }}
                 value={discrepWithCms.toFormat()}
               />
@@ -238,40 +234,40 @@ export default function JobBillsTotalComponent({
               discrepWithLbrAdj.getAmount() !== 0 ||
               discrepancy.getAmount() !== 0) && (
               <Alert
-                style={{ margin: '8px 0px' }}
+                style={{ margin: "8px 0px" }}
                 type="warning"
-                message={t('jobs.labels.outstanding_reconciliation_discrep')}
+                message={t("jobs.labels.outstanding_reconciliation_discrep")}
               />
             )}
         </Card>
       </Col>
       <Col md={24} lg={6}>
-        <Card title={t('jobs.labels.returntotals')} style={{ height: '100%' }}>
+        <Card title={t("jobs.labels.returntotals")} style={{ height: "100%" }}>
           <Space wrap>
             <Tooltip
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.totalreturns'),
+                    __html: t("jobs.labels.plitooltips.totalreturns")
                   }}
                 />
               }
             >
-              <Statistic title={t('bills.labels.totalreturns')} value={totalReturns.toFormat()} />
+              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
             </Tooltip>
             <Tooltip
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.calculatedcreditsnotreceived'),
+                    __html: t("jobs.labels.plitooltips.calculatedcreditsnotreceived")
                   }}
                 />
               }
             >
               <Statistic
-                title={t('bills.labels.calculatedcreditsnotreceived')}
+                title={t("bills.labels.calculatedcreditsnotreceived")}
                 valueStyle={{
-                  color: calculatedCreditsNotReceived.getAmount() <= 0 ? 'green' : 'red',
+                  color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
                 }}
                 value={
                   calculatedCreditsNotReceived.getAmount() >= 0
@@ -284,15 +280,15 @@ export default function JobBillsTotalComponent({
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.creditsnotreceived'),
+                    __html: t("jobs.labels.plitooltips.creditsnotreceived")
                   }}
                 />
               }
             >
               <Statistic
-                title={t('bills.labels.creditsnotreceived')}
+                title={t("bills.labels.creditsnotreceived")}
                 valueStyle={{
-                  color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? 'green' : 'red',
+                  color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
                 }}
                 value={
                   totalReturnsMarkedNotReceived.getAmount() >= 0
@@ -303,11 +299,7 @@ export default function JobBillsTotalComponent({
             </Tooltip>
           </Space>
           {showWarning && calculatedCreditsNotReceived.getAmount() > 0 && (
-            <Alert
+            <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_credit_memos")} />
-              style={{ margin: '8px 0px' }}
-              type="warning"
-              message={t('jobs.labels.outstanding_credit_memos')}
-            />
           )}
         </Card>
       </Col>

client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx

@@ -1,20 +1,20 @@
-import React from 'react';
+import React from "react";
 
-import { useQuery } from '@apollo/client';
+import { useQuery } from "@apollo/client";
-import { useSplitTreatments } from '@splitsoftware/splitio-react';
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { createStructuredSelector } from 'reselect';
+import { createStructuredSelector } from "reselect";
-import { GET_LINE_TICKET_BY_PK } from '../../graphql/jobs-lines.queries';
+import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
-import { selectJobReadOnly } from '../../redux/application/application.selectors';
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import { selectBodyshop } from '../../redux/user/user.selectors';
+import { selectBodyshop } from "../../redux/user/user.selectors";
-import AlertComponent from '../alert/alert.component';
+import AlertComponent from "../alert/alert.component";
-import LaborAllocationsTableComponent from '../labor-allocations-table/labor-allocations-table.component';
+import LaborAllocationsTableComponent from "../labor-allocations-table/labor-allocations-table.component";
-import PayrollLaborAllocationsTable from '../labor-allocations-table/labor-allocations-table.payroll.component';
+import PayrollLaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.payroll.component";
-import LoadingSkeleton from '../loading-skeleton/loading-skeleton.component';
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -24,21 +24,21 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRoGuardLabor
 export function JobCloseRoGuardLabor({ job, jobRO, bodyshop, form, warningCallback }) {
   const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
     variables: { id: job.id },
-    fetchPolicy: 'network-only',
+    fetchPolicy: "network-only",
-    nextFetchPolicy: 'network-only',
+    nextFetchPolicy: "network-only"
   });
   const {
-    treatments: { Enhanced_Payroll },
+    treatments: { Enhanced_Payroll }
   } = useSplitTreatments({
     attributes: {},
-    names: ['Enhanced_Payroll'],
+    names: ["Enhanced_Payroll"],
-    splitKey: bodyshop.imexshopid,
+    splitKey: bodyshop.imexshopid
   });
 
   if (loading) return <LoadingSkeleton />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
-  return Enhanced_Payroll.treatment === 'on' ? (
+  return Enhanced_Payroll.treatment === "on" ? (
     <PayrollLaborAllocationsTable
       jobId={job.id}
       timetickets={data ? data.timetickets : []}

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

@@ -1,19 +1,19 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 
-import { Alert, Card } from 'antd';
+import { Alert, Card } from "antd";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { createStructuredSelector } from 'reselect';
+import { createStructuredSelector } from "reselect";
-import { selectJobReadOnly } from '../../redux/application/application.selectors';
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import { selectBodyshop } from '../../redux/user/user.selectors';
+import { selectBodyshop } from "../../redux/user/user.selectors";
-import { useMemo } from 'react';
+import { useMemo } from "react";
-import Dinero from 'dinero.js';
+import Dinero from "dinero.js";
-import DataLabel from '../data-label/data-label.component';
+import DataLabel from "../data-label/data-label.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -41,25 +41,21 @@ export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form, warningCallb
 
   useEffect(() => {
     if (balance.getAmount() !== 0) {
-      warningCallback({ key: 'ar', warning: t('jobs.labels.outstanding_ar') });
+      warningCallback({ key: "ar", warning: t("jobs.labels.outstanding_ar") });
     }
   }, [balance, t, warningCallback]);
 
   return (
-    <Card title={t('jobs.labels.accountsreceivable')} style={{ height: '100%' }}>
+    <Card title={t("jobs.labels.accountsreceivable")} style={{ height: "100%" }}>
-      <DataLabel label={t('payments.labels.totalpayments')}>{total.toFormat()}</DataLabel>
+      <DataLabel label={t("payments.labels.totalpayments")}>{total.toFormat()}</DataLabel>
       <DataLabel
-        valueStyle={{ color: balance.getAmount() !== 0 ? 'red' : 'green' }}
+        valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
-        label={t('payments.labels.balance')}
+        label={t("payments.labels.balance")}
       >
         {balance.toFormat()}
       </DataLabel>
       {balance.getAmount() !== 0 && (
-        <Alert
+        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_ar")} />
-          style={{ margin: '8px 0px' }}
-          type="warning"
-          message={t('jobs.labels.outstanding_ar')}
-        />
       )}
     </Card>
   );

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

@@ -1,17 +1,17 @@
-import React from 'react';
+import React from "react";
 
-import { useQuery } from '@apollo/client';
+import { useQuery } from "@apollo/client";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { createStructuredSelector } from 'reselect';
+import { createStructuredSelector } from "reselect";
-import { QUERY_BILLS_BY_JOBID } from '../../graphql/bills.queries';
+import { QUERY_BILLS_BY_JOBID } from "../../graphql/bills.queries";
-import { selectJobReadOnly } from '../../redux/application/application.selectors';
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import { selectBodyshop } from '../../redux/user/user.selectors';
+import { selectBodyshop } from "../../redux/user/user.selectors";
-import AlertComponent from '../alert/alert.component';
+import AlertComponent from "../alert/alert.component";
-import JobBillsTotalComponent from '../job-bills-total/job-bills-total.component';
+import JobBillsTotalComponent from "../job-bills-total/job-bills-total.component";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -21,8 +21,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRoGuardBills
 export function JobCloseRoGuardBills({ job, jobRO, bodyshop, form, warningCallback }) {
   const { loading, error, data } = useQuery(QUERY_BILLS_BY_JOBID, {
     variables: { jobid: job.id },
-    fetchPolicy: 'network-only',
+    fetchPolicy: "network-only",
-    nextFetchPolicy: 'network-only',
+    nextFetchPolicy: "network-only"
   });
 
   if (error) return <AlertComponent message={error.message} type="error" />;

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

@@ -76,20 +76,21 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
             <Col className="ro-guard-col-multiple" md={24} lg={6}>
               <Row gutter={[32, 32]} style={{ height: "100%" }}>
                 <Col span={24}>
-                  <JobCloseRoGuardProfit
+                  <JobCloseRoGuardProfit job={job} form={form} warningCallback={warningCallback} />
-                    job={job}
-                    form={form} //warningCallback={warningCallback}
-                  />
                 </Col>
                 <Col span={24}>
                   <JobCloseRoGuardAr job={job} form={form} warningCallback={warningCallback} />
                 </Col>
               </Row>
             </Col>
-            <Col className="ro-guard-col-50" md={24} lg={8}>
+            {InstanceRenderManager({
-              <JobCloseRoGuardSublet job={job} warningCallback={warningCallback} />
+              rome: (
-              {InstanceRenderManager({ rome: <JobCloseRoGuardPpd job={job} warningCallback={warningCallback} /> })}
+                <Col md={24} lg={8}>
-            </Col>
+                  {/* <JobCloseRoGuardSublet job={job} warningCallback={warningCallback} /> */}
+                  <JobCloseRoGuardPpd job={job} warningCallback={warningCallback} />
+                </Col>
+              )
+            })}
             <Col className="ro-guard-col" md={24} lg={10}>
               <JobCloseRoGuardLabor job={job} form={form} warningCallback={warningCallback} />
             </Col>

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

@@ -1,20 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 
-import { LockOutlined } from '@ant-design/icons';
+import { Alert, Card } from "antd";
-import { Card, Form, Input } from 'antd';
+import axios from "axios";
-import axios from 'axios';
+import { useTranslation } from "react-i18next";
-import { useTranslation } from 'react-i18next';
+import { connect } from "react-redux";
-import { connect } from 'react-redux';
+import { createStructuredSelector } from "reselect";
-import { createStructuredSelector } from 'reselect';
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import { selectJobReadOnly } from '../../redux/application/application.selectors';
+import { selectBodyshop } from "../../redux/user/user.selectors";
-import { selectBodyshop } from '../../redux/user/user.selectors';
+import JobCostingStatistics from "../job-costing-statistics/job-costing-statistics.component";
-import JobCostingStatistics from '../job-costing-statistics/job-costing-statistics.component';
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
-import LoadingSkeleton from '../loading-skeleton/loading-skeleton.component';
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -31,7 +30,7 @@ export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form, warningCallb
       try {
         if (job.id) {
           setLoading(true);
-          const { data } = await axios.post('/job/costing', { jobid: job.id });
+          const { data } = await axios.post("/job/costing", { jobid: job.id });
           setCostingData(data);
         }
       } catch (error) {}
@@ -45,16 +44,19 @@ export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form, warningCallb
     parseFloat(costingData?.summaryData.gppercent) < bodyshop?.md_ro_guard?.totalgppercent_minimum;
 
   useEffect(() => {
-    if (enforceProfitPassword && typeof warningCallback === 'function') {
+    if (enforceProfitPassword && typeof warningCallback === "function") {
-      warningCallback({ key: 'profit', warning: t('jobs.labels.profitbypassrequired') });
+      warningCallback({ key: "profit", warning: t("jobs.labels.profitbypassrequired") });
     }
   }, [enforceProfitPassword, t, warningCallback]);
 
   if (loading || !costingData) return <LoadingSkeleton />;
 
   return (
-    <Card title={t('jobs.labels.profits')} style={{ height: '100%' }}>
+    <Card title={t("jobs.labels.profits")} style={{ height: "100%" }}>
       <JobCostingStatistics summaryData={costingData?.summaryData} onlyGP />
+      {enforceProfitPassword && (
+        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.profitbypassrequired")} />
+      )}
     </Card>
   );
 }

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

@@ -1,17 +1,17 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 
-import { Alert, Card, Table } from 'antd';
+import { Alert, Card, Table } from "antd";
-import { t } from 'i18next';
+import { t } from "i18next";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { createStructuredSelector } from 'reselect';
+import { createStructuredSelector } from "reselect";
-import { selectJobReadOnly } from '../../redux/application/application.selectors';
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import { selectBodyshop } from '../../redux/user/user.selectors';
+import { selectBodyshop } from "../../redux/user/user.selectors";
-import CurrencyFormatter from '../../utils/CurrencyFormatter';
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort } from '../../utils/sorters';
+import { alphaSort } from "../../utils/sorters";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -20,69 +20,56 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRGuardSublet
 
 export function JobCloseRGuardSublet({ job, jobRO, bodyshop, form, warningCallback }) {
   const subletsNotDone = job?.joblines.filter(
-    (j) =>
+    (j) => (j.part_type === "PAS" || j.part_type === "PASL") && (!j.sublet_completed || !j.sublet_ignored)
-      (j.part_type === 'PAS' || j.part_type === 'PASL') &&
-      (!j.sublet_completed || !j.sublet_ignored)
   );
 
   const columns = [
     {
-      title: t('joblines.fields.line_desc'),
+      title: t("joblines.fields.line_desc"),
-      dataIndex: 'line_desc',
+      dataIndex: "line_desc",
-      fixed: 'left',
+      fixed: "left",
-      key: 'line_desc',
+      key: "line_desc",
       sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
       onCell: (record) => ({
-        className: record.manual_line && 'job-line-manual',
+        className: record.manual_line && "job-line-manual",
         style: {
-          ...(record.critical ? { boxShadow: ' -.5em 0 0 #FFC107' } : {}),
+          ...(record.critical ? { boxShadow: " -.5em 0 0 #FFC107" } : {})
-        },
+        }
       }),
-      ellipsis: true,
+      ellipsis: true
     },
     {
-      title: t('joblines.fields.act_price'),
+      title: t("joblines.fields.act_price"),
-      dataIndex: 'act_price',
+      dataIndex: "act_price",
-      key: 'act_price',
+      key: "act_price",
       sorter: (a, b) => a.act_price - b.act_price,
 
       ellipsis: true,
-      render: (text, record) => <CurrencyFormatter>{record.act_price}</CurrencyFormatter>,
+      render: (text, record) => <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
     },
     {
-      title: t('joblines.fields.part_qty'),
+      title: t("joblines.fields.part_qty"),
-      dataIndex: 'part_qty',
+      dataIndex: "part_qty",
-      key: 'part_qty',
+      key: "part_qty"
     },
     {
-      title: t('joblines.fields.notes'),
+      title: t("joblines.fields.notes"),
-      dataIndex: 'notes',
+      dataIndex: "notes",
-      key: 'notes',
+      key: "notes"
-    },
+    }
   ];
 
   useEffect(() => {
     if (subletsNotDone.length > 0) {
-      warningCallback({ key: 'sublet', warning: t('jobs.labels.outstanding_sublets') });
+      warningCallback({ key: "sublet", warning: t("jobs.labels.outstanding_sublets") });
     }
   }, [subletsNotDone.length, warningCallback]);
 
   return (
-    <Card title={t('jobs.labels.subletsnotcompleted')}>
+    <Card title={t("jobs.labels.subletsnotcompleted")}>
-      <Table
+      <Table dataSource={subletsNotDone} columns={columns} pagination={false} rowKey="id" bordered size="small" />
-        dataSource={subletsNotDone}
-        columns={columns}
-        pagination={false}
-        rowKey="id"
-        bordered
-        size="small"
-      />
       {subletsNotDone.length > 0 && (
-        <Alert
+        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_sublets")} />
-          style={{ margin: '8px 0px' }}
-          type="warning"
-          message={t('jobs.labels.outstanding_sublets')}
-        />
       )}
     </Card>
   );

client/src/components/job-close-ro-guard/job-close-ro-guard.tt-lifecycle.jsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React from "react";
 
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { createStructuredSelector } from 'reselect';
+import { createStructuredSelector } from "reselect";
-import { selectJobReadOnly } from '../../redux/application/application.selectors';
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import { selectBodyshop } from '../../redux/user/user.selectors';
+import { selectBodyshop } from "../../redux/user/user.selectors";
-import JobLifecycleComponent from '../job-lifecycle/job-lifecycle.component';
+import JobLifecycleComponent from "../job-lifecycle/job-lifecycle.component";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))

client/src/components/job-detail-lines/job-lines-expander.component.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Col, Divider, Row, Skeleton, Space, Timeline, Typography } from "antd";
+import { Col, Row, Skeleton, Space, Timeline, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -7,17 +7,19 @@ import { GET_JOB_LINE_ORDERS } from "../../graphql/jobs.queries";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { QUERY_JOBLINE_TASKS_PAGINATED } from "../../graphql/tasks.queries.js";
+import TaskListContainer from "../task-list/task-list.container.jsx";
+import FeatureWrapper from "../feature-wrapper/feature-wrapper.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+const mapDispatchToProps = (dispatch) => ({});
-});
+
 export default connect(mapStateToProps, mapDispatchToProps)(JobLinesExpander);
 
 export function JobLinesExpander({ jobline, jobid, bodyshop }) {
@@ -43,13 +45,25 @@ export function JobLinesExpander({ jobline, jobid, bodyshop }) {
               ? data.parts_order_lines.map((line) => ({
                   key: line.id,
                   children: (
-                    <Space split={<Divider type="vertical" />} wrap>
+                    <Row wrap>
-                      <Link to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}>
+                      <Col span={4}>
-                        {line.parts_order.order_number}
+                        <Link to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}>
-                      </Link>
+                          {line.parts_order.order_number}
-                      <DateFormatter>{line.parts_order.order_date}</DateFormatter>
+                        </Link>
-                      {line.parts_order.vendor.name}
+                      </Col>
-                    </Space>
+                      <Col span={4}>
+                        <DateFormatter>{line.parts_order.order_date}</DateFormatter>
+                      </Col>
+                      <Col span={4}>{line.parts_order.vendor.name}</Col>
+                      {line.backordered_eta ? (
+                        <Col span={4}>
+                          <span>
+                            {`${t("parts_orders.fields.backordered_eta")}: `}
+                            <DateFormatter>{line.backordered_eta}</DateFormatter>
+                          </span>
+                        </Col>
+                      ) : null}
+                    </Row>
                   )
                 }))
               : [
@@ -61,48 +75,6 @@ export function JobLinesExpander({ jobline, jobid, bodyshop }) {
           }
         />{" "}
       </Col>
-      <Col md={24} lg={8}>
-        <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
-        <Timeline
-          items={
-            data.billlines.length > 0
-              ? data.billlines.map((line) => ({
-                  key: line.id,
-                  children: (
-                    <Row wrap>
-                      <Col span={4}>
-                        <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
-                          {line.bill.invoice_number}
-                        </Link>
-                      </Col>
-                      <Col span={4}>
-                        <span>
-                          {`${t("billlines.fields.actual_price")}: `}
-                          <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
-                        </span>
-                      </Col>
-                      <Col span={4}>
-                        <span>
-                          {`${t("billlines.fields.actual_cost")}: `}
-                          <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
-                        </span>
-                      </Col>
-                      <Col span={4}>
-                        <DateFormatter>{line.bill.date}</DateFormatter>
-                      </Col>
-                      <Col span={4}> {line.bill.vendor.name}</Col>
-                    </Row>
-                  )
-                }))
-              : [
-                  {
-                    key: "no-orders",
-                    children: t("bills.labels.nobilllines")
-                  }
-                ]
-          }
-        />
-      </Col>
       <Col md={24} lg={8}>
         <Typography.Title level={4}>{t("parts_dispatch.labels.parts_dispatch")}</Typography.Title>
         <Timeline
@@ -111,23 +83,84 @@ export function JobLinesExpander({ jobline, jobid, bodyshop }) {
               ? data.parts_dispatch_lines.map((line) => ({
                   key: line.id,
                   children: (
-                    <Space split={<Divider type="vertical" />} wrap>
+                    <Row>
-                      <Link to={`/manage/jobs/${jobid}?partsorderid=${line.id}`}>{line.parts_dispatch.number}</Link>
+                      <Col span={8}>
-                      {bodyshop.employees.find((e) => e.id === line.parts_dispatch.employeeid)?.first_name}
+                        <Link to={`/manage/jobs/${jobid}?partsorderid=${line.id}`}>{line.parts_dispatch.number}</Link>
-                      <Space>
+                      </Col>
-                        {t("parts_dispatch_lines.fields.accepted_at")}
+                      <Col span={8}>
-                        <DateFormatter>{line.accepted_at}</DateFormatter>
+                        {bodyshop.employees.find((e) => e.id === line.parts_dispatch.employeeid)?.first_name}
-                      </Space>
+                      </Col>
-                    </Space>
+                      <Col span={8}>
+                        <Space>
+                          {t("parts_dispatch_lines.fields.accepted_at")}
+                          <DateFormatter>{line.accepted_at}</DateFormatter>
+                        </Space>
+                      </Col>
+                    </Row>
                   )
                 }))
-              : {
+              : [
-                  key: "dispatch-lines",
+                  {
-                  children: t("parts_orders.labels.notyetordered")
+                    key: "dispatch-lines",
-                }
+                    children: t("parts_dispatch.labels.notyetdispatched")
+                  }
+                ]
           }
         />
       </Col>
+      <FeatureWrapper featureName="bills" noauth={() => null}>
+        <Col md={24} lg={8}>
+          <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+          <Timeline
+            items={
+              data.billlines.length > 0
+                ? data.billlines.map((line) => ({
+                    key: line.id,
+                    children: (
+                      <Row wrap>
+                        <Col span={4}>
+                          <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
+                            {line.bill.invoice_number}
+                          </Link>
+                        </Col>
+                        <Col span={4}>
+                          <span>
+                            {`${t("billlines.fields.actual_price")}: `}
+                            <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
+                          </span>
+                        </Col>
+                        <Col span={4}>
+                          <span>
+                            {`${t("billlines.fields.actual_cost")}: `}
+                            <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
+                          </span>
+                        </Col>
+                        <Col span={4}>
+                          <DateFormatter>{line.bill.date}</DateFormatter>
+                        </Col>
+                        <Col span={4}> {line.bill.vendor.name}</Col>
+                      </Row>
+                    )
+                  }))
+                : [
+                    {
+                      key: "no-orders",
+                      children: t("bills.labels.nobilllines")
+                    }
+                  ]
+            }
+          />
+        </Col>
+      </FeatureWrapper>
+      <Col md={24} lg={24}>
+        <TaskListContainer
+          parentJobId={jobid}
+          relationshipType={"joblineid"}
+          relationshipId={jobline.id}
+          query={{ QUERY_JOBLINE_TASKS_PAGINATED }}
+          titleTranslation="tasks.titles.job_tasks"
+        />
+      </Col>
     </Row>
   );
 }

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

@@ -42,6 +42,8 @@ import JobSendPartPriceChangeComponent from "../job-send-parts-price-change/job-
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
 import JobLinesExpander from "./job-lines-expander.component";
 import JobLinesPartPriceChange from "./job-lines-part-price-change.component";
+import { FaTasks } from "react-icons/fa";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -52,7 +54,8 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   setJobLineEditContext: (context) => dispatch(setModalContext({ context: context, modal: "jobLineEdit" })),
   setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" }))
+  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
 export function JobLinesComponent({
@@ -67,7 +70,8 @@ export function JobLinesComponent({
   job,
   setJobLineEditContext,
   form,
-  setBillEnterContext
+  setBillEnterContext,
+  setTaskUpsertContext
 }) {
   const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
   const {
@@ -331,6 +335,24 @@ export function JobLinesComponent({
               >
                 <EditFilled />
               </Button>
+            </>
+          )}
+
+          <Button
+            title={t("tasks.buttons.create")}
+            onClick={() => {
+              setTaskUpsertContext({
+                context: {
+                  jobid: job.id,
+                  joblineid: record.id
+                }
+              });
+            }}
+          >
+            <FaTasks />
+          </Button>
+          {(record.manual_line || jobIsPrivate) && (
+            <>
               <Button
                 disabled={jobRO}
                 onClick={async () => {
@@ -452,7 +474,7 @@ export function JobLinesComponent({
                       vendorid: bodyshop.inhousevendorid,
                       invoice_number: "ih",
                       isinhouse: true,
-                      date: new dayjs(),
+                      date: dayjs(),
                       total: 0,
                       billlines: selectedLines.map((p) => {
                         return {
@@ -531,7 +553,7 @@ export function JobLinesComponent({
             >
               {t("joblines.actions.new")}
             </Button>
-            {bodyshop.region_config.toLowerCase().startsWith("us") && <JobSendPartPriceChangeComponent job={job} />}
+            {InstanceRenderManager({ rome: <JobSendPartPriceChangeComponent job={job} /> })}
             <JobCreateIOU job={job} selectedJobLines={selectedLines} />
             <Input.Search
               placeholder={t("general.labels.search")}

client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx

@@ -154,7 +154,7 @@ export function JobLineConvertToLabor({ children, jobline, job, insertAuditTrail
     setLoading(true);
 
     form.setFieldsValue({
-      //   date: new dayjs(),
+      //   date: dayjs(),
       //   bodyhrs: Math.round(v.bodyhrs * 10) / 10,
       //   painthrs: Math.round(v.painthrs * 10) / 10,
     });

client/src/components/job-search-select/job-search-select.component.jsx

@@ -1,3 +1,4 @@
+import { LoadingOutlined } from "@ant-design/icons";
 import { useLazyQuery } from "@apollo/client";
 import { Select, Space, Spin, Tag } from "antd";
 import _ from "lodash";
@@ -6,8 +7,6 @@ import { useTranslation } from "react-i18next";
 import { SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
 import AlertComponent from "../alert/alert.component";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
-import { SearchOutlined } from "@ant-design/icons";
-import { LoadingOutlined } from "@ant-design/icons";
 
 const { Option } = Select;
 
@@ -75,7 +74,7 @@ const JobSearchSelect = (
         filterOption={false}
         onSearch={handleSearch}
         //loading={loading || idLoading}
-        suffixIcon={loading && <Spin />}
+        suffixIcon={(loading || idLoading) && <Spin />}
         notFoundContent={loading ? <LoadingOutlined /> : null}
         {...restProps}
       >
@@ -86,9 +85,9 @@ const JobSearchSelect = (
                   <span>
                     {`${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${
                       o.ro_number || t("general.labels.na")
-                    } | ${OwnerNameDisplayFunction(o)} | ${
+                    } | ${OwnerNameDisplayFunction(o)} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
-                      o.v_model_yr || ""
+                      o.v_model_desc || ""
-                    } ${o.v_make_desc || ""} ${o.v_model_desc || ""}`}
+                    }`}
                   </span>
                   <Tag>
                     <strong>{o.status}</strong>

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

@@ -165,6 +165,8 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
         bold: true
       }
     ];
+    // TODO: was removed by Patrick during a CI bug fix.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [job.job_totals, job.cieca_pft, t, bodyshop.md_responsibility_centers]);
 
   const columns = [

client/src/components/jobs-available-table/jobs-available-supplement.estlines.util.js

@@ -15,23 +15,43 @@ export const GetSupplementDelta = async (client, jobId, newLines) => {
   const linesToUpdate = [];
 
   newLines.forEach((newLine) => {
-    const matchingIndex = existingLines.findIndex((eL) => eL.unq_seq === newLine.unq_seq);
+    const matchingIndexLines = [];
+    existingLines.forEach((eL, index) => {
+      if (eL.unq_seq === newLine.unq_seq) {
+        matchingIndexLines.push({ index, record: eL });
+      }
+    });
 
-    //Should do a check to make sure there is only 1 matching unq sequence number.
+    if (matchingIndexLines.length === 0) {
-
-    if (matchingIndex >= 0) {
-      //Found a relevant matching line. Add it to lines to update.
-      linesToUpdate.push({
-        id: existingLines[matchingIndex].id,
-        newData: { ...newLine, removed: false, act_price_before_ppc: null }
-      });
-
-      //Splice out item we found for performance.
-      existingLines.splice(matchingIndex, 1);
-    } else {
       //Didn't find a match. Must be a new line.
       linesToInsert.push(newLine);
     }
+    //If we find only 1, we can use the old logic.
+    else if (matchingIndexLines.length === 1) {
+      //Found a relevant matching line. Add it to lines to update.
+      linesToUpdate.push({
+        id: matchingIndexLines[0].record.id,
+        newData: { ...newLine, removed: false, act_price_before_ppc: null }
+      });
+      //Splice out item we found for performance.
+      existingLines.splice(matchingIndexLines[0].index, 1);
+    } else if (matchingIndexLines.length === 2) {
+      //if we find 2, we need to separate it out by the non-refinish lines and splice one out.
+      //Find the mathcing one depending on whether this is the refiniish one or not.
+      const matchingLine = matchingIndexLines.find((i) =>
+        newLine.mod_lbr_ty === "LAR" ? i.record.mod_lbr_ty === "LAR" : i.record.mod_lbr_ty !== "LAR"
+      );
+
+      linesToUpdate.push({
+        id: matchingLine.record.id,
+        newData: { ...newLine, removed: false, act_price_before_ppc: null }
+      });
+      //Splice out item we found for performance.
+      existingLines.splice(matchingLine.index, 1);
+    } else {
+      //We found more than 2 matching lines. We should never get here. Throw a warning and back out!
+      throw new Error("Too many matching lines found. Ensure EMS file is valid.");
+    }
   });
 
   //Wahtever is left in the existing lines, are lines that should be removed.

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

@@ -237,7 +237,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
         executeFunction: true,
         rome: ResolveCCCLineIssues,
         promanager: ResolveCCCLineIssues,
-        args: [(supp, bodyshop)]
+        args: [supp, bodyshop]
       });
 
       await InstanceRenderManager({
@@ -608,13 +608,12 @@ function ResolveCCCLineIssues(estData, bodyshop) {
           //Web Est seems to have additional costs with UNQ_SEQ 0. Keep them all?
           if (line.unq_seq === 0) return;
           if (index0ActPrice !== line.act_price) {
-            line.notes += ` | Price override.`;
+            // line.notes += ` | Price override.`;
             return;
           }
           const indexInEstData = estData.joblines.data.findIndex((l) => l.unq_seq === line.unq_seq);
-          estData.joblines.data[
+          //estData.joblines.data[indexInEstData].notes +=
-            indexInEstData
+          // ` | Act Price delete. (prev act price = ${estData.joblines.data[indexInEstData].act_price})`;
-          ].notes += ` | Scrubbed due to the line_ref issue. (prev act price = ${estData.joblines.data[indexInEstData].act_price})`;
           estData.joblines.data[indexInEstData].act_price = 0;
           estData.joblines.data[indexInEstData].db_price = 0;
         });

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

@@ -1,6 +1,9 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Dropdown, Form, Input, Modal, notification, Popconfirm, Popover, Select, Space } from "antd";
+import axios from "axios";
+import parsePhoneNumber from "libphonenumber-js";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,27 +11,24 @@ import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
+import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
 import { DELETE_JOB, UPDATE_JOB, VOID_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { setEmailOptions } from "../../redux/email/email.actions";
+import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { TemplateList } from "../../utils/TemplateConstants";
+import dayjs from "../../utils/day";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
-import axios from "axios";
-import { setEmailOptions } from "../../redux/email/email.actions";
-import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
-import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
-import { TemplateList } from "../../utils/TemplateConstants";
-import parsePhoneNumber from "libphonenumber-js";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
-import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
-import dayjs from "../../utils/day";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import JobsDetailHeaderActionsToggleProduction from "./jobs-detail-header-actions.toggle-production";
 
 const mapStateToProps = createStructuredSelector({
@@ -39,13 +39,57 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) => dispatch(setModalContext({ context: context, modal: "schedule" })),
-  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
+  setBillEnterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "billEnter"
+      })
+    ),
   setPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "payment" })),
-  setJobCostingContext: (context) => dispatch(setModalContext({ context: context, modal: "jobCosting" })),
+  setJobCostingContext: (context) =>
-  setTimeTicketContext: (context) => dispatch(setModalContext({ context: context, modal: "timeTicket" })),
+    dispatch(
-  setCardPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "cardPayment" })),
+      setModalContext({
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type })),
+        context: context,
-  setTimeTicketTaskContext: (context) => dispatch(setModalContext({ context: context, modal: "timeTicketTask" })),
+        modal: "jobCosting"
+      })
+    ),
+  setTimeTicketContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "timeTicket"
+      })
+    ),
+  setCardPaymentContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "cardPayment"
+      })
+    ),
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    ),
+  setTimeTicketTaskContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "timeTicketTask"
+      })
+    ),
+  setTaskUpsertContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "taskUpsert"
+      })
+    ),
   setEmailOptions: (e) => dispatch(setEmailOptions(e)),
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
   setMessage: (text) => dispatch(setMessage(text))
@@ -67,7 +111,8 @@ export function JobsDetailHeaderActions({
   setEmailOptions,
   openChatByPhone,
   setMessage,
-  setTimeTicketTaskContext
+  setTimeTicketTaskContext,
+  setTaskUpsertContext
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -596,6 +641,7 @@ export function JobsDetailHeaderActions({
   const menuItems = [
     {
       key: "schedule",
+      id: "job-actions-schedule",
       disabled: !jobInPreProduction || !job.converted || jobRO,
       label: t("jobs.actions.schedule"),
       onClick: () => {
@@ -612,6 +658,7 @@ export function JobsDetailHeaderActions({
     },
     {
       key: "cancelallappointments",
+      id: "job-actions-cancelallappointments",
       onClick: () => {
         if (job.status !== bodyshop.md_ro_statuses.default_scheduled) {
           return;
@@ -625,6 +672,7 @@ export function JobsDetailHeaderActions({
       imex: [
         {
           key: "intake",
+          id: "job-actions-intake",
           disabled: !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO,
           label:
             !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO ? (
@@ -635,6 +683,7 @@ export function JobsDetailHeaderActions({
         },
         {
           key: "deliver",
+          id: "job-actions-deliver",
           disabled: !jobInProduction || jobRO,
           label: !jobInProduction ? (
             t("jobs.actions.deliver")
@@ -644,6 +693,7 @@ export function JobsDetailHeaderActions({
         },
         {
           key: "checklist",
+          id: "job-actions-checklist",
           disabled: !job.converted,
           label: <Link to={`/manage/jobs/${job.id}/checklist`}>{t("jobs.actions.viewchecklist")}</Link>
         }
@@ -652,6 +702,7 @@ export function JobsDetailHeaderActions({
       promanager: [
         {
           key: "toggleproduction",
+          id: "job-actions-toggleproduction",
           disabled: !job.converted || jobRO,
           label: <JobsDetailHeaderActionsToggleProduction job={job} refetch={refetch} />
         }
@@ -665,6 +716,7 @@ export function JobsDetailHeaderActions({
       ? [
           {
             key: "entertimetickets",
+            id: "job-actions-entertimetickets",
             disabled: !job.converted || (!bodyshop.tt_allow_post_to_invoiced && job.date_invoiced),
             label: t("timetickets.actions.enter"),
             onClick: () => {
@@ -688,6 +740,7 @@ export function JobsDetailHeaderActions({
   if (bodyshop.md_tasks_presets.enable_tasks) {
     menuItems.push({
       key: "claimtimetickettasks",
+      id: "job-actions-claimtimetickettasks",
       disabled: !job.converted || (!bodyshop.tt_allow_post_to_invoiced && job.date_invoiced),
       onClick: () => {
         setTimeTicketTaskContext({
@@ -701,6 +754,7 @@ export function JobsDetailHeaderActions({
 
   menuItems.push({
     key: "enterpayments",
+    id: "job-actions-enterpayments",
     disabled: !job.converted,
     label: t("menus.header.enterpayment"),
     onClick: () => {
@@ -716,22 +770,24 @@ export function JobsDetailHeaderActions({
   if (ImEXPay.treatment === "on") {
     menuItems.push({
       key: "entercardpayments",
+      id: "job-actions-entercardpayments",
       disabled: !job.converted,
       label: t("menus.header.entercardpayment"),
       onClick: () => {
         logImEXEvent("job_header_enter_card_payment");
 
         setCardPaymentContext({
-          actions: {},
+          actions: { refetch },
           context: { jobid: job.id }
         });
       }
     });
   }
 
-  if (HasFeatureAccess({ featureName: "courtesycars" })) {
+  if (HasFeatureAccess({ featureName: "courtesycars", bodyshop })) {
     menuItems.push({
       key: "cccontract",
+      id: "job-actions-cccontract",
       disabled: jobRO || !job.converted,
       label: (
         <Link state={{ jobId: job.id }} to="/manage/courtesycars/contracts/new">
@@ -741,16 +797,29 @@ export function JobsDetailHeaderActions({
     });
   }
 
+  menuItems.push({
+    key: "createtask",
+    id: "job-actions-createtask",
+    label: t("menus.header.create_task"),
+    onClick: () =>
+      setTaskUpsertContext({
+        actions: {},
+        context: { jobid: job.id }
+      })
+  });
+
   menuItems.push(
     job.inproduction
       ? {
-          key: "addtoproduction",
+          key: "removefromproduction",
+          id: "job-actions-removefromproduction",
           disabled: !job.converted,
           label: t("jobs.actions.removefromproduction"),
           onClick: () => AddToProduction(client, job.id, refetch, true)
         }
       : {
           key: "addtoproduction",
+          id: "job-actions-addtoproduction",
           disabled: !job.converted,
           label: t("jobs.actions.addtoproduction"),
           onClick: () => AddToProduction(client, job.id, refetch)
@@ -760,12 +829,14 @@ export function JobsDetailHeaderActions({
   menuItems.push(
     {
       key: "togglesuspend",
+      id: "job-actions-togglesuspend",
       onClick: handleSuspend,
       label: job.suspended ? t("production.actions.unsuspend") : t("production.actions.suspend")
     },
     {
       key: "toggleAlert",
       onClick: handleAlertToggle,
+      id: "job-actions-togglealert",
       label:
         job.production_vars && job.production_vars.alert
           ? t("production.labels.alertoff")
@@ -777,6 +848,7 @@ export function JobsDetailHeaderActions({
       children: [
         {
           key: "duplicate",
+          id: "job-actions-duplicate",
           label: (
             <Popconfirm
               title={t("jobs.labels.duplicateconfirm")}
@@ -792,6 +864,7 @@ export function JobsDetailHeaderActions({
         },
         {
           key: "duplicatenolines",
+          id: "job-actions-duplicatenolines",
           label: (
             <Popconfirm
               title={t("jobs.labels.duplicateconfirm")}
@@ -815,6 +888,7 @@ export function JobsDetailHeaderActions({
       ? [
           {
             key: "postbills",
+            id: "job-actions-postbills",
             disabled: !job.converted,
             label: t("jobs.actions.postbills"),
             onClick: () => {
@@ -833,6 +907,7 @@ export function JobsDetailHeaderActions({
 
     {
       key: "addtopartsqueue",
+      id: "job-actions-addtopartsqueue",
       disabled: !job.converted || !jobInProduction || jobRO,
       label: t("jobs.actions.addtopartsqueue"),
       onClick: async () => {
@@ -858,6 +933,7 @@ export function JobsDetailHeaderActions({
     },
     {
       key: "closejob",
+      id: "job-actions-closejob",
       disabled: !jobInPostProduction,
       label: !jobInPostProduction ? (
         t("menus.jobsactions.closejob")
@@ -873,6 +949,7 @@ export function JobsDetailHeaderActions({
     },
     {
       key: "admin",
+      id: "job-actions-admin",
       label: (
         <Link
           to={{
@@ -894,6 +971,7 @@ export function JobsDetailHeaderActions({
   ) {
     menuItems.push({
       key: "exportcustdata",
+      id: "job-actions-exportcustdata",
       disabled: !job.converted,
       label: t("jobs.actions.exportcustdata"),
       onClick: handleExportCustData
@@ -904,18 +982,21 @@ export function JobsDetailHeaderActions({
     const children = [
       {
         key: "email",
+        id: "job-actions-email",
         disabled: !!!job.ownr_ea,
         label: t("general.labels.email"),
         onClick: handleCreateCsi
       },
       {
         key: "text",
+        id: "job-actions-text",
         disabled: !!!job.ownr_ph1,
         label: t("general.labels.text"),
         onClick: handleCreateCsi
       },
       {
         key: "generate",
+        id: "job-actions-generate",
         disabled: job.csiinvites && job.csiinvites.length > 0,
         label: t("jobs.actions.generatecsi"),
         onClick: handleCreateCsi
@@ -949,6 +1030,7 @@ export function JobsDetailHeaderActions({
     }
     menuItems.push({
       key: "sendcsi",
+      id: "job-actions-sendcsi",
       label: t("jobs.actions.sendcsi"),
       disabled: !job.converted,
       children
@@ -957,6 +1039,7 @@ export function JobsDetailHeaderActions({
 
   menuItems.push({
     key: "jobcosting",
+    id: "job-actions-jobcosting",
     disabled: !job.converted,
     label: t("jobs.labels.jobcosting"),
     onClick: () => {
@@ -974,6 +1057,7 @@ export function JobsDetailHeaderActions({
   if (job && !job.converted) {
     menuItems.push({
       key: "deletejob",
+      id: "job-actions-deletejob",
       label: (
         <Popconfirm
           title={t("jobs.labels.deleteconfirm")}
@@ -990,6 +1074,7 @@ export function JobsDetailHeaderActions({
 
   menuItems.push({
     key: "manualevent",
+    id: "job-actions-manualevent",
     onClick: (e) => {
       setVisibility(true);
     },
@@ -999,6 +1084,7 @@ export function JobsDetailHeaderActions({
   if (!jobRO && job.converted) {
     menuItems.push({
       key: "voidjob",
+      id: "job-actions-voidjob",
       label: (
         <RbacWrapper action="jobs:void" noauth>
           <Popconfirm

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -96,7 +96,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       }),
       onFilter: (value, record) => value.includes(record.status)
     },
-
     {
       title: t("jobs.fields.vehicle"),
       dataIndex: "vehicle",

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

@@ -18,8 +18,6 @@ import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import { setJoyRideSteps } from "../../redux/application/application.actions";
 import { OwnerNameDisplayFunction } from "./../owner-name-display/owner-name-display.component";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
@@ -176,7 +174,6 @@ export function JobsList({ bodyshop, setJoyRideSteps }) {
         [],
       onFilter: (value, record) => value.includes(record.status)
     },
-
     {
       title: t("jobs.fields.vehicle"),
       dataIndex: "vehicle",
@@ -316,34 +313,6 @@ export function JobsList({ bodyshop, setJoyRideSteps }) {
       title={t("titles.bc.jobs-active")}
       extra={
         <Space wrap>
-          {InstanceRenderManager({
-            promanager: (
-              <Button
-                onClick={() =>
-                  setJoyRideSteps([
-                    {
-                      target: "#active-jobs-list",
-                      content: "This is where you will see all work coming in and currently here."
-                    },
-                    {
-                      target: "#header-jobs",
-                      spotlightClicks: true,
-                      disableOverlayClose: true,
-                      content:
-                        "The jobs menu lets you access additional pages to see more information. You can import new jobs, search all jobs, or manage your current production."
-                    },
-                    {
-                      target: "#header-jobs-available",
-                      content: "You can find jobs to import here."
-                    }
-                  ])
-                }
-              >
-                Start Walk Through
-              </Button>
-            )
-          })}
-
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>

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

@@ -6,7 +6,8 @@ import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort, statusSort } from "../../utils/sorters";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import OwnerDetailUpdateJobsComponent from "../owner-detail-update-jobs/owner-detail-update-jobs.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -75,7 +76,18 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
       })),
       onFilter: (value, record) => value.includes(record.status)
     },
-
+    {
+      title: t("jobs.fields.actual_completion"),
+      dataIndex: "actual_completion",
+      key: "actual_completion",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.actual_completion}</DateTimeFormatter>
+      ),
+      sorter: (a, b) => dateSort(a.actual_completion, b.actual_completion),
+      sortOrder:
+        state.sortedInfo.columnKey === "actual_completion" &&
+        state.sortedInfo.order,
+    },
     {
       title: t("jobs.fields.clm_total"),
       dataIndex: "clm_total",

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -1,23 +1,24 @@
 import { DeleteFilled, EyeFilled, SyncOutlined } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client";
 import { Button, Card, Checkbox, Drawer, Grid, Input, Popconfirm, Space, Table } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 
 import queryString from "query-string";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { QUERY_BILL_BY_PK } from "../../graphql/bills.queries";
 import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
-import { alphaSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort } from "../../utils/sorters";
 import DataLabel from "../data-label/data-label.component";
 import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
 import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
@@ -26,6 +27,7 @@ import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/
 import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
 import PrintWrapper from "../print-wrapper/print-wrapper.component";
 import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
+import { FaTasks } from "react-icons/fa";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -33,8 +35,21 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
+  setBillEnterContext: (context) =>
-  setPartsReceiveContext: (context) => dispatch(setModalContext({ context: context, modal: "partsReceive" }))
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "billEnter"
+      })
+    ),
+  setPartsReceiveContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "partsReceive"
+      })
+    ),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
 export function PartsOrderListTableComponent({
@@ -44,7 +59,8 @@ export function PartsOrderListTableComponent({
   job,
   billsQuery,
   handleOnRowClick,
-  setPartsReceiveContext
+  setPartsReceiveContext,
+  setTaskUpsertContext
 }) {
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
@@ -66,19 +82,46 @@ export function PartsOrderListTableComponent({
   const [state, setState] = useState({
     sortedInfo: {}
   });
+
+  const [returnfrombill, setReturnFromBill] = useState();
+  const [billData, setBillData] = useState();
   const search = queryString.parse(useLocation().search);
   const selectedpartsorder = search.partsorderid;
   const [searchText, setSearchText] = useState("");
 
+  const [billQuery] = useLazyQuery(QUERY_BILL_BY_PK);
   const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);
 
   const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
   const { refetch } = billsQuery;
 
+  useEffect(() => {
+    if (returnfrombill === null) {
+      setBillData(null);
+    } else {
+      const fetchData = async () => {
+        const result = await billQuery({
+          variables: { billid: returnfrombill }
+        });
+        setBillData(result.data);
+      };
+      fetchData();
+    }
+  }, [returnfrombill, billQuery]);
+
   const recordActions = (record, showView = false) => (
-    <Space wrap>
+    <Space direction="horizontal" wrap>
       {showView && (
-        <Button onClick={() => handleOnRowClick(record)}>
+        <Button
+          onClick={() => {
+            if (record.returnfrombill) {
+              setReturnFromBill(record.returnfrombill);
+            } else {
+              setReturnFromBill(null);
+            }
+            handleOnRowClick(record);
+          }}
+        >
           <EyeFilled />
         </Button>
       )}
@@ -108,7 +151,19 @@ export function PartsOrderListTableComponent({
       >
         {t("parts_orders.actions.receive")}
       </Button>
-
+      <Button
+        title={t("tasks.buttons.create")}
+        onClick={() => {
+          setTaskUpsertContext({
+            context: {
+              jobid: job.id,
+              partsorderid: record.id
+            }
+          });
+        }}
+      >
+        <FaTasks />
+      </Button>
       <Popconfirm
         title={t("parts_orders.labels.confirmdelete")}
         disabled={jobRO}
@@ -148,7 +203,7 @@ export function PartsOrderListTableComponent({
                   is_credit_memo: record.return,
                   billlines: record.parts_order_lines.map((pol) => {
                     return {
-                      joblineid: pol.job_line_id,
+                      joblineid: pol.job_line_id || "noline",
                       line_desc: pol.line_desc,
                       quantity: pol.quantity,
 
@@ -368,7 +423,14 @@ export function PartsOrderListTableComponent({
 
     return (
       <div>
-        <PageHeader title={record && `${record.vendor.name} - ${record.order_number}`} extra={recordActions(record)} />
+        <PageHeader
+          title={
+            billData
+              ? `${record.vendor.name} - ${record.order_number} - ${t("bills.labels.returnfrombill")}: ${billData.bills_by_pk.invoice_number}`
+              : `${record.vendor.name} - ${record.order_number}`
+          }
+          extra={recordActions(record)}
+        />
         <Table
           scroll={{
             x: true //y: "50rem"

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -182,7 +182,7 @@ export function PartsOrderModalComponent({ bodyshop, vendorList, sendTypeState,
                           }
                         ]}
                       >
-                        <InputNumber />
+                        <InputNumber min={1} />
                       </Form.Item>
                       <Form.Item
                         label={t("parts_orders.fields.act_price")}

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -158,7 +158,7 @@ export function PartsOrderModalContainer({
             vendorid: bodyshop.inhousevendorid,
             invoice_number: "ih",
             isinhouse: true,
-            date: new dayjs(),
+            date:  dayjs(),
             total: 0,
             billlines: values.parts_order_lines.data.map((p) => {
               return {

client/src/components/payment-expanded-row/payment-expanded-row.component.jsx

@@ -119,8 +119,14 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
 
   return (
     <div>
-      <Descriptions title={t("job_payments.titles.descriptions")} contentStyle={{ fontWeight: "600" }} column={4}>
+      <Descriptions
-        <Descriptions.Item label={t("job_payments.titles.payer")}>{record.payer}</Descriptions.Item>
+        title={t("job_payments.titles.descriptions")}
+        contentStyle={{ fontWeight: "600" }}
+        column={4}
+      >
+        <Descriptions.Item label={t("job_payments.titles.hint")}>
+          {payment_response?.response?.methodhint}
+        </Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.payername")}>
           {payment_response?.response?.nameOnCard ?? ""}
         </Descriptions.Item>
@@ -132,7 +138,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
         </Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.transactionid")}>{record.transactionid}</Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.paymentid")}>
-          {payment_response?.response?.paymentreferenceid ?? ""}
+          {payment_response?.ext_paymentid ?? ""}
         </Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.paymenttype")}>{record.type}</Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.paymentnum")}>{record.paymentnum}</Descriptions.Item>

client/src/components/payment-mark-export-button/payment-mark-export-button-component.jsx

@@ -7,8 +7,8 @@ import { createStructuredSelector } from "reselect";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
 import { selectPayment } from "../../redux/modals/modals.selectors";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -58,8 +58,10 @@ const PaymentMarkForExportButton = ({ bodyshop, payment, refetch, setPaymentCont
           refetch
         },
         context: {
+          ...paymentModal.context,
           ...paymentModal.context,
           ...payment,
+          smartRefetch: true,
           exportedat: today
         }
       });

client/src/components/payment-modal/payment-modal.container.jsx

@@ -1,32 +1,30 @@
-import { useMutation } from "@apollo/client";
+import {useMutation} from "@apollo/client";
-import { Button, Form, Modal, notification, Space } from "antd";
+import {Button, Form, Modal, notification, Space} from "antd";
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
-import { createStructuredSelector } from "reselect";
+import {createStructuredSelector} from "reselect";
-import { INSERT_NEW_PAYMENT, UPDATE_PAYMENT } from "../../graphql/payments.queries";
+import {INSERT_NEW_PAYMENT, UPDATE_PAYMENT} from "../../graphql/payments.queries";
-import { setEmailOptions } from "../../redux/email/email.actions";
+import {toggleModalVisible} from "../../redux/modals/modals.actions";
-import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import {selectPayment} from "../../redux/modals/modals.selectors";
-import { selectPayment } from "../../redux/modals/modals.selectors";
+import {selectBodyshop} from "../../redux/user/user.selectors";
-import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import {GenerateDocument} from "../../utils/RenderTemplate";
-import { GenerateDocument } from "../../utils/RenderTemplate";
+import {TemplateList} from "../../utils/TemplateConstants";
-import { TemplateList } from "../../utils/TemplateConstants";
 import PaymentForm from "../payment-form/payment-form.component";
-import PaymentMarkForExportButton from "../payment-mark-export-button/payment-mark-export-button-component";
+import PaymentMarkForExportButton
+  from "../payment-mark-export-button/payment-mark-export-button-component";
 import PaymentReexportButton from "../payment-reexport-button/payment-reexport-button.component";
 
 const mapStateToProps = createStructuredSelector({
   paymentModal: selectPayment,
   bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
   toggleModalVisible: () => dispatch(toggleModalVisible("payment"))
 });
 
-function PaymentModalContainer({ paymentModal, toggleModalVisible, bodyshop, currentUser, setEmailOptions }) {
+function PaymentModalContainer({paymentModal, toggleModalVisible, bodyshop }) {
   const [form] = Form.useForm();
   const [enterAgain, setEnterAgain] = useState(false);
   const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
@@ -34,7 +32,6 @@ function PaymentModalContainer({ paymentModal, toggleModalVisible, bodyshop, cur
 
   const { t } = useTranslation();
   const { context, actions, open } = paymentModal;
-
   const [loading, setLoading] = useState(false);
 
   const handleFinish = async (values) => {
@@ -84,9 +81,9 @@ function PaymentModalContainer({ paymentModal, toggleModalVisible, bodyshop, cur
         });
 
         if (!!!updatedPayment.errors) {
-          notification["success"]({ message: t("payments.successes.payment") });
+          notification["success"]({ message: t("payments.successes.paymentupdate") });
         } else {
-          notification["error"]({ message: t("payments.errors.payment") });
+          notification["error"]({ message: t("payments.errors.paymentupdate") });
         }
       }
 

client/src/components/payment-reexport-button/payment-reexport-button.component.jsx

@@ -3,10 +3,10 @@ import { Button, notification } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectPayment } from "../../redux/modals/modals.selectors";
-import { createStructuredSelector } from "reselect";
 
 const mapStateToProps = createStructuredSelector({
   paymentModal: selectPayment
@@ -40,6 +40,7 @@ const PaymentReexportButton = ({ paymentModal, payment, refetch, setPaymentConte
           refetch
         },
         context: {
+          ...paymentModal.context,
           ...paymentModal.context,
           ...payment,
           exportedat: null

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -14,11 +14,11 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { pageLimit } from "../../utils/config";
 import { alphaSort } from "../../utils/sorters";
 import CaBcEtfTableModalContainer from "../ca-bc-etf-table-modal/ca-bc-etf-table-modal.container";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
-import { pageLimit } from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser

client/src/components/print-center-jobs-labels/print-center-jobs-labels.component.jsx

@@ -1,4 +1,13 @@
-import { Button, Card, Form, InputNumber, notification, Popover, Radio } from "antd";
+import {
+  Button,
+  Card,
+  Form,
+  InputNumber,
+  notification,
+  Popover,
+  Radio,
+  Space,
+} from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -95,10 +104,16 @@ export function PrintCenterJobsLabels({ bodyshop, jobId }) {
         >
           <InputNumber min={1} precision={0} max={99} />
         </Form.Item>
-        <Button type="primary" loading={loading} onClick={handleOk}>
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
-          {t("general.actions.print")}
+          <Space>
-        </Button>
+            <Button type="primary" loading={loading} onClick={handleOk}>
-        <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
+              {t("general.actions.print")}
+            </Button>
+            <Button onClick={handleCancel}>
+              {t("general.actions.cancel")}
+            </Button>
+          </Space>
+        </div>
       </Form>
     </Card>
   );

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -2,23 +2,24 @@ import { useLazyQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Col, DatePicker, Form, Input, Radio, Row, Typography } from "antd";
 import _ from "lodash";
-import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
+import { QUERY_ACTIVE_EMPLOYEES, QUERY_ACTIVE_EMPLOYEES_WITH_EMAIL } from "../../graphql/employees.queries";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import { selectReportCenter } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import DatePickerRanges from "../../utils/DatePickerRanges";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import dayjs from "../../utils/day";
+import EmployeeSearchSelectEmail from "../employee-search-select/employee-search-select-email.component";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
-import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
-import "./report-center-modal.styles.scss";
-import ReportCenterModalFiltersSortersComponent from "./report-center-modal-filters-sorters-component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
+import ReportCenterModalFiltersSortersComponent from "./report-center-modal-filters-sorters-component";
+import "./report-center-modal.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   reportCenterModal: selectReportCenter,
@@ -66,6 +67,13 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
     skip: !(open && Templates[form.getFieldValue("key")] && Templates[form.getFieldValue("key")].idtype)
   });
 
+  const [callEmployeeWithEmailQuery, { data: employeeWithEmailData, called: employeeWithEmailCalled }] = useLazyQuery(
+    QUERY_ACTIVE_EMPLOYEES_WITH_EMAIL,
+    {
+      skip: !(open && Templates[form.getFieldValue("key")] && Templates[form.getFieldValue("key")].idtype)
+    }
+  );
+
   const handleFinish = async (values) => {
     setLoading(true);
     const start = values.dates ? values.dates[0] : null;
@@ -197,6 +205,7 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
             }
             if (!vendorCalled && idtype === "vendor") callVendorQuery();
             if (!employeeCalled && idtype === "employee") callEmployeeQuery();
+            if (!employeeWithEmailCalled && idtype === "employeeWithEmail") callEmployeeWithEmailQuery();
             if (idtype === "vendor")
               return (
                 <Form.Item
@@ -227,6 +236,22 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
                   <EmployeeSearchSelect options={employeeData ? employeeData.employees : []} />
                 </Form.Item>
               );
+            //This was introduced with tasks before assigned_to was shifted to UUID. Keeping in place for reference in the future if needed.
+            if (idtype === "employeeWithEmail")
+              return (
+                <Form.Item
+                  name="id"
+                  label={t("reportcenter.labels.employee")}
+                  rules={[
+                    {
+                      required: true
+                      //message: t("general.validation.required"),
+                    }
+                  ]}
+                >
+                  <EmployeeSearchSelectEmail options={employeeWithEmailData ? employeeWithEmailData.employees : []} />
+                </Form.Item>
+              );
             else return null;
           }}
         </Form.Item>

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

@@ -59,25 +59,33 @@ export function ScheduleCalendarHeaderComponent({
           {loadData && loadData.allJobsOut ? (
             loadData.allJobsOut.map((j) => (
               <tr key={j.id}>
-                <td>
+                <td style={{ padding: "2.5px" }}>
-                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
+                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> (
+                  {j.status})
                 </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                   <OwnerNameDisplay ownerObject={j} />
                 </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
-                  {`(${(j.labhrs.aggregate.sum.mod_lb_hrs + j.larhrs.aggregate.sum.mod_lb_hrs).toFixed(
+                  {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
-                    1
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
-                  )} ${t("general.labels.hours")})`}
+                  }/${(
+                    j.labhrs.aggregate?.sum?.mod_lb_hrs +
+                    j.larhrs.aggregate?.sum?.mod_lb_hrs
+                  ).toFixed(1)} ${t("general.labels.hours")})`}
                 </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
-                  <DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
+                  <DateTimeFormatter>
+                    {j.scheduled_completion}
+                  </DateTimeFormatter>
                 </td>
               </tr>
             ))
           ) : (
             <tr>
-              <td>{t("appointments.labels.nocompletingjobs")}</td>
+              <td style={{ padding: "2.5px" }}>
+                {t("appointments.labels.nocompletingjobs")}
+              </td>
             </tr>
           )}
         </tbody>
@@ -92,26 +100,30 @@ export function ScheduleCalendarHeaderComponent({
           {loadData && loadData.allJobsIn ? (
             loadData.allJobsIn.map((j) => (
               <tr key={j.id}>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                   <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
-                  {j.status}
                 </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                   <OwnerNameDisplay ownerObject={j} />
                 </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
-                  {`(${(j.labhrs.aggregate.sum.mod_lb_hrs + j.larhrs.aggregate.sum.mod_lb_hrs).toFixed(
+                  {`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
-                    1
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
-                  )} ${t("general.labels.hours")})`}
+                  }/${(
+                    j.labhrs?.aggregate?.sum?.mod_lb_hrs +
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs
+                  ).toFixed(1)} ${t("general.labels.hours")})`}
                 </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                   <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
                 </td>
               </tr>
             ))
           ) : (
             <tr>
-              <td>{t("appointments.labels.noarrivingjobs")}</td>
+              <td style={{ padding: "2.5px" }}>
+                {t("appointments.labels.noarrivingjobs")}
+              </td>
             </tr>
           )}
         </tbody>
@@ -121,27 +133,33 @@ export function ScheduleCalendarHeaderComponent({
 
   const LoadComponent = loadData ? (
     <div>
-      <Space align="center">
+        <Space align="center">
-        <Popover
+          <Popover
-          placement={"bottom"}
+            placement={"bottom"}
-          content={jobsInPopup}
+            content={jobsInPopup}
-          trigger="hover"
+            trigger="hover"
-          title={t("appointments.labels.arrivingjobs")}
+            title={t("appointments.labels.arrivingjobs")}
-        >
+          >
-          <Icon component={MdFileDownload} style={{ color: "green" }} />
+            <Icon component={MdFileDownload} style={{ color: "green" }} />
-          {(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(2)}
+            {(loadData.allHoursInBody || 0) &&
-        </Popover>
+              loadData.allHoursInBody.toFixed(1)}
-        <Popover
+            /
-          placement={"bottom"}
+            {(loadData.allHoursInRefinish || 0) &&
-          content={jobsOutPopup}
+              loadData.allHoursInRefinish.toFixed(1)}
-          trigger="hover"
+            /{(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}
-          title={t("appointments.labels.completingjobs")}
+          </Popover>
-        >
+          <Popover
-          <Icon component={MdFileUpload} style={{ color: "red" }} />
+            placement={"bottom"}
-          {(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(2)}
+            content={jobsOutPopup}
-        </Popover>
+            trigger="hover"
-        <ScheduleCalendarHeaderGraph loadData={loadData} />
+            title={t("appointments.labels.completingjobs")}
-      </Space>
+          >
+            <Icon component={MdFileUpload} style={{ color: "red" }} />
+            {(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}
+          </Popover>
+          <ScheduleCalendarHeaderGraph loadData={loadData} />
+        </Space>
+   
       <div>
         <ul style={{ listStyleType: "none", columns: "2 auto", padding: 0 }}>
           {Object.keys(ATSToday).map((key, idx) => (

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

@@ -1,25 +1,25 @@
-import {  useSplitTreatments  } from '@splitsoftware/splitio-react';
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import {  Button, Card, Tabs  } from 'antd';
+import { Button, Card, Tabs } from "antd";
-import React from 'react';
+import React from "react";
-import {  useTranslation  } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import {  connect  } from 'react-redux';
+import { connect } from "react-redux";
-import {  createStructuredSelector  } from 'reselect';
+import { createStructuredSelector } from "reselect";
-import {  selectBodyshop  } from '../../redux/user/user.selectors';
+import { selectBodyshop } from "../../redux/user/user.selectors";
-import ShopInfoGeneral from './shop-info.general.component';
+import ShopInfoGeneral from "./shop-info.general.component";
-import ShopInfoIntakeChecklistComponent from './shop-info.intake.component';
+import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
-import ShopInfoLaborRates from './shop-info.laborrates.component';
+import ShopInfoLaborRates from "./shop-info.laborrates.component";
-import ShopInfoOrderStatusComponent from './shop-info.orderstatus.component';
+import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
-import ShopInfoPartsScan from './shop-info.parts-scan';
+import ShopInfoPartsScan from "./shop-info.parts-scan";
-import ShopInfoRbacComponent from './shop-info.rbac.component';
+import ShopInfoRbacComponent from "./shop-info.rbac.component";
-import ShopInfoResponsibilityCenterComponent from './shop-info.responsibilitycenters.component';
+import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
-import ShopInfoROStatusComponent from './shop-info.rostatus.component';
+import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
-import ShopInfoSchedulingComponent from './shop-info.scheduling.component';
+import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
-import ShopInfoSpeedPrint from './shop-info.speedprint.component';
+import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
-import {  useLocation, useNavigate  } from 'react-router-dom';
+import { useLocation, useNavigate } from "react-router-dom";
-import ShopInfoTaskPresets from './shop-info.task-presets.component';
+import ShopInfoTaskPresets from "./shop-info.task-presets.component";
-import queryString from 'query-string';
+import queryString from "query-string";
-import InstanceRenderManager from '../../utils/instanceRenderMgr';
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import ShopInfoRoGuard from './shop-info.roguard.component';
+import ShopInfoRoGuard from "./shop-info.roguard.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -47,44 +47,52 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
     {
       key: "general",
       label: t("bodyshop.labels.shopinfo"),
-      children: <ShopInfoGeneral form={form} />
+      children: <ShopInfoGeneral form={form} />,
+      id: "tab-shop-general"
     },
     {
       key: "speedprint",
       label: t("bodyshop.labels.speedprint"),
-      children: <ShopInfoSpeedPrint form={form} />
+      children: <ShopInfoSpeedPrint form={form} />,
+      id: "tab-shop-speedprint"
     },
     {
       key: "rbac",
       label: t("bodyshop.labels.rbac"),
-      children: <ShopInfoRbacComponent form={form} />
+      children: <ShopInfoRbacComponent form={form} />,
+      id: "tab-shop-rbac"
     },
     {
       key: "roStatus",
       label: t("bodyshop.labels.jobstatuses"),
-      children: <ShopInfoROStatusComponent form={form} />
+      children: <ShopInfoROStatusComponent form={form} />,
+      id: "tab-shop-rostatus"
     },
     {
       key: "scheduling",
       label: t("bodyshop.labels.scheduling"),
-      children: <ShopInfoSchedulingComponent form={form} />
+      children: <ShopInfoSchedulingComponent form={form} />,
+      id: "tab-shop-scheduling"
     },
     {
       key: "orderStatus",
       label: t("bodyshop.labels.orderstatuses"),
-      children: <ShopInfoOrderStatusComponent form={form} />
+      children: <ShopInfoOrderStatusComponent form={form} />,
+      id: "tab-shop-orderstatus"
     },
     {
       key: "responsibilityCenters",
       label: t("bodyshop.labels.responsibilitycenters.title"),
-      children: <ShopInfoResponsibilityCenterComponent form={form} />
+      children: <ShopInfoResponsibilityCenterComponent form={form} />,
+      id: "tab-shop-responsibilitycenters"
     },
     ...InstanceRenderManager({
       imex: [
         {
           key: "checklists",
           label: t("bodyshop.labels.checklists"),
-          children: <ShopInfoIntakeChecklistComponent form={form} />
+          children: <ShopInfoIntakeChecklistComponent form={form} />,
+          id: "tab-shop-checklists"
         }
       ],
       rome: "USE_IMEX",
@@ -93,14 +101,16 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
     {
       key: "laborrates",
       label: t("bodyshop.labels.laborrates"),
-      children: <ShopInfoLaborRates form={form} />
+      children: <ShopInfoLaborRates form={form} />,
+      id: "tab-shop-laborrates"
     },
     ...(CriticalPartsScanning.treatment === "on"
       ? [
           {
             key: "partsscan",
             label: t("bodyshop.labels.partsscan"),
-            children: <ShopInfoPartsScan form={form} />
+            children: <ShopInfoPartsScan form={form} />,
+            id: "tab-shop-partsscan"
           }
         ]
       : []),
@@ -109,21 +119,23 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
           {
             key: "task-presets",
             label: t("bodyshop.labels.task-presets"),
-            children: <ShopInfoTaskPresets form={form} />
+            children: <ShopInfoTaskPresets form={form} />,
+            id: "tab-shop-task-presets"
           }
         ]
       : []),
-      ...InstanceRenderManager({
+    ...InstanceRenderManager({
-        imex: [
+      imex: [
-          {
+        {
-            key: 'roguard',
+          key: "roguard",
-            label: t('bodyshop.labels.roguard.title'),
+          label: t("bodyshop.labels.roguard.title"),
-            children: <ShopInfoRoGuard form={form} />,
+          children: <ShopInfoRoGuard form={form} />,
-          },
+          id: "tab-shop-roguard"
-        ],
+        }
-        rome: 'USE_IMEX',
+      ],
-        promanager: [],
+      rome: "USE_IMEX",
-      }),
+      promanager: []
+    })
   ];
   return (
     <Card

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

@@ -13,6 +13,7 @@ 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";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import FeatureWrapper, { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 // TODO: Client Update, this might break
 const timeZonesList = Intl.supportedValuesOf("timeZone");
 const mapStateToProps = createStructuredSelector({
@@ -144,285 +145,289 @@ export function ShopInfoGeneral({ form, bodyshop }) {
           <InputNumber min={0} />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
+      <FeatureWrapper featureName="export" noauth={() => null}>
-        <Form.Item label={t("bodyshop.labels.qbo")} valuePropName="checked" name={["accountingconfig", "qbo"]}>
+        <LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
-          <Switch />
+          <Form.Item label={t("bodyshop.labels.qbo")} valuePropName="checked" name={["accountingconfig", "qbo"]}>
-        </Form.Item>
+            <Switch />
-        {InstanceRenderManager({
+          </Form.Item>
-          imex: (
+          {InstanceRenderManager({
-            <Form.Item shouldUpdate noStyle>
+            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"
+                  rules={[
-                  name={["accountingconfig", "qbo_usa"]}
+                    {
+                      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>
-        })}
+          <Form.Item
-        <Form.Item label={t("bodyshop.labels.qbo_departmentid")} name={["accountingconfig", "qbo_departmentid"]}>
+            label={t("bodyshop.labels.printlater")}
-          <Input />
+            valuePropName="checked"
-        </Form.Item>
+            name={["accountingconfig", "printlater"]}
-        <Form.Item
+          >
-          label={t("bodyshop.labels.accountingtiers")}
+            <Switch />
-          rules={[
+          </Form.Item>
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.labels.emaillater")}
-              //message: t("general.validation.required"),
+            valuePropName="checked"
-            }
+            name={["accountingconfig", "emaillater"]}
-          ]}
+          >
-          name={["accountingconfig", "tiers"]}
+            <Switch />
-        >
+          </Form.Item>
-          <Radio.Group>
+          <Form.Item
-            <Radio value={2}>2</Radio>
+            label={t("bodyshop.fields.inhousevendorid")}
-            <Radio value={3}>3</Radio>
+            name={"inhousevendorid"}
-          </Radio.Group>
+            rules={[
-        </Form.Item>
+              {
-        <Form.Item shouldUpdate>
+                required: true
-          {() => {
+                //message: t("general.validation.required"),
-            return (
+              }
+            ]}
+          >
+            <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>
+          {InstanceRenderManager({
+            imex: (
               <Form.Item
-                label={t("bodyshop.labels.2tiersetup")}
+                label={t("bodyshop.fields.invoice_federal_tax_rate")}
-                shouldUpdate
+                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}>
+                <InputNumber />
-                  <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
-                  <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
-                </Radio.Group>
               </Form.Item>
-            );
+            )
-          }}
+          })}
-        </Form.Item>
+          <Form.Item
-        <Form.Item
+            label={t("bodyshop.fields.invoice_state_tax_rate")}
-          label={t("bodyshop.labels.printlater")}
+            name={["bill_tax_rates", "state_tax_rate"]}
-          valuePropName="checked"
+            rules={[
-          name={["accountingconfig", "printlater"]}
+              {
-        >
+                required: true
-          <Switch />
+                //message: t("general.validation.required"),
-        </Form.Item>
+              }
-        <Form.Item
+            ]}
-          label={t("bodyshop.labels.emaillater")}
+          >
-          valuePropName="checked"
+            <InputNumber />
-          name={["accountingconfig", "emaillater"]}
+          </Form.Item>
-        >
+          <Form.Item
-          <Switch />
+            label={t("bodyshop.fields.invoice_local_tax_rate")}
-        </Form.Item>
+            name={["bill_tax_rates", "local_tax_rate"]}
-        <Form.Item
+            rules={[
-          label={t("bodyshop.fields.inhousevendorid")}
+              {
-          name={"inhousevendorid"}
+                required: true
-          rules={[
+                //message: t("general.validation.required"),
-            {
+              }
-              required: true
+            ]}
-              //message: t("general.validation.required"),
+          >
-            }
+            <InputNumber />
-          ]}
+          </Form.Item>
-        >
+          <Form.Item
-          <Input />
+            name={["md_payment_types"]}
-        </Form.Item>
+            label={t("bodyshop.fields.md_payment_types")}
-        <Form.Item
+            rules={[
-          label={t("bodyshop.fields.default_adjustment_rate")}
+              {
-          name={"default_adjustment_rate"}
+                required: true,
-          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>
-        {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 />
-            </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" />
-          <Select mode="tags" />
+          </Form.Item>
-        </Form.Item>
+          <Form.Item
-        {ClosingPeriod.treatment === "on" && (
+            name={["md_categories"]}
-          <>
+            label={t("bodyshop.fields.md_categories")}
-            <Form.Item
+            rules={[
-              name={["accountingconfig", "ClosingPeriod"]}
+              {
-              label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
+                //message: t("general.validation.required"),
-            >
+                type: "array"
-              <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
+              }
-            </Form.Item>
+            ]}
-          </>
+          >
-        )}
+            <Select mode="tags" />
-      </LayoutFormRow>
+          </Form.Item>
-      <LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")} id="scoreboardsetup">
+          <Form.Item name={["enforce_class"]} label={t("bodyshop.fields.enforce_class")} valuePropName="checked">
-        <Form.Item
+            <Switch />
-          label={t("bodyshop.fields.dailypainttarget")}
+          </Form.Item>
-          name={["scoreboard_target", "dailyPaintTarget"]}
+          <Form.Item
-          rules={[
+            name={["accountingconfig", "ReceivableCustomField1"]}
-            {
+            label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
-              required: true
+          >
-              //message: t("general.validation.required"),
+            {ReceivableCustomFieldSelect}
-            }
+          </Form.Item>
-          ]}
+          <Form.Item
-        >
+            name={["accountingconfig", "ReceivableCustomField2"]}
-          <InputNumber min={0} precision={0} />
+            label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
-        </Form.Item>
+          >
+            {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>
+            </>
+          )}
+        </LayoutFormRow>
+      </FeatureWrapper>
+      <FeatureWrapper featureName="scoreboard" noauth={() => null}>
+        <LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")} id="scoreboardsetup">
+          <Form.Item
+            label={t("bodyshop.fields.dailypainttarget")}
+            name={["scoreboard_target", "dailyPaintTarget"]}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+          >
+            <InputNumber min={0} precision={0} />
+          </Form.Item>
 
-        <Form.Item
+          <Form.Item
-          label={t("bodyshop.fields.dailybodytarget")}
+            label={t("bodyshop.fields.dailybodytarget")}
-          name={["scoreboard_target", "dailyBodyTarget"]}
+            name={["scoreboard_target", "dailyBodyTarget"]}
-          rules={[
+            rules={[
-            {
+              {
-              required: true
+                required: true
-              //message: t("general.validation.required"),
+                //message: t("general.validation.required"),
-            }
+              }
-          ]}
+            ]}
-        >
+          >
-          <InputNumber min={0} precision={0} />
+            <InputNumber min={0} precision={0} />
-        </Form.Item>
+          </Form.Item>
 
-        <Form.Item
+          <Form.Item
-          label={t("bodyshop.fields.lastnumberworkingdays")}
+            label={t("bodyshop.fields.lastnumberworkingdays")}
-          name={["scoreboard_target", "lastNumberWorkingDays"]}
+            name={["scoreboard_target", "lastNumberWorkingDays"]}
-          rules={[
+            rules={[
-            {
+              {
-              required: true
+                required: true
-              //message: t("general.validation.required"),
+                //message: t("general.validation.required"),
-            }
+              }
-          ]}
+            ]}
-        >
+          >
-          <InputNumber min={0} max={12} precision={0} />
+            <InputNumber min={0} max={12} precision={0} />
-        </Form.Item>
+          </Form.Item>
-        <Form.Item
+          <Form.Item
-          label={t("bodyshop.fields.ignoreblockeddays")}
+            label={t("bodyshop.fields.ignoreblockeddays")}
-          name={["scoreboard_target", "ignoreblockeddays"]}
+            name={["scoreboard_target", "ignoreblockeddays"]}
-          valuePropName="checked"
+            valuePropName="checked"
-        >
+          >
-          <Switch />
+            <Switch />
-        </Form.Item>
+          </Form.Item>
-        <Form.Item
+          <Form.Item
-          label={t("bodyshop.fields.prodtargethrs")}
+            label={t("bodyshop.fields.prodtargethrs")}
-          name={["prodtargethrs"]}
+            name={["prodtargethrs"]}
-          rules={[
+            rules={[
-            {
+              {
-              required: true
+                required: true
-              //message: t("general.validation.required"),
+                //message: t("general.validation.required"),
-            }
+              }
-          ]}
+            ]}
-        >
+          >
-          <InputNumber min={1} precision={1} />
+            <InputNumber min={1} precision={1} />
-        </Form.Item>
+          </Form.Item>
-      </LayoutFormRow>
+        </LayoutFormRow>
+      </FeatureWrapper>
       <LayoutFormRow header={t("bodyshop.labels.systemsettings")} id="systemsettings">
         <Form.Item
           name={["md_referral_sources"]}
@@ -567,27 +572,32 @@ export function ShopInfoGeneral({ form, bodyshop }) {
         >
           <Select mode="tags" />
         </Form.Item>
-        <Form.Item
+
-          name={["tt_allow_post_to_invoiced"]}
+        {HasFeatureAccess({ featureName: "timetickets", bodyshop }) && (
-          label={t("bodyshop.fields.tt_allow_post_to_invoiced")}
+          <>
-          valuePropName="checked"
+            <Form.Item
-        >
+              name={["tt_allow_post_to_invoiced"]}
-          <Switch />
+              label={t("bodyshop.fields.tt_allow_post_to_invoiced")}
-        </Form.Item>
+              valuePropName="checked"
-        <Form.Item
+            >
-          name={["tt_enforce_hours_for_tech_console"]}
+              <Switch />
-          label={t("bodyshop.fields.tt_enforce_hours_for_tech_console")}
+            </Form.Item>
-          valuePropName="checked"
+            <Form.Item
-        >
+              name={["tt_enforce_hours_for_tech_console"]}
-          <Switch />
+              label={t("bodyshop.fields.tt_enforce_hours_for_tech_console")}
-        </Form.Item>
+              valuePropName="checked"
-        <Form.Item
+            >
-          name={["bill_allow_post_to_closed"]}
+              <Switch />
-          label={t("bodyshop.fields.bill_allow_post_to_closed")}
+            </Form.Item>
-          valuePropName="checked"
+            <Form.Item
-        >
+              name={["bill_allow_post_to_closed"]}
-          <Switch />
+              label={t("bodyshop.fields.bill_allow_post_to_closed")}
-        </Form.Item>
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+          </>
+        )}
         <Form.Item
           name={["md_ded_notes"]}
           label={t("bodyshop.fields.md_ded_notes")}
@@ -1042,111 +1052,118 @@ export function ShopInfoGeneral({ form, bodyshop }) {
           }}
         </Form.List>
       </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.fields.md_ccc_rates")} id="md_ccc_rates">
+      <FeatureWrapper featureName="courtesycars" noauth={() => null}>
-        <Form.List name={["md_ccc_rates"]}>
+        <LayoutFormRow grow header={t("bodyshop.fields.md_ccc_rates")} id="md_ccc_rates">
-          {(fields, { add, remove, move }) => {
+          <Form.List name={["md_ccc_rates"]}>
-            return (
+            {(fields, { add, remove, move }) => {
-              <div>
+              return (
-                {fields.map((field, index) => (
+                <div>
-                  <Form.Item key={field.key}>
+                  {fields.map((field, index) => (
-                    <LayoutFormRow noDivider>
+                    <Form.Item key={field.key}>
-                      <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
+                      <LayoutFormRow noDivider>
-                        <Input />
+                        <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
-                      </Form.Item>
+                          <Input />
-                      <Form.Item label={t("contracts.fields.actax")} key={`${index}actax`} name={[field.name, "actax"]}>
+                        </Form.Item>
-                        <InputNumber precision={2} />
+                        <Form.Item
-                      </Form.Item>
+                          label={t("contracts.fields.actax")}
-                      <Form.Item
+                          key={`${index}actax`}
-                        label={t("contracts.fields.dailyfreekm")}
+                          name={[field.name, "actax"]}
-                        key={`${index}dailyfreekm`}
+                        >
-                        name={[field.name, "dailyfreekm"]}
+                          <InputNumber precision={2} />
-                      >
+                        </Form.Item>
-                        <InputNumber precision={2} />
+                        <Form.Item
-                      </Form.Item>
+                          label={t("contracts.fields.dailyfreekm")}
-                      <Form.Item
+                          key={`${index}dailyfreekm`}
-                        label={t("contracts.fields.refuelcharge")}
+                          name={[field.name, "dailyfreekm"]}
-                        key={`${index}refuelcharge`}
+                        >
-                        name={[field.name, "refuelcharge"]}
+                          <InputNumber precision={2} />
-                      >
+                        </Form.Item>
-                        <InputNumber precision={2} />
+                        <Form.Item
-                      </Form.Item>
+                          label={t("contracts.fields.refuelcharge")}
-                      <Form.Item
+                          key={`${index}refuelcharge`}
-                        label={t("contracts.fields.excesskmrate")}
+                          name={[field.name, "refuelcharge"]}
-                        key={`${index}excesskmrate`}
+                        >
-                        name={[field.name, "excesskmrate"]}
+                          <InputNumber precision={2} />
-                      >
+                        </Form.Item>
-                        <InputNumber precision={2} />
+                        <Form.Item
-                      </Form.Item>
+                          label={t("contracts.fields.excesskmrate")}
-                      <Form.Item
+                          key={`${index}excesskmrate`}
-                        label={t("contracts.fields.cleanupcharge")}
+                          name={[field.name, "excesskmrate"]}
-                        key={`${index}cleanupcharge`}
+                        >
-                        name={[field.name, "cleanupcharge"]}
+                          <InputNumber precision={2} />
-                      >
+                        </Form.Item>
-                        <InputNumber precision={2} />
+                        <Form.Item
-                      </Form.Item>
+                          label={t("contracts.fields.cleanupcharge")}
-                      <Form.Item
+                          key={`${index}cleanupcharge`}
-                        label={t("contracts.fields.damagewaiver")}
+                          name={[field.name, "cleanupcharge"]}
-                        key={`${index}damagewaiver`}
+                        >
-                        name={[field.name, "damagewaiver"]}
+                          <InputNumber precision={2} />
-                      >
+                        </Form.Item>
-                        <InputNumber precision={2} />
+                        <Form.Item
-                      </Form.Item>
+                          label={t("contracts.fields.damagewaiver")}
-                      <Form.Item
+                          key={`${index}damagewaiver`}
-                        label={t("contracts.fields.federaltax")}
+                          name={[field.name, "damagewaiver"]}
-                        key={`${index}federaltax`}
+                        >
-                        name={[field.name, "federaltax"]}
+                          <InputNumber precision={2} />
-                      >
+                        </Form.Item>
-                        <InputNumber precision={2} />
+                        <Form.Item
-                      </Form.Item>
+                          label={t("contracts.fields.federaltax")}
-                      <Form.Item
+                          key={`${index}federaltax`}
-                        label={t("contracts.fields.statetax")}
+                          name={[field.name, "federaltax"]}
-                        key={`${index}statetax`}
+                        >
-                        name={[field.name, "statetax"]}
+                          <InputNumber precision={2} />
-                      >
+                        </Form.Item>
-                        <InputNumber precision={2} />
+                        <Form.Item
-                      </Form.Item>
+                          label={t("contracts.fields.statetax")}
-                      <Form.Item
+                          key={`${index}statetax`}
-                        label={t("contracts.fields.localtax")}
+                          name={[field.name, "statetax"]}
-                        key={`${index}localtax`}
+                        >
-                        name={[field.name, "localtax"]}
+                          <InputNumber precision={2} />
-                      >
+                        </Form.Item>
-                        <InputNumber precision={2} />
+                        <Form.Item
-                      </Form.Item>
+                          label={t("contracts.fields.localtax")}
-                      <Form.Item
+                          key={`${index}localtax`}
-                        label={t("contracts.fields.coverage")}
+                          name={[field.name, "localtax"]}
-                        key={`${index}coverage`}
+                        >
-                        name={[field.name, "coverage"]}
+                          <InputNumber precision={2} />
-                      >
+                        </Form.Item>
-                        <InputNumber precision={2} />
+                        <Form.Item
-                      </Form.Item>
+                          label={t("contracts.fields.coverage")}
+                          key={`${index}coverage`}
+                          name={[field.name, "coverage"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>
 
-                      <Space wrap>
+                        <Space wrap>
-                        <DeleteFilled
+                          <DeleteFilled
-                          onClick={() => {
+                            onClick={() => {
-                            remove(field.name);
+                              remove(field.name);
-                          }}
+                            }}
-                        />
+                          />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
+                          <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
+                        </Space>
-                    </LayoutFormRow>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  ))}
+                  <Form.Item>
+                    <Button
+                      type="dashed"
+                      onClick={() => {
+                        add();
+                      }}
+                      style={{ width: "100%" }}
+                    >
+                      {t("general.actions.add")}
+                    </Button>
                   </Form.Item>
-                ))}
+                </div>
-                <Form.Item>
+              );
-                  <Button
+            }}
-                    type="dashed"
+          </Form.List>
-                    onClick={() => {
+        </LayoutFormRow>
-                      add();
+      </FeatureWrapper>
-                    }}
+
-                    style={{ width: "100%" }}
-                  >
-                    {t("general.actions.add")}
-                  </Button>
-                </Form.Item>
-              </div>
-            );
-          }}
-        </Form.List>
-      </LayoutFormRow>
       <LayoutFormRow grow header={t("bodyshop.fields.md_jobline_presets")} id="md_jobline_presets">
         <Form.List name={["md_jobline_presets"]}>
           {(fields, { add, remove, move }) => {

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

@@ -1,12 +1,13 @@
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Form, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -29,210 +30,219 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
   return (
     <RbacWrapper action="shop:rbac">
       <LayoutFormRow>
-        <Form.Item
+        {...HasFeatureAccess({ featureName: "export", bodyshop }) ? [
-          label={t("bodyshop.fields.rbac.accounting.exportlog")}
+          <Form.Item
-          rules={[
+            label={t("bodyshop.fields.rbac.accounting.exportlog")}
-            {
+            rules={[
-              required: true
+              {
-              //message: t("general.validation.required"),
+                required: true
-            }
+                //message: t("general.validation.required"),
-          ]}
+              }
-          name={["md_rbac", "accounting:exportlog"]}
+            ]}
-        >
+            name={["md_rbac", "accounting:exportlog"]}
-          <InputNumber />
+          >
-        </Form.Item>
+            <InputNumber />
-        <Form.Item
+          </Form.Item>,
-          label={t("bodyshop.fields.rbac.accounting.payables")}
+          <Form.Item
-          rules={[
+            label={t("bodyshop.fields.rbac.accounting.payables")}
-            {
+            rules={[
-              required: true
+              {
-              //message: t("general.validation.required"),
+                required: true
-            }
+                //message: t("general.validation.required"),
-          ]}
+              }
-          name={["md_rbac", "accounting:payables"]}
+            ]}
-        >
+            name={["md_rbac", "accounting:payables"]}
-          <InputNumber />
+          >
-        </Form.Item>
+            <InputNumber />
-        <Form.Item
+          </Form.Item>,
-          label={t("bodyshop.fields.rbac.accounting.payments")}
+          <Form.Item
-          rules={[
+            label={t("bodyshop.fields.rbac.accounting.payments")}
-            {
+            rules={[
-              required: true
+              {
-              //message: t("general.validation.required"),
+                required: true
-            }
+                //message: t("general.validation.required"),
-          ]}
+              }
-          name={["md_rbac", "accounting:payments"]}
+            ]}
-        >
+            name={["md_rbac", "accounting:payments"]}
-          <InputNumber />
+          >
-        </Form.Item>
+            <InputNumber />
-        <Form.Item
+          </Form.Item>,
-          label={t("bodyshop.fields.rbac.accounting.receivables")}
+          <Form.Item
-          rules={[
+            label={t("bodyshop.fields.rbac.accounting.receivables")}
-            {
+            rules={[
-              required: true
+              {
-              //message: t("general.validation.required"),
+                required: true
-            }
+                //message: t("general.validation.required"),
-          ]}
+              }
-          name={["md_rbac", "accounting:receivables"]}
+            ]}
-        >
+            name={["md_rbac", "accounting:receivables"]}
-          <InputNumber />
+          >
-        </Form.Item>
+            <InputNumber />
-        <Form.Item
+          </Form.Item>
-          label={t("bodyshop.fields.rbac.bills.delete")}
+        ]:[]}
-          rules={[
+        {...HasFeatureAccess({ featureName: "bills", bodyshop }) ? [
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.bills.delete")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "bills:delete"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "bills:delete"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.bills.enter")}
+            <InputNumber />
-          rules={[
+          </Form.Item>,
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.bills.enter")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "bills:enter"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "bills:enter"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.bills.list")}
+            <InputNumber />
-          rules={[
+          </Form.Item>,
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.bills.list")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "bills:list"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "bills:list"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.bills.reexport")}
+            <InputNumber />
-          rules={[
+          </Form.Item>,
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.bills.reexport")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "bills:reexport"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "bills:reexport"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.bills.view")}
+            <InputNumber />
-          rules={[
+          </Form.Item>,
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.bills.view")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "bills:view"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "bills:view"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.contracts.create")}
+            <InputNumber />
-          rules={[
+          </Form.Item>
-            {
+        ]:[]}
-              required: true
+
-              //message: t("general.validation.required"),
+        {...HasFeatureAccess({ featureName: "courtesycars", bodyshop }) ? [
-            }
+          <Form.Item
-          ]}
+            label={t("bodyshop.fields.rbac.contracts.create")}
-          name={["md_rbac", "contracts:create"]}
+            rules={[
-        >
+              {
-          <InputNumber />
+                required: true
-        </Form.Item>
+                //message: t("general.validation.required"),
-        <Form.Item
+              }
-          label={t("bodyshop.fields.rbac.contracts.detail")}
+            ]}
-          rules={[
+            name={["md_rbac", "contracts:create"]}
-            {
+          >
-              required: true
+            <InputNumber />
-              //message: t("general.validation.required"),
+          </Form.Item>,
-            }
+          <Form.Item
-          ]}
+            label={t("bodyshop.fields.rbac.contracts.detail")}
-          name={["md_rbac", "contracts:detail"]}
+            rules={[
-        >
+              {
-          <InputNumber />
+                required: true
-        </Form.Item>
+                //message: t("general.validation.required"),
-        <Form.Item
+              }
-          label={t("bodyshop.fields.rbac.contracts.list")}
+            ]}
-          rules={[
+            name={["md_rbac", "contracts:detail"]}
-            {
+          >
-              required: true
+            <InputNumber />
-              //message: t("general.validation.required"),
+          </Form.Item>,
-            }
+          <Form.Item
-          ]}
+            label={t("bodyshop.fields.rbac.contracts.list")}
-          name={["md_rbac", "contracts:list"]}
+            rules={[
-        >
+              {
-          <InputNumber />
+                required: true
-        </Form.Item>
+                //message: t("general.validation.required"),
-        <Form.Item
+              }
-          label={t("bodyshop.fields.rbac.courtesycar.create")}
+            ]}
-          rules={[
+            name={["md_rbac", "contracts:list"]}
-            {
+          >
-              required: true
+            <InputNumber />
-              //message: t("general.validation.required"),
+          </Form.Item>,
-            }
+          <Form.Item
-          ]}
+            label={t("bodyshop.fields.rbac.courtesycar.create")}
-          name={["md_rbac", "courtesycar:create"]}
+            rules={[
-        >
+              {
-          <InputNumber />
+                required: true
-        </Form.Item>
+                //message: t("general.validation.required"),
-        <Form.Item
+              }
-          label={t("bodyshop.fields.rbac.courtesycar.detail")}
+            ]}
-          rules={[
+            name={["md_rbac", "courtesycar:create"]}
-            {
+          >
-              required: true
+            <InputNumber />
-              //message: t("general.validation.required"),
+          </Form.Item>,
-            }
+          <Form.Item
-          ]}
+            label={t("bodyshop.fields.rbac.courtesycar.detail")}
-          name={["md_rbac", "courtesycar:detail"]}
+            rules={[
-        >
+              {
-          <InputNumber />
+                required: true
-        </Form.Item>
+                //message: t("general.validation.required"),
-        <Form.Item
+              }
-          label={t("bodyshop.fields.rbac.courtesycar.list")}
+            ]}
-          rules={[
+            name={["md_rbac", "courtesycar:detail"]}
-            {
+          >
-              required: true
+            <InputNumber />
-              //message: t("general.validation.required"),
+          </Form.Item>,
-            }
+          <Form.Item
-          ]}
+            label={t("bodyshop.fields.rbac.courtesycar.list")}
-          name={["md_rbac", "courtesycar:list"]}
+            rules={[
-        >
+              {
-          <InputNumber />
+                required: true
-        </Form.Item>
+                //message: t("general.validation.required"),
-        <Form.Item
+              }
-          label={t("bodyshop.fields.rbac.csi.export")}
+            ]}
-          rules={[
+            name={["md_rbac", "courtesycar:list"]}
-            {
+          >
-              required: true
+            <InputNumber />
-              //message: t("general.validation.required"),
+          </Form.Item>
-            }
+        ]:[]}
-          ]}
+        {...HasFeatureAccess({ featureName: "csi", bodyshop }) ? [
-          name={["md_rbac", "csi:export"]}
+          <Form.Item
-        >
+            label={t("bodyshop.fields.rbac.csi.export")}
-          <InputNumber />
+            rules={[
-        </Form.Item>
+              {
-        <Form.Item
+                required: true
-          label={t("bodyshop.fields.rbac.csi.page")}
+                //message: t("general.validation.required"),
-          rules={[
+              }
-            {
+            ]}
-              required: true
+            name={["md_rbac", "csi:export"]}
-              //message: t("general.validation.required"),
+          >
-            }
+            <InputNumber />
-          ]}
+          </Form.Item>,
-          name={["md_rbac", "csi:page"]}
+          <Form.Item
-        >
+            label={t("bodyshop.fields.rbac.csi.page")}
-          <InputNumber />
+            rules={[
-        </Form.Item>
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "csi:page"]}
+          >
+            <InputNumber />
+          </Form.Item>
+        ]:[]}
         <Form.Item
           label={t("bodyshop.fields.rbac.employees.page")}
           rules={[
@@ -425,18 +435,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.list")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "bills:list"]}
-        >
-          <InputNumber />
-        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.employees.page")}
           rules={[
@@ -510,18 +508,21 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
-        <Form.Item
+        {HasFeatureAccess({ featureName: "visualboard", bodyshop }) && (
-          label={t("bodyshop.fields.rbac.production.board")}
+          <Form.Item
-          rules={[
+            label={t("bodyshop.fields.rbac.production.board")}
-            {
+            rules={[
-              required: true
+              {
-              //message: t("general.validation.required"),
+                required: true
-            }
+                //message: t("general.validation.required"),
-          ]}
+              }
-          name={["md_rbac", "production:board"]}
+            ]}
-        >
+            name={["md_rbac", "production:board"]}
-          <InputNumber />
+          >
-        </Form.Item>
+            <InputNumber />
+          </Form.Item>
+        )}
+
         <Form.Item
           label={t("bodyshop.fields.rbac.production.list")}
           rules={[
@@ -546,102 +547,142 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
-        <Form.Item
+        {HasFeatureAccess({ featureName: "scoreboard", bodyshop }) && (
-          label={t("bodyshop.fields.rbac.scoreboard.view")}
+          <Form.Item
-          rules={[
+            label={t("bodyshop.fields.rbac.scoreboard.view")}
-            {
+            rules={[
-              required: true
+              {
-              //message: t("general.validation.required"),
+                required: true
-            }
+                //message: t("general.validation.required"),
-          ]}
+              }
-          name={["md_rbac", "scoreboard:view"]}
+            ]}
-        >
+            name={["md_rbac", "scoreboard:view"]}
-          <InputNumber />
+          >
-        </Form.Item>
+            <InputNumber />
-        <Form.Item
+          </Form.Item>
-          label={t("bodyshop.fields.rbac.shiftclock.view")}
+        )}
-          rules={[
+        {...HasFeatureAccess({ featureName: "timetickets", bodyshop }) ? [
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.shiftclock.view")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "shiftclock:view"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "shiftclock:view"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.shop.config")}
+            <InputNumber />
-          rules={[
+          </Form.Item>,
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.shop.config")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "shop:config"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "shop:config"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.timetickets.edit")}
+            <InputNumber />
-          rules={[
+          </Form.Item>,
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.timetickets.edit")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "timetickets:edit"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "timetickets:edit"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
+            <InputNumber />
-          rules={[
+          </Form.Item>,
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "timetickets:shiftedit"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "timetickets:shiftedit"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.timetickets.editcommitted")}
+            <InputNumber />
-          rules={[
+          </Form.Item>,
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.timetickets.editcommitted")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "timetickets:editcommitted"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "timetickets:editcommitted"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.ttapprovals.view")}
+            <InputNumber />
-          rules={[
+          </Form.Item>,
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.ttapprovals.view")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "ttapprovals:view"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "ttapprovals:view"]}
-        <Form.Item
+          >
-          label={t("bodyshop.fields.rbac.ttapprovals.approve")}
+            <InputNumber />
-          rules={[
+          </Form.Item>,
-            {
+          <Form.Item
-              required: true
+            label={t("bodyshop.fields.rbac.ttapprovals.approve")}
-              //message: t("general.validation.required"),
+            rules={[
-            }
+              {
-          ]}
+                required: true
-          name={["md_rbac", "ttapprovals:approve"]}
+                //message: t("general.validation.required"),
-        >
+              }
-          <InputNumber />
+            ]}
-        </Form.Item>
+            name={["md_rbac", "ttapprovals:approve"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.timetickets.enter")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "timetickets:enter"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.timetickets.list")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "timetickets:list"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "timetickets:shiftedit"]}
+          >
+            <InputNumber />
+          </Form.Item>
+        ]:[]}
         <Form.Item
           label={t("bodyshop.fields.rbac.shop.vendors")}
           rules={[
@@ -690,7 +731,7 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
-        <Form.Item
+        {/* <Form.Item
           label={t("bodyshop.fields.rbac.shop.templates")}
           rules={[
             {
@@ -701,79 +742,22 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
           name={["md_rbac", "shop:templates"]}
         >
           <InputNumber />
-        </Form.Item>
+        </Form.Item> */}
-        <Form.Item
+        {HasFeatureAccess({ featureName: "media", bodyshop }) && (
-          label={t("bodyshop.fields.rbac.shop.vendors")}
+          <Form.Item
-          rules={[
+            label={t("bodyshop.fields.rbac.temporarydocs.view")}
-            {
+            rules={[
-              required: true
+              {
-              //message: t("general.validation.required"),
+                required: true
-            }
+                //message: t("general.validation.required"),
-          ]}
+              }
-          name={["md_rbac", "shop:vendors"]}
+            ]}
-        >
+            name={["md_rbac", "temporarydocs:view"]}
-          <InputNumber />
+          >
-        </Form.Item>
+            <InputNumber />
-        <Form.Item
+          </Form.Item>
-          label={t("bodyshop.fields.rbac.temporarydocs.view")}
+        )}
-          rules={[
+
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "temporarydocs:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.edit")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:edit"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.enter")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:enter"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.list")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:list"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:shiftedit"]}
-        >
-          <InputNumber />
-        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.users.editaccess")}
           rules={[

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

@@ -339,7 +339,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
             {(fields, { add, remove, move }) => {
               return (
                 <div>
-                  <LayoutFormRow>
+                  <Space size='large' wrap>
                     {fields.map((field, index) => (
                       <Form.Item key={field.key}>
                         <Space direction="vertical">
@@ -386,7 +386,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
                         </Space>
                       </Form.Item>
                     ))}
-                  </LayoutFormRow>
+                  </Space>
                   <Form.Item>
                     <Button
                       type="dashed"

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

@@ -1,4 +1,4 @@
-import { Button, Result } from "antd";
+import { Result } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -16,19 +16,5 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShopSubStatus);
 export function ShopSubStatus({ bodyshop }) {
   const { t } = useTranslation();
   const { sub_status } = bodyshop;
-  return (
+  return <Result status="403" title={t(`general.labels.sub_status.${sub_status}`)} />;
-    <Result
-      status="403"
-      title={t(`general.labels.sub_status.${sub_status}`)}
-      extra={
-        <Button
-          onClick={() => {
-            alert("Not implemented yet.");
-          }}
-        >
-          {t("general.actions.submitticket")}
-        </Button>
-      }
-    />
-  );
 }

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

@@ -0,0 +1,382 @@
+import { Button, Card, Space, Switch, Table } from "antd";
+import queryString from "query-string";
+import React, { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { pageLimit } from "../../utils/config";
+import dayjs from "../../utils/day";
+import {
+  CheckCircleFilled,
+  CheckCircleOutlined,
+  DeleteFilled,
+  DeleteOutlined,
+  EditFilled,
+  ExclamationCircleFilled,
+  PlusCircleFilled,
+  SyncOutlined
+} from "@ant-design/icons";
+import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter.jsx";
+import { connect } from "react-redux";
+import { setModalContext } from "../../redux/modals/modals.actions";
+
+/**
+ * Task List Component
+ * @param dueDate
+ * @returns {Element}
+ * @constructor
+ */
+const DueDateRecord = ({ dueDate }) => {
+  if (!dueDate) return <></>;
+
+  const dueDateDayjs = dayjs(dueDate);
+  const relativeDueDate = dueDateDayjs.fromNow();
+  const isBeforeToday = dueDateDayjs.isBefore(dayjs());
+
+  return (
+    <div title={relativeDueDate} style={isBeforeToday ? { color: "red" } : {}}>
+      <DateFormatter>{dueDate}</DateFormatter>
+    </div>
+  );
+};
+
+const RemindAtRecord = ({ remindAt }) => {
+  if (!remindAt) return <></>;
+
+  const remindAtDayjs = dayjs(remindAt);
+  const relativeRemindAtDate = remindAtDayjs.fromNow();
+  const isBeforeToday = remindAtDayjs.isBefore(dayjs());
+
+  return (
+    <div title={relativeRemindAtDate} style={isBeforeToday ? { color: "red" } : {}}>
+      <DateTimeFormatter>{remindAt}</DateTimeFormatter>
+    </div>
+  );
+};
+
+/**
+ * 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) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskListComponent);
+
+function TaskListComponent({
+  bodyshop,
+  loading,
+  tasks,
+  total,
+  titleTranslation,
+  refetch,
+  toggleCompletedStatus,
+  setTaskUpsertContext,
+  toggleDeletedStatus,
+  relationshipType,
+  relationshipId,
+  onlyMine,
+  parentJobId,
+  query,
+  showRo = true
+}) {
+  const { t } = useTranslation();
+  const location = useLocation();
+
+  const search = queryString.parse(useLocation().search);
+
+  // Extract Query Params
+  const { page, sortcolumn, sortorder, deleted, completed, mine } = search;
+
+  const history = useNavigate();
+  const columns = [];
+
+  useEffect(() => {
+    // This is a hack to force the page to change if the query params change (partssublet for example)
+  }, [location]);
+
+  columns.push({
+    title: t("tasks.fields.created_at"),
+    dataIndex: "created_at",
+    key: "created_at",
+    width: "10%",
+    defaultSortOrder: "descend",
+    sorter: true,
+    sortOrder: sortcolumn === "created_at" && sortorder,
+    render: (text, record) => <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
+  });
+
+  if (!onlyMine) {
+    columns.push({
+      title: t("tasks.fields.assigned_to"),
+      dataIndex: "assigned_to",
+      key: "assigned_to",
+      width: "8%",
+      sorter: true,
+      sortOrder: sortcolumn === "assigned_to" && sortorder,
+      render: (text, record) => {
+        const employee = bodyshop?.employees?.find((e) => e.id === record.assigned_to);
+        return employee ? `${employee.first_name} ${employee.last_name}` : t("general.labels.na");
+      }
+    });
+  }
+
+  if (showRo) {
+    columns.push({
+      title: t("tasks.fields.job.ro_number"),
+      dataIndex: ["job", "ro_number"],
+      key: "job.ro_number",
+      width: "8%",
+      render: (text, record) =>
+        record.job ? (
+          <Link to={`/manage/jobs/${record.job.id}?tab=tasks`}>{record.job.ro_number || t("general.labels.na")}</Link>
+        ) : (
+          t("general.labels.na")
+        )
+    });
+  }
+
+  columns.push(
+    {
+      title: t("tasks.fields.jobline"),
+      dataIndex: ["jobline", "id"],
+      key: "jobline.id",
+      width: "8%",
+      render: (text, record) => record?.jobline?.line_desc || ""
+    },
+    {
+      title: t("tasks.fields.parts_order"),
+      dataIndex: ["parts_order", "id"],
+      key: "part_order.id",
+      width: "8%",
+      render: (text, record) =>
+        record.parts_order ? (
+          <Link to={`/manage/jobs/${record.job.id}?partsorderid=${record.parts_order.id}&tab=partssublet`}>
+            {record.parts_order.order_number && record.parts_order.vendor && record.parts_order.vendor.name
+              ? `${record.parts_order.order_number} - ${record.parts_order.vendor.name}`
+              : t("general.labels.na")}
+          </Link>
+        ) : (
+          ""
+        )
+    },
+    {
+      title: t("tasks.fields.bill"),
+      dataIndex: ["bill", "id"],
+      key: "bill.id",
+      width: "10%",
+      render: (text, record) =>
+        record.bill ? (
+          <Link to={`/manage/jobs/${record.job.id}?billid=${record.bill.id}&tab=partssublet`}>
+            {record.bill.invoice_number && record.bill.vendor && record.bill.vendor.name
+              ? `${record.bill.invoice_number} - ${record.bill.vendor.name}`
+              : t("general.labels.na")}
+          </Link>
+        ) : (
+          ""
+        )
+    },
+    {
+      title: t("tasks.fields.title"),
+      dataIndex: "title",
+      key: "title",
+      sorter: true,
+      sortOrder: sortcolumn === "title" && sortorder
+    },
+    {
+      title: t("tasks.fields.due_date"),
+      dataIndex: "due_date",
+      key: "due_date",
+      sorter: true,
+      sortOrder: sortcolumn === "due_date" && sortorder,
+      width: "8%",
+      render: (text, record) => <DueDateRecord dueDate={record.due_date} />
+    },
+    {
+      title: t("tasks.fields.remind_at"),
+      dataIndex: "remind_at",
+      key: "remind_at",
+      sorter: true,
+      sortOrder: sortcolumn === "remind_at" && sortorder,
+      width: "10%",
+      render: (text, record) => <RemindAtRecord remindAt={record.remind_at} />
+    },
+    {
+      title: t("tasks.fields.priority"),
+      dataIndex: "priority",
+      key: "priority",
+      sorter: true,
+      sortOrder: sortcolumn === "priority" && sortorder,
+      width: "8%",
+      render: (text, record) => <PriorityLabel priority={record.priority} />
+    },
+    {
+      title: t("tasks.fields.actions"),
+      key: "toggleCompleted",
+      width: "5%",
+      render: (text, record) => (
+        <Space direction="horizontal">
+          <Button
+            title={t("tasks.buttons.edit")}
+            onClick={() => {
+              setTaskUpsertContext({
+                context: {
+                  existingTask: record,
+                  query
+                }
+              });
+            }}
+          >
+            <EditFilled />
+          </Button>
+          <Button
+            title={t("tasks.buttons.complete")}
+            onClick={() => toggleCompletedStatus(record.id, record.completed)}
+          >
+            {record.completed ? <CheckCircleOutlined /> : <CheckCircleFilled />}
+          </Button>
+          <Button title={t("tasks.buttons.delete")} onClick={() => toggleDeletedStatus(record.id, record.deleted)}>
+            {record.deleted ? <DeleteOutlined /> : <DeleteFilled />}
+          </Button>
+        </Space>
+      )
+    }
+  );
+
+  const handleCreateTask = useCallback(() => {
+    setTaskUpsertContext({
+      actions: {},
+      context: {
+        jobid: parentJobId,
+        [relationshipType]: relationshipId,
+        query
+      }
+    });
+  }, [parentJobId, relationshipId, relationshipType, setTaskUpsertContext, query]);
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    search.page = pagination.current;
+    search.sortcolumn = sorter.columnKey;
+    search.sortorder = sorter.order;
+    history({ search: queryString.stringify(search) });
+  };
+
+  const handleSwitchChange = useCallback(
+    (param, value) => {
+      if (value) {
+        search[param] = "true";
+      } else {
+        delete search[param];
+      }
+      history({ search: queryString.stringify(search) });
+    },
+    [history, search]
+  );
+
+  const expandableRow = (record) => {
+    return (
+      <Card title={t("tasks.fields.description")} size="small">
+        {record.description}
+      </Card>
+    );
+  };
+
+  /**
+   * Extra actions for the tasks
+   * @type {Function}
+   */
+  const tasksExtra = useCallback(() => {
+    return (
+      <Space direction="horizontal">
+        {!onlyMine && (
+          <Switch
+            checkedChildren={t("tasks.buttons.myTasks")}
+            unCheckedChildren={t("tasks.buttons.allTasks")}
+            title={t("tasks.titles.mine")}
+            checked={mine === "true"}
+            onChange={(value) => handleSwitchChange("mine", value)}
+          />
+        )}
+        <Switch
+          checkedChildren={<CheckCircleFilled />}
+          unCheckedChildren={<CheckCircleOutlined />}
+          title={t("tasks.titles.completed")}
+          checked={completed === "true"}
+          onChange={(value) => handleSwitchChange("completed", value)}
+        />
+        <Switch
+          checkedChildren={<DeleteFilled />}
+          unCheckedChildren={<DeleteOutlined />}
+          title={t("tasks.titles.deleted")}
+          checked={deleted === "true"}
+          onChange={(value) => handleSwitchChange("deleted", value)}
+        />
+        <Button title={t("tasks.buttons.refresh")} onClick={() => refetch()}>
+          <SyncOutlined />
+        </Button>
+        <Button title={t("tasks.buttons.create")} onClick={handleCreateTask}>
+          <PlusCircleFilled />
+          {t("tasks.buttons.create")}
+        </Button>
+      </Space>
+    );
+  }, [refetch, deleted, completed, mine, onlyMine, t, handleSwitchChange, handleCreateTask]);
+
+  return (
+    <Card title={titleTranslation} extra={tasksExtra()}>
+      <Table
+        loading={loading}
+        pagination={{
+          pageSize: pageLimit,
+          current: parseInt(page || 1),
+          total: total,
+          responsive: true,
+          showQuickJumper: true
+        }}
+        columns={columns}
+        rowKey="id"
+        scroll={{ x: true }}
+        dataSource={tasks}
+        onChange={handleTableChange}
+        expandable={{
+          expandedRowRender: expandableRow,
+          rowExpandable: (record) => record.description
+        }}
+      />
+    </Card>
+  );
+}

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

@@ -0,0 +1,193 @@
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
+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 { notification } from "antd";
+import { useTranslation } from "react-i18next";
+import { connect, useDispatch } from "react-redux";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
+import dayjs from "../../utils/day";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskListContainer);
+
+export function TaskListContainer({
+  bodyshop,
+  titleTranslation,
+  query,
+  relationshipType,
+  relationshipId,
+  currentUser,
+  onlyMine,
+  parentJobId,
+  showRo = true,
+  disableJobRefetch = false
+}) {
+  const { t } = useTranslation();
+  const searchParams = queryString.parse(useLocation().search);
+  const {
+    page,
+    sortcolumn,
+    sortorder,
+    deleted,
+    completed //mine
+  } = searchParams;
+  const dispatch = useDispatch();
+
+  const { loading, error, data, refetch } = useQuery(query[Object.keys(query)[0]], {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    variables: {
+      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
+      offset: page ? (page - 1) * pageLimit : 0,
+      limit: pageLimit,
+      order: [
+        {
+          [sortcolumn || "created_at"]: sortorder ? (sortorder === "descend" ? "desc" : "asc") : "desc"
+        }
+      ]
+    }
+  });
+
+  /**
+   * Toggle task completed mutation
+   */
+  const [toggleTaskCompleted] = useMutation(MUTATION_TOGGLE_TASK_COMPLETED);
+
+  /**
+   * Toggle task completed status
+   * @param id
+   * @param currentStatus
+   * @returns {Promise<void>}
+   */
+  const toggleCompletedStatus = async (id, currentStatus) => {
+    const completed_at = !currentStatus ? dayjs().toISOString() : null;
+
+    try {
+      const toggledTaskObject = {
+        variables: {
+          id: id,
+          completed: !currentStatus,
+          completed_at: completed_at
+        },
+        refetchQueries: [Object.keys(query)[0]]
+      };
+
+      if (!disableJobRefetch) {
+        toggledTaskObject.refetchQueries.push("GET_JOB_BY_PK");
+      }
+
+      const toggledTask = await toggleTaskCompleted(toggledTaskObject);
+
+      if (!toggledTask.errors) {
+        dispatch(
+          insertAuditTrail({
+            jobid: toggledTask.data.update_tasks_by_pk.jobid,
+            operation: toggledTask?.data?.update_tasks_by_pk?.completed
+              ? AuditTrailMapping.tasksCompleted(toggledTask.data.update_tasks_by_pk.title, currentUser.email)
+              : AuditTrailMapping.tasksUncompleted(toggledTask.data.update_tasks_by_pk.title, currentUser.email),
+            type: toggledTask?.data?.update_tasks_by_pk?.completed ? "tasksCompleted" : "tasksUncompleted"
+          })
+        );
+      }
+
+      notification["success"]({
+        message: t("tasks.successes.completed")
+      });
+    } catch (err) {
+      notification["error"]({
+        message: t("tasks.failures.completed")
+      });
+    }
+  };
+
+  /**
+   * Toggle task deleted mutation
+   */
+  const [toggleTaskDeleted] = useMutation(MUTATION_TOGGLE_TASK_DELETED);
+
+  /**
+   * Toggle task deleted status
+   * @param id
+   * @param currentStatus
+   * @returns {Promise<void>}
+   */
+
+  const toggleDeletedStatus = async (id, currentStatus) => {
+    const deleted_at = !currentStatus ? dayjs().toISOString() : null;
+    try {
+      const toggledTaskObject = {
+        variables: {
+          id: id,
+          deleted: !currentStatus,
+          deleted_at: deleted_at
+        },
+        refetchQueries: [Object.keys(query)[0]]
+      };
+
+      if (!disableJobRefetch) {
+        toggledTaskObject.refetchQueries.push("GET_JOB_BY_PK");
+      }
+
+      const toggledTask = await toggleTaskDeleted(toggledTaskObject);
+
+      if (!toggledTask.errors) {
+        dispatch(
+          insertAuditTrail({
+            jobid: toggledTask.data.update_tasks_by_pk.jobid,
+            operation: toggledTask?.data?.update_tasks_by_pk?.deleted
+              ? AuditTrailMapping.tasksDeleted(toggledTask.data.update_tasks_by_pk.title, currentUser.email)
+              : AuditTrailMapping.tasksUndeleted(toggledTask.data.update_tasks_by_pk.title, currentUser.email),
+            type: toggledTask?.data?.update_tasks_by_pk?.deleted ? "tasksDeleted" : "tasksUndeleted"
+          })
+        );
+      }
+
+      notification["success"]({
+        message: t("tasks.successes.deleted")
+      });
+    } catch (err) {
+      notification["error"]({
+        message: t("tasks.failures.deleted")
+      });
+    }
+  };
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <TaskListComponent
+      loading={loading}
+      tasks={data ? data.tasks : null}
+      total={data ? data.tasks_aggregate.aggregate.count : 0}
+      titleTranslation={t(titleTranslation || "tasks.title")}
+      refetch={refetch}
+      toggleCompletedStatus={toggleCompletedStatus}
+      toggleDeletedStatus={toggleDeletedStatus}
+      relationshipType={relationshipType}
+      relationshipId={relationshipId}
+      onlyMine={onlyMine}
+      showRo={showRo}
+      parentJobId={parentJobId}
+      bodyshop={bodyshop}
+      query={query}
+    />
+  );
+}

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

@@ -0,0 +1,299 @@
+import { Col, Form, Input, Row, Select, Switch } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { FormDatePicker } from "../form-date-picker/form-date-picker.component.jsx";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
+import dayjs from "../../utils/day";
+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 { FormDateTimePickerEnhanced } from "../form-date-time-picker-enhanced/form-date-time-picker-enhanced.component.jsx";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = () => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskUpsertModalComponent);
+
+export function TaskUpsertModalComponent({
+  form,
+  bodyshop,
+  currentUser,
+  selectedJobId,
+  setSelectedJobId,
+  selectedJobDetails,
+  existingTask,
+  loading,
+  error
+}) {
+  const { t } = useTranslation();
+
+  const datePickerPresets = [
+    { label: t("tasks.date_presets.today"), value: dayjs().add(1, "hour") },
+    { label: t("tasks.date_presets.tomorrow"), value: dayjs().add(1, "day").startOf("day") },
+    { label: t("tasks.date_presets.next_week"), value: dayjs().add(1, "week").startOf("day") },
+    { label: t("tasks.date_presets.two_weeks"), value: dayjs().add(2, "weeks").startOf("day") },
+    { label: t("tasks.date_presets.three_weeks"), value: dayjs().add(3, "weeks").startOf("day") },
+    { label: t("tasks.date_presets.one_month"), value: dayjs().add(1, "month").startOf("day") },
+    { label: t("tasks.date_presets.three_months"), value: dayjs().add(3, "month").startOf("day") }
+  ];
+
+  const generatePresets = (job) => {
+    if (!job || !selectedJobDetails) return datePickerPresets; // return default presets if no job selected
+    const relativePresets = [];
+
+    if (selectedJobDetails?.scheduled_completion) {
+      const scheduledCompletion = dayjs(selectedJobDetails.scheduled_completion);
+
+      if (scheduledCompletion.isAfter(dayjs())) {
+        relativePresets.push(
+          {
+            label: `${t("tasks.date_presets.completion")} -1 ${t("tasks.date_presets.day")}`,
+            value: scheduledCompletion.subtract(1, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.completion")} -2 ${t("tasks.date_presets.days")}`,
+            value: scheduledCompletion.subtract(2, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.completion")} -3 ${t("tasks.date_presets.days")}`,
+            value: scheduledCompletion.subtract(3, "day").startOf("day")
+          }
+        );
+      }
+    }
+
+    if (selectedJobDetails?.scheduled_delivery) {
+      const scheduledDelivery = dayjs(selectedJobDetails.scheduled_delivery);
+      if (scheduledDelivery.isAfter(dayjs())) {
+        relativePresets.push(
+          {
+            label: `${t("tasks.date_presets.delivery")} -1 ${t("tasks.date_presets.day")}`,
+            value: scheduledDelivery.subtract(1, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.delivery")} -2 ${t("tasks.date_presets.days")}`,
+            value: scheduledDelivery.subtract(2, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.delivery")} -3 ${t("tasks.date_presets.days")}`,
+            value: scheduledDelivery.subtract(3, "day").startOf("day")
+          }
+        );
+      }
+    }
+
+    return [...relativePresets, ...datePickerPresets];
+  };
+
+  const clearRelations = () => {
+    form.setFieldsValue({
+      billid: null,
+      partsorderid: null,
+      joblineid: null
+    });
+  };
+
+  /**
+   * Change the selected job id
+   * @param jobId
+   */
+  const changeJobId = (jobId) => {
+    setSelectedJobId(jobId || null);
+    // Reset the form fields when selectedJobId changes
+    clearRelations();
+  };
+
+  if (loading || error) return <LoadingSkeleton active />;
+
+  return (
+    <>
+      <Row gutter={[16, 16]}>
+        <Col span={16}>
+          <Form.Item
+            label={t("tasks.fields.title")}
+            name="title"
+            rules={[
+              {
+                required: true
+              }
+            ]}
+          >
+            <Input placeholder={t("tasks.fields.title")} />
+          </Form.Item>
+        </Col>
+        <Col span={4}>
+          <Form.Item label={t("tasks.fields.priority")} name="priority" initialValue={2}>
+            <Select
+              options={[
+                { value: 3, label: t("tasks.fields.priorities.low") },
+                { value: 2, label: t("tasks.fields.priorities.medium") },
+                { value: 1, label: t("tasks.fields.priorities.high") }
+              ]}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={4}>
+          <Form.Item
+            label={t("tasks.fields.completed")}
+            name="completed"
+            valuePropName="checked"
+            initialValue={false}
+            rules={[
+              {
+                required: true
+              }
+            ]}
+          >
+            <Switch />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Form.Item
+            name="jobid"
+            initialValue={selectedJobId}
+            label={t("tasks.fields.jobid")}
+            rules={[
+              {
+                required: true
+              }
+            ]}
+          >
+            <JobSearchSelectComponent
+              placeholder={t("tasks.placeholders.jobid")}
+              onSelect={changeJobId}
+              onClear={changeJobId}
+              autoFocus={false}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
+        <Col span={8}>
+          <Form.Item label={t("tasks.fields.joblineid")} name="joblineid">
+            <Select
+              allowClear
+              placeholder={t("tasks.placeholders.joblineid")}
+              disabled={!selectedJobDetails || !selectedJobId}
+              options={selectedJobDetails?.joblines?.map((jobline) => ({
+                key: jobline.id,
+                value: jobline.id,
+                label: jobline.line_desc
+              }))}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label={t("tasks.fields.partsorderid")} name="partsorderid">
+            <Select
+              allowClear
+              placeholder={t("tasks.placeholders.partsorderid")}
+              disabled={!selectedJobDetails || !selectedJobId}
+              options={selectedJobDetails?.parts_orders?.map((partsOrder) => ({
+                key: partsOrder.id,
+                value: partsOrder.id,
+                label: `${partsOrder.order_number} - ${partsOrder.vendor.name}`
+              }))}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label={t("tasks.fields.billid")} name="billid">
+            <Select
+              allowClear
+              placeholder={t("tasks.placeholders.billid")}
+              disabled={!selectedJobDetails || !selectedJobId}
+              options={selectedJobDetails?.bills?.map((bill) => ({
+                key: bill.id,
+                value: bill.id,
+                label: `${bill.invoice_number} - ${bill.vendor.name}`
+              }))}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
+        <Col span={8}>
+          <Form.Item
+            label={t("tasks.fields.assigned_to")}
+            name="assigned_to"
+            initialValue={
+              bodyshop.employees.find((employee) => employee?.user_email === currentUser.email && employee.active)?.id
+            }
+            rules={[
+              {
+                required: true
+              }
+            ]}
+          >
+            <Select
+              placeholder={t("tasks.placeholders.assigned_to")}
+              options={bodyshop.employees
+                .filter((x) => x.active && x.user_email)
+                .map((employee) => ({
+                  key: employee.id,
+                  value: employee.id,
+                  label: `${employee.first_name} ${employee.last_name}`
+                }))}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label={t("tasks.fields.due_date")} name="due_date">
+            <FormDatePicker
+              onlyFuture
+              format="MM/DD/YYYY"
+              presets={generatePresets(selectedJobDetails)}
+              rules={[
+                {
+                  validator: (_, value) => {
+                    if (!value || existingTask?.due_date === value || dayjs(value).isAfter(dayjs())) {
+                      return Promise.resolve();
+                    }
+                    return Promise.reject(new Error(t("tasks.validation.due_at_error_message")));
+                  }
+                }
+              ]}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item
+            label={t("tasks.fields.remind_at")}
+            name="remind_at"
+            rules={[
+              {
+                validator: (_, value) => {
+                  if (!value || existingTask?.remind_at === value || dayjs(value).isAfter(dayjs().add(15, "minute"))) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(new Error(t("tasks.validation.remind_at_error_message")));
+                }
+              }
+            ]}
+          >
+            <FormDateTimePickerEnhanced
+              onlyFuture
+              showTime
+              minuteStep={15}
+              presets={generatePresets(selectedJobDetails)}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Form.Item label={t("tasks.fields.description")} name="description">
+            <Input.TextArea rows={8} placeholder={t("tasks.fields.description")} />
+          </Form.Item>
+        </Col>
+      </Row>
+    </>
+  );
+}

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

@@ -0,0 +1,296 @@
+import { useMutation, useQuery } from "@apollo/client";
+import { Form, Modal, notification } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { MUTATION_INSERT_NEW_TASK, MUTATION_UPDATE_TASK, QUERY_GET_TASK_BY_ID } from "../../graphql/tasks.queries";
+import { GET_JOB_BY_PK, QUERY_GET_TASKS_JOB_DETAILS_BY_ID } from "../../graphql/jobs.queries.js";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectTaskUpsert } from "../../redux/modals/modals.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import TaskUpsertModalComponent from "./task-upsert-modal.component";
+import { replaceUndefinedWithNull } from "../../utils/undefinedtonull.js";
+import { useLocation, useNavigate } from "react-router-dom";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
+import { isEqual } from "lodash";
+import refetchRouteMappings from "./task-upsert-modal.route.mappings";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop,
+  taskUpsert: selectTaskUpsert
+});
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("taskUpsert")),
+  insertAuditTrail: ({ jobid, billid, operation, type }) =>
+    dispatch(insertAuditTrail({ jobid, billid, operation, type }))
+});
+
+export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, toggleModalVisible, insertAuditTrail }) {
+  const { t } = useTranslation();
+  const history = useNavigate();
+  const [insertTask] = useMutation(MUTATION_INSERT_NEW_TASK);
+  const [updateTask] = useMutation(MUTATION_UPDATE_TASK);
+  const { open, context } = taskUpsert;
+  const { jobid, joblineid, billid, partsorderid, taskId, existingTask, query } = context;
+  const [form] = Form.useForm();
+  const [selectedJobId, setSelectedJobId] = useState(null);
+  const [selectedJobDetails, setSelectedJobDetails] = useState(null);
+  const [jobIdState, setJobIdState] = useState(null);
+  const [isTouched, setIsTouched] = useState(false);
+  const location = useLocation();
+
+  const { loading, error, data } = useQuery(QUERY_GET_TASKS_JOB_DETAILS_BY_ID, {
+    variables: { id: jobIdState },
+    skip: !jobIdState
+  });
+
+  const {
+    loading: taskLoading,
+    error: taskError,
+    data: taskData
+  } = useQuery(QUERY_GET_TASK_BY_ID, {
+    variables: { id: taskId },
+    skip: !taskId
+  });
+  // Use Effect to hydrate existing task if only a taskid is provided
+  useEffect(() => {
+    if (!taskLoading && !taskError && taskData && taskData?.tasks_by_pk) {
+      form.setFieldsValue(taskData.tasks_by_pk);
+      setSelectedJobId(taskData.tasks_by_pk.jobid);
+    }
+  }, [taskLoading, taskError, taskData, form]);
+
+  // Use Effect to hydrate selected job details
+  useEffect(() => {
+    if (!loading && !error && data) {
+      setSelectedJobDetails(data.jobs_by_pk);
+    }
+  }, [loading, error, data]);
+
+  // Use Effect to toggle to set jobid state
+  useEffect(() => {
+    if (selectedJobId) {
+      setJobIdState(selectedJobId);
+    }
+  }, [selectedJobId]);
+
+  // Use Effect to hydrate form fields
+  useEffect(() => {
+    if (jobid || existingTask?.id) {
+      setSelectedJobId(jobid || existingTask.jobid);
+    }
+    if (existingTask && open) {
+      form.setFieldsValue(existingTask);
+    } else if (!existingTask && open) {
+      form.resetFields();
+      if (joblineid) form.setFieldsValue({ joblineid });
+      if (billid) form.setFieldsValue({ billid });
+      if (partsorderid) form.setFieldsValue({ partsorderid });
+    }
+    return () => {
+      setSelectedJobId(null);
+      setIsTouched(false);
+    };
+  }, [jobid, existingTask, form, open, joblineid, billid, partsorderid]);
+
+  /**
+   * Remove the taskid from the URL
+   */
+  const removeTaskIdFromUrl = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (!urlParams.has("taskid")) return;
+    urlParams.delete("taskid");
+    history(`${window.location.pathname}?${urlParams}`);
+  };
+
+  /**
+   * Generate refetch queries
+   * @param jobId
+   * @returns {*[]}
+   */
+  const generateRefetchQueries = (jobId) => {
+    const refetchQueries = [];
+
+    if (location.pathname.includes("/manage/jobs") && jobId) {
+      refetchQueries.push({
+        query: GET_JOB_BY_PK,
+        variables: {
+          id: jobId
+        }
+      });
+    }
+
+    // We have a specified query
+    if (query && Object.keys(query).length) {
+      refetchQueries.push(Object.keys(query)[0]);
+    }
+    // We don't have a specified query, check the page
+    else {
+      refetchRouteMappings.forEach((mapping) => {
+        if (location.pathname.includes(mapping.route)) {
+          refetchQueries.push(mapping.query);
+        }
+      });
+    }
+
+    return refetchQueries;
+  };
+
+  /**
+   * Handle existing task
+   * @param id
+   * @param jobId
+   * @param values
+   * @returns {Promise<void>}
+   */
+  const handleExistingTask = async (id, jobId, values) => {
+    const task = replaceUndefinedWithNull(values);
+
+    // Remind at is dirty so lets clear remind_at_sent
+    if (task?.remind_at) {
+      task.remind_at_sent = null;
+    }
+
+    const taskObject = {
+      variables: {
+        taskId: id,
+        task
+      }
+    };
+
+    taskObject.refetchQueries = generateRefetchQueries(jobId);
+
+    const taskData = await updateTask(taskObject);
+
+    if (!taskData.errors) {
+      const oldTask = taskData?.data?.update_tasks?.returning[0];
+
+      insertAuditTrail({
+        jobid: oldTask.jobid,
+        operation: AuditTrailMapping.tasksUpdated(oldTask.title, currentUser.email),
+        type: "tasksUpdated"
+      });
+    }
+
+    notification["success"]({
+      message: t("tasks.successes.updated")
+    });
+
+    toggleModalVisible();
+  };
+
+  /**
+   * Handle new task
+   * @param values
+   * @returns {Promise<void>}
+   */
+  const handleNewTask = async (values) => {
+    const taskObject = {
+      variables: {
+        taskInput: [
+          {
+            ...values,
+            created_by: currentUser.email,
+            bodyshopid: bodyshop.id
+          }
+        ]
+      }
+    };
+
+    taskObject.refetchQueries = generateRefetchQueries(values.jobid);
+
+    const newTaskData = await insertTask(taskObject);
+    const newTask = newTaskData?.data?.insert_tasks?.returning[0];
+
+    if (!newTaskData.errors) {
+      insertAuditTrail({
+        jobid: newTask.jobid,
+        operation: AuditTrailMapping.tasksCreated(newTask.title, currentUser.email),
+        type: "tasksCreated"
+      });
+    }
+
+    form.resetFields();
+    toggleModalVisible();
+
+    notification["success"]({
+      message: t("tasks.successes.created")
+    });
+  };
+
+  /**
+   * Handle the form submit
+   * @param formValues
+   * @returns {Promise<[{jobid, bodyshopid, created_by},...*]>}
+   */
+  const handleFinish = async (formValues) => {
+    if (existingTask || taskData?.tasks_by_pk) {
+      const taskSource = existingTask || taskData?.tasks_by_pk;
+      const dirtyValues = Object.keys(formValues).reduce((acc, key) => {
+        if (!isEqual(formValues[key], taskSource[key])) {
+          acc[key] = formValues[key];
+        }
+        return acc;
+      }, {});
+      try {
+        await handleExistingTask(taskSource.id, taskSource.jobid, dirtyValues);
+      } catch (e) {
+        notification["error"]({
+          message: t("tasks.failures.updated")
+        });
+      }
+    } else {
+      try {
+        await handleNewTask(formValues);
+      } catch (e) {
+        notification["error"]({
+          message: t("tasks.failures.created")
+        });
+      }
+    }
+  };
+
+  return (
+    <Modal
+      title={existingTask ? t("tasks.actions.edit") : t("tasks.actions.new")}
+      open={open}
+      okText={t("general.actions.save")}
+      width="50%"
+      onOk={() => {
+        removeTaskIdFromUrl();
+        form.submit();
+      }}
+      onCancel={() => {
+        removeTaskIdFromUrl();
+        toggleModalVisible();
+      }}
+      okButtonProps={{ disabled: !isTouched }}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        layout="vertical"
+        onFieldsChange={() => {
+          setIsTouched(true);
+        }}
+      >
+        <TaskUpsertModalComponent
+          form={form}
+          loading={loading || (taskId && taskLoading)}
+          error={error}
+          data={data}
+          existingTask={existingTask || taskData?.tasks_by_pk}
+          selectedJobId={selectedJobId}
+          setSelectedJobId={setSelectedJobId}
+          selectedJobDetails={selectedJobDetails}
+        />
+      </Form>
+    </Modal>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskUpsertModalContainer);

client/src/components/task-upsert-modal/task-upsert-modal.route.mappings.jsx

@@ -0,0 +1,15 @@
+import {
+  QUERY_ALL_TASKS_PAGINATED,
+  QUERY_JOB_TASKS_PAGINATED,
+  QUERY_MY_TASKS_PAGINATED
+} from "../../graphql/tasks.queries.js";
+
+const getQueryName = (query) => Object.keys(query)[0];
+
+const refetchRouteMappings = [
+  {query: getQueryName({QUERY_MY_TASKS_PAGINATED}), route: "/manage/tasks/mytasks"},
+  {query: getQueryName({QUERY_ALL_TASKS_PAGINATED}), route: "/manage/tasks/alltasks"},
+  {query: getQueryName({QUERY_JOB_TASKS_PAGINATED}), route: "/manage/jobs"}
+];
+
+export default refetchRouteMappings;

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

@@ -6,7 +6,8 @@ import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort, statusSort } from "../../utils/sorters";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import VehicleDetailUpdateJobsComponent from "../vehicle-detail-update-jobs/vehicle-detail-update-jobs.component";
 
@@ -67,9 +68,20 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
         text: status,
         value: status
       })),
-      onFilter: (value, record) => value.includes(record.status)
+      onFilter: (value, record) => value.includes(record.status), 
+    },
+    {
+      title: t("jobs.fields.actual_completion"),
+      dataIndex: "actual_completion",
+      key: "actual_completion",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.actual_completion}</DateTimeFormatter>
+      ),
+      sorter: (a, b) => dateSort(a.actual_completion, b.actual_completion),
+      sortOrder:
+        state.sortedInfo.columnKey === "actual_completion" &&
+        state.sortedInfo.order,
     },
-
     {
       title: t("jobs.fields.clm_total"),
       dataIndex: "clm_total",

client/src/graphql/bills.queries.js

@@ -59,9 +59,14 @@ export const QUERY_BILLS_BY_JOBID = gql`
         name
         email
       }
+      tasks {
+        id
+        due_date
+      }
       order_date
       deliver_by
       return
+      returnfrombill
       orderedby
       parts_order_lines {
         id

client/src/graphql/employees.queries.js

@@ -67,6 +67,24 @@ export const QUERY_ACTIVE_EMPLOYEES = gql`
   }
 `;
 
+export const QUERY_ACTIVE_EMPLOYEES_WITH_EMAIL = gql`
+  query QUERY_ACTIVE_EMPLOYEES_WITH_EMAIL {
+    employees(where: {active: {_eq: true}, user_email: {_is_null: false}}) {
+      last_name
+      id
+      first_name
+      employee_number
+      active
+      termination_date
+      hire_date
+      flat_rate
+      rates
+      pin
+      user_email
+    }
+  }
+`;
+
 export const INSERT_EMPLOYEES = gql`
   mutation INSERT_EMPLOYEES($employees: [employees_insert_input!]!) {
     insert_employees(objects: $employees) {

client/src/graphql/jobs-lines.queries.js

@@ -219,6 +219,12 @@ export const UPDATE_JOB_LINE = gql`
         id
         notes
         mod_lbr_ty
+        mod_lb_hrs
+        part_type
+        op_code_desc
+        prt_dsmk_m
+        prt_dsmk_p
+        tax_part
         part_qty
         db_price
         act_price

client/src/graphql/jobs.queries.js

@@ -499,6 +499,11 @@ export const QUERY_JOB_COSTING_DETAILS = gql`
 export const GET_JOB_BY_PK = gql`
   query GET_JOB_BY_PK($id: uuid!) {
     jobs_by_pk(id: $id) {
+      tasks_aggregate(where: { completed: { _eq: false }, deleted: { _eq: false } }) {
+        aggregate {
+          count
+        }
+      }
       actual_completion
       actual_delivery
       actual_in
@@ -1969,19 +1974,19 @@ export const QUERY_JOB_CLOSE_DETAILS = gql`
       kmout
       qb_multiple_payers
       lbr_adjustments
-            payments {
+      payments {
-              amount
+        amount
-              created_at
+        created_at
-              date
+        date
-              exportedat
+        exportedat
-              id
+        id
-              jobid
+        jobid
-              memo
+        memo
-              payer
+        payer
-              paymentnum
+        paymentnum
-              transactionid
+        transactionid
-              type
+        type
-            }
+      }
       joblines(where: { removed: { _eq: false } }, order_by: { line_no: asc }) {
         id
         removed
@@ -1994,7 +1999,7 @@ export const QUERY_JOB_CLOSE_DETAILS = gql`
         db_price
         act_price
         part_qty
-                notes
+        notes
         mod_lbr_ty
         db_hrs
         mod_lb_hrs
@@ -2006,9 +2011,9 @@ export const QUERY_JOB_CLOSE_DETAILS = gql`
         prt_dsmk_p
         convertedtolbr
         convertedtolbr_data
-                act_price_before_ppc
+        act_price_before_ppc
-                sublet_ignored
+        sublet_ignored
-                sublet_completed
+        sublet_completed
       }
     }
   }
@@ -2056,12 +2061,12 @@ export const generate_UPDATE_JOB_KANBAN = (
   }`;
 
   return gql`
-        mutation UPDATE_JOB_KANBAN {
+    mutation UPDATE_JOB_KANBAN {
-            ${oldChildId ? oldChildQuery : ""}
+      ${oldChildId ? oldChildQuery : ""}
-            ${movedId ? movedQuery : ""}
+      ${movedId ? movedQuery : ""}
-            ${newChildId ? newChildQuery : ""}
+      ${newChildId ? newChildQuery : ""}
-        }
+    }
-    `;
+  `;
 };
 
 export const QUERY_JOB_LBR_ADJUSTMENTS = gql`
@@ -2081,6 +2086,34 @@ export const DELETE_JOB = gql`
   }
 `;
 
+export const QUERY_GET_TASKS_JOB_DETAILS_BY_ID = gql`
+  query QUERY_GET_TASKS_JOB_DETAILS_BY_ID($id: uuid!) {
+    jobs_by_pk(id: $id) {
+      id
+      scheduled_delivery
+      scheduled_completion
+      joblines {
+        id
+        line_desc
+      }
+      bills {
+        id
+        vendor {
+          name
+        }
+        invoice_number
+      }
+      parts_orders {
+        id
+        vendor {
+          name
+        }
+        order_number
+      }
+    }
+  }
+`;
+
 export const GET_JOB_FOR_CC_CONTRACT = gql`
   query GET_JOB_FOR_CC_CONTRACT($id: uuid!) {
     jobs_by_pk(id: $id) {
@@ -2238,6 +2271,8 @@ export const GET_JOB_LINE_ORDERS = gql`
     parts_order_lines(where: { job_line_id: { _eq: $joblineid } }) {
       id
       act_price
+      backordered_eta
+      backordered_on
       parts_order {
         id
         order_date

client/src/graphql/owners.queries.js

@@ -67,6 +67,7 @@ export const QUERY_OWNER_BY_ID = gql`
       tax_number
       jobs(order_by: { date_open: desc }) {
         id
+        actual_completion
         ro_number
         clm_no
         status

client/src/graphql/tasks.queries.js

@@ -0,0 +1,383 @@
+import { gql } from "@apollo/client";
+
+export const PARTIAL_TASK_FIELDS = gql`
+  fragment TaskFields on tasks {
+    id
+    created_at
+    updated_at
+    title
+    description
+    deleted
+    deleted_at
+    due_date
+    created_by
+    assigned_to
+    assigned_to_employee {
+      id
+      user_email
+    }
+    completed
+    completed_at
+    remind_at
+    priority
+    job {
+      id
+      ro_number
+      joblines {
+        id
+        line_desc
+      }
+      bills {
+        id
+        vendor {
+          name
+        }
+        invoice_number
+      }
+      parts_orders {
+        id
+        vendor {
+          name
+        }
+        order_number
+      }
+    }
+    jobid
+    jobline {
+      id
+      line_desc
+    }
+    joblineid
+    parts_order {
+      id
+      vendor {
+        name
+      }
+      order_number
+    }
+    partsorderid
+    bill {
+      id
+      vendor {
+        name
+      }
+      invoice_number
+    }
+    billid
+  }
+`;
+
+export const QUERY_GET_TASK_BY_ID = gql`
+  ${PARTIAL_TASK_FIELDS}
+  query QUERY_GET_TASK_BY_ID($id: uuid!) {
+    tasks_by_pk(id: $id) {
+      ...TaskFields
+    }
+  }
+`;
+
+export const QUERY_ALL_TASKS_PAGINATED = gql`
+  ${PARTIAL_TASK_FIELDS}
+  query QUERY_ALL_TASKS_PAGINATED(
+    $offset: Int
+    $limit: Int
+    $bodyshop: uuid!
+    $deleted: Boolean
+    $completed: Boolean
+    $assigned_to: uuid
+    $order: [tasks_order_by!]!
+  ) {
+    tasks(
+      offset: $offset
+      limit: $limit
+      order_by: $order
+      where: {
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        assigned_to: { _eq: $assigned_to }
+        completed: { _eq: $completed }
+      }
+    ) {
+      ...TaskFields
+    }
+    tasks_aggregate(
+      where: {
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        assigned_to: { _eq: $assigned_to }
+        completed: { _eq: $completed }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
+// Query for joblineid
+export const QUERY_JOBLINE_TASKS_PAGINATED = gql`
+  ${PARTIAL_TASK_FIELDS}
+  query QUERY_JOBLINE_TASKS_PAGINATED(
+    $offset: Int
+    $limit: Int
+    $joblineid: uuid!
+    $bodyshop: uuid!
+    $deleted: Boolean
+    $completed: Boolean
+    $assigned_to: uuid
+    $order: [tasks_order_by!]!
+  ) {
+    tasks(
+      offset: $offset
+      limit: $limit
+      order_by: $order
+      where: {
+        joblineid: { _eq: $joblineid }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        assigned_to: { _eq: $assigned_to }
+        completed: { _eq: $completed }
+      }
+    ) {
+      ...TaskFields
+    }
+    tasks_aggregate(
+      where: {
+        joblineid: { _eq: $joblineid }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        assigned_to: { _eq: $assigned_to }
+        completed: { _eq: $completed }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
+// Query for partsorderid
+export const QUERY_PARTSORDER_TASKS_PAGINATED = gql`
+  ${PARTIAL_TASK_FIELDS}
+  query QUERY_PARTSORDER_TASKS_PAGINATED(
+    $offset: Int
+    $limit: Int
+    $partsorderid: uuid!
+    $bodyshop: uuid!
+    $deleted: Boolean
+    $completed: Boolean
+    $assigned_to: uuid
+    $order: [tasks_order_by!]!
+  ) {
+    tasks(
+      offset: $offset
+      limit: $limit
+      order_by: $order
+      where: {
+        partsorderid: { _eq: $partsorderid }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        assigned_to: { _eq: $assigned_to }
+        completed: { _eq: $completed }
+      }
+    ) {
+      ...TaskFields
+    }
+    tasks_aggregate(
+      where: {
+        partsorderid: { _eq: $partsorderid }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        assigned_to: { _eq: $assigned_to }
+        completed: { _eq: $completed }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
+// Query for billid
+export const QUERY_BILL_TASKS_PAGINATED = gql`
+  ${PARTIAL_TASK_FIELDS}
+  query QUERY_BILL_TASKS_PAGINATED(
+    $offset: Int
+    $limit: Int
+    $billid: uuid!
+    $bodyshop: uuid!
+    $deleted: Boolean
+    $completed: Boolean
+    $assigned_to: uuid
+    $order: [tasks_order_by!]!
+  ) {
+    tasks(
+      offset: $offset
+      limit: $limit
+      order_by: $order
+      where: {
+        billid: { _eq: $billid }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        assigned_to: { _eq: $assigned_to }
+        completed: { _eq: $completed }
+      }
+    ) {
+      ...TaskFields
+    }
+    tasks_aggregate(
+      where: {
+        billid: { _eq: $billid }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        assigned_to: { _eq: $assigned_to }
+        completed: { _eq: $completed }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
+// Use the fragment in your queries
+export const QUERY_JOB_TASKS_PAGINATED = gql`
+  ${PARTIAL_TASK_FIELDS}
+  query QUERY_JOB_TASKS_PAGINATED(
+    $offset: Int
+    $limit: Int
+    $jobid: uuid!
+    $bodyshop: uuid!
+    $deleted: Boolean
+    $completed: Boolean
+    $assigned_to: uuid
+    $order: [tasks_order_by!]!
+  ) {
+    tasks(
+      offset: $offset
+      limit: $limit
+      order_by: $order
+      where: {
+        jobid: { _eq: $jobid }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        assigned_to: { _eq: $assigned_to }
+        completed: { _eq: $completed }
+      }
+    ) {
+      ...TaskFields
+    }
+    tasks_aggregate(
+      where: {
+        jobid: { _eq: $jobid }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        assigned_to: { _eq: $assigned_to }
+        completed: { _eq: $completed }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
+export const QUERY_MY_TASKS_PAGINATED = gql`
+  ${PARTIAL_TASK_FIELDS}
+  query QUERY_MY_TASKS_PAGINATED(
+    $offset: Int
+    $limit: Int
+    $assigned_to: uuid!
+    $bodyshop: uuid!
+    $deleted: Boolean
+    $completed: Boolean
+    $order: [tasks_order_by!]!
+  ) {
+    tasks(
+      offset: $offset
+      limit: $limit
+      order_by: $order
+      where: {
+        assigned_to: { _eq: $assigned_to }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        completed: { _eq: $completed }
+      }
+    ) {
+      ...TaskFields
+    }
+    tasks_aggregate(
+      where: {
+        assigned_to: { _eq: $assigned_to }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: $deleted }
+        completed: { _eq: $completed }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
+/**
+ * Toggle task completed mutation
+ * @type {DocumentNode}
+ */
+export const MUTATION_TOGGLE_TASK_COMPLETED = gql`
+  ${PARTIAL_TASK_FIELDS}
+  mutation MUTATION_TOGGLE_TASK_COMPLETED($id: uuid!, $completed: Boolean!, $completed_at: timestamptz) {
+    update_tasks_by_pk(pk_columns: { id: $id }, _set: { completed: $completed, completed_at: $completed_at }) {
+      ...TaskFields
+    }
+  }
+`;
+
+/**
+ * Toggle task deleted mutation
+ * @type {DocumentNode}
+ */
+export const MUTATION_TOGGLE_TASK_DELETED = gql`
+  ${PARTIAL_TASK_FIELDS}
+  mutation MUTATION_TOGGLE_TASK_DELETED($id: uuid!, $deleted: Boolean!, $deleted_at: timestamptz) {
+    update_tasks_by_pk(pk_columns: { id: $id }, _set: { deleted: $deleted, deleted_at: $deleted_at }) {
+      ...TaskFields
+    }
+  }
+`;
+
+/**
+ * Insert new task mutation
+ * @type {DocumentNode}
+ */
+export const MUTATION_INSERT_NEW_TASK = gql`
+  ${PARTIAL_TASK_FIELDS}
+  mutation MUTATION_INSERT_NEW_TASK($taskInput: [tasks_insert_input!]!) {
+    insert_tasks(objects: $taskInput) {
+      returning {
+        ...TaskFields
+      }
+    }
+  }
+`;
+
+/**
+ * Update task mutation
+ * @type {DocumentNode}
+ */
+export const MUTATION_UPDATE_TASK = gql`
+  ${PARTIAL_TASK_FIELDS}
+  mutation MUTATION_UPDATE_TASK($taskId: uuid!, $task: tasks_set_input!) {
+    update_tasks(where: { id: { _eq: $taskId } }, _set: $task) {
+      returning {
+        ...TaskFields
+      }
+    }
+  }
+`;

client/src/graphql/vehicles.queries.js

@@ -30,6 +30,7 @@ export const QUERY_VEHICLE_BY_ID = gql`
       notes
       jobs(order_by: { date_open: desc }) {
         id
+        actual_completion
         ro_number
         ownr_co_nm
         ownr_fn

client/src/pages/jobs-available/jobs-available.page.container.jsx

@@ -51,6 +51,17 @@ export function JobsAvailablePageContainer({ partnerVersion, setBreadcrumbs, set
         {!partnerVersion && (
           <AlertComponent
             type="warning"
+            action={
+              <a
+                href={InstanceRenderManager({
+                  imex: "https://partner.imex.online/Setup.exe",
+                  rome: "https://partner.romeonline.io/Setup.exe",
+                  promanager: "https://dzaenazwrgg60.cloudfront.net/Setup.exe"
+                })}
+              >
+                <Button size="small">{t("general.actions.download")}</Button>
+              </a>
+            }
             message={t("general.messages.partnernotrunning", {
               app: InstanceRenderManager({
                 imex: "$t(titles.imexonline)",

client/src/pages/jobs-close/jobs-close.component.jsx

@@ -41,7 +41,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import JobCloseRoGuardContainer from '../../components/job-close-ro-guard/job-close-ro-guard.container';
+import JobCloseRoGuardContainer from "../../components/job-close-ro-guard/job-close-ro-guard.container";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -120,6 +120,13 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail }) {
         operation: AuditTrailMapping.jobinvoiced(),
         type: "jobinvoiced"
       });
+      if (values.masterbypass) {
+        insertAuditTrail({
+          jobid: job.id,
+          operation: AuditTrailMapping.jobclosedwithbypass(),
+          type: "jobclosedwithbypass"
+        });
+      }
       // history(`/manage/jobs/${job.id}`);
     } else {
       setLoading(false);
@@ -184,7 +191,7 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail }) {
             </Space>
           }
         />
-     <JobCloseRoGuardContainer form={form} job={job} />
+        <JobCloseRoGuardContainer form={form} job={job} />
         <Space wrap direction="vertical" style={{ width: "100%" }}>
           <FormsFieldChanged form={form} />
           {!job.actual_in && job.scheduled_in && <Alert type="warning" message={t("jobs.labels.actual_in_inferred")} />}

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

@@ -20,18 +20,21 @@ export default function JobsCreateComponent({ form }) {
   const steps = [
     {
       title: t("jobs.labels.create.vehicleinfo"),
+      id: "step-job-vehicleinfo",
       content: <JobsCreateVehicleInfoContainer form={form} />,
       validation: !!state.vehicle.new || !!state.vehicle.selectedid || !!state.vehicle.none,
       error: t("vehicles.errors.selectexistingornew")
     },
     {
       title: t("jobs.labels.create.ownerinfo"),
+      id: "step-job-ownerinfo",
       content: <JobsCreateOwnerInfoContainer />,
       validation: !!state.owner.new || !!state.owner.selectedid,
       error: t("owners.errors.selectexistingornew")
     },
     {
       title: t("jobs.labels.create.jobinfo"),
+      id: "step-job-jobinfo",
       content: <JobsCreateJobsInfo form={form} selected={pageIndex === 2} />
     }
   ];

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

@@ -8,7 +8,7 @@ import Icon, {
   SyncOutlined,
   ToolFilled
 } from "@ant-design/icons";
-import { Button, Divider, Form, notification, Space, Tabs } from "antd";
+import { Badge, Button, Divider, Form, notification, Space, Tabs } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 
 import Axios from "axios";
@@ -16,7 +16,7 @@ import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FaHardHat, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
+import { FaHardHat, FaRegStickyNote, FaShieldAlt, FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
@@ -53,14 +53,29 @@ import JobProfileDataWarning from "../../components/job-profile-data-warning/job
 import { DateTimeFormat } from "../../utils/DateFormatter";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../../components/feature-wrapper/feature-wrapper.component";
+import TaskListContainer from "../../components/task-list/task-list.container.jsx";
+import { QUERY_JOB_TASKS_PAGINATED } from "../../graphql/tasks.queries.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
-  setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" })),
+  setPrintCenterContext: (context) =>
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "printCenter"
+      })
+    ),
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });
 
 export function JobsDetailPage({
@@ -69,7 +84,6 @@ export function JobsDetailPage({
   jobRO,
   job,
   mutationUpdateJob,
-  handleSubmit,
   insertAuditTrail,
   refetch
 }) {
@@ -277,6 +291,7 @@ export function JobsDetailPage({
             {
               key: "general",
               icon: <Icon component={FaShieldAlt} />,
+              id: "job-details-general",
               label: t("menus.jobsdetail.general"),
               forceRender: true,
               children: <JobsDetailGeneral job={job} form={form} />
@@ -284,6 +299,7 @@ export function JobsDetailPage({
             {
               key: "repairdata",
               icon: <BarsOutlined />,
+              id: "job-details-repairdata",
               label: t("menus.jobsdetail.repairdata"),
               forceRender: true,
               children: <JobsLinesContainer job={job} joblines={job.joblines} refetch={refetch} form={form} />
@@ -291,18 +307,21 @@ export function JobsDetailPage({
             {
               key: "rates",
               icon: <DollarCircleOutlined />,
+              id: "job-details-rates",
               label: t("menus.jobsdetail.rates"),
               forceRender: true,
               children: <JobsDetailRates job={job} form={form} />
             },
             {
               key: "totals",
+              id: "job-details-totals",
               icon: <DollarCircleOutlined />,
               label: t("menus.jobsdetail.totals"),
               children: <JobsDetailTotals job={job} refetch={refetch} />
             },
             {
               key: "partssublet",
+              id: "job-details-partssublet",
               icon: <ToolFilled />,
               label: HasFeatureAccess({ featureName: "bills", bodyshop })
                 ? t("menus.jobsdetail.partssublet")
@@ -317,6 +336,7 @@ export function JobsDetailPage({
               ? [
                   {
                     key: "labor",
+                    id: "job-details-labor",
                     icon: <Icon component={FaHardHat} />,
                     label: t("menus.jobsdetail.labor"),
                     children: <JobsDetailLaborContainer job={job} jobId={job.id} />
@@ -326,11 +346,13 @@ export function JobsDetailPage({
             {
               key: "lifecycle",
               icon: <BarsOutlined />,
+              id: "job-details-lifecycle",
               label: t("menus.jobsdetail.lifecycle"),
               children: <JobLifecycleComponent job={job} statuses={bodyshop.md_ro_statuses} />
             },
             {
               key: "dates",
+              id: "job-details-dates",
               icon: <CalendarFilled />,
               label: t("menus.jobsdetail.dates"),
               forceRender: true,
@@ -344,6 +366,7 @@ export function JobsDetailPage({
               ? [
                   {
                     key: "documents",
+                    id: "job-details-documents",
                     icon: <FileImageFilled />,
                     label: t("jobs.labels.documents"),
                     children: bodyshop.uselocalmediaserver ? (
@@ -356,6 +379,7 @@ export function JobsDetailPage({
               : []),
             {
               key: "notes",
+              id: "job-details-notes",
               icon: <Icon component={FaRegStickyNote} />,
               label: t("jobs.labels.notes"),
               children: <JobNotesContainer jobId={job.id} />
@@ -363,8 +387,29 @@ export function JobsDetailPage({
             {
               key: "audit",
               icon: <HistoryOutlined />,
+              id: "job-details-audit",
               label: t("jobs.labels.audit"),
               children: <JobAuditTrail jobId={job.id} />
+            },
+            {
+              key: "tasks",
+              icon: <FaTasks />,
+              id: "job-details-tasks",
+              label: (
+                <Space direction="horizontal">
+                  {t("jobs.labels.tasks")}
+                  {job.tasks_aggregate.aggregate.count > 0 && <Badge count={job.tasks_aggregate.aggregate.count} />}
+                </Space>
+              ),
+              children: (
+                <TaskListContainer
+                  relationshipType={"jobid"}
+                  relationshipId={job.id}
+                  query={{ QUERY_JOB_TASKS_PAGINATED }}
+                  titleTranslation="tasks.titles.job_tasks"
+                  showRo={false}
+                />
+              )
             }
           ]}
         />

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

@@ -1,4 +1,4 @@
-import { FloatButton, Layout, Spin, Collapse, Button, Space, Tag } from "antd";
+import { FloatButton, Layout, Spin } from "antd";
 // import preval from "preval.macro";
 import React, { lazy, Suspense, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -30,8 +30,8 @@ import "./manage.page.styles.scss";
 
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 
-const CardPaymentModalContainer = lazy(() =>
+const CardPaymentModalContainer = lazy(
-  import("../../components/card-payment-modal/card-payment-modal.container.")
+  () => import("../../components/card-payment-modal/card-payment-modal.container.")
 );
 
 const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page.container"));
@@ -59,8 +59,8 @@ const JobCostingModal = lazy(() => import("../../components/job-costing-modal/jo
 const ReportCenterModal = lazy(() => import("../../components/report-center-modal/report-center-modal.container"));
 const BillEnterModalContainer = lazy(() => import("../../components/bill-enter-modal/bill-enter-modal.container"));
 const TimeTicketModalContainer = lazy(() => import("../../components/time-ticket-modal/time-ticket-modal.container"));
-const TimeTicketModalTask = lazy(() =>
+const TimeTicketModalTask = lazy(
-  import("../../components/time-ticket-task-modal/time-ticket-task-modal.container")
+  () => import("../../components/time-ticket-task-modal/time-ticket-task-modal.container")
 );
 const PaymentModalContainer = lazy(() => import("../../components/payment-modal/payment-modal.container"));
 const ProductionListPage = lazy(() => import("../production-list/production-list.container"));
@@ -97,7 +97,10 @@ const Dms = lazy(() => import("../dms/dms.container"));
 const DmsPayables = lazy(() => import("../dms-payables/dms-payables.container"));
 const ManageRootPage = lazy(() => import("../manage-root/manage-root.page.container"));
 const TtApprovals = lazy(() => import("../tt-approvals/tt-approvals.page.container"));
+const MyTasksPage = lazy(() => import("../tasks/myTasksPageContainer.jsx"));
+const AllTasksPage = lazy(() => import("../tasks/allTasksPageContainer.jsx"));
 
+const TaskUpsertModalContainer = lazy(() => import("../../components/task-upsert-modal/task-upsert-modal.container"));
 const { Content, Footer } = Layout;
 
 const mapStateToProps = createStructuredSelector({
@@ -114,7 +117,6 @@ const mapDispatchToProps = (dispatch) => ({
 export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyRideFinished }) {
   const { t } = useTranslation();
   const [chatVisible] = useState(false);
-  const [tours, setTours] = useState([]);
 
   useEffect(() => {
     const widgetId = InstanceRenderManager({
@@ -147,12 +149,10 @@ export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoy
           })}
         />
       }
-      This
     >
       <PaymentModalContainer />
-
       <CardPaymentModalContainer />
-
+      <TaskUpsertModalContainer />
       <BreadCrumbs />
       <BillEnterModalContainer />
       <JobCostingModal />
@@ -252,6 +252,22 @@ export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoy
             </Suspense>
           }
         />
+        <Route
+          path="/tasks/mytasks"
+          element={
+            <Suspense fallback={<Spin />}>
+              <MyTasksPage />
+            </Suspense>
+          }
+        />
+        <Route
+          path="/tasks/alltasks"
+          element={
+            <Suspense fallback={<Spin />}>
+              <AllTasksPage />
+            </Suspense>
+          }
+        />
         <Route
           path="/inventory/"
           element={
@@ -613,28 +629,6 @@ export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoy
               Disclaimer & Notices
             </Link>
           </div>
-          {InstanceRenderManager({
-            promanager: (
-              <Collapse>
-                <Collapse.Panel header="DEVELOPMENT ONLY - ProductFruits Tours">
-                  <Space>
-                    <Button
-                      onClick={async () => {
-                        setTours(await window.productFruits.api.tours.getTours());
-                      }}
-                    >
-                      Get Tours
-                    </Button>
-                    {tours.map((tour) => (
-                      <Tag key={tour.id} onClick={() => window.productFruits.api.tours.tryStartTour(tour.id)}>
-                        {tour.name}
-                      </Tag>
-                    ))}
-                  </Space>
-                </Collapse.Panel>
-              </Collapse>
-            )
-          })}
         </Footer>
       </Layout>
     </>

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

@@ -72,10 +72,17 @@ export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
     });
   }
 
-  items.push({
+  InstanceRenderManager({
-    key: "licensing",
+    executeFunction: true,
-    label: t("bodyshop.labels.licensing"),
+    args: [],
-    children: <ShopInfoUsersComponent />
+    imex: () => {
+      items.push({
+        key: "licensing",
+        label: t("bodyshop.labels.licensing"),
+        children: <ShopInfoUsersComponent />
+      });
+    },
+    rome: "USE_IMEX"
   });
 
   if (HasFeatureAccess({ featureName: "csi", bodyshop })) {

client/src/pages/tasks/allTasksPageContainer.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import TasksPageComponent from "./tasks.page.component";
+import queryString from "query-string";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
+import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
+import TaskPageTypes from "./taskPageTypes.jsx";
+import { setModalContext } from "../../redux/modals/modals.actions.js";
+import { useLocation } from "react-router-dom";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
+});
+
+export function AllTasksPageContainer({ setBreadcrumbs, setSelectedHeader, setTaskUpsertContext }) {
+  const { t } = useTranslation();
+  const searchParams = queryString.parse(useLocation().search);
+  useEffect(() => {
+    document.title = t("titles.all_tasks", {
+      app: InstanceRenderManager({
+        imex: "$t(titles.imexonline)",
+        rome: "$t(titles.romeonline)",
+        promanager: "$t(titles.promanager)"
+      })
+    });
+    setSelectedHeader("all_tasks");
+    setBreadcrumbs([
+      {
+        link: "/manage/tasks/alltasks",
+        label: t("titles.bc.all_tasks")
+      }
+    ]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
+
+  // This takes care of the ability to deep link a task from the URL (Dispatches the modal)
+  useEffect(() => {
+    // Check for a query string in the URL
+    const urlParams = new URLSearchParams(searchParams);
+    const taskId = urlParams.get("taskid");
+    if (taskId) {
+      setTaskUpsertContext({
+        context: {
+          taskId
+        }
+      });
+      urlParams.delete("taskid");
+    }
+  }, [setTaskUpsertContext, searchParams]);
+
+  return <TasksPageComponent type={TaskPageTypes.ALL_TASKS} />;
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AllTasksPageContainer);

client/src/pages/tasks/myTasksPageContainer.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import TasksPageComponent from "./tasks.page.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
+import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
+import TaskPageTypes from "./taskPageTypes.jsx";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key))
+});
+
+export function MyTasksPageContainer({ setBreadcrumbs, setSelectedHeader }) {
+  const { t } = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.my_tasks", {
+      app: InstanceRenderManager({
+        imex: "$t(titles.imexonline)",
+        rome: "$t(titles.romeonline)",
+        promanager: "$t(titles.promanager)"
+      })
+    });
+    setSelectedHeader("my_tasks");
+    setBreadcrumbs([
+      {
+        link: "/manage/tasks/mytasks",
+        label: t("titles.bc.my_tasks")
+      }
+    ]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
+
+  return <TasksPageComponent type={TaskPageTypes.MY_TASKS} />;
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MyTasksPageContainer);

client/src/pages/tasks/taskPageTypes.jsx

@@ -0,0 +1,6 @@
+export const TaskPageTypes = {
+  MY_TASKS: "myTasks",
+  ALL_TASKS: "allTasks"
+};
+
+export default TaskPageTypes;

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

@@ -0,0 +1,41 @@
+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";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
+import { connect } from "react-redux";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TasksPageComponent);
+
+export function TasksPageComponent({ bodyshop, currentUser, type }) {
+  switch (type) {
+    case taskPageTypes.MY_TASKS:
+      return (
+        <TaskListContainer
+          onlyMine={true}
+          relationshipId={bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id}
+          relationshipType={"assigned_to"}
+          query={{ QUERY_MY_TASKS_PAGINATED }}
+          titleTranslation={"tasks.titles.my_tasks"}
+          disableJobRefetch={true}
+        />
+      );
+    case taskPageTypes.ALL_TASKS:
+      return (
+        <TaskListContainer
+          query={{ QUERY_ALL_TASKS_PAGINATED }}
+          titleTranslation={"tasks.titles.all_tasks"}
+          disableJobRefetch={true}
+        />
+      );
+    default:
+      return <></>;
+  }
+}

client/src/redux/application/application.sagas.js

@@ -111,7 +111,12 @@ export function* calculateScheduleLoad({ payload: end }) {
           (load[itemDate].allHoursIn || 0) +
           item.labhrs.aggregate.sum.mod_lb_hrs +
           item.larhrs.aggregate.sum.mod_lb_hrs;
-
+        load[itemDate].allHoursInBody =
+          (load[itemDate].allHoursInBody || 0) +
+          item.labhrs.aggregate.sum.mod_lb_hrs;
+        load[itemDate].allHoursInRefinish =
+          (load[itemDate].allHoursInRefinish || 0) +
+          item.larhrs.aggregate.sum.mod_lb_hrs;
         //If the job hasn't already arrived, add it to the jobs in list.
         // Make sure it also hasn't already been completed, or isn't an in and out job.
         //This prevents the duplicate counting.
@@ -119,7 +124,15 @@ export function* calculateScheduleLoad({ payload: end }) {
         if (AddJobForSchedulingCalc) {
           load[itemDate].jobsIn.push(item);
           load[itemDate].hoursIn =
-            (load[itemDate].hoursIn || 0) + item.labhrs.aggregate.sum.mod_lb_hrs + item.larhrs.aggregate.sum.mod_lb_hrs;
+            (load[itemDate].hoursIn || 0) +
+            item.labhrs.aggregate.sum.mod_lb_hrs +
+            item.larhrs.aggregate.sum.mod_lb_hrs;
+          load[itemDate].hoursInBody =
+            (load[itemDate].hoursInBody || 0) +
+            item.labhrs.aggregate.sum.mod_lb_hrs;
+          load[itemDate].hoursInRefinish =
+            (load[itemDate].hoursInRefinish || 0) +
+            item.larhrs.aggregate.sum.mod_lb_hrs;
         }
       } else {
         load[itemDate] = {
@@ -127,10 +140,21 @@ export function* calculateScheduleLoad({ payload: end }) {
           jobsIn: AddJobForSchedulingCalc ? [item] : [], //Same as above, only add it if it isn't already in production.
           jobsOut: [],
           allJobsOut: [],
-          allHoursIn: item.labhrs.aggregate.sum.mod_lb_hrs + item.larhrs.aggregate.sum.mod_lb_hrs,
+          allHoursIn:
+            item.labhrs.aggregate.sum.mod_lb_hrs +
+            item.larhrs.aggregate.sum.mod_lb_hrs,
+          allHoursInBody: item.labhrs.aggregate.sum.mod_lb_hrs,
+          allHoursInRefinish: item.larhrs.aggregate.sum.mod_lb_hrs,
           hoursIn: AddJobForSchedulingCalc
-            ? item.labhrs.aggregate.sum.mod_lb_hrs + item.larhrs.aggregate.sum.mod_lb_hrs
+            ? item.labhrs.aggregate.sum.mod_lb_hrs +
-            : 0
+              item.larhrs.aggregate.sum.mod_lb_hrs
+            : 0,
+          hoursInBody: AddJobForSchedulingCalc
+            ? item.labhrs.aggregate.sum.mod_lb_hrs
+            : 0,
+          hoursInRefinish: AddJobForSchedulingCalc
+            ? item.larhrs.aggregate.sum.mod_lb_hrs
+            : 0,
         };
       }
     });
@@ -151,6 +175,12 @@ export function* calculateScheduleLoad({ payload: end }) {
           (load[itemDate].allHoursOut || 0) +
           item.labhrs.aggregate.sum.mod_lb_hrs +
           item.larhrs.aggregate.sum.mod_lb_hrs;
+        load[itemDate].allHoursOutBody =
+          (load[itemDate].allHoursOutBody || 0) +
+          item.labhrs.aggregate.sum.mod_lb_hrs;
+        load[itemDate].allHoursOutRefinish =
+          (load[itemDate].allHoursOutRefinish || 0) +
+          item.larhrs.aggregate.sum.mod_lb_hrs;
         //Add only the jobs that are still in production to get rid of.
         //If it's not in production, we'd subtract unnecessarily.
         load[itemDate].allJobsOut.push(item);
@@ -161,6 +191,12 @@ export function* calculateScheduleLoad({ payload: end }) {
             (load[itemDate].hoursOut || 0) +
             item.labhrs.aggregate.sum.mod_lb_hrs +
             item.larhrs.aggregate.sum.mod_lb_hrs;
+          load[itemDate].hoursOutBody =
+            (load[itemDate].hoursOutBody || 0) +
+            item.labhrs.aggregate.sum.mod_lb_hrs;
+          load[itemDate].hoursOutRefinish =
+            (load[itemDate].hoursOutRefinish || 0) +
+            item.larhrs.aggregate.sum.mod_lb_hrs;
         }
       } else {
         load[itemDate] = {
@@ -169,7 +205,11 @@ export function* calculateScheduleLoad({ payload: end }) {
           hoursOut: AddJobForSchedulingCalc
             ? item.labhrs.aggregate.sum.mod_lb_hrs + item.larhrs.aggregate.sum.mod_lb_hrs
             : 0,
-          allHoursOut: item.labhrs.aggregate.sum.mod_lb_hrs + item.larhrs.aggregate.sum.mod_lb_hrs
+          allHoursOut:
+            item.labhrs.aggregate.sum.mod_lb_hrs +
+            item.larhrs.aggregate.sum.mod_lb_hrs,
+          allHoursOutBody: item.labhrs.aggregate.sum.mod_lb_hrs,
+          allHoursOutRefinish: item.larhrs.aggregate.sum.mod_lb_hrs,
         };
       }
     });

client/src/redux/email/email.reducer.js

@@ -8,7 +8,8 @@ const INITIAL_STATE = {
         name: "ShopName",
         address: InstanceRenderManager({
           imex: "noreply@iemx.online",
-          rome: "noreply@romeonline.io"
+          rome: "noreply@romeonline.io",
+          promanager: "noreply@promanager.web-est.com"
         })
       },
       to: null,

client/src/redux/modals/modals.reducer.js

@@ -13,6 +13,7 @@ const INITIAL_STATE = {
   billEnter: { ...baseModal },
   courtesyCarReturn: { ...baseModal },
   noteUpsert: { ...baseModal },
+  taskUpsert: { ...baseModal },
   schedule: { ...baseModal },
   partsOrder: { ...baseModal },
   timeTicket: { ...baseModal },

client/src/redux/modals/modals.selectors.js

@@ -10,6 +10,8 @@ export const selectCourtesyCarReturn = createSelector([selectModals], (modals) =
 
 export const selectNoteUpsert = createSelector([selectModals], (modals) => modals.noteUpsert);
 
+export const selectTaskUpsert = createSelector([selectModals], (modals) => modals.taskUpsert);
+
 export const selectSchedule = createSelector([selectModals], (modals) => modals.schedule);
 
 export const selectPartsOrder = createSelector([selectModals], (modals) => modals.partsOrder);

client/src/redux/user/user.sagas.js

@@ -15,6 +15,7 @@ import { getToken } from "firebase/messaging";
 import i18next from "i18next";
 import LogRocket from "logrocket";
 import { all, call, delay, put, select, takeLatest } from "redux-saga/effects";
+import { Userpilot } from "userpilot";
 import { factory } from "../../App/App.container";
 import {
   analytics,
@@ -25,6 +26,10 @@ import {
   messaging,
   updateCurrentUser
 } from "../../firebase/firebase.utils";
+import { QUERY_EULA } from "../../graphql/bodyshop.queries";
+import client from "../../utils/GraphQLClient";
+import day from "../../utils/day";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import {
   checkInstanceId,
   sendPasswordResetFailure,
@@ -43,11 +48,6 @@ import {
   validatePasswordResetSuccess
 } from "./user.actions";
 import UserActionTypes from "./user.types";
-import client from "../../utils/GraphQLClient";
-import { QUERY_EULA } from "../../graphql/bodyshop.queries";
-import day from "../../utils/day";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import { Userpilot } from "userpilot";
 
 const fpPromise = FingerprintJS.load();
 
@@ -310,10 +310,41 @@ export function* SetAuthLevelFromShopDetails({ payload }) {
       updateUserDetailsSuccess(authRecord[0] ? { validemail: authRecord[0].user.validemail } : { validemail: false })
     );
 
+    const user = yield select((state) => state.user.currentUser);
     if (payload.features.singleDeviceOnly) {
-      const user = yield select((state) => state.user.currentUser);
+      if (
+        !(
+          user.email.includes("@imex.") ||
+          user.email.includes("@rome.") ||
+          user.email.includes("@rometech.") ||
+          user.email.includes("@promanager.")
+        )
+      )
+        yield put(setInstanceId(user.uid));
+    }
 
-      if (!(user.email.includes("@imex.") || user.email.includes("@rome."))) yield put(setInstanceId(user.uid));
+    //For Rome, check to make sure it's not a PM shop.
+    try {
+      InstanceRenderManager({
+        executeFunction: true,
+        args: [],
+        rome: () => {
+          if (
+            payload.imexshopid.toLowerCase().startsWith("pm_") &&
+            !(
+              user.email.includes("@imex.") ||
+              user.email.includes("@rome.") ||
+              user.email.includes("@rometech.") ||
+              user.email.includes("@promanager.")
+            )
+          ) {
+            throw new Error("You are not authorized to use this application.");
+          }
+        },
+        promanager: () => {}
+      });
+    } catch (error) {
+      yield put(setInstanceConflict());
     }
 
     try {

client/src/translations/en_us/common.json

@@ -116,6 +116,7 @@
 				"jobassignmentchange": "Employee {{name}} assigned to {{operation}}",
 				"jobassignmentremoved": "Employee assignment removed for {{operation}}",
 				"jobchecklist": "Checklist type \"{{type}}\" completed.  In production set to {{inproduction}}.  Status set to {{status}}.",
+				"jobclosedwithbypass": "Job was invoiced using the master bypass password. ",
 				"jobconverted": "Job converted and assigned number {{ro_number}}.",
 				"jobdelivery": "Job intake completed. Status set to {{status}}. Actual completion is {{actual_completion}}.",
 				"jobexported": "",
@@ -134,7 +135,13 @@
 				"jobstatuschange": "Job status changed to {{status}}.",
 				"jobsupplement": "Job supplement imported.",
 				"jobsuspend": "Suspend Toggle set to {{status}}",
-				"jobvoid": "Job has been voided."
+				"jobvoid": "Job has been voided.",
+				"tasks_completed": "Task '{{title}}' completed by {{completedBy}}",
+				"tasks_created": "Task '{{title}}' created by {{createdBy}}",
+				"tasks_deleted": "Task '{{title}}' deleted by {{deletedBy}}",
+				"tasks_uncompleted": "Task '{{title}}' uncompleted by {{uncompletedBy}}",
+				"tasks_undeleted": "Task '{{title}}' undeleted by {{undeletedBy}}",
+				"tasks_updated": "Task '{{title}}' updated by {{updatedBy}}"
 			}
 		},
 		"billlines": {
@@ -223,11 +230,12 @@
 				"markexported": "Mark Exported",
 				"markforreexport": "Mark for Re-export",
 				"new": "New Bill",
-				"nobilllines": "This part has not yet been recieved.",
+				"nobilllines": "",
 				"noneselected": "No bill selected.",
 				"onlycmforinvoiced": "Only credit memos can be entered for any Job that has been invoiced, exported, or voided.",
 				"printlabels": "Print Labels",
 				"retailtotal": "Bills Retail Total",
+				"returnfrombill": "Return From Bill",
 				"savewithdiscrepancy": "You are about to save this bill with a discrepancy.  The system will continue to use the calculated amount using the bill lines.  Press cancel to return to the bill.",
 				"state_tax": "State Tax",
 				"subtotal": "Subtotal",
@@ -858,10 +866,11 @@
 			},
 			"status": {
 				"in": "Available",
-				"inservice": "In Service",
+				"inservice": "Service/Maintenance",
 				"leasereturn": "Lease Returned",
 				"out": "Rented",
-				"sold": "Sold"
+				"sold": "Sold",
+				"unavailable": "Unavailable"
 			},
 			"successes": {
 				"saved": "Courtesy Car saved successfully."
@@ -931,7 +940,8 @@
 				"scheduledindate": "Sheduled In Today: {{date}}",
 				"scheduledintoday": "Sheduled In Today",
 				"scheduledoutdate": "Sheduled Out Today: {{date}}",
-				"scheduledouttoday": "Sheduled Out Today"
+				"scheduledouttoday": "Sheduled Out Today",
+				"tasks": "Tasks"
 			}
 		},
 		"dms": {
@@ -1126,6 +1136,7 @@
 				"delete": "Delete",
 				"deleteall": "Delete All",
 				"deselectall": "Deselect All",
+				"download": "Download",
 				"edit": "Edit",
 				"login": "Login",
 				"print": "Print",
@@ -1351,6 +1362,7 @@
 				"amount": "Amount",
 				"dateOfPayment": "Date of Payment",
 				"descriptions": "Payment Details",
+				"hint": "Hint",
 				"payer": "Payer",
 				"payername": "Payer Name",
 				"paymentid": "Payment Reference ID",
@@ -1541,6 +1553,7 @@
 				"voiding": "Error voiding Job.  {{error}}"
 			},
 			"fields": {
+				"active_tasks": "Active Tasks",
 				"actual_completion": "Actual Completion",
 				"actual_delivery": "Actual Delivery",
 				"actual_in": "Actual In",
@@ -1975,7 +1988,7 @@
 				"outstanding_ar": "A balance is outstanding on this RO. Payments can still be entered when the job is closed. ",
 				"outstanding_credit_memos": "Outstanding credit memos have not been entered against this job. Credit Memos may still be posted once the job is closed.",
 				"outstanding_ppd": "There are outstanding PPDs that may not have been synced back to the estimate.",
-				"outstanding_reconciliation_discrep": "At least one discrepancy is not 0. This may indicate that this job is not properly reconciled and should not be closed.",
+				"outstanding_reconciliation_discrep": "At least one discrepancy is not $0. This may indicate that this job is not properly reconciled and should not be closed.",
 				"outstanding_sublets": "There are sublet lines on the job which have not been marked as completed. ",
 				"outstandinghours": "There are outstanding hours on the job that have not been paid or have been overpaid.",
 				"override_header": "Override estimate header on import?",
@@ -2004,6 +2017,7 @@
 				"ppc": "This line contains a part price change.",
 				"ppdnotexported": "PPDs not Exported",
 				"profileadjustments": "Profile Disc./Mkup",
+				"profitbypassrequired": "Minimum gross profit requirements have not been met.",
 				"profits": "Job Profits",
 				"prt_dsmk_total": "Line Item Adjustment",
 				"rates": "Rates",
@@ -2025,12 +2039,12 @@
 				"remove_from_ar": "Remove from AR",
 				"returntotals": "Return Totals",
 				"ro_guard": {
-					"eforce_profit": "Profit margins enforced.",
 					"enforce_ar": "AR collection enforced.",
 					"enforce_bills": "Bill discrepancy enforced.",
 					"enforce_cm": "Credit memo entry enforced.",
 					"enforce_labor": "Labor allocations enforced.",
 					"enforce_ppd": "PPD sync enforced.",
+					"enforce_profit": "Profit marginsenforced.",
 					"enforce_sublet": "Sublet completion enforced.",
 					"enforce_validation": "Master Bypass Required: {{message}}",
 					"enforced": "This check has been enforced by your shop manager. Enter the master bypass password to close the Job."
@@ -2053,6 +2067,7 @@
 				"supplementnote": "The Job had a supplement imported.",
 				"suspended": "SUSPENDED",
 				"suspense": "Suspense",
+				"tasks": "Tasks",
 				"threshhold": "Max Threshold: ${{amount}}",
 				"total_cost": "Total Cost",
 				"total_cust_payable": "Total Customer Amount Payable",
@@ -2150,6 +2165,7 @@
 				"accounting-payments": "Payments",
 				"accounting-receivables": "Receivables",
 				"activejobs": "Active Jobs",
+				"all_tasks": "All Tasks",
 				"alljobs": "All Jobs",
 				"allpayments": "All Payments",
 				"availablejobs": "Available Jobs",
@@ -2158,6 +2174,7 @@
 				"courtesycars-all": "All Courtesy Cars",
 				"courtesycars-contracts": "Contracts",
 				"courtesycars-newcontract": "New Contract",
+				"create_task": "Create Task",
 				"customers": "Customers",
 				"dashboard": "Dashboard",
 				"enterbills": "Enter Bills",
@@ -2170,6 +2187,7 @@
 				"home": "Home",
 				"inventory": "Inventory",
 				"jobs": "Jobs",
+				"my_tasks": "My Tasks",
 				"newjob": "Create New Job",
 				"owners": "Owners",
 				"parts-queue": "Parts Queue",
@@ -2196,6 +2214,7 @@
 				"shop_csi": "CSI",
 				"shop_templates": "Templates",
 				"shop_vendors": "Vendors",
+				"tasks": "Tasks",
 				"temporarydocs": "Temporary Documents",
 				"timetickets": "Time Tickets",
 				"ttapprovals": "Time Ticket Approvals",
@@ -2389,6 +2408,7 @@
 				"percent_accepted": "% Accepted"
 			},
 			"labels": {
+				"notyetdispatched": "This part has not been dispatched.",
 				"parts_dispatch": "Parts Dispatch"
 			}
 		},
@@ -2505,6 +2525,7 @@
 				"markexported": "Payment(s) marked exported.",
 				"markreexported": "Payment marked for re-export successfully",
 				"payment": "Payment created successfully. ",
+				"paymentupdate": "Payment updated successfully. ",
 				"stripe": "Credit card transaction charged successfully."
 			}
 		},
@@ -2606,6 +2627,7 @@
 				"job_costing_ro": "Job Costing",
 				"job_lifecycle_ro": "Job Lifecycle",
 				"job_notes": "Job Notes",
+				"job_tasks": "Job Tasks",
 				"key_tag": "Key Tag",
 				"labels": {
 					"count": "Count",
@@ -2806,6 +2828,7 @@
 					"parts_orders": "Parts Orders",
 					"payments": "Payments",
 					"scoreboard": "Scoreboard",
+					"tasks": "Tasks",
 					"timetickets": "Timetickets"
 				},
 				"vendor": "Vendor"
@@ -2921,6 +2944,8 @@
 				"scoreboard_detail": "Scoreboard Detail",
 				"scoreboard_summary": "Scoreboard Summary",
 				"supplement_ratio_ins_co": "Supplement Ratio by Source",
+				"tasks_date": "Tasks by Date",
+				"tasks_date_employee": "Employee Tasks by Date",
 				"thank_you_date": "Thank You Letters",
 				"timetickets": "Time Tickets",
 				"timetickets_employee": "Employee Time Tickets",
@@ -3000,6 +3025,92 @@
 				"updated": "Scoreboard updated."
 			}
 		},
+		"tasks": {
+			"actions": {
+				"edit": "Edit Task",
+				"new": "New Task"
+			},
+			"buttons": {
+				"allTasks": "All",
+				"complete": "Toggle Complete",
+				"create": "Create Task",
+				"delete": "Toggle Delete",
+				"edit": "Edit",
+				"myTasks": "Mine",
+				"refresh": "Refresh"
+			},
+			"date_presets": {
+				"completion": "Completion",
+				"day": "Day",
+				"days": "Days",
+				"delivery": "Delivery",
+				"next_week": "Next Week",
+				"one_month": "One Month",
+				"three_months": "Three Months",
+				"three_weeks": "Three Weeks",
+				"today": "Today",
+				"tomorrow": "Tomorrow",
+				"two_weeks": "Two Weeks"
+			},
+			"failures": {
+				"completed": "Failed to toggle Task completion.",
+				"created": "Failed to create Task.",
+				"deleted": "Failed to toggle Task deletion.",
+				"updated": "Failed to update Task."
+			},
+			"fields": {
+				"actions": "Actions",
+				"assigned_to": "Assigned To",
+				"bill": "Bill",
+				"billid": "Bill",
+				"completed": "Completed",
+				"created_at": "Created At",
+				"description": "Description",
+				"due_date": "Due Date",
+				"job": {
+					"ro_number": "RO #"
+				},
+				"jobid": "Job",
+				"jobline": "Job Line",
+				"joblineid": "Job Line",
+				"parts_order": "Parts Order",
+				"partsorderid": "Parts Order",
+				"priorities": {
+					"high": "High",
+					"low": "Low",
+					"medium": "Medium"
+				},
+				"priority": "Priority",
+				"remind_at": "Remind At",
+				"title": "Title"
+			},
+			"placeholders": {
+				"assigned_to": "Select an Employee",
+				"billid": "Select a Bill",
+				"description": "Enter a description",
+				"jobid": "Select a Job",
+				"joblineid": "Select a Job Line",
+				"partsorderid": "Select a Parts Order"
+			},
+			"successes": {
+				"completed": "Toggled Task completion successfully.",
+				"created": "Task created successfully.",
+				"deleted": "Toggled Task deletion successfully.",
+				"updated": "Task updated successfully."
+			},
+			"titles": {
+				"all_tasks": "All Tasks",
+				"completed": "Completed Tasks",
+				"deleted": "Deleted Tasks",
+				"job_tasks": "Job Tasks",
+				"mine": "My Tasks",
+				"my_tasks": "My Tasks"
+			},
+			"validation": {
+				"due_at_error_message": "The due date must be in the future!",
+				"remind_at_error_message": "The reminder date and time must be at least 30 minutes in the future!"
+			}
+		},
 		"tech": {
 			"fields": {
 				"employeeid": "Employee ID",
@@ -3104,11 +3215,13 @@
 			"accounting-payables": "Payables | {{app}}",
 			"accounting-payments": "Payments | {{app}}",
 			"accounting-receivables": "Receivables | {{app}}",
+			"all_tasks": "All Tasks",
 			"app": "",
 			"bc": {
 				"accounting-payables": "Payables",
 				"accounting-payments": "Payments",
 				"accounting-receivables": "Receivables",
+				"all_tasks": "All Tasks",
 				"availablejobs": "Available Jobs",
 				"bills-list": "Bills",
 				"contracts": "Contracts",
@@ -3132,6 +3245,7 @@
 				"jobs-intake": "Intake",
 				"jobs-new": "Create a New Job",
 				"jobs-ready": "Ready Jobs",
+				"my_tasks": "My Tasks",
 				"owner-detail": "{{name}}",
 				"owners": "Owners",
 				"parts-queue": "Parts Queue",
@@ -3146,6 +3260,7 @@
 				"shop-csi": "CSI Responses",
 				"shop-templates": "Shop Templates",
 				"shop-vendors": "Vendors",
+				"tasks": "Tasks",
 				"temporarydocs": "Temporary Documents",
 				"timetickets": "Time Tickets",
 				"ttapprovals": "Time Ticket Approvals",
@@ -3176,6 +3291,7 @@
 			"jobsdetail": "Job {{ro_number}} | {{app}}",
 			"jobsdocuments": "Job Documents {{ro_number}} | {{app}}",
 			"manageroot": "Home | {{app}}",
+			"my_tasks": "My Tasks",
 			"owners": "All Owners | {{app}}",
 			"owners-detail": "{{name}} | {{app}}",
 			"parts-queue": "Parts Queue | {{app}}",
@@ -3195,6 +3311,7 @@
 			"shop-csi": "CSI Responses | {{app}}",
 			"shop-templates": "Shop Templates | {{app}}",
 			"shop_vendors": "Vendors | {{app}}",
+			"tasks": "Tasks",
 			"techconsole": "Technician Console | {{app}}",
 			"techjobclock": "Technician Job Clock | {{app}}",
 			"techjoblookup": "Technician Job Lookup | {{app}}",

client/src/translations/es/common.json

@@ -116,6 +116,7 @@
 				"jobassignmentchange": "",
 				"jobassignmentremoved": "",
 				"jobchecklist": "",
+				"jobclosedwithbypass": "",
 				"jobconverted": "",
 				"jobdelivery": "",
 				"jobexported": "",
@@ -134,7 +135,13 @@
 				"jobstatuschange": "",
 				"jobsupplement": "",
 				"jobsuspend": "",
-				"jobvoid": ""
+				"jobvoid": "",
+				"tasks_completed": "",
+				"tasks_created": "",
+				"tasks_deleted": "",
+				"tasks_uncompleted": "",
+				"tasks_undeleted": "",
+				"tasks_updated": ""
 			}
 		},
 		"billlines": {
@@ -223,10 +230,12 @@
 				"markexported": "",
 				"markforreexport": "",
 				"new": "",
+				"nobilllines": "",
 				"noneselected": "",
 				"onlycmforinvoiced": "",
 				"printlabels": "",
 				"retailtotal": "",
+				"returnfrombill": "",
 				"savewithdiscrepancy": "",
 				"state_tax": "",
 				"subtotal": "",
@@ -860,7 +869,8 @@
 				"inservice": "",
 				"leasereturn": "",
 				"out": "",
-				"sold": ""
+				"sold": "",
+				"unavailable": ""
 			},
 			"successes": {
 				"saved": ""
@@ -930,7 +940,8 @@
 				"scheduledindate": "",
 				"scheduledintoday": "",
 				"scheduledoutdate": "",
-				"scheduledouttoday": ""
+				"scheduledouttoday": "",
+				"tasks": ""
 			}
 		},
 		"dms": {
@@ -1125,6 +1136,7 @@
 				"delete": "Borrar",
 				"deleteall": "",
 				"deselectall": "",
+				"download": "",
 				"edit": "Editar",
 				"login": "",
 				"print": "",
@@ -1350,6 +1362,7 @@
 				"amount": "",
 				"dateOfPayment": "",
 				"descriptions": "",
+				"hint": "",
 				"payer": "",
 				"payername": "",
 				"paymentid": "",
@@ -1540,6 +1553,7 @@
 				"voiding": ""
 			},
 			"fields": {
+				"active_tasks": "",
 				"actual_completion": "Realización real",
 				"actual_delivery": "Entrega real",
 				"actual_in": "Real en",
@@ -2003,6 +2017,7 @@
 				"ppc": "",
 				"ppdnotexported": "",
 				"profileadjustments": "",
+				"profitbypassrequired": "",
 				"profits": "",
 				"prt_dsmk_total": "",
 				"rates": "Tarifas",
@@ -2024,12 +2039,12 @@
 				"remove_from_ar": "",
 				"returntotals": "",
 				"ro_guard": {
-					"eforce_profit": "",
 					"enforce_ar": "",
 					"enforce_bills": "",
 					"enforce_cm": "",
 					"enforce_labor": "",
 					"enforce_ppd": "",
+					"enforce_profit": "",
 					"enforce_sublet": "",
 					"enforce_validation": "",
 					"enforced": ""
@@ -2052,6 +2067,7 @@
 				"supplementnote": "",
 				"suspended": "",
 				"suspense": "",
+				"tasks": "",
 				"threshhold": "",
 				"total_cost": "",
 				"total_cust_payable": "",
@@ -2149,6 +2165,7 @@
 				"accounting-payments": "",
 				"accounting-receivables": "",
 				"activejobs": "Empleos activos",
+				"all_tasks": "",
 				"alljobs": "",
 				"allpayments": "",
 				"availablejobs": "Trabajos disponibles",
@@ -2157,6 +2174,7 @@
 				"courtesycars-all": "",
 				"courtesycars-contracts": "",
 				"courtesycars-newcontract": "",
+				"create_task": "",
 				"customers": "Clientes",
 				"dashboard": "",
 				"enterbills": "",
@@ -2169,6 +2187,7 @@
 				"home": "Casa",
 				"inventory": "",
 				"jobs": "Trabajos",
+				"my_tasks": "",
 				"newjob": "",
 				"owners": "propietarios",
 				"parts-queue": "",
@@ -2195,6 +2214,7 @@
 				"shop_csi": "",
 				"shop_templates": "",
 				"shop_vendors": "Vendedores",
+				"tasks": "",
 				"temporarydocs": "",
 				"timetickets": "",
 				"ttapprovals": "",
@@ -2388,6 +2408,7 @@
 				"percent_accepted": ""
 			},
 			"labels": {
+				"notyetdispatched": "",
 				"parts_dispatch": ""
 			}
 		},
@@ -2504,6 +2525,7 @@
 				"markexported": "",
 				"markreexported": "",
 				"payment": "",
+				"paymentupdate": "",
 				"stripe": ""
 			}
 		},
@@ -2605,6 +2627,7 @@
 				"job_costing_ro": "",
 				"job_lifecycle_ro": "",
 				"job_notes": "",
+				"job_tasks": "",
 				"key_tag": "",
 				"labels": {
 					"count": "",
@@ -2805,6 +2828,7 @@
 					"parts_orders": "",
 					"payments": "",
 					"scoreboard": "",
+					"tasks": "",
 					"timetickets": ""
 				},
 				"vendor": ""
@@ -2920,6 +2944,8 @@
 				"scoreboard_detail": "",
 				"scoreboard_summary": "",
 				"supplement_ratio_ins_co": "",
+				"tasks_date": "",
+				"tasks_date_employee": "",
 				"thank_you_date": "",
 				"timetickets": "",
 				"timetickets_employee": "",
@@ -2999,6 +3025,92 @@
 				"updated": ""
 			}
 		},
+		"tasks": {
+			"actions": {
+				"edit": "",
+				"new": ""
+			},
+			"buttons": {
+				"allTasks": "",
+				"complete": "",
+				"create": "",
+				"delete": "",
+				"edit": "",
+				"myTasks": "",
+				"refresh": ""
+			},
+			"date_presets": {
+				"completion": "",
+				"day": "",
+				"days": "",
+				"delivery": "",
+				"next_week": "",
+				"one_month": "",
+				"three_months": "",
+				"three_weeks": "",
+				"today": "",
+				"tomorrow": "",
+				"two_weeks": ""
+			},
+			"failures": {
+				"completed": "",
+				"created": "",
+				"deleted": "",
+				"updated": ""
+			},
+			"fields": {
+				"actions": "",
+				"assigned_to": "",
+				"bill": "",
+				"billid": "",
+				"completed": "",
+				"created_at": "",
+				"description": "",
+				"due_date": "",
+				"job": {
+					"ro_number": ""
+				},
+				"jobid": "",
+				"jobline": "",
+				"joblineid": "",
+				"parts_order": "",
+				"partsorderid": "",
+				"priorities": {
+					"high": "",
+					"low": "",
+					"medium": ""
+				},
+				"priority": "",
+				"remind_at": "",
+				"title": ""
+			},
+			"placeholders": {
+				"assigned_to": "",
+				"billid": "",
+				"description": "",
+				"jobid": "",
+				"joblineid": "",
+				"partsorderid": ""
+			},
+			"successes": {
+				"completed": "",
+				"created": "",
+				"deleted": "",
+				"updated": ""
+			},
+			"titles": {
+				"all_tasks": "",
+				"completed": "",
+				"deleted": "",
+				"job_tasks": "",
+				"mine": "",
+				"my_tasks": ""
+			},
+			"validation": {
+				"due_at_error_message": "",
+				"remind_at_error_message": ""
+			}
+		},
 		"tech": {
 			"fields": {
 				"employeeid": "",
@@ -3103,11 +3215,13 @@
 			"accounting-payables": "",
 			"accounting-payments": "",
 			"accounting-receivables": "",
+			"all_tasks": "",
 			"app": "",
 			"bc": {
 				"accounting-payables": "",
 				"accounting-payments": "",
 				"accounting-receivables": "",
+				"all_tasks": "",
 				"availablejobs": "",
 				"bills-list": "",
 				"contracts": "",
@@ -3131,6 +3245,7 @@
 				"jobs-intake": "",
 				"jobs-new": "",
 				"jobs-ready": "",
+				"my_tasks": "",
 				"owner-detail": "",
 				"owners": "",
 				"parts-queue": "",
@@ -3145,6 +3260,7 @@
 				"shop-csi": "",
 				"shop-templates": "",
 				"shop-vendors": "",
+				"tasks": "",
 				"temporarydocs": "",
 				"timetickets": "",
 				"ttapprovals": "",
@@ -3175,6 +3291,7 @@
 			"jobsdetail": "Trabajo {{ro_number}} | {{app}}",
 			"jobsdocuments": "Documentos de trabajo {{ro_number}} | {{app}}",
 			"manageroot": "Casa | {{app}}",
+			"my_tasks": "",
 			"owners": "Todos los propietarios | {{app}}",
 			"owners-detail": "",
 			"parts-queue": "",
@@ -3194,6 +3311,7 @@
 			"shop-csi": "",
 			"shop-templates": "",
 			"shop_vendors": "Vendedores | {{app}}",
+			"tasks": "",
 			"techconsole": "{{app}}",
 			"techjobclock": "{{app}}",
 			"techjoblookup": "{{app}}",

client/src/translations/fr/common.json

@@ -116,6 +116,7 @@
 				"jobassignmentchange": "",
 				"jobassignmentremoved": "",
 				"jobchecklist": "",
+				"jobclosedwithbypass": "",
 				"jobconverted": "",
 				"jobdelivery": "",
 				"jobexported": "",
@@ -134,7 +135,13 @@
 				"jobstatuschange": "",
 				"jobsupplement": "",
 				"jobsuspend": "",
-				"jobvoid": ""
+				"jobvoid": "",
+				"tasks_completed": "",
+				"tasks_created": "",
+				"tasks_deleted": "",
+				"tasks_uncompleted": "",
+				"tasks_undeleted": "",
+				"tasks_updated": ""
 			}
 		},
 		"billlines": {
@@ -223,10 +230,12 @@
 				"markexported": "",
 				"markforreexport": "",
 				"new": "",
+				"nobilllines": "",
 				"noneselected": "",
 				"onlycmforinvoiced": "",
 				"printlabels": "",
 				"retailtotal": "",
+				"returnfrombill": "",
 				"savewithdiscrepancy": "",
 				"state_tax": "",
 				"subtotal": "",
@@ -860,7 +869,8 @@
 				"inservice": "",
 				"leasereturn": "",
 				"out": "",
-				"sold": ""
+				"sold": "",
+				"unavailable": ""
 			},
 			"successes": {
 				"saved": ""
@@ -930,7 +940,8 @@
 				"scheduledindate": "",
 				"scheduledintoday": "",
 				"scheduledoutdate": "",
-				"scheduledouttoday": ""
+				"scheduledouttoday": "",
+				"tasks": ""
 			}
 		},
 		"dms": {
@@ -1125,6 +1136,7 @@
 				"delete": "Effacer",
 				"deleteall": "",
 				"deselectall": "",
+				"download": "",
 				"edit": "modifier",
 				"login": "",
 				"print": "",
@@ -1350,6 +1362,7 @@
 				"amount": "",
 				"dateOfPayment": "",
 				"descriptions": "",
+				"hint": "",
 				"payer": "",
 				"payername": "",
 				"paymentid": "",
@@ -1540,6 +1553,7 @@
 				"voiding": ""
 			},
 			"fields": {
+				"active_tasks": "",
 				"actual_completion": "Achèvement réel",
 				"actual_delivery": "Livraison réelle",
 				"actual_in": "En réel",
@@ -2003,6 +2017,7 @@
 				"ppc": "",
 				"ppdnotexported": "",
 				"profileadjustments": "",
+				"profitbypassrequired": "",
 				"profits": "",
 				"prt_dsmk_total": "",
 				"rates": "Les taux",
@@ -2024,12 +2039,12 @@
 				"remove_from_ar": "",
 				"returntotals": "",
 				"ro_guard": {
-					"eforce_profit": "",
 					"enforce_ar": "",
 					"enforce_bills": "",
 					"enforce_cm": "",
 					"enforce_labor": "",
 					"enforce_ppd": "",
+					"enforce_profit": "",
 					"enforce_sublet": "",
 					"enforce_validation": "",
 					"enforced": ""
@@ -2052,6 +2067,7 @@
 				"supplementnote": "",
 				"suspended": "",
 				"suspense": "",
+				"tasks": "",
 				"threshhold": "",
 				"total_cost": "",
 				"total_cust_payable": "",
@@ -2149,6 +2165,7 @@
 				"accounting-payments": "",
 				"accounting-receivables": "",
 				"activejobs": "Emplois actifs",
+				"all_tasks": "",
 				"alljobs": "",
 				"allpayments": "",
 				"availablejobs": "Emplois disponibles",
@@ -2157,6 +2174,7 @@
 				"courtesycars-all": "",
 				"courtesycars-contracts": "",
 				"courtesycars-newcontract": "",
+				"create_task": "",
 				"customers": "Les clients",
 				"dashboard": "",
 				"enterbills": "",
@@ -2169,6 +2187,7 @@
 				"home": "Accueil",
 				"inventory": "",
 				"jobs": "Emplois",
+				"my_tasks": "",
 				"newjob": "",
 				"owners": "Propriétaires",
 				"parts-queue": "",
@@ -2195,6 +2214,7 @@
 				"shop_csi": "",
 				"shop_templates": "",
 				"shop_vendors": "Vendeurs",
+				"tasks": "",
 				"temporarydocs": "",
 				"timetickets": "",
 				"ttapprovals": "",
@@ -2388,6 +2408,7 @@
 				"percent_accepted": ""
 			},
 			"labels": {
+				"notyetdispatched": "",
 				"parts_dispatch": ""
 			}
 		},
@@ -2504,6 +2525,7 @@
 				"markexported": "",
 				"markreexported": "",
 				"payment": "",
+				"paymentupdate": "",
 				"stripe": ""
 			}
 		},
@@ -2605,6 +2627,7 @@
 				"job_costing_ro": "",
 				"job_lifecycle_ro": "",
 				"job_notes": "",
+				"job_tasks": "",
 				"key_tag": "",
 				"labels": {
 					"count": "",
@@ -2805,6 +2828,7 @@
 					"parts_orders": "",
 					"payments": "",
 					"scoreboard": "",
+					"tasks": "",
 					"timetickets": ""
 				},
 				"vendor": ""
@@ -2920,6 +2944,8 @@
 				"scoreboard_detail": "",
 				"scoreboard_summary": "",
 				"supplement_ratio_ins_co": "",
+				"tasks_date": "",
+				"tasks_date_employee": "",
 				"thank_you_date": "",
 				"timetickets": "",
 				"timetickets_employee": "",
@@ -2999,6 +3025,92 @@
 				"updated": ""
 			}
 		},
+		"tasks": {
+			"actions": {
+				"edit": "",
+				"new": ""
+			},
+			"buttons": {
+				"allTasks": "",
+				"complete": "",
+				"create": "",
+				"delete": "",
+				"edit": "",
+				"myTasks": "",
+				"refresh": ""
+			},
+			"date_presets": {
+				"completion": "",
+				"day": "",
+				"days": "",
+				"delivery": "",
+				"next_week": "",
+				"one_month": "",
+				"three_months": "",
+				"three_weeks": "",
+				"today": "",
+				"tomorrow": "",
+				"two_weeks": ""
+			},
+			"failures": {
+				"completed": "",
+				"created": "",
+				"deleted": "",
+				"updated": ""
+			},
+			"fields": {
+				"actions": "",
+				"assigned_to": "",
+				"bill": "",
+				"billid": "",
+				"completed": "",
+				"created_at": "",
+				"description": "",
+				"due_date": "",
+				"job": {
+					"ro_number": ""
+				},
+				"jobid": "",
+				"jobline": "",
+				"joblineid": "",
+				"parts_order": "",
+				"partsorderid": "",
+				"priorities": {
+					"high": "",
+					"low": "",
+					"medium": ""
+				},
+				"priority": "",
+				"remind_at": "",
+				"title": ""
+			},
+			"placeholders": {
+				"assigned_to": "",
+				"billid": "",
+				"description": "",
+				"jobid": "",
+				"joblineid": "",
+				"partsorderid": ""
+			},
+			"successes": {
+				"completed": "",
+				"created": "",
+				"deleted": "",
+				"updated": ""
+			},
+			"titles": {
+				"all_tasks": "",
+				"completed": "",
+				"deleted": "",
+				"job_tasks": "",
+				"mine": "",
+				"my_tasks": ""
+			},
+			"validation": {
+				"due_at_error_message": "",
+				"remind_at_error_message": ""
+			}
+		},
 		"tech": {
 			"fields": {
 				"employeeid": "",
@@ -3103,11 +3215,13 @@
 			"accounting-payables": "",
 			"accounting-payments": "",
 			"accounting-receivables": "",
+			"all_tasks": "",
 			"app": "",
 			"bc": {
 				"accounting-payables": "",
 				"accounting-payments": "",
 				"accounting-receivables": "",
+				"all_tasks": "",
 				"availablejobs": "",
 				"bills-list": "",
 				"contracts": "",
@@ -3131,6 +3245,7 @@
 				"jobs-intake": "",
 				"jobs-new": "",
 				"jobs-ready": "",
+				"my_tasks": "",
 				"owner-detail": "",
 				"owners": "",
 				"parts-queue": "",
@@ -3145,6 +3260,7 @@
 				"shop-csi": "",
 				"shop-templates": "",
 				"shop-vendors": "",
+				"tasks": "",
 				"temporarydocs": "",
 				"timetickets": "",
 				"ttapprovals": "",
@@ -3175,6 +3291,7 @@
 			"jobsdetail": "Travail {{ro_number}} | {{app}}",
 			"jobsdocuments": "Documents de travail {{ro_number}} | {{app}}",
 			"manageroot": "Accueil | {{app}}",
+			"my_tasks": "",
 			"owners": "Tous les propriétaires | {{app}}",
 			"owners-detail": "",
 			"parts-queue": "",
@@ -3194,6 +3311,7 @@
 			"shop-csi": "",
 			"shop-templates": "",
 			"shop_vendors": "Vendeurs | {{app}}",
+			"tasks": "",
 			"techconsole": "{{app}}",
 			"techjobclock": "{{app}}",
 			"techjoblookup": "{{app}}",

client/src/utils/AuditTrailMappings.js

@@ -24,6 +24,7 @@ const AuditTrailMapping = {
   jobimported: () => i18n.t("audit_trail.messages.jobimported"),
   jobinproductionchange: (inproduction) => i18n.t("audit_trail.messages.jobinproductionchange", { inproduction }),
   jobinvoiced: () => i18n.t("audit_trail.messages.jobinvoiced"),
+  jobclosedwithbypass: () => i18n.t("audit_trail.messages.jobclosedwithbypass"),
   jobmodifylbradj: ({ mod_lbr_ty, hours }) => i18n.t("audit_trail.messages.jobmodifylbradj", { mod_lbr_ty, hours }),
   jobnoteadded: () => i18n.t("audit_trail.messages.jobnoteadded"),
   jobnoteupdated: () => i18n.t("audit_trail.messages.jobnoteupdated"),
@@ -39,7 +40,38 @@ const AuditTrailMapping = {
   jobstatuschange: (status) => i18n.t("audit_trail.messages.jobstatuschange", { status }),
   jobsupplement: () => i18n.t("audit_trail.messages.jobsupplement"),
   jobsuspend: (status) => i18n.t("audit_trail.messages.jobsuspend", { status }),
-  jobvoid: () => i18n.t("audit_trail.messages.jobvoid")
+  jobvoid: () => i18n.t("audit_trail.messages.jobvoid"),
+  // Tasks Entries
+  tasksCreated: (title, createdBy) =>
+    i18n.t("audit_trail.messages.tasks_created", {
+      title,
+      createdBy
+    }),
+  tasksUpdated: (title, updatedBy) =>
+    i18n.t("audit_trail.messages.tasks_updated", {
+      title,
+      updatedBy
+    }),
+  tasksDeleted: (title, deletedBy) =>
+    i18n.t("audit_trail.messages.tasks_deleted", {
+      title,
+      deletedBy
+    }),
+  tasksUndeleted: (title, undeletedBy) =>
+    i18n.t("audit_trail.messages.tasks_undeleted", {
+      title,
+      undeletedBy
+    }),
+  tasksCompleted: (title, completedBy) =>
+    i18n.t("audit_trail.messages.tasks_completed", {
+      title,
+      completedBy
+    }),
+  tasksUncompleted: (title, uncompletedBy) =>
+    i18n.t("audit_trail.messages.tasks_uncompleted", {
+      title,
+      uncompletedBy
+    })
 };
 
 export default AuditTrailMapping;

client/src/utils/CleanAxios.js

@@ -1,5 +1,6 @@
 import axios from "axios";
 import { auth } from "../firebase/firebase.utils";
+import InstanceRenderManager from "./instanceRenderMgr";
 
 axios.defaults.baseURL =
   import.meta.env.VITE_APP_AXIOS_BASE_API_URL ||
@@ -12,6 +13,15 @@ export const axiosAuthInterceptorId = axios.interceptors.request.use(
       if (token) {
         config.headers.Authorization = `Bearer ${token}`;
       }
+      InstanceRenderManager({
+        executeFunction: true,
+        args: [],
+        promanager: () => {
+          if (!config.url.startsWith("http://localhost:1337")) {
+            config.headers["Convenient-Company"] = "promanager";
+          }
+        }
+      });
     }
 
     return config;

client/src/utils/RenderTemplate.js

@@ -10,6 +10,7 @@ import client from "../utils/GraphQLClient";
 import cleanAxios from "./CleanAxios";
 import { TemplateList } from "./TemplateConstants";
 import { generateTemplate } from "./graphQLmodifier";
+import InstanceRenderManager from "./instanceRenderMgr";
 const server = import.meta.env.VITE_APP_REPORTS_SERVER_URL;
 
 jsreport.serverUrl = server;
@@ -71,8 +72,8 @@ export default async function RenderTemplate(
       ...contextData,
       ...templateObject.variables,
       ...templateObject.context,
-      headerpath: `/${bodyshop.imexshopid}/header.html`,
+      headerpath: `/${InstanceRenderManager({ imex: bodyshop.imexshopid, rome: bodyshop.imexshopid, promanager: "GENERIC" })}/header.html`,
-      footerpath: `/${bodyshop.imexshopid}/footer.html`,
+      footerpath: `/${InstanceRenderManager({ imex: bodyshop.imexshopid, rome: bodyshop.imexshopid, promanager: "GENERIC" })}/footer.html`,
       bodyshop: bodyshop,
       filters: templateObject?.filters,
       sorters: templateObject?.sorters,

client/src/utils/TemplateConstants.js

@@ -587,6 +587,14 @@ export const TemplateList = (type, context) => {
             key: "job_lifecycle_ro",
             disabled: false,
             group: "post"
+          },
+          job_tasks: {
+            title: i18n.t("printcenter.jobs.job_tasks"),
+            description: "",
+            subject: i18n.t("printcenter.jobs.job_tasks"),
+            key: "job_tasks",
+            disabled: false,
+            group: "ro"
           }
         }
       : {}),
@@ -2089,6 +2097,30 @@ export const TemplateList = (type, context) => {
               field: i18n.t("jobs.fields.date_invoiced")
             },
             group: "jobs"
+          },
+          tasks_date: {
+            title: i18n.t("reportcenter.templates.tasks_date"),
+            subject: i18n.t("reportcenter.templates.tasks_date"),
+            key: "tasks_date",
+            //idtype: "vendor",
+            disabled: false,
+            rangeFilter: {
+              object: i18n.t("reportcenter.labels.objects.tasks"),
+              field: i18n.t("tasks.fields.created_at")
+            },
+            group: "jobs"
+          },
+          tasks_date_employee: {
+            title: i18n.t("reportcenter.templates.tasks_date_employee"),
+            subject: i18n.t("reportcenter.templates.tasks_date_employee"),
+            key: "tasks_date_employee",
+            idtype: "employee",
+            disabled: false,
+            rangeFilter: {
+              object: i18n.t("reportcenter.labels.objects.tasks"),
+              field: i18n.t("tasks.fields.created_at")
+            },
+            group: "jobs"
           }
         }
       : {}),

client/src/utils/fcm-handler.js

@@ -1,4 +1,5 @@
 export default async function FcmHandler({ client, payload }) {
+  console.log("FCM", payload);
   switch (payload.type) {
     case "messaging-inbound":
       client.cache.modify({

client/src/utils/undefinedtonull.js

@@ -1,3 +1,13 @@
+/**
+ * Replaces undefined values with null in an object.
+ * Optionally, you can specify keys to replace.
+ * If keys are specified, only those keys will be replaced.
+ * If no keys are specified, all undefined values will be replaced.
+ * @param obj
+ * @param keys
+ * @returns {*}
+ * @constructor
+ */
 export default function UndefinedToNull(obj, keys) {
   Object.keys(obj).forEach((key) => {
     if (keys && keys.indexOf(key) >= 0) {
@@ -8,3 +18,21 @@ export default function UndefinedToNull(obj, keys) {
   });
   return obj;
 }
+
+/**
+ * Replaces undefined values with null in an object. Optionally, you can specify keys to replace. If keys are specified, only those keys will be replaced. If no keys are specified, all undefined values will be replaced.
+ * @param obj
+ * @param keys
+ * @returns {{[p: string]: unknown}}
+ */
+export function replaceUndefinedWithNull(obj, keys) {
+  return Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => {
+      if (keys) {
+        return [key, keys.includes(key) && value === undefined ? null : value];
+      } else {
+        return [key, value === undefined ? null : value];
+      }
+    })
+  );
+}

client/vite.config.js

@@ -5,6 +5,8 @@ import * as path from "path";
 import * as url from "url";
 import { defineConfig } from "vite";
 import { ViteEjsPlugin } from "vite-plugin-ejs";
+import eslint from 'vite-plugin-eslint';
+
 //import CompressionPlugin from 'vite-plugin-compression';
 import { VitePWA } from "vite-plugin-pwa";
 import InstanceRenderManager from "./src/utils/instanceRenderMgr";
@@ -100,7 +102,8 @@ export default defineConfig({
       }
     }),
     reactVirtualized(),
-    react()
+    react(),
+    eslint(),
     // CompressionPlugin(), //Cloudfront already compresses assets, so not needed.
   ],
   define: {

hasura/metadata/actions.yaml

@@ -1,6 +1,6 @@
-actions: [ ]
+actions: []
 custom_types:
-  enums: [ ]
+  enums: []
-  input_objects: [ ]
+  input_objects: []
-  objects: [ ]
+  objects: []
-  scalars: [ ]
+  scalars: []

hasura/metadata/allow_list.yaml

@@ -1 +1 @@
-[ ]
+[]

hasura/metadata/cron_triggers.yaml

@@ -1 +1,8 @@
-[ ]
+- name: Task Reminders
+  webhook: '{{HASURA_API_URL}}/tasks-remind-handler'
+  schedule: '*/15 * * * *'
+  include_in_metadata: true
+  payload: {}
+  headers:
+    - name: event-secret
+      value_from_env: EVENT_SECRET

hasura/metadata/network.yaml

@@ -1 +1 @@
-{ }
+{}

hasura/metadata/query_collections.yaml

@@ -1 +1 @@
-[ ]
+[]

hasura/metadata/remote_schemas.yaml

@@ -1 +1 @@
-[ ]
+[]