IO-2522 Load Level Table Change

Release/2023 12 29

.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

.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

@@ -24138,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>

client/package.json

@@ -7,7 +7,7 @@
     "@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/tracing": "^7.40.0",
@@ -89,8 +89,8 @@
     "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: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",

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-form/bill-form.component.jsx

@@ -79,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]);
@@ -387,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",
@@ -405,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.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-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")}
@@ -214,48 +215,28 @@ 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"),
-            },
-          ]}
+          label={t("courtesycars.fields.readiness")}
+          name="readiness"
         >
-          <InputNumber />
+          <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)
+                nextservicekm && nextservicekm <= form.getFieldValue("mileage");
+              if (mileageOver)
                 return (
                   <Space direction="vertical" style={{ color: "tomato" }}>
                     <span>
@@ -263,6 +244,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 +294,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 +305,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 +336,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

@@ -91,6 +91,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",
@@ -131,6 +151,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",
@@ -174,6 +224,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/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/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.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-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-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/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-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-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";
@@ -222,6 +222,9 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
                 {`${job.v_vin || t("general.labels.na")}`}
               </VehicleVinDisplay>
             </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} />
             </DataLabel>

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

@@ -12,6 +12,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -33,17 +34,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",
@@ -125,7 +123,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 +134,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,
@@ -259,11 +255,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,
-  ExclamationCircleFilled,
-  PauseCircleOutlined,
-  BranchesOutlined,
+    SyncOutlined,
+    ExclamationCircleFilled,
+    PauseCircleOutlined,
+    BranchesOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
@@ -22,374 +22,374 @@ import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 
 export function JobsList({ bodyshop }) {
-  const searchParams = queryString.parse(useLocation().search);
-  const { selected } = searchParams;
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
-    variables: {
-      statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
-    },
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
+    const searchParams = queryString.parse(useLocation().search);
+    const { selected } = searchParams;
+    const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+        .filter((screen) => !!screen[1])
+        .slice(-1)[0];
+    const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+        variables: {
+            statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
+        },
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+    });
 
-  const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" },
-  });
+    const [state, setState] = useState({
+        sortedInfo: {},
+        filteredInfo: { text: "" },
+    });
 
-  const { t } = useTranslation();
-  const history = useHistory();
-  const [searchText, setSearchText] = useState("");
+    const { t } = useTranslation();
+    const history = useHistory();
+    const [searchText, setSearchText] = useState("");
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+    if (error) return <AlertComponent message={error.message} type="error" />;
 
-  const jobs = data
-    ? searchText === ""
-      ? data.jobs
-      : data.jobs.filter(
-          (j) =>
-            (j.ro_number || "")
-              .toString()
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.ownr_co_nm || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.comments || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.ownr_fn || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.ownr_ln || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.plate_no || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.v_model_desc || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.est_ct_fn || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.est_ct_ln || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.v_make_desc || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase())
-        )
-    : [];
+    const jobs = data
+        ? searchText === ""
+            ? data.jobs
+            : data.jobs.filter(
+                (j) =>
+                    (j.ro_number || "")
+                        .toString()
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.ownr_co_nm || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.comments || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.ownr_fn || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.ownr_ln || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase()) ||
+                    (j.plate_no || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.v_model_desc || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.est_ct_fn || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.est_ct_ln || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.v_make_desc || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase())
+            )
+        : [];
 
-  const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-  };
+    const handleTableChange = (pagination, filters, sorter) => {
+        setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    };
 
-  const handleOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        history.push({
-          search: queryString.stringify({
-            ...searchParams,
-            selected: record.id,
-          }),
-        });
-      }
-    }
-  };
+    const handleOnRowClick = (record) => {
+        if (record) {
+            if (record.id) {
+                history.push({
+                    search: queryString.stringify({
+                        ...searchParams,
+                        selected: record.id,
+                    }),
+                });
+            }
+        }
+    };
 
-  const columns = [
-    {
-      title: t("jobs.fields.ro_number"),
-      dataIndex: "ro_number",
-      key: "ro_number",
-      sorter: (a, b) =>
-        parseInt((a.ro_number || "0").replace(/\D/g, "")) -
-        parseInt((b.ro_number || "0").replace(/\D/g, "")),
-      sortOrder:
-        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+    const columns = [
+        {
+            title: t("jobs.fields.ro_number"),
+            dataIndex: "ro_number",
+            key: "ro_number",
+            sorter: (a, b) =>
+                parseInt((a.ro_number || "0").replace(/\D/g, "")) -
+                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}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Space>
-            {record.ro_number || t("general.labels.na")}
-            {record.production_vars && record.production_vars.alert ? (
-              <ExclamationCircleFilled className="production-alert" />
-            ) : null}
-            {record.suspended && (
-              <PauseCircleOutlined style={{ color: "orangered" }} />
-            )}
-            {record.iouparent && (
-              <Tooltip title={t("jobs.labels.iou")}>
-                <BranchesOutlined style={{ color: "orangered" }} />
-              </Tooltip>
-            )}
-          </Space>
-        </Link>
-      ),
-    },
-    {
-      title: t("jobs.fields.owner"),
-      dataIndex: "owner",
-      key: "owner",
-      ellipsis: true,
+            render: (text, record) => (
+                <Link
+                    to={"/manage/jobs/" + record.id}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <Space>
+                        {record.ro_number || t("general.labels.na")}
+                        {record.production_vars && record.production_vars.alert ? (
+                            <ExclamationCircleFilled className="production-alert" />
+                        ) : null}
+                        {record.suspended && (
+                            <PauseCircleOutlined style={{ color: "orangered" }} />
+                        )}
+                        {record.iouparent && (
+                            <Tooltip title={t("jobs.labels.iou")}>
+                                <BranchesOutlined style={{ color: "orangered" }} />
+                            </Tooltip>
+                        )}
+                    </Space>
+                </Link>
+            ),
+        },
+        {
+            title: t("jobs.fields.owner"),
+            dataIndex: "owner",
+            key: "owner",
+            ellipsis: true,
 
-      responsive: ["md"],
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
-      sortOrder:
-        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.ownerid ? (
-          <Link
-            to={"/manage/owners/" + record.ownerid}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <OwnerNameDisplay ownerObject={record} />
-          </Link>
-        ) : (
-          <span>
+            responsive: ["md"],
+            sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+            sortOrder:
+                state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+            render: (text, record) => {
+                return record.ownerid ? (
+                    <Link
+                        to={"/manage/owners/" + record.ownerid}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <OwnerNameDisplay ownerObject={record} />
+                    </Link>
+                ) : (
+                    <span>
             <OwnerNameDisplay ownerObject={record} />
           </span>
-        );
-      },
-    },
-    {
-      title: t("jobs.fields.ownr_ph1"),
-      dataIndex: "ownr_ph1",
-      key: "ownr_ph1",
-      ellipsis: true,
-      responsive: ["md"],
-      render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph1} jobid={record.id} />
-      ),
-    },
-    {
-      title: t("jobs.fields.ownr_ph2"),
-      dataIndex: "ownr_ph2",
-      key: "ownr_ph2",
-      ellipsis: true,
-      responsive: ["md"],
-      render: (text, record) => (
-        <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,
-      filters:
-        (jobs &&
-          jobs
-            .map((j) => j.status)
-            .filter(onlyUnique)
-            .map((s) => {
-              return {
-                text: s || "No Status*",
-                value: [s],
-              };
-            })) ||
-        [],
-      onFilter: (value, record) => value.includes(record.status),
-    },
-
-    {
-      title: t("jobs.fields.vehicle"),
-      dataIndex: "vehicle",
-      key: "vehicle",
-      ellipsis: true,
-      render: (text, record) => {
-        return record.vehicleid ? (
-          <Link
-            to={"/manage/vehicles/" + record.vehicleid}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-              record.v_model_desc || ""
-            }`}
-          </Link>
-        ) : (
-          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-            record.v_model_desc || ""
-          }`}</span>
-        );
-      },
-    },
-    {
-      title: t("vehicles.fields.plate_no"),
-      dataIndex: "plate_no",
-      key: "plate_no",
-      ellipsis: true,
-
-      responsive: ["md"],
-      sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
-      sortOrder:
-        state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
-    },
-    {
-      title: t("jobs.fields.clm_no"),
-      dataIndex: "clm_no",
-      key: "clm_no",
-      ellipsis: true,
-      responsive: ["md"],
-      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
-      sortOrder:
-        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
-      render: (text, record) =>
-        `${record.clm_no || ""}${
-          record.po_number ? ` (PO: ${record.po_number})` : ""
-        }`,
-    },
-    {
-      title: t("jobs.fields.ins_co_nm"),
-      dataIndex: "ins_co_nm",
-      key: "ins_co_nm",
-      ellipsis: true,
-      filters:
-        (jobs &&
-          jobs
-            .map((j) => j.ins_co_nm)
-            .filter(onlyUnique)
-            .map((s) => {
-              return {
-                text: s,
-                value: [s],
-              };
-            })) ||
-        [],
-      onFilter: (value, record) => value.includes(record.ins_co_nm),
-      responsive: ["md"],
-    },
-    {
-      title: t("jobs.fields.clm_total"),
-      dataIndex: "clm_total",
-      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,
-      render: (text, record) => (
-        <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
-      ),
-    },
-    {
-      title: t("jobs.labels.estimator"),
-      dataIndex: "jobs.labels.estimator",
-      key: "jobs.labels.estimator",
-      ellipsis: true,
-      responsive: ["xl"],
-      filterSearch: true,
-      filters:
-        (jobs &&
-          jobs
-            .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(),
-    },
-    {
-      title: t("jobs.fields.comment"),
-      dataIndex: "comment",
-      key: "comment",
-      ellipsis: true,
-      responsive: ["md"],
-    },
-    // {
-    //   title: t("jobs.fields.owner_owing"),
-    //   dataIndex: "owner_owing",
-    //   key: "owner_owing",
-    //   responsive: ["md"],
-    //   render: (text, record) => (
-    //     <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
-    //   ),
-    // },
-  ];
-
-  const scrollMapper = {
-    xs: true,
-    sm: true,
-    md: true,
-    lg: "100%",
-    xl: "100%",
-    xxl: "100%",
-  };
-
-  return (
-    <Card
-      title={t("titles.bc.jobs-active")}
-      extra={
-        <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
-          <Input.Search
-            placeholder={t("general.labels.search")}
-            onChange={(e) => {
-              setSearchText(e.target.value);
-            }}
-            value={searchText}
-            enterButton
-          />
-        </Space>
-      }
-    >
-      <Table
-        loading={loading}
-        pagination={{ defaultPageSize: 50 }}
-        columns={columns}
-        rowKey="id"
-        dataSource={jobs}
-        scroll={{
-          x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%",
-        }}
-        rowSelection={{
-          onSelect: (record) => {
-            handleOnRowClick(record);
-          },
-          selectedRowKeys: [selected],
-          type: "radio",
-        }}
-        onChange={handleTableChange}
-        onRow={(record, rowIndex) => {
-          return {
-            onClick: (event) => {
-              handleOnRowClick(record);
+                );
             },
-          };
-        }}
-      />
-    </Card>
-  );
+        },
+        {
+            title: t("jobs.fields.ownr_ph1"),
+            dataIndex: "ownr_ph1",
+            key: "ownr_ph1",
+            ellipsis: true,
+            responsive: ["md"],
+            render: (text, record) => (
+                <ChatOpenButton phone={record.ownr_ph1} jobid={record.id} />
+            ),
+        },
+        {
+            title: t("jobs.fields.ownr_ph2"),
+            dataIndex: "ownr_ph2",
+            key: "ownr_ph2",
+            ellipsis: true,
+            responsive: ["md"],
+            render: (text, record) => (
+                <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,
+            filters:
+                (jobs &&
+                    jobs
+                        .map((j) => j.status)
+                        .filter(onlyUnique)
+                        .map((s) => {
+                            return {
+                                text: s || "No Status*",
+                                value: [s],
+                            };
+                        })) ||
+                [],
+            onFilter: (value, record) => value.includes(record.status),
+        },
+
+        {
+            title: t("jobs.fields.vehicle"),
+            dataIndex: "vehicle",
+            key: "vehicle",
+            ellipsis: true,
+            render: (text, record) => {
+                return record.vehicleid ? (
+                    <Link
+                        to={"/manage/vehicles/" + record.vehicleid}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                            record.v_model_desc || ""
+                        }`}
+                    </Link>
+                ) : (
+                    <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                        record.v_model_desc || ""
+                    }`}</span>
+                );
+            },
+        },
+        {
+            title: t("vehicles.fields.plate_no"),
+            dataIndex: "plate_no",
+            key: "plate_no",
+            ellipsis: true,
+
+            responsive: ["md"],
+            sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
+            sortOrder:
+                state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
+        },
+        {
+            title: t("jobs.fields.clm_no"),
+            dataIndex: "clm_no",
+            key: "clm_no",
+            ellipsis: true,
+            responsive: ["md"],
+            sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
+            sortOrder:
+                state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
+            render: (text, record) =>
+                `${record.clm_no || ""}${
+                    record.po_number ? ` (PO: ${record.po_number})` : ""
+                }`,
+        },
+        {
+            title: t("jobs.fields.ins_co_nm"),
+            dataIndex: "ins_co_nm",
+            key: "ins_co_nm",
+            ellipsis: true,
+            filters:
+                (jobs &&
+                    jobs
+                        .map((j) => j.ins_co_nm)
+                        .filter(onlyUnique)
+                        .map((s) => {
+                            return {
+                                text: s,
+                                value: [s],
+                            };
+                        })) ||
+                [],
+            onFilter: (value, record) => value.includes(record.ins_co_nm),
+            responsive: ["md"],
+        },
+        {
+            title: t("jobs.fields.clm_total"),
+            dataIndex: "clm_total",
+            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,
+            render: (text, record) => (
+                <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
+            ),
+        },
+        {
+            title: t("jobs.labels.estimator"),
+            dataIndex: "jobs.labels.estimator",
+            key: "jobs.labels.estimator",
+            ellipsis: true,
+            responsive: ["xl"],
+            filterSearch: true,
+            filters:
+                (jobs &&
+                    jobs
+                        .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(),
+        },
+        {
+            title: t("jobs.fields.comment"),
+            dataIndex: "comment",
+            key: "comment",
+            ellipsis: true,
+            responsive: ["md"],
+        },
+        // {
+        //   title: t("jobs.fields.owner_owing"),
+        //   dataIndex: "owner_owing",
+        //   key: "owner_owing",
+        //   responsive: ["md"],
+        //   render: (text, record) => (
+        //     <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
+        //   ),
+        // },
+    ];
+
+    const scrollMapper = {
+        xs: true,
+        sm: true,
+        md: true,
+        lg: "100%",
+        xl: "100%",
+        xxl: "100%",
+    };
+
+    return (
+        <Card
+            title={t("titles.bc.jobs-active")}
+            extra={
+                <Space wrap>
+                    <Button onClick={() => refetch()}>
+                        <SyncOutlined />
+                    </Button>
+                    <Input.Search
+                        placeholder={t("general.labels.search")}
+                        onChange={(e) => {
+                            setSearchText(e.target.value);
+                        }}
+                        value={searchText}
+                        enterButton
+                    />
+                </Space>
+            }
+        >
+            <Table
+                loading={loading}
+                pagination={{ defaultPageSize: 50 }}
+                columns={columns}
+                rowKey="id"
+                dataSource={jobs}
+                scroll={{
+                    x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%",
+                }}
+                rowSelection={{
+                    onSelect: (record) => {
+                        handleOnRowClick(record);
+                    },
+                    selectedRowKeys: [selected],
+                    type: "radio",
+                }}
+                onChange={handleTableChange}
+                onRow={(record, rowIndex) => {
+                    return {
+                        onClick: (event) => {
+                            handleOnRowClick(record);
+                        },
+                    };
+                }}
+            />
+        </Card>
+    );
 }
 
 export default connect(mapStateToProps, null)(JobsList);

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,12 +14,13 @@ 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 { onlyUnique } from "../../utils/arrayHelper";
 import { alphaSort } from "../../utils/sorters";
 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";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -46,6 +47,7 @@ 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",
