Remove apollo sentry error.

IO-1532 resolve update logic issue for status timings.

.circleci/config.yml

@@ -8,13 +8,13 @@ orbs:
 jobs:
   api-deploy:
     docker:
-      - image: "cimg/base:stable"
+      - image: cimg/node:18.18.2
     steps:
       - checkout
       - eb/setup
       - run:
           command: |
-            eb init imex-online-production-api -r ca-central-1 -p "Node.js 16 running on 64bit Amazon Linux 2"
+            eb init imex-online-production-api -r ca-central-1 -p "Node.js 18 running on 64bit Amazon Linux 2"
             eb status --verbose
             eb deploy
             eb status
@@ -48,25 +48,16 @@ jobs:
     steps:
       - checkout:
           path: ~/repo
-
-      - restore_cache:
-          name: Restore Yarn Package Cache
-          keys:
-            - yarn-packages-{{ checksum "yarn.lock" }}
       - run:
           name: Install Dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn Package Cache
-          key: yarn-packages-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
+          command: npm i
 
-      - run: yarn run build
+      - run: npm run build
 
       - aws-s3/sync:
           from: build
           to: "s3://imex-online-production/"
+          arguments: "--exclude '*.map'"
       - jira/notify
 
   test-hasura-migrate:
@@ -98,25 +89,16 @@ jobs:
     steps:
       - checkout:
           path: ~/repo
-
-      - restore_cache:
-          name: Restore Yarn Package Cache
-          keys:
-            - yarn-packages-{{ checksum "yarn.lock" }}
       - run:
           name: Install Dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn Package Cache
-          key: yarn-packages-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
+          command: npm i
 
-      - run: yarn run build:test
+      - run: npm run build:test
 
       - aws-s3/sync:
           from: build
           to: "s3://imex-online-test/"
+          arguments: "--exclude '*.map'"
       - jira/notify
 
   admin-app-build:

.gitignore

@@ -117,4 +117,6 @@ logs/oAuthClient-log.log
 
 .node-persist/**
 
-/*.env.*
+/*.env.*
+.idea/*
+.idea

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -364,6 +364,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>unblock</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>viewjob</name>
                                         <definition_loaded>false</definition_loaded>
@@ -17755,6 +17776,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>reports</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>required</name>
                                         <definition_loaded>false</definition_loaded>
@@ -19472,6 +19514,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>paymentnum</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>paymenttype</name>
                                         <definition_loaded>false</definition_loaded>
@@ -24075,6 +24138,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>dms_model_override</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>dms_unsold</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -43260,6 +43344,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>hours_sold_detail_closed_estimator</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>hours_sold_detail_closed_ins_co</name>
                                         <definition_loaded>false</definition_loaded>
@@ -43344,6 +43449,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>hours_sold_detail_open_estimator</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>hours_sold_detail_open_ins_co</name>
                                         <definition_loaded>false</definition_loaded>
@@ -43428,6 +43554,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>hours_sold_summary_closed_estimator</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>hours_sold_summary_closed_ins_co</name>
                                         <definition_loaded>false</definition_loaded>
@@ -43512,6 +43659,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>hours_sold_summary_open_estimator</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>hours_sold_summary_open_ins_co</name>
                                         <definition_loaded>false</definition_loaded>
@@ -43848,6 +44016,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>open_orders_referral</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>open_orders_specific_csr</name>
                                         <definition_loaded>false</definition_loaded>
@@ -46227,6 +46416,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>created_by</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>date</name>
                                         <definition_loaded>false</definition_loaded>

client/.env.production

@@ -1,4 +1,4 @@
-GENERATE_SOURCEMAP=false
+GENERATE_SOURCEMAP=true
 REACT_APP_GRAPHQL_ENDPOINT=https://db.imex.online/v1/graphql
 REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.imex.online/v1/graphql
 REACT_APP_GA_CODE=231103507

client/.gitignore

@@ -0,0 +1,3 @@
+
+# Sentry Config File
+.sentryclirc

client/craco.config.js

@@ -1,25 +1,25 @@
 // craco.config.js
 const TerserPlugin = require("terser-webpack-plugin");
 const CracoLessPlugin = require("craco-less");
-const SentryWebpackPlugin = require("@sentry/webpack-plugin");
+//const SentryWebpackPlugin = require("@sentry/webpack-plugin");
 
 module.exports = {
   plugins: [
-    {
-      plugin: SentryWebpackPlugin,
-      options: {
-        // sentry-cli configuration
-        authToken:
-          "6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
-        org: "snapt-software",
-        project: "imexonline",
-        release: process.env.REACT_APP_GIT_SHA,
+    // {
+    //   plugin: SentryWebpackPlugin,
+    //   options: {
+    //     // sentry-cli configuration
+    //     authToken:
+    //       "6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
+    //     org: "snapt-software",
+    //     project: "imexonline",
+    //     release: process.env.REACT_APP_GIT_SHA,
 
-        // webpack-specific configuration
-        include: ".",
-        ignore: ["node_modules", "webpack.config.js"],
-      },
-    },
+    //     // webpack-specific configuration
+    //     include: ".",
+    //     ignore: ["node_modules", "webpack.config.js"],
+    //   },
+    // },
     {
       plugin: CracoLessPlugin,
       options: {

client/package.json

@@ -7,14 +7,16 @@
     "@apollo/client": "^3.7.9",
     "@asseinfo/react-kanban": "^2.2.0",
     "@craco/craco": "^7.0.0",
-    "@fingerprintjs/fingerprintjs": "^3.3.3",
+    "@fingerprintjs/fingerprintjs": "^3.4.2",
     "@jsreport/browser-client": "^3.1.0",
-    "@sentry/react": "^7.40.0",
+    "@sentry/cli": "^2.27.0",
+    "@sentry/react": "^7.99.0",
     "@sentry/tracing": "^7.40.0",
     "@splitsoftware/splitio-react": "^1.8.1",
     "@tanem/react-nprogress": "^5.0.8",
     "antd": "^4.24.8",
     "apollo-link-logger": "^2.0.1",
+    "apollo-link-sentry": "^3.3.0",
     "axios": "^1.3.4",
     "craco-less": "^2.0.0",
     "dinero.js": "^1.9.1",
@@ -88,13 +90,14 @@
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "craco start",
-    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
-    "build:test": "env-cmd -f .env.test yarn run build",
-    "build-deploy:test": "yarn run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
+    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build && npm run sentry:sourcemaps",
+    "build:test": "env-cmd -f .env.test npm run build",
+    "build-deploy:test": "npm run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
     "buildcra": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
     "test": "cypress open",
     "eject": "react-scripts eject",
-    "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular ."
+    "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
+    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
   },
   "eslintConfig": {
     "extends": [

client/src/App/App.container.jsx

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
+import * as Sentry from "@sentry/react";
 
 moment.locale("en-US");
 
@@ -18,7 +19,7 @@ export const factory = SplitSdk({
   },
 });
 
-export default function AppContainer() {
+function AppContainer() {
   const { t } = useTranslation();
 
   return (
@@ -42,3 +43,5 @@ export default function AppContainer() {
     </ApolloProvider>
   );
 }
+
+export default Sentry.withProfiler(AppContainer);

client/src/App/App.jsx

@@ -22,6 +22,7 @@ import {
 } from "../redux/user/user.selectors";
 import PrivateRoute from "../utils/private-route";
 import "./App.styles.scss";
+import handleBeta from "../utils/handleBeta";
 
 const ResetPassword = lazy(() =>
   import("../pages/reset-password/reset-password.component")
@@ -57,7 +58,6 @@ export function App({
     if (!navigator.onLine) {
       setOnline(false);
     }
-
     checkUserSession();
   }, [checkUserSession, setOnline]);
 
@@ -73,6 +73,7 @@ export function App({
   window.addEventListener("online", function (e) {
     setOnline(true);
   });
+
   useEffect(() => {
     if (currentUser.authorized && bodyshop) {
       client.setAttribute("imexshopid", bodyshop.imexshopid);
@@ -107,6 +108,8 @@ export function App({
       />
     );
 
+  handleBeta();
+
   return (
     <Switch>
       <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>

client/src/components/accounting-payables-table/accounting-payables-table.component.jsx

@@ -15,6 +15,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -210,7 +211,7 @@ export function AccountingPayablesTableComponent({
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: 50 }}
+        pagination={{ position: "top", pageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

client/src/components/accounting-payments-table/accounting-payments-table.component.jsx

@@ -15,6 +15,7 @@ import PaymentExportButton from "../payment-export-button/payment-export-button.
 import PaymentMarkSelectedExported from "../payment-mark-selected-exported/payment-mark-selected-exported.component";
 import PaymentsExportAllButton from "../payments-export-all-button/payments-export-all-button.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -209,7 +210,7 @@ export function AccountingPayablesTableComponent({
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: 50 }}
+        pagination={{ position: "top", pageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

client/src/components/audit-trail-list/audit-trail-list.component.jsx

@@ -4,6 +4,7 @@ import { alphaSort } from "../../utils/sorters";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { useTranslation } from "react-i18next";
 import AuditTrailValuesComponent from "../audit-trail-values/audit-trail-values.component";
+import {pageLimit} from "../../utils/config";
 
 export default function AuditTrailListComponent({ loading, data }) {
   const [state, setState] = useState({
@@ -74,7 +75,7 @@ export default function AuditTrailListComponent({ loading, data }) {
     <Table
       {...formItemLayout}
       loading={loading}
-      pagination={{ position: "top", defaultPageSize: 25 }}
+      pagination={{ position: "top", defaultPageSize: pageLimit }}
       columns={columns}
       rowKey="id"
       dataSource={data}

client/src/components/audit-trail-list/email-audit-trail-list.component.jsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import {pageLimit} from "../../utils/config";
 
 export default function EmailAuditTrailListComponent({ loading, data }) {
   const [state, setState] = useState({
@@ -53,7 +54,7 @@ export default function EmailAuditTrailListComponent({ loading, data }) {
     <Table
       {...formItemLayout}
       loading={loading}
-      pagination={{ position: "top", defaultPageSize: 25 }}
+      pagination={{ position: "top", defaultPageSize: pageLimit }}
       columns={columns}
       rowKey="id"
       dataSource={data}

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

@@ -10,7 +10,7 @@ import { createStructuredSelector } from "reselect";
 import {
   DELETE_BILL_LINE,
   INSERT_NEW_BILL_LINES,
-  UPDATE_BILL_LINE
+  UPDATE_BILL_LINE,
 } from "../../graphql/bill-lines.queries";
 import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
@@ -20,6 +20,7 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import AlertComponent from "../alert/alert.component";
 import BillFormContainer from "../bill-form/bill-form.container";
 import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
+import BillPrintButton from "../bill-print-button/bill-print-button.component";
 import BillReeportButtonComponent from "../bill-reexport-button/bill-reexport-button.component";
 import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-gallery.container";
 import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
@@ -176,7 +177,7 @@ export function BillDetailEditcontainer({
             extra={
               <Space>
                 <BillDetailEditReturn data={data} />
-
+                <BillPrintButton billid={search.billid} />
                 <Popconfirm
                   visible={visible}
                   onConfirm={() => form.submit()}

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

@@ -37,8 +37,8 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("billEnter")),
-  insertAuditTrail: ({ jobid, operation }) =>
-    dispatch(insertAuditTrail({ jobid, operation })),
+  insertAuditTrail: ({ jobid, billid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, billid, operation })),
 });
 
 const Templates = TemplateList("job_special");
@@ -143,7 +143,7 @@ function BillEnterModalContainer({
           },
         ],
       },
-      refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"],
+      refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID", "GET_JOB_BY_PK"],
     });
 
     const adjKeys = Object.keys(adjustmentsToInsert);
@@ -316,7 +316,9 @@ function BillEnterModalContainer({
     insertAuditTrail({
       jobid: values.jobid,
       billid: billId,
-      operation: AuditTrailMapping.billposted(remainingValues.invoice_number),
+      operation: AuditTrailMapping.billposted(
+        r1.data.insert_bills.returning[0].invoice_number
+      ),
     });
 
     if (enterAgain) {

client/src/components/bill-form/bill-form.component.jsx

@@ -50,6 +50,7 @@ export function BillFormComponent({
   job,
   loadOutstandingReturns,
   loadInventory,
+  preferredMake,
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -78,6 +79,20 @@ export function BillFormComponent({
       });
   };
 
+  const handleFederalTaxExemptSwitchToggle = (checked) => {
+    // Early gate
+    if (!checked) return;
+    const values = form.getFieldsValue("billlines");
+    // Gate bill lines
+    if (!values?.billlines?.length) return;
+
+    const billlines = values.billlines.map((b) => {
+      b.applicable_taxes.federal = false;
+      return b;
+    });
+    form.setFieldsValue({ billlines });
+  };
+
   useEffect(() => {
     if (job) form.validateFields(["is_credit_memo"]);
   }, [job, form]);
@@ -185,6 +200,7 @@ export function BillFormComponent({
           <VendorSearchSelect
             disabled={disabled}
             options={vendorAutoCompleteOptions}
+            preferredMake={preferredMake}
             onSelect={handleVendorSelect}
           />
         </Form.Item>
@@ -385,7 +401,16 @@ export function BillFormComponent({
         >
           <CurrencyInput min={0} />
         </Form.Item>
-        <Form.Item shouldUpdate span={15}>
+        {bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
+          <Form.Item
+            span={2}
+            label={t("bills.labels.federal_tax_exempt")}
+            name="federal_tax_exempt"
+          >
+            <Switch onChange={handleFederalTaxExemptSwitchToggle} />
+          </Form.Item>
+        ) : null}
+        <Form.Item shouldUpdate span={13}>
           {() => {
             const values = form.getFieldsValue([
               "billlines",
@@ -403,7 +428,7 @@ export function BillFormComponent({
               totals = CalculateBillTotal(values);
             if (!!totals)
               return (
-                <div>
+                <div align="right">
                   <Space wrap>
                     <Statistic
                       title={t("bills.labels.subtotal")}

client/src/components/bill-form/bill-form.container.jsx

@@ -1,16 +1,16 @@
 import { useLazyQuery, useQuery } from "@apollo/client";
+import { useTreatments } from "@splitsoftware/splitio-react";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { QUERY_OUTSTANDING_INVENTORY } from "../../graphql/inventory.queries";
 import { GET_JOB_LINES_TO_ENTER_BILL } from "../../graphql/jobs-lines.queries";
+import { QUERY_UNRECEIVED_LINES } from "../../graphql/parts-orders.queries";
 import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import BillFormComponent from "./bill-form.component";
 import BillCmdReturnsTableComponent from "../bill-cm-returns-table/bill-cm-returns-table.component";
-import { QUERY_UNRECEIVED_LINES } from "../../graphql/parts-orders.queries";
 import BillInventoryTable from "../bill-inventory-table/bill-inventory-table.component";
-import { QUERY_OUTSTANDING_INVENTORY } from "../../graphql/inventory.queries";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import BillFormComponent from "./bill-form.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -59,6 +59,7 @@ export function BillFormContainer({
         disableInvNumber={disableInvNumber}
         loadOutstandingReturns={loadOutstandingReturns}
         loadInventory={loadInventory}
+        preferredMake={lineData ? lineData.jobs_by_pk.v_make_desc : null}
       />
       {!billEdit && (
         <BillCmdReturnsTableComponent

client/src/components/bill-form/bill-form.lines.component.jsx

@@ -1,14 +1,15 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
 import {
-  Button, Form,
+  Button,
+  Form,
   Input,
   InputNumber,
   Select,
   Space,
   Switch,
   Table,
-  Tooltip
+  Tooltip,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -466,7 +467,8 @@ export function BillEnterModalLinesComponent({
           return {
             key: `${field.index}fedtax`,
             valuePropName: "checked",
-            initialValue: true,
+            initialValue:
+              form.getFieldValue("federal_tax_exempt") === true ? false : true,
             name: [field.name, "applicable_taxes", "federal"],
           };
         },

client/src/components/bill-print-button/bill-print-button.component.jsx

@@ -0,0 +1,38 @@
+import { Button, Space } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+
+export default function BillPrintButton({ billid }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const Templates = TemplateList("job_special");
+
+  const submitHandler = async () => {
+    setLoading(true);
+    try {
+      await GenerateDocument(
+        {
+          name: Templates.parts_invoice_label_single.key,
+          variables: {
+            id: billid,
+          },
+        },
+        {},
+        "p"
+      );
+    } catch (e) {
+      console.warn("Warning: Error generating a document.");
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Space wrap>
+      <Button loading={loading} onClick={submitHandler}>
+        {t("bills.labels.printlabels")}
+      </Button>
+    </Space>
+  );
+}

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

@@ -4,6 +4,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import ChatArchiveButton from "../chat-archive-button/chat-archive-button.component";
 import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
 import ChatLabelComponent from "../chat-label/chat-label.component";
+import ChatPrintButton from "../chat-print-button/chat-print-button.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
 
 export default function ChatConversationTitle({ conversation }) {
@@ -13,6 +14,7 @@ export default function ChatConversationTitle({ conversation }) {
         {conversation && conversation.phone_num}
       </PhoneNumberFormatter>
       <ChatLabelComponent conversation={conversation} />
+      <ChatPrintButton conversation={conversation} />
       <ChatConversationTitleTags
         jobConversations={
           (conversation && conversation.job_conversations) || []

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

@@ -8,15 +8,23 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
+  searchingForConversation: searchingForConversation,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
 });
 
-export function ChatOpenButton({ bodyshop, phone, jobid, openChatByPhone }) {
+export function ChatOpenButton({
+  bodyshop,
+  searchingForConversation,
+  phone,
+  jobid,
+  openChatByPhone,
+}) {
   const { t } = useTranslation();
   if (!phone) return <></>;
 
@@ -29,7 +37,7 @@ export function ChatOpenButton({ bodyshop, phone, jobid, openChatByPhone }) {
       onClick={(e) => {
         e.stopPropagation();
         const p = parsePhoneNumber(phone, "CA");
-
+        if (searchingForConversation) return; //This is to prevent finding the same thing twice.
         if (p && p.isValid()) {
           openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid });
         } else {

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

@@ -132,7 +132,7 @@ export function ChatPopupComponent({
             onClick={() => toggleChatVisible()}
             style={{ cursor: "pointer" }}
           >
-            <MessageOutlined />
+            <MessageOutlined className="chat-popup-info-icon" />
             <strong>{t("messaging.labels.messaging")}</strong>
           </div>
         )}

client/src/components/chat-popup/chat-popup.styles.scss

@@ -13,6 +13,9 @@
     height: 100%;
   }
 }
+.chat-popup-info-icon {
+  margin-right: 5px;
+}
 
 @media only screen and (min-width: 992px) {
   .chat-popup {

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

@@ -0,0 +1,59 @@
+import { MailOutlined, PrinterOutlined } from "@ant-design/icons";
+import { Space, Spin } from "antd";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setEmailOptions } from "../../redux/email/email.actions";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
+});
+
+export function ChatPrintButton({ conversation }) {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Space wrap>
+      <PrinterOutlined
+        onClick={() => {
+          setLoading(true);
+          GenerateDocument(
+            {
+              name: TemplateList("messaging").conversation_list.key,
+              variables: { id: conversation.id },
+            },
+            {
+              subject: TemplateList("messaging").conversation_list.subject,
+            },
+            "p",
+            conversation.id
+          );
+          setLoading(false);
+        }}
+      />
+      <MailOutlined
+        onClick={() => {
+          setLoading(true);
+          GenerateDocument(
+            {
+              name: TemplateList("messaging").conversation_list.key,
+              variables: { id: conversation.id },
+            },
+            {
+              subject: TemplateList("messaging").conversation_list.subject,
+            },
+            "e",
+            conversation.id
+          );
+          setLoading(false);
+        }}
+      />
+      {loading && <Spin />}
+    </Space>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(ChatPrintButton);

client/src/components/contract-cars/contract-cars.component.jsx

@@ -35,6 +35,15 @@ export default function ContractsCarsComponent({
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       render: (text, record) => <div>{t(record.status)}</div>,
     },
+    {
+      title: t("courtesycars.fields.readiness"),
+      dataIndex: "readiness",
+      key: "readiness",
+      sorter: (a, b) => alphaSort(a.readiness, b.readiness),
+      sortOrder:
+        state.sortedInfo.columnKey === "readiness" && state.sortedInfo.order,
+      render: (text, record) => t(record.readiness),
+    },
     {
       title: t("courtesycars.fields.year"),
       dataIndex: "year",

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

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";
 
 export default function ContractsJobsComponent({
   loading,
@@ -175,7 +176,7 @@ export default function ContractsJobsComponent({
         loading={loading}
         pagination={{
           position: "top",
-          defaultPageSize: 10,
+          defaultPageSize: pageLimit,
           defaultCurrent: defaultCurrent,
         }}
         columns={columns}

client/src/components/contract-jobs/contract-jobs.container.jsx

@@ -2,10 +2,10 @@ import { useQuery } from "@apollo/client";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import ContractJobsComponent from "./contract-jobs.component";
-import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -15,6 +15,7 @@ export function ContractJobsContainer({ selectedJobState, bodyshop }) {
   const { loading, error, data } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     variables: {
       statuses: bodyshop.md_ro_statuses.active_statuses || ["Open"],
+      isConverted: true,
     },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",

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

@@ -4,15 +4,16 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
+import { setModalContext } from "../../redux/modals/modals.actions";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import ContractsFindModalContainer from "../contracts-find-modal/contracts-find-modal.container";
-import { setModalContext } from "../../redux/modals/modals.actions";
 
+import moment from "moment";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import moment from "moment";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -209,7 +210,7 @@ export function ContractsList({
         }}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: total,
         }}

client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import {pageLimit} from "../../utils/config";
 
 export default function CourtesyCarContractListComponent({
   contracts,
@@ -89,7 +90,7 @@ export default function CourtesyCarContractListComponent({
         scroll={{ x: true }}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: totalContracts,
         }}

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
 import { DateFormatter } from "../../utils/DateFormatter";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
+import CourtesyCarReadiness from "../courtesy-car-readiness-select/courtesy-car-readiness-select.component";
 import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 //import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
@@ -34,6 +35,18 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
 
       {/* <FormFieldsChanged form={form} /> */}
       <LayoutFormRow header={t("courtesycars.labels.vehicle")}>
