Merge remote-tracking branch 'origin/client-update' into test-beta

client/.npmrc

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

client/craco.config.js

@@ -2,6 +2,14 @@
 const TerserPlugin = require("terser-webpack-plugin");
 const CracoLessPlugin = require("craco-less");
 const SentryWebpackPlugin = require("@sentry/webpack-plugin");
+const {convertLegacyToken} = require('@ant-design/compatible/lib');
+const {theme} = require('antd/lib');
+
+const {defaultAlgorithm, defaultSeed} = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
+const v4Token = convertLegacyToken(mapToken);
+
 
 module.exports = {
     plugins: [
@@ -26,8 +34,10 @@ module.exports = {
                 lessLoaderOptions: {
                     lessOptions: {
                         modifyVars: {
+                            ...v4Token,
+                            // TODO: This will no longer work in AntD 5.0
                             ...(process.env.NODE_ENV === "development"
-                ? { "@primary-color": "#a51d1d" }
+                                ? {"colorPrimary": "#a51d1d"}
                                 : {
                                     //"@primary-color": "#1DA57A"
                                 }),
@@ -53,8 +63,14 @@ module.exports = {
         },
     ],
     webpack: {
-    configure: (webpackConfig) => ({
+        configure: (webpackConfig) => {
+            return {
                 ...webpackConfig,
+                // Required for Dev Server
+                devServer: {
+                    ...webpackConfig.devServer,
+                    allowedHosts: 'all',
+                },
                 optimization: {
                     ...webpackConfig.optimization,
                     // Workaround for CircleCI bug caused by the number of CPUs shown
@@ -67,7 +83,8 @@ module.exports = {
                         return item;
                     }),
                 },
-    }),
+            };
+        },
     },
     devtool: "source-map",
 };

client/cypress.config.js

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

client/cypress.json

@@ -1,8 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "experimentalStudio": true,
-  "env": {
-    "FIREBASE_USERNAME": "cypress@imex.test",
-    "FIREBASE_PASSWORD": "cypress"
-  }
-}

client/package.json

@@ -4,85 +4,89 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@apollo/client": "^3.7.9",
+    "@ant-design/compatible": "^5.1.2",
+    "@ant-design/pro-layout": "^7.17.16",
+    "@apollo/client": "^3.8.8",
     "@asseinfo/react-kanban": "^2.2.0",
-    "@craco/craco": "^7.0.0",
+    "@craco/craco": "^7.1.0",
-    "@fingerprintjs/fingerprintjs": "^3.4.2",
+    "@fingerprintjs/fingerprintjs": "^4.2.1",
     "@jsreport/browser-client": "^3.1.0",
-    "@sentry/react": "^7.40.0",
+    "@reduxjs/toolkit": "^2.0.1",
-    "@sentry/tracing": "^7.40.0",
+    "@sentry/react": "^7.91.0",
-    "@splitsoftware/splitio-react": "^1.8.1",
+    "@sentry/tracing": "^7.91.0",
-    "@tanem/react-nprogress": "^5.0.8",
+    "@splitsoftware/splitio-react": "^1.10.2",
-    "antd": "^4.24.8",
+    "@tanem/react-nprogress": "^5.0.51",
+    "antd": "^5.12.5",
     "apollo-link-logger": "^2.0.1",
-    "axios": "^1.3.4",
+    "axios": "^1.6.3",
-    "craco-less": "^2.0.0",
+    "craco-less": "^3.0.1",
+    "dayjs": "^1.11.10",
+    "dayjs-business-days2": "^1.2.2",
     "dinero.js": "^1.9.1",
-    "dotenv": "^16.0.1",
+    "dotenv": "^16.3.1",
     "enquire-js": "^0.2.1",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^9.17.1",
+    "firebase": "^10.7.1",
     "graphql": "^16.6.0",
-    "i18next": "^22.4.10",
+    "i18next": "^23.7.12",
-    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-browser-languagedetector": "^7.0.2",
-    "jsoneditor": "^9.9.0",
+    "jsoneditor": "^10.0.0",
     "jsreport-browser-client-dist": "^1.3.0",
-    "libphonenumber-js": "^1.10.21",
+    "libphonenumber-js": "^1.10.53",
-    "logrocket": "^3.0.1",
+    "logrocket": "^7.0.0",
-    "markerjs2": "^2.28.1",
+    "markerjs2": "^2.31.4",
-    "moment-business-days": "^1.2.0",
-    "moment-timezone": "^0.5.41",
     "normalize-url": "^8.0.0",
-    "phone": "^3.1.35",
+    "phone": "^3.1.41",
     "preval.macro": "^5.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.3",
+    "query-string": "^8.1.0",
     "rc-queue-anim": "^2.0.0",
     "rc-scroll-anim": "^2.7.6",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-big-calendar": "^1.6.8",
+    "react-big-calendar": "^1.8.5",
     "react-color": "^2.19.3",
-    "react-cookie": "^4.1.1",
+    "react-cookie": "^6.1.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
-    "react-drag-listview": "^0.2.1",
+    "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.0",
     "react-grid-layout": "^1.3.4",
-    "react-i18next": "^12.2.0",
+    "react-i18next": "^14.0.0",
     "react-icons": "^4.7.1",
     "react-image-lightbox": "^5.1.4",
-    "react-intersection-observer": "^9.4.3",
+    "react-intersection-observer": "^9.5.3",
-    "react-number-format": "^5.1.3",
+    "react-number-format": "^5.1.4",
-    "react-redux": "^8.0.5",
+    "react-redux": "^9.0.4",
-    "react-resizable": "^3.0.4",
+    "react-resizable": "^3.0.5",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.21.1",
     "react-scripts": "^5.0.1",
     "react-sticky": "^6.0.3",
     "react-sublime-video": "^0.2.5",
-    "react-virtualized": "^9.22.3",
+    "react-virtualized": "^9.22.5",
     "recharts": "^2.4.3",
-    "redux": "^4.2.1",
+    "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.2.2",
+    "redux-saga": "^1.2.3",
     "redux-state-sync": "^3.1.4",
-    "reselect": "^4.1.7",
+    "reselect": "^5.0.1",
     "sass": "^1.58.3",
-    "socket.io-client": "^4.6.1",
+    "socket.io-client": "^4.7.2",
-    "styled-components": "^5.3.6",
+    "styled-components": "^6.1.6",
     "subscriptions-transport-ws": "^0.11.0",
-    "web-vitals": "^2.1.4",
+    "terser-webpack-plugin": "^5.3.10",
-    "workbox-background-sync": "^6.5.3",
+    "web-vitals": "^3.5.1",
-    "workbox-broadcast-update": "^6.5.3",
+    "workbox-background-sync": "^7.0.0",
-    "workbox-cacheable-response": "^6.5.3",
+    "workbox-broadcast-update": "^7.0.0",
-    "workbox-core": "^6.5.3",
+    "workbox-cacheable-response": "^7.0.0",
-    "workbox-expiration": "^6.5.3",
+    "workbox-core": "^7.0.0",
-    "workbox-google-analytics": "^6.5.3",
+    "workbox-expiration": "^7.0.0",
-    "workbox-navigation-preload": "^6.5.3",
+    "workbox-google-analytics": "^7.0.0",
-    "workbox-precaching": "^6.5.3",
+    "workbox-navigation-preload": "^7.0.0",
-    "workbox-range-requests": "^6.5.3",
+    "workbox-precaching": "^7.0.0",
-    "workbox-routing": "^6.5.3",
+    "workbox-range-requests": "^7.0.0",
-    "workbox-strategies": "^6.5.3",
+    "workbox-routing": "^7.0.0",
-    "workbox-streams": "^6.5.3",
+    "workbox-strategies": "^7.0.0",
+    "workbox-streams": "^7.0.0",
     "yauzl": "^2.10.0"
   },
   "scripts": {
@@ -119,12 +123,13 @@
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
-    "@sentry/webpack-plugin": "^1.20.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@testing-library/cypress": "^8.0.3",
+    "@sentry/webpack-plugin": "^2.10.2",
-    "cypress": "^10.3.1",
+    "@testing-library/cypress": "^10.0.1",
-    "eslint-plugin-cypress": "^2.12.1",
+    "cypress": "^13.6.2",
+    "eslint-plugin-cypress": "^2.15.1",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
-    "source-map-explorer": "^2.5.2"
+    "source-map-explorer": "^2.5.3"
   }
 }

client/src/App/App.container.jsx

@@ -2,14 +2,15 @@ import { ApolloProvider } from "@apollo/client";
 import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
-import moment from "moment";
+import dayjs from "../utils/day";
+import 'dayjs/locale/en';
 import React from "react";
 import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 
