IO-2395 Adjust Payment Number Label

Release/2023 09 01

.circleci/config.yml

@@ -0,0 +1,180 @@
+version: 2.1
+orbs:
+  #snyk: snyk/snyk@0.0.8
+  #cypress: cypress-io/cypress@1.23.0
+  aws-s3: circleci/aws-s3@2.0.0
+  eb: circleci/aws-elastic-beanstalk@1.0.2
+  jira: circleci/jira@1.3.1
+jobs:
+  api-deploy:
+    docker:
+      - image: "cimg/base:stable"
+    steps:
+      - checkout
+      - eb/setup
+      - run:
+          command: |
+            eb init imex-online-production-api -r ca-central-1 -p "Node.js 16 running on 64bit Amazon Linux 2"
+            eb status --verbose
+            eb deploy
+            eb status
+      - jira/notify
+
+  hasura-migrate:
+    docker:
+      - image: cimg/node:16.15.0
+    parameters:
+      secret:
+        type: string
+        default: $HASURA_PROD_SECRET
+    working_directory: ~/repo/hasura
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Execute migration
+          command: |
+            npm install hasura-cli -g
+            hasura migrate apply --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
+            hasura metadata apply --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
+            hasura metadata reload --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
+
+  app-build:
+    docker:
+      - image: cimg/node:16.15.0
+
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+
+      - restore_cache:
+          name: Restore Yarn Package Cache
+          keys:
+            - yarn-packages-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install Dependencies
+          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - save_cache:
+          name: Save Yarn Package Cache
+          key: yarn-packages-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
+
+      - run: yarn run build
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://imex-online-production/"
+      - jira/notify
+
+  test-hasura-migrate:
+    docker:
+      - image: cimg/node:16.15.0
+    parameters:
+      secret:
+        type: string
+        default: $HASURA_TEST_SECRET
+    working_directory: ~/repo/hasura
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Execute migration
+          command: |
+            npm install hasura-cli -g
+            echo ${HASURA_TEST_SECRET}
+            hasura migrate apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
+            hasura metadata apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
+            hasura metadata reload --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
+
+  test-app-build:
+    docker:
+      - image: cimg/node:16.15.0
+
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+
+      - restore_cache:
+          name: Restore Yarn Package Cache
+          keys:
+            - yarn-packages-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install Dependencies
+          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - save_cache:
+          name: Save Yarn Package Cache
+          key: yarn-packages-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
+
+      - run: yarn run build:test
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://imex-online-test/"
+      - jira/notify
+
+  admin-app-build:
+    docker:
+      - image: cimg/node:16.15.0
+
+    working_directory: ~/repo/admin
+
+    steps:
+      - checkout:
+          path: ~/repo
+
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+      - run: npm i
+
+      - save_cache:
+          paths:
+            - node_modules
+            - ~/.npm
+            - ~/.cache
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run: npm run build
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://adm.imex.online/"
+
+workflows:
+  deploy_and_build:
+    jobs:
+      - api-deploy:
+          filters:
+            branches:
+              only: master
+      - app-build:
+          filters:
+            branches:
+              only: master
+      - hasura-migrate:
+          secret: ${HASURA_PROD_SECRET}
+          filters:
+            branches:
+              only: master
+      - test-app-build:
+          filters:
+            branches:
+              only: test
+      - test-hasura-migrate:
+          secret: ${HASURA_TEST_SECRET}
+          filters:
+            branches:
+              only: test
+      #- admin-app-build:
+      #filters:
+      #branches:
+      #only: master

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "env": {
+    "es6": true,
+    "node": true
+  },
+  "extends": "eslint:recommended",
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": "off"
+  },
+  "settings": {}
+}

.gitignore

