This marks the Antd upgrades, it is not in a stable state.

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/craco.config.js

@@ -2,76 +2,92 @@
 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 {getLoader, loaderByName} = require("@craco/craco");
+const AntdMomentWebpackPlugin = require("@ant-design/moment-webpack-plugin");
+const {writeFile} = require("fs");
+
+const {defaultAlgorithm, defaultSeed} = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
+const v4Token = convertLegacyToken(mapToken);
+
 
 module.exports = {
-  plugins: [
+    plugins: [
-    {
+        {
-      plugin: SentryWebpackPlugin,
+            plugin: SentryWebpackPlugin,
-      options: {
+            options: {
-        // sentry-cli configuration
+                // sentry-cli configuration
-        authToken:
+                authToken:
-          "6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
+                    "6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
-        org: "snapt-software",
+                org: "snapt-software",
-        project: "imexonline",
+                project: "imexonline",
-        release: process.env.REACT_APP_GIT_SHA,
+                release: process.env.REACT_APP_GIT_SHA,
 
-        // webpack-specific configuration
+                // webpack-specific configuration
-        include: ".",
+                include: ".",
-        ignore: ["node_modules", "webpack.config.js"],
+                ignore: ["node_modules", "webpack.config.js"],
-      },
-    },
-    {
-      plugin: CracoLessPlugin,
-      options: {
-        lessLoaderOptions: {
-          lessOptions: {
-            modifyVars: {
-              ...(process.env.NODE_ENV === "development"
-                ? { "@primary-color": "#a51d1d" }
-                : {
-                    //"@primary-color": "#1DA57A"
-                  }),
-              // "@primary-color": " #1890ff", // primary color for all components
-              // "@link-color": "#1890ff", // link color
-              // "@success-color": "#52c41a", // success state color
-              // "@warning-color": "#faad14", // warning state color
-              // "@error-color": "#f5222d", // error state color
-              // "@font-size-base": "14px", // major text font size
-              // " @heading-color": "rgba(0, 0, 0, 0.85)", // heading text color
-              // "@text-color": "rgba(0, 0, 0, 0.65)", // major text color
-              // "@text-color-secondary": "rgba(0, 0, 0, 0.45)", // secondary text color
-              // "@disabled-color": "rgba(0, 0, 0, 0.25)", // disable state color
-              // "@border-radius-base": "2px", // major border radius
-              // "@border-color-base": "#d9d9d9", // major border color
-              // "@box-shadow-base":
-              //   "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers }",
             },
-            javascriptEnabled: true,
-          },
         },
-      },
+        {
-    },
+            plugin: CracoLessPlugin,
-  ],
+            options: {
-  webpack: {
+                lessLoaderOptions: {
-    configure: (webpackConfig) => ({
+                    lessOptions: {
-      ...webpackConfig,
+                        modifyVars: {
-      // Required for Dev Server
+                            ...v4Token,
-      devServer: {
+                            ...(process.env.NODE_ENV === "development"
-        allowedHosts: 'all',
+                                ? {"colorPrimary": "#a51d1d"}
-      },
+                                : {
-      optimization: {
+                                    //"@primary-color": "#1DA57A"
-        ...webpackConfig.optimization,
+                                }),
-        // Workaround for CircleCI bug caused by the number of CPUs shown
+                            // "@primary-color": " #1890ff", // primary color for all components
-        // https://github.com/facebook/create-react-app/issues/8320
+                            // "@link-color": "#1890ff", // link color
-        minimizer: webpackConfig.optimization.minimizer.map((item) => {
+                            // "@success-color": "#52c41a", // success state color
-          if (item instanceof TerserPlugin) {
+                            // "@warning-color": "#faad14", // warning state color
-            item.options.parallel = 2;
+                            // "@error-color": "#f5222d", // error state color
-          }
+                            // "@font-size-base": "14px", // major text font size
+                            // " @heading-color": "rgba(0, 0, 0, 0.85)", // heading text color
+                            // "@text-color": "rgba(0, 0, 0, 0.65)", // major text color
+                            // "@text-color-secondary": "rgba(0, 0, 0, 0.45)", // secondary text color
+                            // "@disabled-color": "rgba(0, 0, 0, 0.25)", // disable state color
+                            // "@border-radius-base": "2px", // major border radius
+                            // "@border-color-base": "#d9d9d9", // major border color
+                            // "@box-shadow-base":
+                            //   "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers }",
+                        },
+                        javascriptEnabled: true,
+                    },
+                },
+            },
+        },
+    ],
+    webpack: {
+        configure: (webpackConfig) => {
+            // config.plugins.push(new AntdMomentWebpackPlugin());
+            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
+                    // https://github.com/facebook/create-react-app/issues/8320
+                    minimizer: webpackConfig.optimization.minimizer.map((item) => {
+                        if (item instanceof TerserPlugin) {
+                            item.options.parallel = 2;
+                        }
 
-          return item;
+                        return item;
-        }),
+                    }),
-      },
+                },
-    }),
+            };
-  },
+        },
-  devtool: "source-map",
+    },
+    devtool: "source-map",
 };