+        <Form.Item
+          label={t("courtesycars.fields.year")}
+          name="year"
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
         <Form.Item
           label={t("courtesycars.fields.make")}
           name="make"
@@ -58,18 +71,6 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
         >
           <Input />
         </Form.Item>
-        <Form.Item
-          label={t("courtesycars.fields.year")}
-          name="year"
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
         <Form.Item
           label={t("courtesycars.fields.plate")}
           name="plate"
@@ -118,7 +119,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             },
           ]}
         >
-          <InputNumber precision={0} />
+          <InputNumber min={0} precision={0} />
         </Form.Item>
         <Form.Item
           label={t("courtesycars.fields.fleetnumber")}
@@ -213,49 +214,27 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
         >
           <CourtesyCarStatus />
         </Form.Item>
-        <Form.Item
-          label={t("courtesycars.fields.nextservicekm")}
-          name="nextservicekm"
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <InputNumber />
+        <Form.Item label={t("courtesycars.fields.readiness")} name="readiness">
+          <CourtesyCarReadiness />
         </Form.Item>
         <div>
           <Form.Item
-            label={t("courtesycars.fields.nextservicedate")}
-            name="nextservicedate"
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-            ]}
+            label={t("courtesycars.fields.nextservicekm")}
+            name="nextservicekm"
           >