@@ -113,3 +113,8 @@ firebase/.env
 !.elasticbeanstalk/*.cfg.yml
 !.elasticbeanstalk/*.global.yml
 logs/oAuthClient-log.log
+
+
+.node-persist/**
+
+/*.env.*

README.MD

@@ -1,14 +1,3 @@
-Yarn Dependency Management:
-To force upgrades for some packages:
-yarn upgrade-interactive --latest
-
-To Start Hasura CLI:
-npx hasura console
-
-Migrating to Staging:
-npx hasura migrate apply --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
-npx hasura migrate apply --endpoint https://db.test.bodyshop.app/ --admin-secret 'Test-ImEXOnlineBySnaptSoftware!'
-
 NGROK TEsting:
 ./ngrok.exe http http://localhost:4000 -host-header="localhost:4000"
 
@@ -19,3 +8,6 @@ npx deadfile ./src/index.js --exclude build templates
 hasura migrate create "Init" --from-server --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
 hasura migrate apply --version "1620771761757" --skip-execution --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
 hasura migrate status --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
+
+Generate the license file: 
+$ generate-license-file --input package.json --output third-party-licenses.txt --overwrite

admin/README.md

@@ -1,68 +0,0 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `yarn build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

admin/package.json

@@ -1,47 +0,0 @@
-{
-  "name": "admin",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@apollo/client": "^3.3.15",
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.5",
-    "@types/prop-types": "^15.7.3",
-    "apollo-boost": "^0.4.9",
-    "apollo-link-context": "^1.0.20",
-    "apollo-link-logger": "^2.0.0",
-    "dotenv": "^8.2.0",
-    "firebase": "^8.4.1",
-    "graphql": "^15.4.0",
-    "prop-types": "^15.7.2",
-    "ra-data-hasura-graphql": "^0.1.13",
-    "react": "^17.0.1",
-    "react-admin": "^3.14.4",
-    "react-dom": "^17.0.1",
-    "react-icons": "^4.2.0",
-    "react-scripts": "4.0.3",
-    "sass": "^1.32.10"
-  },
-  "scripts": {
-    "start": "set PORT=3001 && react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

admin/public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>ImEX Online - ADMIN</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

admin/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

admin/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

admin/src/App/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

admin/src/App/App.js

@@ -1,12 +0,0 @@
-import React from "react";
-import AdminRoot from "../components/admin-root/admin-root.component";
-import "./App.css";
-function App() {
-  return (
-    <div className="App">
-      <AdminRoot />
-    </div>
-  );
-}
-
-export default App;

admin/src/App/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

admin/src/Assets/logo.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>

admin/src/components/admin-root/admin-root.component.jsx

@@ -1,283 +0,0 @@
-import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
-import { ApolloLink } from "apollo-boost";
-import { setContext } from "apollo-link-context";
-import { HttpLink } from "apollo-link-http";
-import apolloLogger from "apollo-link-logger";
-import buildHasuraProvider from "ra-data-hasura-graphql";
-import React, { Component } from "react";
-import {
-  Admin,
-  EditGuesser,
-  ListGuesser,
-  Resource,
-  ShowGuesser,
-} from "react-admin";
-import { FaFileInvoiceDollar } from "react-icons/fa";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import { auth } from "../../firebase/admin-firebase-utils";
-import authProvider from "../auth-provider/auth-provider";
-import JoblinesCreate from "../joblines/joblines.create";
-import JoblinesEdit from "../joblines/joblines.edit";
-import JoblinesList from "../joblines/joblines.list";
-import JoblinesShow from "../joblines/joblines.show";
-import JobsCreate from "../jobs/jobs.create";
-import JobsEdit from "../jobs/jobs.edit";
-import JobsList from "../jobs/jobs.list";
-import JobsShow from "../jobs/jobs.show";
-
-const httpLink = new HttpLink({
-  uri: process.env.REACT_APP_GRAPHQL_ENDPOINT,
-  headers: {
-    "x-hasura-admin-secret": `Dev-BodyShopApp!`,
-    // 'Authorization': `Bearer xxxx`,
-  },
-});
-
-const authLink = setContext((_, { headers }) => {
-  return (
-    auth.currentUser &&
-    auth.currentUser.getIdToken().then((token) => {
-      if (token) {
-        return {
-          headers: {
-            ...headers,
-            authorization: token ? `Bearer ${token}` : "",
-          },
-        };
-      } else {
-        return { headers };
-      }
-    })
-  );
-});
-
-const middlewares = [];
-if (process.env.NODE_ENV === "development") {
-  middlewares.push(apolloLogger);
-}
-
-middlewares.push(authLink.concat(httpLink));
-
-const client = new ApolloClient({
-  link: ApolloLink.from(middlewares),
-  cache: new InMemoryCache(),
-});
-
-// const client = new ApolloClient({
-//   uri: process.env.REACT_APP_GRAPHQL_ENDPOINT,
-//   cache: new InMemoryCache(),
-//   headers: {
-//     "x-hasura-admin-secret": `Dev-BodyShopApp!`,
-//     // 'Authorization': `Bearer xxxx`,
-//   },
-// });
-
-class AdminRoot extends Component {
-  constructor() {
-    super();
-    this.state = { dataProvider: null };
-  }
-  componentDidMount() {
-    buildHasuraProvider({
-      client,
-    }).then((dataProvider) => this.setState({ dataProvider }));
-  }
-
-  render() {
-    const { dataProvider } = this.state;
-
-    if (!dataProvider) {
-      return (
-        <div>
-          <CircularProgress />
-        </div>
-      );
-    }
-
-    return (
-      <ApolloProvider client={client}>
-        <Admin dataProvider={dataProvider} authProvider={authProvider}>
-          <Resource
-            icon={FaFileInvoiceDollar}
-            name="jobs"
-            list={JobsList}
-            edit={JobsEdit}
-            create={JobsCreate}
-            show={JobsShow}
-          />
-          <Resource
-            name="joblines"
-            list={JoblinesList}
-            edit={JoblinesEdit}
-            create={JoblinesCreate}
-            show={JoblinesShow}
-          />
-          <Resource
-            name="bodyshops"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="owners"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="vehicles"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="appointments"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="available_jobs"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="cccontracts"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="conversations"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="counters"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="courtesycars"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="csi"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="csiquestions"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="documents"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="employees"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="invoicelines"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="invoices"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="job_conversations"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="masterdata"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="messages"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="notes"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="parts_order_lines"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="parts_orders"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="payments"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="scoreboard"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="templates"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="timetickets"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="users"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-          <Resource
-            name="vendors"
-            list={ListGuesser}
-            edit={EditGuesser}
-            show={ShowGuesser}
-          />
-        </Admin>
-      </ApolloProvider>
-    );
-  }
-}
-
-export default AdminRoot;

admin/src/components/auth-provider/auth-provider.js

@@ -1,39 +0,0 @@
-import { auth, getCurrentUser } from "../../firebase/admin-firebase-utils";
-
-const authProvider = {
-  login: async ({ username, password }) => {
-    console.log(username, password);
-    try {
-      const { user } = await auth.signInWithEmailAndPassword(
-        username,
-        password
-      );
-      const token = await user.getIdToken();
-      localStorage.setItem("token", token);
-      return Promise.resolve();
-    } catch (error) {
-      console.log("error", error);
-      return Promise.reject();
-    }
-  },
-  logout: async (params) => {
-    await auth.signOut();
-    localStorage.removeItem("token");
-    return Promise.resolve();
-  },
-  checkAuth: async (params) => {
-    const user = await getCurrentUser();
-    if (!!user) {
-      return Promise.resolve();
-    } else {
-      return Promise.reject();
-    }
-  },
-  checkError: (error) => {
-    return Promise.resolve();
-  },
-  getPermissions: (params) => {
-    return Promise.resolve();
-  },
-};
-export default authProvider;

admin/src/components/joblines/joblines.create.jsx

@@ -1,26 +0,0 @@
-import React from "react";
-import {
-  Create,
-
-
-
-  NumberInput, SimpleForm,
-  TextInput
-} from "react-admin";
-
-const JoblinesCreate = (props) => (
-  <Create {...props}>
-    <SimpleForm>
-      <TextInput source="line_ref" />
-      <TextInput source="line_ind" />
-      <NumberInput source="db_price" />
-      <NumberInput source="act_price" />
-      <NumberInput source="part_qty" />
-      <NumberInput source="mod_lb_hrs" />
-      <TextInput source="mod_lbr_type" />
-      <TextInput source="lbr_op" />
-    </SimpleForm>
-  </Create>
-);
-
-export default JoblinesCreate;

admin/src/components/joblines/joblines.edit.jsx

@@ -1,70 +0,0 @@
-import React from "react";
-import {
-  BooleanInput,
-  DateField,
-  Edit,
-  NumberInput,
-  SimpleForm,
-  TextInput,
-} from "react-admin";
-
-const JoblinesEdit = (props) => (
-  <Edit {...props}>
-    <SimpleForm>
-      <TextInput source="id" />
-      <DateField showTime source="created_at" />
-      <DateField showTime source="updated_at" />
-      <TextInput source="jobid" />
-      <NumberInput source="unq_seq" />
-      <NumberInput source="line_ind" />
-      <TextInput source="line_desc" />
-      <TextInput source="part_type" />
-      <TextInput source="oem_partno" />
-      <TextInput source="est_seq" />
-      <TextInput source="db_ref" />
-      <TextInput source="line_ref" />
-      <BooleanInput source="tax_part" />
-      <NumberInput source="db_price" />
-      <NumberInput source="act_price" />
-      <NumberInput source="part_qty" />
-      <TextInput source="alt_partno" />
-      <TextInput source="mod_lbr_ty" />
-      <NumberInput source="db_hrs" />
-      <NumberInput source="mod_lb_hrs" />
-      <TextInput source="lbr_op" />
-      <NumberInput source="lbr_amt" />
-      <BooleanInput source="glass_flag" />
-      <TextInput source="price_inc" />
-      <TextInput source="alt_part_i" />
-      <TextInput source="price_j" />
-      <TextInput source="cert_part" />
-      <TextInput source="alt_co_id" />
-      <TextInput source="alt_overrd" />
-      <TextInput source="alt_partm" />
-      <TextInput source="prt_dsmk_p" />
-      <TextInput source="prt_dsmk_m" />
-      <TextInput source="lbr_inc" />
-      <TextInput source="lbr_hrs_j" />
-      <TextInput source="lbr_typ_j" />
-      <TextInput source="lbr_op_j" />
-      <TextInput source="paint_stg" />
-      <TextInput source="paint_tone" />
-      <TextInput source="lbr_tax" />
-      <NumberInput source="misc_amt" />
-      <TextInput source="misc_sublt" />
-      <TextInput source="misc_tax" />
-      <TextInput source="bett_type" />
-      <NumberInput source="bett_pctg" />
-      <NumberInput source="bett_amt" />
-      <TextInput source="bett_tax" />
-      <TextInput source="op_code_desc" />
-      <TextInput source="status" />
-      <TextInput source="removed" />
-      <NumberInput source="line_no" />
-      <TextInput source="notes" />
-      <TextInput source='"location"' />
-    </SimpleForm>
-  </Edit>
-);
-
-export default JoblinesEdit;

admin/src/components/joblines/joblines.list.jsx

@@ -1,29 +0,0 @@
-import React from "react";
-import {
-  Datagrid, List,
-
-
-  NumberField,
-
-  ReferenceField, TextField
-} from "react-admin";
-
-const JoblinesList = (props) => (
-  <List {...props}>
-    <Datagrid rowClick="edit">
-      <ReferenceField source="jobid" reference="jobs">
-        <TextField source="ro_number" />
-      </ReferenceField>
-      <TextField source="line_ref" />
-      <TextField source="line_ind" />
-      <NumberField source="db_price" />
-      <NumberField source="act_price" />
-      <NumberField source="part_qty" />
-      <NumberField source="mod_lb_hrs" />
-      <TextField source="mod_lbr_type" />
-      <TextField source="lbr_op" />
-    </Datagrid>
-  </List>
-);
-
-export default JoblinesList;

admin/src/components/joblines/joblines.show.jsx

@@ -1,24 +0,0 @@
-import React from "react";
-import {
-  NumberInput, Show,
-
-  SimpleShowLayout,
-  TextInput
-} from "react-admin";
-
-const JoblinesShow = (props) => (
-  <Show {...props}>
-    <SimpleShowLayout>
-      <TextInput source="line_ref" />
-      <TextInput source="line_ind" />
-      <NumberInput source="db_price" />
-      <NumberInput source="act_price" />
-      <NumberInput source="part_qty" />
-      <NumberInput source="mod_lb_hrs" />
-      <TextInput source="mod_lbr_type" />
-      <TextInput source="lbr_op" />
-    </SimpleShowLayout>
-  </Show>
-);
-
-export default JoblinesShow;

admin/src/components/jobs/jobs.create.jsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { Create, EmailField, SimpleForm, TextInput } from "react-admin";
-
-const JobsCreate = (props) => (
-  <Create {...props}>
-    <SimpleForm>
-      <TextInput source="ro_number" />
-
-      <TextInput source="ownr_fn" />
-      <TextInput source="ownr_ln" />
-      <TextInput source="converted" />
-      <EmailField source="ownr_ea" />
-    </SimpleForm>
-  </Create>
-);
-
-export default JobsCreate;

admin/src/components/jobs/jobs.edit.jsx

@@ -1,316 +0,0 @@
-import React from "react";
-//@ts-ignore
-import {
-  AutocompleteInput,
-  BooleanInput,
-  Edit,
-  FormTab,
-  NumberInput,
-  ReferenceInput,
-  SelectInput,
-  SimpleForm,
-  TabbedForm,
-  TextInput,
-} from "react-admin";
-
-const JobsEdit = (props) => (
-  <Edit {...props}>
-    <TabbedForm>
-      <FormTab label="Job Info">
-        <SimpleForm>
-          <ReferenceInput label="Shopid" source="shopid" reference="bodyshops">
-            <SelectInput disabled optionText="shopname" />
-          </ReferenceInput>
-          <TextInput source="ro_number" />
-          <ReferenceInput label="Owner ID" source="ownerid" reference="owners">
-            <AutocompleteInput
-              matchSuggestion={(filter, choice) =>
-                choice.ownr_fn &&
-                choice.ownr_fn.toLowerCase().includes(filter.toLowerCase())
-              }
-              optionText={(record) =>
-                `${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
-                  record.ownr_co_nm || ""
-                } (${record.ownr_ph1 || ""})`
-              }
-            />
-          </ReferenceInput>
-          <ReferenceInput
-            label="Vehicle Id"
-            source="vehicleid"
-            reference="vehicles"
-          >
-            <SelectInput optionText="v_vin" />
-          </ReferenceInput>
-          <ReferenceInput label="Shopid" source="shopid" reference="bodyshops">
-            <SelectInput disabled optionText="shopname" />
-          </ReferenceInput>
-          <TextInput source="ro_number" />
-          <ReferenceInput label="Owner ID" source="ownerid" reference="owners">
-            <AutocompleteInput
-              matchSuggestion={(filter, choice) =>
-                choice.ownr_fn &&
-                choice.ownr_fn.toLowerCase().includes(filter.toLowerCase())
-              }
-              optionText={(record) =>
-                `${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
-                  record.ownr_co_nm || ""
-                } (${record.ownr_ph1 || ""})`
-              }
-            />
-          </ReferenceInput>
-          <ReferenceInput
-            label="Vehicle Id"
-            source="vehicleid"
-            reference="vehicles"
-          >
-            <SelectInput optionText="v_vin" />
-          </ReferenceInput>
-          <BooleanInput source="inproduction" />
-          <BooleanInput source="converted" />
-          <TextInput disabled source="id" />
-          <TextInput disabled source="created_at" />
-          <TextInput disabled source="updated_at" />
-        </SimpleForm>
-      </FormTab>
-
-      <FormTab label="Labor Rates">
-        <NumberInput source="labor_rate_id" />
-        <NumberInput source="labor_rate_desc" />
-        <NumberInput source="rate_lab" />
-        <NumberInput source="rate_lad" />
-        <NumberInput source="rate_lae" />
-        <NumberInput source="rate_lar" />
-        <NumberInput source="rate_las" />
-        <NumberInput source="rate_laf" />
-        <NumberInput source="rate_lam" />
-        <NumberInput source="rate_lag" />
-        <NumberInput source="rate_atp" />
-        <NumberInput source="rate_lau" />
-        <NumberInput source="rate_la1" />
-        <NumberInput source="rate_la2" />
-        <NumberInput source="rate_la3" />
-        <NumberInput source="rate_la4" />
-        <NumberInput source="rate_mapa" />
-        <NumberInput source="rate_mash" />
-        <NumberInput source="rate_mahw" />
-        <NumberInput source="rate_ma2s" />
-        <NumberInput source="rate_ma3s" />
-        <NumberInput source="rate_ma2t" />
-        <NumberInput source="rate_mabl" />
-        <NumberInput source="rate_macs" />
-        <NumberInput source="rate_matd" />
-        <NumberInput source="federal_tax_rate" />
-        <NumberInput source="state_tax_rate" />
-        <NumberInput source="local_tax_rate" />
-      </FormTab>
-      <FormTab label="Dates">
-        <TextInput source="scheduled_in" />
-        <TextInput source="actual_in" />
-        <TextInput source="scheduled_completion" />
-        <TextInput source="actual_completion" />
-        <TextInput source="scheduled_delivery" />
-        <TextInput source="actual_delivery" />
-        <TextInput source="invoice_date" />
-        <TextInput source="date_estimated" />
-        <TextInput source="date_open" />
-        <TextInput source="date_scheduled" />
-        <TextInput source="date_invoiced" />
-        <TextInput source="date_exported" />
-      </FormTab>
-      <FormTab label="Insurance info">
-        <TextInput source="est_co_nm" />
-        <TextInput source="est_addr1" />
-        <TextInput source="est_addr2" />
-        <TextInput source="est_city" />
-        <TextInput source="est_st" />
-        <TextInput source="est_zip" />
-        <TextInput source="est_ctry" />
-        <TextInput source="est_ph1" />
-        <TextInput source="est_ea" />
-        <TextInput source="est_ct_ln" />
-        <TextInput source="est_ct_fn" />
-        <TextInput source="regie_number" />
-        <TextInput source="statusid" />
-        <TextInput source="ins_co_id" />
-        <TextInput source="ins_co_nm" />
-        <TextInput source="ins_addr1" />
-        <TextInput source="ins_addr2" />
-        <TextInput source="ins_city" />
-        <TextInput source="ins_st" />
-        <TextInput source="ins_zip" />
-        <TextInput source="ins_ctry" />
-        <TextInput source="ins_ph1" />
-        <TextInput source="ins_ph1x" />
-        <TextInput source="ins_ph2" />
-        <TextInput source="ins_ph2x" />
-        <TextInput source="ins_fax" />
-        <TextInput source="ins_faxx" />
-        <TextInput source="ins_ct_ln" />
-        <TextInput source="ins_ct_fn" />
-        <TextInput source="ins_title" />
-        <TextInput source="ins_ct_ph" />
-        <TextInput source="ins_ct_phx" />
-        <TextInput source="ins_ea" />
-        <TextInput source="ins_memo" />
-        <TextInput source="policy_no" />
-        <TextInput source="ded_amt" />
-        <TextInput source="ded_status" />
-        <TextInput source="asgn_no" />
-        <TextInput source="asgn_date" />
-        <TextInput source="asgn_type" />
-        <TextInput source="clm_no" />
-        <TextInput source="clm_ofc_id" />
-        <TextInput source="agt_co_id" />
-        <TextInput source="agt_co_nm" />
-        <TextInput source="agt_addr1" />
-        <TextInput source="agt_addr2" />
-        <TextInput source="agt_city" />
-        <TextInput source="agt_st" />
-        <TextInput source="agt_zip" />
-        <TextInput source="agt_ctry" />
-        <TextInput source="agt_ph1" />
-        <TextInput source="agt_ph1x" />
-        <TextInput source="agt_ph2" />
-        <TextInput source="agt_ph2x" />
-        <TextInput source="agt_fax" />
-        <TextInput source="agt_faxx" />
-        <TextInput source="agt_ct_ln" />
-        <TextInput source="agt_ct_fn" />
-        <TextInput source="agt_ct_ph" />
-        <TextInput source="agt_ct_phx" />
-        <TextInput source="agt_ea" />
-        <TextInput source="agt_lic_no" />
-        <TextInput source="loss_type" />
-        <TextInput source="loss_desc" />
-        <TextInput source="theft_ind" />
-        <TextInput source="cat_no" />
-        <TextInput source="tlos_ind" />
-        <TextInput source="ciecaid" />
-        <TextInput source="loss_date" />
-        <TextInput source="clm_ofc_nm" />
-        <TextInput source="clm_addr1" />
-        <TextInput source="clm_addr2" />
-        <TextInput source="clm_city" />
-        <TextInput source="clm_st" />
-        <TextInput source="clm_zip" />
-        <TextInput source="clm_ctry" />
-        <TextInput source="clm_ph1" />
-        <TextInput source="clm_ph1x" />
-        <TextInput source="clm_ph2" />
-        <TextInput source="clm_ph2x" />
-        <TextInput source="clm_fax" />
-        <TextInput source="clm_faxx" />
-        <TextInput source="clm_ct_ln" />
-        <TextInput source="clm_ct_fn" />
-        <TextInput source="clm_title" />
-        <TextInput source="clm_ct_ph" />
-        <TextInput source="clm_ct_phx" />
-        <TextInput source="clm_ea" />
-        <TextInput source="payee_nms" />
-        <TextInput source="pay_type" />
-        <TextInput source="pay_date" />
-        <TextInput source="pay_chknm" />
-        <TextInput source="pay_amt" />
-      </FormTab>
-      <FormTab label="Owner Data on Job">
-        <TextInput source="cust_pr" />
-        <TextInput source="insd_ln" />
-        <TextInput source="insd_fn" />
-        <TextInput source="insd_title" />
-        <TextInput source="insd_co_nm" />
-        <TextInput source="insd_addr1" />
-        <TextInput source="insd_addr2" />
-        <TextInput source="insd_city" />
-        <TextInput source="insd_st" />
-        <TextInput source="insd_zip" />
-        <TextInput source="insd_ctry" />
-        <TextInput source="insd_ph1" />
-        <TextInput source="insd_ph1x" />
-        <TextInput source="insd_ph2" />
-        <TextInput source="insd_ph2x" />
-        <TextInput source="insd_fax" />
-        <TextInput source="insd_faxx" />
-        <TextInput source="insd_ea" />
-        <TextInput source="ownr_ln" />
-        <TextInput source="ownr_fn" />
-        <TextInput source="ownr_title" />
-        <TextInput source="ownr_co_nm" />
-        <TextInput source="ownr_addr1" />
-        <TextInput source="ownr_addr2" />
-        <TextInput source="ownr_city" />
-        <TextInput source="ownr_st" />
-        <TextInput source="ownr_zip" />
-        <TextInput source="ownr_ctry" />
-        <TextInput source="ownr_ph1" />
-        <TextInput source="ownr_ph1x" />
-        <TextInput source="ownr_ph2" />
-        <TextInput source="ownr_ph2x" />
-        <TextInput source="ownr_fax" />
-        <TextInput source="ownr_faxx" />
-        <TextInput source="ownr_ea" />
-      </FormTab>
-      <FormTab label="Financial">
-        <TextInput source="clm_total" />
-        <TextInput source="owner_owing" />
-      </FormTab>
-      <FormTab label="Other">
-        <TextInput source="area_of_damage" />
-        <TextInput source="loss_cat" />
-        <TextInput source="special_coverage_policy" />
-        <TextInput source="csr" />
-        <TextInput source="po_number" />
-        <TextInput source="unit_number" />
-        <TextInput source="kmin" />
-        <TextInput source="kmout" />
-        <TextInput source="referral_source" />
-        <TextInput source="selling_dealer" />
-        <TextInput source="servicing_dealer" />
-        <TextInput source="servicing_dealer_contact" />
-        <TextInput source="selling_dealer_contact" />
-        <TextInput source="depreciation_taxes" />
-        <TextInput source="federal_tax_payable" />
-        <TextInput source="other_amount_payable" />
-        <TextInput source="towing_payable" />
-        <TextInput source="storage_payable" />
-        <TextInput source="adjustment_bottom_line" />
-        <TextInput source="tax_pstthr" />
-        <TextInput source="tax_tow_rt" />
-        <TextInput source="tax_sub_rt" />
-        <TextInput source="tax_paint_mat_rt" />
-        <TextInput source="tax_levies_rt" />
-        <TextInput source="tax_prethr" />
-        <TextInput source="tax_thramt" />
-        <TextInput source="tax_str_rt" />
-        <TextInput source="tax_lbr_rt" />
-        <TextInput source="adj_g_disc" />
-        <TextInput source="adj_towdis" />
-        <TextInput source="adj_strdis" />
-        <TextInput source="tax_predis" />
-        <TextInput source="rate_laa" />
-        <TextInput source="status" />
-        <TextInput source="cieca_stl" />
-        <TextInput source="g_bett_amt" />
-        <TextInput source="cieca_ttl" />
-        <TextInput source="plate_no" />
-        <TextInput source="plate_st" />
-        <TextInput source="v_vin" />
-        <TextInput source="v_model_yr" />
-        <TextInput source="v_model_desc" />
-        <TextInput source="v_make_desc" />
-        <TextInput source="v_color" />
-        <TextInput source="parts_tax_rates" />
-        <TextInput source="job_totals" />
-        <TextInput source="production_vars" />
-        <TextInput source="intakechecklist" />
-        <TextInput source="invoice_allocation" />
-        <TextInput source="kanbanparent" />
-        <TextInput source="employee_body" />
-        <TextInput source="employee_refinish" />
-        <TextInput source="employee_prep" />
-      </FormTab>
-    </TabbedForm>
-  </Edit>
-);
-
-export default JobsEdit;

admin/src/components/jobs/jobs.list.jsx

@@ -1,69 +0,0 @@
-import { useQuery } from "@apollo/client";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import React from "react";
-import {
-  Datagrid,
-  Filter,
-  List,
-  ReferenceField,
-  SelectInput,
-  TextField,
-  TextInput,
-} from "react-admin";
-import { QUERY_ALL_SHOPS } from "../../graphql/admin.shop.queries";
-
-const JobsList = (props) => (
-  <List filters={<JobsFilter />} {...props}>
-    <Datagrid rowClick="edit">
-      <TextField source="id" label="Job ID" />
-      <ReferenceField source="shopid" reference="bodyshops" label="Shop Name">
-        <TextField source="shopname" />
-      </ReferenceField>
-      <TextField source="ro_number" label="RO Number" />
-
-      <TextField source="ownr_fn" label="Owner FN" />
-      <TextField source="ownr_ln" label="Owner LN" />
-      <TextField source="ownr_co_nm" label="Owner CO" />
-
-      <ReferenceField source="ownerid" reference="owners" label="Owner Record">
-        <TextField source="id" />
-      </ReferenceField>
-      <TextField source="v_model_yr" label="Year" />
-      <TextField source="v_make_desc" label="Make" />
-      <TextField source="v_model_desc" label="Model" />
-
-      <ReferenceField
-        source="vehicleid"
-        reference="vehicles"
-        label="Vehicle ID"
-      >
-        <TextField source="id" />
-      </ReferenceField>
-    </Datagrid>
-  </List>
-);
-
-const JobsFilter = (props) => {
-  const { loading, error, data } = useQuery(QUERY_ALL_SHOPS, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
-  if (loading) return <CircularProgress />;
-  if (error) return JSON.stringify(error);
-
-  return (
-    <Filter {...props}>
-      <TextInput label="RO Number" source="ro_number" />
-      <TextInput label="Job ID" source="id" />
-      <SelectInput
-        source="shopid"
-        label="Bodyshop"
-        choices={data.bodyshops.map((b) => {
-          return { id: b.id, name: b.shopname };
-        })}
-      />
-    </Filter>
-  );
-};
-
-export default JobsList;

admin/src/components/jobs/jobs.show.jsx

@@ -1,280 +0,0 @@
-import React from "react";
-import {
-  Datagrid,
-  EditButton,
-  NumberField,
-  ReferenceManyField,
-  Show,
-  Tab,
-  TabbedShowLayout,
-  TextField,
-} from "react-admin";
-
-const JobsShow = (props) => (
-  <Show {...props}>
-    <TabbedShowLayout>
-      <Tab label="summary">
-        <TextField source="id" />
-        <TextField source="created_at" />
-        <TextField source="updated_at" />
-        <TextField source="shopid" />
-        <TextField source="ro_number" />
-        <TextField source="ownerid" />
-        <TextField source="vehicleid" />
-      </Tab>
-      <Tab label="Job Lines">
-        <ReferenceManyField
-          reference="joblines"
-          target="jobid"
-          label="Job Lines"
-        >
-          <Datagrid>
-            <TextField source="id" />
-
-            <TextField source="line_ref" />
-            <TextField source="line_desc" />
-            <TextField source="line_ind" />
-            <NumberField source="db_price" />
-            <NumberField source="act_price" />
-            <NumberField source="part_qty" />
-            <NumberField source="mod_lb_hrs" />
-            <TextField source="mod_lbr_type" />
-            <TextField source="lbr_op" />
-
-            <EditButton />
-          </Datagrid>
-        </ReferenceManyField>
-      </Tab>
-      <Tab label="other">
-        <TextField source="labor_rate_id" />
-        <TextField source="labor_rate_desc" />
-        <TextField source="rate_lab" />
-        <TextField source="rate_lad" />
-        <TextField source="rate_lae" />
-        <TextField source="rate_lar" />
-        <TextField source="rate_las" />
-        <TextField source="rate_laf" />
-        <TextField source="rate_lam" />
-        <TextField source="rate_lag" />
-        <TextField source="rate_atp" />
-        <TextField source="rate_lau" />
-        <TextField source="rate_la1" />
-        <TextField source="rate_la2" />
-        <TextField source="rate_la3" />
-        <TextField source="rate_la4" />
-        <TextField source="rate_mapa" />
-        <TextField source="rate_mash" />
-        <TextField source="rate_mahw" />
-        <TextField source="rate_ma2s" />
-        <TextField source="rate_ma3s" />
-        <TextField source="rate_ma2t" />
-        <TextField source="rate_mabl" />
-        <TextField source="rate_macs" />
-        <TextField source="rate_matd" />
-        <TextField source="federal_tax_rate" />
-        <TextField source="state_tax_rate" />
-        <TextField source="local_tax_rate" />
-        <TextField source="est_co_nm" />
-        <TextField source="est_addr1" />
-        <TextField source="est_addr2" />
-        <TextField source="est_city" />
-        <TextField source="est_st" />
-        <TextField source="est_zip" />
-        <TextField source="est_ctry" />
-        <TextField source="est_ph1" />
-        <TextField source="est_ea" />
-        <TextField source="est_ct_ln" />
-        <TextField source="est_ct_fn" />
-        <TextField source="scheduled_in" />
-        <TextField source="actual_in" />
-        <TextField source="scheduled_completion" />
-        <TextField source="actual_completion" />
-        <TextField source="scheduled_delivery" />
-        <TextField source="actual_delivery" />
-        <TextField source="regie_number" />
-        <TextField source="invoice_date" />
-        <TextField source="inproduction" />
-        <TextField source="statusid" />
-        <TextField source="ins_co_id" />
-        <TextField source="ins_co_nm" />
-        <TextField source="ins_addr1" />
-        <TextField source="ins_addr2" />
-        <TextField source="ins_city" />
-        <TextField source="ins_st" />
-        <TextField source="ins_zip" />
-        <TextField source="ins_ctry" />
-        <TextField source="ins_ph1" />
-        <TextField source="ins_ph1x" />
-        <TextField source="ins_ph2" />
-        <TextField source="ins_ph2x" />
-        <TextField source="ins_fax" />
-        <TextField source="ins_faxx" />
-        <TextField source="ins_ct_ln" />
-        <TextField source="ins_ct_fn" />
-        <TextField source="ins_title" />
-        <TextField source="ins_ct_ph" />
-        <TextField source="ins_ct_phx" />
-        <TextField source="ins_ea" />
-        <TextField source="ins_memo" />
-        <TextField source="policy_no" />
-        <TextField source="ded_amt" />
-        <TextField source="ded_status" />
-        <TextField source="asgn_no" />
-        <TextField source="asgn_date" />
-        <TextField source="asgn_type" />
-        <TextField source="clm_no" />
-        <TextField source="clm_ofc_id" />
-        <TextField source="date_estimated" />
-        <TextField source="date_open" />
-        <TextField source="date_scheduled" />
-        <TextField source="date_invoiced" />
-        <TextField source="date_exported" />
-        <TextField source="clm_total" />
-        <TextField source="owner_owing" />
-        <TextField source="converted" />
-        <TextField source="ciecaid" />
-        <TextField source="loss_date" />
-        <TextField source="clm_ofc_nm" />
-        <TextField source="clm_addr1" />
-        <TextField source="clm_addr2" />
-        <TextField source="clm_city" />
-        <TextField source="clm_st" />
-        <TextField source="clm_zip" />
-        <TextField source="clm_ctry" />
-        <TextField source="clm_ph1" />
-        <TextField source="clm_ph1x" />
-        <TextField source="clm_ph2" />
-        <TextField source="clm_ph2x" />
-        <TextField source="clm_fax" />
-        <TextField source="clm_faxx" />
-        <TextField source="clm_ct_ln" />
-        <TextField source="clm_ct_fn" />
-        <TextField source="clm_title" />
-        <TextField source="clm_ct_ph" />
-        <TextField source="clm_ct_phx" />
-        <TextField source="clm_ea" />
-        <TextField source="payee_nms" />
-        <TextField source="pay_type" />
-        <TextField source="pay_date" />
-        <TextField source="pay_chknm" />
-        <TextField source="pay_amt" />
-        <TextField source="agt_co_id" />
-        <TextField source="agt_co_nm" />
-        <TextField source="agt_addr1" />
-        <TextField source="agt_addr2" />
-        <TextField source="agt_city" />
-        <TextField source="agt_st" />
-        <TextField source="agt_zip" />
-        <TextField source="agt_ctry" />
-        <TextField source="agt_ph1" />
-        <TextField source="agt_ph1x" />
-        <TextField source="agt_ph2" />
-        <TextField source="agt_ph2x" />
-        <TextField source="agt_fax" />
-        <TextField source="agt_faxx" />
-        <TextField source="agt_ct_ln" />
-        <TextField source="agt_ct_fn" />
-        <TextField source="agt_ct_ph" />
-        <TextField source="agt_ct_phx" />
-        <TextField source="agt_ea" />
-        <TextField source="agt_lic_no" />
-        <TextField source="loss_type" />
-        <TextField source="loss_desc" />
-        <TextField source="theft_ind" />
-        <TextField source="cat_no" />
-        <TextField source="tlos_ind" />
-        <TextField source="cust_pr" />
-        <TextField source="insd_ln" />
-        <TextField source="insd_fn" />
-        <TextField source="insd_title" />
-        <TextField source="insd_co_nm" />
-        <TextField source="insd_addr1" />
-        <TextField source="insd_addr2" />
-        <TextField source="insd_city" />
-        <TextField source="insd_st" />
-        <TextField source="insd_zip" />
-        <TextField source="insd_ctry" />
-        <TextField source="insd_ph1" />
-        <TextField source="insd_ph1x" />
-        <TextField source="insd_ph2" />
-        <TextField source="insd_ph2x" />
-        <TextField source="insd_fax" />
-        <TextField source="insd_faxx" />
-        <TextField source="insd_ea" />
-        <TextField source="ownr_ln" />
-        <TextField source="ownr_fn" />
-        <TextField source="ownr_title" />
-        <TextField source="ownr_co_nm" />
-        <TextField source="ownr_addr1" />
-        <TextField source="ownr_addr2" />
-        <TextField source="ownr_city" />
-        <TextField source="ownr_st" />
-        <TextField source="ownr_zip" />
-        <TextField source="ownr_ctry" />
-        <TextField source="ownr_ph1" />
-        <TextField source="ownr_ph1x" />
-        <TextField source="ownr_ph2" />
-        <TextField source="ownr_ph2x" />
-        <TextField source="ownr_fax" />
-        <TextField source="ownr_faxx" />
-        <TextField source="ownr_ea" />
-        <TextField source="area_of_damage" />
-        <TextField source="loss_cat" />
-
-        <TextField source="special_coverage_policy" />
-        <TextField source="csr" />
-        <TextField source="po_number" />
-        <TextField source="unit_number" />
-        <TextField source="kmin" />
-        <TextField source="kmout" />
-        <TextField source="referral_source" />
-        <TextField source="selling_dealer" />
-        <TextField source="servicing_dealer" />
-        <TextField source="servicing_dealer_contact" />
-        <TextField source="selling_dealer_contact" />
-        <TextField source="depreciation_taxes" />
-        <TextField source="federal_tax_payable" />
-        <TextField source="other_amount_payable" />
-        <TextField source="towing_payable" />
-        <TextField source="storage_payable" />
-        <TextField source="adjustment_bottom_line" />
-        <TextField source="tax_pstthr" />
-        <TextField source="tax_tow_rt" />
-        <TextField source="tax_sub_rt" />
-        <TextField source="tax_paint_mat_rt" />
-        <TextField source="tax_levies_rt" />
-        <TextField source="tax_prethr" />
-        <TextField source="tax_thramt" />
-        <TextField source="tax_str_rt" />
-        <TextField source="tax_lbr_rt" />
-        <TextField source="adj_g_disc" />
-        <TextField source="adj_towdis" />
-        <TextField source="adj_strdis" />
-        <TextField source="tax_predis" />
-        <TextField source="rate_laa" />
-        <TextField source="status" />
-        <TextField source="cieca_stl" />
-        <TextField source="g_bett_amt" />
-        <TextField source="cieca_ttl" />
-        <TextField source="plate_no" />
-        <TextField source="plate_st" />
-        <TextField source="v_vin" />
-        <TextField source="v_model_yr" />
-        <TextField source="v_model_desc" />
-        <TextField source="v_make_desc" />
-        <TextField source="v_color" />
-        <TextField source="parts_tax_rates" />
-        <TextField source="job_totals" />
-        <TextField source="production_vars" />
-        <TextField source="intakechecklist" />
-        <TextField source="invoice_allocation" />
-        <TextField source="kanbanparent" />
-        <TextField source="employee_body" />
-        <TextField source="employee_refinish" />
-        <TextField source="employee_prep" />
-      </Tab>
-    </TabbedShowLayout>
-  </Show>
-);
-
-export default JobsShow;

admin/src/firebase/admin-firebase-utils.js

@@ -1,31 +0,0 @@
-import firebase from "firebase/app";
-import "firebase/firestore";
-import "firebase/auth";
-
-const config = JSON.parse(process.env.REACT_APP_FIREBASE_CONFIG);
-firebase.initializeApp(config);
-
-export const auth = firebase.auth();
-export const firestore = firebase.firestore();
-
-export default firebase;
-
-export const getCurrentUser = () => {
-  return new Promise((resolve, reject) => {
-    const unsubscribe = auth.onAuthStateChanged((userAuth) => {
-      unsubscribe();
-      resolve(userAuth);
-    }, reject);
-  });
-};
-
-export const updateCurrentUser = (userDetails) => {
-  return new Promise((resolve, reject) => {
-    const unsubscribe = auth.onAuthStateChanged((userAuth) => {
-      userAuth.updateProfile(userDetails).then((r) => {
-        unsubscribe();
-        resolve(userAuth);
-      });
-    }, reject);
-  });
-};

admin/src/graphql/admin.shop.queries.js

@@ -1,10 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const QUERY_ALL_SHOPS = gql`
-  query QUERY_ALL_SHOPS {
-    bodyshops {
-      id
-      shopname
-    }
-  }
-`;

admin/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

admin/src/index.js

@@ -1,17 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App/App";
-import * as serviceWorker from "./serviceWorker";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();

admin/src/serviceWorker.js

@@ -1,141 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
-  })
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready
-      .then(registration => {
-        registration.unregister();
-      })
-      .catch(error => {
-        console.error(error.message);
-      });
-  }
-}

admin/src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';

client/.env.development

@@ -0,0 +1,13 @@
+REACT_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
+REACT_APP_GA_CODE=231099835
+REACT_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
+REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
+REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
+REACT_APP_CLOUDINARY_API_KEY=957865933348715
+REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
+REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+REACT_APP_AXIOS_BASE_API_URL=http://localhost:4000
+REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc

client/.env.production

@@ -0,0 +1,14 @@
+GENERATE_SOURCEMAP=false
+REACT_APP_GRAPHQL_ENDPOINT=https://db.imex.online/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.imex.online/v1/graphql
+REACT_APP_GA_CODE=231103507
+REACT_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU","authDomain":"imex-prod.firebaseapp.com","databaseURL":"https://imex-prod.firebaseio.com","projectId":"imex-prod","storageBucket":"imex-prod.appspot.com","messagingSenderId":"253497221485","appId":"1:253497221485:web:3c81c483b94db84b227a64","measurementId":"G-NTWBKG2L0M"}
+REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+REACT_APP_CLOUDINARY_API_KEY=473322739956866
+REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
+REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+REACT_APP_AXIOS_BASE_API_URL=https://api.imex.online/
+REACT_APP_REPORTS_SERVER_URL=https://reports.imex.online
+REACT_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk

client/.env.test

@@ -0,0 +1,14 @@
+REACT_APP_GRAPHQL_ENDPOINT=https://db.test.bodyshop.app/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.bodyshop.app/v1/graphql
+REACT_APP_GA_CODE=231099835
+REACT_APP_FIREBASE_CONFIG={   "apiKey":"AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",   "authDomain":"imex-test.firebaseapp.com",   "projectId":"imex-test",   "storageBucket":"imex-test.appspot.com",   "messagingSenderId":"991923618608",   "appId":"1:991923618608:web:633437569cdad78299bef5",   "measurementId":"G-TW0XLZEH18"}
+REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+REACT_APP_CLOUDINARY_API_KEY=473322739956866
+REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
+REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+REACT_APP_AXIOS_BASE_API_URL=https://api.test.imex.online/
+REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+REACT_APP_IS_TEST=true
+REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc

client/package.json

@@ -3,75 +3,72 @@
   "version": "0.2.1",
   "private": true,
   "proxy": "http://localhost:4000",
-  "browser": {
-    "fs": false,
-    "path": false,
-    "os": false
-  },
   "dependencies": {
-    "@apollo/client": "^3.5.10",
+    "@apollo/client": "^3.7.9",
     "@asseinfo/react-kanban": "^2.2.0",
-    "@craco/craco": "^6.4.3",
+    "@craco/craco": "^7.0.0",
     "@fingerprintjs/fingerprintjs": "^3.3.3",
     "@jsreport/browser-client": "^3.1.0",
-    "@sentry/react": "^6.19.6",
-    "@sentry/tracing": "^6.19.6",
-    "@splitsoftware/splitio-react": "^1.4.0",
-    "@stripe/react-stripe-js": "^1.7.1",
-    "@stripe/stripe-js": "^1.27.0",
-    "@tanem/react-nprogress": "^5.0.0",
-    "antd": "^4.19.5",
-    "apollo-link-logger": "^2.0.0",
-    "axios": "^0.26.1",
+    "@sentry/react": "^7.40.0",
+    "@sentry/tracing": "^7.40.0",
+    "@splitsoftware/splitio-react": "^1.8.1",
+    "@tanem/react-nprogress": "^5.0.8",
+    "antd": "^4.24.8",
+    "apollo-link-logger": "^2.0.1",
+    "axios": "^1.3.4",
     "craco-less": "^2.0.0",
     "dinero.js": "^1.9.1",
-    "dotenv": "^16.0.0",
+    "dotenv": "^16.0.1",
     "enquire-js": "^0.2.1",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^9.6.10",
-    "graphql": "^16.3.0",
-    "i18next": "^21.6.16",
-    "i18next-browser-languagedetector": "^6.1.4",
-    "jsoneditor": "^9.7.4",
-    "libphonenumber-js": "^1.9.51",
-    "logrocket": "^2.2.1",
-    "markerjs2": "^2.21.0",
+    "firebase": "^9.17.1",
+    "graphql": "^16.6.0",
+    "i18next": "^22.4.10",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "jsoneditor": "^9.9.0",
+    "jsreport-browser-client-dist": "^1.3.0",
+    "libphonenumber-js": "^1.10.21",
+    "logrocket": "^3.0.1",
+    "markerjs2": "^2.28.1",
     "moment-business-days": "^1.2.0",
-    "moment-timezone": "^0.5.34",
-    "phone": "^3.1.15",
+    "moment-timezone": "^0.5.41",
+    "normalize-url": "^8.0.0",
+    "phone": "^3.1.35",
     "preval.macro": "^5.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.1",
+    "query-string": "^7.1.3",
     "rc-queue-anim": "^2.0.0",
     "rc-scroll-anim": "^2.7.6",
-    "react": "^18.0.0",
-    "react-big-calendar": "^0.40.0",
+    "react": "^17.0.2",
+    "react-big-calendar": "^1.6.8",
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",
-    "react-dom": "^18.0.0",
-    "react-drag-listview": "^0.1.9",
-    "react-grid-gallery": "^0.5.5",
+    "react-dom": "^17.0.2",
+    "react-drag-listview": "^0.2.1",
+    "react-grid-gallery": "^1.0.0",
     "react-grid-layout": "^1.3.4",
-    "react-i18next": "^11.16.6",
-    "react-icons": "^4.3.1",
-    "react-number-format": "^4.9.1",
-    "react-redux": "^7.2.8",
+    "react-i18next": "^12.2.0",
+    "react-icons": "^4.7.1",
+    "react-image-lightbox": "^5.1.4",
+    "react-intersection-observer": "^9.4.3",
+    "react-number-format": "^5.1.3",
+    "react-redux": "^8.0.5",
     "react-resizable": "^3.0.4",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-sticky": "^6.0.3",
     "react-sublime-video": "^0.2.5",
     "react-virtualized": "^9.22.3",
-    "recharts": "^2.1.9",
-    "redux": "^4.1.2",
+    "recharts": "^2.4.3",
+    "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.1.3",
-    "redux-state-sync": "^3.1.2",
-    "reselect": "^4.1.5",
-    "sass": "^1.50.0",
-    "socket.io-client": "^4.4.1",
-    "styled-components": "^5.3.5",
+    "redux-saga": "^1.2.2",
+    "redux-state-sync": "^3.1.4",
+    "reselect": "^4.1.7",
+    "sass": "^1.58.3",
+    "socket.io-client": "^4.6.1",
+    "styled-components": "^5.3.6",
     "subscriptions-transport-ws": "^0.11.0",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.5.3",
@@ -122,9 +119,9 @@
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
-    "@sentry/webpack-plugin": "^1.18.8",
-    "@testing-library/cypress": "^8.0.2",
-    "cypress": "^9.5.4",
+    "@sentry/webpack-plugin": "^1.20.0",
+    "@testing-library/cypress": "^8.0.3",
+    "cypress": "^10.3.1",
     "eslint-plugin-cypress": "^2.12.1",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",

client/src/App/App.jsx

@@ -1,4 +1,4 @@
-import { useTreatments } from "@splitsoftware/splitio-react";
+import { useClient } from "@splitsoftware/splitio-react";
 import { Button, Result } from "antd";
 import LogRocket from "logrocket";
 import React, { lazy, Suspense, useEffect } from "react";
@@ -51,11 +51,7 @@ export function App({
   online,
   setOnline,
 }) {
-  const { LogRocket_Tracking } = useTreatments(
-    ["LogRocket_Tracking"],
-    {},
-    bodyshop && bodyshop.imexshopid
-  );
+  const client = useClient();
 
   useEffect(() => {
     if (!navigator.onLine) {
@@ -78,15 +74,15 @@ export function App({
     setOnline(true);
   });
   useEffect(() => {
-    if (currentUser.authorized) {
-      if (
-        process.env.NODE_ENV === "production" &&
-        LogRocket_Tracking.treatment === "on"
-      ) {
+    if (currentUser.authorized && bodyshop) {
+      client.setAttribute("imexshopid", bodyshop.imexshopid);
+
+      if (client.getTreatment("LogRocket_Tracking") === "on") {
+        console.log("LR Start");
         LogRocket.init("gvfvfw/bodyshopapp");
       }
     }
-  }, [currentUser.authorized, LogRocket_Tracking.treatment]);
+  }, [bodyshop, client, currentUser.authorized]);
 
   if (currentUser.authorized === null) {
     return <LoadingSpinner message={t("general.labels.loggingin")} />;

client/src/App/App.styles.scss

@@ -142,3 +142,29 @@
     }
   }
 }
+
+//Update row highlighting on production board.
+.ant-table-tbody > tr.ant-table-row:hover > td {
+  background: #e7f3ff !important;
+}
+
+.ant-table-tbody > tr.ant-table-row-selected > td {
+  background: #e6f7ff !important;
+}
+
+.job-line-manual {
+  color: tomato;
+  font-style: italic;
+}
+
+td.ant-table-column-sort {
+  background-color: transparent;
+}
+
+.ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
+  background-color: #f4f4f4;
+}
+
+.rowWithColor > td {
+  background-color: var(--bgColor) !important;
+}

client/src/components/_test/paymentMethod.jsx

@@ -1,96 +0,0 @@
-import {
-  PaymentRequestButtonElement,
-  useStripe,
-} from "@stripe/react-stripe-js";
-import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { setEmailOptions } from "../../redux/email/email.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { TemplateList } from "../../utils/TemplateConstants";
-
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
-});
-
-function Test({ bodyshop, setEmailOptions }) {
-  const stripe = useStripe();
-
-  const [paymentRequest, setPaymentRequest] = useState(null);
-  useEffect(() => {
-    if (stripe) {
-      const pr = stripe.paymentRequest({
-        country: "CA",
-        displayItems: [{ label: "Deductible", amount: 1099 }],
-        currency: "cad",
-        total: {
-          label: "Demo total",
-          amount: 1099,
-        },
-        requestPayerName: true,
-        requestPayerEmail: true,
-      });
-
-      // Check the availability of the Payment Request API.
-      pr.canMakePayment().then((result) => {
-        if (result) {
-          setPaymentRequest(pr);
-        } else {
-          // var details = {
-          //   total: { label: "", amount: { currency: "CAD", value: "0.00" } },
-          // };
-          new PaymentRequest(
-            [{ supportedMethods: ["basic-card"] }],
-            {}
-            //  details
-          ).show();
-        }
-      });
-    }
-  }, [stripe]);
-
-  if (paymentRequest) {
-    return (
-      <div style={{ height: "300px" }}>
-        <PaymentRequestButtonElement options={{ paymentRequest }} />
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <button
-        onClick={() => {
-          setEmailOptions({
-            messageOptions: {
-              to: ["patrickwf@gmail.com"],
-              replyTo: bodyshop.email,
-            },
-            template: {
-              name: TemplateList().parts_order.key,
-              variables: {
-                id: "a7c2d4e1-f519-42a9-a071-c48cf0f22979",
-              },
-            },
-          });
-        }}
-      >
-        send email
-      </button>
-      <button
-        onClick={() => {
-          logImEXEvent("IMEXEVENT", { somethignArThare: 5 });
-        }}
-      >
-        Log an ImEX Event.
-      </button>
-    </div>
-  );
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Test);

client/src/components/_test/payment_response.json

@@ -0,0 +1,63 @@
+{
+  "status": 24201299,
+  "custid": 19607899,
+  "paymentid": 24201299,
+  "response": "A",
+  "authcode": "498680",
+  "declinereason": "Approved",
+  "fee": 0,
+  "invoice": "",
+  "account": "john",
+  "amount": 1000,
+  "amountincludesfee": false,
+  "total": 1000,
+  "paymenttype": "C",
+  "methodhint": "VI ***1111",
+  "cardbrand": "Visa",
+  "cardnumdisplay": "***1111",
+  "receiptelements": {
+    "authcode": "498680",
+    "cust_srv_ph_num": "1-555-555-5555",
+    "rcpt_pg_ftr_txt": "Thank You\nPlease Come Again",
+    "rcpt_currency": "USD",
+    "responsecode": "A",
+    "rcpt_pay_mthd": "Visa",
+    "transid": "C00 915799",
+    "merch_disp_nm": "CP Devel Test",
+    "rcpt_input_mthd": "Keyed",
+    "rcpt_pg_hdr_txt": "Welcome!",
+    "rcpt_tran_time": "Thursday February 23 2023, 11:25:36 pm +08",
+    "rcpt_trans_type": "Normal Transaction (Sale)",
+    "message": "Approved",
+    "rcpt_dba_addr": "1234 Storefront Ave\nSome City, UT 84111",
+    "avsdata": "N",
+    "receiptrequirements": "S",
+    "rcpt_cardnum": "************1111",
+    "cv2result": "M",
+    "rfnd_policy_txt": "<b>No Refunds</b>\nStore Credit Only",
+    "labels": {
+      "tranref": "REF#",
+      "tid": "TID",
+      "validationcode": "ValCode",
+      "emvapplicationid": "AID",
+      "emvatc": "ATC",
+      "rcpt_pay_mthd": "Pay Method",
+      "transid": "TransID",
+      "rcpt_input_mthd": "IMode",
+      "emvtsi": "TSI",
+      "emvac": "AC",
+      "rcpt_trans_type": "TranType",
+      "emvapplicationname": "PApp",
+      "visarewards": "RewardsProg"
+    }
+  },
+  "receipttoken": "H4sIAAAAAAAAACXMTQuCMBgA4P/ynh3tw_3dBI/ipQ8NOtRN53QiblpBRfTfCzo/8LwhxGAdZCCwFYoJJFQjI2kvHdGu74lVkgmrWyWNhASW5jW7cB87yHjKKePGJODnxrrnMl7dDTKmEJlSOqV/_N30XPpyj2Eddq57_KKZ8FLzmh_G1VQnVfhjiXGK1XYTc/h8AVOkf4qUAAAA",
+  "call": "card_payment",
+  "nonce": "488b5568-b5c1-4f38-8b2f-3b050f3abb11P",
+  "hmac": "JyPAJ9Yx0SlYBTtqns1OxAFRt+xF3l2UiLPO5zTDRBE=",
+  "paymentreferenceid": "C19607899P24201299",
+  "cardnum": "...1111",
+  "email": "",
+  "nameOnCard": "John Allen",
+  "cardType": "visa"
+}

client/src/components/_test/test.component.jsx

@@ -1,9 +0,0 @@
-import React from "react";
-import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
-export default function Test() {
-  return (
-    <div>
-      <QboAuthorizeComponent />
-    </div>
-  );
-}

client/src/components/_test/test.page.jsx

@@ -0,0 +1,31 @@
+import { Button } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setModalContext } from "../../redux/modals/modals.actions";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setRefundPaymentContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "refund_payment" })),
+});
+
+function Test({ setRefundPaymentContext, refundPaymentModal }) {
+  console.log("refundPaymentModal", refundPaymentModal);
+  return (
+    <div>
+      <Button
+        onClick={() =>
+          setRefundPaymentContext({
+            context: {},
+          })
+        }
+      >
+        Open Modal
+      </Button>
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Test);

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

@@ -13,6 +13,8 @@ import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
+import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -27,7 +29,12 @@ export default connect(
   mapDispatchToProps
 )(AccountingPayablesTableComponent);
 
-export function AccountingPayablesTableComponent({ bodyshop, loading, bills }) {
+export function AccountingPayablesTableComponent({
+  bodyshop,
+  loading,
+  bills,
+  refetch,
+}) {
   const { t } = useTranslation();
   const [selectedBills, setSelectedBills] = useState([]);
   const [transInProgress, setTransInProgress] = useState(false);
@@ -131,11 +138,9 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills }) {
       dataIndex: "attempts",
       key: "attempts",
 
-      render: (text, record) => {
-        const success = record.exportlogs.filter((e) => e.successful).length;
-        const attempts = record.exportlogs.length;
-        return `${success}/${attempts}`;
-      },
+      render: (text, record) => (
+        <ExportLogsCountDisplay logs={record.exportlogs} />
+      ),
     },
     {
       title: t("general.labels.actions"),
@@ -144,14 +149,13 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills }) {
       sorter: (a, b) => a.clm_total - b.clm_total,
 
       render: (text, record) => (
-        <div>
-          <PayableExportButton
-            billId={record.id}
-            disabled={transInProgress || !!record.exported}
-            loadingCallback={setTransInProgress}
-            setSelectedBills={setSelectedBills}
-          />
-        </div>
+        <PayableExportButton
+          billId={record.id}
+          disabled={transInProgress || !!record.exported}
+          loadingCallback={setTransInProgress}
+          setSelectedBills={setSelectedBills}
+          refetch={refetch}
+        />
       ),
     },
   ];
@@ -177,11 +181,19 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills }) {
     <Card
       extra={
         <Space wrap>
+          <BillMarkSelectedExported
+            billids={selectedBills}
+            disabled={transInProgress || selectedBills.length === 0}
+            loadingCallback={setTransInProgress}
+            completedCallback={setSelectedBills}
+            refetch={refetch}
+          />
           <PayableExportAll
             billids={selectedBills}
             disabled={transInProgress || selectedBills.length === 0}
             loadingCallback={setTransInProgress}
             completedCallback={setSelectedBills}
+            refetch={refetch}
           />
           {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && (
             <QboAuthorizeComponent />

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

@@ -1,18 +1,20 @@
 import { Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort, dateSort } from "../../utils/sorters";
+import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import PaymentExportButton from "../payment-export-button/payment-export-button.component";
+import PaymentMarkSelectedExported from "../payment-mark-selected-exported/payment-mark-selected-exported.component";
 import PaymentsExportAllButton from "../payments-export-all-button/payments-export-all-button.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -31,6 +33,7 @@ export function AccountingPayablesTableComponent({
   bodyshop,
   loading,
   payments,
+  refetch,
 }) {
   const { t } = useTranslation();
   const [selectedPayments, setSelectedPayments] = useState([]);
@@ -104,11 +107,6 @@ export function AccountingPayablesTableComponent({
       dataIndex: "transactionid",
       key: "transactionid",
     },
-    {
-      title: t("payments.fields.stripeid"),
-      dataIndex: "stripeid",
-      key: "stripeid",
-    },
     {
       title: t("payments.fields.created_at"),
       dataIndex: "created_at",
@@ -130,11 +128,9 @@ export function AccountingPayablesTableComponent({
       dataIndex: "attempts",
       key: "attempts",
 
-      render: (text, record) => {
-        const success = record.exportlogs.filter((e) => e.successful).length;
-        const attempts = record.exportlogs.length;
-        return `${success}/${attempts}`;
-      },
+      render: (text, record) => (
+        <ExportLogsCountDisplay logs={record.exportlogs} />
+      ),
     },
     {
       title: t("general.labels.actions"),
@@ -148,6 +144,7 @@ export function AccountingPayablesTableComponent({
           disabled={transInProgress || !!record.exportedat}
           loadingCallback={setTransInProgress}
           setSelectedPayments={setSelectedPayments}
+          refetch={refetch}
         />
       ),
     },
@@ -183,11 +180,19 @@ export function AccountingPayablesTableComponent({
     <Card
       extra={
         <Space wrap>
+          <PaymentMarkSelectedExported
+            paymentIds={selectedPayments}
+            disabled={transInProgress || selectedPayments.length === 0}
+            loadingCallback={setTransInProgress}
+            completedCallback={setSelectedPayments}
+            refetch={refetch}
+          />
           <PaymentsExportAllButton
             paymentIds={selectedPayments}
             disabled={transInProgress || selectedPayments.length === 0}
             loadingCallback={setTransInProgress}
             completedCallback={setSelectedPayments}
+            refetch={refetch}
           />
           {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && (
             <QboAuthorizeComponent />

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

@@ -14,6 +14,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 import { DateFormatter } from "../../utils/DateFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -30,6 +31,7 @@ export function AccountingReceivablesTableComponent({
   bodyshop,
   loading,
   jobs,
+  refetch,
 }) {
   const { t } = useTranslation();
   const [selectedJobs, setSelectedJobs] = useState([]);
@@ -139,12 +141,9 @@ export function AccountingReceivablesTableComponent({
       title: t("exportlogs.labels.attempts"),
       dataIndex: "attempts",
       key: "attempts",
-
-      render: (text, record) => {
-        const success = record.exportlogs.filter((e) => e.successful).length;
-        const attempts = record.exportlogs.length;
-        return `${success}/${attempts}`;
-      },
+      render: (text, record) => (
+        <ExportLogsCountDisplay logs={record.exportlogs} />
+      ),
     },
     {
       title: t("general.labels.actions"),
@@ -157,6 +156,7 @@ export function AccountingReceivablesTableComponent({
             jobId={record.id}
             disabled={!!record.date_exported}
             setSelectedJobs={setSelectedJobs}
+            refetch={refetch}
           />
           <Link to={`/manage/jobs/${record.id}/close`}>
             <Button>{t("jobs.labels.viewallocations")}</Button>
@@ -207,6 +207,7 @@ export function AccountingReceivablesTableComponent({
               disabled={transInProgress || selectedJobs.length === 0}
               loadingCallback={setTransInProgress}
               completedCallback={setSelectedJobs}
+              refetch={refetch}
             />
           )}
           {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && (

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

@@ -4,6 +4,8 @@ import { useQuery } from "@apollo/client";
 import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
 import AlertComponent from "../alert/alert.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import EmailAuditTrailListComponent from "./email-audit-trail-list.component";
+import { Card, Row } from "antd";
 
 export default function AuditTrailListContainer({ recordId }) {
   const { loading, error, data } = useQuery(QUERY_AUDIT_TRAIL, {
@@ -18,10 +20,20 @@ export default function AuditTrailListContainer({ recordId }) {
       {error ? (
         <AlertComponent type="error" message={error.message} />
       ) : (
-        <AuditTrailListComponent
-          loading={loading}
-          data={data ? data.audit_trail : null}
-        />
+        <Row gutter={[16, 16]}>
+          <Card>
+            <AuditTrailListComponent
+              loading={loading}
+              data={data ? data.audit_trail : []}
+            />
+          </Card>
+          <Card>
+            <EmailAuditTrailListComponent
+              loading={loading}
+              data={data ? data.audit_trail : []}
+            />
+          </Card>
+        </Row>
       )}
     </div>
   );

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

@@ -0,0 +1,63 @@
+import { Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { alphaSort } from "../../utils/sorters";
+
+export default function EmailAuditTrailListComponent({ loading, data }) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: {},
+  });
+  const { t } = useTranslation();
+  const columns = [ 
+    {
+      title: t("audit.fields.created"),
+      dataIndex: " created",
+      key: " created",
+      width: "10%",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.created}</DateTimeFormatter>
+      ),
+      sorter: (a, b) => a.created - b.created,
+      sortOrder:
+        state.sortedInfo.columnKey === "created" && state.sortedInfo.order,
+    },
+
+    {
+      title: t("audit.fields.useremail"),
+      dataIndex: "useremail",
+      key: "useremail",
+      width: "10%",
+      sorter: (a, b) => alphaSort(a.useremail, b.useremail),
+      sortOrder:
+        state.sortedInfo.columnKey === "useremail" && state.sortedInfo.order,
+    },
+  ];
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 12 },
+      sm: { span: 5 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 12 },
+    },
+  };
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  return (
+    <Table
+      {...formItemLayout}
+      loading={loading}
+      pagination={{ position: "top", defaultPageSize: 25 }}
+      columns={columns}
+      rowKey="id"
+      dataSource={data}
+      onChange={handleTableChange}
+    />
+  );
+}

client/src/components/bill-cm-returns-table/bill-cm-returns-table.component.jsx

@@ -0,0 +1,135 @@
+import { Checkbox, Form, Skeleton, Typography } from "antd";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
+import "./bill-cm-returns-table.styles.scss";
+export default function BillCmdReturnsTableComponent({
+  form,
+  returnLoading,
+  returnData,
+}) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (returnData) {
+      form.setFieldsValue({
+        outstanding_returns: returnData.parts_order_lines,
+      });
+    }
+  }, [returnData, form]);
+
+  return (
+    <Form.Item
+      shouldUpdate={(prev, cur) =>
+        prev.jobid !== cur.jobid ||
+        prev.is_credit_memo !== cur.is_credit_memo ||
+        prev.vendorid !== cur.vendorid
+      }
+      noStyle
+    >
+      {() => {
+        const isReturn = form.getFieldValue("is_credit_memo");
+
+        if (!isReturn) {
+          return null;
+        }
+
+        if (returnLoading) return <Skeleton />;
+
+        return (
+          <Form.List name="outstanding_returns">
+            {(fields, { add, remove, move }) => {
+              return (
+                <>
+                  <Typography.Title level={4}>
+                    {t("bills.labels.creditsnotreceived")}
+                  </Typography.Title>
+                  <table className="bill-cm-returns-table">
+                    <thead>
+                      <tr>
+                        <th>{t("parts_orders.fields.line_desc")}</th>
+                        <th>{t("parts_orders.fields.part_type")}</th>
+                        <th>{t("parts_orders.fields.quantity")}</th>
+                        <th>{t("parts_orders.fields.act_price")}</th>
+                        <th>{t("parts_orders.fields.cost")}</th>
+                        <th>{t("parts_orders.labels.mark_as_received")}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {fields.map((field, index) => (
+                        <tr key={field.key}>
+                          <td>
+                            <Form.Item
+                              //   label={t("joblines.fields.line_desc")}
+                              key={`${index}line_desc`}
+                              name={[field.name, "line_desc"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}part_type`}
+                              name={[field.name, "part_type"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}quantity`}
+                              name={[field.name, "quantity"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}act_price`}
+                              name={[field.name, "act_price"]}
+                            >
+                              <ReadOnlyFormItemComponent type="currency" />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}cost`}
+                              name={[field.name, "cost"]}
+                            >
+                              <ReadOnlyFormItemComponent type="currency" />
+                            </Form.Item>
+                          </td>
+
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}cm_received`}
+                              name={[field.name, "cm_received"]}
+                              valuePropName="checked"
+                            >
+                              <Checkbox />
+                            </Form.Item>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </>
+              );
+            }}
+          </Form.List>
+        );
+      }}
+    </Form.Item>
+  );
+}

client/src/components/bill-cm-returns-table/bill-cm-returns-table.styles.scss

@@ -0,0 +1,19 @@
+.bill-cm-returns-table {
+    table-layout: fixed;
+    width: 100%;
+
+    th,
+    td {
+        padding: 8px;
+        text-align: left;
+        border-bottom: 1px solid #ddd;
+
+        .ant-form-item {
+            margin-bottom: 0px !important;
+        }
+    }
+
+    tr:hover {
+        background-color: #f5f5f5;
+    }
+}

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

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { DELETE_BILL } from "../../graphql/bills.queries";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 
-export default function BillDeleteButton({ bill }) {
+export default function BillDeleteButton({ bill, callback }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const [deleteBill] = useMutation(DELETE_BILL);
@@ -15,7 +15,8 @@ export default function BillDeleteButton({ bill }) {
     setLoading(true);
     const result = await deleteBill({
       variables: { billId: bill.id },
-      update(cache) {
+      update(cache, { errors }) {
+        if (errors) return;
         cache.modify({
           fields: {
             bills(existingBills, { readField }) {
@@ -35,12 +36,25 @@ export default function BillDeleteButton({ bill }) {
 
     if (!!!result.errors) {
       notification["success"]({ message: t("bills.successes.deleted") });
+
+      if (callback && typeof callback === "function") callback(bill.id);
     } else {
-      notification["error"]({
-        message: t("bills.errors.deleting", {
-          error: JSON.stringify(result.errors),
-        }),
-      });
+      //Check if it's an fkey violation.
+      const error = JSON.stringify(result.errors);
+
+      if (error.toLowerCase().includes("inventory_billid_fkey")) {
+        notification["error"]({
+          message: t("bills.errors.deleting", {
+            error: t("bills.errors.existinginventoryline"),
+          }),
+        });
+      } else {
+        notification["error"]({
+          message: t("bills.errors.deleting", {
+            error: JSON.stringify(result.errors),
+          }),
+        });
+      }
     }
 
     setLoading(false);

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

@@ -0,0 +1,251 @@
+import { useMutation, useQuery } from "@apollo/client";
+import { Button, Form, PageHeader, Popconfirm, Space } from "antd";
+import moment from "moment";
+import queryString from "query-string";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import {
+  DELETE_BILL_LINE,
+  INSERT_NEW_BILL_LINES,
+  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";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import AlertComponent from "../alert/alert.component";
+import BillFormContainer from "../bill-form/bill-form.container";
+import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
+import BillReeportButtonComponent from "../bill-reexport-button/bill-reexport-button.component";
+import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-gallery.container";
+import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import BillDetailEditReturn from "./bill-detail-edit-return.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  setPartsOrderContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "partsOrder" })),
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BillDetailEditcontainer);
+
+export function BillDetailEditcontainer({
+  setPartsOrderContext,
+  insertAuditTrail,
+  bodyshop,
+}) {
+  const search = queryString.parse(useLocation().search);
+
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const [visible, setVisible] = useState(false);
+  const [updateLoading, setUpdateLoading] = useState(false);
+  const [update_bill] = useMutation(UPDATE_BILL);
+  const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
+  const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
+  const [deleteBillLine] = useMutation(DELETE_BILL_LINE);
+
+  const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
+    variables: { billid: search.billid },
+    skip: !!!search.billid,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+
+  const handleSave = () => {
+    //It's got a previously deducted bill line!
+    if (
+      data.bills_by_pk.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
+      form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length >
+        0
+    )
+      setVisible(true);
+    else {
+      form.submit();
+    }
+  };
+
+  const handleFinish = async (values) => {
+    setUpdateLoading(true);
+    //let adjustmentsToInsert = {};
+
+    const { billlines, upload, ...bill } = values;
+    const updates = [];
+    updates.push(
+      update_bill({
+        variables: { billId: search.billid, bill: bill },
+      })
+    );
+
+    billlines.forEach((l) => {
+      delete l.selected;
+    });
+
+    //Find bill lines that were deleted.
+    const deletedJobLines = [];
+
+    data.bills_by_pk.billlines.forEach((a) => {
+      const matchingRecord = billlines.find((b) => b.id === a.id);
+      if (!matchingRecord) {
+        deletedJobLines.push(a);
+      }
+    });
+
+    deletedJobLines.forEach((d) => {
+      updates.push(deleteBillLine({ variables: { id: d.id } }));
+    });
+
+    billlines.forEach((billline) => {
+      const { deductedfromlbr, inventories, jobline, ...il } = billline;
+      delete il.__typename;
+
+      if (il.id) {
+        updates.push(
+          updateBillLine({
+            variables: {
+              billLineId: il.id,
+              billLine: {
+                ...il,
+                deductedfromlbr: deductedfromlbr,
+                joblineid: il.joblineid === "noline" ? null : il.joblineid,
+              },
+            },
+          })
+        );
+      } else {
+        //It's a new line, have to insert it.
+        updates.push(
+          insertBillLine({
+            variables: {
+              billLines: [
+                {
+                  ...il,
+                  deductedfromlbr: deductedfromlbr,
+                  billid: search.billid,
+                  joblineid: il.joblineid === "noline" ? null : il.joblineid,
+                },
+              ],
+            },
+          })
+        );
+      }
+    });
+
+    await Promise.all(updates);
+
+    insertAuditTrail({
+      jobid: bill.jobid,
+      billid: search.billid,
+      operation: AuditTrailMapping.billupdated(bill.invoice_number),
+    });
+
+    await refetch();
+    form.setFieldsValue(transformData(data));
+    form.resetFields();
+    setVisible(false);
+    setUpdateLoading(false);
+  };
+
+  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;
+
+  return (
+    <>
+      {loading && <LoadingSkeleton />}
+      {data && (
+        <>
+          <PageHeader
+            title={
+              data &&
+              `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
+            }
+            extra={
+              <Space>
+                <BillDetailEditReturn data={data} />
+
+                <Popconfirm
+                  visible={visible}
+                  onConfirm={() => form.submit()}
+                  onCancel={() => setVisible(false)}
+                  okButtonProps={{ loading: updateLoading }}
+                  title={t("bills.labels.editadjwarning")}
+                >
+                  <Button
+                    htmlType="submit"
+                    disabled={exported}
+                    onClick={handleSave}
+                    loading={updateLoading}
+                    type="primary"
+                  >
+                    {t("general.actions.save")}
+                  </Button>
+                </Popconfirm>
+                <BillReeportButtonComponent bill={data && data.bills_by_pk} />
+                <BillMarkExportedButton bill={data && data.bills_by_pk} />
+              </Space>
+            }
+          />
+          <Form
+            form={form}
+            onFinish={handleFinish}
+            initialValues={transformData(data)}
+            layout="vertical"
+          >
+            <BillFormContainer form={form} billEdit disabled={exported} />
+
+            {bodyshop.uselocalmediaserver ? (
+              <JobsDocumentsLocalGallery
+                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}
+              />
+            ) : (
+              <JobDocumentsGallery
+                jobId={data ? data.bills_by_pk.jobid : null}
+                billId={search.billid}
+                documentsList={data ? data.bills_by_pk.documents : []}
+                billsCallback={refetch}
+              />
+            )}
+          </Form>
+        </>
+      )}
+    </>
+  );
+}
+
+const transformData = (data) => {
+  return data
+    ? {
+        ...data.bills_by_pk,
+
+        billlines: data.bills_by_pk.billlines.map((i) => {
+          return {
+            ...i,
+            joblineid: !!i.joblineid ? i.joblineid : "noline",
+            applicable_taxes: {
+              federal:
+                (i.applicable_taxes && i.applicable_taxes.federal) || false,
+              state: (i.applicable_taxes && i.applicable_taxes.state) || false,
+              local: (i.applicable_taxes && i.applicable_taxes.local) || false,
+            },
+          };
+        }),
+        date: data.bills_by_pk ? moment(data.bills_by_pk.date) : null,
+      }
+    : {};
+};

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

@@ -0,0 +1,185 @@
+import { Button, Checkbox, Form, Modal } from "antd";
+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 { createStructuredSelector } from "reselect";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  setPartsOrderContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "partsOrder" })),
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BillDetailEditReturn);
+
+export function BillDetailEditReturn({
+  setPartsOrderContext,
+  insertAuditTrail,
+  bodyshop,
+  data,
+  disabled,
+}) {
+  const search = queryString.parse(useLocation().search);
+  const history = useHistory();
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const [visible, setVisible] = useState(false);
+
+  const handleFinish = ({ billlines }) => {
+    const selectedLines = billlines.filter((l) => l.selected).map((l) => l.id);
+
+    setPartsOrderContext({
+      actions: {},
+      context: {
+        jobId: data.bills_by_pk.jobid,
+        vendorId: data.bills_by_pk.vendorid,
+        returnFromBill: data.bills_by_pk.id,
+        invoiceNumber: data.bills_by_pk.invoice_number,
+        linesToOrder: data.bills_by_pk.billlines
+          .filter((l) => selectedLines.includes(l.id))
+          .map((i) => {
+            return {
+              line_desc: i.line_desc,
+              //  db_price: i.actual_price,
+              act_price: i.actual_price,
+              cost: i.actual_cost,
+              quantity: i.quantity,
+              joblineid: i.joblineid,
+              oem_partno: i.jobline && i.jobline.oem_partno,
+              part_type: i.jobline && i.jobline.part_type,
+            };
+          }),
+        isReturn: true,
+      },
+    });
+    delete search.billid;
+
+    history.push({ search: queryString.stringify(search) });
+    setVisible(false);
+  };
+  useEffect(() => {
+    if (visible === false) form.resetFields();
+  }, [visible, form]);
+
+  return (
+    <>
+      <Modal
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        destroyOnClose
+        title={t("bills.actions.return")}
+        onOk={() => form.submit()}
+      >
+        <Form
+          initialValues={data && data.bills_by_pk}
+          onFinish={handleFinish}
+          form={form}
+        >
+          <Form.List name={["billlines"]}>
+            {(fields, { add, remove, move }) => {
+              return (
+                <table style={{ tableLayout: "auto", width: "100%" }}>
+                  <thead>
+                    <tr>
+                      <td>
+                        <Checkbox
+                          onChange={(e) => {
+                            form.setFieldsValue({
+                              billlines: form
+                                .getFieldsValue()
+                                .billlines.map((b) => ({
+                                  ...b,
+                                  selected: e.target.checked,
+                                })),
+                            });
+                          }}
+                        />
+                      </td>
+                      <td>{t("billlines.fields.line_desc")}</td>
+                      <td>{t("billlines.fields.quantity")}</td>
+                      <td>{t("billlines.fields.actual_price")}</td>
+                      <td>{t("billlines.fields.actual_cost")}</td>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {fields.map((field, index) => (
+                      <tr key={field.key}>
+                        <td>
+                          <Form.Item
+                            //   label={t("joblines.fields.selected")}
+                            key={`${index}selected`}
+                            name={[field.name, "selected"]}
+                            valuePropName="checked"
+                          >
+                            <Checkbox />
+                          </Form.Item>
+                        </td>
+                        <td>
+                          <Form.Item
+                            //   label={t("joblines.fields.line_desc")}
+                            key={`${index}line_desc`}
+                            name={[field.name, "line_desc"]}
+                          >
+                            <ReadOnlyFormItemComponent />
+                          </Form.Item>
+                        </td>
+                        <td>
+                          <Form.Item
+                            //   label={t("joblines.fields.quantity")}
+                            key={`${index}quantity`}
+                            name={[field.name, "quantity"]}
+                          >
+                            <ReadOnlyFormItemComponent />
+                          </Form.Item>
+                        </td>
+                        <td>
+                          <Form.Item
+                            //   label={t("joblines.fields.actual_price")}
+                            key={`${index}actual_price`}
+                            name={[field.name, "actual_price"]}
+                          >
+                            <ReadOnlyFormItemComponent type="currency" />
+                          </Form.Item>
+                        </td>
+                        <td>
+                          <Form.Item
+                            //   label={t("joblines.fields.actual_cost")}
+                            key={`${index}actual_cost`}
+                            name={[field.name, "actual_cost"]}
+                          >
+                            <ReadOnlyFormItemComponent type="currency" />
+                          </Form.Item>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              );
+            }}
+          </Form.List>
+        </Form>
+      </Modal>
+      <Button
+        disabled={data.bills_by_pk.is_credit_memo || disabled}
+        onClick={() => {
+          setVisible(true);
+        }}
+      >
+        {t("bills.actions.return")}
+      </Button>
+    </>
+  );
+}

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

@@ -1,65 +1,12 @@
-import { useMutation, useQuery } from "@apollo/client";
-import {
-  Button,
-  Drawer,
-  Form,
-  Grid,
-  PageHeader,
-  Popconfirm,
-  Space,
-} from "antd";
-import moment from "moment";
+import { Drawer, Grid } from "antd";
 import queryString from "query-string";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation, useHistory } from "react-router-dom";
-import {
-  DELETE_BILL_LINE,
-  INSERT_NEW_BILL_LINES,
-  UPDATE_BILL_LINE,
-} from "../../graphql/bill-lines.queries";
-import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
-import AlertComponent from "../alert/alert.component";
-import BillFormContainer from "../bill-form/bill-form.container";
-import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-gallery.container";
-import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
-import BillReeportButtonComponent from "../bill-reexport-button/bill-reexport-button.component";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { insertAuditTrail } from "../../redux/application/application.actions";
-import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
+import React from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import BillDetailEditComponent from "./bill-detail-edit-component";
 
-const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-});
-const mapDispatchToProps = (dispatch) => ({
-  setPartsOrderContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-  insertAuditTrail: ({ jobid, operation }) =>
-    dispatch(insertAuditTrail({ jobid, operation })),
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(BillDetailEditcontainer);
-
-export function BillDetailEditcontainer({
-  setPartsOrderContext,
-  insertAuditTrail,
-}) {
+export default function BillDetailEditcontainer() {
   const search = queryString.parse(useLocation().search);
   const history = useHistory();
-  const { t } = useTranslation();
-  const [form] = Form.useForm();
-  const [visible, setVisible] = useState(false);
-  const [updateLoading, setUpdateLoading] = useState(false);
-  const [update_bill] = useMutation(UPDATE_BILL);
-  const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
-  const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
-  const [deleteBillLine] = useMutation(DELETE_BILL_LINE);
 
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
@@ -70,121 +17,13 @@ export function BillDetailEditcontainer({
     sm: "100%",
     md: "100%",
     lg: "100%",
-    xl: "80%",
-    xxl: "80%",
+    xl: "90%",
+    xxl: "90%",
   };
   const drawerPercentage = selectedBreakpoint
     ? bpoints[selectedBreakpoint[0]]
     : "100%";
 
-  const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
-    variables: { billid: search.billid },
-    skip: !!!search.billid,
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
-
-  const handleSave = () => {
-    //It's got a previously deducted bill line!
-    if (
-      data.bills_by_pk.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
-      form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length >
-        0
-    )
-      setVisible(true);
-    else {
-      form.submit();
-    }
-  };
-
-  const handleFinish = async (values) => {
-    setUpdateLoading(true);
-    //let adjustmentsToInsert = {};
-
-    const { billlines, upload, ...bill } = values;
-    const updates = [];
-    updates.push(
-      update_bill({
-        variables: { billId: search.billid, bill: bill },
-      })
-    );
-
-    //Find bill lines that were deleted.
-    const deletedJobLines = [];
-
-    data.bills_by_pk.billlines.forEach((a) => {
-      const matchingRecord = billlines.find((b) => b.id === a.id);
-      if (!matchingRecord) {
-        deletedJobLines.push(a);
-      }
-    });
-
-    deletedJobLines.forEach((d) => {
-      updates.push(deleteBillLine({ variables: { id: d.id } }));
-    });
-
-    billlines.forEach((billline) => {
-      const { deductedfromlbr, jobline, ...il } = billline;
-      delete il.__typename;
-
-      if (il.id) {
-        updates.push(
-          updateBillLine({
-            variables: {
-              billLineId: il.id,
-              billLine: {
-                ...il,
-                deductedfromlbr: deductedfromlbr,
-                joblineid: il.joblineid === "noline" ? null : il.joblineid,
-              },
-            },
-          })
-        );
-      } else {
-        //It's a new line, have to insert it.
-        updates.push(
-          insertBillLine({
-            variables: {
-              billLines: [
-                {
-                  ...il,
-                  deductedfromlbr: deductedfromlbr,
-                  billid: search.billid,
-                  joblineid: il.joblineid === "noline" ? null : il.joblineid,
-                },
-              ],
-            },
-          })
-        );
-      }
-    });
-
-    await Promise.all(updates);
-
-    insertAuditTrail({
-      jobid: bill.jobid,
-      billid: search.billid,
-      operation: AuditTrailMapping.billupdated(bill.invoice_number),
-    });
-
-    await refetch();
-    form.setFieldsValue(transformData(data));
-    form.resetFields();
-    setVisible(false);
-    setUpdateLoading(false);
-  };
-
-  useEffect(() => {
-    if (search.billid && data) {
-      form.resetFields();
-    }
-  }, [form, search.billid, data]);
-
-  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;
-
   return (
     <Drawer
       width={drawerPercentage}
@@ -192,110 +31,10 @@ export function BillDetailEditcontainer({
         delete search.billid;
         history.push({ search: queryString.stringify(search) });
       }}
+      destroyOnClose
       visible={search.billid}
     >
-      {loading && <LoadingSkeleton />}
-      {!loading && (
-        <>
-          <PageHeader
-            title={
-              data &&
-              `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
-            }
-            extra={
-              <Space>
-                <Button
-                  disabled={data.bills_by_pk.is_credit_memo}
-                  onClick={() => {
-                    delete search.billid;
-                    history.push({ search: queryString.stringify(search) });
-                    setPartsOrderContext({
-                      actions: {},
-                      context: {
-                        jobId: data.bills_by_pk.jobid,
-                        vendorId: data.bills_by_pk.vendorid,
-                        returnFromBill: data.bills_by_pk.id,
-                        invoiceNumber: data.bills_by_pk.invoice_number,
-                        linesToOrder: data.bills_by_pk.billlines.map((i) => {
-                          return {
-                            line_desc: i.line_desc,
-                            //  db_price: i.actual_price,
-                            act_price: i.actual_price,
-                            cost: i.actual_cost,
-                            quantity: i.quantity,
-                            joblineid: i.joblineid,
-                            oem_partno: i.jobline && i.jobline.oem_partno,
-                            part_type: i.jobline && i.jobline.part_type,
-                          };
-                        }),
-                        isReturn: true,
-                      },
-                    });
-                  }}
-                >
-                  {t("bills.actions.return")}
-                </Button>
-
-                <Popconfirm
-                  visible={visible}
-                  onConfirm={() => form.submit()}
-                  onCancel={() => setVisible(false)}
-                  okButtonProps={{ loading: updateLoading }}
-                  title={t("bills.labels.editadjwarning")}
-                >
-                  <Button
-                    htmlType="submit"
-                    disabled={exported}
-                    onClick={handleSave}
-                    loading={updateLoading}
-                    type="primary"
-                  >
-                    {t("general.actions.save")}
-                  </Button>
-                </Popconfirm>
-                <BillReeportButtonComponent bill={data && data.bills_by_pk} />
-                <BillMarkExportedButton bill={data && data.bills_by_pk} />
-              </Space>
-            }
-          />
-          <Form
-            form={form}
-            onFinish={handleFinish}
-            initialValues={transformData(data)}
-            layout="vertical"
-          >
-            <BillFormContainer form={form} billEdit disabled={exported} />
-            <JobDocumentsGallery
-              jobId={data ? data.bills_by_pk.jobid : null}
-              billId={search.billid}
-              documentsList={data ? data.bills_by_pk.documents : []}
-              billsCallback={refetch}
-            />
-          </Form>
-        </>
-      )}
+      <BillDetailEditComponent />
     </Drawer>
   );
 }
-
-const transformData = (data) => {
-  return data
-    ? {
-        ...data.bills_by_pk,
-
-        billlines: data.bills_by_pk.billlines.map((i) => {
-          return {
-            ...i,
-            joblineid: !!i.joblineid ? i.joblineid : "noline",
-            applicable_taxes: {
-              federal:
-                (i.applicable_taxes && i.applicable_taxes.federal) || false,
-              state: (i.applicable_taxes && i.applicable_taxes.state) || false,
-              local: (i.applicable_taxes && i.applicable_taxes.local) || false,
-            },
-          };
-        }),
-        date: data.bills_by_pk ? moment(data.bills_by_pk.date) : null,
-      }
-    : {};
-};

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

@@ -1,16 +1,18 @@
 import { useApolloClient, useMutation } from "@apollo/client";
-import { Button, Form, Modal, notification, Space } from "antd";
+import { Button, Checkbox, Form, Modal, Space, notification } from "antd";
 import _ from "lodash";
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_BILL } from "../../graphql/bills.queries";
+import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import {
   QUERY_JOB_LBR_ADJUSTMENTS,
   UPDATE_JOB,
 } from "../../graphql/jobs.queries";
+import { MUTATION_MARK_RETURN_RECEIVED } from "../../graphql/parts-orders.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectBillEnterModal } from "../../redux/modals/modals.selectors";
@@ -18,10 +20,14 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
-import confirmDialog from "../../utils/asyncConfirm";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+import confirmDialog from "../../utils/asyncConfirm";
+import useLocalStorage from "../../utils/useLocalStorage";
 import BillFormContainer from "../bill-form/bill-form.container";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
+import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
 
 const mapStateToProps = createStructuredSelector({
@@ -35,6 +41,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(insertAuditTrail({ jobid, operation })),
 });
 
+const Templates = TemplateList("job_special");
+
 function BillEnterModalContainer({
   billEnterModal,
   toggleModalVisible,
@@ -47,9 +55,14 @@ function BillEnterModalContainer({
   const [enterAgain, setEnterAgain] = useState(false);
   const [insertBill] = useMutation(INSERT_NEW_BILL);
   const [updateJobLines] = useMutation(UPDATE_JOB_LINE);
+  const [updatePartsOrderLines] = useMutation(MUTATION_MARK_RETURN_RECEIVED);
+  const [updateInventoryLines] = useMutation(UPDATE_INVENTORY_LINES);
   const [loading, setLoading] = useState(false);
   const client = useApolloClient();
-
+  const [generateLabel, setGenerateLabel] = useLocalStorage(
+    "enter_bill_generate_label",
+    false
+  );
   const formValues = useMemo(() => {
     return {
       ...billEnterModal.context.bill,
@@ -76,7 +89,13 @@ function BillEnterModalContainer({
     }
 
     setLoading(true);
-    const { upload, location, ...remainingValues } = values;
+    const {
+      upload,
+      location,
+      outstanding_returns,
+      inventory,
+      ...remainingValues
+    } = values;
 
     let adjustmentsToInsert = {};
 
@@ -107,6 +126,17 @@ function BillEnterModalContainer({
                     deductedfromlbr: deductedfromlbr,
                     lbr_adjustment,
                     joblineid: i.joblineid === "noline" ? null : i.joblineid,
+                    applicable_taxes: {
+                      federal:
+                        (i.applicable_taxes && i.applicable_taxes.federal) ||
+                        false,
+                      state:
+                        (i.applicable_taxes && i.applicable_taxes.state) ||
+                        false,
+                      local:
+                        (i.applicable_taxes && i.applicable_taxes.local) ||
+                        false,
+                    },
                   };
                 }),
             },
@@ -133,6 +163,14 @@ function BillEnterModalContainer({
       adjKeys.forEach((key) => {
         newAdjustments[key] =
           (newAdjustments[key] || 0) + adjustmentsToInsert[key];
+
+        insertAuditTrail({
+          jobid: values.jobid,
+          operation: AuditTrailMapping.jobmodifylbradj({
+            mod_lbr_ty: key,
+            hours: adjustmentsToInsert[key].toFixed(1),
+          }),
+        });
       });
 
       const jobUpdate = client.mutate({
@@ -150,10 +188,25 @@ function BillEnterModalContainer({
         });
         return;
       }
-      insertAuditTrail({
-        jobid: values.jobid,
-        operation: AuditTrailMapping.jobmodifylbradj(),
+    }
+
+    const markPolReceived =
+      outstanding_returns &&
+      outstanding_returns.filter((o) => o.cm_received === true);
+
+    if (markPolReceived && markPolReceived.length > 0) {
+      const r2 = await updatePartsOrderLines({
+        variables: { partsLineIds: markPolReceived.map((p) => p.id) },
       });
+      if (!!r2.errors) {
+        setLoading(false);
+        setEnterAgain(false);
+        notification["error"]({
+          message: t("parts_orders.errors.updating", {
+            message: JSON.stringify(r2.errors),
+          }),
+        });
+      }
     }
 
     if (!!r1.errors) {
@@ -167,46 +220,97 @@ function BillEnterModalContainer({
     }
 
     const billId = r1.data.insert_bills.returning[0].id;
+    const markInventoryConsumed =
+      inventory && inventory.filter((i) => i.consumefrominventory);
 
-    await Promise.all(
-      remainingValues.billlines
-        .filter((il) => il.joblineid !== "noline")
-        .map((li) => {
-          return updateJobLines({
-            variables: {
-              lineId: li.joblineid,
-              line: {
-                location: li.location || location,
-                status:
-                  bodyshop.md_order_statuses.default_received || "Received*",
+    if (markInventoryConsumed && markInventoryConsumed.length > 0) {
+      const r2 = await updateInventoryLines({
+        variables: {
+          InventoryIds: markInventoryConsumed.map((p) => p.id),
+          consumedbybillid: billId,
+        },
+      });
+      if (!!r2.errors) {
+        setLoading(false);
+        setEnterAgain(false);
+        notification["error"]({
+          message: t("inventory.errors.updating", {
+            message: JSON.stringify(r2.errors),
+          }),
+        });
+      }
+    }
+    //If it's not a credit memo, update the statuses.
+
+    if (!values.is_credit_memo) {
+      await Promise.all(
+        remainingValues.billlines
+          .filter((il) => il.joblineid !== "noline")
+          .map((li) => {
+            return updateJobLines({
+              variables: {
+                lineId: li.joblineid,
+                line: {
+                  location: li.location || location,
+                  status:
+                    bodyshop.md_order_statuses.default_received || "Received*",
+                },
               },
-            },
-          });
-        })
-    );
+            });
+          })
+      );
+    }
 
     /////////////////////////
     if (upload && upload.length > 0) {
       //insert Each of the documents?
-      upload.forEach((u) => {
-        handleUpload(
-          { file: u.originFileObj },
-          {
-            bodyshop: bodyshop,
-            uploaded_by: currentUser.email,
-            jobId: values.jobid,
-            billId: billId,
-            tagsArray: null,
-            callback: null,
-          }
-        );
-      });
+
+      if (bodyshop.uselocalmediaserver) {
+        upload.forEach((u) => {
+          handleLocalUpload({
+            ev: { file: u.originFileObj },
+            context: {
+              jobid: values.jobid,
+              invoice_number: remainingValues.invoice_number,
+              vendorid: remainingValues.vendorid,
+            },
+          });
+        });
+      } else {
+        upload.forEach((u) => {
+          handleUpload(
+            { file: u.originFileObj },
+            {
+              bodyshop: bodyshop,
+              uploaded_by: currentUser.email,
+              jobId: values.jobid,
+              billId: billId,
+              tagsArray: null,
+              callback: null,
+            }
+          );
+        });
+      }
     }
     ///////////////////////////
     setLoading(false);
     notification["success"]({
       message: t("bills.successes.created"),
     });
+
+    if (generateLabel) {
+      GenerateDocument(
+        {
+          name: Templates.parts_invoice_label_single.key,
+          variables: {
+            id: billId,
+          },
+        },
+        {},
+        "p"
+      );
+    }
+
     if (billEnterModal.actions.refetch) billEnterModal.actions.refetch();
 
     insertAuditTrail({
@@ -262,6 +366,12 @@ function BillEnterModalContainer({
       }}
       footer={
         <Space>
+          <Checkbox
+            checked={generateLabel}
+            onChange={(e) => setGenerateLabel(e.target.checked)}
+          >
+            {t("bills.labels.generatepartslabel")}
+          </Checkbox>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
           <Button loading={loading} onClick={() => form.submit()}>
             {t("general.actions.save")}

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

@@ -1,6 +1,6 @@
 import Icon, { UploadOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
-import { MdOpenInNew } from "react-icons/md";
+import { useTreatments } from "@splitsoftware/splitio-react";
 import {
   Alert,
   Divider,
@@ -12,14 +12,17 @@ import {
   Switch,
   Upload,
 } 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";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
@@ -28,8 +31,6 @@ 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 { useTreatments } from "@splitsoftware/splitio-react";
-import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -47,6 +48,8 @@ export function BillFormComponent({
   billEdit,
   disableInvNumber,
   job,
+  loadOutstandingReturns,
+  loadInventory,
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -56,8 +59,23 @@ export function BillFormComponent({
     {},
     bodyshop.imexshopid
   );
+  const { ClosingPeriod } = useTreatments(
+    ["ClosingPeriod"],
+    {},
+    bodyshop.imexshopid
+  );
+
   const handleVendorSelect = (props, opt) => {
     setDiscount(opt.discount);
+
+    opt &&
+      !billEdit &&
+      loadOutstandingReturns({
+        variables: {
+          jobId: form.getFieldValue("jobid"),
+          vendorId: opt.value,
+        },
+      });
   };
 
   useEffect(() => {
@@ -65,8 +83,8 @@ export function BillFormComponent({
   }, [job, form]);
 
   useEffect(() => {
-    if (form.getFieldValue("vendorid") && vendorAutoCompleteOptions) {
-      const vendorId = form.getFieldValue("vendorid");
+    const vendorId = form.getFieldValue("vendorid");
+    if (vendorId && vendorAutoCompleteOptions) {
       const matchingVendors = vendorAutoCompleteOptions.filter(
         (v) => v.id === vendorId
       );
@@ -74,10 +92,32 @@ export function BillFormComponent({
         setDiscount(matchingVendors[0].discount);
       }
     }
-    if (form.getFieldValue("jobid")) {
-      loadLines({ variables: { id: form.getFieldValue("jobid") } });
+    const jobId = form.getFieldValue("jobid");
+    if (jobId) {
+      loadLines({ variables: { id: jobId } });
+      if (form.getFieldValue("is_credit_memo") && vendorId && !billEdit) {
+        loadOutstandingReturns({
+          variables: {
+            jobId: jobId,
+            vendorId: vendorId,
+          },
+        });
+      }
     }
-  }, [form, setDiscount, vendorAutoCompleteOptions, loadLines]);
+
+    if (vendorId === bodyshop.inhousevendorid && !billEdit) {
+      loadInventory();
+    }
+  }, [
+    form,
+    billEdit,
+    loadOutstandingReturns,
+    loadInventory,
+    setDiscount,
+    vendorAutoCompleteOptions,
+    loadLines,
+    bodyshop.inhousevendorid,
+  ]);
 
   return (
     <div>
@@ -107,6 +147,14 @@ export function BillFormComponent({
             onBlur={() => {
               if (form.getFieldValue("jobid") !== null) {
                 loadLines({ variables: { id: form.getFieldValue("jobid") } });
+                if (form.getFieldValue("vendorid") !== null) {
+                  loadOutstandingReturns({
+                    variables: {
+                      jobId: form.getFieldValue("jobid"),
+                      vendorId: form.getFieldValue("vendorid"),
+                    },
+                  });
+                }
               }
             }}
           />
@@ -217,6 +265,37 @@ export function BillFormComponent({
               required: true,
               //message: t("general.validation.required"),
             },
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (
+                  ClosingPeriod.treatment === "on" &&
+                  bodyshop.accountingconfig.ClosingPeriod
+                ) {
+                  if (
+                    moment(value)
+                      .startOf("day")
+                      .isSameOrAfter(
+                        moment(
+                          bodyshop.accountingconfig.ClosingPeriod[0]
+                        ).startOf("day")
+                      ) &&
+                    moment(value)
+                      .startOf("day")
+                      .isSameOrBefore(
+                        moment(
+                          bodyshop.accountingconfig.ClosingPeriod[1]
+                        ).endOf("day")
+                      )
+                  ) {
+                    return Promise.resolve();
+                  } else {
+                    return Promise.reject(t("bills.validation.closingperiod"));
+                  }
+                } else {
+                  return Promise.resolve();
+                }
+              },
+            }),
           ]}
         >
           <FormDatePicker disabled={disabled} />
@@ -228,8 +307,23 @@ export function BillFormComponent({
           rules={[
             ({ getFieldValue }) => ({
               validator(rule, value) {
+                if (
+                  value === true &&
+                  getFieldValue("jobid") &&
+                  getFieldValue("vendorid")
+                ) {
+                  //Removed as this would cause an additional reload when validating the form on submit and clear the values.
+                  // loadOutstandingReturns({
+                  //   variables: {
+                  //     jobId: form.getFieldValue("jobid"),
+                  //     vendorId: form.getFieldValue("vendorid"),
+                  //   },
+                  // });
+                }
+
                 if (
                   !bodyshop.bill_allow_post_to_closed &&
+                  job &&
                   (job.status === bodyshop.md_ro_statuses.default_invoiced ||
                     job.status === bodyshop.md_ro_statuses.default_exported ||
                     job.status === bodyshop.md_ro_statuses.default_void) &&
@@ -257,15 +351,17 @@ export function BillFormComponent({
         >
           <CurrencyInput min={0} disabled={disabled} />
         </Form.Item>
-        <Form.Item label={t("bills.fields.allpartslocation")} name="location">
-          <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
-            {bodyshop.md_parts_locations.map((loc, idx) => (
-              <Select.Option key={idx} value={loc}>
-                {loc}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
+        {!billEdit && (
+          <Form.Item label={t("bills.fields.allpartslocation")} name="location">
+            <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
+              {bodyshop.md_parts_locations.map((loc, idx) => (
+                <Select.Option key={idx} value={loc}>
+                  {loc}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+        )}
       </LayoutFormRow>
       <LayoutFormRow>
         <Form.Item
@@ -380,6 +476,7 @@ export function BillFormComponent({
           form={form}
           responsibilityCenters={responsibilityCenters}
           disabled={disabled}
+          billEdit={billEdit}
         />
       )}
 

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

@@ -6,6 +6,11 @@ import { GET_JOB_LINES_TO_ENTER_BILL } from "../../graphql/jobs-lines.queries";
 import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import BillFormComponent from "./bill-form.component";
+import BillCmdReturnsTableComponent from "../bill-cm-returns-table/bill-cm-returns-table.component";
+import { QUERY_UNRECEIVED_LINES } from "../../graphql/parts-orders.queries";
+import BillInventoryTable from "../bill-inventory-table/bill-inventory-table.component";
+import { QUERY_OUTSTANDING_INVENTORY } from "../../graphql/inventory.queries";
+import { useTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -18,6 +23,12 @@ export function BillFormContainer({
   disabled,
   disableInvNumber,
 }) {
+  const { Simple_Inventory } = useTreatments(
+    ["Simple_Inventory"],
+    {},
+    bodyshop && bodyshop.imexshopid
+  );
+
   const { data: VendorAutoCompleteData } = useQuery(
     SEARCH_VENDOR_AUTOCOMPLETE,
     { fetchPolicy: "network-only", nextFetchPolicy: "network-only" }
@@ -27,20 +38,44 @@ export function BillFormContainer({
     GET_JOB_LINES_TO_ENTER_BILL
   );
 
+  const [loadOutstandingReturns, { loading: returnLoading, data: returnData }] =
+    useLazyQuery(QUERY_UNRECEIVED_LINES);
+  const [loadInventory, { loading: inventoryLoading, data: inventoryData }] =
+    useLazyQuery(QUERY_OUTSTANDING_INVENTORY);
+
   return (
-    <BillFormComponent
-      disabled={disabled}
-      form={form}
-      billEdit={billEdit}
-      vendorAutoCompleteOptions={
-        VendorAutoCompleteData && VendorAutoCompleteData.vendors
-      }
-      loadLines={loadLines}
-      lineData={lineData ? lineData.joblines : []}
-      job={lineData ? lineData.jobs_by_pk : null}
-      responsibilityCenters={bodyshop.md_responsibility_centers || null}
-      disableInvNumber={disableInvNumber}
-    />
+    <>
+      <BillFormComponent
+        disabled={disabled}
+        form={form}
+        billEdit={billEdit}
+        vendorAutoCompleteOptions={
+          VendorAutoCompleteData && VendorAutoCompleteData.vendors
+        }
+        loadLines={loadLines}
+        lineData={lineData ? lineData.joblines : []}
+        job={lineData ? lineData.jobs_by_pk : null}
+        responsibilityCenters={bodyshop.md_responsibility_centers || null}
+        disableInvNumber={disableInvNumber}
+        loadOutstandingReturns={loadOutstandingReturns}
+        loadInventory={loadInventory}
+      />
+      {!billEdit && (
+        <BillCmdReturnsTableComponent
+          form={form}
+          returnLoading={returnLoading}
+          returnData={returnData}
+        />
+      )}
+      {Simple_Inventory.treatment === "on" && (
+        <BillInventoryTable
+          form={form}
+          inventoryLoading={inventoryLoading}
+          inventoryData={billEdit ? [] : inventoryData}
+          billEdit={billEdit}
+        />
+      )}
+    </>
   );
 }
 export default connect(mapStateToProps, null)(BillFormContainer);

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

@@ -1,7 +1,7 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
+import { useTreatments } from "@splitsoftware/splitio-react";
 import {
-  Button,
-  Form,
+  Button, Form,
   Input,
   InputNumber,
   Select,
@@ -17,6 +17,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
 import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
+import BilllineAddInventory from "../billline-add-inventory/billline-add-inventory.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -34,10 +35,16 @@ export function BillEnterModalLinesComponent({
   discount,
   form,
   responsibilityCenters,
+  billEdit,
+  billid,
 }) {
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
-
+  const { Simple_Inventory } = useTreatments(
+    ["Simple_Inventory"],
+    {},
+    bodyshop && bodyshop.imexshopid
+  );
   const columns = (remove) => {
     return [
       {
@@ -142,11 +149,29 @@ export function BillEnterModalLinesComponent({
                 required: true,
                 //message: t("general.validation.required"),
               },
+              ({ getFieldValue }) => ({
+                validator(rule, value) {
+                  if (
+                    value &&
+                    getFieldValue("billlines")[field.fieldKey]?.inventories
+                      ?.length > value
+                  ) {
+                    return Promise.reject(
+                      t("bills.validation.inventoryquantity", {
+                        number:
+                          getFieldValue("billlines")[field.fieldKey]
+                            ?.inventories?.length,
+                      })
+                    );
+                  }
+                  return Promise.resolve();
+                },
+              }),
             ],
           };
         },
         formInput: (record, index) => (
-          <InputNumber precision={0} min={0} disabled={disabled} />
+          <InputNumber precision={0} min={1} disabled={disabled} />
         ),
       },
       {
@@ -297,28 +322,31 @@ export function BillEnterModalLinesComponent({
           </Select>
         ),
       },
-
-      {
-        title: t("billlines.fields.location"),
-        dataIndex: "location",
-        editable: true,
-        label: t("billlines.fields.location"),
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}location`,
-            name: [field.name, "location"],
-          };
-        },
-        formInput: (record, index) => (
-          <Select disabled={disabled}>
-            {bodyshop.md_parts_locations.map((loc, idx) => (
-              <Select.Option key={idx} value={loc}>
-                {loc}
-              </Select.Option>
-            ))}
-          </Select>
-        ),
-      },
+      ...(billEdit
+        ? []
+        : [
+            {
+              title: t("billlines.fields.location"),
+              dataIndex: "location",
+              editable: true,
+              label: t("billlines.fields.location"),
+              formItemProps: (field) => {
+                return {
+                  key: `${field.index}location`,
+                  name: [field.name, "location"],
+                };
+              },
+              formInput: (record, index) => (
+                <Select disabled={disabled}>
+                  {bodyshop.md_parts_locations.map((loc, idx) => (
+                    <Select.Option key={idx} value={loc}>
+                      {loc}
+                    </Select.Option>
+                  ))}
+                </Select>
+              ),
+            },
+          ]),
       {
         title: t("billlines.labels.deductedfromlbr"),
         dataIndex: "deductedfromlbr",
@@ -477,9 +505,33 @@ export function BillEnterModalLinesComponent({
 
         dataIndex: "actions",
         render: (text, record) => (
-          <Button disabled={disabled} onClick={() => remove(record.name)}>
-            <DeleteFilled />
-          </Button>
+          <Form.Item shouldUpdate noStyle>
+            {() => (
+              <Space wrap>
+                <Button
+                  disabled={
+                    disabled ||
+                    getFieldValue("billlines")[record.fieldKey]?.inventories
+                      ?.length > 0
+                  }
+                  onClick={() => remove(record.name)}
+                >
+                  <DeleteFilled />
+                </Button>
+                {Simple_Inventory.treatment === "on" && (
+                  <BilllineAddInventory
+                    disabled={
+                      !billEdit ||
+                      form.isFieldsTouched() ||
+                      form.getFieldValue("is_credit_memo")
+                    }
+                    billline={getFieldValue("billlines")[record.fieldKey]}
+                    jobid={getFieldValue("jobid")}
+                  />
+                )}
+              </Space>
+            )}
+          </Form.Item>
         ),
       },
     ];
@@ -502,7 +554,20 @@ export function BillEnterModalLinesComponent({
     });
 
   return (
-    <Form.List name="billlines">
+    <Form.List
+      name="billlines"
+      rules={[
+        {
+          validator: async (_, billlines) => {
+            if (!billlines || billlines.length < 1) {
+              return Promise.reject(
+                new Error(t("billlines.validation.atleastone"))
+              );
+            }
+          },
+        },
+      ]}
+    >
       {(fields, { add, remove, move }) => {
         return (
           <>

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

@@ -0,0 +1,173 @@
+import { Checkbox, Form, Skeleton, Typography } from "antd";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
+import "./bill-inventory-table.styles.scss";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectBillEnterModal } from "../../redux/modals/modals.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  billEnterModal: selectBillEnterModal,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(BillInventoryTable);
+
+export function BillInventoryTable({
+  billEnterModal,
+  bodyshop,
+  form,
+  billEdit,
+  inventoryLoading,
+  inventoryData,
+}) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (inventoryData && inventoryData.inventory) {
+      form.setFieldsValue({
+        inventory: billEnterModal.context.consumeinventoryid
+          ? inventoryData.inventory.map((i) => {
+              if (i.id === billEnterModal.context.consumeinventoryid)
+                i.consumefrominventory = true;
+              return i;
+            })
+          : inventoryData.inventory,
+      });
+    }
+  }, [inventoryData, form, billEnterModal.context.consumeinventoryid]);
+
+  return (
+    <Form.Item
+      shouldUpdate={(prev, cur) => prev.vendorid !== cur.vendorid}
+      noStyle
+    >
+      {() => {
+        const is_inhouse =
+          form.getFieldValue("vendorid") === bodyshop.inhousevendorid;
+
+        if (!is_inhouse || billEdit) {
+          return null;
+        }
+
+        if (inventoryLoading) return <Skeleton />;
+
+        return (
+          <Form.List name="inventory">
+            {(fields, { add, remove, move }) => {
+              return (
+                <>
+                  <Typography.Title level={4}>
+                    {t("inventory.labels.inventory")}
+                  </Typography.Title>
+                  <table className="bill-inventory-table">
+                    <thead>
+                      <tr>
+                        <th>{t("billlines.fields.line_desc")}</th>
+                        <th>{t("vendors.fields.name")}</th>
+                        <th>{t("billlines.fields.quantity")}</th>
+                        <th>{t("billlines.fields.actual_price")}</th>
+                        <th>{t("billlines.fields.actual_cost")}</th>
+                        <th>{t("inventory.fields.comment")}</th>
+                        <th>{t("inventory.actions.consumefrominventory")}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {fields.map((field, index) => (
+                        <tr key={field.key}>
+                          <td>
+                            <Form.Item
+                              //   label={t("joblines.fields.line_desc")}
+                              key={`${index}line_desc`}
+                              name={[field.name, "line_desc"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}part_type`}
+                              name={[
+                                field.name,
+                                "billline",
+                                "bill",
+                                "vendor",
+                                "name",
+                              ]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}quantity`}
+                              name={[field.name, "quantity"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}act_price`}
+                              name={[field.name, "actual_price"]}
+                            >
+                              <ReadOnlyFormItemComponent type="currency" />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}cost`}
+                              name={[field.name, "actual_cost"]}
+                            >
+                              <ReadOnlyFormItemComponent type="currency" />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}comment`}
+                              name={[field.name, "comment"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}consumefrominventory`}
+                              name={[field.name, "consumefrominventory"]}
+                              valuePropName="checked"
+                            >
+                              <Checkbox />
+                            </Form.Item>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </>
+              );
+            }}
+          </Form.List>
+        );
+      }}
+    </Form.Item>
+  );
+}

client/src/components/bill-inventory-table/bill-inventory-table.styles.scss

@@ -0,0 +1,19 @@
+.bill-inventory-table {
+    table-layout: fixed;
+    width: 100%;
+
+    th,
+    td {
+        padding: 8px;
+        text-align: left;
+        border-bottom: 1px solid #ddd;
+
+        .ant-form-item {
+            margin-bottom: 0px !important;
+        }
+    }
+
+    tr:hover {
+        background-color: #f5f5f5;
+    }
+}

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

@@ -27,6 +27,10 @@ const BillLineSearchSelect = (
             option.oem_partno
               .toLowerCase()
               .includes(inputValue.toLowerCase())) ||
+          (option.alt_partno &&
+            option.alt_partno
+              .toLowerCase()
+              .includes(inputValue.toLowerCase())) ||
           (option.act_price &&
             option.act_price.toString().startsWith(inputValue.toString()))
         );
@@ -48,14 +52,17 @@ const BillLineSearchSelect = (
               line_desc={item.line_desc}
               part_qty={item.part_qty}
               oem_partno={item.oem_partno}
+              alt_partno={item.alt_partno}
               act_price={item.act_price}
               style={{
                 ...(item.removed ? { textDecoration: "line-through" } : {}),
               }}
             >
-              <span>{`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
-                item.oem_partno ? ` - ${item.oem_partno}` : ""
-              }`}</span>
+              <span>
+                {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
+                  item.oem_partno ? ` - ${item.oem_partno}` : ""
+                }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
+              </span>
               <span style={{ float: "right", paddingleft: "1rem" }}>
                 {item.act_price
                   ? `$${item.act_price && item.act_price.toFixed(2)}`

client/src/components/bill-mark-exported-button/bill-mark-exported-button.component.jsx

@@ -9,11 +9,14 @@ import { createStructuredSelector } from "reselect";
 import {
   selectAuthLevel,
   selectBodyshop,
+  selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
+import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   authLevel: selectAuthLevel,
+  currentUser: selectCurrentUser,
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -24,9 +27,15 @@ export default connect(
   mapDispatchToProps
 )(BillMarkExportedButton);
 
-export function BillMarkExportedButton({ bodyshop, authLevel, bill }) {
+export function BillMarkExportedButton({
+  currentUser,
+  bodyshop,
+  authLevel,
+  bill,
+}) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
 
   const [updateBill] = useMutation(gql`
     mutation UPDATE_BILL($billId: uuid!) {
@@ -46,6 +55,20 @@ export function BillMarkExportedButton({ bodyshop, authLevel, bill }) {
       variables: { billId: bill.id },
     });
 
+    await insertExportLog({
+      variables: {
+        logs: [
+          {
+            bodyshopid: bodyshop.id,
+            billid: bill.id,
+            successful: true,
+            message: JSON.stringify([t("general.labels.markedexported")]),
+            useremail: currentUser.email,
+          },
+        ],
+      },
+    });
+
     if (!result.errors) {
       notification["success"]({
         message: t("bills.successes.markexported"),
@@ -69,11 +92,7 @@ export function BillMarkExportedButton({ bodyshop, authLevel, bill }) {
 
   if (hasAccess)
     return (
-      <Button
-        loading={loading}
-        disabled={bill.exported}
-        onClick={handleUpdate}
-      >
+      <Button loading={loading} disabled={bill.exported} onClick={handleUpdate}>
         {t("bills.labels.markexported")}
       </Button>
     );

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

@@ -0,0 +1,155 @@
+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 React, { useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { INSERT_INVENTORY_AND_CREDIT } from "../../graphql/inventory.queries";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BilllineAddInventory);
+
+export function BilllineAddInventory({
+  currentUser,
+  bodyshop,
+  billline,
+  disabled,
+  jobid,
+}) {
+  const [loading, setLoading] = useState(false);
+  const { billid } = queryString.parse(useLocation().search);
+
+  const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
+
+  const addToInventory = async () => {
+    setLoading(true);
+
+    //Check to  make sure there are no existing items already in the inventory.
+
+    const cm = {
+      vendorid: bodyshop.inhousevendorid,
+      invoice_number: "ih",
+      jobid: jobid,
+      isinhouse: true,
+      is_credit_memo: true,
+      date: moment().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,
+      total: 0,
+      billlines: [
+        {
+          actual_price: billline.actual_price,
+          actual_cost: billline.actual_cost,
+          quantity: billline.quantity,
+          line_desc: billline.line_desc,
+          cost_center: billline.cost_center,
+          deductedfromlbr: billline.deductedfromlbr,
+          applicable_taxes: {
+            local: billline.applicable_taxes.local,
+            state: billline.applicable_taxes.state,
+            federal: billline.applicable_taxes.federal,
+          },
+        },
+      ],
+    };
+
+    cm.total = CalculateBillTotal(cm).enteredTotal.getAmount() / 100;
+
+    const insertResult = await insertInventoryLine({
+      variables: {
+        joblineId:
+          billline.joblineid === "noline" ? billline.id : billline.joblineid, //This will return null as there will be no jobline that has the id of the bill line.
+        //Unfortunately, we can't send null as the GQL syntax validation fails.
+        joblineStatus: bodyshop.md_order_statuses.default_returned,
+        inv: {
+          shopid: bodyshop.id,
+          billlineid: billline.id,
+          actual_price: billline.actual_price,
+          actual_cost: billline.actual_cost,
+          quantity: billline.quantity,
+          line_desc: billline.line_desc,
+        },
+        cm: { ...cm, billlines: { data: cm.billlines } }, //Fix structure for apollo insert.
+        pol: {
+          returnfrombill: billid,
+          vendorid: bodyshop.inhousevendorid,
+          deliver_by: moment().format("YYYY-MM-DD"),
+          parts_order_lines: {
+            data: [
+              {
+                line_desc: billline.line_desc,
+
+                act_price: billline.actual_price,
+                cost: billline.actual_cost,
+                quantity: billline.quantity,
+                job_line_id:
+                  billline.joblineid === "noline" ? null : billline.joblineid,
+                part_type: billline.jobline && billline.jobline.part_type,
+                cm_received: true,
+              },
+            ],
+          },
+          order_date: "2022-06-01",
+          orderedby: currentUser.email,
+          jobid: jobid,
+          user_email: currentUser.email,
+          return: true,
+          status: "Ordered",
+        },
+      },
+      refetchQueries: ["QUERY_BILL_BY_PK"],
+    });
+
+    if (!insertResult.errors) {
+      notification.open({
+        type: "success",
+        message: t("inventory.successes.inserted"),
+      });
+    } else {
+      notification.open({
+        type: "error",
+        message: t("inventory.errors.inserting", {
+          error: JSON.stringify(insertResult.errors),
+        }),
+      });
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <Tooltip title={t("inventory.actions.addtoinventory")}>
+      <Button
+        loading={loading}
+        disabled={
+          disabled || billline?.inventories?.length >= billline.quantity
+        }
+        onClick={addToInventory}
+      >
+        <FileAddFilled />
+        {billline?.inventories?.length > 0 && (
+          <div>({billline?.inventories?.length} in inv)</div>
+        )}
+      </Button>
+    </Tooltip>
+  );
+}

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

@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -11,10 +12,11 @@ import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
 import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
+import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
-  //jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly,
   bodyshop: selectBodyshop,
 });
 
@@ -29,6 +31,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function BillsListTableComponent({
   bodyshop,
+  jobRO,
   job,
   billsQuery,
   handleOnRowClick,
@@ -43,6 +46,8 @@ export function BillsListTableComponent({
   });
   // const search = queryString.parse(useLocation().search);
   // const selectedBill = search.billid;
+  const [searchText, setSearchText] = useState("");
+
   const Templates = TemplateList("bill");
   const bills = billsQuery.data ? billsQuery.data.bills : [];
   const { refetch } = billsQuery;
@@ -54,38 +59,15 @@ export function BillsListTableComponent({
         </Button>
       )}
       <BillDeleteButton bill={record} />
-      <Button
+      <BillDetailEditReturnComponent
+        data={{ bills_by_pk: { ...record, jobid: job.id } }}
         disabled={
-          record.is_credit_memo || record.vendorid === bodyshop.inhousevendorid
+          record.is_credit_memo ||
+          record.vendorid === bodyshop.inhousevendorid ||
+          jobRO
         }
-        onClick={() => {
-          console.log(record);
-          setPartsOrderContext({
-            actions: {},
-            context: {
-              jobId: job.id,
-              vendorId: record.vendorid,
-              returnFromBill: record.id,
-              invoiceNumber: record.invoice_number,
-              linesToOrder: record.billlines.map((i) => {
-                return {
-                  line_desc: i.line_desc,
-                  // db_price: i.actual_price,
-                  act_price: i.actual_price,
-                  cost: i.actual_cost,
-                  quantity: i.quantity,
-                  joblineid: i.joblineid,
-                  oem_partno: i.jobline && i.jobline.oem_partno,
-                  part_type: i.jobline && i.jobline.part_type,
-                };
-              }),
-              isReturn: true,
-            },
-          });
-        }}
-      >
-        {t("bills.actions.return")}
-      </Button>
+      />
+
       {record.isinhouse && (
         <PrintWrapperComponent
           templateObject={{
@@ -167,6 +149,24 @@ export function BillsListTableComponent({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
+  const filteredBills = bills
+    ? searchText === ""
+      ? bills
+      : bills.filter(
+          (b) =>
+            (b.invoice_number || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (b.vendor.name || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (b.total || "")
+              .toString()
+              .toLowerCase()
+              .includes(searchText.toLowerCase())
+        )
+    : [];
+
   return (
     <Card
       title={t("bills.labels.bills")}
@@ -207,8 +207,10 @@ export function BillsListTableComponent({
 
           <Input.Search
             placeholder={t("general.labels.search")}
+            value={searchText}
             onChange={(e) => {
               e.preventDefault();
+              setSearchText(e.target.value);
             }}
           />
         </Space>
@@ -221,7 +223,7 @@ export function BillsListTableComponent({
         }}
         columns={columns}
         rowKey="id"
-        dataSource={bills}
+        dataSource={filteredBills}
         onChange={handleTableChange}
       />
     </Card>

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

@@ -7,7 +7,9 @@ import { createStructuredSelector } from "reselect";
 import { selectBreadcrumbs } from "../../redux/application/application.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";
 
 const mapStateToProps = createStructuredSelector({
   breadcrumbs: selectBreadcrumbs,
@@ -15,6 +17,12 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function BreadCrumbs({ breadcrumbs, bodyshop }) {
+  const { OpenSearch } = useTreatments(
+    ["OpenSearch"],
+    {},
+    bodyshop && bodyshop.imexshopid
+  );
+
   return (
     <Row className="breadcrumb-container">
       <Col xs={24} sm={24} md={16}>
@@ -38,7 +46,7 @@ export function BreadCrumbs({ breadcrumbs, bodyshop }) {
         </Breadcrumb>
       </Col>
       <Col xs={24} sm={24} md={8}>
-        <GlobalSearch />
+        {OpenSearch.treatment === "on" ? <GlobalSearchOs /> : <GlobalSearch />}
       </Col>
     </Row>
   );

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

@@ -39,7 +39,13 @@ export function ContractsFindModalContainer({
       if (!claim || !shortclaim) return;
       const trimmedShortClaim = shortclaim.trim();
       // const trimmedClaim = claim.trim();
-      claimNumbers.push({ claim: trimmedShortClaim, amount });
+      if (amount.slice(-1) === "-") {
+      }
+
+      claimNumbers.push({
+        claim: trimmedShortClaim,
+        amount: amount.slice(-1) === "-" ? parseFloat(amount) * -1 : amount,
+      });
     });
 
     await GenerateDocument(

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

@@ -10,7 +10,10 @@ export default function CABCpvrtCalculator({ disabled, form }) {
 
   const handleFinish = async (values) => {
     logImEXEvent("job_ca_bc_pvrt_calculate");
-    form.setFieldsValue({ ca_bc_pvrt: (values.rate * values.days).toFixed(2) });
+    form.setFieldsValue({
+      ca_bc_pvrt: ((values.rate || 0) * (values.days || 0)).toFixed(2),
+    });
+    form.setFields([{ name: "ca_bc_pvrt", touched: true }]);
     setVisibility(false);
   };
 

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

@@ -0,0 +1,281 @@
+import { useMutation, useQuery } from "@apollo/client";
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  InputNumber,
+  Row,
+  Spin,
+  notification,
+} from "antd";
+import axios from "axios";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  INSERT_PAYMENT_RESPONSE,
+  QUERY_RO_AND_OWNER_BY_JOB_PK,
+} from "../../graphql/payment_response.queries";
+import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectCardPayment } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import DataLabel from "../data-label/data-label.component";
+import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+
+const mapStateToProps = createStructuredSelector({
+  cardPaymentModal: selectCardPayment,
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+  toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment")),
+});
+
+const CardPaymentModalComponent = ({
+  bodyshop,
+  cardPaymentModal,
+  toggleModalVisible,
+  insertAuditTrail,
+}) => {
+  const { context } = cardPaymentModal;
+
+  const [form] = Form.useForm();
+  const amount = Form.useWatch("amount", form);
+  const jobid = Form.useWatch("jobid", form);
+  const [loading, setLoading] = useState(false);
+  const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
+  const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
+  const { t } = useTranslation();
+
+  const { data, refetch } = useQuery(QUERY_RO_AND_OWNER_BY_JOB_PK, {
+    variables: { jobid: context?.jobid ?? "" },
+    skip: !context?.jobid,
+  });
+
+  //Initialize the intellipay window.
+  const SetIntellipayCallbackFunctions = () => {
+    console.log("*** Set IntelliPay callback functions.");
+    window.intellipay.runOnClose(() => {
+      //window.intellipay.initialize();
+    });
+
+    window.intellipay.runOnApproval(async function (response) {
+      console.warn("*** Running On Approval Script ***");
+      form.setFieldValue("paymentResponse", response);
+      form.submit();
+    });
+
+    window.intellipay.runOnNonApproval(async function (response) {
+      // Mutate unsuccessful payment
+      await insertPaymentResponse({
+        variables: {
+          paymentResponse: {
+            amount: response.amount,
+            bodyshopid: bodyshop.id,
+            jobid: jobid || context.jobid,
+            declinereason: response.declinereason,
+            ext_paymentid: response.paymentid.toString(),
+            successful: false,
+            response,
+          },
+        },
+      });
+      insertAuditTrail({
+        jobid: jobid || context?.jobid,
+        operation: AuditTrailMapping.failedpayment(),
+      });
+    });
+  };
+
+  const handleFinish = async (values) => {
+    try {
+      const paymentResult = await insertPayment({
+        variables: {
+          paymentInput: {
+            amount: values.amount,
+            transactionid: (values.paymentResponse.paymentid || "").toString(),
+            payer: t("payments.labels.customer"),
+            type: values.paymentResponse.cardbrand,
+            jobid: values.jobid,
+            date: moment(Date.now()),
+          },
+        },
+        refetchQueries: ["GET_JOB_BY_PK"],
+        update(cache, { data }) {
+          cache.modify({
+            id: cache.identify({ id: values.jobid, __typename: "jobs" }),
+            fields: {
+              payments(cachedPayments) {
+                return [...data.insert_payments.returning, ...cachedPayments];
+              },
+            },
+          });
+        },
+      });
+
+      await insertPaymentResponse({
+        variables: {
+          paymentResponse: {
+            amount: values.amount,
+            bodyshopid: bodyshop.id,
+            paymentid: paymentResult.data.insert_payments.returning[0].id,
+            jobid: values.jobid,
+            declinereason: values.paymentResponse.declinereason,
+            ext_paymentid: values.paymentResponse.paymentid.toString(),
+            successful: true,
+            response: values.paymentResponse,
+          },
+        },
+      });
+      toggleModalVisible();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleIntelliPayCharge = async () => {
+    setLoading(true);
+    try {
+      console.warn("*** Window.Intellipay", !!window.intellipay);
+
+      const response = await axios.post("/intellipay/lightbox_credentials", {
+        bodyshop,
+        refresh: !!window.intellipay,
+      });
+
+      if (window.intellipay) {
+        // eslint-disable-next-line no-eval
+        eval(response.data);
+        SetIntellipayCallbackFunctions();
+        window.intellipay.autoOpen();
+      } else {
+        var rg = document.createRange();
+        let node = rg.createContextualFragment(response.data);
+        document.documentElement.appendChild(node);
+        SetIntellipayCallbackFunctions();
+        window.intellipay.isAutoOpen = true;
+        window.intellipay.initialize();
+      }
+    } catch (error) {
+      notification.open({
+        type: "error",
+        message: t("job_payments.notifications.error.openingip"),
+      });
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card title="Card Payment">
+      <Spin spinning={loading}>
+        <Form
+          onFinish={handleFinish}
+          form={form}
+          initialValues={{ jobid: context?.jobid }}
+        >
+          <LayoutFormRow grow noDivider>
+            <Form.Item
+              name="jobid"
+              label={t("bills.fields.ro_number")}
+              rules={[
+                {
+                  required: true,
+                  // message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <JobSearchSelectComponent
+                disabled={context?.jobid}
+                notExported={false}
+                clm_no
+                onChange={(e) => {
+                  refetch({ jobid: e });
+                }}
+              />
+            </Form.Item>
+          </LayoutFormRow>
+
+          {/* Lighbox Input amount needs to be hidden */}
+          <Input
+            className="ipayfield"
+            data-ipayname="amount"
+            type="hidden"
+            value={amount}
+            hidden
+          />
+          <Input
+            className="ipayfield"
+            data-ipayname="account"
+            type="hidden"
+            value={data?.jobs_by_pk.ro_number}
+            hidden
+          />
+          <Input
+            className="ipayfield"
+            data-ipayname="email"
+            type="hidden"
+            value={data?.jobs_by_pk.owner.ownr_ea}
+            hidden
+          />
+          {/* Lightbox payment response when it is completed */}
+          <Form.Item name="paymentResponse" hidden>
+            <Input type="hidden" value={amount} />
+          </Form.Item>
+
+          <LayoutFormRow grow>
+            <Form.Item
+              label="Amount"
+              name="amount"
+              rules={[
+                {
+                  required: true,
+                  // message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <InputNumber />
+            </Form.Item>
+
+            <Row justify="space-around">
+              <Button
+                type="primary"
+                //  data-ipayname="submit"
+                className="ipayfield"
+                disabled={!amount || !jobid}
+                onClick={handleIntelliPayCharge}
+              >
+                {t("job_payments.buttons.proceedtopayment")}
+              </Button>
+              {context?.balance && (
+                <DataLabel
+                  valueStyle={{
+                    color: context?.balance.getAmount() !== 0 ? "red" : "green",
+                  }}
+                  label={t("payments.labels.balance")}
+                >
+                  {context?.balance.toFormat()}
+                </DataLabel>
+              )}
+            </Row>
+          </LayoutFormRow>
+        </Form>
+      </Spin>
+    </Card>
+  );
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CardPaymentModalComponent);

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

@@ -0,0 +1,57 @@
+import { Button, Modal } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectCardPayment } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CardPaymentModalComponent from "./card-payment-modal.component.";
+
+const mapStateToProps = createStructuredSelector({
+  cardPaymentModal: selectCardPayment,
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment")),
+});
+
+function CardPaymentModalContainer({
+  cardPaymentModal,
+  toggleModalVisible,
+  bodyshop,
+}) {
+  const { visible } = cardPaymentModal;
+  const { t } = useTranslation();
+
+  const handleCancel = () => {
+    toggleModalVisible();
+  };
+
+  const handleOK = () => {
+    toggleModalVisible();
+  };
+
+  return (
+    <Modal
+      open={visible}
+      onOk={handleOK}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="back" onClick={handleCancel}>
+          {t("job_payments.buttons.goback")}
+        </Button>,
+      ]}
+      width="60%"
+      destroyOnClose
+    >
+      <CardPaymentModalComponent />
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CardPaymentModalContainer);

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