-moment.locale("en-US");
+dayjs.locale("en");
 
 export const factory = SplitSdk({
   core: {

client/src/App/App.jsx

@@ -1,11 +1,11 @@
-import { useClient } from "@splitsoftware/splitio-react";
+import {useSplitClient} from "@splitsoftware/splitio-react";
-import { Button, Result } from "antd";
+import {Button, Result} from "antd";
 import LogRocket from "logrocket";
-import React, { lazy, Suspense, useEffect } from "react";
+import React, {lazy, Suspense, useEffect} from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
-import { Route, Switch } from "react-router-dom";
+import {Route, Routes} from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import {createStructuredSelector} from "reselect";
 import DocumentEditorContainer from "../components/document-editor/document-editor.container";
 import ErrorBoundary from "../components/error-boundary/error-boundary.component";
 //Component Imports
@@ -13,14 +13,11 @@ import LoadingSpinner from "../components/loading-spinner/loading-spinner.compon
 import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
 import LandingPage from "../pages/landing/landing.page";
 import TechPageContainer from "../pages/tech/tech.page.container";
-import { setOnline } from "../redux/application/application.actions";
+import {setOnline} from "../redux/application/application.actions";
-import { selectOnline } from "../redux/application/application.selectors";
+import {selectOnline} from "../redux/application/application.selectors";
-import { checkUserSession } from "../redux/user/user.actions";
+import {checkUserSession} from "../redux/user/user.actions";
-import {
+import {selectBodyshop, selectCurrentUser,} from "../redux/user/user.selectors";
-  selectBodyshop,
+import PrivateRoute from "../components/PrivateRoute";
-  selectCurrentUser,
-} from "../redux/user/user.selectors";
-import PrivateRoute from "../utils/private-route";
 import "./App.styles.scss";
 
 const ResetPassword = lazy(() =>
@@ -33,7 +30,6 @@ const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
 const MobilePaymentContainer = lazy(() =>
     import("../pages/mobile-payment/mobile-payment.container")
 );
-
 const mapStateToProps = createStructuredSelector({
     currentUser: selectCurrentUser,
     online: selectOnline,
@@ -50,8 +46,8 @@ export function App({
                         currentUser,
                         online,
                         setOnline,
-}) {
+                    }) {
-  const client = useClient();
+    const client = useSplitClient().client;
 
     useEffect(() => {
         if (!navigator.onLine) {
@@ -64,7 +60,7 @@ export function App({
     //const b = Grid.useBreakpoint();
     // console.log("Breakpoints:", b);
 
-  const { t } = useTranslation();
+    const {t} = useTranslation();
 
     window.addEventListener("offline", function (e) {
         setOnline(false);
@@ -73,6 +69,7 @@ export function App({
     window.addEventListener("online", function (e) {
         setOnline(true);
     });
+
     useEffect(() => {
         if (currentUser.authorized && bodyshop) {
             client.setAttribute("imexshopid", bodyshop.imexshopid);
@@ -85,7 +82,7 @@ export function App({
     }, [bodyshop, client, currentUser.authorized]);
 
     if (currentUser.authorized === null) {
-    return <LoadingSpinner message={t("general.labels.loggingin")} />;
+        return <LoadingSpinner message={t("general.labels.loggingin")}/>;
     }
 
     if (!online)
@@ -107,54 +104,27 @@ export function App({
             />
         );
 
+    // Any route that is not assigned and matched will default to the Landing Page component
     return (
-    <Switch>
+        <Suspense fallback={<LoadingSpinner message="ImEX Online"/>}>
-      <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>
+            <Routes>
-        <ErrorBoundary>
+                <Route path="*" element={<ErrorBoundary><LandingPage/></ErrorBoundary>}/>
-          <Route exact path="/" component={LandingPage} />
+                <Route path="/signin" element={<ErrorBoundary><SignInPage/></ErrorBoundary>}/>
-        </ErrorBoundary>
+                <Route path="/resetpassword" element={<ErrorBoundary><ResetPassword/></ErrorBoundary>}/>
-        <ErrorBoundary>
+                <Route path="/csi/:surveyId" element={<ErrorBoundary><CsiPage/></ErrorBoundary>}/>
-          <Route exact path="/signin" component={SignInPage} />
+                <Route path="/disclaimer" element={<ErrorBoundary><DisclaimerPage/></ErrorBoundary>}/>
-        </ErrorBoundary>
+                <Route path="/mp/:paymentIs" element={<ErrorBoundary><MobilePaymentContainer/></ErrorBoundary>}/>
-        <ErrorBoundary>
+                <Route path="/manage/*" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
-          <Route exact path="/resetpassword" component={ResetPassword} />
+                    <Route path="*" element={<ManagePage/>}/>
-        </ErrorBoundary>
+                </Route>
-        <ErrorBoundary>
+                <Route path="/tech/*" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
-          <Route exact path="/csi/:surveyId" component={CsiPage} />
+                    <Route path="*" element={<TechPageContainer/>}/>
-        </ErrorBoundary>
+                </Route>
-        <ErrorBoundary>
+                <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}>
-          <Route exact path="/disclaimer" component={DisclaimerPage} />
+                    <Route path="*" element={<DocumentEditorContainer/>}/>
-        </ErrorBoundary>
+                </Route>
-        <ErrorBoundary>
+            </Routes>
-          <Route
-            exact
-            path="/mp/:paymentIs"
-            component={MobilePaymentContainer}
-          />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <PrivateRoute
-            isAuthorized={currentUser.authorized}
-            path="/manage"
-            component={ManagePage}
-          />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <PrivateRoute
-            isAuthorized={currentUser.authorized}
-            path="/tech"
-            component={TechPageContainer}
-          />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <PrivateRoute
-            isAuthorized={currentUser.authorized}
-            path="/edit"
-            component={DocumentEditorContainer}
-          />
-        </ErrorBoundary>
         </Suspense>
-    </Switch>
     );
 }
 

client/src/components/PrivateRoute.js

@@ -0,0 +1,17 @@
+import React, {useEffect} from "react";
+import {Outlet, useLocation, useNavigate} from "react-router-dom";
+
+function PrivateRoute({component: Component, isAuthorized, ...rest}) {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!isAuthorized) {
+            navigate(`/signin?redirect=${location.pathname}`);
+        }
+    }, [isAuthorized, navigate,location]);
+
+    return <Outlet/>;
+}
+
+export default PrivateRoute;

client/src/components/allocations-assignment/allocations-assignment.component.jsx

@@ -61,7 +61,7 @@ export function AllocationsAssignmentComponent({
   );
 
   return (
-    <Popover content={popContent} visible={visibility}>
+    <Popover content={popContent} open={visibility}>
       <Button onClick={() => setVisibility(true)}>
         {t("allocations.actions.assign")}
       </Button>

client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx

@@ -59,7 +59,7 @@ export default connect(
   );
 
   return (
-    <Popover content={popContent} visible={visibility}>
+    <Popover content={popContent} open={visibility}>
       <Button disabled={disabled} onClick={() => setVisibility(true)}>
         {t("allocations.actions.assign")}
       </Button>

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

@@ -1,6 +1,6 @@
-import { useMutation, useQuery } from "@apollo/client";
+import {useMutation, useQuery} from "@apollo/client";
-import { Button, Form, PageHeader, Popconfirm, Space } from "antd";
+import {Button, Form, Popconfirm, Space} from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -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";
@@ -26,15 +26,16 @@ import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-galler
 import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import BillDetailEditReturn from "./bill-detail-edit-return.component";
+import {PageHeader} from "@ant-design/pro-layout";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
     setPartsOrderContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "partsOrder" })),
+        dispatch(setModalContext({context: context, modal: "partsOrder"})),
-  insertAuditTrail: ({ jobid, operation }) =>
+    insertAuditTrail: ({jobid, operation}) =>
-    dispatch(insertAuditTrail({ jobid, operation })),
+        dispatch(insertAuditTrail({jobid, operation})),
 });
 
 export default connect(
@@ -42,14 +43,10 @@ export default connect(
     mapDispatchToProps
 )(BillDetailEditcontainer);
 
-export function BillDetailEditcontainer({
+export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail, bodyshop,}) {
-  setPartsOrderContext,
-  insertAuditTrail,
-  bodyshop,
-}) {
     const search = queryString.parse(useLocation().search);
 
-  const { t } = useTranslation();
+    const {t} = useTranslation();
     const [form] = Form.useForm();
     const [visible, setVisible] = useState(false);
     const [updateLoading, setUpdateLoading] = useState(false);
@@ -58,13 +55,15 @@ export function BillDetailEditcontainer({
     const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
     const [deleteBillLine] = useMutation(DELETE_BILL_LINE);
 
-  const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
+    const {loading, error, data, refetch} = useQuery(QUERY_BILL_BY_PK, {
-    variables: { billid: search.billid },
+        variables: {billid: search.billid},
         skip: !!!search.billid,
         fetchPolicy: "network-only",
         nextFetchPolicy: "network-only",
     });
 
+    // ... rest of the code remains the same
+
     const handleSave = () => {
         //It's got a previously deducted bill line!
         if (
@@ -82,11 +81,11 @@ export function BillDetailEditcontainer({
         setUpdateLoading(true);
         //let adjustmentsToInsert = {};
 
-    const { billlines, upload, ...bill } = values;
+        const {billlines, upload, ...bill} = values;
         const updates = [];
         updates.push(
             update_bill({
-        variables: { billId: search.billid, bill: bill },
+                variables: {billId: search.billid, bill: bill},
             })
         );
 
@@ -105,11 +104,11 @@ export function BillDetailEditcontainer({
         });
 
         deletedJobLines.forEach((d) => {
-      updates.push(deleteBillLine({ variables: { id: d.id } }));
+            updates.push(deleteBillLine({variables: {id: d.id}}));
         });
 
         billlines.forEach((billline) => {
-      const { deductedfromlbr, inventories, jobline, ...il } = billline;
+            const {deductedfromlbr, inventories, jobline, ...il} = billline;
             delete il.__typename;
 
             if (il.id) {
@@ -159,7 +158,7 @@ export function BillDetailEditcontainer({
         setUpdateLoading(false);
     };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+    if (error) return <AlertComponent message={error.message} type="error"/>;
     if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
 
     const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
@@ -210,7 +209,7 @@ export function BillDetailEditcontainer({
 
                         {bodyshop.uselocalmediaserver ? (
                             <JobsDocumentsLocalGallery
-                job={{ id: data ? data.bills_by_pk.jobid : null }}
+                                job={{id: data ? data.bills_by_pk.jobid : null}}
                                 invoice_number={data ? data.bills_by_pk.invoice_number : null}
                                 vendorid={data ? data.bills_by_pk.vendorid : null}
                             />
@@ -246,7 +245,7 @@ const transformData = (data) => {
                     },
                 };
             }),
-        date: data.bills_by_pk ? moment(data.bills_by_pk.date) : null,
+            date: data.bills_by_pk ? dayjs(data.bills_by_pk.date) : null,
         }
         : {};
 };

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

@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -33,7 +33,7 @@ export function BillDetailEditReturn({
   disabled,
 }) {
   const search = queryString.parse(useLocation().search);
-  const history = useHistory();
+  const history = useNavigate();
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [visible, setVisible] = useState(false);
@@ -67,7 +67,7 @@ export function BillDetailEditReturn({
     });
     delete search.billid;
 
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
     setVisible(false);
   };
   useEffect(() => {
@@ -77,7 +77,7 @@ export function BillDetailEditReturn({
   return (
     <>
       <Modal
-        visible={visible}
+        open={visible}
         onCancel={() => setVisible(false)}
         destroyOnClose
         title={t("bills.actions.return")}

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

@@ -1,12 +1,12 @@
 import { Drawer, Grid } from "antd";
 import queryString from "query-string";
 import React from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import BillDetailEditComponent from "./bill-detail-edit-component";
 
 export default function BillDetailEditcontainer() {
   const search = queryString.parse(useLocation().search);
-  const history = useHistory();
+  const history = useNavigate();
 
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
@@ -29,10 +29,10 @@ export default function BillDetailEditcontainer() {
       width={drawerPercentage}
       onClose={() => {
         delete search.billid;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
       }}
       destroyOnClose
-      visible={search.billid}
+      open={search.billid}
     >
       <BillDetailEditComponent />
     </Drawer>

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

@@ -357,7 +357,7 @@ function BillEnterModalContainer({
     <Modal
       title={t("bills.labels.new")}
       width={"98%"}
-      visible={billEnterModal.visible}
+      open={billEnterModal.visible}
       okText={t("general.actions.save")}
       keyboard="false"
       onOk={() => form.submit()}

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

@@ -1,26 +1,16 @@
-import Icon, { UploadOutlined } from "@ant-design/icons";
+import Icon, {UploadOutlined} from "@ant-design/icons";
-import { useApolloClient } from "@apollo/client";
+import {useApolloClient} from "@apollo/client";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import {useSplitTreatments} from "@splitsoftware/splitio-react";
-import {
+import {Alert, Divider, Form, Input, Select, Space, Statistic, Switch, Upload,} from "antd";
-  Alert,
+import dayjs from "../../utils/day";
-  Divider,
+import React, {useEffect, useState} from "react";
-  Form,
+import {useTranslation} from "react-i18next";
-  Input,
+import {MdOpenInNew} from "react-icons/md";
-  Select,
+import {connect} from "react-redux";
-  Space,
+import {Link} from "react-router-dom";
-  Statistic,
+import {createStructuredSelector} from "reselect";
-  Switch,
+import {CHECK_BILL_INVOICE_NUMBER} from "../../graphql/bills.queries";
-  Upload,
+import {selectBodyshop} from "../../redux/user/user.selectors";
-} from "antd";
-import moment from "moment";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { MdOpenInNew } from "react-icons/md";
-import { connect } from "react-redux";
-import { Link } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
-import { CHECK_BILL_INVOICE_NUMBER } from "../../graphql/bills.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
@@ -30,41 +20,25 @@ import JobSearchSelect from "../job-search-select/job-search-select.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import BillFormLines from "./bill-form.lines.component";
-import { CalculateBillTotal } from "./bill-form.totals.utility";
+import {CalculateBillTotal} from "./bill-form.totals.utility";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({});
 
-export function BillFormComponent({
+export function BillFormComponent({bodyshop, disabled, form, vendorAutoCompleteOptions, lineData, responsibilityCenters, loadLines, billEdit, disableInvNumber, job, loadOutstandingReturns, loadInventory, preferredMake}) {
-  bodyshop,
+
-  disabled,
+    const {t} = useTranslation();
-  form,
-  vendorAutoCompleteOptions,
-  lineData,
-  responsibilityCenters,
-  loadLines,
-  billEdit,
-  disableInvNumber,
-  job,
-  loadOutstandingReturns,
-  loadInventory,
-  preferredMake,
-}) {
-  const { t } = useTranslation();
     const client = useApolloClient();
     const [discount, setDiscount] = useState(0);
-  const { Extended_Bill_Posting } = useTreatments(
+
-    ["Extended_Bill_Posting"],
+    const { treatments: {Extended_Bill_Posting, ClosingPeriod} } = useSplitTreatments({
-    {},
+        attributes: {},
-    bodyshop.imexshopid
+        names: ["Extended_Bill_Posting", "ClosingPeriod"],
-  );
+        splitKey: bodyshop.imexshopid,
-  const { ClosingPeriod } = useTreatments(
+    });
-    ["ClosingPeriod"],
+
-    {},
-    bodyshop.imexshopid
-  );
 
     const handleVendorSelect = (props, opt) => {
         setDiscount(opt.discount);
@@ -109,7 +83,7 @@ export function BillFormComponent({
         }
         const jobId = form.getFieldValue("jobid");
         if (jobId) {
-      loadLines({ variables: { id: jobId } });
+            loadLines({variables: {id: jobId}});
             if (form.getFieldValue("is_credit_memo") && vendorId && !billEdit) {
                 loadOutstandingReturns({
                     variables: {
@@ -136,13 +110,13 @@ export function BillFormComponent({
 
     return (
         <div>
-      <FormFieldsChanged form={form} />
+            <FormFieldsChanged form={form}/>
             <Form.Item
-        style={{ display: "none" }}
+                style={{display: "none"}}
                 name="isinhouse"
                 valuePropName="checked"
             >
-        <Switch />
+                <Switch/>
             </Form.Item>
             <LayoutFormRow grow>
                 <Form.Item
@@ -161,7 +135,7 @@ export function BillFormComponent({
                         notExported={false}
                         onBlur={() => {
                             if (form.getFieldValue("jobid") !== null) {
-                loadLines({ variables: { id: form.getFieldValue("jobid") } });
+                                loadLines({variables: {id: form.getFieldValue("jobid")}});
                                 if (form.getFieldValue("vendorid") !== null) {
                                     loadOutstandingReturns({
                                         variables: {
@@ -183,7 +157,7 @@ export function BillFormComponent({
                             required: true,
                             //message: t("general.validation.required"),
                         },
-            ({ getFieldValue }) => ({
+                        ({getFieldValue}) => ({
                             validator(rule, value) {
                                 if (
                                     value &&
@@ -222,7 +196,7 @@ export function BillFormComponent({
                                 >
                                     <Space>
                                         {iou.ro_number}
-                    <Icon component={MdOpenInNew} />
+                                        <Icon component={MdOpenInNew}/>
                                     </Space>
                                 </Link>
                             </Space>
@@ -240,7 +214,7 @@ export function BillFormComponent({
                             required: true,
                             //message: t("general.validation.required"),
                         },
-            ({ getFieldValue }) => ({
+                        ({getFieldValue}) => ({
                             async validator(rule, value) {
                                 const vendorid = getFieldValue("vendorid");
                                 if (vendorid && value) {
@@ -271,7 +245,7 @@ export function BillFormComponent({
                         }),
                     ]}
                 >
-          <Input disabled={disabled || disableInvNumber} />
+                    <Input disabled={disabled || disableInvNumber}/>
                 </Form.Item>
                 <Form.Item
                     label={t("bills.fields.date")}
@@ -281,24 +255,24 @@ export function BillFormComponent({
                             required: true,
                             //message: t("general.validation.required"),
                         },
-            ({ getFieldValue }) => ({
+                        ({getFieldValue}) => ({
                             validator(rule, value) {
                                 if (
                                     ClosingPeriod.treatment === "on" &&
                                     bodyshop.accountingconfig.ClosingPeriod
                                 ) {
                                     if (
-                    moment(value)
+                                        dayjs(value)
                                             .startOf("day")
                                             .isSameOrAfter(
-                        moment(
+                                                dayjs(
                                                     bodyshop.accountingconfig.ClosingPeriod[0]
                                                 ).startOf("day")
                                             ) &&
-                    moment(value)
+                                        dayjs(value)
                                             .startOf("day")
                                             .isSameOrBefore(
-                        moment(
+                                                dayjs(
                                                     bodyshop.accountingconfig.ClosingPeriod[1]
                                                 ).endOf("day")
                                             )
@@ -314,14 +288,14 @@ export function BillFormComponent({
                         }),
                     ]}
                 >
-          <FormDatePicker disabled={disabled} />
+                    <FormDatePicker disabled={disabled}/>
                 </Form.Item>
                 <Form.Item
                     label={t("bills.fields.is_credit_memo")}
                     name="is_credit_memo"
                     valuePropName="checked"
                     rules={[
-            ({ getFieldValue }) => ({
+                        ({getFieldValue}) => ({
                             validator(rule, value) {
                                 if (
                                     value === true &&
@@ -508,7 +482,7 @@ export function BillFormComponent({
             <Form.Item
                 name="upload"
                 label="Upload"
-        style={{ display: billEdit ? "none" : null }}
+                style={{display: billEdit ? "none" : null}}
                 valuePropName="fileList"
                 getValueFromEvent={(e) => {
                     if (Array.isArray(e)) {
@@ -525,7 +499,7 @@ export function BillFormComponent({
                 >
                     <>
                         <p className="ant-upload-drag-icon">
-              <UploadOutlined />
+                            <UploadOutlined/>
                         </p>
                         <p className="ant-upload-text">
                             Click or drag files to this area to upload.

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

@@ -1,5 +1,5 @@
 import { useLazyQuery, useQuery } from "@apollo/client";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import {useSplitTreatments} from "@splitsoftware/splitio-react";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -23,11 +23,11 @@ export function BillFormContainer({
   disabled,
   disableInvNumber,
 }) {
-  const { Simple_Inventory } = useTreatments(
+  const { treatments: {Simple_Inventory} } = useSplitTreatments({
-    ["Simple_Inventory"],
+    attributes: {},
-    {},
+    names: ["Simple_Inventory"],
-    bodyshop && bodyshop.imexshopid
+    splitKey: bodyshop && bodyshop.imexshopid,
-  );
+  });
 
   const { data: VendorAutoCompleteData } = useQuery(
     SEARCH_VENDOR_AUTOCOMPLETE,

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

@@ -1,5 +1,5 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import {useSplitTreatments} from "@splitsoftware/splitio-react";
 import {
   Button,
   Form,
@@ -41,11 +41,14 @@ export function BillEnterModalLinesComponent({
 }) {
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
-  const { Simple_Inventory } = useTreatments(
+
-    ["Simple_Inventory"],
+  const { treatments: {Simple_Inventory} } = useSplitTreatments({
-    {},
+    attributes: {},
-    bodyshop && bodyshop.imexshopid
+    names: ["Simple_Inventory"],
-  );
+    splitKey: bodyshop && bodyshop.imexshopid,
+  });
+
+
   const columns = (remove) => {
     return [
       {

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

@@ -15,7 +15,7 @@ const BillLineSearchSelect = (
       disabled={disabled}
       ref={ref}
       showSearch
-      dropdownMatchSelectWidth={false}
+      popupMatchSelectWidth={false}
       //  optionFilterProp="line_desc"
       filterOption={(inputValue, option) => {
         return (

client/src/components/billline-add-inventory/billline-add-inventory.component.jsx

@@ -2,7 +2,7 @@ import { FileAddFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Button, notification, Tooltip } from "antd";
 import { t } from "i18next";
-import moment from "moment";
+import dayjs from "./../../utils/day";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -36,7 +36,6 @@ export function BilllineAddInventory({
 }) {
   const [loading, setLoading] = useState(false);
   const { billid } = queryString.parse(useLocation().search);
-
   const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
 
   const addToInventory = async () => {
@@ -50,7 +49,7 @@ export function BilllineAddInventory({
       jobid: jobid,
       isinhouse: true,
       is_credit_memo: true,
-      date: moment().format("YYYY-MM-DD"),
+      date: dayjs().format("YYYY-MM-DD"),
       federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate,
       state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate,
       local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate,
@@ -92,7 +91,7 @@ export function BilllineAddInventory({
         pol: {
           returnfrombill: billid,
           vendorid: bodyshop.inhousevendorid,
-          deliver_by: moment().format("YYYY-MM-DD"),
+          deliver_by: dayjs().format("YYYY-MM-DD"),
           parts_order_lines: {
             data: [
               {

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Table, Input } from "antd";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -10,7 +10,7 @@ import AlertComponent from "../alert/alert.component";
 
 export default function BillsVendorsList() {
   const search = queryString.parse(useLocation().search);
-  const history = useHistory();
+  const history = useNavigate();
 
   const { loading, error, data } = useQuery(QUERY_ALL_VENDORS, {
     fetchPolicy: "network-only",

client/src/components/breadcrumbs/breadcrumbs.component.jsx

@@ -1,54 +1,64 @@
-import { HomeFilled } from "@ant-design/icons";
+import {HomeFilled} from "@ant-design/icons";
-import { Breadcrumb, Row, Col } from "antd";
+import {Breadcrumb, Col, Row} from "antd";
 import React from "react";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import {createStructuredSelector} from "reselect";
-import { selectBreadcrumbs } from "../../redux/application/application.selectors";
+import {selectBreadcrumbs} from "../../redux/application/application.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {selectBodyshop} from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
 import GlobalSearchOs from "../global-search/global-search-os.component";
 import "./breadcrumbs.styles.scss";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import {useSplitTreatments} from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
     breadcrumbs: selectBreadcrumbs,
     bodyshop: selectBodyshop,
 });
 
-export function BreadCrumbs({ breadcrumbs, bodyshop }) {
+export function BreadCrumbs({breadcrumbs, bodyshop}) {
-  const { OpenSearch } = useTreatments(
-    ["OpenSearch"],
-    {},
-    bodyshop && bodyshop.imexshopid
-  );
 
+    const {treatments: {OpenSearch}} = useSplitTreatments({
+        attributes: {},
+        names: ["OpenSearch"],
+        splitKey: bodyshop && bodyshop.imexshopid,
+    });
+    // TODO - Client Update - Technically key is not doing anything here
     return (
         <Row className="breadcrumb-container">
             <Col xs={24} sm={24} md={16}>
-        <Breadcrumb separator=">">
+                <Breadcrumb
-          <Breadcrumb.Item>
+                    separator=">"
-            <Link to={`/manage`}>
+                    items={[
-              <HomeFilled />{" "}
+                        {
+                            key: "home",
+                            title: (
+                                <Link to={`/manage/`}>
+                                    <HomeFilled/>{" "}
                                     {(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) ||
                                         ""}
                                 </Link>
-          </Breadcrumb.Item>
+                            ),
-          {breadcrumbs.map((item) =>
+                        },
-            item.link ? (
+                        ...breadcrumbs.map((item) =>
-              <Breadcrumb.Item key={item.label}>
+                            item.link
-                <Link to={item.link}>{item.label} </Link>
+                                ? {
-              </Breadcrumb.Item>
+                                    key: item.label,
-            ) : (
+                                    title: <Link to={item.link}>{item.label}</Link>,
-              <Breadcrumb.Item key={item.label}>{item.label}</Breadcrumb.Item>
+                                }
-            )
+                                : {
-          )}
+                                    key: item.label,
-        </Breadcrumb>
+                                    title: item.label,
+                                }
+                        ),
+                    ]}
+                />
             </Col>
             <Col xs={24} sm={24} md={8}>
-        {OpenSearch.treatment === "on" ? <GlobalSearchOs /> : <GlobalSearch />}
+                {OpenSearch.treatment === "on" ? <GlobalSearchOs/> : <GlobalSearch/>}
             </Col>
         </Row>
     );
 }
+
 export default connect(mapStateToProps, null)(BreadCrumbs);

client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table-modal.container.jsx

@@ -70,7 +70,7 @@ export function ContractsFindModalContainer({
 
   return (
     <Modal
-      visible={visible}
+      open={visible}
       width="70%"
       title={t("payments.labels.findermodal")}
       onCancel={() => toggleModalVisible()}

client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx

@@ -38,7 +38,7 @@ export default function CABCpvrtCalculator({ disabled, form }) {
     <Popover
       destroyTooltipOnHide
       content={popContent}
-      visible={visibility}
+      open={visibility}
       disabled={disabled}
     >
       <Button disabled={disabled} onClick={() => setVisibility(true)}>

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

@@ -13,7 +13,7 @@ import {
   notification,
 } from "antd";
 import axios from "axios";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -117,7 +117,7 @@ const CardPaymentModalComponent = ({
             payer: t("payments.labels.customer"),
             type: values.paymentResponse.cardbrand,
             jobid: payment.jobid,
-            date: moment(Date.now()),
+            date: dayjs(Date.now()),
             payment_responses: {
               data: [
                 {

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

@@ -88,8 +88,8 @@ export function ChatMediaSelector({
       }
       title={t("messaging.labels.selectmedia")}
       trigger="click"
-      visible={visible}
+      open={visible}
-      onVisibleChange={handleVisibleChange}
+      onOpenChange={handleVisibleChange}
     >
       <Badge count={selectedMedia.filter((s) => s.isSelected).length}>
         <PictureFilled style={{ margin: "0 .5rem" }} />

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,7 +1,7 @@
 import Icon from "@ant-design/icons";
 import { Tooltip } from "antd";
 import i18n from "i18next";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useEffect, useRef } from "react";
 import { MdDone, MdDoneAll } from "react-icons/md";
 import {
@@ -52,7 +52,7 @@ export default function ChatMessageListComponent({ messages }) {
               <div style={{ fontSize: 10 }}>
                 {i18n.t("messaging.labels.sentby", {
                   by: messages[index].userid,
-                  time: moment(messages[index].created_at).format(
+                  time: dayjs(messages[index].created_at).format(
                     "MM/DD/YYYY @ hh:mm a"
                   ),
                 })}

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

@@ -1,5 +1,5 @@
 import { PlusCircleOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -16,19 +16,16 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ChatPresetsComponent({ bodyshop, setMessage, className }) {
-  const menu = (
+
-    <Menu>
+  const items = bodyshop.md_messaging_presets.map((i, idx) => ({
-      {bodyshop.md_messaging_presets.map((i, idx) => (
+    key: idx,
-        <Menu.Item onClick={() => setMessage(i.text)} key={idx}>
+    label: (i.label),
-          {i.label}
+    onClick: () => setMessage(i.text),
-        </Menu.Item>
+  }));
-      ))}
-    </Menu>
-  );
 
   return (
     <div className={className}>
-      <Dropdown trigger={["click"]} overlay={menu}>
+      <Dropdown trigger={["click"]} menu={{items}}>
         <PlusCircleOutlined />
       </Dropdown>
     </div>

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

@@ -16,42 +16,28 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatPrintButton({ conversation }) {
   const [loading, setLoading] = useState(false);
 
+  const generateDocument = (type) => {
+      setLoading(true);
+      GenerateDocument(
+          {
+              name: TemplateList("messaging").conversation_list.key,
+              variables: { id: conversation.id },
+          },
+          {
+              subject: TemplateList("messaging").conversation_list.subject,
+          },
+          type,
+          conversation.id
+      ).catch(e => {
+          console.warn('Something went wrong generating a document.');
+      });
+      setLoading(false);
+  }
+
   return (
     <Space wrap>
-      <PrinterOutlined
+      <PrinterOutlined onClick={() => generateDocument('p')}/>
-        onClick={() => {
+      <MailOutlined onClick={() => generateDocument('e')}/>
-          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>
   );

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

@@ -19,7 +19,7 @@ export default function ChatTagRoComponent({
         <Select
           showSearch
           autoFocus
-          dropdownMatchSelectWidth
+          popupMatchSelectWidth
           placeholder={t("general.labels.search")}
           filterOption={false}
           onSearch={handleSearch}

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

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React from "react";
 import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
 import AlertComponent from "../alert/alert.component";
@@ -7,7 +7,7 @@ import ContractCarsComponent from "./contract-cars.component";
 
 export default function ContractCarsContainer({ selectedCarState, form }) {
   const { loading, error, data } = useQuery(QUERY_AVAILABLE_CC, {
-    variables: { today: moment().format("YYYY-MM-DD") },
+    variables: { today: dayjs().format("YYYY-MM-DD") },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });

client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx

@@ -10,11 +10,11 @@ import {
   Space,
 } from "antd";
 import axios from "axios";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
 import {
@@ -41,14 +41,14 @@ export function ContractConvertToRo({
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
   const [insertJob] = useMutation(INSERT_NEW_JOB);
-  const history = useHistory();
+  const history = useNavigate();
 
   const handleFinish = async (values) => {
     setLoading(true);
 
-    const contractLength = moment(contract.actualreturn).diff(
+    const contractLength = dayjs(contract.actualreturn).diff(
-      moment(contract.start),
+      dayjs(contract.start),
-      "days"
+      "day"
     );
     const billingLines = [];
     if (contractLength > 0)
@@ -390,7 +390,7 @@ export function ContractConvertToRo({
 
   return (
     <div>
-      <Popover content={popContent} visible={visible}>
+      <Popover content={popContent} open={visible}>
         <Button
           onClick={() => setVisible(true)}
           loading={loading}

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

@@ -1,6 +1,6 @@
 import { WarningFilled } from "@ant-design/icons";
 import { Form, Input, InputNumber, Space } from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { DateFormatter } from "../../utils/DateFormatter";
@@ -96,8 +96,8 @@ export default function ContractFormComponent({
               const dueForService =
                 selectedCar &&
                 selectedCar.nextservicedate &&
-                moment(selectedCar.nextservicedate).isBefore(
+                dayjs(selectedCar.nextservicedate).isBefore(
-                  moment(form.getFieldValue("scheduledreturn"))
+                  dayjs(form.getFieldValue("scheduledreturn"))
                 );
 
               if (mileageOver || dueForService)
@@ -190,9 +190,9 @@ export default function ContractFormComponent({
           }
         >
           {() => {
-            const dlExpiresBeforeReturn = moment(
+            const dlExpiresBeforeReturn = dayjs(
               form.getFieldValue("driver_dlexpiry")
-            ).isBefore(moment(form.getFieldValue("scheduledreturn")));
+            ).isBefore(dayjs(form.getFieldValue("scheduledreturn")));
 
             return (
               <div>

client/src/components/contract-license-decode-button/contract-license-decode-button.component.jsx

@@ -1,5 +1,5 @@
 import { Button, Input, Modal, Typography } from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import aamva from "../../utils/aamva";
@@ -26,8 +26,8 @@ export default function ContractLicenseDecodeButton({ form }) {
 
     const values = {
       driver_dlnumber: decodedBarcode.dl,
-      driver_dlexpiry: moment(
+      driver_dlexpiry: dayjs(
-        `20${decodedBarcode.expiration_date}${moment(
+        `20${decodedBarcode.expiration_date}${dayjs(
           decodedBarcode.birthday
         ).format("DD")}`
       ),
@@ -38,7 +38,7 @@ export default function ContractLicenseDecodeButton({ form }) {
       driver_city: decodedBarcode.city,
       driver_state: decodedBarcode.state,
       driver_zip: decodedBarcode.postal_code,
-      driver_dob: moment(decodedBarcode.birthday),
+      driver_dob: dayjs(decodedBarcode.birthday),
     };
 
     form.setFieldsValue(values);
@@ -55,7 +55,7 @@ export default function ContractLicenseDecodeButton({ form }) {
   return (
     <div>
       <Modal
-        visible={modalVisible}
+        open={modalVisible}
         okText={t("contracts.actions.senddltoform")}
         onOk={handleInsertForm}
         okButtonProps={{ disabled: !!!decodedBarcode }}
@@ -94,14 +94,14 @@ export default function ContractLicenseDecodeButton({ form }) {
                   {decodedBarcode.address}
                 </DataLabel>
                 <DataLabel label={t("contracts.fields.driver_dlexpiry")}>
-                  {moment(
+                  {dayjs(
-                    `20${decodedBarcode.expiration_date}${moment(
+                    `20${decodedBarcode.expiration_date}${dayjs(
                       decodedBarcode.birthday
                     ).format("DD")}`
                   ).format("MM/DD/YYYY")}
                 </DataLabel>
                 <DataLabel label={t("contracts.fields.driver_dob")}>
-                  {moment(decodedBarcode.birthday).format("MM/DD/YYYY")}
+                  {dayjs(decodedBarcode.birthday).format("MM/DD/YYYY")}
                 </DataLabel>
                 <div>
                   <Typography.Title level={4}>

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

@@ -59,7 +59,7 @@ export function ContractsFindModalContainer({
 
   return (
     <Modal
-      visible={visible}
+      open={visible}
       width="70%"
       title={t("contracts.labels.findermodal")}
       onCancel={() => toggleModalVisible()}

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

@@ -3,13 +3,13 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useNavigate, 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 moment from "moment";
+import dayjs from "../../utils/day";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -39,7 +39,7 @@ export function ContractsList({
     sortedInfo: {},
     filteredInfo: { text: "" },
   });
-  const history = useHistory();
+  const history = useNavigate();
   const search = queryString.parse(useLocation().search);
   const { page } = search;
 
@@ -152,8 +152,8 @@ export function ContractsList({
       render: (text, record) =>
         (record.actualreturn &&
           record.start &&
-          `${moment(record.actualreturn)
+          `${dayjs(record.actualreturn)
-            .diff(moment(record.start), "days", true)
+            .diff(dayjs(record.start), "day", true)
             .toFixed(1)} days`) ||
         "",
     },
@@ -164,7 +164,7 @@ export function ContractsList({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   return (
@@ -179,7 +179,7 @@ export function ContractsList({
               <Button
                 onClick={() => {
                   delete search.search;
-                  history.push({ search: queryString.stringify(search) });
+                  history({ search: queryString.stringify(search) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -196,7 +196,7 @@ export function ContractsList({
             placeholder={search.searh || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
-              history.push({ search: queryString.stringify(search) });
+              history({ search: queryString.stringify(search) });
             }}
           />
         </Space>

client/src/components/contracts-rates-change-button/contracts-rates-change-button.component.jsx

@@ -1,5 +1,5 @@
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -18,20 +18,16 @@ export function ContractsRatesChangeButton({ disabled, form, bodyshop }) {
     form.setFieldsValue(rate);
   };
 
-  const menu = (
+  const menuItems = bodyshop.md_ccc_rates.map((i, idx) => ({
-    <div>
+    key: idx,
-      <Menu onClick={handleClick}>
+    label: i.label,
-        {bodyshop.md_ccc_rates.map((rate, idx) => (
+    value: i,
-          <Menu.Item value={rate} key={idx}>
+  }));
-            {rate.label}
+
-          </Menu.Item>
+  const menu = {items: menuItems, onClick: handleClick};
-        ))}
-      </Menu>
-    </div>
-  );
 
   return (
-    <Dropdown overlay={menu} disabled={disabled}>
+    <Dropdown menu={menu} disabled={disabled}>
       <a
         className="ant-dropdown-link"
         href=" #"

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

@@ -2,7 +2,7 @@ import { Card, Table } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import {pageLimit} from "../../utils/config";
@@ -11,9 +11,9 @@ export default function CourtesyCarContractListComponent({
   contracts,
   totalContracts,
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search =queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder } = search;
-  const history = useHistory();
+  const history = useNavigate();
 
   const { t } = useTranslation();
 
@@ -81,7 +81,7 @@ export default function CourtesyCarContractListComponent({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   return (

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

@@ -1,7 +1,8 @@
 import { WarningFilled } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
-import { Button, Form, Input, InputNumber, PageHeader, Space } from "antd";
+import { Button, Form, Input, InputNumber, Space } from "antd";
-import moment from "moment";
+import {PageHeader} from "@ant-design/pro-layout";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
@@ -265,7 +266,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
               const nextservicedate = form.getFieldValue("nextservicedate");
               const dueForService =
                 nextservicedate &&
-                moment(nextservicedate).endOf("day").isSameOrBefore(moment());
+                dayjs(nextservicedate).endOf("day").isSameOrBefore(dayjs());
 
               if (dueForService)
                 return (
@@ -306,7 +307,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
               const expires = form.getFieldValue("registrationexpires");
 
               const dateover =
-                expires && moment(expires).endOf("day").isBefore(moment());
+                expires && dayjs(expires).endOf("day").isBefore(dayjs());
 
               if (dateover)
                 return (
@@ -342,7 +343,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
               const expires = form.getFieldValue("insuranceexpires");
 
               const dateover =
-                expires && moment(expires).endOf("day").isBefore(moment());
+                expires && dayjs(expires).endOf("day").isBefore(dayjs());
 
               if (dateover)
                 return (

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx

@@ -7,7 +7,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectCourtesyCarReturn } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CourtesyCarReturnModalComponent from "./courtesy-car-return-modal.component";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import { RETURN_CONTRACT } from "../../graphql/cccontracts.queries";
 import { useMutation } from "@apollo/client";
 
@@ -64,7 +64,7 @@ export function CCReturnModalContainer({
   return (
     <Modal
       title={t("courtesycars.labels.return")}
-      visible={visible}
+      open={visible}
       onCancel={() => toggleModalVisible()}
       width={"90%"}
       okText={t("general.actions.save")}
@@ -74,7 +74,7 @@ export function CCReturnModalContainer({
       <Form
         form={form}
         onFinish={handleFinish}
-        initialValues={{ fuel: 100, actualreturn: moment(new Date()) }}
+        initialValues={{ fuel: 100, actualreturn: dayjs(new Date()) }}
       >
         <CourtesyCarReturnModalComponent />
       </Form>

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

@@ -4,12 +4,11 @@ import {
   Card,
   Dropdown,
   Input,
-  Menu,
   Space,
   Table,
   Tooltip,
 } from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -77,7 +76,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
         const mileageOver = nextservicekm <= mileage;
 
         const dueForService =
-          nextservicedate && moment(nextservicedate).isBefore(moment());
+          nextservicedate && dayjs(nextservicedate).isBefore(dayjs());
 
         return (
           <Space>
@@ -228,6 +227,27 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           (t(c.status) || "").toLowerCase().includes(searchText.toLowerCase())
       )
     : courtesycars;
+
+  const items = [
+    {
+      key: "courtesycar_inventory",
+      label: t("printcenter.courtesycarcontract.courtesy_car_inventory"),
+      onClick: () =>
+        GenerateDocument(
+          {
+            name: TemplateList("courtesycar").courtesy_car_inventory.key,
+            variables: {
+              //id: contract.id
+            },
+          },
+          {},
+          "p"
+        ),
+    },
+  ];
+
+  const menu = { items };
+
   return (
     <Card
       title={t("menus.header.courtesycars")}
@@ -236,30 +256,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>
-          <Dropdown
+          <Dropdown trigger="click" menu={menu}>
-            trigger="click"
-            overlay={
-              <Menu>
-                <Menu.Item
-                  onClick={() =>
-                    GenerateDocument(
-                      {
-                        name: TemplateList("courtesycar").courtesy_car_inventory
-                          .key,
-                        variables: {
-                          //id: contract.id
-                        },
-                      },
-                      {},
-                      "p"
-                    )
-                  }
-                >
-                  {t("printcenter.courtesycarcontract.courtesy_car_inventory")}
-                </Menu.Item>
-              </Menu>
-            }
-          >
             <Button>{t("general.labels.print")}</Button>
           </Dropdown>
           <Link to={`/manage/courtesycars/new`}>

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

@@ -3,7 +3,7 @@ import { Button, Card, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useNavigate, 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";
@@ -17,7 +17,7 @@ export default function CsiResponseListPaginated({
 }) {
   const search = queryString.parse(useLocation().search);
   const { responseid, page, sortcolumn, sortorder } = search;
-  const history = useHistory();
+  const history = useNavigate();
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
@@ -80,18 +80,18 @@ export default function CsiResponseListPaginated({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   const handleOnRowClick = (record) => {
     if (record) {
       if (record.id) {
         search.responseid = record.id;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
       }
     } else {
       delete search.responseid;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     }
   };
 

client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx

@@ -1,6 +1,6 @@
 import { Card } from "antd";
 import _ from "lodash";
-import moment from "moment";
+import dayjs from "../../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -27,7 +27,7 @@ export default function DashboardMonthlyEmployeeEfficiency({
     return <DashboardRefreshRequired {...cardProps} />;
 
   const ticketsByDate = _.groupBy(data.monthly_employee_efficiency, (item) =>
-    moment(item.date).format("YYYY-MM-DD")
+    dayjs(item.date).format("YYYY-MM-DD")
   );
 
   const listOfDays = Utils.ListOfDaysInCurrentMonth();
@@ -53,7 +53,7 @@ export default function DashboardMonthlyEmployeeEfficiency({
       ((dailyHrs.productive - dailyHrs.actual) / dailyHrs.actual + 1) * 100;
 
     const theValue = {
-      date: moment(val).format("DD"),
+      date: dayjs(val).format("DD"),
       // ...dailyHrs,
       actual: dailyHrs.actual.toFixed(1),
       productive: dailyHrs.productive.toFixed(1),
@@ -159,9 +159,9 @@ export default function DashboardMonthlyEmployeeEfficiency({
 }
 
 export const DashboardMonthlyEmployeeEfficiencyGql = `
-  monthly_employee_efficiency: timetickets(where: {_and: [{date: {_gte: "${moment()
+  monthly_employee_efficiency: timetickets(where: {_and: [{date: {_gte: "${dayjs()
     .startOf("month")
-    .format("YYYY-MM-DD")}"}},{date: {_lte: "${moment()
+    .format("YYYY-MM-DD")}"}},{date: {_lte: "${dayjs()
   .endOf("month")
   .format("YYYY-MM-DD")}"}} ]}) {
     actualhrs

client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx

@@ -1,5 +1,5 @@
 import { Card } from "antd";
-import moment from "moment";
+import dayjs from "../../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import _ from "lodash";
@@ -24,7 +24,7 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
   if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
 
   const jobsByDate = _.groupBy(data.monthly_sales, (item) =>
-    moment(item.date_invoiced).format("YYYY-MM-DD")
+    dayjs(item.date_invoiced).format("YYYY-MM-DD")
   );
 
   const listOfDays = Utils.ListOfDaysInCurrentMonth();
@@ -43,7 +43,7 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
     }
 
     const theValue = {
-      date: moment(val).format("DD"),
+      date: dayjs(val).format("DD"),
       dailySales: dailySales.getAmount() / 100,
       accSales:
         acc.length > 0

client/src/components/dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx

@@ -1,6 +1,6 @@
 import { Card, Statistic } from "antd";
 import Dinero from "dinero.js";
-import moment from "moment";
+import dayjs from "../../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import DashboardRefreshRequired from "../refresh-required.component";
@@ -36,10 +36,10 @@ export const DashboardProjectedMonthlySalesGql = `
       _or: [
         {_and: [
           {date_invoiced:{_is_null: false }},
-          {date_invoiced: {_gte: "${moment()
+          {date_invoiced: {_gte: "${dayjs()
             .startOf("month")
             .startOf("day")
-            .toISOString()}"}}, {date_invoiced: {_lte: "${moment()
+            .toISOString()}"}}, {date_invoiced: {_lte: "${dayjs()
   .endOf("month")
   .endOf("day")
   .toISOString()}"}}]},
@@ -47,10 +47,10 @@ export const DashboardProjectedMonthlySalesGql = `
 
 _and:[
   {date_invoiced:{_is_null: true }},
-  {actual_completion: {_gte: "${moment()
+  {actual_completion: {_gte: "${dayjs()
     .startOf("month")
     .startOf("day")
-    .toISOString()}"}}, {actual_completion: {_lte: "${moment()
+    .toISOString()}"}}, {actual_completion: {_lte: "${dayjs()
   .endOf("month")
   .endOf("day")
   .toISOString()}"}}
@@ -61,10 +61,10 @@ _and:[
   {_and: [
     {date_invoiced: {_is_null: true}}, 
     {actual_completion: {_is_null: true}}
-    {scheduled_completion: {_gte: "${moment()
+    {scheduled_completion: {_gte: "${dayjs()
       .startOf("month")
       .startOf("day")
-      .toISOString()}"}}, {scheduled_completion: {_lte: "${moment()
+      .toISOString()}"}}, {scheduled_completion: {_lte: "${dayjs()
   .endOf("month")
   .endOf("day")
   .toISOString()}"}}

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

@@ -4,7 +4,7 @@ import {
   PauseCircleOutlined,
 } from "@ant-design/icons";
 import { Card, Space, Table, Tooltip } from "antd";
-import moment from "moment";
+import dayjs from "../../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -49,14 +49,14 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
         v_vin: item.job.v_vin,
         vehicleid: item.job.vehicleid,
         note: item.note,
-        start: moment(item.start).format("hh:mm a"),
+        start: dayjs(item.start).format("hh:mm a"),
         title: item.title,
       };
       appt.push(i);
     }
   });
   appt.sort(function (a, b) {
-    return new moment(a.start) - new moment(b.start);
+    return new dayjs(a.start) - new dayjs(b.start);
   });
 
   const columns = [
@@ -189,7 +189,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
   return (
     <Card
       title={t("dashboard.titles.scheduledintoday", {
-        date: moment().startOf("day").format("MM/DD/YYYY"),
+        date: dayjs().startOf("day").format("MM/DD/YYYY"),
       })}
       {...cardProps}
     >
@@ -209,9 +209,9 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
 }
 
 export const DashboardScheduledInTodayGql = `
-  scheduled_in_today: appointments(where: {start: {_gte: "${moment()
+  scheduled_in_today: appointments(where: {start: {_gte: "${dayjs()
     .startOf("day")
-    .toISOString()}", _lte: "${moment()
+    .toISOString()}", _lte: "${dayjs()
   .endOf("day")
   .toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
     canceled

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

@@ -4,7 +4,7 @@ import {
   PauseCircleOutlined,
 } from "@ant-design/icons";
 import { Card, Space, Table, Tooltip } from "antd";
-import moment from "moment";
+import dayjs from "../../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -23,7 +23,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
     return <DashboardRefreshRequired {...cardProps} />;
 
   data.scheduled_out_today.forEach((item) => {
-    item.scheduled_completion= moment(item.scheduled_completion).format("hh:mm a")
+    item.scheduled_completion= dayjs(item.scheduled_completion).format("hh:mm a")
   });
   data.scheduled_out_today.sort(function (a, b) {
     return new Date(a.scheduled_completion) - new Date(b.scheduled_completion);
@@ -159,7 +159,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
   return (
     <Card
       title={t("dashboard.titles.scheduledouttoday", {
-        date: moment().startOf("day").format("MM/DD/YYYY"),
+        date: dayjs().startOf("day").format("MM/DD/YYYY"),
       })}
       {...cardProps}
     >
@@ -183,8 +183,8 @@ export const DashboardScheduledOutTodayGql = `
     date_invoiced: {_is_null: true}, 
     ro_number: {_is_null: false}, 
     voided: {_eq: false}, 
-    scheduled_completion: {_gte: "${moment().startOf("day").toISOString()}", 
+    scheduled_completion: {_gte: "${dayjs().startOf("day").toISOString()}", 
-    _lte: "${moment().endOf("day").toISOString()}"}}) {
+    _lte: "${dayjs().endOf("day").toISOString()}"}}) {
       alt_transport
       clm_no
       jobid: id

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

@@ -1,9 +1,10 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
 import { gql, useMutation, useQuery } from "@apollo/client";
-import { Button, Dropdown, Menu, PageHeader, Space, notification } from "antd";
+import { Button, Dropdown, Space, notification } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import i18next from "i18next";
 import _ from "lodash";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { Responsive, WidthProvider } from "react-grid-layout";
 import { useTranslation } from "react-i18next";
@@ -122,19 +123,15 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
     [data]
   );
   const existingLayoutKeys = state.items.map((i) => i.i);
-  const addComponentOverlay = (
+
-    <Menu onClick={handleAddComponent}>
+  const menuItems = Object.keys(componentList).map((key) => ({
-      {Object.keys(componentList).map((key) => (
+    key: key,
-        <Menu.Item
+    label: componentList[key].label,
-          key={key}
+    value: key,
-          value={key}
+    disabled: existingLayoutKeys.includes(key),
-          disabled={existingLayoutKeys.includes(key)}
+  }));
-        >
+
-          {componentList[key].label}
+  const menu = {items: menuItems, onClick: handleAddComponent};
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
 
   if (error) return <AlertComponent message={error.message} type="error" />;
 
@@ -146,7 +143,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
             <Button onClick={() => refetch()}>
               <SyncOutlined />
             </Button>
-            <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
+            <Dropdown menu={menu} trigger={["click"]}>
               <Button>{t("dashboard.actions.addcomponent")}</Button>
             </Dropdown>
           </Space>
@@ -276,7 +273,7 @@ const componentList = {
   },
   ScheduleInToday: {
     label: i18next.t("dashboard.titles.scheduledintoday", {
-      date: moment().startOf("day").format("MM/DD/YYYY"),
+      date: dayjs().startOf("day").format("MM/DD/YYYY"),
     }),
     component: DashboardScheduledInToday,
     gqlFragment: DashboardScheduledInTodayGql,
@@ -287,7 +284,7 @@ const componentList = {
   },
   ScheduleOutToday: {
     label: i18next.t("dashboard.titles.scheduledouttoday", {
-      date: moment().startOf("day").format("MM/DD/YYYY"),
+      date: dayjs().startOf("day").format("MM/DD/YYYY"),
     }),
     component: DashboardScheduledOutToday,
     gqlFragment: DashboardScheduledOutTodayGql,
@@ -310,10 +307,10 @@ const createDashboardQuery = (state) => {
          ${componentBasedAdditions || ""}
       monthly_sales: jobs(where: {_and: [
         { voided: {_eq: false}},
-        {date_invoiced: {_gte: "${moment()
+        {date_invoiced: {_gte: "${dayjs()
           .startOf("month")
           .startOf("day")
-          .toISOString()}"}}, {date_invoiced: {_lte: "${moment()
+          .toISOString()}"}}, {date_invoiced: {_lte: "${dayjs()
     .endOf("month")
     .endOf("day")
     .toISOString()}"}}]}) {

client/src/components/dms-cdk-makes/dms-cdk-makes.component.jsx

@@ -51,7 +51,7 @@ export function DmsCdkVehicles({ bodyshop, form, socket, job }) {
     <>
       <Modal
         width={"90%"}
-        visible={visible}
+        open={visible}
         onCancel={() => setVisible(false)}
         onOk={() => {
           form.setFieldsValue({

client/src/components/dms-log-events/dms-log-events.component.jsx

@@ -1,5 +1,5 @@
 import { Divider, Space, Tag, Timeline } from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -22,20 +22,22 @@ export default connect(mapStateToProps, mapDispatchToProps)(DmsLogEvents);
 
 export function DmsLogEvents({ socket, logs, bodyshop }) {
   return (
-    <Timeline pending
+    <Timeline
+      pending
       reverse={true}
-    >
+      items={logs.map((log, idx) => ({
-      {logs.map((log, idx) => (
+        key: idx,
-        <Timeline.Item key={idx} color={LogLevelHierarchy(log.level)}>
+        color: LogLevelHierarchy(log.level),
+        label: (
           <Space wrap align="start" style={{}}>
             <Tag color={LogLevelHierarchy(log.level)}>{log.level}</Tag>
-            <span>{moment(log.timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
+            <span>{dayjs(log.timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
             <Divider type="vertical" />
             <span>{log.message}</span>
           </Space>
-        </Timeline.Item>
+        ),
-      ))}
+      }))}
-    </Timeline>
+    />
   );
 }
 

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

@@ -1,4 +1,4 @@
-import { DeleteFilled, DownOutlined } from "@ant-design/icons";
+import {DeleteFilled, DownOutlined} from "@ant-design/icons";
 import {
     Button,
     Card,
@@ -7,7 +7,6 @@ import {
     Form,
     Input,
     InputNumber,
-  Menu,
     Select,
     Space,
     Statistic,
@@ -15,13 +14,13 @@ import {
     Typography,
 } from "antd";
 import Dinero from "dinero.js";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
-import { createStructuredSelector } from "reselect";
+import {createStructuredSelector} from "reselect";
-import { determineDmsType } from "../../pages/dms/dms.container";
+import {determineDmsType} from "../../pages/dms/dms.container";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {selectBodyshop} from "../../redux/user/user.selectors";
 import i18n from "../../translations/i18n";
 import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
 import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
@@ -37,9 +36,9 @@ const mapDispatchToProps = (dispatch) => ({
 });
 export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);
 
-export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
+export function DmsPostForm({bodyshop, socket, job, logsRef}) {
     const [form] = Form.useForm();
-  const { t } = useTranslation();
+    const {t} = useTranslation();
 
     const handlePayerSelect = (value, index) => {
         form.setFieldsValue({
@@ -100,8 +99,8 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                                     "UNKNOWN",
                             })
                             : ""
-          }`.substr(0, 239),
+                    }`.slice(0, 239),
-          inservicedate: moment("2019-01-01"),
+                    inservicedate: dayjs("2019-01-01"),
                 }}
             >
                 <LayoutFormRow grow>
@@ -119,7 +118,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                             },
                         ]}
                     >
-            <Input />
+                        <Input/>
                     </Form.Item>
                     <Form.Item
                         name="kmin"
@@ -132,7 +131,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                             },
                         ]}
                     >
-            <InputNumber disabled />
+                        <InputNumber disabled/>
                     </Form.Item>
                     <Form.Item
                         name="kmout"
@@ -145,13 +144,13 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                             },
                         ]}
                     >
-            <InputNumber disabled />
+                        <InputNumber disabled/>
                     </Form.Item>
                 </LayoutFormRow>
 
                 {bodyshop.cdk_dealerid && (
                     <div>
-            <LayoutFormRow style={{ justifyContent: "center" }} grow>
+                        <LayoutFormRow style={{justifyContent: "center"}} grow>
                             <Form.Item
                                 name="dms_make"
                                 label={t("jobs.fields.dms.dms_make")}
@@ -161,7 +160,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                                     },
                                 ]}
                             >
-                <Input disabled />
+                                <Input disabled/>
                             </Form.Item>
                             <Form.Item
                                 name="dms_model"
@@ -172,31 +171,31 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                                     },
                                 ]}
                             >
-                <Input disabled />
+                                <Input disabled/>
                             </Form.Item>
                             <Form.Item
                                 name="inservicedate"
                                 label={t("jobs.fields.dms.inservicedate")}
                             >
-                <FormDatePicker />
+                                <FormDatePicker/>
                             </Form.Item>
                         </LayoutFormRow>
                         <Space>
-              <DmsCdkMakes form={form} socket={socket} job={job} />
+                            <DmsCdkMakes form={form} socket={socket} job={job}/>
-              <DmsCdkMakesRefetch />
+                            <DmsCdkMakesRefetch/>
                             <Form.Item
                                 name="dms_unsold"
                                 label={t("jobs.fields.dms.dms_unsold")}
                                 initialValue={false}
                             >
-                <Switch />
+                                <Switch/>
                             </Form.Item>
                             <Form.Item
                                 name="dms_model_override"
                                 label={t("jobs.fields.dms.dms_model_override")}
                                 initialValue={false}
                             >
-                <Switch />
+                                <Switch/>
                             </Form.Item>
                         </Space>
                     </div>
@@ -210,10 +209,10 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                         },
                     ]}
                 >
-          <Input.TextArea maxLength={240} />
+                    <Input.TextArea maxLength={240}/>
                 </Form.Item>
 
-        <Divider />
+                <Divider/>
                 <Space size="large" wrap align="center">
                     <Statistic
                         title={t("jobs.fields.ded_amt")}
@@ -231,7 +230,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                     />
                 </Space>
                 <Form.List name={["payers"]}>
-          {(fields, { add, remove }) => {
+                    {(fields, {add, remove}) => {
                         return (
                             <div>
                                 {fields.map((field, index) => (
@@ -248,7 +247,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                                                 ]}
                                             >
                                                 <Select
-                          style={{ minWidth: "15rem" }}
+                                                    style={{minWidth: "15rem"}}
                                                     onSelect={(value) => handlePayerSelect(value, index)}
                                                 >
                                                     {bodyshop.cdk_configuration &&
@@ -271,7 +270,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                                                     },
                                                 ]}
                                             >
-                        <Input disabled />
+                                                <Input disabled/>
                                             </Form.Item>
 
                                             <Form.Item
@@ -284,47 +283,32 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                                                     },
                                                 ]}
                                             >
-                        <CurrencyInput min={0} />
+                                                <CurrencyInput min={0}/>
                                             </Form.Item>
 
                                             <Form.Item
                                                 label={
                                                     <div>
                                                         {t("jobs.fields.dms.payer.controlnumber")}{" "}
-                            <Dropdown
+                                                        <Dropdown menu={{
-                              overlay={
+                                                            items: bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
-                                <Menu>
+                                                                key: idx,
-                                  {bodyshop.cdk_configuration.controllist &&
+                                                                label: key.name,
-                                    bodyshop.cdk_configuration.controllist.map(
+                                                                onClick: () => {
-                                      (key, idx) => (
-                                        <Menu.Item
-                                          key={idx}
-                                          onClick={() => {
                                                                     form.setFieldsValue({
-                                              payers: form
+                                                                        payers: form.getFieldValue("payers").map((row, mapIndex) => {
-                                                .getFieldValue("payers")
+                                                                            if (index !== mapIndex) return row;
-                                                .map((row, mapIndex) => {
-                                                  if (index !== mapIndex)
-                                                    return row;
-
                                                                             return {
                                                                                 ...row,
-                                                    controlnumber:
+                                                                                controlnumber: key.controlnumber,
-                                                      key.controlnumber,
                                                                             };
                                                                         }),
                                                                     });
-                                          }}
+                                                                },
-                                        >
+                                                            }))
-                                          {key.name}
+                                                        }}>
-                                        </Menu.Item>
-                                      )
-                                    )}
-                                </Menu>
-                              }
-                            >
                                                             <a href=" #" onClick={(e) => e.preventDefault()}>
-                                <DownOutlined />
+                                                                <DownOutlined/>
                                                             </a>
                                                         </Dropdown>
                                                     </div>
@@ -337,7 +321,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                                                     },
                                                 ]}
                                             >
-                        <Input />
+                                                <Input/>
                                             </Form.Item>
 
                                             <Form.Item shouldUpdate>
@@ -393,7 +377,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                                         onClick={() => {
                                             if (fields.length < 3) add();
                                         }}
-                    style={{ width: "100%" }}
+                                        style={{width: "100%"}}
                                     >
                                         {t("jobs.actions.dms.addpayer")}
                                     </Button>
@@ -411,7 +395,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                         payers &&
                         payers.forEach((payer) => {
                             totalAllocated = totalAllocated.add(
-                  Dinero({ amount: Math.round((payer?.amount || 0) * 100) })
+                                Dinero({amount: Math.round((payer?.amount || 0) * 100)})
                             );
                         });
 

client/src/components/document-editor/document-editor.component.jsx

@@ -60,9 +60,9 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
       markerArea.current = new markerjs2.MarkerArea(imgRef.current);
 
       // attach an event handler to assign annotated image back to our image element
-      markerArea.current.addCloseEventListener((closeEvent) => {});
+      markerArea.current.addEventListener("close", (closeEvent) => {});
       
-      markerArea.current.addRenderEventListener((dataUrl) => {
+      markerArea.current.addEventListener("render", (dataUrl) => {
         imgRef.current.src = dataUrl;
         markerArea.current.close();
         triggerUpload(dataUrl);

client/src/components/document-editor/document-editor.container.jsx

@@ -4,7 +4,7 @@ import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router";
+import { useLocation } from "react-router-dom";
 import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { GET_DOCUMENT_BY_PK } from "../../graphql/documents.queries";
 import { setBodyshop } from "../../redux/user/user.actions";

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

@@ -1,27 +1,13 @@
-import { UploadOutlined, UserAddOutlined } from "@ant-design/icons";
+import {UploadOutlined, UserAddOutlined} from "@ant-design/icons";
-import {
+import {Button, Divider, Dropdown, Form, Input, Select, Space, Tabs, Upload,} from "antd";
-  Button,
-  Divider,
-  Dropdown,
-  Form,
-  Input,
-  Menu,
-  Select,
-  Space,
-  Tabs,
-  Upload,
-} from "antd";
 import _ from "lodash";
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
-import { createStructuredSelector } from "reselect";
+import {createStructuredSelector} from "reselect";
-import { selectEmailConfig } from "../../redux/email/email.selectors";
+import {selectEmailConfig} from "../../redux/email/email.selectors";
-import {
+import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
-  selectBodyshop,
+import {CreateExplorerLinkForJob} from "../../utils/localmedia";
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
-import { CreateExplorerLinkForJob } from "../../utils/localmedia";
 import EmailDocumentsComponent from "../email-documents/email-documents.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -43,9 +29,9 @@ export function EmailOverlayComponent({
                                           selectedMediaState,
                                           bodyshop,
                                           currentUser,
-}) {
+                                      }) {
-  const { t } = useTranslation();
+    const {t} = useTranslation();
-  const handleClick = ({ item, key, keyPath }) => {
+    const handleClick = ({item, key, keyPath}) => {
         const email = item.props.value;
         form.setFieldsValue({
             to: _.uniq([
@@ -54,7 +40,7 @@ export function EmailOverlayComponent({
             ]),
         });
     };
-  const handle_CC_Click = ({ item, key, keyPath }) => {
+    const handle_CC_Click = ({item, key, keyPath}) => {
         const email = item.props.value;
         form.setFieldsValue({
             cc: _.uniq([
@@ -64,43 +50,40 @@ export function EmailOverlayComponent({
         });
     };
 
-  const menu = (
+    const emailsToMenu = {
-    <div>
+        items: [
-      <Menu onClick={handleClick}>
+            ...bodyshop.employees
-        {bodyshop.employees
                 .filter((e) => e.user_email)
-          .map((e, idx) => (
+                .map((e, idx) => ({
-            <Menu.Item value={e.user_email} key={idx}>
+                    key: idx,
-              {`${e.first_name} ${e.last_name}`}
+                    label: `${e.first_name} ${e.last_name}`,
-            </Menu.Item>
+                    value: e.user_email,
-          ))}
+                })),
-        {bodyshop.md_to_emails.map((e, idx) => (
+            ...bodyshop.md_to_emails.map((e, idx) => ({
-          <Menu.Item value={e.emails} key={idx + "group"}>
+                key: idx + "group",
-            {e.label}
+                label: e.label,
-          </Menu.Item>
+                value: e.emails,
-        ))}
+            })),
-      </Menu>
+        ],
-    </div>
+        onClick: handleClick,
-  );
+    };
-
+    const menuCC = {
-  const menuCC = (
+        items: [
-    <div>
+            ...bodyshop.employees
-      <Menu onClick={handle_CC_Click}>
-        {bodyshop.employees
                 .filter((e) => e.user_email)
-          .map((e, idx) => (
+                .map((e, idx) => ({
-            <Menu.Item value={e.user_email} key={idx}>
+                    key: idx,
-              {`${e.first_name} ${e.last_name}`}
+                    label: `${e.first_name} ${e.last_name}`,
-            </Menu.Item>
+                    value: e.user_email,
-          ))}
+                })),
-        {bodyshop.md_to_emails.map((e, idx) => (
+            ...bodyshop.md_to_emails.map((e, idx) => ({
-          <Menu.Item value={e.emails} key={idx + "group"}>
+                key: idx + "group",
-            {e.label}
+                label: e.label,
-          </Menu.Item>
+                value: e.emails,
-        ))}
+            })),
-      </Menu>
+        ],
-    </div>
+        onClick: handle_CC_Click,
-  );
+    };
 
     return (
         <div>
@@ -129,13 +112,13 @@ export function EmailOverlayComponent({
                 label={
                     <Space>
                         {t("emails.fields.to")}
-            <Dropdown overlay={menu}>
+                        <Dropdown menu={emailsToMenu}>
                             <a
                                 className="ant-dropdown-link"
                                 href=" #"
                                 onClick={(e) => e.preventDefault()}
                             >
-                <UserAddOutlined />
+                                <UserAddOutlined/>
                             </a>
                         </Dropdown>
                     </Space>
@@ -148,26 +131,26 @@ export function EmailOverlayComponent({
                     },
                 ]}
             >
-        <Select mode="tags" tokenSeparators={[",", ";"]} />
+                <Select mode="tags" tokenSeparators={[",", ";"]}/>
             </Form.Item>
             <Form.Item
                 label={
                     <Space>
                         {t("emails.fields.cc")}
-            <Dropdown overlay={menuCC}>
+                        <Dropdown menu={menuCC}>
                             <a
                                 className="ant-dropdown-link"
                                 href=" #"
                                 onClick={(e) => e.preventDefault()}
                             >
-                <UserAddOutlined />
+                                <UserAddOutlined/>
                             </a>
                         </Dropdown>
                     </Space>
                 }
                 name="cc"
             >
-        <Select mode="tags" tokenSeparators={[",", ";"]} />
+                <Select mode="tags" tokenSeparators={[",", ";"]}/>
             </Form.Item>
             <Form.Item
                 label={t("emails.fields.subject")}
@@ -179,7 +162,7 @@ export function EmailOverlayComponent({
                     },
                 ]}
             >
-        <Input />
+                <Input/>
             </Form.Item>
 
             <Divider>{t("emails.labels.preview")}</Divider>
@@ -197,23 +180,32 @@ export function EmailOverlayComponent({
                                 backgroundColor: "lightgray",
                                 borderLeft: "6px solid #2196F3",
                             }}
-              dangerouslySetInnerHTML={{ __html: form.getFieldValue("html") }}
+                            dangerouslySetInnerHTML={{__html: form.getFieldValue("html")}}
                         />
                     );
                 }}
             </Form.Item>
 
-      <Tabs>
+            <Tabs
-        <Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
+                defaultActiveKey="documents"
+                items={[
+                    {
+                        key: "documents",
+                        label: t("emails.labels.documents"),
+                        children: (
                             <EmailDocumentsComponent
                                 selectedMediaState={selectedMediaState}
                                 form={form}
                             />
-        </Tabs.TabPane>
+                        ),
-
+                    },
-        <Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
+                    {
+                        key: "attachments",
+                        label: t("emails.labels.attachments"),
+                        children: (
+                            <>
                                 {bodyshop.uselocalmediaserver && emailConfig.jobid && (
-            <a href={CreateExplorerLinkForJob({ jobid: emailConfig.jobid })}>
+                                    <a href={CreateExplorerLinkForJob({jobid: emailConfig.jobid})}>
                                         <Button>{t("documents.labels.openinexplorer")}</Button>
                                     </a>
                                 )}
@@ -227,7 +219,7 @@ export function EmailOverlayComponent({
                                         return e && e.fileList;
                                     }}
                                     rules={[
-              ({ getFieldValue }) => ({
+                                        ({getFieldValue}) => ({
                                             validator(rule, value) {
                                                 const totalSize = value.reduce(
                                                     (acc, val) => (acc = acc + val.size),
@@ -252,7 +244,7 @@ export function EmailOverlayComponent({
                                     >
                                         <>
                                             <p className="ant-upload-drag-icon">
-                  <UploadOutlined />
+                                                <UploadOutlined/>
                                             </p>
                                             <p className="ant-upload-text">
                                                 Click or drag files to this area to upload.
@@ -260,8 +252,11 @@ export function EmailOverlayComponent({
                                         </>
                                     </Upload.Dragger>
                                 </Form.Item>
-        </Tabs.TabPane>
+                            </>
-      </Tabs>
+                        ),
+                    },
+                ]}
+            />
         </div>
     );
 }

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

@@ -174,7 +174,7 @@ export function EmailOverlayContainer({
   return (
     <Modal
       destroyOnClose={true}
-      visible={modalVisible}
+      open={modalVisible}
       maskClosable={false}
       width={"80%"}
       onOk={() => form.submit()}

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

@@ -7,7 +7,7 @@ import { selectCurrentUser } from "../../redux/user/user.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import moment from "moment";
+import dayjs from "../../utils/day";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -27,16 +27,16 @@ export function EmailTestComponent({ currentUser, setEmailOptions }) {
         variables: {
           ...(values.start
             ? {
-                start: moment(values.start).startOf("day").format("YYYY-MM-DD"),
+                start: dayjs(values.start).startOf("day").format("YYYY-MM-DD"),
               }
             : {}),
           ...(values.end
-            ? { end: moment(values.end).endOf("day").format("YYYY-MM-DD") }
+            ? { end: dayjs(values.end).endOf("day").format("YYYY-MM-DD") }
             : {}),
           ...(values.start
-            ? { starttz: moment(values.start).startOf("day") }
+            ? { starttz: dayjs(values.start).startOf("day") }
             : {}),
-          ...(values.end ? { endtz: moment(values.end).endOf("day") } : {}),
+          ...(values.end ? { endtz: dayjs(values.end).endOf("day") } : {}),
 
           ...(values.id ? { id: values.id } : {}),
         },

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

@@ -1,4 +1,4 @@
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -34,7 +34,7 @@ function FeatureWrapper({
 export function HasFeatureAccess({ featureName, bodyshop }) {
   return (
     bodyshop.features.allAccess ||
-    moment(bodyshop.features[featureName]).isAfter(moment())
+    dayjs(bodyshop.features[featureName]).isAfter(dayjs())
   );
 }
 

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

@@ -1,22 +1,20 @@
 import { DatePicker } from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useRef } from "react";
-//To be used as a form element only.
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch) => ({});
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
 export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker);
 
 const dateFormat = "MM/DD/YYYY";
 
+
+// TODO, this is causing a dirty change when it should not (click the picker, click off the picker)
 export function FormDatePicker({
                                  bodyshop,
                                  value,
@@ -25,7 +23,7 @@ export function FormDatePicker({
                                  onlyFuture,
                                  isDateOnly = true,
                                  ...restProps
-}) {
+                               }) {
   const ref = useRef();
 
   const handleChange = (newDate) => {
@@ -37,8 +35,7 @@ export function FormDatePicker({
   const handleKeyDown = (e) => {
     if (e.key.toLowerCase() === "t") {
       if (onChange) {
-        onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
+        onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
-        // if (ref.current && ref.current.blur) ref.current.blur();
       }
     } else if (e.key.toLowerCase() === "enter") {
       if (ref.current && ref.current.blur) ref.current.blur();
@@ -49,14 +46,19 @@ export function FormDatePicker({
     const v = e.target.value;
     if (!v) return;
 
-    const _a = moment(
+    const _a = dayjs(
         v,
         ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
         "en",
         false
     );
 
-    if (_a.isValid() && value && value.isValid && value.isValid()) {
+    if (
+        _a.isValid()
+        && value
+        && value.isValid
+        && value.isValid()
+    ) {
       _a.set({
         hours: value.hours(),
         minutes: value.minutes(),
@@ -67,10 +69,10 @@ export function FormDatePicker({
 
     if (_a.isValid() && onChange) {
       if (onlyFuture) {
-        if (moment().subtract(1, "day").isBefore(_a)) {
+        if (dayjs().subtract(1, "day").isBefore(_a)) {
           onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
         } else {
-          onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
+          onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
         }
       } else {
         onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
@@ -82,14 +84,14 @@ export function FormDatePicker({
       <div onKeyDown={handleKeyDown}>
         <DatePicker
             ref={ref}
-        value={value ? moment(value) : null}
+            value={value ? dayjs(value) : null}
             onChange={handleChange}
             format={dateFormat}
             onBlur={onBlur || handleBlur}
             showToday={false}
             disabledTime
             {...(onlyFuture && {
-          disabledDate: (d) => moment().subtract(1, "day").isAfter(d),
+              disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d),
             })}
             {...restProps}
         />

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

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 //import DatePicker from "react-datepicker";
 //import "react-datepicker/src/stylesheets/datepicker.scss";
 import { TimePicker } from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 //To be used as a form element only.
 
@@ -21,7 +21,7 @@ const DateTimePicker = (
       <FormDatePicker
         {...restProps}
         {...(onlyFuture && {
-          disabledDate: (d) => moment().subtract(1, "day").isAfter(d),
+          disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d),
         })}
         value={value}
         onBlur={onBlur}
@@ -31,9 +31,9 @@ const DateTimePicker = (
       />
 
       <TimePicker
-        value={value ? moment(value) : null}
+        value={value ? dayjs(value) : null}
         {...(onlyFuture && {
-          disabledDate: (d) => moment().isAfter(d),
+          disabledDate: (d) => dayjs().isAfter(d),
         })}
         onChange={onChange}
         showSecond={false}

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -2,8 +2,8 @@ import React from "react";
 import { Form, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
-import { Prompt, useLocation } from "react-router-dom";
 import "./form-fields-changed.styles.scss";
+import Prompt from "../../utils/prompt";
 
 export default function FormsFieldChanged({ form, skipPrompt }) {
   const { t } = useTranslation();
@@ -11,7 +11,6 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
   const handleReset = () => {
     form.resetFields();
   };
-  const loc = useLocation();
   //if (!form.isFieldsTouched()) return <></>;
   return (
     <Form.Item
@@ -25,11 +24,9 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
           return (
             <Space direction="vertical" style={{ width: "100%" }}>
               <Prompt
-                when={skipPrompt ? false : true}
+                when={!skipPrompt}
-                message={(location) => {
+                beforeUnload={true}
-                  if (loc.pathname === location.pathname) return false;
+                message={t("general.messages.unsavedchangespopup")}
-                  return t("general.messages.unsavedchangespopup");
-                }}
               />
               <AlertComponent
                 type="warning"

client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx

@@ -94,7 +94,7 @@ const FormInputNUmberCalculator = (
 
   return (
     <div>
-      <Popover content={popContent} visible={history.length > 0}>
+      <Popover content={popContent} open={history.length > 0}>
         <InputNumber
           ref={ref}
           value={value}

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

@@ -3,7 +3,7 @@ import axios from "axios";
 import _ from "lodash";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay, {
   OwnerNameDisplayFunction,
@@ -12,7 +12,7 @@ import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.compon
 
 export default function GlobalSearchOs() {
   const { t } = useTranslation();
-  const history = useHistory();
+  const history = useNavigate();
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState(false);
 
@@ -201,7 +201,7 @@ export default function GlobalSearchOs() {
       onSearch={handleSearch}
       defaultActiveFirstOption
       onSelect={(val, opt) => {
-        history.push(opt.label.props.to);
+        history(opt.label.props.to);
       }}
       onClear={() => setData([])}
     >

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

@@ -3,7 +3,7 @@ import { AutoComplete, Divider, Input, Space } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
@@ -13,7 +13,7 @@ import OwnerNameDisplay, {
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 export default function GlobalSearch() {
   const { t } = useTranslation();
-  const history = useHistory();
+  const history = useNavigate();
   const [callSearch, { loading, error, data }] =
     useLazyQuery(GLOBAL_SEARCH_QUERY);
 
@@ -186,7 +186,7 @@ export default function GlobalSearch() {
       onSearch={handleSearch}
       defaultActiveFirstOption
       onSelect={(val, opt) => {
-        history.push(opt.label.props.to);
+        history(opt.label.props.to);
       }}
     >
       <Input.Search

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

@@ -11,7 +11,6 @@ import Icon, {
     FileAddFilled,
     FileAddOutlined,
     FileFilled,
-  //GlobalOutlined,
     HomeFilled,
     ImportOutlined,
     LineChartOutlined,
@@ -25,33 +24,23 @@ import Icon, {
     UnorderedListOutlined,
     UserOutlined,
 } from "@ant-design/icons";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import {useSplitTreatments} from "@splitsoftware/splitio-react";
-import { Layout, Menu } from "antd";
+import {Layout, Menu} from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
-import { BsKanban } from "react-icons/bs";
+import {BsKanban} from "react-icons/bs";
-import {
+import {FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar,} from "react-icons/fa";
-  FaCalendarAlt,
+import {GiPayMoney, GiPlayerTime, GiSettingsKnobs} from "react-icons/gi";
-  FaCarCrash,
+import {IoBusinessOutline} from "react-icons/io5";
-  FaCreditCard,
+import {RiSurveyLine} from "react-icons/ri";
-  FaFileInvoiceDollar,
+import {connect} from "react-redux";
-} from "react-icons/fa";
+import {Link} from "react-router-dom";
-import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
+import {createStructuredSelector} from "reselect";
-import { IoBusinessOutline } from "react-icons/io5";
+import {selectRecentItems, selectSelectedHeader,} from "../../redux/application/application.selectors";
-import { RiSurveyLine } from "react-icons/ri";
+import {setModalContext} from "../../redux/modals/modals.actions";
-import { connect } from "react-redux";
+import {signOutStart} from "../../redux/user/user.actions";
-import { Link } from "react-router-dom";
+import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
-import { createStructuredSelector } from "reselect";
+import {FiLogOut} from "react-icons/fi";
-import {
-  selectRecentItems,
-  selectSelectedHeader,
-} from "../../redux/application/application.selectors";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { signOutStart } from "../../redux/user/user.actions";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
     currentUser: selectCurrentUser,
@@ -62,48 +51,404 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
     setBillEnterContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "billEnter" })),
+        dispatch(setModalContext({context: context, modal: "billEnter"})),
     setTimeTicketContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
+        dispatch(setModalContext({context: context, modal: "timeTicket"})),
     setPaymentContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "payment" })),
+        dispatch(setModalContext({context: context, modal: "payment"})),
     setReportCenterContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "reportCenter" })),
+        dispatch(setModalContext({context: context, modal: "reportCenter"})),
     signOutStart: () => dispatch(signOutStart()),
     setCardPaymentContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "cardPayment" })),
+        dispatch(setModalContext({context: context, modal: "cardPayment"})),
 });
 
-function Header({
+function Header({handleMenuClick, currentUser, bodyshop, selectedHeader, signOutStart, setBillEnterContext, setTimeTicketContext, setPaymentContext, setReportCenterContext, recentItems, setCardPaymentContext}) {
-  handleMenuClick,
+
-  currentUser,
+    const {treatments: {ImEXPay, DmsAp, Simple_Inventory}} = useSplitTreatments({
-  bodyshop,
+        attributes: {},
-  selectedHeader,
+        names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
-  signOutStart,
+        splitKey: bodyshop && bodyshop.imexshopid,
-  setBillEnterContext,
+    });
-  setTimeTicketContext,
+
-  setPaymentContext,
+    const {t} = useTranslation();
-  setReportCenterContext,
+
-  recentItems,
+    const accountingChildren = [
-  setCardPaymentContext,
+        {
-}) {
+            key: 'bills',
-  const { Simple_Inventory } = useTreatments(
+            icon: <Icon component={FaFileInvoiceDollar}/>,
-    ["Simple_Inventory"],
+            label: (<Link to="/manage/bills">{t("menus.header.bills")}</Link>)
-    {},
+        },
-    bodyshop && bodyshop.imexshopid
+        {
+            key: 'enterbills',
+            icon: <Icon component={GiPayMoney}/>,
+            label: t("menus.header.enterbills"),
+            onClick: () => {
+                setBillEnterContext({
+                    actions: {},
+                    context: {},
+                });
+            }
+        },
+    ];
+
+    if (Simple_Inventory.treatment === "on") {
+        accountingChildren.push(
+            {
+                type: 'divider',
+            },
+            {
+                key: 'inventory',
+                icon: <Icon component={FaFileInvoiceDollar}/>,
+                label: (<Link to="/manage/inventory">{t("menus.header.inventory")}</Link>)
+            }
         );
-  const { DmsAp } = useTreatments(
+    }
-    ["DmsAp"],
+    accountingChildren.push(
-    {},
+        {
-    bodyshop && bodyshop.imexshopid
+            type: 'divider'
-  );
+        },
-  const { ImEXPay } = useTreatments(
+        {
-    ["ImEXPay"],
+            key: 'allpayments',
-    {},
+            icon: <BankFilled/>,
-    bodyshop && bodyshop.imexshopid
+            label: (<Link to="/manage/payments">{t("menus.header.allpayments")}</Link>)
+        },
+        {
+            key: 'enterpayments',
+            icon: <Icon component={FaCreditCard}/>,
+            label: t("menus.header.enterpayment"),
+            onClick: () => {
+                setPaymentContext({
+                    actions: {},
+                    context: null,
+                });
+            },
+        }
     );
 
-  const { t } = useTranslation();
+    if (ImEXPay.treatment === "on") {
+        accountingChildren.push({
+            key: 'entercardpayments',
+            icon: <Icon component={FaCreditCard}/>,
+            label: t("menus.header.entercardpayment"),
+            onClick: () => {
+                setCardPaymentContext({
+                    actions: {},
+                    context: {},
+                });
+            },
+        });
+    }
+
+    accountingChildren.push(
+        {
+            type: 'divider',
+        },
+        {
+            key: 'timetickets',
+            icon: <FieldTimeOutlined/>,
+            label: (<Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>)
+        },
+        {
+            key: 'entertimetickets',
+            icon: <Icon component={GiPlayerTime}/>,
+            label: t("menus.header.entertimeticket"),
+            onClick: () => {
+                setTimeTicketContext({
+                    actions: {},
+                    context: {
+                        created_by: currentUser.displayName
+                            ? currentUser.email.concat(" | ", currentUser.displayName)
+                            : currentUser.email,
+                    },
+                });
+            },
+        },
+        {
+            type: 'divider',
+        }
+    );
+
+    const accountingExportChildren = [
+        {
+            key: 'receivables',
+            label: (<Link to="/manage/accounting/receivables">{t("menus.header.accounting-receivables")}</Link>)
+        }
+    ]
+
+    if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
+        accountingExportChildren.push({
+            key: 'payables',
+            label: (<Link to="/manage/accounting/payables">{t("menus.header.accounting-payables")}</Link>)
+        });
+    }
+
+    if (!(
+        (bodyshop && bodyshop.cdk_dealerid) ||
+        (bodyshop && bodyshop.pbs_serialnumber)
+    )) {
+        accountingExportChildren.push({
+            key: 'payments',
+            label: (<Link to="/manage/accounting/payments">{t("menus.header.accounting-payments")}</Link>)
+        });
+    }
+
+    accountingExportChildren.push(
+        {
+            key: 'exportlogs',
+            label: (<Link to="/manage/accounting/exportlogs">{t("menus.header.export-logs")}</Link>)
+        },
+        {
+            key: 'accountingexport',
+            icon: <ExportOutlined/>,
+            label: t("menus.header.export"),
+            children: accountingExportChildren
+        }
+    );
+
+    const menuItems = [
+        {
+            key: 'home',
+            icon: <HomeFilled/>,
+            label: (<Link to="/manage/">{t("menus.header.home")}</Link>)
+        },
+        {
+            key: 'schedule',
+            icon: <Icon component={FaCalendarAlt}/>,
+            label: (<Link to="/manage/schedule">{t("menus.header.schedule")}</Link>)
+        },
+        {
+            key: 'jobssubmenu',
+            icon: <Icon component={FaCarCrash}/>,
+            label: t("menus.header.jobs"),
+            children: [
+                {
+                    key: 'activejobs',
+                    icon: <FileFilled/>,
+                    label: (<Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>)
+                },
+                {
+                    key: 'readyjobs',
+                    icon: <CheckCircleOutlined/>,
+                    label: (<Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>)
+                },
+                {
+                    key: 'parts-queue',
+                    icon: <ToolFilled/>,
+                    label: (<Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>)
+                },
+                {
+                    key: 'availablejobs',
+                    icon: <ImportOutlined/>,
+                    label: (<Link to="/manage/available">{t("menus.header.availablejobs")}</Link>)
+                },
+                {
+                    key: 'newjob',
+                    icon: <FileAddOutlined/>,
+                    label: (<Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>)
+                },
+                {
+                    type: 'divider',
+                },
+                {
+                    key: 'alljobs',
+                    icon: <UnorderedListOutlined/>,
+                    label: (<Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>)
+                },
+                {
+                    key: 'productionlist',
+                    icon: <ScheduleOutlined/>,
+                    label: (<Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>)
+                },
+                {
+                    key: 'productionboard',
+                    icon: <Icon component={BsKanban}/>,
+                    label: (<Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>)
+                },
+                {
+                    type: 'divider',
+                },
+                {
+                    key: 'scoreboard',
+                    icon: <LineChartOutlined/>,
+                    label: (<Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>)
+                },
+            ]
+        },
+        {
+            key: 'customers',
+            icon: <UserOutlined/>,
+            label: t("menus.header.customers"),
+            children: [
+                {
+                    key: 'owners',
+                    icon: <TeamOutlined/>,
+                    label: (<Link to="/manage/owners">{t("menus.header.owners")}</Link>)
+                },
+                {
+                    key: 'vehicles',
+                    icon: <CarFilled/>,
+                    label: (<Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>)
+                },
+            ]
+        },
+        {
+            key: 'ccs',
+            icon: <CarFilled/>,
+            label: t("menus.header.courtesycars"),
+            children: [
+                {
+                    key: 'courtesycarsall',
+                    icon: <CarFilled/>,
+                    label: (<Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>)
+                },
+                {
+                    key: 'contracts',
+                    icon: <FileFilled/>,
+                    label: (<Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>)
+                },
+                {
+                    key: 'newcontract',
+                    icon: <FileAddFilled/>,
+                    label: (<Link
+                        to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>)
+                },
+            ]
+        },
+        {
+            key: 'accounting',
+            icon: <DollarCircleFilled/>,
+            label: t("menus.header.accounting"),
+            children: accountingChildren,
+        },
+        {
+            key: 'phonebook',
+            icon: <PhoneOutlined/>,
+            label: (<Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>)
+        },
+        {
+            key: 'temporarydocs',
+            icon: <PaperClipOutlined/>,
+            label: (<Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>)
+        },
+        {
+            key: 'shopsubmenu',
+            icon: <SettingOutlined/>,
+            label: t("menus.header.shop"),
+            children: [
+                {
+                    key: 'shop',
+                    icon: <Icon component={GiSettingsKnobs}/>,
+                    label: (<Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>)
+                },
+                {
+                    key: 'dashboard',
+                    icon: <DashboardFilled/>,
+                    label: (<Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>)
+                },
+                {
+                    key: 'reportcenter',
+                    icon: <BarChartOutlined/>,
+                    label: t("menus.header.reportcenter"),
+                    onClick: () => {
+                        setReportCenterContext({
+                            actions: {},
+                            context: {},
+                        });
+                    }
+                },
+                {
+                    key: 'shop-vendors',
+                    icon: <Icon component={IoBusinessOutline}/>,
+                    label: (<Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>)
+                },
+                {
+                    key: 'shop-csi',
+                    icon: <Icon component={RiSurveyLine}/>,
+                    label: (<Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>)
+                },
+            ]
+        },
+        {
+            key: 'user',
+            label: (
+                currentUser.displayName ||
+                currentUser.email ||
+                t("general.labels.unknown")
+            ),
+            children: [
+                {
+                    key: 'signout',
+                    icon: <Icon component={FiLogOut}/>,
+                    danger: true,
+                    label: t("user.actions.signout"),
+                    onClick: () => signOutStart()
+                },
+                {
+                    key: 'help',
+                    icon: <Icon component={QuestionCircleFilled}/>,
+                    label: t("menus.header.help"),
+                    onClick: () => {
+                        window.open("https://help.imex.online/", "_blank");
+                    }
+                },
+                {
+                    key: 'rescue',
+                    icon: <Icon component={CarFilled}/>,
+                    label: t("menus.header.rescueme"),
+                    onClick: () => {
+                        window.open("https://imexrescue.com/", "_blank");
+                    }
+                },
+                {
+                    key: 'shiftclock',
+                    icon: <Icon component={GiPlayerTime}/>,
+                    label: (<Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>)
+                },
+                {
+                    key: 'profile',
+                    icon: <UserOutlined/>,
+                    label: (<Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>)
+                },
+                // {
+                //   key: 'langselecter',
+                //   label: t("menus.currentuser.languageselector"),
+                //   children: [
+                //     {
+                //       key: 'en-US',
+                //       label: t("general.languages.english"),
+                //       onClick: () => {
+                //         window.location.href = "/?lang=en-US";
+                //       }
+                //     },
+                //     {
+                //       key: 'fr-CA',
+                //       label: t("general.languages.french"),
+                //       onClick: () => {
+                //         window.location.href = "/?lang=fr-CA";
+                //       }
+                //     },
+                //     {
+                //       key: 'es-MX',
+                //       label: t("general.languages.spanish"),
+                //       onClick: () => {
+                //         window.location.href = "/?lang=es-MX";
+                //       }
+                //     },
+                //   ]
+                // },
+            ]
+        },
+        {
+            key: 'recent',
+            icon: <ClockCircleFilled/>,
+            children: recentItems.map((i, idx) => ({
+                key: idx,
+                label: (<Link to={i.url}>{i.label}</Link>)
+
+            })),
+        }
+    ]
 
     return (
         <Layout.Header>
@@ -114,324 +459,9 @@ function Header({
                 selectedKeys={[selectedHeader]}
                 onClick={handleMenuClick}
                 subMenuCloseDelay={0.3}
-      >
+                items={menuItems}
-        <Menu.Item key="home" icon={<HomeFilled />}>
+            />
-          <Link to="/manage">{t("menus.header.home")}</Link>
+
-        </Menu.Item>
-        <Menu.Item key="schedule" icon={<Icon component={FaCalendarAlt} />}>
-          <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
-        </Menu.Item>
-        <Menu.SubMenu
-          key="jobssubmenu"
-          icon={<Icon component={FaCarCrash} />}
-          title={t("menus.header.jobs")}
-        >
-          <Menu.Item key="activejobs" icon={<FileFilled />}>
-            <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
-          </Menu.Item>
-          <Menu.Item key="readyjobs" icon={<CheckCircleOutlined />}>
-            <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
-          </Menu.Item>
-          <Menu.Item key="parts-queue" icon={<ToolFilled />}>
-            <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
-          </Menu.Item>
-          <Menu.Item key="availablejobs" icon={<ImportOutlined />}>
-            <Link to="/manage/available">
-              {t("menus.header.availablejobs")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="newjob" icon={<FileAddOutlined />}>
-            <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
-          </Menu.Item>
-          <Menu.Divider key="div1" />
-          <Menu.Item key="alljobs" icon={<UnorderedListOutlined />}>
-            <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
-          </Menu.Item>
-          <Menu.Divider key="div2" />
-          <Menu.Item key="productionlist" icon={<ScheduleOutlined />}>
-            <Link to="/manage/production/list">
-              {t("menus.header.productionlist")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="productionboard" icon={<Icon component={BsKanban} />}>
-            <Link to="/manage/production/board">
-              {t("menus.header.productionboard")}
-            </Link>
-          </Menu.Item>
-          <Menu.Divider key="div3" />
-          <Menu.Item key="scoreboard" icon={<LineChartOutlined />}>
-            <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
-          </Menu.Item>
-        </Menu.SubMenu>
-        <Menu.SubMenu
-          key="customers"
-          icon={<UserOutlined />}
-          title={t("menus.header.customers")}
-        >
-          <Menu.Item key="owners" icon={<TeamOutlined />}>
-            <Link to="/manage/owners">{t("menus.header.owners")}</Link>
-          </Menu.Item>
-          <Menu.Item key="vehicles" icon={<CarFilled />}>
-            <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
-          </Menu.Item>
-        </Menu.SubMenu>
-        <Menu.SubMenu
-          key="ccs"
-          icon={<CarFilled />}
-          title={t("menus.header.courtesycars")}
-        >
-          <Menu.Item key="courtesycarsall" icon={<CarFilled />}>
-            <Link to="/manage/courtesycars">
-              {t("menus.header.courtesycars-all")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="contracts" icon={<FileFilled />}>
-            <Link to="/manage/courtesycars/contracts">
-              {t("menus.header.courtesycars-contracts")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="newcontract" icon={<FileAddFilled />}>
-            <Link to="/manage/courtesycars/contracts/new">
-              {t("menus.header.courtesycars-newcontract")}
-            </Link>
-          </Menu.Item>
-        </Menu.SubMenu>
-        <Menu.SubMenu
-          key="accounting"
-          icon={<DollarCircleFilled />}
-          title={t("menus.header.accounting")}
-        >
-          <Menu.Item
-            key="bills"
-            icon={<Icon component={FaFileInvoiceDollar} />}
-          >
-            <Link to="/manage/bills">{t("menus.header.bills")}</Link>
-          </Menu.Item>
-          <Menu.Item
-            key="enterbills"
-            icon={<Icon component={GiPayMoney} />}
-            onClick={() => {
-              setBillEnterContext({
-                actions: {},
-                context: {},
-              });
-            }}
-          >
-            {t("menus.header.enterbills")}
-          </Menu.Item>
-          {Simple_Inventory.treatment === "on" && (
-            <>
-              <Menu.Divider key="div4" />
-              <Menu.Item
-                key="inventory"
-                icon={<Icon component={FaFileInvoiceDollar} />}
-              >
-                <Link to="/manage/inventory">
-                  {t("menus.header.inventory")}
-                </Link>
-              </Menu.Item>
-            </>
-          )}
-          <Menu.Divider key="div7" />
-          <Menu.Item key="allpayments" icon={<BankFilled />}>
-            <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
-          </Menu.Item>
-          <Menu.Item
-            key="enterpayments"
-            onClick={() => {
-              setPaymentContext({
-                actions: {},
-                context: null,
-              });
-            }}
-            icon={<Icon component={FaCreditCard} />}
-          >
-            {t("menus.header.enterpayment")}
-          </Menu.Item>
-          {ImEXPay.treatment === "on" && (
-            <Menu.Item
-              key="entercardpayments"
-              onClick={() => {
-                setCardPaymentContext({
-                  actions: {},
-                  context: {},
-                });
-              }}
-              icon={<Icon component={FaCreditCard} />}
-            >
-              {t("menus.header.entercardpayment")}
-            </Menu.Item>
-          )}
-          <Menu.Divider key="div5" />
-          <Menu.Item key="timetickets" icon={<FieldTimeOutlined />}>
-            <Link to="/manage/timetickets">
-              {t("menus.header.timetickets")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item
-            key="entertimetickets"
-            icon={<Icon component={GiPlayerTime} />}
-            onClick={() => {
-              setTimeTicketContext({
-                actions: {},
-                context: {
-                  created_by: currentUser.displayName
-                    ? currentUser.email.concat(" | ", currentUser.displayName)
-                    : currentUser.email,
-                },
-              });
-            }}
-          >
-            {t("menus.header.entertimeticket")}
-          </Menu.Item>
-          <Menu.Divider key="div6" />
-          <Menu.SubMenu
-            key="accountingexport"
-            title={t("menus.header.export")}
-            icon={<ExportOutlined />}
-          >
-            <Menu.Item key="receivables">
-              <Link to="/manage/accounting/receivables">
-                {t("menus.header.accounting-receivables")}
-              </Link>
-            </Menu.Item>
-            {(!(
-              (bodyshop && bodyshop.cdk_dealerid) ||
-              (bodyshop && bodyshop.pbs_serialnumber)
-            ) ||
-              DmsAp.treatment === "on") && (
-              <Menu.Item key="payables">
-                <Link to="/manage/accounting/payables">
-                  {t("menus.header.accounting-payables")}
-                </Link>
-              </Menu.Item>
-            )}
-            {!(
-              (bodyshop && bodyshop.cdk_dealerid) ||
-              (bodyshop && bodyshop.pbs_serialnumber)
-            ) && (
-              <Menu.Item key="payments">
-                <Link to="/manage/accounting/payments">
-                  {t("menus.header.accounting-payments")}
-                </Link>
-              </Menu.Item>
-            )}
-            <Menu.Item key="export-logs">
-              <Link to="/manage/accounting/exportlogs">
-                {t("menus.header.export-logs")}
-              </Link>
-            </Menu.Item>
-          </Menu.SubMenu>
-        </Menu.SubMenu>
-        <Menu.Item key="phonebook" icon={<PhoneOutlined />}>
-          <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
-        </Menu.Item>
-        <Menu.Item key="temporarydocs" icon={<PaperClipOutlined />}>
-          <Link to="/manage/temporarydocs">
-            {t("menus.header.temporarydocs")}
-          </Link>
-        </Menu.Item>
-        <Menu.SubMenu
-          key="shopsubmenu"
-          title={t("menus.header.shop")}
-          icon={<SettingOutlined />}
-        >
-          <Menu.Item key="shop" icon={<Icon component={GiSettingsKnobs} />}>
-            <Link to="/manage/shop?tab=info">
-              {t("menus.header.shop_config")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="dashboard" icon={<DashboardFilled />}>
-            <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
-          </Menu.Item>
-          <Menu.Item
-            key="reportcenter"
-            icon={<BarChartOutlined />}
-            onClick={() => {
-              setReportCenterContext({
-                actions: {},
-                context: {},
-              });
-            }}
-          >
-            {t("menus.header.reportcenter")}
-          </Menu.Item>
-          <Menu.Item
-            key="shop-vendors"
-            icon={<Icon component={IoBusinessOutline} />}
-          >
-            <Link to="/manage/shop/vendors">
-              {t("menus.header.shop_vendors")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="shop-csi" icon={<Icon component={RiSurveyLine} />}>
-            <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
-          </Menu.Item>
-        </Menu.SubMenu>
-        <Menu.SubMenu
-          key="user"
-          title={
-            currentUser.displayName ||
-            currentUser.email ||
-            t("general.labels.unknown")
-          }
-        >
-          <Menu.Item key="signout" danger onClick={() => signOutStart()}>
-            {t("user.actions.signout")}
-          </Menu.Item>
-          <Menu.Item
-            key="help"
-            onClick={() => {
-              window.open("https://help.imex.online/", "_blank");
-            }}
-            icon={<Icon component={QuestionCircleFilled} />}
-          >
-            {t("menus.header.help")}
-          </Menu.Item>
-          <Menu.Item
-            key="rescue"
-            onClick={() => {
-              window.open("https://imexrescue.com/", "_blank");
-            }}
-          >
-            {t("menus.header.rescueme")}
-          </Menu.Item>
-          <Menu.Item key="shiftclock">
-            <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
-          </Menu.Item>
-          <Menu.Item key="profile">
-            <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
-          </Menu.Item>
-          {
-            //  <Menu.SubMenu
-            //           key="langselecter"
-            //           title={
-            //             <span>
-            //               <GlobalOutlined />
-            //               <span>{t("menus.currentuser.languageselector")}</span>
-            //             </span>
-            //           }
-            //         >
-            //           <Menu.Item actiontype="lang-select" key="en-US">
-            //             {t("general.languages.english")}
-            //           </Menu.Item>
-            //           <Menu.Item actiontype="lang-select" key="fr-CA">
-            //             {t("general.languages.french")}
-            //           </Menu.Item>
-            //           <Menu.Item actiontype="lang-select" key="es-MX">
-            //             {t("general.languages.spanish")}
-            //           </Menu.Item>
-            //         </Menu.SubMenu>
-          }
-        </Menu.SubMenu>
-        <Menu.SubMenu key="recent" title={<ClockCircleFilled />}>
-          {recentItems.map((i, idx) => (
-            <Menu.Item key={idx}>
-              <Link to={i.url}>{i.label}</Link>
-            </Menu.Item>
-          ))}
-        </Menu.SubMenu>
-      </Menu>
         </Layout.Header>
     );
 }

client/src/components/inventory-bill-ro/inventory-bill-ro.component.jsx

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import { useTranslation } from "react-i18next";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -35,7 +35,7 @@ export function InventoryBillRo({
               vendorid: bodyshop.inhousevendorid,
               invoice_number: "ih",
               isinhouse: true,
-              date: moment(),
+              date: dayjs(),
               total: 0,
               billlines: [{}],
               //   billlines: selectedLines.map((p) => {

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

@@ -1,39 +1,33 @@
-import { EditFilled, SyncOutlined, FileAddFilled } from "@ant-design/icons";
+import {EditFilled, FileAddFilled, SyncOutlined} from "@ant-design/icons";
-import { Button, Card, Input, Space, Table, Typography } from "antd";
+import {Button, Card, Input, Space, Table, Typography} from "antd";
 import queryString from "query-string";
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import {Link, useNavigate, useLocation} from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import {createStructuredSelector} from "reselect";
-import { setModalContext } from "../../redux/modals/modals.actions";
+import {setModalContext} from "../../redux/modals/modals.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+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,
 });
 const mapDispatchToProps = (dispatch) => ({
     setInventoryUpsertContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "inventoryUpsert" })),
+        dispatch(setModalContext({context: context, modal: "inventoryUpsert"})),
 });
 
-export function JobsList({
+export function JobsList({bodyshop, refetch, loading, jobs, total, setInventoryUpsertContext,}) {
-  bodyshop,
-  refetch,
-  loading,
-  jobs,
-  total,
-  setInventoryUpsertContext,
-}) {
     const search = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder } = search;
+    const {page, sortcolumn, sortorder} = search;
-  const history = useHistory();
+    const history = useNavigate();
 
-  const { t } = useTranslation();
+    const {t} = useTranslation();
     const columns = [
         {
             title: t("billlines.fields.line_desc"),
@@ -117,7 +111,7 @@ export function JobsList({
                         {record.bill?.job?.ro_number}
                     </Link>
                 ) : (
-          <InventoryBillRo inventoryline={record} />
+                    <InventoryBillRo inventoryline={record}/>
                 ),
         },
         {
@@ -131,16 +125,16 @@ export function JobsList({
                     <Button
                         onClick={() => {
                             setInventoryUpsertContext({
-                actions: { refetch: refetch },
+                                actions: {refetch: refetch},
                                 context: {
                                     existingInventory: record,
                                 },
                             });
                         }}
                     >
-            <EditFilled />
+                        <EditFilled/>
                     </Button>
-          <InventoryLineDelete inventoryline={record} refetch={refetch} />
+                    <InventoryLineDelete inventoryline={record} refetch={refetch}/>
                 </Space>
             ),
         },
@@ -150,7 +144,7 @@ export function JobsList({
         search.page = pagination.current;
         search.sortcolumn = sorter.column && sorter.column.key;
         search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+        history({search: queryString.stringify(search)});
     };
 
     return (
@@ -160,12 +154,12 @@ export function JobsList({
                     {search.search && (
                         <>
                             <Typography.Title level={4}>
-                {t("general.labels.searchresults", { search: search.search })}
+                                {t("general.labels.searchresults", {search: search.search})}
                             </Typography.Title>
                             <Button
                                 onClick={() => {
                                     delete search.search;
-                  history.push({ search: queryString.stringify(search) });
+                                    history({search: queryString.stringify(search)});
                                 }}
                             >
                                 {t("general.actions.clear")}
@@ -175,12 +169,12 @@ export function JobsList({
                     <Button
                         onClick={() => {
                             setInventoryUpsertContext({
-                actions: { refetch: refetch },
+                                actions: {refetch: refetch},
                                 context: {},
                             });
                         }}
                     >
-            <FileAddFilled />
+                        <FileAddFilled/>
                     </Button>
                     <Button
                         onClick={() => {
@@ -188,7 +182,7 @@ export function JobsList({
                             else {
                                 search.showall = true;
                             }
-              history.push({ search: queryString.stringify(search) });
+                            history({search: queryString.stringify(search)});
                         }}
                     >
                         {search.showall
@@ -197,13 +191,13 @@ export function JobsList({
                     </Button>
 
                     <Button onClick={() => refetch()}>
-            <SyncOutlined />
+                        <SyncOutlined/>
                     </Button>
                     <Input.Search
                         placeholder={search.search || t("general.labels.search")}
                         onSearch={(value) => {
                             search.search = value;
-              history.push({ search: queryString.stringify(search) });
+                            history({search: queryString.stringify(search)});
                         }}
                         enterButton
                     />
@@ -226,4 +220,5 @@ export function JobsList({
         </Card>
     );
 }
+
 export default connect(mapStateToProps, mapDispatchToProps)(JobsList);

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

@@ -103,7 +103,7 @@ export function InventoryUpsertModalContainer({
           ? t("inventory.actions.edit")
           : t("inventory.actions.new")
       }
-      visible={visible}
+      open={visible}
       okText={t("general.actions.save")}
       onOk={() => {
         form.submit();

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -98,7 +98,7 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
   return (
     <>
       <Button onClick={showModal}>{t("printcenter.jobs.3rdpartypayer")}</Button>
-      <Modal visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
+      <Modal open={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
         <Form
           onFinish={handleFinish}
           autoComplete={"off"}

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

@@ -4,7 +4,7 @@ import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Dropdown, Menu, notification } from "antd";
+import { Dropdown, notification } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
@@ -37,18 +37,21 @@ export function JobAltTransportChange({ bodyshop, job }) {
       });
     }
   };
-  const menu = (
+
-    <Menu selectedKeys={[job && job.alt_transport]} onClick={onClick}>
+  const menu = {
-      {bodyshop.appt_alt_transport &&
+      items: [
-        bodyshop.appt_alt_transport.map((alt) => (
+          ...(bodyshop.appt_alt_transport || []).map((alt) => ({
-          <Menu.Item key={alt}>{alt}</Menu.Item>
+              key: alt,
-        ))}
+              label: alt,
-      <Menu.Divider />
+          })),
-      <Menu.Item key={"null"}>{t("general.actions.clear")}</Menu.Item>
+          { key: "null", label: t("general.actions.clear") },
-    </Menu>
+      ],
-  );
+      onClick: onClick,
+      defaultSelectedKeys: [job && job.alt_transport]
+  };
+
   return (
-    <Dropdown overlay={menu}>
+    <Dropdown menu={menu}>
       <a href=" #" onClick={(e) => e.preventDefault()}>
         <DownOutlined />
       </a>

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

@@ -4,7 +4,7 @@ import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Dropdown, Menu, notification } from "antd";
+import { Dropdown, notification } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
@@ -44,21 +44,23 @@ export function ScheduleEventColor({ bodyshop, event }) {
     bodyshop.appt_colors.filter((color) => color.color.hex === event.color)[0]
       ?.label;
 
-  const menu = (
+
-    <Menu selectedKeys={[event.color]} onClick={onClick}>
+  const menu = {
-      {bodyshop.appt_colors &&
+      defaultSelectedKeys: [event.color],
-        bodyshop.appt_colors.map((color) => (
+      onClick: onClick,
-          <Menu.Item style={{ color: color.color.hex }} key={color.color.hex}>
+      items: [
-            {color.label}
+        ...(bodyshop.appt_colors || []).map((color) => ({
-          </Menu.Item>
+            key: color.color.hex,
-        ))}
+            label: color.label,
-      <Menu.Divider />
+            style: { color: color.color.hex },
-      <Menu.Item key={"null"}>{t("general.actions.clear")}</Menu.Item>
+        })),
-    </Menu>
+        { type: "divider" },
-  );
+        { key: "null", label: t("general.actions.clear") },
+      ]
+  };
 
   return (
-    <Dropdown overlay={menu}>
+    <Dropdown menu={menu}>
       <a href=" #" onClick={(e) => e.preventDefault()}>
         {selectedColor}
         <DownOutlined />
@@ -66,4 +68,5 @@ export function ScheduleEventColor({ bodyshop, event }) {
     </Dropdown>
   );
 }
+
 export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);

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

@@ -5,19 +5,18 @@ import {
   Dropdown,
   Form,
   Input,
-  Menu,
   notification,
   Popover,
   Select,
   Space,
 } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import {
   openChatByPhone,
@@ -59,7 +58,7 @@ export function ScheduleEventComponent({
 }) {
   const { t } = useTranslation();
   const [visible, setVisible] = useState(false);
-  const history = useHistory();
+  const history = useNavigate();
   const searchParams = queryString.parse(useLocation().search);
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const [title, setTitle] = useState(event.title);
@@ -172,7 +171,7 @@ export function ScheduleEventComponent({
         {event.job ? (
           <Button
             onClick={() => {
-              history.push({
+              history({
                 search: queryString.stringify({
                   ...searchParams,
                   selected: event.job.id,
@@ -185,10 +184,12 @@ export function ScheduleEventComponent({
         ) : null}
         {event.job ? (
           <Dropdown
-            overlay={
+            menu={{items: [
-              <Menu>
+                    {
-                <Menu.Item
+                        key: "email",
-                  onClick={() => {
+                        label: t("general.labels.email"),
+                        disabled: event.arrived,
+                        onClick: () => {
                             const Template = TemplateList("job").appointment_reminder;
                             GenerateDocument(
                                 {
@@ -202,13 +203,13 @@ export function ScheduleEventComponent({
                                 "e",
                                 event.job && event.job.id
                             );
-                  }}
+                        },
-                  disabled={event.arrived}
+                    },
-                >
+                    {
-                  {t("general.labels.email")}
+                        key: "sms",
-                </Menu.Item>
+                        label: t("general.labels.sms"),
-                <Menu.Item
+                        disabled: event.arrived || !bodyshop.messagingservicesid,
-                  onClick={() => {
+                        onClick: () => {
                             const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
                             if (p && p.isValid()) {
                                 openChatByPhone({
@@ -218,8 +219,8 @@ export function ScheduleEventComponent({
                                 setMessage(
                                     t("appointments.labels.reminder", {
                                         shopname: bodyshop.shopname,
-                          date: moment(event.start).format("MM/DD/YYYY"),
+                                        date: dayjs(event.start).format("MM/DD/YYYY"),
-                          time: moment(event.start).format("HH:mm a"),
+                                        time: dayjs(event.start).format("HH:mm a"),
                                     })
                                 );
                                 setVisible(false);
@@ -228,13 +229,9 @@ export function ScheduleEventComponent({
                                     message: t("messaging.error.invalidphone"),
                                 });
                             }
-                  }}
+                        },
-                  disabled={event.arrived || !bodyshop.messagingservicesid}
+                    },
-                >
+                ]}}
-                  {t("general.labels.sms")}
-                </Menu.Item>
-              </Menu>
-            }
           >
             <Button>{t("appointments.actions.sendreminder")}</Button>
           </Dropdown>
@@ -369,8 +366,8 @@ export function ScheduleEventComponent({
 
   return (
     <Popover
-      visible={visible}
+      open={visible}
-      onVisibleChange={(vis) => !event.vacation && setVisible(vis)}
+      onOpenChange={(vis) => !event.vacation && setVisible(vis)}
       trigger="click"
       content={event.block ? blockContent : popoverContent}
       style={{

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

@@ -1,11 +1,11 @@
 import { useMutation } from "@apollo/client";
 import { Button, Card, Form, Input, notification, Switch } from "antd";
-import moment from "moment-business-days";
+import dayjs from "../../../../utils/day";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useHistory, useLocation, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../../../firebase/firebase.utils";
 import {
@@ -49,7 +49,7 @@ export function JobChecklistForm({
   const [updateOwner] = useMutation(UPDATE_OWNER);
 
   const { jobId } = useParams();
-  const history = useHistory();
+  const history = useNavigate();
   const search = queryString.parse(useLocation().search);
   const [form] = Form.useForm();
 
@@ -87,9 +87,9 @@ export function JobChecklistForm({
             bodyshop.intakechecklist &&
             bodyshop.intakechecklist.next_contact_hours &&
             bodyshop.intakechecklist.next_contact_hours > 0 && {
-              date_next_contact: moment().add(
+              date_next_contact: dayjs().add(
                 bodyshop.intakechecklist.next_contact_hours,
-                "hours"
+                "hour"
               ),
             }),
           ...(type === "deliver" && {
@@ -172,7 +172,7 @@ export function JobChecklistForm({
 
     if (!!!result.errors) {
       notification["success"]({ message: t("checklist.successes.completed") });
-      history.push(`/manage/jobs/${jobId}`);
+      history(`/manage/jobs/${jobId}`);
 
       insertAuditTrail({
         jobid: jobId,
@@ -218,26 +218,26 @@ export function JobChecklistForm({
             scheduled_completion:
               (job &&
                 job.scheduled_completion &&
-                moment(job.scheduled_completion)) ||
+                dayjs(job.scheduled_completion)) ||
               (job &&
                 job.labhrs &&
                 job.larhrs &&
-                moment().businessAdd(
+                dayjs().businessDaysAdd(
                   (job.labhrs.aggregate.sum.mod_lb_hrs ||
                     0 + job.larhrs.aggregate.sum.mod_lb_hrs ||
                     0) / bodyshop.target_touchtime,
-                  "days"
+                  "day"
                 )),
             scheduled_delivery:
-              job.scheduled_delivery && moment(job.scheduled_delivery),
+              job.scheduled_delivery && dayjs(job.scheduled_delivery),
             production_vars: job.production_vars,
           }),
           ...(type === "deliver" && {
             removeFromProduction: true,
             actual_completion:
-              job && job.actual_completion && moment(job.actual_completion),
+              job && job.actual_completion && dayjs(job.actual_completion),
             actual_delivery:
-              job && job.actual_delivery && moment(job.actual_delivery),
+              job && job.actual_delivery && dayjs(job.actual_delivery),
           }),
           ...formItems
             .filter((fi) => fi.value)

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

@@ -39,7 +39,7 @@ export function JobCostingModalContainer({
 
   return (
     <Modal
-      visible={visible}
+      open={visible}
       title={t("jobs.labels.jobcosting")}
       onOk={() => {
         toggleModalVisible();

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

@@ -1,10 +1,10 @@
 import { useApolloClient } from "@apollo/client";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, notification, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useHistory } from "react-router";
+import { useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINES_IOU } from "../../graphql/jobs-lines.queries";
 import {
@@ -25,13 +25,15 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const client = useApolloClient();
-  const history = useHistory();
+  const history = useNavigate();
+
+
+  const { treatments: {IOU_Tracking} } = useSplitTreatments({
+    attributes: {},
+    names: ["IOU_Tracking"],
+    splitKey: bodyshop.imexshopid,
+  });
 
-  const { IOU_Tracking } = useTreatments(
-    ["IOU_Tracking"],
-    {},
-    bodyshop.imexshopid
-  );
   if (IOU_Tracking.treatment !== "on") return null;
 
   const handleCreateIou = async () => {
@@ -50,7 +52,7 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
     notification.open({
       type: "success",
       message: t("jobs.successes.ioucreated"),
-      onClick: () => history.push(`/manage/jobs/${iouId}`),
+      onClick: () => history(`/manage/jobs/${iouId}`),
     });
     const selectedJobLinesIds = selectedJobLines.map((l) => l.id);
     await client.mutate({

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

@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -56,7 +56,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
 
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
-  const history = useHistory();
+  const history = useNavigate();
   const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
     variables: { id: selected },
     skip: !selected,
@@ -67,7 +67,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
   const { t } = useTranslation();
   const handleDrawerClose = () => {
     delete searchParams.selected;
-    history.push({
+    history({
       search: queryString.stringify({
         ...searchParams,
       }),
@@ -76,7 +76,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
 
   return (
     <Drawer
-      visible={!!selected}
+      open={!!selected}
       destroyOnClose
       width={drawerPercentage}
       placement="right"

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

@@ -1,119 +1,188 @@
-import { Timeline } from "antd";
+import {Timeline} from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
+import {DateTimeFormatter} from "../../utils/DateFormatter";
 import CardTemplate from "./job-detail-cards.template.component";
 
-export default function JobDetailCardsDatesComponent({ loading, data }) {
+export default function JobDetailCardsDatesComponent({loading, data}) {
-  const { t } = useTranslation();
+    const {t} = useTranslation();
 
     return (
         <CardTemplate loading={loading} title={t("jobs.labels.cards.dates")}>
             {data ? (
-        <Timeline>
+                <Timeline
-          {!(
+                    items={[
-            data.actual_in ||
+                        ...(data.date_last_contacted
-            data.scheduled_completion ||
+                            ? [
-            data.scheduled_in ||
+                                {
-            data.actual_completion ||
+                                    key: "date_last_contacted",
-            data.scheduled_delivery ||
+                                    label: (
-            data.actual_delivery ||
+                                        <>
-            data.date_estimated ||
-            data.date_open ||
-            data.date_scheduled ||
-            data.date_invoiced ||
-            data.date_exported
-          ) ? (
-            <div>{t("jobs.errors.nodates")}</div>
-          ) : null}
-          {data.date_last_contacted ? (
-            <Timeline.Item>
                                             <label>{t("jobs.fields.date_last_contacted")}: </label>
                                             <DateTimeFormatter>{data.date_last_contacted}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-          {data.date_open ? (
+                                },
-            <Timeline.Item>
+                            ]
+                            : []),
+                        ...(data.date_open
+                            ? [
+                                {
+                                    key: "date_open",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.date_open")}: </label>
                                             <DateTimeFormatter>{data.date_open}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-
+                                },
-          {data.date_estimated ? (
+                            ]
-            <Timeline.Item>
+                            : []),
+                        ...(data.date_estimated
+                            ? [
+                                {
+                                    key: "date_estimated",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.date_estimated")}: </label>
                                             <DateTimeFormatter>{data.date_estimated}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-
+                                },
-          {data.date_scheduled ? (
+                            ]
-            <Timeline.Item>
+                            : []),
+                        ...(data.date_scheduled
+                            ? [
+                                {
+                                    key: "date_scheduled",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.date_scheduled")}: </label>
                                             <DateTimeFormatter>{data.date_scheduled}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-
+                                },
-          {data.scheduled_in ? (
+                            ]
-            <Timeline.Item>
+                            : []),
+                        ...(data.scheduled_in
+                            ? [
+                                {
+                                    key: "scheduled_in",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.scheduled_in")}: </label>
                                             <DateTimeFormatter>{data.scheduled_in}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-          {data.actual_in ? (
+                                },
-            <Timeline.Item>
+                            ]
+                            : []),
+                        ...(data.actual_in
+                            ? [
+                                {
+                                    key: "actual_in",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.actual_in")}: </label>
                                             <DateTimeFormatter>{data.actual_in}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-          {data.date_repairstarted ? (
+                                },
-            <Timeline.Item>
+                            ]
+                            : []),
+                        ...(data.date_repairstarted
+                            ? [
+                                {
+                                    key: "date_repairstarted",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.date_repairstarted")}: </label>
                                             <DateTimeFormatter>{data.date_repairstarted}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-          {data.scheduled_completion ? (
+                                },
-            <Timeline.Item>
+                            ]
+                            : []),
+                        ...(data.scheduled_completion
+                            ? [
+                                {
+                                    key: "scheduled_completion",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.scheduled_completion")}: </label>
                                             <DateTimeFormatter>{data.scheduled_completion}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-
+                                },
-          {data.actual_completion ? (
+                            ]
-            <Timeline.Item>
+                            : []),
+                        ...(data.actual_completion
+                            ? [
+                                {
+                                    key: "actual_completion",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.actual_completion")}: </label>
                                             <DateTimeFormatter>{data.actual_completion}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-
+                                },
-          {data.scheduled_delivery ? (
+                            ]
-            <Timeline.Item>
+                            : []),
+                        ...(data.scheduled_delivery
+                            ? [
+                                {
+                                    key: "scheduled_delivery",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.scheduled_delivery")}: </label>
                                             <DateTimeFormatter>{data.scheduled_delivery}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-
+                                },
-          {data.actual_delivery ? (
+                            ]
-            <Timeline.Item>
+                            : []),
+                        ...(data.actual_delivery
+                            ? [
+                                {
+                                    key: "actual_delivery",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.actual_delivery")}: </label>
                                             <DateTimeFormatter>{data.actual_delivery}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-
+                                },
-          {data.date_invoiced ? (
+                            ]
-            <Timeline.Item>
+                            : []),
+                        ...(data.date_invoiced
+                            ? [
+                                {
+                                    key: "date_invoiced",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.date_invoiced")}: </label>
                                             <DateTimeFormatter>{data.date_invoiced}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-
+                                },
-          {data.date_exported ? (
+                            ]
-            <Timeline.Item>
+                            : []),
+                        ...(data.date_exported
+                            ? [
+                                {
+                                    key: "date_exported",
+                                    label: (
+                                        <>
                                             <label>{t("jobs.fields.date_exported")}: </label>
                                             <DateTimeFormatter>{data.date_exported}</DateTimeFormatter>
-            </Timeline.Item>
+                                        </>
-          ) : null}
+                                    ),
-        </Timeline>
+                                },
-      ) : null}
+                            ]
+                            : []),
+                    ]}
+                />) : null}
         </CardTemplate>
     );
 }

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

@@ -1,16 +1,16 @@
-import { useQuery } from "@apollo/client";
+import {useQuery} from "@apollo/client";
-import { Col, Divider, Row, Skeleton, Space, Timeline, Typography } from "antd";
+import {Col, Divider, Row, Skeleton, Space, Timeline, Typography} from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
-import { GET_JOB_LINE_ORDERS } from "../../graphql/jobs.queries";
+import {GET_JOB_LINE_ORDERS} from "../../graphql/jobs.queries";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateFormatter } from "../../utils/DateFormatter";
+import {DateFormatter} from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
 
-export default function JobLinesExpander({ jobline, jobid }) {
+export default function JobLinesExpander({jobline, jobid}) {
-  const { t } = useTranslation();
+    const {t} = useTranslation();
-  const { loading, error, data } = useQuery(GET_JOB_LINE_ORDERS, {
+    const {loading, error, data} = useQuery(GET_JOB_LINE_ORDERS, {
         fetchPolicy: "network-only",
         nextFetchPolicy: "network-only",
         variables: {
@@ -18,8 +18,8 @@ export default function JobLinesExpander({ jobline, jobid }) {
         },
     });
 
-  if (loading) return <Skeleton />;
+    if (loading) return <Skeleton/>;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+    if (error) return <AlertComponent message={error.message} type="error"/>;
 
     return (
         <Row>
@@ -27,11 +27,13 @@ export default function JobLinesExpander({ jobline, jobid }) {
                 <Typography.Title level={4}>
                     {t("parts_orders.labels.parts_orders")}
                 </Typography.Title>
-        <Timeline>
+                <Timeline
-          {data.parts_order_lines.length > 0 ? (
+                    items={
-            data.parts_order_lines.map((line) => (
+                        data.parts_order_lines.length > 0
-              <Timeline.Item key={line.id}>
+                            ? data.parts_order_lines.map((line) => ({
-                <Space split={<Divider type="vertical" />} wrap>
+                                key: line.id,
+                                label: (
+                                    <Space split={<Divider type="vertical"/>} wrap>
                                         <Link
                                             to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
                                         >
@@ -40,21 +42,24 @@ export default function JobLinesExpander({ jobline, jobid }) {
                                         <DateFormatter>{line.parts_order.order_date}</DateFormatter>
                                         {line.parts_order.vendor.name}
                                     </Space>
-              </Timeline.Item>
+                                ),
-            ))
+                            }))
-          ) : (
+                            : [
-            <Timeline.Item>
+                                {
-              {t("parts_orders.labels.notyetordered")}
+                                    key: "no-orders",
-            </Timeline.Item>
+                                    label: t("parts_orders.labels.notyetordered"),
-          )}
+                                },
-        </Timeline>
+                            ]
-      </Col>
+                    }
+                /> </Col>
             <Col md={24} lg={12}>
                 <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
-        <Timeline>
+                <Timeline
-          {data.billlines.length > 0 ? (
+                    items={
-            data.billlines.map((line) => (
+                        data.billlines.length > 0
-              <Timeline.Item key={line.id}>
+                            ? data.billlines.map((line) => ({
+                                key: line.id,
+                                label: (
                                     <Row wrap>
                                         <Col span={4}>
                                             <Link
@@ -64,30 +69,26 @@ export default function JobLinesExpander({ jobline, jobid }) {
                                             </Link>
                                         </Col>
                                         <Col span={4}>
-                    <span>
+                                            <span>{`${t("billlines.fields.actual_price")}: `}<CurrencyFormatter>{line.actual_price}</CurrencyFormatter></span>
-                      {`${t("billlines.fields.actual_price")}: `}
-                      <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
-                    </span>
                                         </Col>
                                         <Col span={4}>
-                    <span>
+                                            <span>{`${t("billlines.fields.actual_cost")}: `}<CurrencyFormatter>{line.actual_cost}</CurrencyFormatter></span>
-                    {`${t("billlines.fields.actual_cost")}: `}
-                      <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
-                    </span>
                                         </Col>
                                         <Col span={4}>
                                             <DateFormatter>{line.bill.date}</DateFormatter>
                                         </Col>
                                         <Col span={4}> {line.bill.vendor.name}</Col>
                                     </Row>
-              </Timeline.Item>
+                                ),
-            ))
+                            }))
-          ) : (
+                            : [
-            <Timeline.Item>
+                                {
-              {t("parts_orders.labels.notyetordered")}
+                                    key: "no-orders",
-            </Timeline.Item>
+                                    label: t("parts_orders.labels.notyetordered"),
-          )}
+                                },
-        </Timeline>
+                            ]
+                    }
+                />
             </Col>
         </Row>
     );

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

@@ -13,12 +13,11 @@ import {
   Button,
   Dropdown,
   Input,
-  Menu,
-  PageHeader,
   Space,
   Table,
   Tag,
 } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -43,7 +42,7 @@ import _ from "lodash";
 import JobCreateIOU from "../job-create-iou/job-create-iou.component";
 import JobLinesExpander from "./job-lines-expander.component";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -410,16 +409,17 @@ export function JobLinesComponent({
     }
   };
 
-  const markMenu = (
+  const markMenu = {
-    <Menu onClick={handleMark}>
+    onClick: handleMark,
-      <Menu.Item key="PAA">{t("joblines.fields.part_types.PAA")}</Menu.Item>
+    items: [
-      <Menu.Item key="PAN">{t("joblines.fields.part_types.PAN")}</Menu.Item>
+      { key: "PAA", label: t("joblines.fields.part_types.PAA") },
-      <Menu.Item key="PAL">{t("joblines.fields.part_types.PAL")}</Menu.Item>
+      { key: "PAN", label: t("joblines.fields.part_types.PAN") },
-      <Menu.Item key="PAS">{t("joblines.fields.part_types.PAS")}</Menu.Item>
+      { key: "PAL", label: t("joblines.fields.part_types.PAL") },
-      <Menu.Divider />
+      { key: "PAS", label: t("joblines.fields.part_types.PAS") },
-      <Menu.Item key="clear">{t("general.labels.clear")}</Menu.Item>
+      { type: 'divider' },
-    </Menu>
+      { key: "clear", label: t("general.labels.clear") },
-  );
+    ]
+  };
 
   return (
     <div>
@@ -466,7 +466,7 @@ export function JobLinesComponent({
                       vendorid: bodyshop.inhousevendorid,
                       invoice_number: "ih",
                       isinhouse: true,
-                      date: new moment(),
+                      date: new dayjs(),
                       total: 0,
                       billlines: selectedLines.map((p) => {
                         return {
@@ -549,7 +549,7 @@ export function JobLinesComponent({
             >
               <FilterFilled /> {t("jobs.actions.filterpartsonly")}
             </Button>
-            <Dropdown overlay={markMenu} trigger={["click"]}>
+            <Dropdown menu={markMenu} trigger={["click"]}>
               <Button>{t("jobs.actions.mark")}</Button>
             </Dropdown>
             <Button