@@ -376,7 +378,7 @@ export function JobsReadyList({ bodyshop }) {
     >
       <Table
         loading={loading}
-        pagination={{ defaultPageSize: 50 }}
+        pagination={{ defaultPageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         dataSource={jobs}

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/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,
@@ -122,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,
@@ -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.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-table/production-list-table.component.jsx

@@ -184,6 +184,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 +205,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}

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.container.jsx

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectReportCenter } from "../../redux/modals/modals.selectors";
+import RbacWrapperComponent from "../rbac-wrapper/rbac-wrapper.component";
 import ReportCenterModalComponent from "./report-center-modal.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -33,7 +34,9 @@ export function ReportCenterModalContainer({
       destroyOnClose
       width="80%"
     >
-      <ReportCenterModalComponent />
+      <RbacWrapperComponent action="shop:reportcenter">
+        <ReportCenterModalComponent />
+      </RbacWrapperComponent>
     </Modal>
   );
 }

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -13,6 +13,7 @@ import {
   QUERY_APPOINTMENTS_BY_JOBID,
 } from "../../graphql/appointments.queries";
 import { QUERY_LBR_HRS_BY_PK, UPDATE_JOBS } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
 import { setEmailOptions } from "../../redux/email/email.actions";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectSchedule } from "../../redux/modals/modals.selectors";
@@ -20,6 +21,8 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { DateTimeFormat } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ScheduleJobModalComponent from "./schedule-job-modal.component";
 