client/package.json

@@ -4,44 +4,46 @@
   "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": "^4.2.1",
     "@jsreport/browser-client": "^3.1.0",
     "@sentry/react": "^7.86.0",
     "@sentry/tracing": "^7.86.0",
-    "@splitsoftware/splitio-react": "^1.8.1",
+    "@splitsoftware/splitio-react": "^1.10.2",
-    "@tanem/react-nprogress": "^5.0.8",
+    "@tanem/react-nprogress": "^5.0.51",
-    "antd": "^4.24.8",
+    "antd": "^5.12.2",
     "apollo-link-logger": "^2.0.1",
-    "axios": "^1.3.4",
+    "axios": "^1.3.6",
     "craco-less": "^3.0.1",
     "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": "^10.7.1",
     "graphql": "^16.6.0",
     "i18next": "^23.7.9",
-    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-browser-languagedetector": "^7.0.2",
-    "jsoneditor": "^9.9.0",
+    "jsoneditor": "^9.10.4",
     "jsreport-browser-client-dist": "^1.3.0",
-    "libphonenumber-js": "^1.10.21",
+    "libphonenumber-js": "^1.10.51",
     "logrocket": "^7.0.0",
     "markerjs2": "^2.31.4",
     "moment-business-days": "^1.2.0",
-    "moment-timezone": "^0.5.41",
+    "moment-timezone": "^0.5.43",
     "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": "^8.1.0",
     "rc-queue-anim": "^2.0.0",
     "rc-scroll-anim": "^2.7.6",
     "react": "^18.2.0",
-    "react-big-calendar": "^1.6.8",
+    "react-big-calendar": "^1.8.5",
     "react-color": "^2.19.3",
     "react-cookie": "^6.1.1",
     "react-dom": "^18.2.0",
@@ -51,25 +53,26 @@
     "react-i18next": "^13.5.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": "^9.0.4",
-    "react-resizable": "^3.0.4",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "^6.20.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": "^5.0.0",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.2.2",
+    "redux-saga": "^1.2.3",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.0.1",
     "sass": "^1.58.3",
-    "socket.io-client": "^4.6.1",
+    "socket.io-client": "^4.7.2",
     "styled-components": "^6.1.1",
     "subscriptions-transport-ws": "^0.11.0",
+    "terser-webpack-plugin": "^5.3.9",
     "web-vitals": "^3.5.0",
     "workbox-background-sync": "^7.0.0",
     "workbox-broadcast-update": "^7.0.0",
@@ -119,12 +122,14 @@
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
+    "@ant-design/moment-webpack-plugin": "^0.0.4",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@sentry/webpack-plugin": "^2.10.2",
     "@testing-library/cypress": "^10.0.1",
     "cypress": "^13.6.1",
-    "eslint-plugin-cypress": "^2.12.1",
+    "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/components/bill-detail-edit/bill-detail-edit-component.jsx

@@ -1,5 +1,5 @@
 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 queryString from "query-string";
 import React, {useState} from "react";
@@ -21,6 +21,7 @@ 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,

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

@@ -1,6 +1,7 @@
 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 {PageHeader} from "@ant-design/pro-layout";
 import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,6 +1,7 @@
 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, Menu, Space, notification } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import i18next from "i18next";
 import _ from "lodash";
 import moment from "moment";

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

@@ -14,11 +14,11 @@ import {
   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";

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

@@ -1,4 +1,6 @@
-import { Button, Form, notification, PageHeader, Popconfirm } from "antd";
+import { Button, Form, notification, Popconfirm } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
+
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useMutation } from "@apollo/client";

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

@@ -7,11 +7,12 @@ import {
   Drawer,
   Grid,
   Input,
-  PageHeader,
   Popconfirm,
   Space,
   Table,
 } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
+
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,4 +1,5 @@
-import { Button, Form, Input, PageHeader, Space } from "antd";
+import { Button, Form, Input, Space } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";

client/src/components/print-center-speed-print/print-center-speed-print.component.jsx

@@ -1,4 +1,6 @@
-import { Button, List, PageHeader } from "antd";
+import { Button, List } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
+
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

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

@@ -1,7 +1,8 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
 import Board, { moveCard } from "@asseinfo/react-kanban";