@@ -1,14 +1,21 @@
 import { Badge, List, Tag } from "antd";
 import React from "react";
 import { connect } from "react-redux";
+import {
+  AutoSizer,
+  CellMeasurer,
+  CellMeasurerCache,
+  List as VirtualizedList,
+} from "react-virtualized";
 import { createStructuredSelector } from "reselect";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
-import "./chat-conversation-list.styles.scss";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
+import "./chat-conversation-list.styles.scss";
+
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
 });
@@ -18,26 +25,43 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setSelectedConversation(conversationId)),
 });
 
-export function ChatConversationListComponent({
+function ChatConversationListComponent({
   conversationList,
   selectedConversation,
   setSelectedConversation,
+  loadMoreConversations,
 }) {
-  return (
-    <div className="chat-list-container">
-      <List
-        bordered
-        dataSource={conversationList}
-        renderItem={(item) => (
-          <List.Item
-            key={item.id}
-            onClick={() => setSelectedConversation(item.id)}
-            className={`chat-list-item ${
-              item.id === selectedConversation
-                ? "chat-list-selected-conversation"
-                : null
-            }`}
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 60,
+  });
+
+  const rowRenderer = ({ index, key, style, parent }) => {
+    const item = conversationList[index];
+
+    return (
+      <CellMeasurer
+        key={key}
+        cache={cache}
+        parent={parent}
+        columnIndex={0}
+        rowIndex={index}
+      >
+        <List.Item
+          onClick={() => setSelectedConversation(item.id)}
+          className={`chat-list-item ${
+            item.id === selectedConversation
+              ? "chat-list-selected-conversation"
+              : null
+          }`}
+          style={style}
+        >
+          <div
+            style={{
+              display: "inline-block",
+            }}
           >
+            {item.label && <div className="chat-name">{item.label}</div>}
             {item.job_conversations.length > 0 ? (
               <div className="chat-name">
                 {item.job_conversations.map((j, idx) => (
@@ -49,25 +73,47 @@ export function ChatConversationListComponent({
             ) : (
               <PhoneFormatter>{item.phone_num}</PhoneFormatter>
             )}
-            <div sryle={{ display: "inline-block" }}>
-              <div>
-                {item.job_conversations.length > 0
-                  ? item.job_conversations.map((j, idx) => (
-                      <Tag key={idx} className="ro-number-tag">
-                        {j.job.ro_number}
-                      </Tag>
-                    ))
-                  : null}
-              </div>
-              <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+          </div>
+          <div style={{ display: "inline-block" }}>
+            <div>
+              {item.job_conversations.length > 0
+                ? item.job_conversations.map((j, idx) => (
+                    <Tag key={idx} className="ro-number-tag">
+                      {j.job.ro_number}
+                    </Tag>
+                  ))
+                : null}
             </div>
-            <Badge count={item.messages_aggregate.aggregate.count || 0} />
-          </List.Item>
+            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+          </div>
+          <Badge count={item.messages_aggregate.aggregate.count || 0} />
+        </List.Item>
+      </CellMeasurer>
+    );
+  };
+
+  return (
+    <div className="chat-list-container">
+      <AutoSizer>
+        {({ height, width }) => (
+          <VirtualizedList
+            height={height}
+            width={width}
+            rowCount={conversationList.length}
+            rowHeight={cache.rowHeight}
+            rowRenderer={rowRenderer}
+            onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
+              if (scrollTop + clientHeight === scrollHeight) {
+                loadMoreConversations();
+              }
+            }}
+          />
         )}
-      />
+      </AutoSizer>
     </div>
   );
 }
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps

client/src/components/chat-conversation-list/chat-conversation-list.styles.scss

@@ -3,8 +3,9 @@
 }
 .chat-list-container {
   flex: 1;
-  overflow: auto;
+  overflow: hidden;
   height: 100%;
+  border: 1px solid gainsboro;
 }
 
 .chat-list-item {
@@ -21,4 +22,6 @@
   .ro-number-tag {
     align-self: baseline;
   }
+  padding: 12px 24px;
+  border-bottom: 1px solid gainsboro;
 }

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

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

client/src/components/chat-conversation/chat-conversation.container.jsx

@@ -42,6 +42,7 @@ export function ChatConversationContainer({ bodyshop, selectedConversation }) {
     MARK_MESSAGES_AS_READ_BY_CONVERSATION,
     {
       variables: { conversationId: selectedConversation },
+      refetchQueries: ["UNREAD_CONVERSATION_COUNT"],
       update(cache) {
         cache.modify({
           id: cache.identify({

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

@@ -0,0 +1,67 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
+import { Input, notification, Spin, Tag, Tooltip } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
+export default function ChatLabel({ conversation }) {
+  const [loading, setLoading] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(conversation.label);
+
+  const { t } = useTranslation();
+  const [updateLabel] = useMutation(UPDATE_CONVERSATION_LABEL);
+
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      const response = await updateLabel({
+        variables: { id: conversation.id, label: value },
+      });
+      if (response.errors) {
+        notification["error"]({
+          message: t("messages.errors.updatinglabel", {
+            error: JSON.stringify(response.errors),
+          }),
+        });
+      } else {
+        setEditing(false);
+      }
+    } catch (error) {
+      notification["error"]({
+        message: t("messages.errors.updatinglabel", {
+          error: JSON.stringify(error),
+        }),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (editing) {
+    return (
+      <div>
+        <Input
+          autoFocus
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onBlur={handleSave}
+          allowClear
+        />
+        {loading && <Spin size="small" />}
+      </div>
+    );
+  } else {
+    return conversation.label && conversation.label.trim() !== "" ? (
+      <Tag style={{ cursor: "pointer" }} onClick={() => setEditing(true)}>
+        {conversation.label}
+      </Tag>
+    ) : (
+      <Tooltip title={t("messaging.labels.addlabel")}>
+        <PlusOutlined
+          style={{ cursor: "pointer" }}
+          onClick={() => setEditing(true)}
+        />
+      </Tooltip>
+    );
+  }
+}

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

@@ -6,12 +6,14 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
+import JobDocumentsLocalGalleryExternal from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -19,6 +21,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);
 
 export function ChatMediaSelector({
+  bodyshop,
   selectedMedia,
   setSelectedMedia,
   conversation,
@@ -27,7 +30,6 @@ export function ChatMediaSelector({
   const [visible, setVisible] = useState(false);
 
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
-
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
     variables: {
@@ -57,12 +59,21 @@ export function ChatMediaSelector({
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
       ) : null}
-      {data && (
+      {!bodyshop.uselocalmediaserver && data && (
         <JobDocumentsGalleryExternal
           data={data ? data.documents : []}
           externalMediaState={[selectedMedia, setSelectedMedia]}
         />
       )}
+      {bodyshop.uselocalmediaserver && visible && (
+        <JobDocumentsLocalGalleryExternal
+          externalMediaState={[selectedMedia, setSelectedMedia]}
+          jobId={
+            conversation.job_conversations[0] &&
+            conversation.job_conversations[0].jobid
+          }
+        />
+      )}
     </div>
   );
 

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

@@ -4,13 +4,16 @@ import {
   ShrinkOutlined,
   SyncOutlined,
 } from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
+import { useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CONVERSATION_LIST_QUERY } from "../../graphql/conversations.queries";
+import {
+  CONVERSATION_LIST_QUERY,
+  UNREAD_CONVERSATION_COUNT,
+} from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
 import {
   selectChatVisible,
@@ -37,12 +40,21 @@ export function ChatPopupComponent({
 }) {
   const { t } = useTranslation();
   const [pollInterval, setpollInterval] = useState(0);
-  const { loading, data, refetch, called } = useQuery(CONVERSATION_LIST_QUERY, {
+
+  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
     ...(pollInterval > 0 ? { pollInterval } : {}),
   });
 
+  const [getConversations, { loading, data, refetch, fetchMore }] =
+    useLazyQuery(CONVERSATION_LIST_QUERY, {
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+      skip: !chatVisible,
+      ...(pollInterval > 0 ? { pollInterval } : {}),
+    });
+
   const fcmToken = sessionStorage.getItem("fcmtoken");
 
   useEffect(() => {
@@ -54,15 +66,24 @@ export function ChatPopupComponent({
   }, [fcmToken]);
 
   useEffect(() => {
-    if (called && chatVisible) refetch();
-  }, [chatVisible, called, refetch]);
+    if (chatVisible)
+      getConversations({
+        variables: {
+          offset: 0,
+        },
+      });
+  }, [chatVisible, getConversations]);
 
-  const unreadCount = data
-    ? data.conversations.reduce(
-        (acc, val) => val.messages_aggregate.aggregate.count + acc,
-        0
-      )
-    : 0;
+  const loadMoreConversations = useCallback(() => {
+    if (data)
+      fetchMore({
+        variables: {
+          offset: data.conversations.length,
+        },
+      });
+  }, [data, fetchMore]);
+
+  const unreadCount = unreadData?.messages_aggregate.aggregate.count || 0;
 
   return (
     <Badge count={unreadCount}>
@@ -97,6 +118,7 @@ export function ChatPopupComponent({
                 ) : (
                   <ChatConversationListComponent
                     conversationList={data ? data.conversations : []}
+                    loadMoreConversations={loadMoreConversations}
                   />
                 )}
               </Col>

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

@@ -19,7 +19,7 @@ export function ChatPresetsComponent({ bodyshop, setMessage, className }) {
   const menu = (
     <Menu>
       {bodyshop.md_messaging_presets.map((i, idx) => (
-        <Menu.Item onClick={() => setMessage(i.text)} onItemHover key={idx}>
+        <Menu.Item onClick={() => setMessage(i.text)} key={idx}>
           {i.label}
         </Menu.Item>
       ))}

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

@@ -59,6 +59,14 @@ export default function ContractsCarsComponent({
       sortOrder:
         state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
     },
+    {
+      title: t("courtesycars.fields.color"),
+      dataIndex: "color",
+      key: "color",
+      sorter: (a, b) => alphaSort(a.color, b.color),
+      sortOrder:
+        state.sortedInfo.columnKey === "color" && state.sortedInfo.order,
+    },
     {
       title: t("courtesycars.fields.plate"),
       dataIndex: "plate",
@@ -93,6 +101,9 @@ export default function ContractsCarsComponent({
             (cc.model || "")
               .toLowerCase()
               .includes(state.search.toLowerCase()) ||
+            (cc.color || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
             (cc.plate || "").toLowerCase().includes(state.search.toLowerCase())
         );
 

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

@@ -4,7 +4,7 @@ import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { DateFormatter } from "../../utils/DateFormatter";
-import ContractLicenseDecodeButton from "../contract-license-decode-button/contract-license-decode-button.component";
+//import ContractLicenseDecodeButton from "../contract-license-decode-button/contract-license-decode-button.component";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
 import ContractsRatesChangeButton from "../contracts-rates-change-button/contracts-rates-change-button.component";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
@@ -165,7 +165,9 @@ export default function ContractFormComponent({
               />
             </div>
           )}
-          <ContractLicenseDecodeButton form={form} />
+          {
+            //<ContractLicenseDecodeButton form={form} />
+          }
         </Space>
       </div>
       <LayoutFormRow header={t("contracts.labels.driverinformation")}>

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

@@ -279,31 +279,80 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
         <Form.Item label={t("courtesycars.fields.notes")} name="notes">
           <Input.TextArea />
         </Form.Item>
+        <div>
+          <Form.Item
+            label={t("courtesycars.fields.registrationexpires")}
+            name="registrationexpires"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <FormDatePicker />
+          </Form.Item>
+          <Form.Item
+            shouldUpdate={(p, c) =>
+              p.registrationexpires !== c.registrationexpires
+            }
+          >
+            {() => {
+              const expires = form.getFieldValue("registrationexpires");
 
-        <Form.Item
-          label={t("courtesycars.fields.registrationexpires")}
-          name="registrationexpires"
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <FormDatePicker />
-        </Form.Item>
-        <Form.Item
-          label={t("courtesycars.fields.insuranceexpires")}
-          name="insuranceexpires"
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <FormDatePicker />
-        </Form.Item>
+              const dateover = expires && moment(expires).isBefore(moment());
+
+              if (dateover)
+                return (
+                  <Space direction="vertical" style={{ color: "tomato" }}>
+                    <span>
+                      <WarningFilled style={{ marginRight: ".3rem" }} />
+                      {t("contracts.labels.dateinpast")}
+                    </span>
+                  </Space>
+                );
+
+              return <></>;
+            }}
+          </Form.Item>
+        </div>
+        <div>
+          <Form.Item
+            label={t("courtesycars.fields.insuranceexpires")}
+            name="insuranceexpires"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <FormDatePicker />
+          </Form.Item>
+          <Form.Item
+            shouldUpdate={(p, c) =>
+              p.insuranceexpires !== c.insuranceexpires
+            }
+          >
+            {() => {
+              const expires = form.getFieldValue("insuranceexpires");
+
+              const dateover = expires && moment(expires).isBefore(moment());
+
+              if (dateover)
+                return (
+                  <Space direction="vertical" style={{ color: "tomato" }}>
+                    <span>
+                      <WarningFilled style={{ marginRight: ".3rem" }} />
+                      {t("contracts.labels.dateinpast")}
+                    </span>
+                  </Space>
+                );
+
+              return <></>;
+            }}
+          </Form.Item>
+        </div>
         <Form.Item label={t("courtesycars.fields.dailycost")} name="dailycost">
           <CurrencyInput />
         </Form.Item>

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

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

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

@@ -1,11 +1,23 @@
-import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table } from "antd";
+import { SyncOutlined, WarningFilled } from "@ant-design/icons";
+import {
+  Button,
+  Card,
+  Dropdown,
+  Input,
+  Menu,
+  Space,
+  Table,
+  Tooltip,
+} from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
-
+import moment from "moment";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
 export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
   const [state, setState] = useState({
     sortedInfo: {},
@@ -51,11 +63,33 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           text: t("courtesycars.status.sold"),
           value: "courtesycars.status.sold",
         },
+        {
+          text: t("courtesycars.status.leasereturn"),
+          value: "courtesycars.status.leasereturn",
+        },
       ],
       onFilter: (value, record) => value.includes(record.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      render: (text, record) => t(record.status),
+      render: (text, record) => {
+        const { nextservicedate, nextservicekm, mileage } = record;
+
+        const mileageOver = nextservicekm <= mileage;
+
+        const dueForService =
+          nextservicedate && moment(nextservicedate).isBefore(moment());
+
+        return (
+          <Space>
+            {t(record.status)}
+            {(mileageOver || dueForService) && (
+              <Tooltip title={t("contracts.labels.cardueforservice")}>
+                <WarningFilled style={{ color: "tomato" }} />
+              </Tooltip>
+            )}
+          </Space>
+        );
+      },
     },
     {
       title: t("courtesycars.fields.year"),
@@ -105,6 +139,17 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           </Link>
         ) : null,
     },
+    {
+      title: t("contracts.fields.scheduledreturn"),
+      dataIndex: "scheduledreturn",
+      key: "scheduledreturn",
+      render: (text, record) =>
+        record.cccontracts.length === 1 && (
+          <DateTimeFormatter>
+            {record.cccontracts[0].scheduledreturn}
+          </DateTimeFormatter>
+        ),
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
@@ -132,6 +177,32 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>
+          <Dropdown
+            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`}>
             <Button>{t("courtesycars.actions.new")}</Button>
           </Link>

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

@@ -0,0 +1,244 @@
+import {
+  BranchesOutlined,
+  ExclamationCircleFilled,
+  PauseCircleOutlined,
+} from "@ant-design/icons";
+import { Card, Space, Table, Tooltip } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
+import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardScheduledInToday({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+  if (!data) return null;
+  if (!data.scheduled_in_today)
+    return <DashboardRefreshRequired {...cardProps} />;
+
+  const appt = []; // Flatten Data
+  data.scheduled_in_today.forEach((item) => {
+    if (item.job) {
+      var i = {
+        canceled: item.canceled,
+        id: item.id,
+        alt_transport: item.job.alt_transport,
+        clm_no: item.job.clm_no,
+        jobid: item.job.jobid,
+        ins_co_nm: item.job.ins_co_nm,
+        iouparent: item.job.iouparent,
+        ownerid: item.job.ownerid,
+        ownr_co_nm: item.job.ownr_co_nm,
+        ownr_ea: item.job.ownr_ea,
+        ownr_fn: item.job.ownr_fn,
+        ownr_ln: item.job.ownr_ln,
+        ownr_ph1: item.job.ownr_ph1,
+        ownr_ph2: item.job.ownr_ph2,
+        production_vars: item.job.production_vars,
+        ro_number: item.job.ro_number,
+        suspended: item.job.suspended,
+        v_make_desc: item.job.v_make_desc,
+        v_model_desc: item.job.v_model_desc,
+        v_model_yr: item.job.v_model_yr,
+        v_vin: item.job.v_vin,
+        vehicleid: item.job.vehicleid,
+        note: item.note,
+        start: moment(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);
+  });
+
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      render: (text, record) => (
+        <Link
+          to={"/manage/jobs/" + record.jobid}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Space>
+            {record.ro_number || t("general.labels.na")}
+            {record.production_vars && record.production_vars.alert ? (
+              <ExclamationCircleFilled className="production-alert" />
+            ) : null}
+            {record.suspended && (
+              <PauseCircleOutlined style={{ color: "orangered" }} />
+            )}
+            {record.iouparent && (
+              <Tooltip title={t("jobs.labels.iou")}>
+                <BranchesOutlined style={{ color: "orangered" }} />
+              </Tooltip>
+            )}
+          </Space>
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link
+            to={"/manage/owners/" + record.ownerid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <OwnerNameDisplay ownerObject={record} />
+          </Link>
+        ) : (
+          <span>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.ownr_ph1"),
+      dataIndex: "ownr_ph1",
+      key: "ownr_ph1",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.ownr_ph2"),
+      dataIndex: "ownr_ph2",
+      key: "ownr_ph2",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.ownr_ea"),
+      dataIndex: "ownr_ea",
+      key: "ownr_ea",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ea} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link
+            to={"/manage/vehicles/" + record.vehicleid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+              record.v_model_desc || ""
+            }`}
+          </Link>
+        ) : (
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+            record.v_model_desc || ""
+          }`}</span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.ins_co_nm"),
+      dataIndex: "ins_co_nm",
+      key: "ins_co_nm",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+    {
+      title: t("appointments.fields.time"),
+      dataIndex: "start",
+      key: "start",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+  ];
+
+  const handleTableChange = (sorter) => {
+    setState({ ...state, sortedInfo: sorter });
+  };
+
+  return (
+    <Card
+      title={t("dashboard.titles.scheduledintoday", {
+        date: moment().startOf("day").format("MM/DD/YYYY"),
+      })}
+      {...cardProps}
+    >
+      <div style={{ height: "100%" }}>
+        <Table
+          onChange={handleTableChange}
+          pagination={{ position: "top", defaultPageSize: 50 }}
+          columns={columns}
+          scroll={{ x: true, y: "calc(100% - 2em)" }}
+          rowKey="id"
+          style={{ height: "85%" }}
+          dataSource={appt}
+        />
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardScheduledInTodayGql = `
+  scheduled_in_today: appointments(where: {start: {_gte: "${moment()
+    .startOf("day")
+    .toISOString()}", _lte: "${moment()
+  .endOf("day")
+  .toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
+    canceled
+    id
+    job {
+      alt_transport
+      clm_no
+      jobid: id
+      ins_co_nm
+      iouparent
+      ownerid
+      ownr_co_nm
+      ownr_ea
+      ownr_fn
+      ownr_ln
+      ownr_ph1
+      ownr_ph2
+      production_vars
+      ro_number
+      suspended
+      v_make_desc
+      v_model_desc
+      v_model_yr
+      v_vin
+      vehicleid
+    }
+    note
+    start
+    title
+  }
+`;

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

@@ -0,0 +1,210 @@
+import {
+  BranchesOutlined,
+  ExclamationCircleFilled,
+  PauseCircleOutlined,
+} from "@ant-design/icons";
+import { Card, Space, Table, Tooltip } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
+import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardScheduledOutToday({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+  if (!data) return null;
+  if (!data.scheduled_out_today)
+    return <DashboardRefreshRequired {...cardProps} />;
+
+  data.scheduled_out_today.forEach((item) => {
+    item.scheduled_completion= moment(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);
+  });
+
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      render: (text, record) => (
+        <Link
+          to={"/manage/jobs/" + record.jobid}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Space>
+            {record.ro_number || t("general.labels.na")}
+            {record.production_vars && record.production_vars.alert ? (
+              <ExclamationCircleFilled className="production-alert" />
+            ) : null}
+            {record.suspended && (
+              <PauseCircleOutlined style={{ color: "orangered" }} />
+            )}
+            {record.iouparent && (
+              <Tooltip title={t("jobs.labels.iou")}>
+                <BranchesOutlined style={{ color: "orangered" }} />
+              </Tooltip>
+            )}
+          </Space>
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link
+            to={"/manage/owners/" + record.ownerid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <OwnerNameDisplay ownerObject={record} />
+          </Link>
+        ) : (
+          <span>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.ownr_ph1"),
+      dataIndex: "ownr_ph1",
+      key: "ownr_ph1",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.ownr_ph2"),
+      dataIndex: "ownr_ph2",
+      key: "ownr_ph2",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.ownr_ea"),
+      dataIndex: "ownr_ea",
+      key: "ownr_ea",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ea} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link
+            to={"/manage/vehicles/" + record.vehicleid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+              record.v_model_desc || ""
+            }`}
+          </Link>
+        ) : (
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+            record.v_model_desc || ""
+          }`}</span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.ins_co_nm"),
+      dataIndex: "ins_co_nm",
+      key: "ins_co_nm",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+    {
+      title: t("jobs.fields.scheduled_completion"),
+      dataIndex: "scheduled_completion",
+      key: "scheduled_completion",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+  ];
+
+  const handleTableChange = (sorter) => {
+    setState({ ...state, sortedInfo: sorter });
+  };
+
+  return (
+    <Card
+      title={t("dashboard.titles.scheduledouttoday", {
+        date: moment().startOf("day").format("MM/DD/YYYY"),
+      })}
+      {...cardProps}
+    >
+      <div style={{ height: "100%" }}>
+        <Table
+          onChange={handleTableChange}
+          pagination={{ position: "top", defaultPageSize: 50 }}
+          columns={columns}
+          scroll={{ x: true, y: "calc(100% - 2em)" }}
+          rowKey="id"
+          style={{ height: "85%" }}
+          dataSource={data.scheduled_out_today}
+        />
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardScheduledOutTodayGql = `
+  scheduled_out_today: jobs(where: {
+    date_invoiced: {_is_null: true}, 
+    ro_number: {_is_null: false}, 
+    voided: {_eq: false}, 
+    scheduled_completion: {_gte: "${moment().startOf("day").toISOString()}", 
+    _lte: "${moment().endOf("day").toISOString()}"}}) {
+      alt_transport
+      clm_no
+      jobid: id
+      ins_co_nm
+      iouparent
+      ownerid
+      ownr_co_nm
+      ownr_ea
+      ownr_fn
+      ownr_ln
+      ownr_ph1
+      ownr_ph2
+      production_vars
+      ro_number
+      scheduled_completion
+      suspended
+      v_make_desc
+      v_model_desc
+      v_model_yr
+      v_vin
+      vehicleid
+
+  }
+`;

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

@@ -1,6 +1,6 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
 import { gql, useMutation, useQuery } from "@apollo/client";
-import { Button, Dropdown, Menu, notification, PageHeader, Space } from "antd";
+import { Button, Dropdown, Menu, PageHeader, Space, notification } from "antd";
 import i18next from "i18next";
 import _ from "lodash";
 import moment from "moment";
@@ -37,6 +37,12 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 //Combination of the following:
 // /node_modules/react-grid-layout/css/styles.css
 // /node_modules/react-resizable/css/styles.css
+import DashboardScheduledInToday, {
+  DashboardScheduledInTodayGql,
+} from "../dashboard-components/scheduled-in-today/scheduled-in-today.component";
+import DashboardScheduledOutToday, {
+  DashboardScheduledOutTodayGql,
+} from "../dashboard-components/scheduled-out-today/scheduled-out-today.component";
 import "./dashboard-grid.styles.scss";
 import { GenerateDashboardData } from "./dashboard-grid.utils";
 
@@ -268,6 +274,28 @@ const componentList = {
     w: 2,
     h: 2,
   },
+  ScheduleInToday: {
+    label: i18next.t("dashboard.titles.scheduledintoday", {
+      date: moment().startOf("day").format("MM/DD/YYYY"),
+    }),
+    component: DashboardScheduledInToday,
+    gqlFragment: DashboardScheduledInTodayGql,
+    minW: 10,
+    minH: 2,
+    w: 10,
+    h: 2,
+  },
+  ScheduleOutToday: {
+    label: i18next.t("dashboard.titles.scheduledouttoday", {
+      date: moment().startOf("day").format("MM/DD/YYYY"),
+    }),
+    component: DashboardScheduledOutToday,
+    gqlFragment: DashboardScheduledOutTodayGql,
+    minW: 10,
+    minH: 2,
+    w: 10,
+    h: 2,
+  },
 };
 
 const createDashboardQuery = (state) => {
@@ -283,8 +311,12 @@ const createDashboardQuery = (state) => {
       monthly_sales: jobs(where: {_and: [
         { voided: {_eq: false}},
         {date_invoiced: {_gte: "${moment()
-        .startOf("month").startOf('day').toISOString()}"}}, {date_invoiced: {_lte: "${moment()
-    .endOf("month").endOf('day').toISOString()}"}}]}) {
+          .startOf("month")
+          .startOf("day")
+          .toISOString()}"}}, {date_invoiced: {_lte: "${moment()
+    .endOf("month")
+    .endOf("day")
+    .toISOString()}"}}]}) {
     id
     ro_number
     date_invoiced

client/src/components/data-label/data-label.component.jsx

@@ -8,6 +8,8 @@ export default function DataLabel({
   vertical,
   visible = true,
   valueStyle = {},
+  valueClassName,
+  onValueClick,
   ...props
 }) {
   if (!visible || (hideIfNull && !!!children)) return null;
@@ -16,7 +18,7 @@ export default function DataLabel({
     <div {...props} style={{ display: "flex" }}>
       <div
         style={{
-          flex: 2,
+         // flex: 2,
           marginRight: ".2rem",
         }}
       >
@@ -28,7 +30,10 @@ export default function DataLabel({
           marginLeft: ".3rem",
           fontWeight: "bolder",
           wordWrap: "break-word",
+          cursor: onValueClick !== undefined ? "pointer" : "",
         }}
+        className={valueClassName}
+        onClick={onValueClick}
       >
         {typeof children === "string" ? (
           <Typography.Text style={valueStyle}>{children}</Typography.Text>

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

@@ -0,0 +1,152 @@
+import { SyncOutlined } from "@ant-design/icons";
+import { Button, Card, Form, Input, Table } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DmsAllocationsSummaryAp);
+
+export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
+  const { t } = useTranslation();
+  const [allocationsSummary, setAllocationsSummary] = useState([]);
+
+  useEffect(() => {
+    socket.on("ap-export-success", (billid) => {
+      setAllocationsSummary((allocationsSummary) =>
+        allocationsSummary.map((a) => {
+          if (a.billid !== billid) return a;
+          return { ...a, status: "Successful" };
+        })
+      );
+    });
+    socket.on("ap-export-failure", ({ billid, error }) => {
+      allocationsSummary.map((a) => {
+        if (a.billid !== billid) return a;
+        return { ...a, status: error };
+      });
+    });
+
+    if (socket.disconnected) socket.connect();
+    return () => {
+      socket.removeListener("ap-export-success");
+      socket.removeListener("ap-export-failure");
+      //socket.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (socket.connected) {
+      socket.emit("pbs-calculate-allocations-ap", billids, (ack) => {
+        setAllocationsSummary(ack);
+
+        socket.allocationsSummary = ack;
+      });
+    }
+  }, [socket, socket.connected, billids]);
+  console.log(allocationsSummary);
+  const columns = [
+    {
+      title: t("general.labels.status"),
+      dataIndex: "status",
+      key: "status",
+    },
+    {
+      title: t("bills.fields.invoice_number"),
+      dataIndex: ["Posting", "Reference"],
+      key: "reference",
+    },
+
+    {
+      title: t("jobs.fields.dms.lines"),
+      dataIndex: "Lines",
+      key: "Lines",
+      render: (text, record) => (
+        <table style={{ tableLayout: "auto", width: "100%" }}>
+          <tr>
+            <th>{t("bills.fields.invoice_number")}</th>
+            <th>{t("bodyshop.fields.dms.dms_acctnumber")}</th>
+            <th>{t("jobs.fields.dms.amount")}</th>
+          </tr>
+          {record.Posting.Lines.map((l, idx) => (
+            <tr key={idx}>
+              <td>{l.InvoiceNumber}</td>
+              <td>{l.Account}</td>
+              <td>{l.Amount}</td>
+            </tr>
+          ))}
+        </table>
+      ),
+    },
+  ];
+
+  const handleFinish = async (values) => {
+    socket.emit(`pbs-export-ap`, {
+      billids,
+      txEnvelope: values,
+    });
+  };
+
+  return (
+    <Card
+      title={title}
+      extra={
+        <Button
+          onClick={() => {
+            socket.emit("pbs-calculate-allocations-ap", billids, (ack) =>
+              setAllocationsSummary(ack)
+            );
+          }}
+        >
+          <SyncOutlined />
+        </Button>
+      }
+    >
+      <Table
+        pagination={{ position: "top", defaultPageSize: 50 }}
+        columns={columns}
+        rowKey={(record) => `${record.InvoiceNumber}${record.Account}`}
+        dataSource={allocationsSummary}
+        locale={{ emptyText: t("dms.labels.refreshallocations") }}
+      />
+      <Form layout="vertical" onFinish={handleFinish}>
+        <Form.Item
+          name="journal"
+          label={t("jobs.fields.dms.journal")}
+          initialValue={
+            bodyshop.cdk_configuration &&
+            bodyshop.cdk_configuration.default_journal
+          }
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Button
+          disabled={!allocationsSummary || allocationsSummary.length === 0}
+          htmlType="submit"
+        >
+          {t("jobs.actions.dms.post")}
+        </Button>
+      </Form>
+    </Card>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { Button, Card, Table, Typography } from "antd";
+import { Alert, Button, Card, Table, Typography } from "antd";
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -90,6 +90,9 @@ export function DmsAllocationsSummary({ socket, bodyshop, jobId, title }) {
         </Button>
       }
     >
+      {bodyshop.pbs_configuration?.disablebillwip && (
+        <Alert type="warning" message={t("jobs.labels.dms.disablebillwip")} />
+      )}
       <Table
         pagination={{ position: "top", defaultPageSize: 50 }}
         columns={columns}

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

@@ -11,6 +11,7 @@ import {
   Select,
   Space,
   Statistic,
+  Switch,
   Typography,
 } from "antd";
 import Dinero from "dinero.js";
@@ -21,6 +22,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { determineDmsType } from "../../pages/dms/dms.container";
 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";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
@@ -182,6 +184,13 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
             <Space>
               <DmsCdkMakes form={form} socket={socket} job={job} />
               <DmsCdkMakesRefetch />
+              <Form.Item
+                name="dms_unsold"
+                label={t("jobs.fields.dms.dms_unsold")}
+                initialValue={false}
+              >
+                <Switch />
+              </Form.Item>
             </Space>
           </div>
         )}
@@ -335,13 +344,31 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                             bodyshop.cdk_configuration.payers.find(
                               (i) => i && row && i.name === row.name
                             );
-
-                          return (
-                            <div>
-                              {cdkPayer &&
-                                t(`jobs.fields.${cdkPayer.control_type}`)}
-                            </div>
-                          );
+                          if (
+                            i18n.exists(`jobs.fields.${cdkPayer?.control_type}`)
+                          )
+                            return (
+                              <div>
+                                {cdkPayer &&
+                                  t(`jobs.fields.${cdkPayer?.control_type}`)}
+                              </div>
+                            );
+                          else if (
+                            i18n.exists(
+                              `jobs.fields.dms.control_type.${cdkPayer?.control_type}`
+                            )
+                          ) {
+                            return (
+                              <div>
+                                {cdkPayer &&
+                                  t(
+                                    `jobs.fields.dms.control_type.${cdkPayer?.control_type}`
+                                  )}
+                              </div>
+                            );
+                          } else {
+                            return null;
+                          }
                         }}
                       </Form.Item>
 

client/src/components/documents-local-upload/documents-local-upload.component.jsx

@@ -0,0 +1,73 @@
+import { UploadOutlined } from "@ant-design/icons";
+import { Upload } from "antd";
+import React, { useState } from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import { handleUpload } from "./documents-local-upload.utility";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop,
+});
+
+export function DocumentsLocalUploadComponent({
+  children,
+  currentUser,
+  bodyshop,
+  job,
+  vendorid,
+  invoice_number,
+  callbackAfterUpload,
+  allowAllTypes,
+}) {
+  const [fileList, setFileList] = useState([]);
+
+  const handleDone = (uid) => {
+    setTimeout(() => {
+      setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
+    }, 2000);
+  };
+
+  return (
+    <Upload.Dragger
+      multiple={true}
+      fileList={fileList}
+      onChange={(f) => {
+        if (f.event && f.event.percent === 100) handleDone(f.file.uid);
+
+        setFileList(f.fileList);
+      }}
+      customRequest={(ev) =>
+        handleUpload({
+          ev,
+          context: {
+            jobid: job.id,
+            vendorid,
+            invoice_number,
+            callback: callbackAfterUpload,
+          },
+        })
+      }
+      {...(!allowAllTypes && {
+        accept: "audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx",
+      })}
+    >
+      {children || (
+        <>
+          <p className="ant-upload-drag-icon">
+            <UploadOutlined />
+          </p>
+          <p className="ant-upload-text">
+            Click or drag files to this area to upload.
+          </p>
+        </>
+      )}
+    </Upload.Dragger>
+  );
+}
+export default connect(mapStateToProps, null)(DocumentsLocalUploadComponent);

client/src/components/documents-local-upload/documents-local-upload.utility.js

@@ -0,0 +1,80 @@
+import cleanAxios from "../../utils/CleanAxios";
+import { store } from "../../redux/store";
+import { addMediaForJob } from "../../redux/media/media.actions";
+import normalizeUrl from "normalize-url";
+import { notification } from "antd";
+import i18n from "i18next";
+
+export const handleUpload = async ({ ev, context }) => {
+  const { onError, onSuccess, onProgress, file } = ev;
+  const { jobid, invoice_number, vendorid, callbackAfterUpload } = context;
+
+  const bodyshop = store.getState().user.bodyshop;
+  var options = {
+    headers: {
+      "X-Requested-With": "XMLHttpRequest",
+      ims_token: bodyshop.localmediatoken,
+    },
+    onUploadProgress: (e) => {
+      if (!!onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
+    },
+  };
+
+  const formData = new FormData();
+
+  formData.append("jobid", jobid);
+  if (invoice_number) {
+    formData.append("invoice_number", invoice_number);
+    formData.append("vendorid", vendorid);
+  }
+  formData.append("file", file);
+
+  const imexMediaServerResponse = await cleanAxios.post(
+    normalizeUrl(
+      `${bodyshop.localmediaserverhttp}/${
+        invoice_number ? "bills" : "jobs"
+      }/upload`
+    ),
+    formData,
+    {
+      ...options,
+    }
+  );
+
+  if (imexMediaServerResponse.status !== 200) {
+    if (!!onError) {
+      onError(imexMediaServerResponse.statusText);
+    }
+  } else {
+    onSuccess && onSuccess(file);
+    notification.open({
+      type: "success",
+      key: "docuploadsuccess",
+      message: i18n.t("documents.successes.insert"),
+    });
+    store.dispatch(
+      addMediaForJob({
+        jobid,
+        media: imexMediaServerResponse.data.map((d) => {
+          return {
+            ...d,
+            selected: false,
+            src: normalizeUrl(`${bodyshop.localmediaserverhttp}/${d.src}`),
+            ...(d.optimized && {
+              optimized: normalizeUrl(
+                `${bodyshop.localmediaserverhttp}/${d.optimized}`
+              ),
+            }),
+            thumbnail: normalizeUrl(
+              `${bodyshop.localmediaserverhttp}/${d.thumbnail}`
+            ),
+          };
+        }),
+      })
+    );
+  }
+
+  if (callbackAfterUpload) {
+    callbackAfterUpload();
+  }
+};

client/src/components/documents-upload/documents-upload.utility.js

@@ -54,7 +54,7 @@ export const uploadToCloudinary = async (
   //Set variables for getting the signed URL.
   let timestamp = Math.floor(Date.now() / 1000);
   let public_id = key;
-  let tags = `${bodyshop.textid},${
+  let tags = `${bodyshop.imexshopid},${
     tagsArray ? tagsArray.map((tag) => `${tag},`) : ""
   }`;
   //  let eager = process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS;

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

@@ -5,12 +5,15 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import { selectEmailConfig } from "../../redux/email/email.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
+import JobsDocumentsLocalGalleryExternalComponent from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
   emailConfig: selectEmailConfig,
 });
 const mapDispatchToProps = (dispatch) => ({
@@ -23,8 +26,9 @@ export default connect(
 
 export function EmailDocumentsComponent({
   emailConfig,
-
+  form,
   selectedMediaState,
+  bodyshop,
 }) {
   const { t } = useTranslation();
 
@@ -45,12 +49,25 @@ export function EmailDocumentsComponent({
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
       ) : null}
-      {data && (
+      {selectedMedia &&
+      selectedMedia
+        .filter((s) => s.isSelected)
+        .reduce((acc, val) => (acc = acc + val.size), 0) >=
+        10485760 - new Blob([form.getFieldValue("html")]).size ? (
+        <div style={{ color: "red" }}>{t("general.errors.sizelimit")}</div>
+      ) : null}
+      {!bodyshop.uselocalmediaserver && data && (
         <JobDocumentsGalleryExternal
           data={data ? data.documents : []}
           externalMediaState={[selectedMedia, setSelectedMedia]}
         />
       )}
+      {bodyshop.uselocalmediaserver && (
+        <JobsDocumentsLocalGalleryExternalComponent
+          externalMediaState={[selectedMedia, setSelectedMedia]}
+          jobId={emailConfig.jobid}
+        />
+      )}
     </div>
   );
 }

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

@@ -1,29 +1,33 @@
 import { UploadOutlined, UserAddOutlined } from "@ant-design/icons";
 import {
+  Button,
   Divider,
+  Dropdown,
   Form,
   Input,
+  Menu,
   Select,
+  Space,
   Tabs,
   Upload,
-  Space,
-  Menu,
-  Dropdown,
 } from "antd";
+import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import EmailDocumentsComponent from "../email-documents/email-documents.component";
-import _ from "lodash";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { selectEmailConfig } from "../../redux/email/email.selectors";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import { CreateExplorerLinkForJob } from "../../utils/localmedia";
+import EmailDocumentsComponent from "../email-documents/email-documents.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser,
+  emailConfig: selectEmailConfig,
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -34,6 +38,7 @@ export default connect(
 )(EmailOverlayComponent);
 
 export function EmailOverlayComponent({
+  emailConfig,
   form,
   selectedMediaState,
   bodyshop,
@@ -42,7 +47,21 @@ export function EmailOverlayComponent({
   const { t } = useTranslation();
   const handleClick = ({ item, key, keyPath }) => {
     const email = item.props.value;
-    form.setFieldsValue({ to: _.uniq([...form.getFieldValue("to"), email]) });
+    form.setFieldsValue({
+      to: _.uniq([
+        ...form.getFieldValue("to"),
+        ...(typeof email === "string" ? [email] : email),
+      ]),
+    });
+  };
+  const handle_CC_Click = ({ item, key, keyPath }) => {
+    const email = item.props.value;
+    form.setFieldsValue({
+      cc: _.uniq([
+        ...(form.getFieldValue("cc") || ""),
+        ...(typeof email === "string" ? [email] : email),
+      ]),
+    });
   };
 
   const menu = (
@@ -55,6 +74,30 @@ export function EmailOverlayComponent({
               {`${e.first_name} ${e.last_name}`}
             </Menu.Item>
           ))}
+        {bodyshop.md_to_emails.map((e, idx) => (
+          <Menu.Item value={e.emails} key={idx + "group"}>
+            {e.label}
+          </Menu.Item>
+        ))}
+      </Menu>
+    </div>
+  );
+
+  const menuCC = (
+    <div>
+      <Menu onClick={handle_CC_Click}>
+        {bodyshop.employees
+          .filter((e) => e.user_email)
+          .map((e, idx) => (
+            <Menu.Item value={e.user_email} key={idx}>
+              {`${e.first_name} ${e.last_name}`}
+            </Menu.Item>
+          ))}
+        {bodyshop.md_to_emails.map((e, idx) => (
+          <Menu.Item value={e.emails} key={idx + "group"}>
+            {e.label}
+          </Menu.Item>
+        ))}
       </Menu>
     </div>
   );
@@ -107,7 +150,23 @@ export function EmailOverlayComponent({
       >
         <Select mode="tags" tokenSeparators={[",", ";"]} />
       </Form.Item>
-      <Form.Item label={t("emails.fields.cc")} name="cc">
+      <Form.Item
+        label={
+          <Space>
+            {t("emails.fields.cc")}
+            <Dropdown overlay={menuCC}>
+              <a
+                className="ant-dropdown-link"
+                href=" #"
+                onClick={(e) => e.preventDefault()}
+              >
+                <UserAddOutlined />
+              </a>
+            </Dropdown>
+          </Space>
+        }
+        name="cc"
+      >
         <Select mode="tags" tokenSeparators={[",", ";"]} />
       </Form.Item>
       <Form.Item
@@ -124,7 +183,9 @@ export function EmailOverlayComponent({
       </Form.Item>
 
       <Divider>{t("emails.labels.preview")}</Divider>
-      <strong>{t("emails.labels.pdfcopywillbeattached")}</strong>
+      {bodyshop.attach_pdf_to_email && (
+        <strong>{t("emails.labels.pdfcopywillbeattached")}</strong>
+      )}
 
       <Form.Item shouldUpdate>
         {() => {
@@ -144,9 +205,18 @@ export function EmailOverlayComponent({
 
       <Tabs>
         <Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
-          <EmailDocumentsComponent selectedMediaState={selectedMediaState} />
+          <EmailDocumentsComponent
+            selectedMediaState={selectedMediaState}
+            form={form}
+          />
         </Tabs.TabPane>
+
         <Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
+          {bodyshop.uselocalmediaserver && emailConfig.jobid && (
+            <a href={CreateExplorerLinkForJob({ jobid: emailConfig.jobid })}>
+              <Button>{t("documents.labels.openinexplorer")}</Button>
+            </a>
+          )}
           <Form.Item
             name="fileList"
             valuePropName="fileList"
@@ -156,6 +226,24 @@ export function EmailOverlayComponent({
               }
               return e && e.fileList;
             }}
+            rules={[
+              ({ getFieldValue }) => ({
+                validator(rule, value) {
+                  const totalSize = value.reduce(
+                    (acc, val) => (acc = acc + val.size),
+                    0
+                  );
+
+                  const limit =
+                    10485760 - new Blob([form.getFieldValue("html")]).size;
+
+                  if (totalSize > limit) {
+                    return Promise.reject(t("general.errors.sizelimit"));
+                  }
+                  return Promise.resolve();
+                },
+              }),
+            ]}
           >
             <Upload.Dragger
               beforeUpload={Upload.LIST_IGNORE}

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

@@ -1,4 +1,4 @@
-import { Divider, Form, Modal, notification } from "antd";
+import { Button, Divider, Form, Modal, notification, Space } from "antd";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -77,6 +77,9 @@ export function EmailOverlayContainer({
     setSending(true);
     try {
       await axios.post("/sendemail", {
+        bodyshopid: bodyshop.id,
+        jobid: emailConfig.jobid,
+
         ...defaultEmailFrom,
         ReplyTo: {
           Email: from,
@@ -168,33 +171,81 @@ export function EmailOverlayContainer({
   useEffect(() => {
     if (modalVisible) render();
   }, [modalVisible]); // eslint-disable-line react-hooks/exhaustive-deps
-
   return (
     <Modal
       destroyOnClose={true}
       visible={modalVisible}
+      maskClosable={false}
       width={"80%"}
       onOk={() => form.submit()}
+      title={t("emails.labels.emailpreview")}
       onCancel={() => {
         toggleEmailOverlayVisible();
       }}
-      okButtonProps={{ loading: sending }}
+      //closeIcon={() => null}
+      okText={t("general.actions.send")}
+      okButtonProps={{
+        loading: sending,
+
+        disabled:
+          selectedMedia &&
+          (selectedMedia
+            .filter((s) => s.isSelected)
+            .reduce((acc, val) => (acc = acc + val.size), 0) >=
+            10485760 - new Blob([form.getFieldValue("html")]).size ||
+            selectedMedia.filter((s) => s.isSelected).length > 10),
+      }}
     >
-      <Form layout="vertical" form={form} onFinish={handleFinish}>
-        {loading && (
-          <div>
-            <LoadingSkeleton />
-            <Divider>{t("emails.labels.preview")}</Divider>
-            <LoadingSpinner message={t("emails.labels.generatingemail")} />
-          </div>
-        )}
-        {!loading && (
-          <EmailOverlayComponent
-            form={form}
-            selectedMediaState={[selectedMedia, setSelectedMedia]}
-          />
-        )}
-      </Form>
+      <div>
+        <div
+          style={{
+            //   marginTop: "3rem",
+            display: "flex",
+            justifyContent: "flex-end",
+          }}
+        >
+          <Space style={{ alignSelf: "flex-end" }} align="right">
+            <Button
+              onClick={() => {
+                toggleEmailOverlayVisible();
+              }}
+            >
+              {t("general.actions.cancel")}
+            </Button>
+            <Button
+              loading={sending}
+              onClick={() => form.submit()}
+              disabled={
+                selectedMedia &&
+                (selectedMedia
+                  .filter((s) => s.isSelected)
+                  .reduce((acc, val) => (acc = acc + val.size), 0) >=
+                  10485760 - new Blob([form.getFieldValue("html")]).size ||
+                  selectedMedia.filter((s) => s.isSelected).length > 10)
+              }
+              type="primary"
+            >
+              {t("general.actions.send")}
+            </Button>
+          </Space>
+        </div>
+        <Form layout="vertical" form={form} onFinish={handleFinish}>
+          {loading && (
+            <div>
+              <LoadingSkeleton />
+              <Divider>{t("emails.labels.preview")}</Divider>
+              <LoadingSpinner message={t("emails.labels.generatingemail")} />
+            </div>
+          )}
+
+          {!loading && (
+            <EmailOverlayComponent
+              form={form}
+              selectedMediaState={[selectedMedia, setSelectedMedia]}
+            />
+          )}
+        </Form>
+      </div>
     </Modal>
   );
 }