-            <FormDatePicker />
+            <InputNumber min={0} precision={0} />
           </Form.Item>
           <Form.Item
             shouldUpdate={(p, c) =>
-              p.mileage !== c.mileage ||
-              p.nextservicedate !== c.nextservicedate ||
-              p.nextservicekm !== c.nextservicekm
+              p.mileage !== c.mileage || p.nextservicekm !== c.nextservicekm
             }
           >
             {() => {
-              const nextservicedate = form.getFieldValue("nextservicedate");
               const nextservicekm = form.getFieldValue("nextservicekm");
-
-              const mileageOver =
-                nextservicekm <= form.getFieldValue("mileage");
-
-              const dueForService =
-                nextservicedate && moment(nextservicedate).isBefore(moment());
-
-              if (mileageOver || dueForService)
+              const mileageOver = nextservicekm
+                ? nextservicekm <= form.getFieldValue("mileage")
+                : false;
+              if (mileageOver)
                 return (
                   <Space direction="vertical" style={{ color: "tomato" }}>
                     <span>
@@ -263,6 +242,36 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
                       {t("contracts.labels.cardueforservice")}
                     </span>
                     <span>{`${nextservicekm} km`}</span>
+                  </Space>
+                );
+
+              return <></>;
+            }}
+          </Form.Item>
+        </div>
+        <div>
+          <Form.Item
+            label={t("courtesycars.fields.nextservicedate")}
+            name="nextservicedate"
+          >
+            <FormDatePicker />
+          </Form.Item>
+          <Form.Item
+            shouldUpdate={(p, c) => p.nextservicedate !== c.nextservicedate}
+          >
+            {() => {
+              const nextservicedate = form.getFieldValue("nextservicedate");
+              const dueForService =
+                nextservicedate &&
+                moment(nextservicedate).endOf("day").isSameOrBefore(moment());
+
+              if (dueForService)
+                return (
+                  <Space direction="vertical" style={{ color: "tomato" }}>
+                    <span>
+                      <WarningFilled style={{ marginRight: ".3rem" }} />
+                      {t("contracts.labels.cardueforservice")}
+                    </span>
                     <span>
                       <DateFormatter>{nextservicedate}</DateFormatter>
                     </span>
@@ -283,12 +292,6 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
           <Form.Item
             label={t("courtesycars.fields.registrationexpires")}
             name="registrationexpires"
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-            ]}
           >
             <FormDatePicker />
           </Form.Item>
@@ -300,7 +303,8 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             {() => {
               const expires = form.getFieldValue("registrationexpires");
 
-              const dateover = expires && moment(expires).isBefore(moment());
+              const dateover =
+                expires && moment(expires).endOf("day").isBefore(moment());
 
               if (dateover)
                 return (
@@ -330,14 +334,13 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             <FormDatePicker />
           </Form.Item>
           <Form.Item
-            shouldUpdate={(p, c) =>
-              p.insuranceexpires !== c.insuranceexpires
-            }
+            shouldUpdate={(p, c) => p.insuranceexpires !== c.insuranceexpires}
           >
             {() => {
               const expires = form.getFieldValue("insuranceexpires");
 
-              const dateover = expires && moment(expires).isBefore(moment());
+              const dateover =
+                expires && moment(expires).endOf("day").isBefore(moment());
 
               if (dateover)
                 return (

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

@@ -34,6 +34,32 @@ const CourtesyCarFuelComponent = (props, ref) => {
       step={null}
       style={{ marginLeft: "2rem", marginRight: "2rem" }}
       {...props}
+      tooltip={{
+        formatter: (value) => {
+          switch (value) {
+            case 0:
+              return t("courtesycars.labels.fuel.empty");
+            case 13:
+              return t("courtesycars.labels.fuel.18");
+            case 25:
+              return t("courtesycars.labels.fuel.14");
+            case 38:
+              return t("courtesycars.labels.fuel.38");
+            case 50:
+              return t("courtesycars.labels.fuel.12");
+            case 63:
+              return t("courtesycars.labels.fuel.58");
+            case 75:
+              return t("courtesycars.labels.fuel.34");
+            case 88:
+              return t("courtesycars.labels.fuel.78");
+            case 100:
+              return t("courtesycars.labels.fuel.full");
+            default:
+              return value;
+          }
+        },
+      }}
     />
   );
 };

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

@@ -0,0 +1,35 @@
+import { Select } from "antd";
+import React, { forwardRef, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+const { Option } = Select;
+
+const CourtesyCarReadinessComponent = ({ value, onChange }, ref) => {
+  const [option, setOption] = useState(value);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (value !== option && onChange) {
+      onChange(option);
+    }
+  }, [value, option, onChange]);
+
+  return (
+    <Select
+      allowClear
+      ref={ref}
+      value={option}
+      style={{
+        width: 100,
+      }}
+      onChange={setOption}
+    >
+      <Option value="courtesycars.readiness.ready">
+        {t("courtesycars.readiness.ready")}
+      </Option>
+      <Option value="courtesycars.readiness.notready">
+        {t("courtesycars.readiness.notready")}
+      </Option>
+    </Select>
+  );
+};
+export default forwardRef(CourtesyCarReadinessComponent);

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

@@ -9,15 +9,15 @@ import {
   Table,
   Tooltip,
 } from "antd";
+import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
-import { alphaSort } from "../../utils/sorters";
-import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
-import moment from "moment";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort } from "../../utils/sorters";
+import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
   const [state, setState] = useState({
     sortedInfo: {},
@@ -74,10 +74,11 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       render: (text, record) => {
         const { nextservicedate, nextservicekm, mileage } = record;
 
-        const mileageOver = nextservicekm <= mileage;
+        const mileageOver = nextservicekm ? nextservicekm <= mileage : false;
 
         const dueForService =
-          nextservicedate && moment(nextservicedate).isBefore(moment());
+          nextservicedate &&
+          moment(nextservicedate).endOf("day").isSameOrBefore(moment());
 
         return (
           <Space>
@@ -91,6 +92,26 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
         );
       },
     },
+    {
+      title: t("courtesycars.fields.readiness"),
+      dataIndex: "readiness",
+      key: "readiness",
+      sorter: (a, b) => alphaSort(a.readiness, b.readiness),
+      filters: [
+        {
+          text: t("courtesycars.readiness.ready"),
+          value: "courtesycars.readiness.ready",
+        },
+        {
+          text: t("courtesycars.readiness.notready"),
+          value: "courtesycars.readiness.notready",
+        },
+      ],
+      onFilter: (value, record) => value.includes(record.readiness),
+      sortOrder:
+        state.sortedInfo.columnKey === "readiness" && state.sortedInfo.order,
+      render: (text, record) => t(record.readiness),
+    },
     {
       title: t("courtesycars.fields.year"),
       dataIndex: "year",
@@ -115,6 +136,14 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       sortOrder:
         state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
     },
+    {
+      title: t("courtesycars.fields.color"),
+      dataIndex: "color",
+      key: "color",
+      sorter: (a, b) => alphaSort(a.color, b.color),
+      sortOrder:
+        state.sortedInfo.columnKey === "color" && state.sortedInfo.order,
+    },
     {
       title: t("courtesycars.fields.plate"),
       dataIndex: "plate",
@@ -123,6 +152,36 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       sortOrder:
         state.sortedInfo.columnKey === "plate" && state.sortedInfo.order,
     },
+    {
+      title: t("courtesycars.fields.fuel"),
+      dataIndex: "fuel",
+      key: "fuel",
+      sorter: (a, b) => alphaSort(a.fuel, b.fuel),
+      sortOrder:
+        state.sortedInfo.columnKey === "fuel" && state.sortedInfo.order,
+      render: (text, record) => {
+        switch (record.fuel) {
+          case 100:
+            return t("courtesycars.labels.fuel.full");
+          case 88:
+            return t("courtesycars.labels.fuel.78");
+          case 63:
+            return t("courtesycars.labels.fuel.58");
+          case 50:
+            return t("courtesycars.labels.fuel.12");
+          case 38:
+            return t("courtesycars.labels.fuel.34");
+          case 25:
+            return t("courtesycars.labels.fuel.14");
+          case 13:
+            return t("courtesycars.labels.fuel.18");
+          case 0:
+            return t("courtesycars.labels.fuel.empty");
+          default:
+            return record.fuel;
+        }
+      },
+    },
     {
       title: t("courtesycars.labels.outwith"),
       dataIndex: "outwith",
@@ -166,6 +225,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           (c.year || "").toLowerCase().includes(searchText.toLowerCase()) ||
           (c.make || "").toLowerCase().includes(searchText.toLowerCase()) ||
           (c.model || "").toLowerCase().includes(searchText.toLowerCase()) ||
+          (c.plate || "").toLowerCase().includes(searchText.toLowerCase()) ||
           (t(c.status) || "").toLowerCase().includes(searchText.toLowerCase())
       )
     : courtesycars;

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -7,6 +7,7 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";
 
 export default function CsiResponseListPaginated({
   refetch,
@@ -106,7 +107,7 @@ export default function CsiResponseListPaginated({
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: total,
         }}

client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx

@@ -6,6 +6,7 @@ import { alphaSort } from "../../../utils/sorters";
 import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
 import Dinero from "dinero.js";
 import DashboardRefreshRequired from "../refresh-required.component";
+import {pageLimit} from "../../../utils/config";
 
 export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
   const { t } = useTranslation();
@@ -118,7 +119,7 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
         <div style={{ height: "100%" }}>
           <Table
             onChange={handleTableChange}
-            pagination={{ position: "top", defaultPageSize: 50 }}
+            pagination={{ position: "top", defaultPageSize: pageLimit }}
             columns={columns}
             scroll={{ x: true, y: "calc(100% - 4em)" }}
             rowKey="id"

client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx

@@ -11,6 +11,7 @@ import { Link } from "react-router-dom";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
 import DashboardRefreshRequired from "../refresh-required.component";
+import {pageLimit} from "../../../utils/config";
 
 export default function DashboardScheduledInToday({ data, ...cardProps }) {
   const { t } = useTranslation();
@@ -195,7 +196,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
       <div style={{ height: "100%" }}>
         <Table
           onChange={handleTableChange}
-          pagination={{ position: "top", defaultPageSize: 50 }}
+          pagination={{ position: "top", defaultPageSize: pageLimit }}
           columns={columns}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"

client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx

@@ -11,6 +11,7 @@ import { Link } from "react-router-dom";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
 import DashboardRefreshRequired from "../refresh-required.component";
+import {pageLimit} from "../../../utils/config";
 
 export default function DashboardScheduledOutToday({ data, ...cardProps }) {
   const { t } = useTranslation();
@@ -165,7 +166,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       <div style={{ height: "100%" }}>
         <Table
           onChange={handleTableChange}
-          pagination={{ position: "top", defaultPageSize: 50 }}
+          pagination={{ position: "top", defaultPageSize: pageLimit }}
           columns={columns}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"

client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -117,7 +118,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       }
     >
       <Table
-        pagination={{ position: "top", defaultPageSize: 50 }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
         columns={columns}
         rowKey={(record) => `${record.InvoiceNumber}${record.Account}`}
         dataSource={allocationsSummary}

client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

@@ -6,6 +6,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import Dinero from "dinero.js";
 import { SyncOutlined } from "@ant-design/icons";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -94,7 +95,7 @@ export function DmsAllocationsSummary({ socket, bodyshop, jobId, title }) {
         <Alert type="warning" message={t("jobs.labels.dms.disablebillwip")} />
       )}
       <Table
-        pagination={{ position: "top", defaultPageSize: 50 }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
         columns={columns}
         rowKey="center"
         dataSource={allocationsSummary}

client/src/components/dms-post-form/dms-post-form.component.jsx

@@ -191,6 +191,13 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
               >
                 <Switch />
               </Form.Item>
+              <Form.Item
+                name="dms_model_override"
+                label={t("jobs.fields.dms.dms_model_override")}
+                initialValue={false}
+              >
+                <Switch />
+              </Form.Item>
             </Space>
           </div>
         )}

client/src/components/email-overlay/email-overlay.container.jsx

@@ -109,7 +109,7 @@ export function EmailOverlayContainer({
               ]
             : []),
         ],
-        media: selectedMedia.filter((m) => m.isSelected).map((m) => m.src),
+        media: selectedMedia.filter((m) => m.isSelected).map((m) => m.fullsize),
         //attachments,
       });
       notification["success"]({ message: t("emails.successes.sent") });

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

@@ -2,7 +2,7 @@ import { Button, Col, Collapse, Result, Row, Space } from "antd";
 import React from "react";
 import { withTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-
+import * as Sentry from "@sentry/react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -138,7 +138,6 @@ class ErrorBoundary extends React.Component {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withTranslation()(ErrorBoundary));
+export default Sentry.withErrorBoundary(
+  connect(mapStateToProps, mapDispatchToProps)(withTranslation()(ErrorBoundary))
+);

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

@@ -65,8 +65,17 @@ export function FormDatePicker({
       });
     }
 
-    if (_a.isValid() && onChange)
-      onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+    if (_a.isValid() && onChange) {
+      if (onlyFuture) {
+        if (moment().subtract(1, "day").isBefore(_a)) {
+          onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+        } else {
+          onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
+        }
+      } else {
+        onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+      }
+    }
   };
 
   return (

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

@@ -1,9 +1,9 @@
 import React, { forwardRef } from "react";
 //import DatePicker from "react-datepicker";
 //import "react-datepicker/src/stylesheets/datepicker.scss";
-import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import { TimePicker } from "antd";
 import moment from "moment";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 //To be used as a form element only.
 
 const DateTimePicker = (
@@ -26,20 +26,21 @@ const DateTimePicker = (
         value={value}
         onBlur={onBlur}
         onChange={onChange}
+        onlyFuture={onlyFuture}
         isDateOnly={false}
       />
 
       <TimePicker
-      value={value ? moment(value) : null}
-      {...(onlyFuture && {
-        disabledDate: (d) => moment().isAfter(d),
-      })}
-      onChange={onChange}
-      showSecond={false}
-      minuteStep={15}
-      onBlur={onBlur}
-      format="hh:mm a"
-      {...restProps}
+        value={value ? moment(value) : null}
+        {...(onlyFuture && {
+          disabledDate: (d) => moment().isAfter(d),
+        })}
+        onChange={onChange}
+        showSecond={false}
+        minuteStep={15}
+        onBlur={onBlur}
+        format="hh:mm a"
+        {...restProps}
       />
     </div>
   );

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

@@ -54,6 +54,7 @@ export default function GlobalSearchOs() {
                         job.v_make_desc || ""
                       } ${job.v_model_desc || ""}`}</span>
                       <span>{`${job.clm_no || ""}`}</span>
+                      <span>{`${job.plate_no || ""}`}</span>
                     </Space>
                   </Link>
                 ),

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

@@ -13,7 +13,7 @@ import Icon, {
   FileFilled,
   //GlobalOutlined,
   HomeFilled,
-  ImportOutlined,
+  ImportOutlined, InfoCircleOutlined,
   LineChartOutlined,
   PaperClipOutlined,
   PhoneOutlined,
@@ -26,8 +26,8 @@ import Icon, {
   UserOutlined,
 } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu } from "antd";
-import React from "react";
+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 {
@@ -52,6 +52,7 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import {handleBeta, setBeta, checkBeta} from "../../utils/handleBeta";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -102,9 +103,21 @@ function Header({
     {},
     bodyshop && bodyshop.imexshopid
   );
+  const [betaSwitch, setBetaSwitch] = useState(false);
 
   const { t } = useTranslation();
 
+  useEffect(() => {
+    const isBeta = checkBeta();
+    setBetaSwitch(isBeta);
+  }, []);
+
+  const betaSwitchChange = (checked) => {
+    setBeta(checked);
+    setBetaSwitch(checked);
+    handleBeta();
+  }
+
   return (
     <Layout.Header>
       <Menu
@@ -431,6 +444,17 @@ function Header({
             </Menu.Item>
           ))}
         </Menu.SubMenu>
+        <Menu.Item style={{marginLeft: 'auto'}} key="profile">
+          <Tooltip title="A more modern ImEX Online is ready for you to try! You can switch back at any time.">
+            <InfoCircleOutlined/>
+            <span style={{marginRight: 8}}>Try the new ImEX Online</span>
+            <Switch
+                checked={betaSwitch}
+                onChange={betaSwitchChange}
+            />
+          </Tooltip>
+        </Menu.Item>
+
       </Menu>
     </Layout.Header>
   );

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

@@ -11,6 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import InventoryBillRo from "../inventory-bill-ro/inventory-bill-ro.component";
 import InventoryLineDelete from "../inventory-line-delete/inventory-line-delete.component";
+import {pageLimit} from "../../utils/config";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -213,7 +214,7 @@ export function JobsList({
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: total,
         }}

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

@@ -11,6 +11,7 @@ import {
 } from "../../redux/application/application.actions";
 import AlertComponent from "../alert/alert.component";
 import InventoryListPaginated from "./inventory-list.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //bodyshop: selectBodyshop,
@@ -32,8 +33,8 @@ export function InventoryList({ setBreadcrumbs, setSelectedHeader }) {
       nextFetchPolicy: "network-only",
       variables: {
         search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         consumedIsNull: showall === "true" ? null : true,
         order: [
           {

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

@@ -4,6 +4,7 @@ import {
   Divider,
   Dropdown,
   Form,
+  Input,
   Menu,
   notification,
   Popover,
@@ -34,6 +35,8 @@ import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
+import { useMutation } from "@apollo/client";
+import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -58,16 +61,44 @@ export function ScheduleEventComponent({
   const [visible, setVisible] = useState(false);
   const history = useHistory();
   const searchParams = queryString.parse(useLocation().search);
-
+  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
+  const [title, setTitle] = useState(event.title);
   const blockContent = (
-    <div>
+    <Space direction="vertical" wrap>
+      <Input
+        value={title}
+        onChange={(e) => setTitle(e.currentTarget.value)}
+        onBlur={async () => {
+          await updateAppointment({
+            variables: {
+              appid: event.id,
+              app: {
+                title: title,
+              },
+            },
+            optimisticResponse: {
+              update_appointments: {
+                __typename: "appointments_mutation_response",
+                returning: [
+                  {
+                    ...event,
+                    title: title,
+                    __typename: "appointments",
+                  },
+                ],
+              },
+            },
+          });
+        }}
+      />
+
       <Button
         onClick={() => handleCancel({ id: event.id })}
         disabled={event.arrived}
       >
-        {t("appointments.actions.cancel")}
+        {t("appointments.actions.unblock")}
       </Button>
-    </div>
+    </Space>
   );
 
   const popoverContent = (

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

@@ -2,12 +2,16 @@ import { useMutation } from "@apollo/client";
 import { notification } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENT_BY_ID } from "../../graphql/appointments.queries";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import ScheduleEventComponent from "./schedule-event.component";
 
 export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
+  const dispatch = useDispatch();
   const { t } = useTranslation();
   const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
   const [updateJob] = useMutation(UPDATE_JOB);
@@ -34,16 +38,24 @@ export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
       const jobUpdate = await updateJob({
         variables: {
           jobId: event.job.id,
-
           job: {
             date_scheduled: null,
             scheduled_in: null,
             scheduled_completion: null,
             lost_sale_reason,
+            date_lost_sale: new Date(),
             status: bodyshop.md_ro_statuses.default_imported,
           },
         },
       });
+      if (!jobUpdate.errors) {
+        dispatch(
+          insertAuditTrail({
+            jobid: event.job.id,
+            operation: AuditTrailMapping.appointmentcancel(lost_sale_reason),
+          })
+        );
+      }
       if (!!jobUpdate.errors) {
         notification["error"]({
           message: t("jobs.errors.updating", {

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

@@ -1,5 +1,6 @@
 import { useMutation } from "@apollo/client";
 import { Button, Card, Form, Input, notification, Switch } from "antd";
+import moment from "moment-business-days";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,16 +13,15 @@ import {
   MARK_LATEST_APPOINTMENT_ARRIVED,
 } from "../../../../graphql/appointments.queries";
 import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
+import { UPDATE_OWNER } from "../../../../graphql/owners.queries";
+import { insertAuditTrail } from "../../../../redux/application/application.actions";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../../../redux/user/user.selectors";
+import AuditTrailMapping from "../../../../utils/AuditTrailMappings";
 import ConfigFormComponents from "../../../config-form-components/config-form-components.component";
 import DateTimePicker from "../../../form-date-time-picker/form-date-time-picker.component";
-import moment from "moment-business-days";
-import { insertAuditTrail } from "../../../../redux/application/application.actions";
-import AuditTrailMapping from "../../../../utils/AuditTrailMappings";
-import { UPDATE_OWNER } from "../../../../graphql/owners.queries";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -230,6 +230,7 @@ export function JobChecklistForm({
                 )),
             scheduled_delivery:
               job.scheduled_delivery && moment(job.scheduled_delivery),
+            production_vars: job.production_vars,
           }),
           ...(type === "deliver" && {
             removeFromProduction: true,

client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import Dinero from "dinero.js";
+import {pageLimit} from "../../utils/config";
 export default function JobCostingPartsTable({ data, summaryData }) {
   const [searchText, setSearchText] = useState("");
   const [state, setState] = useState({
@@ -98,7 +99,7 @@ export default function JobCostingPartsTable({ data, summaryData }) {
           x: "50%", //y: "40rem"
         }}
         onChange={handleTableChange}
-        pagination={{ position: "top", defaultPageSize: 50 }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         dataSource={filteredData}

client/src/components/job-create-iou/job-create-iou.component.jsx

@@ -7,21 +7,31 @@ import { connect } from "react-redux";
 import { useHistory } from "react-router";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINES_IOU } from "../../graphql/jobs-lines.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import { CreateIouForJob } from "../jobs-detail-header-actions/jobs-detail-header-actions.duplicate.util";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser,
+  technician: selectTechnician,
 });
+
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobCreateIOU);
 
-export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
+export function JobCreateIOU({
+  bodyshop,
+  currentUser,
+  job,
+  selectedJobLines,
+  technician,
+}) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const client = useApolloClient();
@@ -79,13 +89,19 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
       title={t("jobs.labels.createiouwarning")}
       onConfirm={handleCreateIou}
       disabled={
-        !selectedJobLines || selectedJobLines.length === 0 || !job.converted
+        !selectedJobLines ||
+        selectedJobLines.length === 0 ||
+        !job.converted ||
+        technician
       }
     >
       <Button
         loading={loading}
         disabled={
-          !selectedJobLines || selectedJobLines.length === 0 || !job.converted
+          !selectedJobLines ||
+          selectedJobLines.length === 0 ||
+          !job.converted ||
+          technician
         }
       >
         {t("jobs.actions.createiou")}

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

@@ -1,15 +1,37 @@
-import React from "react";
 import { Card } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 
-export default function JobDetailCardTemplate({
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobDetailCardTemplate);
+
+export function JobDetailCardTemplate({
   loading,
   title,
   extraLink,
+  technician,
   ...otherProps
 }) {
+  const { t } = useTranslation();
+
   let extra;
-  if (extraLink) extra = { extra: <Link to={extraLink}>More</Link> };
+  if (extraLink && !technician)
+    extra = {
+      extra: <Link to={extraLink}>{t("jobs.labels.cards.more")}</Link>,
+    };
   return (
     <Card
       size="small"

client/src/components/job-lifecycle/job-lifecycle.component.jsx

@@ -0,0 +1,246 @@
+import React, {useCallback, useEffect, useState} from 'react';
+import moment from "moment";
+import axios from 'axios';
+import {Badge, Card, Space, Table, Tag} from 'antd';
+import {gql, useQuery} from "@apollo/client";
+import {DateTimeFormatterFunction} from "../../utils/DateFormatter";
+import {isEmpty} from "lodash";
+import {useTranslation} from "react-i18next";
+
+require('./job-lifecycle.styles.scss');
+
+// show text on bar if text can fit
+export function JobLifecycleComponent({job, statuses, ...rest}) {
+    const [loading, setLoading] = useState(true);
+    const [lifecycleData, setLifecycleData] = useState(null);
+    const {t} = useTranslation();    // Used for tracking external state changes.
+
+    const {data} = useQuery(gql`
+        query get_job_test($id: uuid!){
+            jobs_by_pk(id:$id){
+                id
+                status
+            }
+        }
+    `, {
+        variables: {
+            id: job.id
+        },
+        fetchPolicy: 'cache-only'
+    });
+
+    /**
+     * Gets the lifecycle data for the job.
+     * @returns {Promise<void>}
+     */
+    const getLifecycleData = useCallback(async () => {
+        if (job && job.id && statuses && statuses.statuses) {
+            try {
+                setLoading(true);
+                const response = await axios.post("/job/lifecycle", {
+                    jobids: job.id,
+                    statuses: statuses.statuses
+                });
+                const data = response.data.transition[job.id];
+                setLifecycleData(data);
+            } catch (err) {
+                console.error(`${t('job_lifecycle.errors.fetch')}: ${err.message}`);
+            } finally {
+                setLoading(false);
+            }
+        }
+    }, [job, statuses, t]);
+
+    useEffect(() => {
+        if (!data) return;
+        setTimeout(() => {
+            getLifecycleData().catch(err => console.error(`${t('job_lifecycle.errors.fetch')}: ${err.message}`));
+        }, 500);
+    }, [data, getLifecycleData, t]);
+
+    const columns = [
+        {
+            title: t('job_lifecycle.columns.value'),
+            dataIndex: 'value',
+            key: 'value',
+        },
+        {
+            title: t('job_lifecycle.columns.start'),
+            dataIndex: 'start',
+            key: 'start',
+            render: (text) => DateTimeFormatterFunction(text),
+            sorter: (a, b) => moment(a.start).unix() - moment(b.start).unix(),
+        },
+        {
+            title: t('job_lifecycle.columns.relative_start'),
+            dataIndex: 'start_readable',
+            key: 'start_readable',
+        },
+        {
+            title: t('job_lifecycle.columns.end'),
+            dataIndex: 'end',
+            key: 'end',
+            sorter: (a, b) => {
+                if (isEmpty(a.end) || isEmpty(b.end)) {
+                    if (isEmpty(a.end) && isEmpty(b.end)) {
+                        return 0;
+                    }
+                    return isEmpty(a.end) ? 1 : -1;
+                }
+                return moment(a.end).unix() - moment(b.end).unix();
+            },
+            render: (text) => isEmpty(text) ? t('job_lifecycle.content.not_available') : DateTimeFormatterFunction(text)
+        },
+        {
+            title: t('job_lifecycle.columns.relative_end'),
+            dataIndex: 'end_readable',
+            key: 'end_readable',
+        },
+        {
+            title: t('job_lifecycle.columns.duration'),
+            dataIndex: 'duration_readable',
+            key: 'duration_readable',
+            sorter: (a, b) => a.duration - b.duration,
+        },
+    ];
+
+    return (
+        <Card loading={loading} title={t('job_lifecycle.content.title')}>
+            {!loading ? (
+                lifecycleData && lifecycleData.lifecycle && lifecycleData.durations ? (
+                    <Space direction='vertical' style={{width: '100%'}}>
+                        <Card
+                            type='inner'
+                            title={(
+                                <Space direction='horizontal' size='small'>
+                                    <Badge status='processing' count={lifecycleData.durations.totalStatuses}/>
+                                    {t('job_lifecycle.content.title_durations')}
+                                </Space>
+
+                            )}
+                            style={{width: '100%'}}
+                        >
+                            <div id="bar-container" style={{
+                                display: 'flex',
+                                width: '100%',
+                                height: '100px',
+                                textAlign: 'center',
+                                borderRadius: '5px',
+                                borderWidth: '5px',
+                                borderStyle: 'solid',
+                                borderColor: '#f0f2f5',
+                                margin: 0,
+                                padding: 0
+                            }}>
+                                {lifecycleData.durations.summations.map((key, index, array) => {
+                                    const isFirst = index === 0;
+                                    const isLast = index === array.length - 1;
+                                    return (
+                                        <div key={key.status} style={{
+                                            overflow: 'hidden',
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            margin: 0,
+                                            padding: 0,
+
+                                            borderTop: '1px solid #f0f2f5',
+                                            borderBottom: '1px solid #f0f2f5',
+                                            borderLeft: isFirst ? '1px solid #f0f2f5' : undefined,
+                                            borderRight: isLast ? '1px solid #f0f2f5' : undefined,
+
+                                            backgroundColor: key.color,
+                                            width: `${key.percentage}%`
+                                        }}
+                                             aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                                             title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                                        >
+
+                                            {key.percentage > 15 ?
+                                                <>
+                                                    <div>{key.roundedPercentage}</div>
+                                                    <div style={{
+                                                        backgroundColor: '#f0f2f5',
+                                                        borderRadius: '5px',
+                                                        paddingRight: '2px',
+                                                        paddingLeft: '2px',
+                                                        fontSize: '0.8rem',
+                                                    }}>
+                                                        {key.status}
+                                                    </div>
+                                                </>
+                                                : null}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                            <Card type='inner' title={t('job_lifecycle.content.legend_title')}
+                                  style={{marginTop: '10px'}}>
+                                <div>
+                                    {lifecycleData.durations.summations.map((key) => (
+                                        <Tag color={key.color} style={{width: '13vh', padding: '4px', margin: '4px'}}>
+                                            <div
+                                                aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                                                title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                                                style={{
+                                                    backgroundColor: '#f0f2f5',
+                                                    color: '#000',
+                                                    padding: '4px',
+                                                    textAlign: 'center'
+                                                }}>
+                                                {key.status} ({key.roundedPercentage})
+                                            </div>
+                                        </Tag>
+                                    ))}
+                                </div>
+                            </Card>
+                            {(lifecycleData?.durations?.humanReadableTotal) ||
+                            (lifecycleData.lifecycle[0] && lifecycleData.lifecycle[0].value && lifecycleData?.durations?.totalCurrentStatusDuration?.humanReadable) ?
+                                <Card style={{marginTop: '10px'}}>
+                                    <ul>
+                                        {lifecycleData.durations && lifecycleData.durations.humanReadableTotal &&
+                                            <li>
+                                                <span
+                                                    style={{fontWeight: 'bold'}}>{t('job_lifecycle.content.previous_status_accumulated_time')}:</span> {lifecycleData.durations.humanReadableTotal}
+                                            </li>
+                                        }
+                                        {lifecycleData.lifecycle[0] && lifecycleData.lifecycle[0].value && lifecycleData?.durations?.totalCurrentStatusDuration?.humanReadable &&
+                                            <li>
+                                                <span
+                                                    style={{fontWeight: 'bold'}}>{t('job_lifecycle.content.current_status_accumulated_time')} ({lifecycleData.lifecycle[0].value}):</span> {lifecycleData.durations.totalCurrentStatusDuration.humanReadable}
+                                            </li>
+                                        }
+                                    </ul>
+                                </Card>
+                                : null}
+                        </Card>
+                        <Card type='inner' title={(
+                            <>
+                                <Space direction="horizontal" size="small">
+                                    <Badge status='processing' count={lifecycleData.lifecycle.length}/>
+                                    {t('job_lifecycle.content.title_transitions')}
+                                </Space>
+                            </>
+                        )}>
+                            <Table style={{
+                                overflow: 'auto',
+                                width: '100%',
+                            }} columns={columns} dataSource={lifecycleData.lifecycle}/>
+                        </Card>
+                    </Space>
+                ) : (
+                    <Card type='inner' style={{textAlign: 'center'}}>
+                        {t('job_lifecycle.content.data_unavailable')}
+                    </Card>
+                )
+            ) : (
+                <Card type='inner' title={t('job_lifecycle.content.title_loading')}>
+                    {t('job_lifecycle.content.loading')}
+                </Card>
+            )}
+        </Card>
+    );
+}
+
+export default JobLifecycleComponent;

client/src/components/job-line-location-popup/job-line-location-popup.component.jsx

@@ -1,6 +1,6 @@
+import { useMutation } from "@apollo/client";
 import { notification, Select } from "antd";
 import React, { useEffect, useState } from "react";
-import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -56,8 +56,10 @@ export function JobLineLocationPopup({ bodyshop, jobline, disabled }) {
         <LoadingSpinner loading={loading}>
           <Select
             autoFocus
+            allowClear
             dropdownMatchSelectWidth={100}
             value={location}
+            onClear={() => setLocation(null)}
             onSelect={handleChange}
             onBlur={handleSave}
           >

client/src/components/job-lines-bill-reference/job-lines-bill-reference.component.jsx

@@ -8,7 +8,7 @@ export default function JobLinesBillRefernece({ jobline }) {
   return (
     <div style={{ color: subletRequired && "tomato" }}>
       {subletRequired && <WarningFilled />}
-      {`${(billLine.actual_price * billLine.quantity).toFixed(2)} (${
+      {`${billLine.actual_price.toFixed(2)} x ${billLine.quantity} (${
         billLine.bill.vendor.name
       } #${billLine.bill.invoice_number})`}
     </div>

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

@@ -33,7 +33,9 @@ const JobSearchSelect = (
     useLazyQuery(SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE);
 
   const executeSearch = (v) => {
-    if (v && v !== "") callSearch(v);
+    console.log(v);
+    if (v && v.variables?.search !== "" && v.variables.search.length >= 2)
+      callSearch(v);
   };
   const debouncedExecuteSearch = _.debounce(executeSearch, 500);
 

client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx

@@ -53,12 +53,14 @@ export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
   );
 
   return (
-    <Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
-      <Button shape="round">
-        <span>{job.status}</span>
+    <>
+      <Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
+        <Button shape="round">
+          <span>{job.status}</span>
 
-        <DownCircleFilled />
-      </Button>
-    </Dropdown>
+          <DownCircleFilled />
+        </Button>
+      </Dropdown>
+    </>
   );
 }

client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx

@@ -13,6 +13,7 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { insertAuditTrail } from "../../redux/application/application.actions";
+import { DateTimeFormat } from "./../../utils/DateFormatter";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -53,7 +54,7 @@ export function JobsAdminDatesChange({ insertAuditTrail, job }) {
         operation: AuditTrailMapping.admin_jobfieldchange(
           key,
           changedAuditFields[key] instanceof moment
-            ? moment(changedAuditFields[key]).format("MM/DD/YYYY hh:mm a")
+            ? DateTimeFormat(changedAuditFields[key])
             : changedAuditFields[key]
         ),
       });
@@ -179,6 +180,12 @@ export function JobsAdminDatesChange({ insertAuditTrail, job }) {
           <Form.Item label={t("jobs.fields.date_void")} name="date_void">
             <DateTimePicker />
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.date_lost_sale")}
+            name="date_lost_sale"
+          >
+            <DateTimePicker />
+          </Form.Item>
         </LayoutFormRow>
       </Form>
 

client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx

@@ -1,34 +1,18 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
-import { gql } from "@apollo/client";
+import { Button, Space, notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import {
+  DELETE_DELIVERY_CHECKLIST,
+  DELETE_INTAKE_CHECKLIST,
+} from "../../graphql/jobs.queries";
+
 export default function JobAdminDeleteIntake({ job }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const [deleteIntake] = useMutation(gql`
-    mutation DELETE_INTAKE($jobId: uuid!) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { intakechecklist: null }
-      ) {
-        id
-        intakechecklist
-      }
-    }
-  `);
 
-  const [DELETE_DELIVERY] = useMutation(gql`
-    mutation DELETE_DELIVERY($jobId: uuid!) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { deliverchecklist: null }
-      ) {
-        id
-        deliverchecklist
-      }
-    }
-  `);
+  const [deleteIntake] = useMutation(DELETE_INTAKE_CHECKLIST);
+  const [deleteDelivery] = useMutation(DELETE_DELIVERY_CHECKLIST);
 
   const handleDelete = async (values) => {
     setLoading(true);
@@ -50,7 +34,7 @@ export default function JobAdminDeleteIntake({ job }) {
 
   const handleDeleteDelivery = async (values) => {
     setLoading(true);
-    const result = await DELETE_DELIVERY({
+    const result = await deleteDelivery({
       variables: { jobId: job.id },
     });
 
@@ -68,12 +52,22 @@ export default function JobAdminDeleteIntake({ job }) {
 
   return (
     <>
-      <Button loading={loading} onClick={handleDelete}>
-        {t("jobs.labels.deleteintake")}
-      </Button>
-      <Button loading={loading} onClick={handleDeleteDelivery}>
-        {t("jobs.labels.deletedelivery")}
-      </Button>
+      <Space wrap>
+        <Button
+          loading={loading}
+          onClick={handleDelete}
+          disabled={!job.intakechecklist}
+        >
+          {t("jobs.labels.deleteintake")}
+        </Button>
+        <Button
+          loading={loading}
+          onClick={handleDeleteDelivery}
+          disabled={!job.deliverychecklist}
+        >
+          {t("jobs.labels.deletedelivery")}
+        </Button>
+      </Space>
     </>
   );
 }

client/src/components/jobs-admin-mark-reexport/jobs-admin-mark-reexport.component.jsx

@@ -1,5 +1,5 @@
-import { gql, useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { useMutation } from "@apollo/client";
+import { Button, Space, notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -7,6 +7,11 @@ import moment from "moment";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
+import {
+  MARK_JOB_AS_EXPORTED,
+  MARK_JOB_AS_UNINVOICED,
+  MARK_JOB_FOR_REEXPORT,
+} from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import {
   selectBodyshop,
@@ -35,58 +40,18 @@ export function JobAdminMarkReexport({
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
-  const [markJobForReexport] = useMutation(gql`
-    mutation MARK_JOB_FOR_REEXPORT($jobId: uuid!) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { date_exported: null
-        status: "${bodyshop.md_ro_statuses.default_invoiced}"
-        }
-      ) {
-        id
-        date_exported
-        status
-        date_invoiced
-      }
-    }
-  `);
 
-  const [markJobExported] = useMutation(gql`
-    mutation MARK_JOB_AS_EXPORTED($jobId: uuid!, $date_exported: timestamptz!) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { date_exported: $date_exported
-        status: "${bodyshop.md_ro_statuses.default_exported}"
-        }
-      ) {
-        id
-        date_exported
-        date_invoiced
-        status
-      }
-    }
-  `);
-  const [markJobUninvoiced] = useMutation(gql`
-    mutation MARK_JOB_AS_UNINVOICED($jobId: uuid!, ) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { date_exported: null
-          date_invoiced: null
-        status: "${bodyshop.md_ro_statuses.default_delivered}"
-        }
-      ) {
-        id
-        date_exported
-        date_invoiced
-        status
-      }
-    }
-  `);
+  const [markJobForReexport] = useMutation(MARK_JOB_FOR_REEXPORT);
+  const [markJobExported] = useMutation(MARK_JOB_AS_EXPORTED);
+  const [markJobUninvoiced] = useMutation(MARK_JOB_AS_UNINVOICED);
 
   const handleMarkForExport = async () => {
     setLoading(true);
     const result = await markJobForReexport({
-      variables: { jobId: job.id },
+      variables: {
+        jobId: job.id,
+        default_invoiced: bodyshop.md_ro_statuses.default_invoiced,
+      },
     });
 
     if (!result.errors) {
@@ -108,7 +73,11 @@ export function JobAdminMarkReexport({
   const handleMarkExported = async () => {
     setLoading(true);
     const result = await markJobExported({
-      variables: { jobId: job.id, date_exported: moment() },
+      variables: {
+        jobId: job.id,
+        date_exported: moment(),
+        default_exported: bodyshop.md_ro_statuses.default_exported,
+      },
     });
 
     await insertExportLog({
@@ -144,7 +113,10 @@ export function JobAdminMarkReexport({
   const handleUninvoice = async () => {
     setLoading(true);
     const result = await markJobUninvoiced({
-      variables: { jobId: job.id },
+      variables: {
+        jobId: job.id,
+        default_delivered: bodyshop.md_ro_statuses.default_delivered,
+      },
     });
 
     if (!result.errors) {
@@ -165,27 +137,29 @@ export function JobAdminMarkReexport({
 
   return (
     <>
-      <Button
-        loading={loading}
-        disabled={!job.date_exported}
-        onClick={handleMarkForExport}
-      >
-        {t("jobs.labels.markforreexport")}
-      </Button>
-      <Button
-        loading={loading}
-        disabled={job.date_exported}
-        onClick={handleMarkExported}
-      >
-        {t("jobs.actions.markasexported")}
-      </Button>
-      <Button
-        loading={loading}
-        disabled={!job.date_invoiced || job.date_exported}
-        onClick={handleUninvoice}
-      >
-        {t("jobs.actions.uninvoice")}
-      </Button>
+      <Space wrap>
+        <Button
+          loading={loading}
+          disabled={!job.date_exported}
+          onClick={handleMarkForExport}
+        >
+          {t("jobs.labels.markforreexport")}
+        </Button>
+        <Button
+          loading={loading}
+          disabled={job.date_exported}
+          onClick={handleMarkExported}
+        >
+          {t("jobs.actions.markasexported")}
+        </Button>
+        <Button
+          loading={loading}
+          disabled={!job.date_invoiced || job.date_exported}
+          onClick={handleUninvoice}
+        >
+          {t("jobs.actions.uninvoice")}
+        </Button>
+      </Space>
     </>
   );
 }

client/src/components/jobs-admin-remove-ar/jobs-admin-remove-ar.component.jsx

@@ -0,0 +1,65 @@
+import { useMutation } from "@apollo/client";
+import { Switch, notification } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_REMOVE_FROM_AR } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+
+const mapStateToProps = createStructuredSelector({});
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobsAdminRemoveAR);
+
+export function JobsAdminRemoveAR({ insertAuditTrail, job }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [switchValue, setSwitchValue] = useState(job.remove_from_ar);
+
+  const [mutationUpdateRemoveFromAR] = useMutation(UPDATE_REMOVE_FROM_AR);
+
+  const handleChange = async (value) => {
+    setLoading(true);
+    const result = await mutationUpdateRemoveFromAR({
+      variables: { jobId: job.id, remove_from_ar: value },
+    });
+
+    if (!result.errors) {
+      notification["success"]({ message: t("jobs.successes.save") });
+      insertAuditTrail({
+        jobid: job.id,
+        operation: AuditTrailMapping.admin_job_remove_from_ar(value),
+      });
+      setSwitchValue(value);
+    } else {
+      notification["error"]({
+        message: t("jobs.errors.saving", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <div style={{ marginRight: "10px" }}>
+          {t("jobs.labels.remove_from_ar")}:
+        </div>
+        <div>
+          <Switch
+            checked={switchValue}
+            loading={loading}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

client/src/components/jobs-admin-unvoid/jobs-admin-unvoid.component.jsx

@@ -1,9 +1,10 @@
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { UNVOID_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import {
   selectBodyshop,
@@ -29,66 +30,17 @@ export function JobsAdminUnvoid({
 }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const [updateJob] = useMutation(gql`
-mutation UNVOID_JOB($jobId: uuid!) {
-  update_jobs_by_pk(pk_columns: {id: $jobId}, _set: {voided: false, status: "${
-    bodyshop.md_ro_statuses.default_imported
-  }", date_void: null}) {
-    id
-    date_void
-    voided
-    status
-  }
-  insert_notes(objects: {jobid: $jobId, audit: true, created_by: "${
-    currentUser.email
-  }", text: "${t("jobs.labels.unvoidnote")}"}) {
-    returning {
-      id
-    }
-  }
-}
-
-  `);
-
-  //       const result = await voidJob({
-  //     variables: {
-  //       jobId: job.id,
-  //       job: {
-  //         status: bodyshop.md_ro_statuses.default_void,
-  //         voided: true,
-  //       },
-  //       note: [
-  //         {
-  //           jobid: job.id,
-  //           created_by: currentUser.email,
-  //           audit: true,
-  //           text: t("jobs.labels.voidnote", {
-  //             date: moment().format("MM/DD/yyy"),
-  //             time: moment().format("hh:mm a"),
-  //           }),
-  //         },
-  //       ],
-  //     },
-  //   });
-
-  //   if (!!!result.errors) {
-  //     notification["success"]({
-  //       message: t("jobs.successes.voided"),
-  //     });
-  //     //go back to jobs list.
-  //     history.push(`/manage/`);
-  //   } else {
-  //     notification["error"]({
-  //       message: t("jobs.errors.voiding", {
-  //         error: JSON.stringify(result.errors),
-  //       }),
-  //     });
-  //   }
+  const [mutationUnvoidJob] = useMutation(UNVOID_JOB);
 
   const handleUpdate = async (values) => {
     setLoading(true);
-    const result = await updateJob({
-      variables: { jobId: job.id },
+    const result = await mutationUnvoidJob({
+      variables: {
+        jobId: job.id,
+        default_imported: bodyshop.md_ro_statuses.default_imported,
+        currentUserEmail: currentUser.email,
+        text: t("jobs.labels.unvoidnote"),
+      },
     });
 
     if (!result.errors) {
@@ -110,8 +62,10 @@ mutation UNVOID_JOB($jobId: uuid!) {
   };
 
   return (
-    <Button loading={loading} disabled={!job.voided} onClick={handleUpdate}>
-      {t("jobs.actions.unvoid")}
-    </Button>
+    <>
+      <Button loading={loading} disabled={!job.voided} onClick={handleUpdate}>
+        {t("jobs.actions.unvoid")}
+      </Button>
+    </>
   );
 }

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

@@ -1,6 +1,6 @@
-import { GET_ALL_JOBLINES_BY_PK } from "../../graphql/jobs-lines.queries";
 import { gql } from "@apollo/client";
 import _ from "lodash";
+import { GET_ALL_JOBLINES_BY_PK } from "../../graphql/jobs-lines.queries";
 
 export const GetSupplementDelta = async (client, jobId, newLines) => {
   const {
@@ -50,7 +50,7 @@ export const GetSupplementDelta = async (client, jobId, newLines) => {
     .reduce((acc, value, idx) => {
       return acc + generateRemoveQuery(value, idx);
     }, "");
-  console.log(insertQueries, updateQueries, removeQueries);
+  //console.log(insertQueries, updateQueries, removeQueries);
 
   if ((insertQueries + updateQueries + removeQueries).trim() === "") {
     return new Promise((resolve, reject) => {

client/src/components/jobs-available-table/jobs-available-supplement.headerfields.js

@@ -114,7 +114,7 @@ const headerFields = [
   "ins_ct_ph",
   "ins_ct_phx",
   "loss_cat",
-  //ad2
+  //AD2
   "clmt_ln",
   "clmt_fn",
   "clmt_title",
@@ -219,7 +219,16 @@ const headerFields = [
   "loc_title",
   "loc_ph",
   "loc_phx",
-  "loc_ea"
+  "loc_ea",
+  //VEH
+  "plate_no",
+  "plate_st",
+  "v_vin",
+  "v_model_yr",
+  "v_make_desc",
+  "v_model_desc",
+  "v_options",
+  "v_color",
 ];
 
 export default headerFields;

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

@@ -73,6 +73,8 @@ export function JobsAvailableContainer({
 
   const [selectedJob, setSelectedJob] = useState(null);
   const [selectedOwner, setSelectedOwner] = useState(null);
+  const [partsQueueToggle, setPartsQueueToggle] = useState(bodyshop.md_functionality_toggles.parts_queue_toggle);
+
   const [insertLoading, setInsertLoading] = useState(false);
 
   const [insertNote] = useMutation(INSERT_NEW_NOTE);
@@ -94,6 +96,7 @@ export function JobsAvailableContainer({
     logImEXEvent("job_import_new");
 
     setOwnerModalVisible(false);
+
     setInsertLoading(true);
 
     const estData = replaceEmpty(estDataRaw.data.available_jobs_by_pk);
@@ -120,7 +123,7 @@ export function JobsAvailableContainer({
 
     let existingVehicles;
     if (estData.est_data.v_vin) {
-      //There's vehicle data, need to double check the VIN.
+      //There's vehicle data, need to double-check the VIN.
       existingVehicles = await client.query({
         query: SEARCH_VEHICLE_BY_VIN,
         variables: {
@@ -143,7 +146,7 @@ export function JobsAvailableContainer({
           text: t("jobs.labels.importnote"),
         },
       },
-      queued_for_parts: true,
+      queued_for_parts: partsQueueToggle,
       ...(existingVehicles && existingVehicles.data.vehicles.length > 0
         ? { vehicleid: existingVehicles.data.vehicles[0].id, vehicle: null }
         : {}),
@@ -157,46 +160,51 @@ export function JobsAvailableContainer({
       delete newJob.vehicle;
     }
 
-    insertNewJob({
-      variables: {
-        job: newJob,
-      },
-    })
-      .then((r) => {
-        if (CriticalPartsScanning.treatment === "on") {
-          CriticalPartsScan(r.data.insert_jobs.returning[0].id);
-        }
-        notification["success"]({
-          message: t("jobs.successes.created"),
-          onClick: () => {
-            history.push(`/manage/jobs/${r.data.insert_jobs.returning[0].id}`);
-          },
-        });
-        //Job has been inserted. Clean up the available jobs record.
+    try {
+      const r = await insertNewJob({
+        variables: {
+          job: newJob,
+        },
+      });
 
-        insertAuditTrail({
-          jobid: r.data.insert_jobs.returning[0].id,
-          operation: AuditTrailMapping.jobimported(),
-        });
+      if (CriticalPartsScanning.treatment === "on") {
+        CriticalPartsScan(r.data.insert_jobs.returning[0].id);
+      }
 
-        deleteJob({
-          variables: { id: estData.id },
-        }).then((r) => {
-          refetch();
-          setInsertLoading(false);
-        });
-      })
-      .catch((r) => {
-        //error while inserting
-        notification["error"]({
-          message: t("jobs.errors.creating", { error: r.message }),
-        });
+      notification["success"]({
+        message: t("jobs.successes.created"),
+        onClick: () => {
+          history.push(`/manage/jobs/${r.data.insert_jobs.returning[0].id}`);
+        },
+      });
+      //Job has been inserted. Clean up the available jobs record.
+
+      insertAuditTrail({
+        jobid: r.data.insert_jobs.returning[0].id,
+        operation: AuditTrailMapping.jobimported(),
+      });
+
+      deleteJob({
+        variables: { id: estData.id },
+      }).then((r) => {
         refetch();
         setInsertLoading(false);
       });
+
+      setPartsQueueToggle(bodyshop.md_functionality_toggles.parts_queue_toggle);
+    } catch (err) {
+      //error while inserting
+      notification["error"]({
+        message: t("jobs.errors.creating", { error: err.message }),
+      });
+      refetch().catch(e => {console.error(`Something went wrong in jobs available table container - ${err.message || ''}`)});
+      setInsertLoading(false);
+      setPartsQueueToggle(bodyshop.md_functionality_toggles.parts_queue_toggle);
+    }
+
   };
 
-  //Suplement scenario
+  //Supplement scenario
   const onJobFindModalOk = async () => {
     logImEXEvent("job_import_supplement");
 
@@ -248,11 +256,14 @@ export function JobsAvailableContainer({
             //   "0.00"
             // ),
             // job_totals: newTotals,
-            // queued_for_parts: true,
+            queued_for_parts: partsQueueToggle,
           },
         },
       });
-      if (CriticalPartsScanning.treatment === "on") {
+
+        setPartsQueueToggle(bodyshop.md_functionality_toggles.parts_queue_toggle);
+
+        if (CriticalPartsScanning.treatment === "on") {
         CriticalPartsScan(updateResult.data.update_jobs.returning[0].id);
       }
       if (updateResult.errors) {
@@ -327,12 +338,14 @@ export function JobsAvailableContainer({
   const onOwnerModalCancel = () => {
     setOwnerModalVisible(false);
     setSelectedOwner(null);
+    setPartsQueueToggle(bodyshop.md_functionality_toggles.parts_queue_toggle);
   };
 
   const onJobModalCancel = () => {
     setJobModalVisible(false);
     modalSearchState[1]("");
     setSelectedJob(null);
+    setPartsQueueToggle(bodyshop.md_functionality_toggles.parts_queue_toggle);
   };
 
   const addJobAsNew = (record) => {
@@ -353,6 +366,8 @@ export function JobsAvailableContainer({
   }, [addJobAsSupp, availableJobId, clm_no]);
 
   if (error) return <AlertComponent type="error" message={error.message} />;
+
+
   return (
     <LoadingSpinner
       loading={insertLoading}
@@ -362,11 +377,14 @@ export function JobsAvailableContainer({
         loading={estDataRaw.loading}
         error={estDataRaw.error}
         owner={owner}
+        partsQueueToggle={partsQueueToggle}
+        setPartsQueueToggle={setPartsQueueToggle}
         selectedOwner={selectedOwner}
         setSelectedOwner={setSelectedOwner}
         visible={ownerModalVisible}
         onOk={onOwnerFindModalOk}
         onCancel={onOwnerModalCancel}
+
       />
       <JobsFindModalContainer
         loading={estDataRaw.loading}
@@ -378,6 +396,8 @@ export function JobsAvailableContainer({
         onOk={onJobFindModalOk}
         onCancel={onJobModalCancel}
         modalSearchState={modalSearchState}
+        partsQueueToggle={partsQueueToggle}
+        setPartsQueueToggle={setPartsQueueToggle}
       />
       <Row gutter={[16, 16]}>
         <Col span={24}>

client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

@@ -108,7 +108,7 @@ export function JobsConvertButton({
             },
           ]}
         >
-          <Select>
+          <Select showSearch>
             {bodyshop.md_ins_cos.map((s, i) => (
               <Select.Option key={i} value={s.name}>
                 {s.name}

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

@@ -19,10 +19,13 @@ export default function JobsCreateOwnerInfoNewComponent() {
           label={t("owners.fields.ownr_ln")}
           name={["owner", "data", "ownr_ln"]}
           rules={[
-            {
-              required: state.owner.new,
+            ({ getFieldValue }) => ({
+              required:
+                state.owner.new &&
+                (!getFieldValue(["owner", "data", "ownr_co_nm"]) ||
+                  getFieldValue(["owner", "data", "ownr_co_nm"]) === ""),
               //message: t("general.validation.required"),
-            },
+            }),
           ]}
         >
           <Input disabled={!state.owner.new} />
@@ -31,10 +34,13 @@ export default function JobsCreateOwnerInfoNewComponent() {
           label={t("owners.fields.ownr_fn")}
           name={["owner", "data", "ownr_fn"]}
           rules={[
-            {
-              required: state.owner.new,
+            ({ getFieldValue }) => ({
+              required:
+                state.owner.new &&
+                (!getFieldValue(["owner", "data", "ownr_co_nm"]) ||
+                  getFieldValue(["owner", "data", "ownr_co_nm"]) === ""),
               //message: t("general.validation.required"),
-            },
+            }),
           ]}
         >
           <Input disabled={!state.owner.new} />
@@ -51,6 +57,17 @@ export default function JobsCreateOwnerInfoNewComponent() {
         <Form.Item
           label={t("owners.fields.ownr_co_nm")}
           name={["owner", "data", "ownr_co_nm"]}
+          rules={[
+            ({ getFieldValue }) => ({
+              required:
+                state.owner.new &&
+                (!getFieldValue(["owner", "data", "ownr_ln"]) ||
+                  !getFieldValue(["owner", "data", "ownr_fn"]) ||
+                  getFieldValue(["owner", "data", "ownr_ln"]) === "" ||
+                  getFieldValue(["owner", "data", "ownr_fn"]) === ""),
+              //message: t("general.validation.required"),
+            }),
+          ]}
         >
           <Input disabled={!state.owner.new} />
         </Form.Item>

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

@@ -145,6 +145,13 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
         <Form.Item label={t("jobs.fields.date_void")} name="date_void">
           <DateTimePicker disabled={true || jobRO} />
         </Form.Item>
+
+        <Form.Item
+          label={t("jobs.fields.date_lost_sale")}
+          name="date_lost_sale"
+        >
+          <DateTimePicker disabled={true || jobRO} />
+        </Form.Item>
       </FormRow>
     </div>
   );

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

@@ -18,12 +18,14 @@ import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID } from "../../graphql/appointments.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 { setModalContext } from "../../redux/modals/modals.actions";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 import JobsDetailHeaderActionsAddevent from "./jobs-detail-header-actions.addevent";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
@@ -50,6 +52,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setModalContext({ context: context, modal: "timeTicket" })),
   setCardPaymentContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "cardPayment" })),
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
 });
 
 export function JobsDetailHeaderActions({
@@ -64,6 +68,7 @@ export function JobsDetailHeaderActions({
   jobRO,
   setTimeTicketContext,
   setCardPaymentContext,
+  insertAuditTrail,
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -103,6 +108,14 @@ export function JobsDetailHeaderActions({
         },
       },
     });
+    insertAuditTrail({
+      jobid: job.id,
+      operation: AuditTrailMapping.alertToggle(
+        !!job.production_vars && !!job.production_vars.alert
+          ? !job.production_vars.alert
+          : true
+      ),
+    });
   };
 
   const handleSuspend = (e) => {
@@ -158,6 +171,7 @@ export function JobsDetailHeaderActions({
                         scheduled_in: null,
                         scheduled_completion: null,
                         lost_sale_reason,
+                        date_lost_sale: new Date(),
                         status: bodyshop.md_ro_statuses.default_imported,
                       },
                     },
@@ -166,6 +180,11 @@ export function JobsDetailHeaderActions({
                     notification["success"]({
                       message: t("appointments.successes.canceled"),
                     });
+                    insertAuditTrail({
+                      jobid: job.id,
+                      operation:
+                        AuditTrailMapping.appointmentcancel(lost_sale_reason),
+                    });
                     return;
                   }
                 }}

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.duplicate.util.js

@@ -27,6 +27,8 @@ export default async function DuplicateJob(
   delete existingJob.id;
   delete existingJob.createdat;
   delete existingJob.updatedat;
+  delete existingJob.cieca_stl;
+  delete existingJob.cieca_ttl;
 
   const newJob = {
     ...existingJob,
@@ -81,6 +83,8 @@ export async function CreateIouForJob(
   delete existingJob.id;
   delete existingJob.createdat;
   delete existingJob.updatedat;
+  delete existingJob.cieca_stl;
+  delete existingJob.cieca_ttl;
 
   const newJob = {
     ...existingJob,

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

@@ -1,8 +1,8 @@
 import {
+  BranchesOutlined,
   ExclamationCircleFilled,
   PauseCircleOutlined,
   WarningFilled,
-  BranchesOutlined,
 } from "@ant-design/icons";
 import { Card, Col, Row, Space, Tag, Tooltip } from "antd";
 import React, { useState } from "react";
@@ -15,6 +15,7 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
 import JobAltTransportChange from "../job-at-change/job-at-change.component";
@@ -160,19 +161,35 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
         <Card
           style={{ height: "100%" }}
           title={
-            <Link to={disabled ? "#" : `/manage/owners/${job.owner.id}`}>
-              {ownerTitle.length > 0
-                ? ownerTitle
-                : t("owner.labels.noownerinfo")}
-            </Link>
+            disabled ? (
+              <>
+                {ownerTitle.length > 0
+                  ? ownerTitle
+                  : t("owner.labels.noownerinfo")}
+              </>
+            ) : (
+              <Link to={`/manage/owners/${job.owner.id}`}>
+                {ownerTitle.length > 0
+                  ? ownerTitle
+                  : t("owner.labels.noownerinfo")}
+              </Link>
+            )
           }
         >
           <div>
             <DataLabel key="2" label={t("jobs.fields.ownr_ph1")}>
-              <ChatOpenButton phone={job.ownr_ph1} jobid={job.id} />
+              {disabled ? (
+                <PhoneNumberFormatter>{job.ownr_ph1}</PhoneNumberFormatter>
+              ) : (
+                <ChatOpenButton phone={job.ownr_ph1} jobid={job.id} />
+              )}
             </DataLabel>
             <DataLabel key="22" label={t("jobs.fields.ownr_ph2")}>
-              <ChatOpenButton phone={job.ownr_ph2} jobid={job.id} />
+              {disabled ? (
+                <PhoneNumberFormatter>{job.ownr_ph2}</PhoneNumberFormatter>
+              ) : (
+                <ChatOpenButton phone={job.ownr_ph2} jobid={job.id} />
+              )}
             </DataLabel>
             <DataLabel key="3" label={t("owners.fields.address")}>
               {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
@@ -180,7 +197,11 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
               } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
             </DataLabel>
             <DataLabel key="4" label={t("owners.fields.ownr_ea")}>
-              {job.ownr_ea || ""}
+              {disabled ? (
+                <>{job.ownr_ea || ""}</>
+              ) : job.ownr_ea ? (
+                <a href={`mailto:${job.ownr_ea}`}>{job.ownr_ea}</a>
+              ) : null}
             </DataLabel>
             {job.owner?.tax_number && (
               <DataLabel key="5" label={t("owners.fields.tax_number")}>
@@ -195,17 +216,19 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
           style={{ height: "100%" }}
           title={
             job.vehicle ? (
-              <Link
-                to={
-                  disabled
-                    ? "#"
-                    : job.vehicle && `/manage/vehicles/${job.vehicle.id}`
-                }
-              >
-                {vehicleTitle.length > 0
-                  ? vehicleTitle
-                  : t("vehicles.labels.novehinfo")}
-              </Link>
+              disabled ? (
+                <>
+                  {vehicleTitle.length > 0
+                    ? vehicleTitle
+                    : t("vehicles.labels.novehinfo")}{" "}
+                </>
+              ) : (
+                <Link to={job.vehicle && `/manage/vehicles/${job.vehicle.id}`}>
+                  {vehicleTitle.length > 0
+                    ? vehicleTitle
+                    : t("vehicles.labels.novehinfo")}
+                </Link>
+              )
             ) : (
               <span></span>
             )
@@ -221,9 +244,19 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
               <VehicleVinDisplay>
                 {`${job.v_vin || t("general.labels.na")}`}
               </VehicleVinDisplay>
+              {bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
+                job.v_vin?.length !== 17 ? (
+                  <WarningFilled
+                    style={{ color: "tomato", marginLeft: ".3rem" }}
+                  />
+                ) : null
+              ) : null}
+            </DataLabel>
+            <DataLabel label={t("jobs.fields.regie_number")}>
+              {job.regie_number || t("general.labels.na")}
             </DataLabel>
             <DataLabel label={t("jobs.labels.relatedros")}>
-              <JobsRelatedRos jobid={job.id} job={job} />
+              <JobsRelatedRos jobid={job.id} job={job} disabled={disabled} />
             </DataLabel>
             {job.vehicle && job.vehicle.notes && (
               <DataLabel

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
-import { GenerateThumbUrl } from "./job-documents.utility";
+import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";
 
 function JobsDocumentGalleryExternal({
   data,
@@ -15,7 +15,7 @@ function JobsDocumentGalleryExternal({
     let documents = data.reduce((acc, value) => {
       if (value.type.startsWith("image")) {
         acc.push({
-          //src: GenerateSrcUrl(value),
+          fullsize: GenerateSrcUrl(value),
           src: GenerateThumbUrl(value),
           thumbnailHeight: 225,
           thumbnailWidth: 225,

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

@@ -52,7 +52,7 @@ function JobDocumentsLocalGalleryExternal({
               val.type.mime &&
               val.type.mime.startsWith("image")
             ) {
-              acc.push({ ...val, src: val.thumbnail });
+              acc.push({ ...val, src: val.thumbnail, fullsize: val.src });
             }
             return acc;
           }, [])

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

@@ -14,6 +14,8 @@ export default function JobsFindModalComponent({
   importOptionsState,
   modalSearchState,
   jobsListRefetch,
+  partsQueueToggle,
+  setPartsQueueToggle,
 }) {
   const { t } = useTranslation();
   const [modalSearch, setModalSearch] = modalSearchState;
@@ -199,6 +201,12 @@ export default function JobsFindModalComponent({
       >
         {t("jobs.labels.override_header")}
       </Checkbox>
+      <Checkbox
+          checked={partsQueueToggle}
+          onChange={(e) => setPartsQueueToggle(e.target.checked)}
+      >
+        {t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
+      </Checkbox>
     </div>
   );
 }

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

@@ -24,6 +24,8 @@ export default connect(
   setSelectedJob,
   importOptionsState,
   modalSearchState,
+  partsQueueToggle,
+  setPartsQueueToggle,
   ...modalProps
 }) {
   const { t } = useTranslation();
@@ -91,6 +93,8 @@ export default connect(
           jobsListRefetch={jobsList.refetch}
           jobsList={jobsData}
           modalSearchState={modalSearchState}
+          partsQueueToggle={partsQueueToggle}
+          setPartsQueueToggle={setPartsQueueToggle}
         />
       ) : null}
     </Modal>

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

@@ -10,6 +10,8 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { pageLimit } from "../../utils/config";
+import useLocalStorage from "../../utils/useLocalStorage";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 const mapStateToProps = createStructuredSelector({
@@ -24,6 +26,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
   const search = queryString.parse(useLocation().search);
   const [openSearchResults, setOpenSearchResults] = useState([]);
   const [searchLoading, setSearchLoading] = useState(false);
+  const [filter, setFilter] = useLocalStorage("filter_jobs_all", null);
   const { page, sortcolumn, sortorder } = search;
   const history = useHistory();
 
@@ -33,17 +36,14 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
-
       sorter: true, //(a, b) => alphaSort(a.ro_number, b.ro_number),
       sortOrder: sortcolumn === "ro_number" && sortorder,
-
       render: (text, record) => (
         <Link to={"/manage/jobs/" + record.id}>
           {record.ro_number || t("general.labels.na")}
         </Link>
       ),
     },
-
     {
       title: t("jobs.fields.owner"),
       dataIndex: "ownr_ln",
@@ -95,6 +95,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       render: (text, record) => {
         return record.status || t("general.labels.na");
       },
+      filteredValue: filter?.status || null,
       filters: bodyshop.md_ro_statuses.statuses.map((s) => {
         return { text: s, value: [s] };
       }),
@@ -125,7 +126,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("vehicles.fields.plate_no"),
       dataIndex: "plate_no",
       key: "plate_no",
-
       ellipsis: true,
       sorter: true, //(a, b) => alphaSort(a.plate_no, b.plate_no),
       sortOrder: sortcolumn === "plate_no" && sortorder,
@@ -137,7 +137,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.clm_no"),
       dataIndex: "clm_no",
       key: "clm_no",
-
       ellipsis: true,
       sorter: true, //(a, b) => alphaSort(a.clm_no, b.clm_no),
       sortOrder: sortcolumn === "clm_no" && sortorder,
@@ -193,6 +192,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
     } else {
       delete search.statusFilters;
     }
+    setFilter(filters);
     history.push({ search: queryString.stringify(search) });
   };
 
@@ -259,11 +259,11 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
         pagination={
           search?.search
             ? {
-                pageSize: 25,
+                pageSize: pageLimit,
                 showSizeChanger: false,
               }
             : {
-                pageSize: 25,
+                pageSize: pageLimit,
                 current: parseInt(page || 1),
                 total: total,
                 showSizeChanger: false,

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

@@ -1,8 +1,8 @@
 import {
-  SyncOutlined,
+  BranchesOutlined,
   ExclamationCircleFilled,
   PauseCircleOutlined,
-  BranchesOutlined,
+  SyncOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
@@ -14,9 +14,10 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { onlyUnique } from "../../utils/arrayHelper";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort } from "../../utils/sorters";
+import { onlyUnique } from "../../utils/arrayHelper";
+import { alphaSort, statusSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -39,10 +40,8 @@ export function JobsList({ bodyshop }) {
     nextFetchPolicy: "network-only",
   });
 
-  const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" },
-  });
+  const [state, setState] = useState({ sortedInfo: {} });
+  const [filter, setFilter] = useLocalStorage("filter_jobs_list", null);
 
   const { t } = useTranslation();
   const history = useHistory();
@@ -91,7 +90,8 @@ export function JobsList({ bodyshop }) {
     : [];
 
   const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    setState({ ...state, sortedInfo: sorter });
+    setFilter(filters);
   };
 
   const handleOnRowClick = (record) => {
@@ -117,7 +117,6 @@ export function JobsList({ bodyshop }) {
         parseInt((b.ro_number || "0").replace(/\D/g, "")),
       sortOrder:
         state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-
       render: (text, record) => (
         <Link
           to={"/manage/jobs/" + record.id}
@@ -145,7 +144,6 @@ export function JobsList({ bodyshop }) {
       dataIndex: "owner",
       key: "owner",
       ellipsis: true,
-
       responsive: ["md"],
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       sortOrder:
@@ -185,16 +183,15 @@ export function JobsList({ bodyshop }) {
         <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
       ),
     },
-
     {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
       ellipsis: true,
-
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filteredValue: filter?.status || null,
       filters:
         (jobs &&
           jobs
@@ -205,7 +202,14 @@ export function JobsList({ bodyshop }) {
                 text: s || "No Status*",
                 value: [s],
               };
-            })) ||
+            })
+            .sort((a, b) =>
+              statusSort(
+                a.text,
+                b.text,
+                bodyshop.md_ro_statuses.active_statuses
+              )
+            )) ||
         [],
       onFilter: (value, record) => value.includes(record.status),
     },
@@ -262,6 +266,7 @@ export function JobsList({ bodyshop }) {
       dataIndex: "ins_co_nm",
       key: "ins_co_nm",
       ellipsis: true,
+      filteredValue: filter?.ins_co_nm || null,
       filters:
         (jobs &&
           jobs
@@ -269,10 +274,11 @@ export function JobsList({ bodyshop }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s,
+                text: s || "No Ins. Co.*",
                 value: [s],
               };
-            })) ||
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
         [],
       onFilter: (value, record) => value.includes(record.ins_co_nm),
       responsive: ["md"],
@@ -283,7 +289,6 @@ export function JobsList({ bodyshop }) {
       key: "clm_total",
       responsive: ["md"],
       ellipsis: true,
-
       sorter: (a, b) => a.clm_total - b.clm_total,
       sortOrder:
         state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
@@ -294,10 +299,11 @@ export function JobsList({ bodyshop }) {
     {
       title: t("jobs.labels.estimator"),
       dataIndex: "jobs.labels.estimator",
-      key: "jobs.labels.estimator",
+      key: "estimator",
       ellipsis: true,
       responsive: ["xl"],
       filterSearch: true,
+      filteredValue: filter?.estimator || null,
       filters:
         (jobs &&
           jobs
@@ -305,10 +311,11 @@ export function JobsList({ bodyshop }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "N/A",
+                text: s || "No Estimator*",
                 value: [s],
               };
-            })) ||
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
         [],
       onFilter: (value, record) =>
         value.includes(

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

@@ -1,8 +1,8 @@
 import {
+  BranchesOutlined,
   ExclamationCircleFilled,
   PauseCircleOutlined,
   SyncOutlined,
-  BranchesOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
@@ -14,9 +14,11 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { onlyUnique } from "../../utils/arrayHelper";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort } from "../../utils/sorters";
+import { onlyUnique } from "../../utils/arrayHelper";
+import { pageLimit } from "../../utils/config";
+import { alphaSort, statusSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -46,15 +48,14 @@ export function JobsReadyList({ bodyshop }) {
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     variables: {
       statuses: readyStatuses,
+      isConverted: true,
     },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });
 
-  const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" },
-  });
+  const [state, setState] = useState({ sortedInfo: {} });
+  const [filter, setFilter] = useLocalStorage("filter_jobs_ready", null);
 
   const { t } = useTranslation();
   const history = useHistory();
@@ -103,7 +104,8 @@ export function JobsReadyList({ bodyshop }) {
     : [];
 
   const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    setState({ ...state, sortedInfo: sorter });
+    setFilter(filters);
   };
 
   const handleOnRowClick = (record) => {
@@ -127,7 +129,6 @@ export function JobsReadyList({ bodyshop }) {
       sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
       sortOrder:
         state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-
       render: (text, record) => (
         <Link
           to={"/manage/jobs/" + record.id}
@@ -155,7 +156,6 @@ export function JobsReadyList({ bodyshop }) {
       dataIndex: "owner",
       key: "owner",
       ellipsis: true,
-
       responsive: ["md"],
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       sortOrder:
@@ -195,16 +195,15 @@ export function JobsReadyList({ bodyshop }) {
         <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
       ),
     },
-
     {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
       ellipsis: true,
-
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filteredValue: filter?.status || null,
       filters:
         (jobs &&
           jobs
@@ -215,11 +214,17 @@ export function JobsReadyList({ bodyshop }) {
                 text: s || "No Status*",
                 value: [s],
               };
-            })) ||
+            })
+            .sort((a, b) =>
+              statusSort(
+                a.text,
+                b.text,
+                bodyshop.md_ro_statuses.active_statuses
+              )
+            )) ||
         [],
       onFilter: (value, record) => value.includes(record.status),
     },
-
     {
       title: t("jobs.fields.vehicle"),
       dataIndex: "vehicle",
@@ -272,6 +277,7 @@ export function JobsReadyList({ bodyshop }) {
       dataIndex: "ins_co_nm",
       key: "ins_co_nm",
       ellipsis: true,
+      filteredValue: filter?.ins_co_nm || null,
       filters:
         (jobs &&
           jobs
@@ -279,10 +285,11 @@ export function JobsReadyList({ bodyshop }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s,
+                text: s || "No Ins Co.*",
                 value: [s],
               };
-            })) ||
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
         [],
       onFilter: (value, record) => value.includes(record.ins_co_nm),
       responsive: ["md"],
@@ -293,7 +300,6 @@ export function JobsReadyList({ bodyshop }) {
       key: "clm_total",
       responsive: ["md"],
       ellipsis: true,
-
       sorter: (a, b) => a.clm_total - b.clm_total,
       sortOrder:
         state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
@@ -304,9 +310,10 @@ export function JobsReadyList({ bodyshop }) {
     {
       title: t("jobs.labels.estimator"),
       dataIndex: "jobs.labels.estimator",
-      key: "jobs.labels.estimator",
+      key: "estimator",
       ellipsis: true,
       responsive: ["xl"],
+      filteredValue: filter?.estimator || null,
       filterSearch: true,
       filters:
         (jobs &&
@@ -315,10 +322,11 @@ export function JobsReadyList({ bodyshop }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "N/A",
+                text: s || "No Estimator*",
                 value: [s],
               };
-            })) ||
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
         [],
       onFilter: (value, record) =>
         value.includes(
@@ -376,7 +384,7 @@ export function JobsReadyList({ bodyshop }) {
     >
       <Table
         loading={loading}
-        pagination={{ defaultPageSize: 50 }}
+        pagination={{ defaultPageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         dataSource={jobs}

client/src/components/jobs-related-ros/jobs-related-ros.component.jsx

@@ -2,7 +2,7 @@ import { Space, Tag } from "antd";
 import React from "react";
 import { Link } from "react-router-dom";
 
-export default function JobsRelatedRos({ jobid, job }) {
+export default function JobsRelatedRos({ jobid, job, disabled }) {
   if (!(job && job.vehicle && job.vehicle.jobs)) return null;
   return (
     <Space wrap>
@@ -10,9 +10,15 @@ export default function JobsRelatedRos({ jobid, job }) {
         .filter((j) => j.id !== job.id)
         .map((j) => (
           <Tag key={j.id}>
-            <Link to={`/manage/jobs/${j?.id}`}>{`${j.ro_number || "N/A"}${
-              j.clm_no ? ` | ${j.clm_no}` : ""
-            }${j.status ? ` | ${j.status}` : ""}`}</Link>
+            {disabled ? (
+              <>{`${j.ro_number || "N/A"}${j.clm_no ? ` | ${j.clm_no}` : ""}${
+                j.status ? ` | ${j.status}` : ""
+              }`}</>
+            ) : (
+              <Link to={`/manage/jobs/${j?.id}`}>{`${j.ro_number || "N/A"}${
+                j.clm_no ? ` | ${j.clm_no}` : ""
+              }${j.status ? ` | ${j.status}` : ""}`}</Link>
+            )}
           </Tag>
         ))}
     </Space>

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

@@ -8,10 +8,11 @@ export default function OwnerFindModalComponent({
   setSelectedOwner,
   ownersListLoading,
   ownersList,
+  partsQueueToggle,
+  setPartsQueueToggle,
 }) {
   //setSelectedOwner is used to set the record id of the owner to use for adding the job.
   const { t } = useTranslation();
-
   const columns = [
     {
       title: t("owners.fields.ownr_ln"),
@@ -109,6 +110,12 @@ export default function OwnerFindModalComponent({
       >
         {t("owners.labels.create_new")}
       </Checkbox>
+      <Checkbox
+          checked={partsQueueToggle}
+          onChange={(e) => setPartsQueueToggle(e.target.checked)}
+      >
+        {t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
+      </Checkbox>
     </div>
   );
 }

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

@@ -14,6 +14,8 @@ export default function OwnerFindModalContainer({
   owner,
   selectedOwner,
   setSelectedOwner,
+  partsQueueToggle,
+  setPartsQueueToggle,
   ...modalProps
 }) {
   //use owner object to run query and find what possible owners there are.
@@ -59,6 +61,8 @@ export default function OwnerFindModalContainer({
             selectedOwner={selectedOwner}
             setSelectedOwner={setSelectedOwner}
             ownersListLoading={ownersList.loading}
+            partsQueueToggle={partsQueueToggle}
+            setPartsQueueToggle={setPartsQueueToggle}
             ownersList={
               ownersList.data && ownersList.data.search_owners
                 ? ownersList.data.search_owners

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

@@ -21,7 +21,8 @@ const OwnerSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
     useLazyQuery(SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE);
 
   const executeSearch = (v) => {
-    callSearch(v);
+    if (v && v.variables?.search !== "" && v.variables.search.length >= 2)
+      callSearch(v);
   };
   const debouncedExecuteSearch = _.debounce(executeSearch, 500);
 

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

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";
 
 export default function OwnersListComponent({
   loading,
@@ -106,7 +107,11 @@ export default function OwnersListComponent({
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
-              search.search = value;
+              if (value?.length >= 3) {
+                search.search = value;
+              } else {
+                delete search.search;
+              }
               history.push({ search: queryString.stringify(search) });
             }}
             enterButton
@@ -118,7 +123,7 @@ export default function OwnersListComponent({
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: total,
         }}

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

@@ -5,6 +5,7 @@ import AlertComponent from "../alert/alert.component";
 import OwnersListComponent from "./owners-list.component";
 import queryString from "query-string";
 import { useLocation } from "react-router-dom";
+import {pageLimit} from "../../utils/config";
 
 export default function OwnersListContainer() {
   const searchParams = queryString.parse(useLocation().search);
@@ -16,8 +17,8 @@ export default function OwnersListContainer() {
       nextFetchPolicy: "network-only",
       variables: {
         search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           {
             [sortcolumn || "created_at"]: sortorder

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

@@ -18,6 +18,7 @@ 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
@@ -282,11 +283,11 @@ export function PaymentsListPaginated({
         pagination={
           search?.search
             ? {
-                pageSize: 25,
+                pageSize: pageLimit,
                 showSizeChanger: false,
               }
             : {
-                pageSize: 25,
+                pageSize: pageLimit,
                 current: parseInt(page || 1),
                 total: total,
                 showSizeChanger: false,

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -20,9 +20,9 @@ import ProductionBoardCard from "../production-board-kanban-card/production-boar
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
 import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-settings.component";
 //import "@asseinfo/react-kanban/dist/styles.css";
+import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 import "./production-board-kanban.styles.scss";
 import { createBoardData } from "./production-board-kanban.utils.js";
-import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   technician: selectTechnician,
@@ -115,7 +115,7 @@ export function ProductionBoardKanbanComponent({
       // console.log("==> New Card is somewhere in the middle");
       movedCardNewKanbanParent = newChildCard.kanbanparent;
     } else {
-      throw new Error("==> !!!!!!Couldn't find a parent.!!!! <==");
+      console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
     }
     const newChildCardNewParent = newChildCard ? card.id : null;
     const update = await client.mutate({
@@ -153,6 +153,18 @@ export function ProductionBoardKanbanComponent({
       0
     )
     .toFixed(1);
+  const totalLAB = data
+    .reduce(
+      (acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0),
+      0
+    )
+    .toFixed(1);
+  const totalLAR = data
+    .reduce(
+      (acc, val) => acc + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0),
+      0
+    )
+    .toFixed(1);
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
     .slice(-1)[0];
@@ -236,6 +248,14 @@ export function ProductionBoardKanbanComponent({
               title={t("dashboard.titles.productionhours")}
               value={totalHrs}
             />
+            <Statistic
+              title={t("dashboard.titles.labhours")}
+              value={totalLAB}
+            />
+            <Statistic
+              title={t("dashboard.titles.larhours")}
+              value={totalLAR}
+            />
             <Statistic
               title={t("appointments.labels.inproduction")}
               value={data && data.length}

client/src/components/production-list-columns/production-list-columns.add.component.jsx

@@ -1,7 +1,7 @@
-import React from "react";
 import { Button, Dropdown, Menu } from "antd";
-import dataSource from "./production-list-columns.data";
+import React from "react";
 import { useTranslation } from "react-i18next";
+import dataSource from "./production-list-columns.data";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -24,6 +24,7 @@ export function ProductionColumnsComponent({
   columnState,
   technician,
   bodyshop,
+  data,
   tableState,
 }) {
   const [columns, setColumns] = columnState;
@@ -36,6 +37,7 @@ export function ProductionColumnsComponent({
         bodyshop,
         technician,
         state: tableState,
+        data: data,
         activeStatuses: bodyshop.md_ro_statuses.active_statuses,
       }).filter((i) => i.key === e.key),
     ]);
@@ -46,6 +48,7 @@ export function ProductionColumnsComponent({
     technician,
     state: tableState,
     activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+    data: data,
   });
   const menu = (
     <Menu

client/src/components/production-list-columns/production-list-columns.alert.component.jsx

@@ -1,12 +1,23 @@
 import { ExclamationCircleFilled } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
 import { Dropdown, Menu } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useMutation } from "@apollo/client";
-import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
 
-export default function ProductionListColumnAlert({ record }) {
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
+export function ProductionListColumnAlert({ record, insertAuditTrail }) {
   const { t } = useTranslation();
 
   const [updateAlert] = useMutation(UPDATE_JOB);
@@ -27,6 +38,14 @@ export default function ProductionListColumnAlert({ record }) {
           },
         },
       },
+    });
+    insertAuditTrail({
+      jobid: record.id,
+      operation: AuditTrailMapping.alertToggle(
+        !!record.production_vars && !!record.production_vars.alert
+          ? !record.production_vars.alert
+          : true
+      ),
     }).then(() => {
       if (record.refetch) record.refetch();
     });
@@ -58,3 +77,8 @@ export default function ProductionListColumnAlert({ record }) {
     </Dropdown>
   );
 }
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ProductionListColumnAlert);

client/src/components/production-list-columns/production-list-columns.data.js

@@ -1,4 +1,4 @@
-import { PauseCircleOutlined, BranchesOutlined } from "@ant-design/icons";
+import { BranchesOutlined, PauseCircleOutlined } from "@ant-design/icons";
 import { Space, Tooltip } from "antd";
 import i18n from "i18next";
 import moment from "moment";
@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { TimeFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
+import { onlyUnique } from "../../utils/arrayHelper";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import JobAltTransportChange from "../job-at-change/job-at-change.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
@@ -25,7 +26,7 @@ import ProductionListColumnCategory from "./production-list-columns.status.categ
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
 
-const r = ({ technician, state, activeStatuses, bodyshop }) => {
+const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
   return [
     {
       title: i18n.t("jobs.actions.viewdetail"),
@@ -75,7 +76,14 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
       dataIndex: "ownr",
       key: "ownr",
       ellipsis: true,
-      render: (text, record) => <OwnerNameDisplay ownerObject={record} />,
+      render: (text, record) =>
+        technician ? (
+          <OwnerNameDisplay ownerObject={record} />
+        ) : (
+          <Link to={`/manage/owners/${record.ownerid}`}>
+            <OwnerNameDisplay ownerObject={record} />
+          </Link>
+        ),
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       sortOrder:
         state.sortedInfo.columnKey === "ownr" && state.sortedInfo.order,
@@ -92,13 +100,18 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         ),
       sortOrder:
         state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
-      render: (text, record) => (
-        <Link to={`/manage/vehicles/${record.vehicleid}`}>{`${
-          record.v_model_yr || ""
-        } ${record.v_make_desc || ""} ${record.v_model_desc || ""} ${
-          record.v_color || ""
-        } ${record.plate_no || ""}`}</Link>
-      ),
+      render: (text, record) =>
+        technician ? (
+          <>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+            record.v_model_desc || ""
+          } ${record.v_color || ""} ${record.plate_no || ""}`}</>
+        ) : (
+          <Link to={`/manage/vehicles/${record.vehicleid}`}>{`${
+            record.v_model_yr || ""
+          } ${record.v_make_desc || ""} ${record.v_model_desc || ""} ${
+            record.v_color || ""
+          } ${record.plate_no || ""}`}</Link>
+        ),
     },
     {
       title: i18n.t("jobs.fields.actual_in"),
@@ -455,8 +468,8 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees.find((e) => e.id === a.employee_body)?.first_name,
-          bodyshop.employees.find((e) => e.id === b.employee_body)?.first_name
+          bodyshop.employees?.find((e) => e.id === a.employee_body)?.first_name,
+          bodyshop.employees?.find((e) => e.id === b.employee_body)?.first_name
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment
@@ -474,8 +487,8 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees.find((e) => e.id === a.employee_prep)?.first_name,
-          bodyshop.employees.find((e) => e.id === b.employee_prep)?.first_name
+          bodyshop.employees?.find((e) => e.id === a.employee_prep)?.first_name,
+          bodyshop.employees?.find((e) => e.id === b.employee_prep)?.first_name
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment
@@ -492,8 +505,8 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         state.sortedInfo.columnKey === "employee_csr" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees.find((e) => e.id === a.employee_csr)?.first_name,
-          bodyshop.employees.find((e) => e.id === b.employee_csr)?.first_name
+          bodyshop.employees?.find((e) => e.id === a.employee_csr)?.first_name,
+          bodyshop.employees?.find((e) => e.id === b.employee_csr)?.first_name
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment record={record} type="employee_csr" />
@@ -508,9 +521,9 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees.find((e) => e.id === a.employee_refinish)
+          bodyshop.employees?.find((e) => e.id === a.employee_refinish)
             ?.first_name,
-          bodyshop.employees.find((e) => e.id === b.employee_refinish)
+          bodyshop.employees?.find((e) => e.id === b.employee_refinish)
             ?.first_name
         ),
       render: (text, record) => (
@@ -536,6 +549,36 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         <JobPartsQueueCount parts={record.joblines_status} record={record} />
       ),
     },
+    {
+      title: i18n.t("jobs.labels.estimator"),
+      dataIndex: "estimator",
+      key: "estimator",
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.est_ct_fn || ""} ${a.est_ct_ln || ""}`.trim(),
+          `${b.est_ct_fn || ""} ${b.est_ct_ln || ""}`.trim()
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "estimator" && state.sortedInfo.order,
+      filters:
+        (data &&
+          data
+            .map((j) => `${j.est_ct_fn || ""} ${j.est_ct_ln || ""}`.trim())
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "N/A",
+                value: [s],
+              };
+            })) ||
+        [],
+      onFilter: (value, record) =>
+        value.includes(
+          `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()
+        ),
+      render: (text, record) =>
+        `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim(),
+    },
 
     //Added as a place holder for St Claude. Not implemented as it requires another join for a field used by only 1 client.
     // {

client/src/components/production-list-detail/production-list-detail.component.jsx

@@ -13,12 +13,14 @@ import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import JobAtChange from "../job-at-change/job-at-change.component";
 import JobDetailCardsDocumentsComponent from "../job-detail-cards/job-detail-cards.documents.component";
 import JobDetailCardsNotesComponent from "../job-detail-cards/job-detail-cards.notes.component";
 import JobDetailCardsPartsComponent from "../job-detail-cards/job-detail-cards.parts.component";
+import CardTemplate from "../job-detail-cards/job-detail-cards.template.component";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
 import ScoreboardAddButton from "../job-scoreboard-add-button/job-scoreboard-add-button.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
@@ -103,7 +105,13 @@ export function ProductionListDetail({
       {error && <AlertComponent error={JSON.stringify(error)} />}
       {!loading && data && (
         <div>
-          <JobEmployeeAssignments job={data.jobs_by_pk} refetch={refetch} />
+          <CardTemplate
+            title={t("jobs.labels.employeeassignments")}
+            loading={loading}
+          >
+            <JobEmployeeAssignments job={data.jobs_by_pk} refetch={refetch} />
+          </CardTemplate>
+          <div style={{ height: "8px" }} />
           <Descriptions bordered column={1}>
             <Descriptions.Item label={t("jobs.fields.ro_number")}>
               {theJob.ro_number || ""}
@@ -111,7 +119,7 @@ export function ProductionListDetail({
             <Descriptions.Item label={t("jobs.fields.alt_transport")}>
               <Space>
                 {data.jobs_by_pk.alt_transport || ""}
-                <JobAtChange event={{ job: data.jobs_by_pk }} />
+                <JobAtChange job={data.jobs_by_pk} />
               </Space>
             </Descriptions.Item>
             <Descriptions.Item label={t("jobs.fields.clm_no")}>
@@ -121,15 +129,30 @@ export function ProductionListDetail({
               {theJob.ins_co_nm || ""}
             </Descriptions.Item>
             <Descriptions.Item label={t("jobs.fields.owner")}>
-              <OwnerNameDisplay ownerObject={theJob} />
-              <StartChatButton
-                phone={data.jobs_by_pk.ownr_ph1}
-                jobid={data.jobs_by_pk.id}
-              />
-              <StartChatButton
-                phone={data.jobs_by_pk.ownr_ph2}
-                jobid={data.jobs_by_pk.id}
-              />
+              <Space>
+                <OwnerNameDisplay ownerObject={theJob} />
+                {!technician ? (
+                  <>
+                    <StartChatButton
+                      phone={data.jobs_by_pk.ownr_ph1}
+                      jobid={data.jobs_by_pk.id}
+                    />
+                    <StartChatButton
+                      phone={data.jobs_by_pk.ownr_ph2}
+                      jobid={data.jobs_by_pk.id}
+                    />
+                  </>
+                ) : (
+                  <>
+                    <PhoneNumberFormatter>
+                      {data.jobs_by_pk.ownr_ph1}
+                    </PhoneNumberFormatter>
+                    <PhoneNumberFormatter>
+                      {data.jobs_by_pk.ownr_ph2}
+                    </PhoneNumberFormatter>
+                  </>
+                )}
+              </Space>
             </Descriptions.Item>
             <Descriptions.Item label={t("jobs.fields.vehicle")}>
               {`${theJob.v_model_yr || ""} ${theJob.v_color || ""} ${
@@ -146,21 +169,24 @@ export function ProductionListDetail({
               <DateFormatter>{theJob.scheduled_completion}</DateFormatter>
             </Descriptions.Item>
           </Descriptions>
-
+          <div style={{ height: "8px" }} />
           <JobDetailCardsPartsComponent
             loading={loading}
             data={data ? data.jobs_by_pk : null}
           />
-
+          <div style={{ height: "8px" }} />
           <JobDetailCardsNotesComponent
             loading={loading}
             data={data ? data.jobs_by_pk : null}
           />
           {!bodyshop.uselocalmediaserver && (
-            <JobDetailCardsDocumentsComponent
-              loading={loading}
-              data={data ? data.jobs_by_pk : null}
-            />
+            <>
+              <div style={{ height: "8px" }} />
+              <JobDetailCardsDocumentsComponent
+                loading={loading}
+                data={data ? data.jobs_by_pk : null}
+              />
+            </>
           )}
         </div>
       )}

client/src/components/production-list-table/production-list-print.component.jsx

@@ -55,25 +55,27 @@ export function ProductionListPrint({ bodyshop }) {
           <Menu.SubMenu
             title={t("reportcenter.templates.production_by_technician_one")}
           >
-            {bodyshop.employees.map((e) => (
-              <Menu.Item
-                key={e.id}
-                onClick={async () => {
-                  setLoading(true);
-                  await GenerateDocument(
-                    {
-                      name: production_by_technician_one.key,
-                      variables: { id: e.id },
-                    },
-                    {},
-                    "p"
-                  );
-                  setLoading(false);
-                }}
-              >
-                {e.first_name} {e.last_name}
-              </Menu.Item>
-            ))}
+            {bodyshop.employees
+              .filter((e) => e.active)
+              .map((e) => (
+                <Menu.Item
+                  key={e.id}
+                  onClick={async () => {
+                    setLoading(true);
+                    await GenerateDocument(
+                      {
+                        name: production_by_technician_one.key,
+                        variables: { id: e.id },
+                      },
+                      {},
+                      "p"
+                    );
+                    setLoading(false);
+                  }}
+                >
+                  {e.first_name} {e.last_name}
+                </Menu.Item>
+              ))}
           </Menu.SubMenu>
           <Menu.SubMenu
             title={t("reportcenter.templates.production_by_category_one")}

client/src/components/production-list-table/production-list-table-view-select.component.jsx

@@ -24,6 +24,7 @@ export function ProductionListTable({
   technician,
   currentUser,
   state,
+  data,
   setColumns,
   setState,
 }) {
@@ -41,6 +42,7 @@ export function ProductionListTable({
               bodyshop,
               technician,
               state,
+              data: data,
               activeStatuses: bodyshop.md_ro_statuses.active_statuses,
             }).find((e) => e.key === k.key),
             width: k.width,
@@ -95,6 +97,7 @@ export function ProductionListTable({
           ...ProductionListColumns({
             technician,
             state,
+            data: data,
             activeStatuses: bodyshop.md_ro_statuses.active_statuses,
           }).find((e) => e.key === k.key),
           width: k.width,

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

@@ -10,7 +10,7 @@ import {
   Statistic,
   Table,
 } from "antd";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDragListView from "react-drag-listview";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -79,6 +79,7 @@ export function ProductionListTable({
             bodyshop,
             technician,
             state,
+            data: data,
             activeStatuses: bodyshop.md_ro_statuses.active_statuses,
           }).find((e) => e.key === k.key),
           width: k.width ?? 100,
@@ -87,6 +88,33 @@ export function ProductionListTable({
       []
   );
 
+  useEffect(() => {
+    const newColumns =
+      (state &&
+        matchingColumnConfig &&
+        matchingColumnConfig.columns.columnKeys.map((k) => {
+          return {
+            ...ProductionListColumns({
+              bodyshop,
+              technician,
+              state,
+              data: data,
+              activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+            }).find((e) => e.key === k.key),
+            width: k.width ?? 100,
+          };
+        })) ||
+      [];
+    setColumns(newColumns);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    //state,
+    matchingColumnConfig,
+    bodyshop,
+    technician,
+    data,
+  ]); //State removed from dependency array as it causes race condition when removing columns from table view and is not needed.
+
   const handleTableChange = (pagination, filters, sorter) => {
     setState({
       ...state,
@@ -104,7 +132,8 @@ export function ProductionListTable({
 
   const removeColumn = (e) => {
     const { key } = e;
-    setColumns(columns.filter((i) => i.key !== key));
+    const newColumns = columns.filter((i) => i.key !== key);
+    setColumns(newColumns);
   };
 
   const handleResize =
@@ -184,6 +213,18 @@ export function ProductionListTable({
       0
     )
     .toFixed(1);
+  const totalLAB = data
+    .reduce(
+      (acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0),
+      0
+    )
+    .toFixed(1);
+  const totalLAR = data
+    .reduce(
+      (acc, val) => acc + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0),
+      0
+    )
+    .toFixed(1);
   return (
     <div>
       <PageHeader
@@ -193,6 +234,14 @@ export function ProductionListTable({
               title={t("dashboard.titles.productionhours")}
               value={totalHrs}
             />
+            <Statistic
+              title={t("dashboard.titles.labhours")}
+              value={totalLAB}
+            />
+            <Statistic
+              title={t("dashboard.titles.larhours")}
+              value={totalLAR}
+            />
             <Statistic
               title={t("appointments.labels.inproduction")}
               value={dataSource && dataSource.length}
@@ -207,6 +256,7 @@ export function ProductionListTable({
             <ProductionListColumnsAdd
               columnState={[columns, setColumns]}
               tableState={state}
+              data={data}
             />
             <ProductionListSaveConfigButton
               columns={columns}
@@ -217,6 +267,7 @@ export function ProductionListTable({
               state={state}
               setState={setState}
               setColumns={setColumns}
+              data={data}
             />
 
             <Input

client/src/components/rbac-wrapper/rbac-defaults.js

@@ -55,10 +55,11 @@ const ret = {
   "shiftclock:view": 2,
 
   "shop:config": 4,
-  "shop:rbac": 5,
-  "shop:vendors": 2,
   "shop:dashboard": 3,
+  "shop:rbac": 5,
+  "shop:reportcenter": 2,
   "shop:templates": 4,
+  "shop:vendors": 2,
 
   "temporarydocs:view": 2,
 

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

@@ -68,8 +68,8 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
 
   const handleFinish = async (values) => {
     setLoading(true);
-    const start = values.dates[0];
-    const end = values.dates[1];
+    const start = values.dates ? values.dates[0] : null;
+    const end = values.dates ? values.dates[1] : null;
     const { id } = values;
 
     await GenerateDocument(
@@ -239,20 +239,30 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
             else return null;
           }}
         </Form.Item>
-        <Form.Item
-          name="dates"
-          label={t("reportcenter.labels.dates")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <DatePicker.RangePicker
-            format="MM/DD/YYYY"
-            ranges={DatePIckerRanges}
-          />
+        <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
+          {() => {
+            const key = form.getFieldValue("key");
+            const datedisable = Templates[key] && Templates[key].datedisable;
+            if (datedisable !== true) {
+              return (
+                <Form.Item
+                  name="dates"
+                  label={t("reportcenter.labels.dates")}
+                  rules={[
+                    {
+                      required: true,
+                      //message: t("general.validation.required"),
+                    },
+                  ]}
+                >
+                  <DatePicker.RangePicker
+                    format="MM/DD/YYYY"
+                    ranges={DatePIckerRanges}
+                  />
+                </Form.Item>
+              );
+            } else return null;
+          }}
         </Form.Item>
         <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
           {() => {