-import { Button, Grid, notification, PageHeader, Space, Statistic } from "antd";
+import { Button, Grid, notification, Space, Statistic } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

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

@@ -1,6 +1,7 @@
 import { PrinterFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Descriptions, Drawer, PageHeader, Space } from "antd";
+import { Button, Descriptions, Drawer, Space } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";

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

@@ -5,11 +5,11 @@ import {
   Dropdown,
   Input,
   Menu,
-  PageHeader,
   Space,
   Statistic,
   Table,
 } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import React, { useMemo, useState } from "react";
 import ReactDragListView from "react-drag-listview";
 import { useTranslation } from "react-i18next";

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

@@ -4,11 +4,11 @@ import {
   Card,
   Checkbox,
   Col,
-  PageHeader,
   Row,
   Select,
   Space,
 } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import { t } from "i18next";
 import React, { useMemo } from "react";
 import useLocalStorage from "../../utils/useLocalStorage";

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

@@ -1,6 +1,7 @@
 import { PrinterFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Divider, Drawer, Grid, PageHeader, Tabs } from "antd";
+import { Button, Divider, Drawer, Grid, Tabs } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";

client/src/components/time-ticket-modal/time-ticket-modal.container.jsx

@@ -1,5 +1,6 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Button, Form, Modal, PageHeader, Space, notification } from "antd";
+import { Button, Form, Modal, Space, notification } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import moment from "moment";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { Button, Form, notification, PageHeader, Popconfirm } from "antd";
+import { Button, Form, notification, Popconfirm } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import { useMutation } from "@apollo/client";
 import VehicleDetailFormComponent from "./vehicle-detail-form.component";
 import { useTranslation } from "react-i18next";

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

@@ -7,10 +7,10 @@ import {
   Form,
   Input,
   InputNumber,
-  PageHeader,
   Space,
   Switch,
 } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { CHECK_VENDOR_NAME } from "../../graphql/vendors.queries";

client/src/index.js

@@ -1,6 +1,6 @@
 import * as Sentry from "@sentry/react";
 //import "antd/dist/antd.css";
-import "antd/dist/antd.less";
+// import "antd/dist/antd.less";
 import Dinero from "dinero.js";
 import React from "react";
 import ReactDOM from "react-dom/client";

client/src/landing/less/custom.less

@@ -1,4 +1,4 @@
-@import "~antd/lib/style/themes/default.less";
+//@import "~antd/lib/style/themes/default.less";
 
 @line-color: #e9e9e9;
 
@@ -17,8 +17,6 @@
 
 @animate-duration: .45s;
 
-/* 详细页图片或框框的样式;
-*/
 .page-shadow() {
   box-shadow: 0 5px 8px @shadow-color;
 }

client/src/pages/contract-create/contract-create.page.component.jsx

@@ -1,4 +1,5 @@
-import { Button, Col, PageHeader, Row, Space, Form, Switch } from "antd";
+import { Button, Col, Row, Space, Form, Switch } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 
 import React from "react";
 import { useTranslation } from "react-i18next";

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

@@ -4,11 +4,12 @@ import {
   Dropdown,
   Form,
   Menu,
-  PageHeader,
   Row,
   Space,
   Typography,
 } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
+
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

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

@@ -1,4 +1,6 @@
-import { Button, PageHeader } from "antd";
+import { Button } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
+
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

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

@@ -8,7 +8,6 @@ import {
   Form,
   Input,
   InputNumber,
-  PageHeader,
   Popconfirm,
   Row,
   Select,
@@ -18,6 +17,8 @@ import {
   Typography,
   notification,
 } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
+
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

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

@@ -1,4 +1,6 @@
-import { Button, PageHeader, Result, Space, Steps } from "antd";
+import { Button, Result, Space, Steps } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
+
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";

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

@@ -12,11 +12,12 @@ import {
   Button,
   Divider,
   Form,
-  PageHeader,
   Space,
   Tabs,
   notification,
 } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
+
 import Axios from "axios";
 import moment from "moment";
 import queryString from "query-string";

client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx

@@ -26,7 +26,7 @@ export function VehicleDetailContainer({
   addRecentItem,
   setSelectedHeader,
 }) {
-  const { vehId } = useParams;
+  const { vehId } = useParams();
   const { t } = useTranslation();
 
   const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, {
@@ -85,8 +85,7 @@ export function VehicleDetailContainer({
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
-
+  if (!data.vehicles_by_pk) return <NotFound />;
-  if (!!!data.vehicles_by_pk) return <NotFound />;
   return (
     <VehicleDetailComponent vehicle={data.vehicles_by_pk} refetch={refetch} />
   );