@@ -31,6 +34,8 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("schedule")),
   setEmailOptions: (e) => dispatch(setEmailOptions(e)),
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
 });
 
 export function ScheduleJobModalContainer({
@@ -39,6 +44,7 @@ export function ScheduleJobModalContainer({
   toggleModalVisible,
   setEmailOptions,
   currentUser,
+  insertAuditTrail,
 }) {
   const { visible, context, actions } = scheduleModal;
   const { jobId, job, previousEvent } = context;
@@ -134,6 +140,15 @@ export function ScheduleJobModalContainer({
       },
     });
 
+    if (!appt.errors) {
+      insertAuditTrail({
+        jobid: job.id,
+        operation: AuditTrailMapping.appointmentinsert(
+          DateTimeFormat(values.start)
+        ),
+      });
+    }
+
     if (!!appt.errors) {
       notification["error"]({
         message: t("appointments.errors.saving", {
@@ -155,6 +170,7 @@ export function ScheduleJobModalContainer({
             scheduled_in: values.start,
             scheduled_completion: values.scheduled_completion,
             lost_sale_reason: null,
+            date_lost_sale: null,
           },
         },
       });

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

@@ -10,13 +10,14 @@ import OwnerNameDisplay from "../owner-name-display/owner-name-display.component
 import ScoreboardEntryEdit from "../scoreboard-entry-edit/scoreboard-entry-edit.component";
 import ScoreboardRemoveButton from "../scoreboard-remove-button/scorebard-remove-button.component";
 import { SyncOutlined } from "@ant-design/icons";
+import {pageLimit} from "../../utils/config";
 export default function ScoreboardJobsList({ scoreBoardlist }) {
   const { t } = useTranslation();
   const [state, setState] = useState({
     visible: false,
     search: "",
     current: 1,
-    pageSize: 10,
+    pageSize: pageLimit,
   });
 
   const { loading, error, data, refetch } = useQuery(
@@ -148,7 +149,7 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
             }
             pagination={{
               position: "top",
-              pageSize: state.pageSize || 10,
+              pageSize: state.pageSize || pageLimit,
               current: state.current || 1,
               total: data ? data.scoreboard_aggregate.aggregate.count : 0,
             }}

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

@@ -8,18 +8,45 @@ export const CalculateWorkingDaysThisMonth = () => {
   return moment().endOf("month").businessDaysIntoMonth();
 };
 
+export const CalculateWorkingDaysInPeriod = (start, end) => {
+  return moment(start).businessDiff(moment(end));
+};
+
 export const CalculateWorkingDaysAsOfToday = () => {
   return moment().businessDaysIntoMonth();
 };
 
+export const CalculateWorkingDaysLastMonth = () => {
+  return moment().subtract(1, "month").endOf("month").businessDaysIntoMonth();
+};
+
 export const WeeklyTargetHrs = (dailyTargetHrs, bodyshop) => {
-  return dailyTargetHrs * 5;
+  return (
+    dailyTargetHrs *
+    CalculateWorkingDaysInPeriod(
+      moment().startOf("week"),
+      moment().endOf("week")
+    )
+  );
+};
+
+export const WeeklyTargetHrsInPeriod = (
+  dailyTargetHrs,
+  start,
+  end,
+  bodyshop
+) => {
+  return dailyTargetHrs * CalculateWorkingDaysInPeriod(start, end);
 };
 
 export const MonthlyTargetHrs = (dailyTargetHrs, bodyshop) => {
   return dailyTargetHrs * CalculateWorkingDaysThisMonth();
 };
 
+export const LastMonthTargetHrs = (dailyTargetHrs, bodyshop) => {
+  return dailyTargetHrs * CalculateWorkingDaysLastMonth();
+};
+
 export const AsOfTodayTargetHrs = (dailyTargetHrs, bodyshop) => {
   return dailyTargetHrs * CalculateWorkingDaysAsOfToday();
 };

client/src/components/scoreboard-timetickets-stats/chart-custom-tooltip.jsx

@@ -0,0 +1,26 @@
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div
+        style={{
+          backgroundColor: "white",
+          border: "1px solid gray",
+          padding: "0.5rem",
+        }}
+      >
+        <p style={{ margin: "0" }}>{label}</p>
+        {payload.map((data, index) => {
+          return (
+            <p style={{ margin: "10px 0", color: data.color }} key={index}>{`${
+              data.name
+            } : ${data.value.toFixed(1)}`}</p>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default CustomTooltip;

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

@@ -0,0 +1,54 @@
+import { Card } from "antd";
+import React from "react";
+import {
+  Area,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import CustomTooltip from "./chart-custom-tooltip";
+
+const graphProps = {
+  strokeWidth: 3,
+};
+
+export default function ScoreboardTimeTicketsChart({ data, chartTitle }) {
+  return (
+    <Card title={chartTitle}>
+      <ResponsiveContainer width="100%" height={275}>
+        <ComposedChart
+          data={data}
+          margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+        >
+          <CartesianGrid stroke="#f5f5f5" />
+          <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
+          <YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth} />
+          <Tooltip content={<CustomTooltip />} />
+          <Legend />
+          <Line
+            name="Target Hours"
+            type="monotone"
+            dataKey="accTargetHrs"
+            stroke="#ff7300"
+            yAxisId="left"
+            strokeWidth={graphProps.strokeWidth}
+          />
+
+          <Area
+            type="monotone"
+            name="MTD Hours"
+            dataKey="accHrs"
+            fill="lightblue"
+            stroke="blue"
+            yAxisId="left"
+          />
+        </ComposedChart>
+      </ResponsiveContainer>
+    </Card>
+  );
+}

client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.component.jsx

@@ -0,0 +1,408 @@
+import { useQuery } from "@apollo/client";
+import { Col, Row } from "antd";
+import _ from "lodash";
+import moment from "moment";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_TIME_TICKETS_IN_RANGE_SB } from "../../graphql/timetickets.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util";
+import ScoreboardTimeTicketsChart from "./scoreboard-timetickets.chart.component";
+import ScoreboardTicketsStats from "./scoreboard-timetickets.stats.component";
+import ScoreboardTimeticketsTargetsTable from "./scoreboard-timetickets.targets-table.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScoreboardTimeTicketsStats);
+
+export function ScoreboardTimeTicketsStats({ bodyshop }) {
+  const { t } = useTranslation();
+  const startDate = moment().startOf("month");
+  const endDate = moment().endOf("month");
+
+  const fixedPeriods = useMemo(() => {
+    const endOfThisMonth = moment().endOf("month");
+    const startofthisMonth = moment().startOf("month");
+
+    const endOfLastmonth = moment().subtract(1, "month").endOf("month");
+    const startOfLastmonth = moment().subtract(1, "month").startOf("month");
+
+    const endOfThisWeek = moment().endOf("week");
+    const startOfThisWeek = moment().startOf("week");
+
+    const endOfLastWeek = moment().subtract(1, "week").endOf("week");
+    const startOfLastWeek = moment().subtract(1, "week").startOf("week");
+
+    const endOfPriorWeek = moment().subtract(2, "week").endOf("week");
+    const startOfPriorWeek = moment().subtract(2, "week").startOf("week");
+
+    const allDates = [
+      endOfThisMonth,
+      startofthisMonth,
+      endOfLastmonth,
+      startOfLastmonth,
+      endOfThisWeek,
+      startOfThisWeek,
+      endOfLastWeek,
+      startOfLastWeek,
+      endOfPriorWeek,
+      startOfPriorWeek,
+    ];
+    const start = moment.min(allDates);
+    const end = moment.max(allDates);
+    return {
+      start,
+      end,
+      endOfThisMonth,
+      startofthisMonth,
+      endOfLastmonth,
+      startOfLastmonth,
+      endOfThisWeek,
+      startOfThisWeek,
+      endOfLastWeek,
+      startOfLastWeek,
+      endOfPriorWeek,
+      startOfPriorWeek,
+    };
+  }, []);
+
+  const { loading, error, data } = useQuery(QUERY_TIME_TICKETS_IN_RANGE_SB, {
+    variables: {
+      start: startDate.format("YYYY-MM-DD"),
+      end: endDate.format("YYYY-MM-DD"),
+      fixedStart: fixedPeriods.start.format("YYYY-MM-DD"),
+      fixedEnd: fixedPeriods.end.format("YYYY-MM-DD"),
+      jobStart: startDate,
+      jobEnd: endDate,
+    },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    pollInterval: 60000,
+    skip: !fixedPeriods,
+  });
+
+  const calculatedData = useMemo(() => {
+    if (!data) return [];
+    const ret = {
+      totalThisWeek: 0,
+      totalThisWeekLAB: 0,
+      totalThisWeekLAR: 0,
+      totalLastWeek: 0,
+      totalLastWeekLAB: 0,
+      totalLastWeekLAR: 0,
+      totalPriorWeek: 0,
+      totalPriorWeekLAB: 0,
+      totalPriorWeekLAR: 0,
+      totalThisMonth: 0,
+      totalThisMonthLAB: 0,
+      totalThisMonthLAR: 0,
+      totalLastMonth: 0,
+      totalLastMonthLAB: 0,
+      totalLastMonthLAR: 0,
+      actualTotalOverPeriod: 0,
+      actualTotalOverPeriodLAB: 0,
+      actualTotalOverPeriodLAR: 0,
+      totalEffieciencyOverPeriod: 0,
+      totalEffieciencyOverPeriodLAB: 0,
+      totalEffieciencyOverPeriodLAR: 0,
+      seperatedThisWeek: {
+        sunday: {
+          total: 0,
+          lab: 0,
+          lar: 0,
+        },
+        monday: {
+          total: 0,
+          lab: 0,
+          lar: 0,
+        },
+        tuesday: {
+          total: 0,
+          lab: 0,
+          lar: 0,
+        },
+        wednesday: {
+          total: 0,
+          lab: 0,
+          lar: 0,
+        },
+        thursday: {
+          total: 0,
+          lab: 0,
+          lar: 0,
+        },
+        friday: {
+          total: 0,
+          lab: 0,
+          lar: 0,
+        },
+        saturday: {
+          total: 0,
+          lab: 0,
+          lar: 0,
+        },
+      },
+    };
+
+    data.fixedperiod.forEach((ticket) => {
+      const ticketDate = moment(ticket.date);
+      if (
+        ticketDate.isBetween(
+          fixedPeriods.startOfThisWeek,
+          fixedPeriods.endOfThisWeek,
+          undefined,
+          "[]"
+        )
+      ) {
+        ret.totalThisWeek = ret.totalThisWeek + ticket.productivehrs;
+        if (ticket.ciecacode !== "LAR")
+          ret.totalThisWeekLAB = ret.totalThisWeekLAB + ticket.productivehrs;
+        if (ticket.ciecacode === "LAR")
+          ret.totalThisWeekLAR = ret.totalThisWeekLAR + ticket.productivehrs;
+
+        //Seperate out to Day of Week
+        ret.seperatedThisWeek[
+          moment(ticket.date).format("dddd").toLowerCase()
+        ].total =
+          ret.seperatedThisWeek[
+            moment(ticket.date).format("dddd").toLowerCase()
+          ].total + ticket.productivehrs;
+        if (ticket.ciecacode !== "LAR")
+          ret.seperatedThisWeek[
+            moment(ticket.date).format("dddd").toLowerCase()
+          ].lab =
+            ret.seperatedThisWeek[
+              moment(ticket.date).format("dddd").toLowerCase()
+            ].lab + ticket.productivehrs;
+        if (ticket.ciecacode === "LAR")
+          ret.seperatedThisWeek[
+            moment(ticket.date).format("dddd").toLowerCase()
+          ].lar =
+            ret.seperatedThisWeek[
+              moment(ticket.date).format("dddd").toLowerCase()
+            ].lar + ticket.productivehrs;
+      } else if (
+        ticketDate.isBetween(
+          fixedPeriods.startOfLastWeek,
+          fixedPeriods.endOfLastWeek,
+          undefined,
+          "[]"
+        )
+      ) {
+        ret.totalLastWeek = ret.totalLastWeek + ticket.productivehrs;
+        if (ticket.ciecacode !== "LAR")
+          ret.totalLastWeekLAB = ret.totalLastWeekLAB + ticket.productivehrs;
+        if (ticket.ciecacode === "LAR")
+          ret.totalLastWeekLAR = ret.totalLastWeekLAR + ticket.productivehrs;
+      } else if (
+        ticketDate.isBetween(
+          fixedPeriods.startOfPriorWeek,
+          fixedPeriods.endOfPriorWeek,
+          undefined,
+          "[]"
+        )
+      ) {
+        ret.totalPriorWeek = ret.totalPriorWeek + ticket.productivehrs;
+        if (ticket.ciecacode !== "LAR")
+          ret.totalPriorWeekLAB = ret.totalPriorWeekLAB + ticket.productivehrs;
+        if (ticket.ciecacode === "LAR")
+          ret.totalPriorWeekLAR = ret.totalPriorWeekLAR + ticket.productivehrs;
+      }
+      if (
+        ticketDate.isBetween(
+          fixedPeriods.startofthisMonth,
+          fixedPeriods.endOfThisMonth,
+          undefined,
+          "[]"
+        )
+      ) {
+        ret.totalThisMonth = ret.totalThisMonth + ticket.productivehrs;
+        ret.actualTotalOverPeriod =
+          ret.actualTotalOverPeriod + (ticket.actualhrs || 0);
+        if (ticket.ciecacode !== "LAR") {
+          ret.totalThisMonthLAB = ret.totalThisMonthLAB + ticket.productivehrs;
+          ret.actualTotalOverPeriodLAB =
+            ret.actualTotalOverPeriodLAB + (ticket.actualhrs || 0);
+        }
+        if (ticket.ciecacode === "LAR") {
+          ret.totalThisMonthLAR = ret.totalThisMonthLAR + ticket.productivehrs;
+          ret.actualTotalOverPeriodLAR =
+            ret.actualTotalOverPeriodLAR + (ticket.actualhrs || 0);
+        }
+      } else if (
+        ticketDate.isBetween(
+          fixedPeriods.startOfLastmonth,
+          fixedPeriods.endOfLastmonth,
+          undefined,
+          "[]"
+        )
+      ) {
+        ret.totalLastMonth = ret.totalLastMonth + ticket.productivehrs;
+        if (ticket.ciecacode !== "LAR")
+          ret.totalLastMonthLAB = ret.totalLastMonthLAB + ticket.productivehrs;
+        if (ticket.ciecacode === "LAR")
+          ret.totalLastMonthLAR = ret.totalLastMonthLAR + ticket.productivehrs;
+      }
+    });
+
+    ret.totalEffieciencyOverPeriod = ret.actualTotalOverPeriod
+      ? (ret.totalThisMonth / ret.actualTotalOverPeriod) * 100
+      : 0;
+    ret.totalEffieciencyOverPeriodLAB = ret.actualTotalOverPeriodLAB
+      ? (ret.totalThisMonthLAB / ret.actualTotalOverPeriodLAB) * 100
+      : 0;
+    ret.totalEffieciencyOverPeriodLAR = ret.actualTotalOverPeriodLAR
+      ? (ret.totalThisMonthLAR / ret.actualTotalOverPeriodLAR) * 100
+      : 0;
+
+    roundObject(ret);
+
+    const ticketsGroupedByDate = _.groupBy(data.timetickets, "date");
+
+    const listOfDays = Utils.ListOfDaysInCurrentMonth();
+
+    const combinedData = [],
+      labData = [],
+      larData = [];
+    var acc_comb = 0;
+    var acc_lab = 0;
+    var acc_lar = 0;
+
+    listOfDays.forEach((day) => {
+      const r = {
+        date: moment(day).format("MM/DD"),
+        actualhrs: 0,
+        productivehrs: 0,
+      };
+
+      const combined = {
+        accTargetHrs: _.round(
+          Utils.AsOfDateTargetHours(
+            bodyshop.scoreboard_target.dailyBodyTarget +
+              bodyshop.scoreboard_target.dailyPaintTarget,
+            day
+          ) +
+            (bodyshop.scoreboard_target.dailyBodyTarget +
+              bodyshop.scoreboard_target.dailyPaintTarget),
+          1
+        ),
+        accHrs: 0,
+      };
+      const lab = {
+        accTargetHrs: _.round(
+          Utils.AsOfDateTargetHours(
+            bodyshop.scoreboard_target.dailyBodyTarget,
+            day
+          ) + bodyshop.scoreboard_target.dailyBodyTarget,
+          1
+        ),
+        accHrs: 0,
+      };
+      const lar = {
+        accTargetHrs: _.round(
+          Utils.AsOfDateTargetHours(
+            bodyshop.scoreboard_target.dailyPaintTarget,
+            day
+          ) + bodyshop.scoreboard_target.dailyPaintTarget,
+          1
+        ),
+        accHrs: 0,
+      };
+
+      if (ticketsGroupedByDate[day]) {
+        ticketsGroupedByDate[day].forEach((ticket) => {
+          r.actualhrs = r.actualhrs + ticket.actualhrs;
+          r.productivehrs = r.productivehrs + ticket.productivehrs;
+          acc_comb = acc_comb + ticket.productivehrs;
+
+          if (ticket.ciecacode !== "LAR")
+            acc_lab = acc_lab + ticket.productivehrs;
+          if (ticket.ciecacode === "LAR")
+            acc_lar = acc_lar + ticket.productivehrs;
+        });
+      }
+      combined.accHrs = acc_comb;
+      lab.accHrs = acc_lab;
+      lar.accHrs = acc_lar;
+
+      combinedData.push({ ...r, ...combined });
+      labData.push({ ...r, ...lab });
+      larData.push({ ...r, ...lar });
+    });
+
+    const jobData = {};
+    data.jobs.forEach((job) => {
+      job.tthrs = job.joblines.reduce((acc, val) => acc + val.mod_lb_hrs, 0);
+    });
+    jobData.tthrs = data.jobs
+      .reduce((acc, val) => acc + val.tthrs, 0)
+      .toFixed(1);
+    jobData.count = data.jobs.length.toFixed(0);
+
+    return {
+      fixed: ret,
+      combinedData: combinedData,
+      labData: labData,
+      larData: larData,
+      jobData: jobData,
+    };
+  }, [fixedPeriods, data, bodyshop]);
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (loading) return <LoadingSpinner />;
+  return (
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <ScoreboardTimeticketsTargetsTable />
+      </Col>
+      <Col span={24}>
+        <ScoreboardTicketsStats
+          data={calculatedData.fixed}
+          jobData={calculatedData.jobData}
+        />
+      </Col>
+      <Col span={24}>
+        <ScoreboardTimeTicketsChart
+          data={calculatedData.combinedData}
+          chartTitle={t("scoreboard.labels.combinedcharttitle")}
+        />
+      </Col>
+      <Col span={12}>
+        <ScoreboardTimeTicketsChart
+          data={calculatedData.labData}
+          chartTitle={t("scoreboard.labels.bodycharttitle")}
+        />
+      </Col>
+      <Col span={12}>
+        <ScoreboardTimeTicketsChart
+          data={calculatedData.larData}
+          chartTitle={t("scoreboard.labels.refinishcharttitle")}
+        />
+      </Col>
+    </Row>
+  );
+}
+
+function roundObject(inputObj) {
+  for (var key of Object.keys(inputObj)) {
+    if (typeof inputObj[key] === "number") {
+      inputObj[key] = inputObj[key].toFixed(1);
+    } else if (Array.isArray(inputObj[key])) {
+      inputObj[key].forEach((item) => roundObject(item));
+    } else if (typeof inputObj[key] === "object") {
+      roundObject(inputObj[key]);
+    }
+  }
+}

client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.stats.component.jsx

@@ -0,0 +1,651 @@
+import {
+  Card,
+  Col,
+  Form,
+  Row,
+  Space,
+  Statistic,
+  Switch,
+  Typography,
+} from "antd";
+import moment from "moment";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import * as Util from "../scoreboard-targets-table/scoreboard-targets-table.util";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScoreboardTicketsStats);
+
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : initialValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(storedValue));
+  }, [key, storedValue]);
+
+  return [storedValue, setStoredValue];
+}
+
+export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
+  const { t } = useTranslation();
+  const [isLarge, setIsLarge] = useLocalStorage("isLargeStatistic", false);
+
+  const statisticSize = isLarge ? 36 : 24;
+  const statisticWeight = isLarge ? 550 : "normal";
+  const daySpan =
+    Util.CalculateWorkingDaysInPeriod(
+      moment().startOf("week"),
+      moment().endOf("week")
+    ) > 5
+      ? 3
+      : 4;
+
+  return (
+    <Card
+      title={t("scoreboard.labels.productivestatistics")}
+      extra={
+        <Form.Item
+          label={t("general.labels.tvmode")}
+          valuePropName="checked"
+          name={["tvmode"]}
+        >
+          <Switch
+            onClick={() => setIsLarge(!isLarge)}
+            defaultChecked={isLarge}
+          />
+        </Form.Item>
+      }
+    >
+      <Row gutter={[16, 16]}>
+        <Col md={24}>
+          {/* Daily Stats */}
+          <Space direction="vertical" size="middle" style={{ display: "flex" }}>
+            <Row gutter={[16, 16]} align="center">
+              {[
+                "sunday",
+                "monday",
+                "tuesday",
+                "wednesday",
+                "thursday",
+                "friday",
+                "saturday",
+              ].map((day) => {
+                if (bodyshop.workingdays[day] === true) {
+                  return (
+                    <Col key={day} span={daySpan} align="center">
+                      <Card size="small" title={t("general.labels." + day)}>
+                        <Row gutter={[8, 8]}>
+                          <Col span={24}>
+                            <Statistic
+                              value={data.seperatedThisWeek[day].total}
+                              valueStyle={{
+                                color:
+                                  parseFloat(
+                                    data.seperatedThisWeek[day].total
+                                  ) >=
+                                  bodyshop.scoreboard_target.dailyBodyTarget +
+                                    bodyshop.scoreboard_target.dailyPaintTarget
+                                    ? "green"
+                                    : "red",
+                                fontSize: statisticSize,
+                                fontWeight: statisticWeight,
+                              }}
+                            />
+                          </Col>
+                        </Row>
+                        <Row gutter={[16, 16]}>
+                          <Col span={12}>
+                            <Statistic
+                              title={
+                                <Typography.Text strong>
+                                  {t("scoreboard.labels.body")}
+                                </Typography.Text>
+                              }
+                              value={data.seperatedThisWeek[day].lab}
+                              valueStyle={{
+                                color:
+                                  parseFloat(data.seperatedThisWeek[day].lab) >=
+                                  bodyshop.scoreboard_target.dailyBodyTarget
+                                    ? "green"
+                                    : "red",
+                                fontSize: statisticSize,
+                                fontWeight: statisticWeight,
+                              }}
+                            />
+                          </Col>
+                          <Col span={12}>
+                            <Statistic
+                              title={
+                                <Typography.Text strong>
+                                  {t("scoreboard.labels.refinish")}
+                                </Typography.Text>
+                              }
+                              value={data.seperatedThisWeek[day].lar}
+                              valueStyle={{
+                                color:
+                                  parseFloat(data.seperatedThisWeek[day].lar) >=
+                                  bodyshop.scoreboard_target.dailyPaintTarget
+                                    ? "green"
+                                    : "red",
+                                fontSize: statisticSize,
+                                fontWeight: statisticWeight,
+                              }}
+                            />
+                          </Col>
+                        </Row>
+                      </Card>
+                    </Col>
+                  );
+                } else {
+                  return null;
+                }
+              })}
+            </Row>
+            {/* Weekly Stats */}
+            <Row gutter={[16, 16]}>
+              {/* This Week */}
+              <Col span={8} align="center">
+                <Card size="small" title={t("scoreboard.labels.thisweek")}>
+                  <Row gutter={[16, 16]}>
+                    <Col span={24}>
+                      <Statistic
+                        value={data.totalThisWeek}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalThisWeek) >=
+                            Util.WeeklyTargetHrsInPeriod(
+                              bodyshop.scoreboard_target.dailyBodyTarget,
+                              moment().startOf("week"),
+                              moment().endOf("week"),
+                              bodyshop
+                            ) +
+                              Util.WeeklyTargetHrsInPeriod(
+                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                moment().startOf("week"),
+                                moment().endOf("week"),
+                                bodyshop
+                              )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                  <Row gutter={[16, 16]}>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.body")}
+                          </Typography.Text>
+                        }
+                        value={data.totalThisWeekLAB}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalThisWeekLAB) >=
+                            Util.WeeklyTargetHrsInPeriod(
+                              bodyshop.scoreboard_target.dailyBodyTarget,
+                              moment().startOf("week"),
+                              moment().endOf("week"),
+                              bodyshop
+                            )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.refinish")}
+                          </Typography.Text>
+                        }
+                        value={data.totalThisWeekLAR}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalThisWeekLAR) >=
+                            Util.WeeklyTargetHrsInPeriod(
+                              bodyshop.scoreboard_target.dailyPaintTarget,
+                              moment().startOf("week"),
+                              moment().endOf("week"),
+                              bodyshop
+                            )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                </Card>
+              </Col>
+              {/* Last Week */}
+              <Col span={8} align="center">
+                <Card size="small" title={t("scoreboard.labels.lastweek")}>
+                  <Row gutter={[16, 16]}>
+                    <Col span={24}>
+                      <Statistic
+                        value={data.totalLastWeek}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalLastWeek) >=
+                            Util.WeeklyTargetHrsInPeriod(
+                              bodyshop.scoreboard_target.dailyBodyTarget,
+                              moment().subtract(1, "week").startOf("week"),
+                              moment().subtract(1, "week").endOf("week"),
+                              bodyshop
+                            ) +
+                              Util.WeeklyTargetHrsInPeriod(
+                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                moment().subtract(1, "week").startOf("week"),
+                                moment().subtract(1, "week").endOf("week"),
+                                bodyshop
+                              )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                  <Row gutter={[16, 16]}>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.body")}
+                          </Typography.Text>
+                        }
+                        value={data.totalLastWeekLAB}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalLastWeekLAB) >=
+                            Util.WeeklyTargetHrsInPeriod(
+                              bodyshop.scoreboard_target.dailyBodyTarget,
+                              moment().subtract(1, "week").startOf("week"),
+                              moment().subtract(1, "week").endOf("week"),
+                              bodyshop
+                            )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.refinish")}
+                          </Typography.Text>
+                        }
+                        value={data.totalLastWeekLAR}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalLastWeekLAR) >=
+                            Util.WeeklyTargetHrsInPeriod(
+                              bodyshop.scoreboard_target.dailyPaintTarget,
+                              moment().subtract(1, "week").startOf("week"),
+                              moment().subtract(1, "week").endOf("week"),
+                              bodyshop
+                            )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                </Card>
+              </Col>
+              {/* Prior Week */}
+              <Col span={8} align="center">
+                <Card size="small" title={t("scoreboard.labels.priorweek")}>
+                  <Row gutter={[16, 16]}>
+                    <Col span={24}>
+                      <Statistic
+                        value={data.totalPriorWeek}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalPriorWeek) >=
+                            Util.WeeklyTargetHrsInPeriod(
+                              bodyshop.scoreboard_target.dailyBodyTarget,
+                              moment().subtract(2, "week").startOf("week"),
+                              moment().subtract(2, "week").endOf("week"),
+                              bodyshop
+                            ) +
+                              Util.WeeklyTargetHrsInPeriod(
+                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                moment().subtract(2, "week").startOf("week"),
+                                moment().subtract(2, "week").endOf("week"),
+                                bodyshop
+                              )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                  <Row gutter={[16, 16]}>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.body")}
+                          </Typography.Text>
+                        }
+                        value={data.totalPriorWeekLAB}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalPriorWeekLAB) >=
+                            Util.WeeklyTargetHrsInPeriod(
+                              bodyshop.scoreboard_target.dailyBodyTarget,
+                              moment().subtract(2, "week").startOf("week"),
+                              moment().subtract(2, "week").endOf("week"),
+                              bodyshop
+                            )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.refinish")}
+                          </Typography.Text>
+                        }
+                        value={data.totalPriorWeekLAR}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalPriorWeekLAR) >=
+                            Util.WeeklyTargetHrsInPeriod(
+                              bodyshop.scoreboard_target.dailyPaintTarget,
+                              moment().subtract(2, "week").startOf("week"),
+                              moment().subtract(2, "week").endOf("week"),
+                              bodyshop
+                            )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                </Card>
+              </Col>
+            </Row>
+            {/* Monthly Stats */}
+            <Row gutter={[16, 16]}>
+              {/* This Month */}
+              <Col span={7} align="center">
+                <Card size="small" title={t("scoreboard.labels.thismonth")}>
+                  <Row gutter={[16, 16]}>
+                    <Col span={24}>
+                      <Statistic
+                        value={data.totalThisMonth}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalThisMonth) >=
+                            Util.MonthlyTargetHrs(
+                              bodyshop.scoreboard_target.dailyBodyTarget,
+                              bodyshop
+                            ) +
+                              Util.MonthlyTargetHrs(
+                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                bodyshop
+                              )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                  <Row gutter={[16, 16]}>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.body")}
+                          </Typography.Text>
+                        }
+                        value={data.totalThisMonthLAB}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalThisMonthLAB) >=
+                            Util.MonthlyTargetHrs(
+                              bodyshop.scoreboard_target.dailyBodyTarget,
+                              bodyshop
+                            )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.refinish")}
+                          </Typography.Text>
+                        }
+                        value={data.totalThisMonthLAR}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalThisMonthLAR) >=
+                            Util.MonthlyTargetHrs(
+                              bodyshop.scoreboard_target.dailyPaintTarget,
+                              bodyshop
+                            )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                </Card>
+              </Col>
+              {/* Last Month */}
+              <Col span={7} align="center">
+                <Card size="small" title={t("scoreboard.labels.lastmonth")}>
+                  <Row gutter={[16, 16]}>
+                    <Col span={24}>
+                      <Statistic
+                        value={data.totalLastMonth}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalLastMonth) >=
+                            Util.LastMonthTargetHrs(
+                              bodyshop.scoreboard_target.dailyBodyTarget,
+                              bodyshop
+                            ) +
+                              Util.LastMonthTargetHrs(
+                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                bodyshop
+                              )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                  <Row gutter={[16, 16]}>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.body")}
+                          </Typography.Text>
+                        }
+                        value={data.totalLastMonthLAB}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalLastMonthLAB) >=
+                            Util.LastMonthTargetHrs(
+                              bodyshop.scoreboard_target.dailyBodyTarget,
+                              bodyshop
+                            )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.refinish")}
+                          </Typography.Text>
+                        }
+                        value={data.totalLastMonthLAR}
+                        valueStyle={{
+                          color:
+                            parseFloat(data.totalLastMonthLAR) >=
+                            Util.LastMonthTargetHrs(
+                              bodyshop.scoreboard_target.dailyPaintTarget,
+                              bodyshop
+                            )
+                              ? "green"
+                              : "red",
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                </Card>
+              </Col>
+              {/* Efficiency Over Period */}
+              <Col span={7} align="center">
+                <Card
+                  size="small"
+                  title={t("scoreboard.labels.efficiencyoverperiod")}
+                >
+                  <Row gutter={[16, 16]}>
+                    <Col span={24}>
+                      <Statistic
+                        value={`${data.totalEffieciencyOverPeriod || 0}%`}
+                        valueStyle={{
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                  <Row gutter={[16, 16]}>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.body")}
+                          </Typography.Text>
+                        }
+                        value={`${data.totalEffieciencyOverPeriodLAB || 0}%`}
+                        valueStyle={{
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                    <Col span={12}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.refinish")}
+                          </Typography.Text>
+                        }
+                        value={`${data.totalEffieciencyOverPeriodLAR || 0}%`}
+                        valueStyle={{
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                </Card>
+              </Col>
+              <Col span={3} align="center">
+                <Card
+                  size="small"
+                  title={t("scoreboard.labels.jobscompletednotinvoiced")}
+                >
+                  <Row gutter={[16, 16]}>
+                    <Col span={24}>
+                      <Statistic
+                        value={jobData.count}
+                        valueStyle={{
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                  <Row gutter={[16, 16]}>
+                    <Col span={24}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.totalhrs")}
+                          </Typography.Text>
+                        }
+                        value={jobData.tthrs}
+                        valueStyle={{
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                </Card>
+              </Col>
+            </Row>
+          </Space>
+          {/* Disclaimer */}
+          <Typography.Text type="secondary">
+            *{t("scoreboard.labels.calendarperiod")}
+          </Typography.Text>
+        </Col>
+      </Row>
+    </Card>
+  );
+}

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

@@ -0,0 +1,285 @@
+import { CalendarOutlined } from "@ant-design/icons";
+import { Card, Col, Divider, Row, Statistic } from "antd";
+import moment from "moment";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import * as Util from "../scoreboard-targets-table/scoreboard-targets-table.util";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+const rowGutter = [16, 16];
+const statSpans = { xs: 24, sm: 3 };
+
+export function ScoreboardTimeticketsTargetsTable({ bodyshop }) {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t("scoreboard.labels.targets")}>
+      <Row gutter={rowGutter}>
+        <Col xs={24} sm={{ offset: 0, span: 3 }} lg={{ span: 3 }}>
+          <Statistic
+            title={t("scoreboard.labels.workingdays")}
+            value={Util.CalculateWorkingDaysThisMonth()}
+            prefix={<CalendarOutlined />}
+          />
+        </Col>
+        <Col xs={24} sm={{ offset: 0, span: 20 }} lg={{ offset: 0, span: 20 }}>
+          <Row>
+            <Col {...statSpans}>
+              <Statistic title="Type" value={t("scoreboard.labels.body")} />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.dailytarget")}
+                value={bodyshop.scoreboard_target.dailyBodyTarget}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.thisweek")}
+                value={Util.WeeklyTargetHrs(
+                  bodyshop.scoreboard_target.dailyBodyTarget,
+                  moment().startOf("week"),
+                  moment().endOf("week"),
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.lastweek")}
+                value={Util.WeeklyTargetHrs(
+                  bodyshop.scoreboard_target.dailyBodyTarget,
+                  moment().subtract(1, "week").startOf("week"),
+                  moment().subtract(1, "week").endOf("week"),
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.priorweek")}
+                value={Util.WeeklyTargetHrs(
+                  bodyshop.scoreboard_target.dailyBodyTarget,
+                  moment().subtract(2, "week").startOf("week"),
+                  moment().subtract(2, "week").endOf("week"),
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.thismonth")}
+                value={Util.MonthlyTargetHrs(
+                  bodyshop.scoreboard_target.dailyBodyTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.lastmonth")}
+                value={Util.LastMonthTargetHrs(
+                  bodyshop.scoreboard_target.dailyBodyTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.asoftodaytarget")}
+                value={Util.AsOfTodayTargetHrs(
+                  bodyshop.scoreboard_target.dailyBodyTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col {...statSpans}>
+              <Statistic value={t("scoreboard.labels.refinish")} />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic value={bodyshop.scoreboard_target.dailyPaintTarget} />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={Util.WeeklyTargetHrsInPeriod(
+                  bodyshop.scoreboard_target.dailyPaintTarget,
+                  moment().startOf("week"),
+                  moment().endOf("week"),
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={Util.WeeklyTargetHrs(
+                  bodyshop.scoreboard_target.dailyPaintTarget,
+                  moment().subtract(1, "week").startOf("week"),
+                  moment().subtract(1, "week").endOf("week"),
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={Util.WeeklyTargetHrs(
+                  bodyshop.scoreboard_target.dailyPaintTarget,
+                  moment().subtract(2, "week").startOf("week"),
+                  moment().subtract(2, "week").endOf("week"),
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={Util.MonthlyTargetHrs(
+                  bodyshop.scoreboard_target.dailyPaintTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={Util.LastMonthTargetHrs(
+                  bodyshop.scoreboard_target.dailyPaintTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={Util.AsOfTodayTargetHrs(
+                  bodyshop.scoreboard_target.dailyPaintTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Divider style={{ margin: 5 }} />
+          </Row>
+          <Row>
+            <Col {...statSpans}></Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={(
+                  bodyshop.scoreboard_target.dailyBodyTarget +
+                  bodyshop.scoreboard_target.dailyPaintTarget
+                ).toFixed(1)}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={(
+                  Util.WeeklyTargetHrs(
+                    bodyshop.scoreboard_target.dailyBodyTarget,
+                    moment().startOf("week"),
+                    moment().endOf("week"),
+                    bodyshop
+                  ) +
+                  Util.WeeklyTargetHrs(
+                    bodyshop.scoreboard_target.dailyPaintTarget,
+                    moment().startOf("week"),
+                    moment().endOf("week"),
+                    bodyshop
+                  )
+                ).toFixed(1)}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={(
+                  Util.WeeklyTargetHrs(
+                    bodyshop.scoreboard_target.dailyBodyTarget,
+                    moment().subtract(1, "week").startOf("week"),
+                    moment().subtract(1, "week").endOf("week"),
+                    bodyshop
+                  ) +
+                  Util.WeeklyTargetHrs(
+                    bodyshop.scoreboard_target.dailyPaintTarget,
+                    moment().subtract(1, "week").startOf("week"),
+                    moment().subtract(1, "week").endOf("week"),
+                    bodyshop
+                  )
+                ).toFixed(1)}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={(
+                  Util.WeeklyTargetHrs(
+                    bodyshop.scoreboard_target.dailyBodyTarget,
+                    moment().subtract(2, "week").startOf("week"),
+                    moment().subtract(2, "week").endOf("week"),
+                    bodyshop
+                  ) +
+                  Util.WeeklyTargetHrs(
+                    bodyshop.scoreboard_target.dailyPaintTarget,
+                    moment().subtract(2, "week").startOf("week"),
+                    moment().subtract(2, "week").endOf("week"),
+                    bodyshop
+                  )
+                ).toFixed(1)}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={(
+                  Util.MonthlyTargetHrs(
+                    bodyshop.scoreboard_target.dailyBodyTarget,
+                    bodyshop
+                  ) +
+                  Util.MonthlyTargetHrs(
+                    bodyshop.scoreboard_target.dailyPaintTarget,
+                    bodyshop
+                  )
+                ).toFixed(1)}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={(
+                  Util.LastMonthTargetHrs(
+                    bodyshop.scoreboard_target.dailyBodyTarget,
+                    bodyshop
+                  ) +
+                  Util.LastMonthTargetHrs(
+                    bodyshop.scoreboard_target.dailyPaintTarget,
+                    bodyshop
+                  )
+                ).toFixed(1)}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={(
+                  Util.AsOfTodayTargetHrs(
+                    bodyshop.scoreboard_target.dailyBodyTarget,
+                    bodyshop
+                  ) +
+                  Util.AsOfTodayTargetHrs(
+                    bodyshop.scoreboard_target.dailyPaintTarget,
+                    bodyshop
+                  )
+                ).toFixed(1)}
+              />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </Card>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScoreboardTimeticketsTargetsTable);

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

@@ -65,6 +65,8 @@ export default function ScoreboardTimeTickets() {
       end: endDate.format("YYYY-MM-DD"),
       fixedStart: fixedPeriods.start.format("YYYY-MM-DD"),
       fixedEnd: fixedPeriods.end.format("YYYY-MM-DD"),
+      jobStart: startDate,
+      jobEnd: endDate,
     },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",

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

@@ -42,6 +42,7 @@ export function ShopInfoGeneral({ form, bodyshop }) {
     bodyshop && bodyshop.imexshopid
   );
 
+
   return (
     <div>
       <LayoutFormRow
@@ -680,6 +681,13 @@ export function ShopInfoGeneral({ form, bodyshop }) {
         >
           <Select mode="tags" />
         </Form.Item>
+        <Form.Item
+            label={t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
+            name={["md_functionality_toggles","parts_queue_toggle"]}
+            valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
         <Form.Item
           name={["last_name_first"]}
           label={t("bodyshop.fields.last_name_first")}

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

@@ -28,18 +28,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
   return (
     <RbacWrapper action="shop:rbac">
       <LayoutFormRow>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.accounting.payables")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "accounting:payables"]}
-        >
-          <InputNumber />
-        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.accounting.exportlog")}
           rules={[
@@ -52,6 +40,18 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.accounting.payables")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "accounting:payables"]}
+        >
+          <InputNumber />
+        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.accounting.payments")}
           rules={[
@@ -77,26 +77,62 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
           <InputNumber />
         </Form.Item>
         <Form.Item
-          label={t("bodyshop.fields.rbac.csi.page")}
+          label={t("bodyshop.fields.rbac.bills.delete")}
           rules={[
             {
               required: true,
               //message: t("general.validation.required"),
             },
           ]}
-          name={["md_rbac", "csi:page"]}
+          name={["md_rbac", "bills:delete"]}
         >
           <InputNumber />
         </Form.Item>
         <Form.Item
-          label={t("bodyshop.fields.rbac.csi.export")}
+          label={t("bodyshop.fields.rbac.bills.enter")}
           rules={[
             {
               required: true,
               //message: t("general.validation.required"),
             },
           ]}
-          name={["md_rbac", "csi:export"]}
+          name={["md_rbac", "bills:enter"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.bills.list")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "bills:list"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.bills.reexport")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "bills:reexport"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.bills.view")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "bills:view"]}
         >
           <InputNumber />
         </Form.Item>
@@ -173,26 +209,38 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
           <InputNumber />
         </Form.Item>
         <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.list-active")}
+          label={t("bodyshop.fields.rbac.csi.export")}
           rules={[
             {
               required: true,
               //message: t("general.validation.required"),
             },
           ]}
-          name={["md_rbac", "jobs:list-active"]}
+          name={["md_rbac", "csi:export"]}
         >
           <InputNumber />
         </Form.Item>
         <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.list-ready")}
+          label={t("bodyshop.fields.rbac.csi.page")}
           rules={[
             {
               required: true,
               //message: t("general.validation.required"),
             },
           ]}
-          name={["md_rbac", "jobs:list-ready"]}
+          name={["md_rbac", "csi:page"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.employees.page")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "employees:page"]}
         >
           <InputNumber />
         </Form.Item>
@@ -208,30 +256,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.partsqueue")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "jobs:partsqueue"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.list-all")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "jobs:list-all"]}
-        >
-          <InputNumber />
-        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.jobs.available-list")}
           rules={[
@@ -245,26 +269,14 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
           <InputNumber />
         </Form.Item>
         <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.create")}
+          label={t("bodyshop.fields.rbac.jobs.checklist-view")}
           rules={[
             {
               required: true,
               //message: t("general.validation.required"),
             },
           ]}
-          name={["md_rbac", "jobs:create"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.intake")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "jobs:intake"]}
+          name={["md_rbac", "jobs:checklist-view"]}
         >
           <InputNumber />
         </Form.Item>
@@ -280,6 +292,18 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.create")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:create"]}
+        >
+          <InputNumber />
+        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.jobs.deliver")}
           rules={[
@@ -305,14 +329,62 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
           <InputNumber />
         </Form.Item>
         <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.checklist-view")}
+          label={t("bodyshop.fields.rbac.jobs.intake")}
           rules={[
             {
               required: true,
               //message: t("general.validation.required"),
             },
           ]}
-          name={["md_rbac", "jobs:checklist-view"]}
+          name={["md_rbac", "jobs:intake"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.list-active")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:list-active"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.list-all")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:list-all"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.list-ready")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:list-ready"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.partsqueue")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:partsqueue"]}
         >
           <InputNumber />
         </Form.Item>
@@ -329,74 +401,14 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
           <InputNumber />
         </Form.Item>
         <Form.Item
-          label={t("bodyshop.fields.rbac.bills.enter")}
+          label={t("bodyshop.fields.rbac.owners.detail")}
           rules={[
             {
               required: true,
               //message: t("general.validation.required"),
             },
           ]}
-          name={["md_rbac", "bills:enter"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.delete")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "bills:delete"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.reexport")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "bills:reexport"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.view")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "bills:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.list")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "bills:list"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.employees.page")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "employees:page"]}
+          name={["md_rbac", "owners:detail"]}
         >
           <InputNumber />
         </Form.Item>
@@ -412,18 +424,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.owners.detail")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "owners:detail"]}
-        >
-          <InputNumber />
-        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.payments.enter")}
           rules={[
@@ -448,6 +448,30 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.phonebook.edit")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "phonebook:edit"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.phonebook.view")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "phonebook:view"]}
+        >
+          <InputNumber />
+        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.production.board")}
           rules={[
@@ -509,38 +533,14 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
           <InputNumber />
         </Form.Item>
         <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.edit")}
+          label={t("bodyshop.fields.rbac.shop.config")}
           rules={[
             {
               required: true,
               //message: t("general.validation.required"),
             },
           ]}
-          name={["md_rbac", "timetickets:edit"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "timetickets:shiftedit"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.shop.vendors")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "shop:vendors"]}
+          name={["md_rbac", "shop:config"]}
         >
           <InputNumber />
         </Form.Item>
@@ -556,18 +556,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.shop.config")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "shop:config"]}
-        >
-          <InputNumber />
-        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.shop.rbac")}
           rules={[
@@ -580,6 +568,18 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.shop.reportcenter")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "shop:reportcenter"]}
+        >
+          <InputNumber />
+        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.shop.templates")}
           rules={[
@@ -592,6 +592,42 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.shop.vendors")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "shop:vendors"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.temporarydocs.view")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "temporarydocs:view"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.timetickets.edit")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "timetickets:edit"]}
+        >
+          <InputNumber />
+        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.timetickets.enter")}
           rules={[
@@ -616,6 +652,18 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "timetickets:shiftedit"]}
+        >
+          <InputNumber />
+        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.users.editaccess")}
           rules={[
@@ -628,42 +676,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.temporarydocs.view")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "temporarydocs:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.phonebook.view")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "phonebook:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.phonebook.edit")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "phonebook:edit"]}
-        >
-          <InputNumber />
-        </Form.Item>
         {Simple_Inventory.treatment === "on" && (
           <>
             <Form.Item

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

@@ -25,6 +25,7 @@ export function TechLookupJobsList({ bodyshop }) {
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     variables: {
       statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
+      isConverted: true,
     },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",

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

@@ -5,6 +5,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
+import {pageLimit} from "../../utils/config";
 export default function VehiclesListComponent({
   loading,
   vehicles,
@@ -106,7 +107,7 @@ export default function VehiclesListComponent({
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: total,
         }}

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

@@ -5,6 +5,7 @@ import AlertComponent from "../alert/alert.component";
 import { QUERY_ALL_VEHICLES_PAGINATED } from "../../graphql/vehicles.queries";
 import queryString from "query-string";
 import { useLocation } from "react-router-dom";
+import {pageLimit} from "../../utils/config";
 
 export default function VehiclesListContainer() {
   const searchParams = queryString.parse(useLocation().search);
@@ -15,8 +16,8 @@ export default function VehiclesListContainer() {
     {
       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/vendors-form/vendors-form.component.jsx

@@ -154,7 +154,6 @@ export function VendorsFormComponent({
           label={t("vendors.fields.phone")}
           name="phone"
           rules={[
-            { required: true, message: t("general.validation.required") },
             ({ getFieldValue }) =>
               PhoneItemFormatterValidation(getFieldValue, "phone"),
           ]}

client/src/graphql/appointments.queries.js

@@ -271,6 +271,7 @@ export const CANCEL_APPOINTMENTS_BY_JOB_ID = gql`
       scheduled_completion
       status
       lost_sale_reason
+      date_lost_sale
     }
   }
 `;

client/src/graphql/bodyshop.queries.js

@@ -39,6 +39,7 @@ export const QUERY_BODYSHOP = gql`
       logo_img_path
       md_ro_statuses
       md_order_statuses
+      md_functionality_toggles
       shopname
       state
       state_tax_id
@@ -158,6 +159,7 @@ export const UPDATE_SHOP = gql`
         logo_img_path
         md_ro_statuses
         md_order_statuses
+        md_functionality_toggles
         shopname
         state
         state_tax_id

client/src/graphql/courtesy-car.queries.js

@@ -30,15 +30,15 @@ export const QUERY_AVAILABLE_CC = gql`
       fuel
       id
       make
-      model
-      plate
-      status
-      year
-      dailycost
       mileage
+      model
       notes
       nextservicekm
       nextservicedate
+      plate
+      readiness
+      status
+      year
     }
   }
 `;
@@ -68,19 +68,20 @@ export const QUERY_ALL_CC = gql`
       insuranceexpires
       leaseenddate
       make
+      mileage
       model
       nextservicedate
       nextservicekm
       notes
       plate
       purchasedate
+      readiness
       registrationexpires
       serviceenddate
       servicestartdate
       status
       vin
       year
-      mileage
       cccontracts(
         where: { status: { _eq: "contracts.status.out" } }
         order_by: { contract_date: desc }
@@ -90,10 +91,10 @@ export const QUERY_ALL_CC = gql`
         scheduledreturn
         job {
           id
-          ro_number
           ownr_fn
           ownr_ln
           ownr_co_nm
+          ro_number
         }
       }
     }
@@ -119,19 +120,20 @@ export const QUERY_CC_BY_PK = gql`
       insuranceexpires
       leaseenddate
       make
+      mileage
       model
       nextservicedate
       nextservicekm
       notes
       plate
       purchasedate
+      readiness
       registrationexpires
       serviceenddate
       servicestartdate
       status
       vin
       year
-      mileage
       cccontracts_aggregate {
         aggregate {
           count(distinct: true)
@@ -139,21 +141,20 @@ export const QUERY_CC_BY_PK = gql`
       }
       cccontracts(offset: $offset, limit: $limit, order_by: $order) {
         agreementnumber
+        driver_fn
+        driver_ln
         id
-        status
-        start
-        scheduledreturn
         kmstart
         kmend
-        driver_ln
-        driver_fn
+        scheduledreturn
+        start
+        status
         job {
-          ro_number
-
+          id
           ownr_ln
           ownr_fn
           ownr_co_nm
-          id
+          ro_number
         }
       }
     }

client/src/graphql/jobs.queries.js

@@ -1,9 +1,69 @@
 import { gql } from "@apollo/client";
 
-export const QUERY_ALL_ACTIVE_JOBS = gql`
-  query QUERY_ALL_ACTIVE_JOBS($statuses: [String!]!) {
+export const QUERY_ALL_ACTIVE_JOBS_PAGINATED = gql`
+  query QUERY_ALL_JOBS_PAGINATED_STATUS_FILTERED(
+    $offset: Int
+    $limit: Int
+    $order: [jobs_order_by!]
+    $statuses: [String!]!, 
+    $isConverted: Boolean
+  ) {
     jobs(
-      where: { status: { _in: $statuses } }
+      offset: $offset
+      limit: $limit
+      where: { status: { _in: $statuses }, converted: { _eq: $isConverted } }
+      order_by: $order
+    ) {
+      iouparent
+      ownr_fn
+      ownr_ln
+      ownr_co_nm
+      ownr_ph1
+      ownr_ph2
+      ownr_ea
+      ownerid
+      comment
+      plate_no
+      plate_st
+      v_vin
+      v_model_yr
+      v_model_desc
+      v_make_desc
+      v_color
+      vehicleid
+      actual_completion
+      actual_delivery
+      actual_in
+      production_vars
+      id
+      ins_co_nm
+      clm_no
+      po_number
+      clm_total
+      owner_owing
+      ro_number
+      scheduled_completion
+      scheduled_in
+      scheduled_delivery
+      status
+      updated_at
+      ded_amt
+      suspended
+      est_ct_fn
+      est_ct_ln
+    }
+    jobs_aggregate(where: { status: { _in: $statuses } }) {
+      aggregate {
+        count(distinct: true)
+      }
+    }
+  }
+`;
+
+export const QUERY_ALL_ACTIVE_JOBS = gql`
+  query QUERY_ALL_ACTIVE_JOBS($statuses: [String!]!, $isConverted: Boolean) {
+    jobs(
+      where: { status: { _in: $statuses }, converted: { _eq: $isConverted } }
       order_by: { created_at: desc }
     ) {
       iouparent
@@ -60,7 +120,7 @@ export const QUERY_PARTS_QUEUE = gql`
       }
     }
     jobs(
-      where: { _and: [{ status: { _in: $statuses } }] }
+      where: { _and: [{ status: { _in: $statuses }, converted: { _eq: true } }] }
       offset: $offset
       limit: $limit
       order_by: $order
@@ -432,7 +492,6 @@ export const QUERY_JOB_COSTING_DETAILS = gql`
       status
       ca_bc_pvrt
       ca_customer_gst
-
       joblines(where: { removed: { _eq: false } }) {
         id
         unq_seq
@@ -676,6 +735,7 @@ export const GET_JOB_BY_PK = gql`
       date_scheduled
       date_invoiced
       date_last_contacted
+      date_lost_sale
       date_next_contact
       date_towin
       date_rentalresp
@@ -1001,7 +1061,6 @@ export const QUERY_TECH_JOB_DETAILS = gql`
       actual_completion
       actual_delivery
       actual_in
-
       id
       ins_co_nm
       clm_no
@@ -1079,6 +1138,7 @@ export const UPDATE_JOB = gql`
         actual_in
         date_repairstarted
         date_void
+        date_lost_sale
       }
     }
   }
@@ -1586,7 +1646,6 @@ export const QUERY_ALL_JOB_FIELDS = gql`
       clm_title
       clm_total
       clm_zip
-
       cust_pr
       ded_amt
       ded_status
@@ -1669,7 +1728,6 @@ export const QUERY_ALL_JOB_FIELDS = gql`
       parts_tax_rates
       pay_amt
       pay_chknm
-
       pay_type
       payee_nms
       plate_no
@@ -2077,6 +2135,7 @@ export const QUERY_JOB_EXPORT_DMS = gql`
     }
   }
 `;
+
 export const QUERY_RELATED_ROS = gql`
   query QUERY_RELATED_ROS($jobid: uuid!) {
     relatedjobs(
@@ -2098,6 +2157,7 @@ export const QUERY_RELATED_ROS = gql`
     }
   }
 `;
+
 export const INSERT_RELATED_ROS = gql`
   mutation INSERT_RELATED_ROS($relationship: relatedjobs_insert_input!) {
     insert_relatedjobs_one(object: $relationship) {
@@ -2115,6 +2175,7 @@ export const INSERT_RELATED_ROS = gql`
     }
   }
 `;
+
 export const DELETE_RELATED_RO = gql`
   mutation DELETE_RELATED_RO($relationshipid: uuid!) {
     delete_relatedjobs_by_pk(id: $relationshipid) {
@@ -2122,6 +2183,7 @@ export const DELETE_RELATED_RO = gql`
     }
   }
 `;
+
 export const GET_JOB_LINE_ORDERS = gql`
   query GET_JOB_LINE_ORDERS($joblineid: uuid!) {
     billlines(where: { joblineid: { _eq: $joblineid } }) {

client/src/graphql/timetickets.queries.js

@@ -143,9 +143,14 @@ export const QUERY_TIME_TICKETS_IN_RANGE_SB = gql`
     $end: date!
     $fixedStart: date!
     $fixedEnd: date!
+    $jobStart: timestamptz!
+    $jobEnd: timestamptz!
   ) {
     timetickets(
-      where: { date: { _gte: $start, _lte: $end } }
+      where: {
+        date: { _gte: $start, _lte: $end }
+        cost_center: { _neq: "timetickets.labels.shift" }
+      }
       order_by: { date: desc_nulls_first }
     ) {
       actualhrs
@@ -176,7 +181,10 @@ export const QUERY_TIME_TICKETS_IN_RANGE_SB = gql`
       }
     }
     fixedperiod: timetickets(
-      where: { date: { _gte: $fixedStart, _lte: $fixedEnd } }
+      where: {
+        date: { _gte: $fixedStart, _lte: $fixedEnd }
+        cost_center: { _neq: "timetickets.labels.shift" }
+      }
       order_by: { date: desc_nulls_first }
     ) {
       actualhrs
@@ -205,6 +213,25 @@ export const QUERY_TIME_TICKETS_IN_RANGE_SB = gql`
         last_name
       }
     }
+    jobs(
+      where: {
+        date_invoiced: { _is_null: true }
+        ro_number: { _is_null: false }
+        voided: { _eq: false }
+        _or: [
+          { actual_completion: { _gte: $jobStart, _lte: $jobEnd } }
+          { actual_delivery: { _gte: $jobStart, _lte: $jobEnd } }
+        ]
+      }
+    ) {
+      id
+      joblines(order_by: { line_no: asc }, where: { removed: { _eq: false } }) {
+        convertedtolbr
+        convertedtolbr_data
+        mod_lb_hrs
+        mod_lbr_ty
+      }
+    }
   }
 `;
 

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

@@ -14,6 +14,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort, dateSort } from "../../utils/sorters";
+import {pageLimit} from "../../utils/config";
 
 const mapDispatchToProps = (dispatch) => ({
   setPartsOrderContext: (context) =>
@@ -295,11 +296,11 @@ export function BillsListPage({
         pagination={
           search?.search
             ? {
-                pageSize: 25,
+                pageSize: pageLimit,
                 showSizeChanger: false,
               }
             : {
-                pageSize: 25,
+                pageSize: pageLimit,
                 current: parseInt(page || 1),
                 total: total,
                 showSizeChanger: false,

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

@@ -13,6 +13,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import BillsPageComponent from "./bills.page.component";
+import {pageLimit} from "../../utils/config";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -38,8 +39,8 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
       variables: {
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           searchObj
             ? JSON.parse(searchObj)

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

@@ -12,6 +12,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import ContractsPageComponent from "./contracts.page.component";
+import {pageLimit} from "../../utils/config";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -29,8 +30,8 @@ export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
       nextFetchPolicy: "network-only",
       variables: {
         search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           {
             [sortcolumn || "start"]: sortorder

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

@@ -1,11 +1,14 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form, notification } from "antd";
 import moment from "moment";
+import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import NotFound from "../../components/not-found/not-found.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { QUERY_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries";
 import {
@@ -13,12 +16,10 @@ import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
+import { pageLimit } from "../../utils/config";
 import { CreateRecentItem } from "../../utils/create-recent-item";
+import UndefinedToNull from "./../../utils/undefinedtonull";
 import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
-import NotFound from "../../components/not-found/not-found.component";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import queryString from "query-string";
-import { useLocation } from "react-router-dom";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -41,8 +42,8 @@ export function CourtesyCarDetailPageContainer({
   const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
     variables: {
       id: ccId,
-      offset: page ? (page - 1) * 25 : 0,
-      limit: 25,
+      offset: page ? (page - 1) * pageLimit : 0,
+      limit: pageLimit,
       order: [
         {
           [sortcolumn || "start"]: sortorder
@@ -111,7 +112,10 @@ export function CourtesyCarDetailPageContainer({
     setSaveLoading(true);
 
     const result = await updateCourtesyCar({
-      variables: { cc: { ...values }, ccId: ccId },
+      variables: {
+        cc: { ...UndefinedToNull(values, ["readiness"]) },
+        ccId: ccId,
+      },
       refetchQueries: ["QUERY_CC_BY_PK"],
       awaitRefetchQueries: true,
     });

client/src/pages/export-logs/export-logs.page.component.jsx

@@ -12,6 +12,7 @@ import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_EXPORT_LOG_PAGINATED } from "../../graphql/accounting.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -29,8 +30,8 @@ export function ExportLogsPageComponent({ bodyshop }) {
       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
@@ -178,7 +179,7 @@ export function ExportLogsPageComponent({ bodyshop }) {
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: data && data.search_exportlog_aggregate.aggregate.count,
         }}

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

@@ -13,6 +13,7 @@ import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //bodyshop: selectBodyshop,
@@ -33,16 +34,16 @@ export function AllJobs({ setBreadcrumbs, setSelectedHeader }) {
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
       variables: {
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         ...(statusFilters ? { statusList: JSON.parse(statusFilters) } : {}),
         order: [
           {
             [sortcolumn || "ro_number"]:
               sortorder && sortorder !== "false"
-                ? sortorder === "descend"
+                ? (sortorder === "descend"
                   ? "desc"
-                  : "asc"
+                  : "asc")
                 : "desc",
           },
         ],

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

@@ -36,14 +36,22 @@ import JobsCloseLines from "../../components/jobs-close-lines/jobs-close-lines.c
 import LayoutFormRow from "../../components/layout-form-row/layout-form-row.component";
 import { generateJobLinesUpdatesForInvoicing } from "../../graphql/jobs-lines.queries";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly,
 });
 
-export function JobsCloseComponent({ job, bodyshop, jobRO }) {
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
+export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail, }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const client = useApolloClient();
@@ -110,6 +118,10 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
       notification["success"]({
         message: t("jobs.successes.closed"),
       });
+      insertAuditTrail({
+        jobid: job.id,
+        operation: AuditTrailMapping.jobinvoiced(),
+      });
       // history.push(`/manage/jobs/${job.id}`);
     } else {
       setLoading(false);
@@ -527,4 +539,4 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
     </div>
   );
 }
-export default connect(mapStateToProps, null)(JobsCloseComponent);
+export default connect(mapStateToProps, mapDispatchToProps)(JobsCloseComponent);

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

@@ -1,6 +1,6 @@
-import _ from "lodash";
 import { useLazyQuery, useMutation } from "@apollo/client";
 import { Form, notification } from "antd";
+import _ from "lodash";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -90,6 +90,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
       {},
       values,
       { date_open: new Date() },
+      { date_estimated: new Date() },
       {
         vehicle:
           state.vehicle.selectedid || state.vehicle.none

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

@@ -3,19 +3,19 @@ import Icon, {
   CalendarFilled,
   DollarCircleOutlined,
   FileImageFilled,
-  PrinterFilled,
-  ToolFilled,
   HistoryOutlined,
+  PrinterFilled,
   SyncOutlined,
+  ToolFilled,
 } from "@ant-design/icons";
 import {
   Button,
   Divider,
   Form,
-  notification,
   PageHeader,
   Space,
   Tabs,
+  notification,
 } from "antd";
 import Axios from "axios";
 import moment from "moment";
@@ -27,6 +27,7 @@ import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import FormFieldsChanged from "../../components/form-fields-changed-alert/form-fields-changed-alert.component";
+import JobAuditTrail from "../../components/job-audit-trail/job-audit-trail.component";
 import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
 import JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container";
 import JobReconciliationModal from "../../components/job-reconciliation-modal/job-reconciliation.modal.container";
@@ -42,17 +43,17 @@ import JobsDetailPliContainer from "../../components/jobs-detail-pli/jobs-detail
 import JobsDetailRates from "../../components/jobs-detail-rates/jobs-detail-rates.component";
 import JobsDetailTotals from "../../components/jobs-detail-totals/jobs-detail-totals.component";
 import JobsDocumentsGalleryContainer from "../../components/jobs-documents-gallery/jobs-documents-gallery.container";
+import JobsDocumentsLocalGallery from "../../components/jobs-documents-local-gallery/jobs-documents-local-gallery.container";
 import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
+import NoteUpsertModalComponent from "../../components/note-upsert-modal/note-upsert-modal.container";
 import ScheduleJobModalContainer from "../../components/schedule-job-modal/schedule-job-modal.container";
+import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import JobAuditTrail from "../../components/job-audit-trail/job-audit-trail.component";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import { insertAuditTrail } from "../../redux/application/application.actions";
-import JobsDocumentsLocalGallery from "../../components/jobs-documents-local-gallery/jobs-documents-local-gallery.container";
 import UndefinedToNull from "../../utils/undefinedtonull";
-import NoteUpsertModalComponent from "../../components/note-upsert-modal/note-upsert-modal.container";
+import { DateTimeFormat } from "./../../utils/DateFormatter";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -172,7 +173,7 @@ export function JobsDetailPage({
           operation: AuditTrailMapping.jobfieldchange(
             key,
             changedAuditFields[key] instanceof moment
-              ? moment(changedAuditFields[key]).format("MM/DD/YYYY hh:mm a")
+              ? DateTimeFormat(changedAuditFields[key])
               : changedAuditFields[key]
           ),
         });

client/src/pages/parts-queue/parts-queue.page.component.jsx

@@ -18,6 +18,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter, TimeAgoFormatter } from "../../utils/DateFormatter";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -296,7 +297,7 @@ export function PartsQueuePageComponent({ bodyshop }) {
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 50,
+          pageSize: pageLimit,
           // current: parseInt(page || 1),
           // total: data && data.jobs_aggregate.aggregate.count,
         }}

client/src/pages/payments-all/payments-all.container.page.jsx

@@ -14,6 +14,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -34,8 +35,8 @@ export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
       variables: {
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           searchObj
           ? JSON.parse(searchObj)

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

@@ -17,6 +17,7 @@ import {
 import ChatOpenButton from "../../components/chat-open-button/chat-open-button.component";
 import { alphaSort } from "../../utils/sorters";
 import { HasRbacAccess } from "../../components/rbac-wrapper/rbac-wrapper.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -35,8 +36,8 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
       nextFetchPolicy: "network-only",
       variables: {
         search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           {
             [sortcolumn || "lastname"]: sortorder
@@ -189,7 +190,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: data && data.search_phonebook_aggregate.aggregate.count,
         }}

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

@@ -1,21 +1,22 @@
 import Icon, { FieldTimeOutlined } from "@ant-design/icons";
 import { Tabs } from "antd";
+import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { FaShieldAlt } from "react-icons/fa";
 import { connect } from "react-redux";
+import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
+import ScoreboardTimeTicketsStats from "../../components/scoreboard-timetickets-stats/scoreboard-timetickets.component";
 import ScoreboardTimeTickets from "../../components/scoreboard-timetickets/scoreboard-timetickets.component";
 import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import queryString from "query-string";
-import { useHistory, useLocation } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -71,7 +72,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
             tab={
               <span>
                 <FieldTimeOutlined />
-                {t("scoreboard.labels.timetickets")}
+                {t("scoreboard.labels.timeticketsemployee")}
               </span>
             }
             destroyInactiveTabPane
@@ -79,6 +80,18 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
           >
             <ScoreboardTimeTickets />
           </Tabs.TabPane>
+          <Tabs.TabPane
+            tab={
+              <span>
+                <FieldTimeOutlined />
+                {t("scoreboard.labels.allemployeetimetickets")}
+              </span>
+            }
+            destroyInactiveTabPane
+            key="ticketsstats"
+          >
+            <ScoreboardTimeTicketsStats />
+          </Tabs.TabPane>
         </Tabs>
       </RbacWrapper>
     </FeatureWrapper>

client/src/pages/shop-csi/shop-csi.container.page.jsx

@@ -16,6 +16,7 @@ import {
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import {pageLimit} from "../../utils/config";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -42,8 +43,8 @@ export function ShopCsiContainer({
       nextFetchPolicy: "network-only",
       variables: {
         //search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           {
             [sortcolumn || "completedon"]: sortorder