IO-1267 missing query info in detail cards.

This reverts commit a8ad65000d.

client/craco.config.js

@@ -12,7 +12,9 @@ module.exports = {
             modifyVars: {
               ...(process.env.NODE_ENV === "development"
                 ? { "@primary-color": "#a51d1d" }
-                : { "@primary-color": "#1DA57A" }),
+                : {
+                    //"@primary-color": "#1DA57A"
+                  }),
               // "@primary-color": " #1890ff", // primary color for all components
               // "@link-color": "#1890ff", // link color
               // "@success-color": "#52c41a", // success state color

client/madge-graph.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
- "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- Generated by graphviz version 2.44.1 (20200629.0846)
- -->
-<!-- Title: G Pages: 1 -->
-<svg width="43pt" height="43pt"
- viewBox="0.00 0.00 43.20 43.20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(21.6 21.6)">
-<title>G</title>
-<polygon fill="#111111" stroke="transparent" points="-21.6,21.6 -21.6,-21.6 21.6,-21.6 21.6,21.6 -21.6,21.6"/>
-</g>
-</svg>

client/package.json

@@ -5,7 +5,7 @@
   "proxy": "http://localhost:5000",
   "dependencies": {
     "@apollo/client": "^3.3.17",
-    "@craco/craco": "^6.1.2",
+    "@craco/craco": "^5.9.0",
     "@fingerprintjs/fingerprintjs": "^3.1.2",
     "@lourenci/react-kanban": "^2.1.0",
     "@sentry/react": "^6.3.6",
@@ -19,6 +19,7 @@
     "craco-less": "^1.17.1",
     "dinero.js": "^1.8.1",
     "dotenv": "^9.0.2",
+    "enquire-js": "^0.2.1",
     "env-cmd": "^10.1.0",
     "exifr": "^7.0.0",
     "firebase": "^8.6.0",
@@ -35,12 +36,15 @@
     "preval.macro": "^5.0.0",
     "prop-types": "^15.7.2",
     "query-string": "^7.0.0",
+    "rc-queue-anim": "^1.8.5",
+    "rc-scroll-anim": "^2.7.6",
     "react": "^17.0.1",
     "react-big-calendar": "^0.33.2",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.1",
     "react-drag-listview": "^0.1.8",
     "react-grid-gallery": "^0.5.5",
+    "react-grid-layout": "^1.2.5",
     "react-i18next": "^11.8.15",
     "react-icons": "^4.2.0",
     "react-number-format": "^4.5.5",
@@ -48,6 +52,7 @@
     "react-resizable": "^3.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
+    "react-sublime-video": "^0.2.5",
     "react-virtualized": "^9.22.3",
     "recharts": "^2.0.7",
     "redux": "^4.1.0",
@@ -56,6 +61,7 @@
     "redux-state-sync": "^3.1.2",
     "reselect": "^4.0.0",
     "sass": "^1.32.13",
+    "socket.io-client": "^4.1.2",
     "styled-components": "^5.3.0",
     "subscriptions-transport-ws": "^0.9.18",
     "web-vitals": "^1.1.2",
@@ -76,8 +82,8 @@
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "craco start",
     "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
-    "build:test": "env-cmd -f .env.test npm run build",
-    "build-deploy:test": "npm run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
+    "build:test": "env-cmd -f .env.test yarn run build",
+    "build-deploy:test": "yarn run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
     "buildcra": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` react-scripts build",
     "test": "craco test",
     "eject": "react-scripts eject",

client/public/index.html

@@ -8,7 +8,17 @@
     <meta name="description" content="ImEX Online" />
     <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
     <link rel="apple-touch-icon" href="logo192.png" />
-
+    <script type="text/javascript">
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
+      (function () {
+        d = document;
+        s = d.createElement("script");
+        s.src = "https://client.crisp.chat/l.js";
+        s.async = 1;
+        d.getElementsByTagName("head")[0].appendChild(s);
+      })();
+    </script>
     <script>
       !(function () {
         "use strict";

client/src/App/App.container.jsx

@@ -3,12 +3,11 @@ import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
 import LogRocket from "logrocket";
 import moment from "moment";
-import React, { useEffect } from "react";
+import React from "react";
+import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
-import { useTranslation } from "react-i18next";
-import JiraSupportComponent from "../components/jira-support-widget/jira-support-widget.component";
 moment.locale("en-US");
 
 if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
@@ -16,29 +15,6 @@ if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
 export default function AppContainer() {
   const { t } = useTranslation();
 
-  useEffect(() => {
-    // Include the Crisp code here, without the <script></script> tags
-    window.$crisp = [];
-    window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
-    var d = document;
-    var s = d.createElement("script");
-    s.src = "https://client.crisp.chat/l.js";
-    s.async = 1;
-    d.getElementsByTagName("head")[0].appendChild(s);
-
-    //Release Notes
-
-    // var rs = d.createElement("script");
-    // rs.src = "https://sdk.noticeable.io/s.js";
-    // //rs.async = 1;
-    // d.getElementsByTagName("head")[0].appendChild(rs);
-    // // window.noticeable.render("widget", "IABVNO4scRKY11XBQkNr");
-
-    return () => {
-      d.getElementsByTagName("head")[0].removeChild(s);
-    };
-  }, []);
-
   return (
     <ApolloProvider client={client}>
       <ConfigProvider
@@ -54,7 +30,6 @@ export default function AppContainer() {
       >
         <GlobalLoadingBar />
         <App />
-        <JiraSupportComponent />
       </ConfigProvider>
     </ApolloProvider>
   );

client/src/App/App.jsx

@@ -8,7 +8,7 @@ import DocumentEditorContainer from "../components/document-editor/document-edit
 import ErrorBoundary from "../components/error-boundary/error-boundary.component";
 //Component Imports
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
-import AboutPage from "../pages/about/about.page";
+import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
 import TechPageContainer from "../pages/tech/tech.page.container";
 import { setOnline } from "../redux/application/application.actions";
 import { selectOnline } from "../redux/application/application.selectors";
@@ -17,7 +17,7 @@ import { selectCurrentUser } from "../redux/user/user.selectors";
 import PrivateRoute from "../utils/private-route";
 import "./App.styles.scss";
 
-const LandingPage = lazy(() => import("../pages/landing/landing.page"));
+import LandingPage from "../pages/landing/landing.page";
 const ResetPassword = lazy(() =>
   import("../pages/reset-password/reset-password.component")
 );
@@ -100,7 +100,7 @@ export function App({ checkUserSession, currentUser, online, setOnline }) {
           <Route exact path="/csi/:surveyId" component={CsiPage} />
         </ErrorBoundary>
         <ErrorBoundary>
-          <Route exact path="/about" component={AboutPage} />
+          <Route exact path="/disclaimer" component={DisclaimerPage} />
         </ErrorBoundary>
         <ErrorBoundary>
           <Route

client/src/assets/icons/technology.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" ?><svg style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:8;stroke-miterlimit:10;}
+	.st1{display:none;}
+	.st2{display:inline;opacity:0.25;fill:#F45EFD;}
+</style><g id="_x31_2_3D_Printing"/><g id="_x31_1_VR_Gear"/><g id="_x31_0_Virtual_reality"/><g id="_x39__Augmented_reality"/><g id="_x38__Teleport"/><g id="_x37__Glassess"/><g id="_x36__Folding_phone"/><g id="_x35__Drone"/><g id="_x34__Retina_scan"/><g id="_x33__Smartwatch"/><g id="_x32__Bionic_Arm"/><g id="_x31__Chip"><g><path d="M108,40c-5.2,0-9.6,3.3-11.3,8H84V32h-8V20h-8v12h-8V20h-8v12h-8v16H24v-8.7c4.7-1.7,8-6.1,8-11.3c0-6.6-5.4-12-12-12    S8,21.4,8,28c0,5.2,3.3,9.6,8,11.3V56h28v8H16v16.7c-4.7,1.7-8,6.1-8,11.3c0,6.6,5.4,12,12,12s12-5.4,12-12c0-5.2-3.3-9.6-8-11.3    V72h20v16h8v12h8V88h8v12h8V88h8V72h8v16.7c-4.7,1.7-8,6.1-8,11.3c0,6.6,5.4,12,12,12s12-5.4,12-12c0-5.2-3.3-9.6-8-11.3V64H84v-8    h12.7c1.7,4.7,6.1,8,11.3,8c6.6,0,12-5.4,12-12S114.6,40,108,40z M20,32c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S22.2,32,20,32z     M20,96c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S22.2,96,20,96z M76,80H52V40h24V80z M96,96c2.2,0,4,1.8,4,4s-1.8,4-4,4s-4-1.8-4-4    S93.8,96,96,96z M108,56c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S110.2,56,108,56z"/><rect height="8" width="8" x="56" y="64"/></g></g><g class="st1" id="Guide"><path class="st2" d="M120,8v112H8V8H120 M128,0H0v128h128V0L128,0z"/></g></svg>

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

@@ -81,6 +81,7 @@ function BillEnterModalContainer({
           },
         ],
       },
+      refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"],
     });
     console.log("adjustmentsToInsert", adjustmentsToInsert);
     const adjKeys = Object.keys(adjustmentsToInsert);

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

@@ -41,6 +41,7 @@ export function BillFormComponent({
   loadLines,
   billEdit,
   disableInvNumber,
+  job,
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -50,6 +51,10 @@ export function BillFormComponent({
     setDiscount(opt.discount);
   };
 
+  useEffect(() => {
+    if (job) form.validateFields(["is_credit_memo"]);
+  }, [job, form]);
+
   useEffect(() => {
     if (form.getFieldValue("vendorid") && vendorAutoCompleteOptions) {
       const vendorId = form.getFieldValue("vendorid");
@@ -89,7 +94,7 @@ export function BillFormComponent({
           <JobSearchSelect
             disabled={billEdit || disabled}
             convertedOnly
-            // notExported={false}
+            notExported={false}
             onBlur={() => {
               if (form.getFieldValue("jobid") !== null) {
                 loadLines({ variables: { id: form.getFieldValue("jobid") } });
@@ -187,6 +192,22 @@ export function BillFormComponent({
           label={t("bills.fields.is_credit_memo")}
           name="is_credit_memo"
           valuePropName="checked"
+          rules={[
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (
+                  (job.status === bodyshop.md_ro_statuses.default_invoiced ||
+                    job.status === bodyshop.md_ro_statuses.default_exported ||
+                    job.status === bodyshop.md_ro_statuses.default_void) &&
+                  (value === false || !value)
+                ) {
+                  return Promise.reject(t("bills.labels.onlycmforinvoiced"));
+                }
+
+                return Promise.resolve();
+              },
+            }),
+          ]}
         >
           <Switch />
         </Form.Item>

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

@@ -34,6 +34,7 @@ export function BillFormContainer({
       }
       loadLines={loadLines}
       lineData={lineData ? lineData.joblines : []}
+      job={lineData ? lineData.jobs_by_pk : null}
       responsibilityCenters={bodyshop.md_responsibility_centers || null}
       disableInvNumber={disableInvNumber}
     />

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

@@ -47,7 +47,9 @@ export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
     });
 
     if (!result.errors) {
-      notification["success"]({ message: t("bills.successes.save") });
+      notification["success"]({
+        message: t("bills.successes.reexport"),
+      });
     } else {
       notification["error"]({
         message: t("bills.errors.saving", {

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

@@ -1,4 +1,4 @@
-import { EyeFilled, SyncOutlined } from "@ant-design/icons";
+import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -47,7 +47,7 @@ export function BillsListTableComponent({
     <Space wrap>
       {showView && (
         <Button onClick={() => handleOnRowClick(record)}>
-          <EyeFilled />
+          <EditFilled />
         </Button>
       )}
       <BillDeleteButton bill={record} />

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

@@ -1,10 +1,11 @@
 import { HomeFilled } from "@ant-design/icons";
-import { Breadcrumb } from "antd";
+import { Breadcrumb, Row, Col } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBreadcrumbs } from "../../redux/application/application.selectors";
+import GlobalSearch from "../global-search/global-search.component";
 import "./breadcrumbs.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
@@ -13,24 +14,29 @@ const mapStateToProps = createStructuredSelector({
 
 export function BreadCrumbs({ breadcrumbs }) {
   return (
-    <div className="breadcrumb-container imex-flex-row">
-      <Breadcrumb separator=">">
-        <Breadcrumb.Item>
-          <Link to={`/manage`}>
-            <HomeFilled />
-          </Link>
-        </Breadcrumb.Item>
-        {breadcrumbs.map((item) =>
-          item.link ? (
-            <Breadcrumb.Item key={item.label}>
-              <Link to={item.link}>{item.label} </Link>
-            </Breadcrumb.Item>
-          ) : (
-            <Breadcrumb.Item key={item.label}>{item.label}</Breadcrumb.Item>
-          )
-        )}
-      </Breadcrumb>
-    </div>
+    <Row className="breadcrumb-container">
+      <Col xs={24} sm={24} md={16}>
+        <Breadcrumb separator=">">
+          <Breadcrumb.Item>
+            <Link to={`/manage`}>
+              <HomeFilled />
+            </Link>
+          </Breadcrumb.Item>
+          {breadcrumbs.map((item) =>
+            item.link ? (
+              <Breadcrumb.Item key={item.label}>
+                <Link to={item.link}>{item.label} </Link>
+              </Breadcrumb.Item>
+            ) : (
+              <Breadcrumb.Item key={item.label}>{item.label}</Breadcrumb.Item>
+            )
+          )}
+        </Breadcrumb>
+      </Col>
+      <Col xs={24} sm={24} md={8}>
+        <GlobalSearch />
+      </Col>
+    </Row>
   );
 }
 export default connect(mapStateToProps, null)(BreadCrumbs);

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

@@ -1,17 +1,15 @@
 import { useSubscription } from "@apollo/client";
 import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries";
+import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import ChatAffixComponent from "./chat-affix.component";
-import { Affix } from "antd";
 import "./chat-affix.styles.scss";
 
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   chatVisible: selectChatVisible,
@@ -31,22 +29,20 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 
   return (
-    <Affix className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      <div>
-        {bodyshop && bodyshop.messagingservicesid ? (
-          <ChatAffixComponent
-            conversationList={(data && data.conversations) || []}
-            unreadCount={
-              (data &&
-                data.conversations.reduce((acc, val) => {
-                  return (acc = acc + val.messages_aggregate.aggregate.count);
-                }, 0)) ||
-              0
-            }
-          />
-        ) : null}
-      </div>
-    </Affix>
+    <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
+      {bodyshop && bodyshop.messagingservicesid ? (
+        <ChatAffixComponent
+          conversationList={(data && data.conversations) || []}
+          unreadCount={
+            (data &&
+              data.conversations.reduce((acc, val) => {
+                return (acc = acc + val.messages_aggregate.aggregate.count);
+              }, 0)) ||
+            0
+          }
+        />
+      ) : null}
+    </div>
   );
 }
 export default connect(mapStateToProps, null)(ChatAffixContainer);

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

@@ -1,6 +1,11 @@
 .chat-affix {
-  position: absolute;
+  position: fixed;
+  left: 2vw;
   bottom: 2vh;
+  z-index: 999;
+  -webkit-box-shadow: 0px 0px 2px 0px rgba(69, 69, 69, 1);
+  -moz-box-shadow: 0px 0px 2px 0px rgba(69, 69, 69, 1);
+  box-shadow: 0px 0px 2px 0px rgba(69, 69, 69, 1);
 }
 
 .chat-affix-open {

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

@@ -0,0 +1,28 @@
+import { useMutation } from "@apollo/client";
+import { Button } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
+
+export default function ChatArchiveButton({ conversation }) {
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
+  const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
+  const handleToggleArchive = async () => {
+    setLoading(true);
+
+    await updateConversation({
+      variables: { id: conversation.id, archived: !conversation.archived },
+    });
+
+    setLoading(false);
+  };
+
+  return (
+    <Button onClick={handleToggleArchive} loading={loading} type="primary">
+      {conversation.archived
+        ? t("messaging.labels.unarchive")
+        : t("messaging.labels.archive")}
+    </Button>
+  );
+}

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

@@ -1,12 +1,13 @@
 import { Space } from "antd";
 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 ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
 
 export default function ChatConversationTitle({ conversation }) {
   return (
-    <Space flex>
+    <Space wrap>
       <PhoneNumberFormatter>
         {conversation && conversation.phone_num}
       </PhoneNumberFormatter>
@@ -16,6 +17,7 @@ export default function ChatConversationTitle({ conversation }) {
         }
       />
       <ChatTagRoContainer conversation={conversation || []} />
+      <ChatArchiveButton conversation={conversation} />
     </Space>
   );
 }

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

@@ -17,7 +17,7 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
 
   return (
     <div>
-      <Form.Item name="fleet" label={t("courtesycars.fields.fleetnumber")}>
+      <Form.Item name="plate" label={t("courtesycars.fields.plate")}>
         <Input />
       </Form.Item>
       <Form.Item

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

@@ -44,8 +44,8 @@ export function ContractsFindModalContainer({
 
     callSearch({
       variables: {
-        fleet:
-          (values.fleet && values.fleet !== "" && values.fleet) || undefined,
+        plate:
+          (values.plate && values.plate !== "" && values.plate) || undefined,
         time: values.time,
       },
     });

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

@@ -90,13 +90,12 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       // sorter: (a, b) => alphaSort(a.model, b.model),
       sortOrder:
         state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
-      render: (text, record) => (
-        <div>
-          {record.cccontracts.length === 1
-            ? record.cccontracts[0].job.ro_number
-            : null}
-        </div>
-      ),
+      render: (text, record) =>
+        record.cccontracts.length === 1 ? (
+          <Link to={`/manage/jobs/${record.cccontracts[0].job.id}`}>
+            {record.cccontracts[0].job.ro_number}
+          </Link>
+        ) : null,
     },
   ];
 

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

@@ -0,0 +1,166 @@
+import { Card } from "antd";
+import _ from "lodash";
+import moment from "moment";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import * as Utils from "../../scoreboard-targets-table/scoreboard-targets-table.util";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardMonthlyEmployeeEfficiency({
+  data,
+  ...cardProps
+}) {
+  const { t } = useTranslation();
+  if (!data) return null;
+  if (!data.monthly_employee_efficiency)
+    return <DashboardRefreshRequired {...cardProps} />;
+
+  const ticketsByDate = _.groupBy(data.monthly_employee_efficiency, (item) =>
+    moment(item.date).format("YYYY-MM-DD")
+  );
+
+  const listOfDays = Utils.ListOfDaysInCurrentMonth();
+
+  const chartData = listOfDays.reduce((acc, val) => {
+    //Sum up the current day.
+    let dailyHrs;
+    if (!!ticketsByDate[val]) {
+      dailyHrs = ticketsByDate[val].reduce(
+        (dayAcc, dayVal) => {
+          return {
+            actual: dayAcc.actual + dayVal.actualhrs,
+            productive: dayAcc.actual + dayVal.productivehrs,
+          };
+        },
+        { actual: 0, productive: 0 }
+      );
+    } else {
+      dailyHrs = { actual: 0, productive: 0 };
+    }
+
+    const dailyEfficiency =
+      ((dailyHrs.productive - dailyHrs.actual) / dailyHrs.productive + 1) * 100;
+
+    const theValue = {
+      date: moment(val).format("DD"),
+      ...dailyHrs,
+      dailyEfficiency: isNaN(dailyEfficiency) ? 0 : dailyEfficiency.toFixed(1),
+      accActual:
+        acc.length > 0
+          ? acc[acc.length - 1].accActual + dailyHrs.actual
+          : dailyHrs.actual,
+
+      accProductive:
+        acc.length > 0
+          ? acc[acc.length - 1].accProductive + dailyHrs.productive
+          : dailyHrs.productive,
+      accEfficiency: 0,
+    };
+    theValue.accEfficiency = (
+      ((theValue.accProductive - theValue.accActual) /
+        (theValue.accProductive || 1) +
+        1) *
+      100
+    ).toFixed(1);
+
+    return [...acc, theValue];
+  }, []);
+
+  return (
+    <Card
+      title={t("dashboard.titles.monthlyemployeeefficiency")}
+      {...cardProps}
+    >
+      <div style={{ height: "100%" }}>
+        <ResponsiveContainer width="100%" height="100%">
+          <ComposedChart
+            data={chartData}
+            margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+          >
+            <CartesianGrid stroke="#f5f5f5" />
+            <XAxis dataKey="date" />
+            <YAxis
+              yAxisId="left"
+              orientation="left"
+              stroke="#8884d8"
+              unit=" hrs"
+            />
+            <YAxis
+              yAxisId="right"
+              orientation="right"
+              stroke="#82ca9d"
+              unit="%"
+            />
+            <Tooltip />
+            <Legend />
+            <Line
+              yAxisId="right"
+              name="Accumulated Efficiency"
+              type="monotone"
+              unit="%"
+              dataKey="accEfficiency"
+              stroke="#152228"
+              connectNulls
+              //    activeDot={{ r: 8 }}
+            />
+            <Line
+              name="Daily Efficiency"
+              yAxisId="right"
+              unit="%"
+              type="monotone"
+              connectNulls
+              dataKey="dailyEfficiency"
+              stroke="#d31717"
+            />
+            <Bar
+              name="Actual Hours"
+              dataKey="actual"
+              yAxisId="left"
+              unit=" hrs"
+              //stackId="day"
+              barSize={20}
+              fill="#102568"
+            />
+            <Bar
+              name="Productive Hours"
+              dataKey="productive"
+              yAxisId="left"
+              unit=" hrs"
+              //stackId="day"
+              barSize={20}
+              fill="#017664"
+            />
+          </ComposedChart>
+        </ResponsiveContainer>
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardMonthlyEmployeeEfficiencyGql = `
+  monthly_employee_efficiency: timetickets(where: {_and: [{date: {_gte: "${moment()
+    .startOf("month")
+    .format("YYYY-MM-DD")}"}},{date: {_lte: "${moment()
+  .endOf("month")
+  .format("YYYY-MM-DD")}"}} ]}) {
+    actualhrs
+    productivehrs
+    employeeid
+    employee {
+      first_name
+      last_name
+    }
+    date
+  }
+`;

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

@@ -0,0 +1,163 @@
+import { Card, Input, Space, Table, Typography } from "antd";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { alphaSort } from "../../../utils/sorters";
+import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
+import Dinero from "dinero.js";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [costingData, setcostingData] = useState(null);
+  const [searchText, setSearchText] = useState("");
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+
+  useEffect(() => {
+    async function getCostingData() {
+      if (data && data.monthly_sales) {
+        setLoading(true);
+        const response = await axios.post("/job/costingmulti", {
+          jobids: data.monthly_sales.map((x) => x.id),
+        });
+        setcostingData(response.data);
+        setLoading(false);
+      }
+    }
+
+    getCostingData();
+  }, [data]);
+
+  if (!data) return null;
+  if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+  const columns = [
+    {
+      title: t("bodyshop.fields.responsibilitycenter"),
+      dataIndex: "cost_center",
+      key: "cost_center",
+      sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
+      sortOrder:
+        state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order,
+    },
+    {
+      title: t("jobs.labels.sales"),
+      dataIndex: "sales",
+      key: "sales",
+      sorter: (a, b) =>
+        parseFloat(a.sales.substring(1)) - parseFloat(b.sales.substring(1)),
+      sortOrder:
+        state.sortedInfo.columnKey === "sales" && state.sortedInfo.order,
+    },
+
+    {
+      title: t("jobs.labels.costs"),
+      dataIndex: "costs",
+      key: "costs",
+      sorter: (a, b) =>
+        parseFloat(a.costs.substring(1)) - parseFloat(b.costs.substring(1)),
+      sortOrder:
+        state.sortedInfo.columnKey === "costs" && state.sortedInfo.order,
+    },
+
+    {
+      title: t("jobs.labels.gpdollars"),
+      dataIndex: "gpdollars",
+      key: "gpdollars",
+      sorter: (a, b) =>
+        parseFloat(a.gpdollars.substring(1)) -
+        parseFloat(b.gpdollars.substring(1)),
+
+      sortOrder:
+        state.sortedInfo.columnKey === "gpdollars" && state.sortedInfo.order,
+    },
+    {
+      title: t("jobs.labels.gppercent"),
+      dataIndex: "gppercent",
+      key: "gppercent",
+      sorter: (a, b) =>
+        parseFloat(a.gppercent.slice(0, -1) || 0) -
+        parseFloat(b.gppercent.slice(0, -1) || 0),
+      sortOrder:
+        state.sortedInfo.columnKey === "gppercent" && state.sortedInfo.order,
+    },
+  ];
+  const filteredData =
+    searchText === ""
+      ? (costingData && costingData.allCostCenterData) || []
+      : costingData.allCostCenterData.filter((d) =>
+          (d.cost_center || "")
+            .toString()
+            .toLowerCase()
+            .includes(searchText.toLowerCase())
+        );
+
+  return (
+    <Card
+      title={t("dashboard.titles.monthlyjobcosting")}
+      extra={
+        <Space wrap>
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            value={searchText}
+            onChange={(e) => {
+              e.preventDefault();
+              setSearchText(e.target.value);
+            }}
+          />
+        </Space>
+      }
+      {...cardProps}
+    >
+      <LoadingSkeleton loading={loading}>
+        <div style={{ height: "100%" }}>
+          <Table
+            onChange={handleTableChange}
+            pagination={{ position: "top", defaultPageSize: 50 }}
+            columns={columns}
+            scroll={{ x: true, y: "calc(100% - 4em)" }}
+            rowKey="id"
+            style={{ height: "100%" }}
+            dataSource={filteredData}
+            summary={() => (
+              <Table.Summary.Row>
+                <Table.Summary.Cell>
+                  <Typography.Title level={4}>
+                    {t("general.labels.totals")}
+                  </Typography.Title>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell>
+                  {Dinero(
+                    costingData &&
+                      costingData.allSummaryData &&
+                      costingData.allSummaryData.totalSales
+                  ).toFormat()}
+                </Table.Summary.Cell>
+                <Table.Summary.Cell>
+                  {Dinero(
+                    costingData &&
+                      costingData.allSummaryData &&
+                      costingData.allSummaryData.totalCost
+                  ).toFormat()}
+                </Table.Summary.Cell>
+                <Table.Summary.Cell>
+                  {Dinero(
+                    costingData &&
+                      costingData.allSummaryData &&
+                      costingData.allSummaryData.gpdollars
+                  ).toFormat()}
+                </Table.Summary.Cell>
+                <Table.Summary.Cell></Table.Summary.Cell>
+              </Table.Summary.Row>
+            )}
+          />
+        </div>
+      </LoadingSkeleton>
+    </Card>
+  );
+}

client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx

@@ -0,0 +1,163 @@
+import { Card } from "antd";
+import Dinero from "dinero.js";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardMonthlyLaborSales({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [activeIndex, setActiveIndex] = useState(0);
+  if (!data) return null;
+  if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
+
+  const laborData = {};
+
+  data.monthly_sales.forEach((job) => {
+    job.joblines.forEach((jobline) => {
+      if (!jobline.mod_lbr_ty) return;
+      if (!laborData[jobline.mod_lbr_ty])
+        laborData[jobline.mod_lbr_ty] = Dinero();
+      laborData[jobline.mod_lbr_ty] = laborData[jobline.mod_lbr_ty].add(
+        Dinero({
+          amount: Math.round(
+            (job[`rate_${jobline.mod_lbr_ty.toLowerCase()}`] || 0) * 100
+          ),
+        }).multiply(jobline.mod_lb_hrs || 0)
+      );
+    });
+  });
+
+  const chartData = Object.keys(laborData).map((key) => {
+    return {
+      name: t(`joblines.fields.lbr_types.${key.toUpperCase()}`),
+      value: laborData[key].getAmount() / 100,
+      color: pieColor(key.toUpperCase()),
+    };
+  });
+
+  return (
+    <Card title={t("dashboard.titles.monthlylaborsales")} {...cardProps}>
+      <div style={{ height: "100%" }}>
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart margin={0} padding={0}>
+            <Pie
+              data={chartData}
+              activeIndex={activeIndex}
+              activeShape={renderActiveShape}
+              cx="50%"
+              cy="50%"
+              innerRadius="60%"
+              //  outerRadius={80}
+              fill="#8884d8"
+              dataKey="value"
+              onMouseEnter={(throwaway, index) => setActiveIndex(index)}
+            >
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Pie>
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardMonthlyRevenueGraphGql = `
+
+`;
+
+const pieColor = (type) => {
+  if (type === "LAA") return "lightgreen";
+  else if (type === "LAB") return "dodgerblue";
+  else if (type === "LAD") return "aliceblue";
+  else if (type === "LAE") return "seafoam";
+  else if (type === "LAG") return "chartreuse";
+  else if (type === "LAF") return "magenta";
+  else if (type === "LAM") return "gold";
+  else if (type === "LAR") return "crimson";
+  else if (type === "LAU") return "slategray";
+  else if (type === "LA1") return "slategray";
+  else if (type === "LA2") return "slategray";
+  else if (type === "LA3") return "slategray";
+  else if (type === "LA4") return "slategray";
+  return "slategray";
+};
+
+const renderActiveShape = (props) => {
+  //const RADIAN = Math.PI / 180;
+  const {
+    cx,
+    cy,
+    //midAngle,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fill,
+    payload,
+    //  percent,
+    value,
+  } = props;
+  // const sin = Math.sin(-RADIAN * midAngle);
+  // const cos = Math.cos(-RADIAN * midAngle);
+  // // const sx = cx + (outerRadius + 10) * cos;
+  // const sy = cy + (outerRadius + 10) * sin;
+  // const mx = cx + (outerRadius + 30) * cos;
+  // const my = cy + (outerRadius + 30) * sin;
+  // //const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+  // const ey = my;
+  //const textAnchor = cos >= 0 ? "start" : "end";
+
+  return (
+    <g>
+      <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
+        {payload.name}
+      </text>
+      <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
+        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+      </text>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={outerRadius + 6}
+        outerRadius={outerRadius + 10}
+        fill={fill}
+      />
+    </g>
+  );
+};
+// <path
+//   d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
+//   stroke={fill}
+//   fill="none"
+// />;
+// <text
+//   x={ex + (cos >= 0 ? 1 : -1) * 12}
+//   y={ey}
+//   textAnchor={textAnchor}
+//   fill="#333"
+// >
+//   {payload.name}
+// </text>
+// <text
+//   x={ex + (cos >= 0 ? 1 : -1) * 12}
+//   y={ey}
+//   dy={18}
+//   textAnchor={textAnchor}
+//   fill="#999"
+// >
+//   {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+// </text>

client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx

@@ -0,0 +1,136 @@
+import { Card } from "antd";
+import Dinero from "dinero.js";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [activeIndex, setActiveIndex] = useState(0);
+  if (!data) return null;
+  if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
+
+  const partData = {};
+
+  data.monthly_sales.forEach((job) => {
+    job.joblines.forEach((jobline) => {
+      if (!jobline.part_type) return;
+      if (!partData[jobline.part_type]) partData[jobline.part_type] = Dinero();
+      partData[jobline.part_type] = partData[jobline.part_type].add(
+        Dinero({ amount: Math.round((jobline.act_price || 0) * 100) }).multiply(
+          jobline.part_qty || 0
+        )
+      );
+    });
+  });
+
+  const chartData = Object.keys(partData).map((key) => {
+    return {
+      name: t(`joblines.fields.part_types.${key.toUpperCase()}`),
+      value: partData[key].getAmount() / 100,
+      color: pieColor(key.toUpperCase()),
+    };
+  });
+
+  return (
+    <Card title={t("dashboard.titles.monthlypartssales")} {...cardProps}>
+      <div style={{ height: "100%" }}>
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart margin={0} padding={0}>
+            <Pie
+              data={chartData}
+              activeIndex={activeIndex}
+              activeShape={renderActiveShape}
+              cx="50%"
+              cy="50%"
+              innerRadius="60%"
+              // outerRadius={80}
+              fill="#8884d8"
+              dataKey="value"
+              onMouseEnter={(throwaway, index) => setActiveIndex(index)}
+            >
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Pie>
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardMonthlyRevenueGraphGql = `
+
+`;
+const pieColor = (type) => {
+  if (type === "PAA") return "darkgreen";
+  else if (type === "PAC") return "green";
+  else if (type === "PAE") return "gold";
+  else if (type === "PAG") return "seafoam";
+  else if (type === "PAL") return "chartreuse";
+  else if (type === "PAM") return "magenta";
+  else if (type === "PAN") return "crimson";
+  else if (type === "PAO") return "gold";
+  else if (type === "PAP") return "crimson";
+  else if (type === "PAR") return "indigo";
+  else if (type === "PAS") return "dodgerblue";
+  else if (type === "PASL") return "dodgerblue";
+  return "slategray";
+};
+
+const renderActiveShape = (props) => {
+  // const RADIAN = Math.PI / 180;
+  const {
+    cx,
+    cy,
+    //  midAngle,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fill,
+    payload,
+    //   percent,
+    value,
+  } = props;
+  // const sin = Math.sin(-RADIAN * midAngle);
+  // const cos = Math.cos(-RADIAN * midAngle);
+  // const sx = cx + (outerRadius + 10) * cos;
+  //const sy = cy + (outerRadius + 10) * sin;
+  // const mx = cx + (outerRadius + 30) * cos;
+  //const my = cy + (outerRadius + 30) * sin;
+  // const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+  // const ey = my;
+  // const textAnchor = cos >= 0 ? "start" : "end";
+
+  return (
+    <g>
+      <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
+        {payload.name}
+      </text>
+      <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
+        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+      </text>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={outerRadius + 6}
+        outerRadius={outerRadius + 10}
+        fill={fill}
+      />
+    </g>
+  );
+};

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

@@ -2,29 +2,30 @@ import { Card } from "antd";
 import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import _ from "lodash";
 import {
-    Area,
-    Bar,
-    CartesianGrid,
-    ComposedChart,
-    Legend,
-    ResponsiveContainer,
-    Tooltip,
-    XAxis,
-    YAxis
+  Area,
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
 } from "recharts";
+import Dinero from "dinero.js";
 import * as Utils from "../../scoreboard-targets-table/scoreboard-targets-table.util";
+import DashboardRefreshRequired from "../refresh-required.component";
 
 export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
   const { t } = useTranslation();
+  if (!data) return null;
+  if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
 
-  const jobsByDate = {
-    "2020-07-5": [{ clm_total: 1224 }],
-    "2020-07-8": [{ clm_total: 987 }, { clm_total: 8755 }],
-    "2020-07-12": [{ clm_total: 684 }, { clm_total: 12022 }],
-    "2020-07-21": [{ clm_total: 15000 }],
-    "2020-07-28": [{ clm_total: 122 }, { clm_total: 4522 }],
-  };
+  const jobsByDate = _.groupBy(data.monthly_sales, (item) =>
+    moment(item.date_invoiced).format("YYYY-MM-DD")
+  );
 
   const listOfDays = Utils.ListOfDaysInCurrentMonth();
 
@@ -33,17 +34,19 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
     let dailySales;
     if (!!jobsByDate[val]) {
       dailySales = jobsByDate[val].reduce((dayAcc, dayVal) => {
-        return dayAcc + dayVal.clm_total;
-      }, 0);
+        return dayAcc.add(Dinero(dayVal.job_totals.totals.subtotal));
+      }, Dinero());
     } else {
-      dailySales = 0;
+      dailySales = Dinero();
     }
 
     const theValue = {
-      date: moment(val).format("D dd"),
-      dailySales,
+      date: moment(val).format("DD"),
+      dailySales: dailySales.getAmount() / 100,
       accSales:
-        acc.length > 0 ? acc[acc.length - 1].accSales + dailySales : dailySales,
+        acc.length > 0
+          ? acc[acc.length - 1].accSales + dailySales.getAmount() / 100
+          : dailySales.getAmount() / 100,
     };
 
     return [...acc, theValue];
@@ -51,32 +54,40 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
 
   return (
     <Card title={t("dashboard.titles.monthlyrevenuegraph")} {...cardProps}>
-      <ResponsiveContainer width="100%" height="100%">
-        <ComposedChart
-          data={chartData}
-          margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
-        >
-          <CartesianGrid stroke="#f5f5f5" />
-          <XAxis dataKey="date" />
-          <YAxis />
-          <Tooltip />
-          <Legend />
-          <Area
-            type="monotone"
-            name="Accumulated Sales"
-            dataKey="accSales"
-            fill="#8884d8"
-            stroke="#8884d8"
-          />
-          <Bar
-            name="Daily Sales"
-            dataKey="dailySales"
-            //stackId="day"
-            barSize={20}
-            fill="#413ea0"
-          />
-        </ComposedChart>
-      </ResponsiveContainer>
+      <div style={{ height: "100%" }}>
+        <ResponsiveContainer width="100%" height="100%">
+          <ComposedChart
+            data={chartData}
+            margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+          >
+            <CartesianGrid stroke="#f5f5f5" />
+            <XAxis dataKey="date" />
+            <YAxis />
+            <Tooltip
+              formatter={(value, name, props) => value && value.toFixed(2)}
+            />
+            <Legend />
+            <Area
+              type="monotone"
+              name="Accumulated Sales"
+              dataKey="accSales"
+              fill="#3CB371"
+              stroke="#3CB371"
+            />
+            <Bar
+              name="Daily Sales"
+              dataKey="dailySales"
+              //stackId="day"
+              barSize={20}
+              fill="#413ea0"
+            />
+          </ComposedChart>
+        </ResponsiveContainer>
+      </div>
     </Card>
   );
 }
+
+export const DashboardMonthlyRevenueGraphGql = `
+
+`;

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

@@ -1,30 +1,40 @@
-import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
 import { Card, Statistic } from "antd";
+import Dinero from "dinero.js";
+import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
-
+import DashboardRefreshRequired from "../refresh-required.component";
 export default function DashboardProjectedMonthlySales({ data, ...cardProps }) {
   const { t } = useTranslation();
-  const aboveTargetMonthlySales = false;
+  if (!data) return null;
+  if (!data.projected_monthly_sales)
+    return <DashboardRefreshRequired {...cardProps} />;
 
+  const dollars =
+    data.projected_monthly_sales &&
+    data.projected_monthly_sales.reduce(
+      (acc, val) => acc.add(Dinero(val.job_totals.totals.subtotal)),
+      Dinero()
+    );
   return (
-    <Card {...cardProps}>
-      <Statistic
-        title={t("dashboard.titles.projectedmonthlysales")}
-        value={222000.0}
-        precision={2}
-        prefix={
-          <div>
-            {aboveTargetMonthlySales ? (
-              <ArrowUpOutlined />
-            ) : (
-              <ArrowDownOutlined />
-            )}
-            $
-          </div>
-        }
-        valueStyle={{ color: aboveTargetMonthlySales ? "green" : "red" }}
-      />
+    <Card title={t("dashboard.titles.projectedmonthlysales")} {...cardProps}>
+      <Statistic value={dollars.toFormat()} />
     </Card>
   );
 }
+
+export const DashboardProjectedMonthlySalesGql = `
+    projected_monthly_sales: jobs(where: {_or: [{_and: [{date_invoiced: {_gte: "${moment()
+      .startOf("month")
+      .format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()
+  .endOf("month")
+  .format("YYYY-MM-DD")}"}}]}, {_and: [{scheduled_completion: {_gte: "${moment()
+  .startOf("month")
+  .format("YYYY-MM-DD")}"}}, {scheduled_completion: {_lte: "${moment()
+  .endOf("month")
+  .format("YYYY-MM-DD")}"}}]}]}) {
+    id
+    date_invoiced
+    job_totals
+  }
+`;

client/src/components/dashboard-components/refresh-required.component.jsx

@@ -0,0 +1,25 @@
+import { SyncOutlined } from "@ant-design/icons";
+import { Card } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function DashboardRefreshRequired(props) {
+  const { t } = useTranslation();
+
+  return (
+    <Card {...props}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          textOverflow: "ellipsis",
+        }}
+      >
+        <SyncOutlined style={{ fontSize: "300%", margin: "1rem" }} />
+        <div>{t("dashboard.errors.refreshrequired")}</div>
+      </div>
+    </Card>
+  );
+}

client/src/components/dashboard-components/total-production-dollars/total-production-dollars.component.jsx

@@ -1,33 +1,26 @@
-import React from "react";
 import { Card, Statistic } from "antd";
+import Dinero from "dinero.js";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+import DashboardRefreshRequired from "../refresh-required.component";
 
 export default function DashboardTotalProductionDollars({
   data,
   ...cardProps
 }) {
   const { t } = useTranslation();
-  const aboveTargetProductionDollars = false;
+  if (!data) return null;
+  if (!data.production_jobs) return <DashboardRefreshRequired {...cardProps} />;
+  const dollars =
+    data.production_jobs &&
+    data.production_jobs.reduce(
+      (acc, val) => acc.add(Dinero(val.job_totals.totals.subtotal)),
+      Dinero()
+    );
 
   return (
-    <Card {...cardProps}>
-      <Statistic
-        title={t("dashboard.titles.productiondollars")}
-        value={175000.0}
-        precision={2}
-        prefix={
-          <div>
-            {aboveTargetProductionDollars ? (
-              <ArrowUpOutlined />
-            ) : (
-              <ArrowDownOutlined />
-            )}
-            $
-          </div>
-        }
-        valueStyle={{ color: aboveTargetProductionDollars ? "green" : "red" }}
-      />
+    <Card title={t("dashboard.labels.dollarsinproduction")} {...cardProps}>
+      <Statistic value={dollars.toFormat()} />
     </Card>
   );
 }

client/src/components/dashboard-components/total-production-hours/total-production-hours.component.jsx

@@ -1,19 +1,63 @@
+import { Card, Space, Statistic } from "antd";
 import React from "react";
-import { Card, Statistic } from "antd";
 import { useTranslation } from "react-i18next";
-import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../../redux/user/user.selectors";
+import DashboardRefreshRequired from "../refresh-required.component";
 
-export default function DashboardTotalProductionHours({ data, ...cardProps }) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DashboardTotalProductionHours);
+
+export function DashboardTotalProductionHours({
+  bodyshop,
+  data,
+  ...cardProps
+}) {
   const { t } = useTranslation();
-  const aboveTargetHours = true;
+  if (!data) return null;
+  if (!data.production_jobs) return <DashboardRefreshRequired {...cardProps} />;
+  const hours =
+    data.production_jobs &&
+    data.production_jobs.reduce(
+      (acc, val) => {
+        return {
+          body: acc.body + val.labhrs.aggregate.sum.mod_lb_hrs,
+          ref: acc.ref + val.larhrs.aggregate.sum.mod_lb_hrs,
+          total:
+            acc.total +
+            val.labhrs.aggregate.sum.mod_lb_hrs +
+            val.larhrs.aggregate.sum.mod_lb_hrs,
+        };
+      },
+      { body: 0, ref: 0, total: 0 }
+    );
+  const aboveTargetHours = hours.total >= bodyshop.prodtargethrs;
   return (
-    <Card {...cardProps}>
-      <Statistic
-        title={t("dashboard.titles.productionhours")}
-        value={750}
-        prefix={aboveTargetHours ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
-        valueStyle={{ color: aboveTargetHours ? "green" : "red" }}
-      />
+    <Card {...cardProps} title={t("dashboard.titles.prodhrssummary")}>
+      <Space wrap style={{ flex: 1 }}>
+        <Statistic
+          title={t("dashboard.labels.bodyhrs")}
+          value={hours.body.toFixed(1)}
+        />
+        <Statistic
+          title={t("dashboard.labels.refhrs")}
+          value={hours.ref.toFixed(1)}
+        />
+        <Statistic
+          title={t("dashboard.labels.prodhrs")}
+          value={hours.total.toFixed(1)}
+          valueStyle={{ color: aboveTargetHours ? "green" : "red" }}
+        />
+      </Space>
     </Card>
   );
 }
+
+export const DashboardTotalProductionHoursGql = ``;

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

@@ -1,185 +1,355 @@
-// import Icon from "@ant-design/icons";
-// import { Button, Dropdown, Menu, notification } from "antd";
-// import React, { useState } from "react";
-// import { useMutation, useQuery } from "@apollo/client";
-// import { Responsive, WidthProvider } from "react-grid-layout";
-// import { useTranslation } from "react-i18next";
-// import { MdClose } from "react-icons/md";
-// import { connect } from "react-redux";
-// import { createStructuredSelector } from "reselect";
-// import { logImEXEvent } from "../../firebase/firebase.utils";
-// import { QUERY_DASHBOARD_DETAILS } from "../../graphql/bodyshop.queries";
-// import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
-// import {
-//   selectBodyshop,
-//   selectCurrentUser,
-// } from "../../redux/user/user.selectors";
-// import AlertComponent from "../alert/alert.component";
-// import DashboardMonthlyRevenueGraph from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
-// import DashboardProjectedMonthlySales from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
-// import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
-// import DashboardTotalProductionHours from "../dashboard-components/total-production-hours/total-production-hours.component";
-// 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 "./dashboard-grid.styles.css";
-// import "./dashboard-grid.styles.scss";
+import Icon, { SyncOutlined } from "@ant-design/icons";
+import { gql, useMutation, useQuery } from "@apollo/client";
+import { Button, Dropdown, Menu, notification, PageHeader, Space } from "antd";
+import i18next from "i18next";
+import _ from "lodash";
+import moment from "moment";
+import React, { useState } from "react";
+import { Responsive, WidthProvider } from "react-grid-layout";
+import { useTranslation } from "react-i18next";
+import { MdClose } from "react-icons/md";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import DashboardMonthlyEmployeeEfficiency, {
+  DashboardMonthlyEmployeeEfficiencyGql,
+} from "../dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component";
+import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component";
+import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component";
+import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component";
+import DashboardMonthlyRevenueGraph, {
+  DashboardMonthlyRevenueGraphGql,
+} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
+import DashboardProjectedMonthlySales, {
+  DashboardProjectedMonthlySalesGql,
+} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
+import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
+import DashboardTotalProductionHours, {
+  DashboardTotalProductionHoursGql,
+} from "../dashboard-components/total-production-hours/total-production-hours.component";
+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 "./dashboard-grid.styles.scss";
+import { GenerateDashboardData } from "./dashboard-grid.utils";
 
-// const ResponsiveReactGridLayout = WidthProvider(Responsive);
+const ResponsiveReactGridLayout = WidthProvider(Responsive);
 
-// const mapStateToProps = createStructuredSelector({
-//   currentUser: selectCurrentUser,
-//   bodyshop: selectBodyshop,
-// });
-// const mapDispatchToProps = (dispatch) => ({
-//   //setUserLanguage: language => dispatch(setUserLanguage(language))
-// });
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
 
-// export function DashboardGridComponent({ currentUser, bodyshop }) {
-//   const { loading, error, data } = useQuery(QUERY_DASHBOARD_DETAILS);
-//   const { t } = useTranslation();
-//   const [state, setState] = useState({
-//     layout: bodyshop.associations[0].user.dashboardlayout || [
-//       { i: "ProductionDollars", x: 0, y: 0, w: 2, h: 2 },
-//       //  { i: "ProductionHours", x: 2, y: 0, w: 2, h: 2 },
-//     ],
-//   });
-//   const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
+export function DashboardGridComponent({ currentUser, bodyshop }) {
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    ...(bodyshop.associations[0].user.dashboardlayout
+      ? bodyshop.associations[0].user.dashboardlayout
+      : { items: [], layout: {}, layouts: [] }),
+  });
 
-//   const handleLayoutChange = async (newLayout) => {
-//     logImEXEvent("dashboard_change_layout");
-//     setState({ ...state, layout: newLayout });
-//     const result = await updateLayout({
-//       variables: { email: currentUser.email, layout: newLayout },
-//     });
+  const { loading, error, data, refetch } = useQuery(
+    createDashboardQuery(state)
+  );
 
-//     if (!!result.errors) {
-//       notification["error"]({
-//         message: t("dashboard.errors.updatinglayout", {
-//           message: JSON.stringify(result.errors),
-//         }),
-//       });
-//     }
-//   };
+  const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
 
-//   const handleRemoveComponent = (key) => {
-//     logImEXEvent("dashboard_remove_component", { name: key });
+  const handleLayoutChange = async (layout, layouts) => {
+    logImEXEvent("dashboard_change_layout");
 
-//     const idxToRemove = state.layout.findIndex((i) => i.i === key);
-//     const newLayout = state.layout;
-//     newLayout.splice(idxToRemove, 1);
-//     handleLayoutChange(newLayout);
-//   };
+    setState({ ...state, layout, layouts });
 
-//   const handleAddComponent = (e) => {
-//     logImEXEvent("dashboard_add_component", { name: e });
+    const result = await updateLayout({
+      variables: {
+        email: currentUser.email,
+        layout: { ...state, layout, layouts },
+      },
+    });
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("dashboard.errors.updatinglayout", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    }
+  };
+  const handleRemoveComponent = (key) => {
+    logImEXEvent("dashboard_remove_component", { name: key });
+    const idxToRemove = state.items.findIndex((i) => i.i === key);
+    console.log(
+      "🚀  ~ file: dashboard-grid.component.jsx  ~ line 81  ~ idxToRemove",
+      idxToRemove
+    );
+    const items = _.cloneDeep(state.items);
 
-//     handleLayoutChange([
-//       ...state.layout,
-//       {
-//         i: e.key,
-//         x: (state.layout.length * 2) % (state.cols || 12),
-//         y: Infinity, // puts it at the bottom
-//         w: componentList[e.key].w || 2,
-//         h: componentList[e.key].h || 2,
-//       },
-//     ]);
-//   };
+    items.splice(idxToRemove, 1);
+    setState({ ...state, items });
+  };
 
-//   const onBreakpointChange = (breakpoint, cols) => {
-//     setState({ ...state, breakpoint: breakpoint, cols: cols });
-//   };
+  const handleAddComponent = (e) => {
+    logImEXEvent("dashboard_add_component", { name: e });
+    setState({
+      ...state,
+      items: [
+        ...state.items,
+        {
+          i: e.key,
+          x: (state.items.length * 2) % (state.cols || 12),
+          y: 99, // puts it at the bottom
+          w: componentList[e.key].w || 2,
+          h: componentList[e.key].h || 2,
+        },
+      ],
+    });
+  };
 
-//   const existingLayoutKeys = state.layout.map((i) => i.i);
-//   const addComponentOverlay = (
-//     <Menu onClick={handleAddComponent}>
-//       {Object.keys(componentList).map((key) => (
-//         <Menu.Item
-//           key={key}
-//           value={key}
-//           disabled={existingLayoutKeys.includes(key)}
-//         >
-//           {componentList[key].label}
-//         </Menu.Item>
-//       ))}
-//     </Menu>
-//   );
+  const dashboarddata = React.useMemo(
+    () => GenerateDashboardData(data),
+    [data]
+  );
+  const existingLayoutKeys = state.items.map((i) => i.i);
+  const addComponentOverlay = (
+    <Menu onClick={handleAddComponent}>
+      {Object.keys(componentList).map((key) => (
+        <Menu.Item
+          key={key}
+          value={key}
+          disabled={existingLayoutKeys.includes(key)}
+        >
+          {componentList[key].label}
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
 
-//   if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
-//   return (
-//     <div>
-//       <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
-//         <Button>{t("dashboard.actions.addcomponent")}</Button>
-//       </Dropdown>
-//       <ResponsiveReactGridLayout
-//         className="layout"
-//         breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-//         cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-//         width="100%"
-//         onLayoutChange={handleLayoutChange}
-//         onBreakpointChange={onBreakpointChange}
-//       >
-//         {state.layout.map((item, index) => {
-//           const TheComponent = componentList[item.i].component;
-//           return (
-//             <div key={item.i} data-grid={item}>
-//               <LoadingSkeleton loading={loading}>
-//                 <Icon
-//                   component={MdClose}
-//                   key={item.i}
-//                   style={{
-//                     position: "absolute",
-//                     zIndex: "2",
-//                     right: ".25rem",
-//                     top: ".25rem",
-//                     cursor: "pointer",
-//                   }}
-//                   onClick={() => handleRemoveComponent(item.i)}
-//                 />
-//                 <TheComponent
-//                   className="dashboard-card"
-//                   size="small"
-//                   style={{ height: "100%", width: "100%" }}
-//                 />
-//               </LoadingSkeleton>
-//             </div>
-//           );
-//         })}
-//       </ResponsiveReactGridLayout>
-//     </div>
-//   );
-// }
+  return (
+    <div>
+      <PageHeader
+        extra={
+          <Space>
+            <Button onClick={() => refetch()}>
+              <SyncOutlined />
+            </Button>
+            <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
+              <Button>{t("dashboard.actions.addcomponent")}</Button>
+            </Dropdown>
+          </Space>
+        }
+      />
 
-// export default connect(
-//   mapStateToProps,
-//   mapDispatchToProps
-// )(DashboardGridComponent);
+      <ResponsiveReactGridLayout
+        className="layout"
+        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+        width="100%"
+        layouts={state.layouts}
+        onLayoutChange={handleLayoutChange}
+        //   onBreakpointChange={onBreakpointChange}
+      >
+        {state.items.map((item, index) => {
+          const TheComponent = componentList[item.i].component;
+          return (
+            <div
+              key={item.i}
+              data-grid={{
+                ...item,
+                minH: componentList[item.i].minH || 1,
+                minW: componentList[item.i].minW || 1,
+              }}
+            >
+              <LoadingSkeleton loading={loading}>
+                <Icon
+                  component={MdClose}
+                  key={item.i}
+                  style={{
+                    position: "absolute",
+                    zIndex: "2",
+                    right: ".25rem",
+                    top: ".25rem",
+                    cursor: "pointer",
+                  }}
+                  onClick={() => handleRemoveComponent(item.i)}
+                />
+                <TheComponent className="dashboard-card" data={dashboarddata} />
+              </LoadingSkeleton>
+            </div>
+          );
+        })}
+      </ResponsiveReactGridLayout>
+    </div>
+  );
+}
 
-// const componentList = {
-//   ProductionDollars: {
-//     label: "Production Dollars",
-//     component: DashboardTotalProductionDollars,
-//     w: 2,
-//     h: 1,
-//   },
-//   ProductionHours: {
-//     label: "Production Hours",
-//     component: DashboardTotalProductionHours,
-//     w: 2,
-//     h: 1,
-//   },
-//   ProjectedMonthlySales: {
-//     label: "Projected Monthly Sales",
-//     component: DashboardProjectedMonthlySales,
-//     w: 2,
-//     h: 1,
-//   },
-//   MonthlyRevenueGraph: {
-//     label: "Monthly Sales Graph",
-//     component: DashboardMonthlyRevenueGraph,
-//     w: 2,
-//     h: 2,
-//   },
-// };
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DashboardGridComponent);
+
+const componentList = {
+  ProductionDollars: {
+    label: i18next.t("dashboard.titles.productiondollars"),
+    component: DashboardTotalProductionDollars,
+    gqlFragment: null,
+    w: 1,
+    h: 1,
+    minW: 2,
+    minH: 1,
+  },
+  ProductionHours: {
+    label: i18next.t("dashboard.titles.productionhours"),
+    component: DashboardTotalProductionHours,
+    gqlFragment: DashboardTotalProductionHoursGql,
+    w: 3,
+    h: 1,
+    minW: 3,
+    minH: 1,
+  },
+  ProjectedMonthlySales: {
+    label: i18next.t("dashboard.titles.projectedmonthlysales"),
+    component: DashboardProjectedMonthlySales,
+    gqlFragment: DashboardProjectedMonthlySalesGql,
+    w: 2,
+    h: 1,
+    minW: 2,
+    minH: 1,
+  },
+  MonthlyRevenueGraph: {
+    label: i18next.t("dashboard.titles.monthlyrevenuegraph"),
+    component: DashboardMonthlyRevenueGraph,
+    gqlFragment: DashboardMonthlyRevenueGraphGql,
+    w: 4,
+    h: 2,
+    minW: 4,
+    minH: 2,
+  },
+  MonthlyJobCosting: {
+    label: i18next.t("dashboard.titles.monthlyjobcosting"),
+    component: DashboardMonthlyJobCosting,
+    gqlFragment: null,
+    minW: 6,
+    minH: 3,
+    w: 6,
+    h: 3,
+  },
+  MonthlyPartsSales: {
+    label: i18next.t("dashboard.titles.productiondollars"),
+    component: DashboardMonthlyPartsSales,
+    gqlFragment: null,
+    minW: 2,
+    minH: 2,
+    w: 2,
+    h: 2,
+  },
+  MonthlyLaborSales: {
+    label: i18next.t("dashboard.titles.monthlypartssales"),
+    component: DashboardMonthlyLaborSales,
+    gqlFragment: null,
+    minW: 2,
+    minH: 2,
+    w: 2,
+    h: 2,
+  },
+  MonthlyEmployeeEfficency: {
+    label: i18next.t("dashboard.titles.monthlyemployeeefficiency"),
+    component: DashboardMonthlyEmployeeEfficiency,
+    gqlFragment: DashboardMonthlyEmployeeEfficiencyGql,
+    minW: 2,
+    minH: 2,
+    w: 2,
+    h: 2,
+  },
+};
+
+const createDashboardQuery = (state) => {
+  const componentBasedAdditions =
+    state &&
+    Array.isArray(state.layout) &&
+    state.layout
+      .map((item, index) => componentList[item.i].gqlFragment || "")
+      .join("");
+  return gql`
+    query QUERY_DASHBOARD_DETAILS {
+         ${componentBasedAdditions || ""}
+      monthly_sales: jobs(where: {_and: [{date_invoiced: {_gte: "${moment()
+        .startOf("month")
+        .format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()
+    .endOf("month")
+    .format("YYYY-MM-DD")}"}}]}) {
+    id
+    date_invoiced
+    job_totals
+          rate_la1
+      rate_la2
+      rate_la3
+      rate_la4
+      rate_laa
+      rate_lab
+      rate_lad
+      rate_lae
+      rate_laf
+      rate_lag
+      rate_lam
+      rate_lar
+      rate_las
+      rate_lau
+      rate_ma2s
+      rate_ma2t
+      rate_ma3s
+      rate_mabl
+      rate_macs
+      rate_mahw
+      rate_mapa
+      rate_mash
+      rate_matd
+    joblines(where: { removed: { _eq: false } }) {
+        id
+        mod_lbr_ty
+        mod_lb_hrs
+        act_price
+        part_qty
+        part_type
+    }
+  }
+      production_jobs: jobs(where: { inproduction: { _eq: true } }) {
+        id
+        ro_number
+        ins_co_nm
+        job_totals
+        joblines(where: { removed: { _eq: false } }) {
+          id
+          mod_lbr_ty
+          mod_lb_hrs
+          act_price
+          part_qty
+          part_type
+        }
+        labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" } }) {
+          aggregate {
+            sum {
+              mod_lb_hrs
+            }
+          }
+        }
+        larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" } }) {
+          aggregate {
+            sum {
+              mod_lb_hrs
+            }
+          }
+        }
+      }
+    }
+  `;
+};

client/src/components/dashboard-grid/dashboard-grid.styles.css

@@ -1,128 +0,0 @@
-.react-resizable {
-  position: relative;
-}
-.react-resizable-handle {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background-repeat: no-repeat;
-  background-origin: content-box;
-  box-sizing: border-box;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+");
-  background-position: bottom right;
-  padding: 0 3px 3px 0;
-}
-.react-resizable-handle-sw {
-  bottom: 0;
-  left: 0;
-  cursor: sw-resize;
-  transform: rotate(90deg);
-}
-.react-resizable-handle-se {
-  bottom: 0;
-  right: 0;
-  cursor: se-resize;
-}
-.react-resizable-handle-nw {
-  top: 0;
-  left: 0;
-  cursor: nw-resize;
-  transform: rotate(180deg);
-}
-.react-resizable-handle-ne {
-  top: 0;
-  right: 0;
-  cursor: ne-resize;
-  transform: rotate(270deg);
-}
-.react-resizable-handle-w,
-.react-resizable-handle-e {
-  top: 50%;
-  margin-top: -10px;
-  cursor: ew-resize;
-}
-.react-resizable-handle-w {
-  left: 0;
-  transform: rotate(135deg);
-}
-.react-resizable-handle-e {
-  right: 0;
-  transform: rotate(315deg);
-}
-.react-resizable-handle-n,
-.react-resizable-handle-s {
-  left: 50%;
-  margin-left: -10px;
-  cursor: ns-resize;
-}
-.react-resizable-handle-n {
-  top: 0;
-  transform: rotate(225deg);
-}
-.react-resizable-handle-s {
-  bottom: 0;
-  transform: rotate(45deg);
-}
-.react-grid-layout {
-  position: relative;
-  transition: height 200ms ease;
-}
-.react-grid-item {
-  transition: all 200ms ease;
-  transition-property: left, top;
-}
-.react-grid-item.cssTransforms {
-  transition-property: transform;
-}
-.react-grid-item.resizing {
-  z-index: 1;
-  will-change: width, height;
-}
-
-.react-grid-item.react-draggable-dragging {
-  transition: none;
-  z-index: 3;
-  will-change: transform;
-}
-
-.react-grid-item.dropping {
-  visibility: hidden;
-}
-
-.react-grid-item.react-grid-placeholder {
-  background: red;
-  opacity: 0.2;
-  transition-duration: 100ms;
-  z-index: 2;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-}
-
-.react-grid-item > .react-resizable-handle {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  bottom: 0;
-  right: 0;
-  cursor: se-resize;
-}
-
-.react-grid-item > .react-resizable-handle::after {
-  content: "";
-  position: absolute;
-  right: 3px;
-  bottom: 3px;
-  width: 5px;
-  height: 5px;
-  border-right: 2px solid rgba(0, 0, 0, 0.4);
-  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
-}
-
-.react-resizable-hide > .react-resizable-handle {
-  display: none;
-}
-
-

client/src/components/dashboard-grid/dashboard-grid.styles.scss

@@ -1,12 +1,154 @@
-.dashboard-card {
-  // background-color: green;
+.react-resizable {
+  position: relative;
+}
+.react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+");
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+}
+.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+  transform: rotate(90deg);
+}
+.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+  transform: rotate(180deg);
+}
+.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+  transform: rotate(270deg);
+}
+.react-resizable-handle-w,
+.react-resizable-handle-e {
+  top: 50%;
+  margin-top: -10px;
+  cursor: ew-resize;
+}
+.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+  left: 50%;
+  margin-left: -10px;
+  cursor: ns-resize;
+}
+.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+}
+.react-grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+}
+.react-grid-item {
+  transition: all 200ms ease;
+  transition-property: left, top;
+}
+.react-grid-item.cssTransforms {
+  transition-property: transform;
+}
+.react-grid-item.resizing {
+  z-index: 1;
+  will-change: width, height;
+}
 
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 3;
+  will-change: transform;
+}
+
+.react-grid-item.dropping {
+  visibility: hidden;
+}
+
+.react-grid-item.react-grid-placeholder {
+  background: red;
+  opacity: 0.2;
+  transition-duration: 100ms;
+  z-index: 2;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.react-grid-item > .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 5px;
+  height: 5px;
+  border-right: 2px solid rgba(0, 0, 0, 0.4);
+  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+}
+
+.react-resizable-hide > .react-resizable-handle {
+  display: none;
+}
+.dashboard-card {
+  height: 100%;
+  width: 100%;
   .ant-card-body {
-  //  background-color: red;
-    height: 100%;
+    height: 80%;
     width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    // //  background-color: red;
+    // height: 90%;
+    // width: 100%;
+    // padding: 8px;
+    // display: flex;
+    // flex-direction: column;
+    // align-items: center;
+    // justify-content: center;
+  }
+  .ant-spin-nested-loading {
+    height: 100%;
+    .ant-spin-container {
+      height: 100%;
+      .ant-table {
+        height: 100%;
+        .ant-table-container {
+          height: 100%;
+        }
+      }
+    }
   }
 }

client/src/components/dashboard-grid/dashboard-grid.utils.js

@@ -0,0 +1,3 @@
+export function GenerateDashboardData(data) {
+  return data;
+}

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

@@ -132,9 +132,13 @@ export const uploadToCloudinary = async (
   //Insert the document with the matching key.
   let takenat;
   if (fileType.includes("image")) {
-    const exif = await exifr.parse(file);
+    try {
+      const exif = await exifr.parse(file);
 
-    takenat = exif && exif.DateTimeOriginal;
+      takenat = exif && exif.DateTimeOriginal;
+    } catch (error) {
+      console.log("Unable to parse image file for EXIF Data");
+    }
   }
   const documentInsert = await client.mutate({
     mutation: INSERT_NEW_DOCUMENT,

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

@@ -0,0 +1,58 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+import { useTranslation } from "react-i18next";
+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 AlertComponent from "../alert/alert.component";
+import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  emailConfig: selectEmailConfig,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(EmailDocumentsComponent);
+
+export function EmailDocumentsComponent({
+  emailConfig,
+
+  selectedMediaState,
+}) {
+  const { t } = useTranslation();
+
+  const [selectedMedia, setSelectedMedia] = selectedMediaState;
+  const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
+    variables: {
+      jobId: emailConfig.jobid,
+    },
+    skip: !emailConfig.jobid,
+  });
+  console.log(
+    "🚀  ~ file: email-documents.component.jsx  ~ line 38  ~ emailConfig",
+    emailConfig
+  );
+
+  return (
+    <div>
+      {loading && <LoadingSpinner />}
+      {error && <AlertComponent message={error.message} type="error" />}
+      {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
+        <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
+      ) : null}
+      {data && (
+        <JobDocumentsGalleryExternal
+          data={data ? data.documents : []}
+          externalMediaState={[selectedMedia, setSelectedMedia]}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -1,9 +1,10 @@
 import { UploadOutlined } from "@ant-design/icons";
-import { Card, Divider, Form, Input, Select, Upload } from "antd";
+import { Divider, Form, Input, Select, Tabs, Upload } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import EmailDocumentsComponent from "../email-documents/email-documents.component";
 
-export default function EmailOverlayComponent({ form }) {
+export default function EmailOverlayComponent({ form, selectedMediaState }) {
   const { t } = useTranslation();
   return (
     <div>
@@ -52,34 +53,38 @@ export default function EmailOverlayComponent({ form }) {
         }}
       </Form.Item>
 
-      <Card title={t("emails.labels.attachments")}>
-        <Form.Item
-          name="fileList"
-          valuePropName="fileList"
-          getValueFromEvent={(e) => {
-            console.log("Upload event:", e);
-            if (Array.isArray(e)) {
-              return e;
-            }
-            return e && e.fileList;
-          }}
-        >
-          <Upload.Dragger
-            beforeUpload={Upload.LIST_IGNORE}
-            multiple
-            listType="picture-card"
+      <Tabs>
+        <Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
+          <EmailDocumentsComponent selectedMediaState={selectedMediaState} />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
+          <Form.Item
+            name="fileList"
+            valuePropName="fileList"
+            getValueFromEvent={(e) => {
+              if (Array.isArray(e)) {
+                return e;
+              }
+              return e && e.fileList;
+            }}
           >
-            <>
-              <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>
-        </Form.Item>
-      </Card>
+            <Upload.Dragger
+              beforeUpload={Upload.LIST_IGNORE}
+              multiple
+              listType="picture-card"
+            >
+              <>
+                <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>
+          </Form.Item>
+        </Tabs.TabPane>
+      </Tabs>
     </div>
   );
 }

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

@@ -43,6 +43,12 @@ export function EmailOverlayContainer({
   const [loading, setLoading] = useState(false);
   const [sending, setSending] = useState(false);
   const [rawHtml, setRawHtml] = useState("");
+  const [pdfCopytoAttach, setPdfCopytoAttach] = useState({
+    filename: null,
+    pdf: null,
+  });
+  const [selectedMedia, setSelectedMedia] = useState([]);
+
   const defaultEmailFrom = {
     from: {
       name: `${currentUser.displayName} @ ${bodyshop.shopname}`,
@@ -56,17 +62,18 @@ export function EmailOverlayContainer({
 
   const handleFinish = async (values) => {
     logImEXEvent("email_send_from_modal");
-    console.log(`values`, values);
-    const attachments = [];
 
-    await asyncForEach(values.fileList, async (f) => {
-      const t = {
-        ContentType: f.type,
-        Filename: f.name,
-        Base64Content: (await toBase64(f.originFileObj)).split(",")[1],
-      };
-      attachments.push(t);
-    });
+    //const attachments = [];
+
+    // if (values.fileList)
+    //   await asyncForEach(values.fileList, async (f) => {
+    //     const t = {
+    //       ContentType: f.type,
+    //       Filename: f.name,
+    //       Base64Content: (await toBase64(f.originFileObj)).split(",")[1],
+    //     };
+    //     attachments.push(t);
+    //   });
 
     setSending(true);
     try {
@@ -74,9 +81,29 @@ export function EmailOverlayContainer({
         ...defaultEmailFrom,
         ...values,
         html: rawHtml,
-        attachments: await Promise.all(
-          values.fileList.map(async (f) => await toBase64(f.originFileObj))
-        ),
+        attachments: [
+          ...(values.fileList
+            ? await Promise.all(
+                values.fileList.map(async (f) => {
+                  return {
+                    filename: f.name,
+                    path: await toBase64(f.originFileObj),
+                  };
+                })
+              )
+            : []),
+          ...(pdfCopytoAttach.pdf
+            ? [
+                {
+                  path: pdfCopytoAttach.pdf,
+                  filename:
+                    pdfCopytoAttach.filename &&
+                    `${pdfCopytoAttach.filename}.pdf`,
+                },
+              ]
+            : []),
+        ],
+        media: selectedMedia.filter((m) => m.isSelected).map((m) => m.src),
         //attachments,
       });
       notification["success"]({ message: t("emails.successes.sent") });
@@ -93,13 +120,22 @@ export function EmailOverlayContainer({
   const render = async () => {
     logImEXEvent("email_render_template", { template: emailConfig.template });
     setLoading(true);
-    let html = await RenderTemplate(emailConfig.template, bodyshop, true);
+    let { html, pdf, filename } = await RenderTemplate(
+      emailConfig.template,
+      bodyshop,
+      true
+    );
 
     const response = await axios.post("/render/inlinecss", {
       html: html,
       url: `${window.location.protocol}://${window.location.host}/`,
     });
     setRawHtml(response.data);
+
+    if (pdf) {
+      setPdfCopytoAttach({ pdf, filename });
+    }
+
     form.setFieldsValue({
       ...emailConfig.messageOptions,
       cc:
@@ -137,7 +173,12 @@ export function EmailOverlayContainer({
             <LoadingSpinner message={t("emails.labels.generatingemail")} />
           </div>
         )}
-        {!loading && <EmailOverlayComponent form={form} />}
+        {!loading && (
+          <EmailOverlayComponent
+            form={form}
+            selectedMediaState={[selectedMedia, setSelectedMedia]}
+          />
+        )}
       </Form>
     </Modal>
   );
@@ -155,8 +196,8 @@ const toBase64 = (file) =>
     reader.onerror = (error) => reject(error);
   });
 
-const asyncForEach = async (array, callback) => {
-  for (let index = 0; index < array.length; index++) {
-    await callback(array[index], index, array);
-  }
-};
+// const asyncForEach = async (array, callback) => {
+//   for (let index = 0; index < array.length; index++) {
+//     await callback(array[index], index, array);
+//   }
+// };

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

@@ -5,9 +5,14 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -34,21 +39,37 @@ class ErrorBoundary extends React.Component {
   }
 
   handleErrorSubmit = () => {
-    const errorDescription = `**Please add relevant details about what you were doing before you encountered this issue**
+    window.$crisp.push([
+      "do",
+      "message:send",
+      [
+        "text",
+        `I hit the following error: \n\n 
+    ${this.state.error.message}\n\n
+    ${this.state.error.stack}\n\n
+    URL:${window.location} as ${this.props.currentUser.email} for ${
+          this.props.bodyshop && this.props.bodyshop.name
+        }
+    `,
+      ],
+    ]);
 
-----
-System Generated Log:
-${this.state.error.message}
-${this.state.error.stack}
-    `;
+    window.$crisp.push(["do", "chat:open"]);
+    //     const errorDescription = `**Please add relevant details about what you were doing before you encountered this issue**
 
-    const URL = `https://bodyshop.atlassian.net/servicedesk/customer/portal/3/group/8/create/26?summary=123&description=${encodeURI(
-      errorDescription
-    )}&customfield_10049=${window.location}&email=${
-      this.props.currentUser.email
-    }`;
-    console.log(`URL`, URL);
-    window.open(URL, "_blank");
+    // ----
+    // System Generated Log:
+    // ${this.state.error.message}
+    // ${this.state.error.stack}
+    //     `;
+
+    //     const URL = `https://bodyshop.atlassian.net/servicedesk/customer/portal/3/group/8/create/26?summary=123&description=${encodeURI(
+    //       errorDescription
+    //     )}&customfield_10049=${window.location}&email=${
+    //       this.props.currentUser.email
+    //     }`;
+    //     console.log(`URL`, URL);
+    //     window.open(URL, "_blank");
   };
 
   render() {
@@ -91,7 +112,7 @@ ${this.state.error.stack}
                   {t("general.actions.refresh")}
                 </Button>
                 <Button onClick={this.handleErrorSubmit}>
-                  {t("general.actions.submitticket")}
+                  {t("general.actions.senderrortosupport")}
                 </Button>
               </Space>
             }

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

@@ -0,0 +1,50 @@
+import moment from "moment";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+function FeatureWrapper({
+  bodyshop,
+  featureName,
+  noauth,
+  children,
+  ...restProps
+}) {
+  const { t } = useTranslation();
+
+  if (HasFeatureAccess({ featureName, bodyshop })) return children;
+
+  return (
+    noauth || (
+      <AlertComponent
+        message={t("general.messages.nofeatureaccess")}
+        type="warning"
+      />
+    )
+  );
+}
+
+export function HasFeatureAccess({ featureName, bodyshop }) {
+  return (
+    bodyshop.features.allAccess ||
+    moment(bodyshop.features[featureName]).isAfter(moment())
+  );
+}
+
+export default connect(mapStateToProps, null)(FeatureWrapper);
+
+/* 
+dashboard
+production-board
+scoreboard
+csi
+tech-console
+mobile-imaging
+*/

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

@@ -11,9 +11,8 @@ import AlertComponent from "../alert/alert.component";
 export default function GlobalSearch() {
   const { t } = useTranslation();
 
-  const [callSearch, { loading, error, data }] = useLazyQuery(
-    GLOBAL_SEARCH_QUERY
-  );
+  const [callSearch, { loading, error, data }] =
+    useLazyQuery(GLOBAL_SEARCH_QUERY);
 
   const executeSearch = (v) => {
     if (v && v.variables.search && v.variables.search !== "") callSearch(v);
@@ -38,7 +37,7 @@ export default function GlobalSearch() {
               value: job.ro_number,
               label: (
                 <Link to={`/manage/jobs/${job.id}`}>
-                  <Space wrap split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
                     <strong>{job.ro_number || t("general.labels.na")}</strong>
                     <span>{`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
                       job.ownr_co_nm || ""
@@ -46,7 +45,7 @@ export default function GlobalSearch() {
                     <span>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
                       job.v_model_desc || ""
                     }`}</span>
-                    <span>{`${job.clm_no}`}</span>
+                    <span>{`${job.clm_no || ""}`}</span>
                   </Space>
                 </Link>
               ),
@@ -63,7 +62,7 @@ export default function GlobalSearch() {
               }`,
               label: (
                 <Link to={`/manage/owners/${owner.id}`}>
-                  <Space wrap split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
                     <span>{`${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
                       owner.ownr_co_nm || ""
                     }`}</span>
@@ -86,14 +85,14 @@ export default function GlobalSearch() {
               } ${vehicle.v_model_desc || ""}`,
               label: (
                 <Link to={`/manage/vehicles/${vehicle.id}`}>
-                  <Space wrap split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
                     <span>
                       {`${vehicle.v_model_yr || ""} ${
                         vehicle.v_make_desc || ""
                       } ${vehicle.v_model_desc || ""}`}
                     </span>
-                    <span>{vehicle.plate_no}</span>
-                    <span> {vehicle.v_vin}</span>
+                    <span>{vehicle.plate_no || ""}</span>
+                    <span> {vehicle.v_vin || ""}</span>
                   </Space>
                 </Link>
               ),
@@ -108,11 +107,12 @@ export default function GlobalSearch() {
               value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`,
               label: (
                 <Link to={`/manage/jobs/${payment.job.id}`}>
-                  <Space wrap split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
+                    <span>{payment.paymentnum}</span>
                     <span>{payment.job.ro_number}</span>
-                    <span>{payment.job.memo}</span>
-                    <span>{payment.job.amount}</span>
-                    <span>{payment.job.transactionid}</span>
+                    <span>{payment.memo || ""}</span>
+                    <span>{payment.amount || ""}</span>
+                    <span>{payment.transactionid || ""}</span>
                   </Space>
                 </Link>
               ),
@@ -127,7 +127,7 @@ export default function GlobalSearch() {
               value: `${bill.invoice_number} - ${bill.vendor.name}`,
               label: (
                 <Link to={`/manage/bills?billid=${bill.id}`}>
-                  <Space wrap split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
                     <span>{bill.invoice_number}</span>
                     <span>{bill.vendor.name}</span>
                     <span>{bill.date}</span>
@@ -147,7 +147,7 @@ export default function GlobalSearch() {
               }`,
               label: (
                 <Link to={`/manage/phonebook?phonebookentry=${pb.id}`}>
-                  <Space wrap split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
                     <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${
                       pb.company || ""
                     }`}</span>
@@ -166,10 +166,10 @@ export default function GlobalSearch() {
 
   return (
     <AutoComplete
-      dropdownMatchSelectWidth={"false"}
       options={options}
       onSearch={handleSearch}
       allowClear
+      placeholder={t("general.labels.globalsearch")}
     >
       <Input.Search loading={loading} />
     </AutoComplete>

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

@@ -3,10 +3,12 @@ import Icon, {
   BarChartOutlined,
   CarFilled,
   ClockCircleFilled,
+  DashboardFilled,
   DollarCircleFilled,
   ExportOutlined,
   FieldTimeOutlined,
   FileAddFilled,
+  FileAddOutlined,
   FileFilled,
   GlobalOutlined,
   HomeFilled,
@@ -45,7 +47,6 @@ import {
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
-import GlobalSearch from "../global-search/global-search.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -79,12 +80,11 @@ function Header({
   const { t } = useTranslation();
 
   return (
-    <Layout.Header style={{ display: "flex", alignItems: "center" }}>
+    <Layout.Header>
       <Menu
         mode="horizontal"
         //theme="light"
         theme={"dark"}
-        style={{ flex: 1 }}
         selectedKeys={[selectedHeader]}
         onClick={handleMenuClick}
         subMenuCloseDelay={0.3}
@@ -96,6 +96,7 @@ function Header({
           <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
         </Menu.Item>
         <Menu.SubMenu
+          key="jobssubmenu"
           icon={<Icon component={FaCarCrash} />}
           title={t("menus.header.jobs")}
         >
@@ -110,12 +111,14 @@ function Header({
               {t("menus.header.availablejobs")}
             </Link>
           </Menu.Item>
-          <Menu.Divider />
+          <Menu.Item key="newjob" icon={<FileAddOutlined />}>
+            <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
+          </Menu.Item>
+          <Menu.Divider key="div1" />
           <Menu.Item key="alljobs" icon={<UnorderedListOutlined />}>
             <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
           </Menu.Item>
-          <Menu.Divider />
-
+          <Menu.Divider key="div2" />
           <Menu.Item key="productionlist" icon={<ScheduleOutlined />}>
             <Link to="/manage/production/list">
               {t("menus.header.productionlist")}
@@ -126,13 +129,13 @@ function Header({
               {t("menus.header.productionboard")}
             </Link>
           </Menu.Item>
-          <Menu.Divider />
-
+          <Menu.Divider key="div3" />
           <Menu.Item key="scoreboard" icon={<LineChartOutlined />}>
             <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
+          key="customers"
           icon={<UserOutlined />}
           title={t("menus.header.customers")}
         >
@@ -144,6 +147,7 @@ function Header({
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
+          key="ccs"
           icon={<CarFilled />}
           title={t("menus.header.courtesycars")}
         >
@@ -164,6 +168,7 @@ function Header({
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
+          key="accounting"
           icon={<DollarCircleFilled />}
           title={t("menus.header.accounting")}
         >
@@ -185,7 +190,7 @@ function Header({
           >
             {t("menus.header.enterbills")}
           </Menu.Item>
-          <Menu.Divider />
+          <Menu.Divider key="div4" />
           <Menu.Item key="allpayments" icon={<BankFilled />}>
             <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
           </Menu.Item>
@@ -197,11 +202,11 @@ function Header({
                 context: null,
               });
             }}
+            icon={<Icon component={FaCreditCard} />}
           >
-            <Icon component={FaCreditCard} />
             {t("menus.header.enterpayment")}
           </Menu.Item>
-          <Menu.Divider />
+          <Menu.Divider key="div5" />
 
           <Menu.Item key="timetickets" icon={<FieldTimeOutlined />}>
             <Link to="/manage/timetickets">
@@ -220,9 +225,10 @@ function Header({
           >
             {t("menus.header.entertimeticket")}
           </Menu.Item>
-          <Menu.Divider />
+          <Menu.Divider key="div6" />
 
           <Menu.SubMenu
+            key="accountingexport"
             title={t("menus.header.export")}
             icon={<ExportOutlined />}
           >
@@ -256,18 +262,17 @@ function Header({
             {t("menus.header.temporarydocs")}
           </Link>
         </Menu.Item>
-        <Menu.Item
-          key="help"
-          onClick={() => {
-            window.open("https://help.imex.online/", "_blank");
-          }}
-          icon={<Icon component={QuestionCircleFilled} />}
-        />
-        <Menu.SubMenu title={t("menus.header.shop")} icon={<SettingOutlined />}>
+        <Menu.SubMenu
+          key="shopsubmenu"
+          title={t("menus.header.shop")}
+          icon={<SettingOutlined />}
+        >
           <Menu.Item key="shop" icon={<Icon component={GiSettingsKnobs} />}>
             <Link to="/manage/shop">{t("menus.header.shop_config")}</Link>
           </Menu.Item>
-
+          <Menu.Item key="dashboard" icon={<DashboardFilled />}>
+            <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
+          </Menu.Item>
           <Menu.Item
             key="reportcenter"
             icon={<BarChartOutlined />}
@@ -293,17 +298,27 @@ function Header({
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
-          style={{ float: "right" }}
+          key="user"
           title={
             currentUser.displayName ||
             currentUser.email ||
             t("general.labels.unknown")
           }
         >
-          <Menu.Item danger onClick={() => signOutStart()}>
+          <Menu.Item key="signout" danger onClick={() => signOutStart()}>
             {t("user.actions.signout")}
           </Menu.Item>
           <Menu.Item
+            key="help"
+            onClick={() => {
+              window.open("https://help.imex.online/", "_blank");
+            }}
+            icon={<Icon component={QuestionCircleFilled} />}
+          >
+            {t("menus.header.help")}
+          </Menu.Item>
+          <Menu.Item
+            key="rescue"
             onClick={() => {
               window.open("https://imexrescue.com/", "_blank");
             }}
@@ -317,6 +332,7 @@ function Header({
             <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
           </Menu.Item>
           <Menu.SubMenu
+            key="langselecter"
             title={
               <span>
                 <GlobalOutlined />
@@ -335,7 +351,7 @@ function Header({
             </Menu.Item>
           </Menu.SubMenu>
         </Menu.SubMenu>
-        <Menu.SubMenu style={{ float: "right" }} title={<ClockCircleFilled />}>
+        <Menu.SubMenu key="recent" title={<ClockCircleFilled />}>
           {recentItems.map((i, idx) => (
             <Menu.Item key={idx}>
               <Link to={i.url}>{i.label}</Link>
@@ -343,9 +359,6 @@ function Header({
           ))}
         </Menu.SubMenu>
       </Menu>
-      <div>
-        <GlobalSearch />
-      </div>
     </Layout.Header>
   );
 }

client/src/components/jira-support-widget/jira-support-widget.component.jsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-export default function JiraSupportComponent() {
-  //useScript();
-
-  return <div></div>;
-}
-
-// const useScript = () => {
-//   useEffect(() => {
-//     const script = document.createElement("script");
-//     script.src = "https://jsd-widget.atlassian.com/assets/embed.js";
-//     script.setAttribute("data-jsd-embedded", true);
-//     script.setAttribute("data-key", "d69bb65c-1dd3-483f-b109-66a970d03f44");
-//     script.setAttribute("data-base-url", "https://jsd-widget.atlassian.com");
-//     //script.async = true;
-//     script.onload = () => {
-//       var DOMContentLoaded_event = document.createEvent("Event");
-//       DOMContentLoaded_event.initEvent("DOMContentLoaded", true, true);
-//       window.document.dispatchEvent(DOMContentLoaded_event);
-//     };
-//     document.head.appendChild(script);
-
-//     return () => {
-//       document.head.removeChild(script);
-//     };
-//   }, []);
-// };

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

@@ -87,9 +87,7 @@ export function Jobd3RdPartyModal({ bodyshop, jobId }) {
 
   return (
     <>
-      <Button type="primary" onClick={showModal}>
-        {t("printcenter.jobs.3rdpartypayer")}
-      </Button>
+      <Button onClick={showModal}>{t("printcenter.jobs.3rdpartypayer")}</Button>
       <Modal visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
         <Form
           onFinish={handleFinish}

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

@@ -2,7 +2,7 @@ import { Button, Popover, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
@@ -11,6 +11,8 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import DataLabel from "../data-label/data-label.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
+import queryString from "query-string";
+
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "schedule" })),
@@ -24,6 +26,8 @@ export function ScheduleEventComponent({
 }) {
   const { t } = useTranslation();
   const [visible, setVisible] = useState(false);
+  const history = useHistory();
+  const searchParams = queryString.parse(useLocation().search);
 
   const blockContent = (
     <div>
@@ -88,6 +92,20 @@ export function ScheduleEventComponent({
             <Button>{t("appointments.actions.viewjob")}</Button>
           </Link>
         ) : null}
+        {event.job ? (
+          <Button
+            onClick={() => {
+              history.push({
+                search: queryString.stringify({
+                  ...searchParams,
+                  selected: event.job.id,
+                }),
+              });
+            }}
+          >
+            {t("appointments.actions.preview")}
+          </Button>
+        ) : null}
         <Button
           onClick={() => {
             const Template = TemplateList("job").appointment_reminder;
@@ -97,7 +115,8 @@ export function ScheduleEventComponent({
                 variables: { id: event.job.id },
               },
               { to: event.job && event.job.ownr_ea, subject: Template.subject },
-              "e"
+              "e",
+              event.job && event.job.id
             );
           }}
           disabled={event.arrived}

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

@@ -82,6 +82,7 @@ export function JobChecklistForm({
 
           ...(type === "deliver" && {
             scheduled_delivery: values.scheduled_delivery,
+            actual_delivery: values.actual_delivery,
           }),
           ...(type === "deliver" &&
             values.removeFromProduction && {
@@ -147,6 +148,7 @@ export function JobChecklistForm({
           ...(type === "deliver" && {
             removeFromProduction: true,
             actual_completion: job && job.actual_completion,
+            actual_delivery: job && job.actual_delivery,
           }),
           ...formItems
             .filter((fi) => fi.value)
@@ -179,21 +181,21 @@ export function JobChecklistForm({
                 },
               ]}
             >
-              <DateTimePicker />
+              <DateTimePicker disabled={readOnly} />
             </Form.Item>
             <Form.Item
               name="scheduled_delivery"
               label={t("jobs.fields.scheduled_delivery")}
               disabled={readOnly}
             >
-              <DateTimePicker />
+              <DateTimePicker disabled={readOnly} />
             </Form.Item>
             <Form.Item
               name={["production_vars", "note"]}
               label={t("jobs.fields.production_vars.note")}
               disabled={readOnly}
             >
-              <Input.TextArea rows={3} />
+              <Input.TextArea rows={3} disabled={readOnly} />
             </Form.Item>
           </div>
         )}
@@ -210,7 +212,14 @@ export function JobChecklistForm({
                 },
               ]}
             >
-              <DateTimePicker />
+              <DateTimePicker disabled={readOnly} />
+            </Form.Item>
+            <Form.Item
+              name="actual_delivery"
+              label={t("jobs.fields.actual_delivery")}
+              disabled={readOnly}
+            >
+              <DateTimePicker disabled={readOnly} />
             </Form.Item>
             <Form.Item
               name="removeFromProduction"

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

@@ -2,7 +2,6 @@ import React from "react";
 import ConfigFormComponents from "../config-form-components/config-form-components.component";
 
 export default function JobChecklistDisplay({ checklist }) {
-  console.log("JobChecklistDisplay -> checklist", checklist);
   if (!checklist) return <div></div>;
   return (
     <div>

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

@@ -3,6 +3,7 @@ import {
   FilterFilled,
   SyncOutlined,
   WarningFilled,
+  EditFilled,
 } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import {
@@ -15,6 +16,7 @@ import {
   Table,
   Tag,
 } from "antd";
+import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -286,27 +288,31 @@ export function JobLinesComponent({
                   });
                 }}
               >
-                {t("general.actions.edit")}
+                <EditFilled />
               </Button>
               <Button
                 disabled={jobRO}
-                onClick={() =>
-                  deleteJobLine({
+                onClick={async () => {
+                  await deleteJobLine({
                     variables: { joblineId: record.id },
-                    update(cache) {
-                      cache.modify({
-                        id: cache.identify(job),
-                        fields: {
-                          joblines(existingJobLines, { readField }) {
-                            return existingJobLines.filter(
-                              (jlRef) => record.id !== readField("id", jlRef)
-                            );
-                          },
-                        },
-                      });
-                    },
-                  })
-                }
+                    // update(cache) {
+                    //   cache.modify({
+                    //     id: cache.identify(job),
+                    //     fields: {
+                    //       joblines(existingJobLines, { readField }) {
+                    //         return existingJobLines.filter(
+                    //           (jlRef) => record.id !== readField("id", jlRef)
+                    //         );
+                    //       },
+                    //     },
+                    //   });
+                    // },
+                  });
+                  await axios.post("/job/totalsssu", {
+                    id: job.id,
+                  });
+                  refetch && refetch();
+                }}
               >
                 <DeleteFilled />
               </Button>
@@ -394,7 +400,7 @@ export function JobLinesComponent({
                 setState({
                   ...state,
                   filteredInfo: {
-                    part_type: ["PAN,PAL,PAA,PAP,PAS,PASL"],
+                    part_type: ["PAN,PAC,PAR,PAL,PAA,PAM,PAP,PAS,PASL"],
                   },
                 });
               }}

client/src/components/job-lines-preset-button/job-lines-preset-button.component.jsx

@@ -0,0 +1,52 @@
+import { DownOutlined } from "@ant-design/icons";
+import { Dropdown, Menu } from "antd";
+import React 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 function JoblinePresetButton({ bodyshop, form }) {
+  const { t } = useTranslation();
+
+  const handleSelect = (item) => {
+    form.setFieldsValue(item);
+  };
+
+  const menu = (
+    <Menu>
+      {bodyshop.md_jobline_presets.map((i, idx) => (
+        <Menu.Item onClick={() => handleSelect(i)} onItemHover key={idx}>
+          {i.label}
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
+
+  return (
+    <div>
+      <Dropdown trigger={["click"]} overlay={menu}>
+        <a
+          className="ant-dropdown-link"
+          href="# "
+          onClick={(e) => e.preventDefault()}
+        >
+          {t("joblines.labels.presets")} <DownOutlined />
+        </a>
+      </Dropdown>
+    </div>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JoblinePresetButton);

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx

@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import InputCurrency from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-
+import JoblinesPreset from "../job-lines-preset-button/job-lines-preset-button.component";
 export default function JobLinesUpsertModalComponent({
   visible,
   jobLine,
@@ -32,6 +32,7 @@ export default function JobLinesUpsertModalComponent({
       onOk={() => form.submit()}
       okButtonProps={{ loading: loading }}
       onCancel={handleCancel}
+      e
     >
       <Form
         onFinish={handleFinish}
@@ -41,6 +42,9 @@ export default function JobLinesUpsertModalComponent({
         form={form}
       >
         <LayoutFormRow grow>
+          <Form.Item label={t("joblines.fields.line_no")} name="line_no">
+            <InputNumber />
+          </Form.Item>
           <Form.Item
             label={t("joblines.fields.line_desc")}
             rules={[
@@ -53,6 +57,7 @@ export default function JobLinesUpsertModalComponent({
           >
             <Input />
           </Form.Item>
+          <JoblinesPreset form={form} />
         </LayoutFormRow>
         <LayoutFormRow grow>
           <Form.Item label={t("joblines.fields.mod_lbr_ty")} name="mod_lbr_ty">

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -12,7 +12,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectJobLineEditModal } from "../../redux/modals/modals.selectors";
 import UndefinedToNull from "../../utils/undefinedtonull";
 import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
-
+import Axios from "axios";
 const mapStateToProps = createStructuredSelector({
   jobLineEditModal: selectJobLineEditModal,
 });
@@ -29,10 +29,10 @@ function JobLinesUpsertModalContainer({
   const [updateJobLine] = useMutation(UPDATE_JOB_LINE);
   const [loading, setLoading] = useState(false);
 
-  const handleFinish = (values) => {
+  const handleFinish = async (values) => {
     setLoading(true);
     if (!jobLineEditModal.context.id) {
-      insertJobLine({
+      const r = await insertJobLine({
         variables: {
           lineInput: [
             {
@@ -44,42 +44,44 @@ function JobLinesUpsertModalContainer({
             },
           ],
         },
-      })
-        .then((r) => {
-          if (jobLineEditModal.actions.refetch)
-            jobLineEditModal.actions.refetch();
-          //Need to recalcuate totals.
-          toggleModalVisible();
-          notification["success"]({
-            message: t("joblines.successes.created"),
-          });
-        })
-        .catch((error) => {
-          notification["error"]({
-            message: t("joblines.errors.creating", {
-              message: error.message,
-            }),
-          });
+      });
+      if (!r.errors) {
+        await Axios.post("/job/totalsssu", {
+          id: jobLineEditModal.context.jobid,
         });
+        if (jobLineEditModal.actions.refetch)
+          jobLineEditModal.actions.refetch();
+        //Need to recalcuate totals.
+        toggleModalVisible();
+        notification["success"]({
+          message: t("joblines.successes.created"),
+        });
+      } else {
+        notification["error"]({
+          message: t("joblines.errors.creating", {
+            message: JSON.stringify(r.errors.message),
+          }),
+        });
+      }
     } else {
-      updateJobLine({
+      const r = await updateJobLine({
         variables: {
           lineId: jobLineEditModal.context.id,
           line: values,
         },
-      })
-        .then((r) => {
-          notification["success"]({
-            message: t("joblines.successes.updated"),
-          });
-        })
-        .catch((error) => {
-          notification["success"]({
-            message: t("joblines.errors.updating", {
-              message: error.message,
-            }),
-          });
+      });
+      if (!r.errors) {
+        notification["success"]({
+          message: t("joblines.successes.updated"),
         });
+      } else {
+        notification["success"]({
+          message: t("joblines.errors.updating", {
+            message: JSON.stringify(r.errors.message),
+          }),
+        });
+      }
+
       if (jobLineEditModal.actions.submit) {
         jobLineEditModal.actions.submit();
       } else {

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

@@ -1,4 +1,5 @@
 import { Button, Card, Space, Table } from "antd";
+import { EditFilled } from "@ant-design/icons";
 import Dinero from "dinero.js";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -115,15 +116,29 @@ export function JobPayments({
       dataIndex: "actions",
       key: "actions",
       render: (text, record) => (
-        <PrintWrapperComponent
-          templateObject={{
-            name: TemplateList("payment").payment_receipt.key,
-            variables: { id: record.id },
-          }}
-          messageObject={{
-            to: job.ownr_ea,
-          }}
-        />
+        <Space wrap>
+          <Button
+            disabled={record.exportedat}
+            onClick={() => {
+              setPaymentContext({
+                actions: { refetch: refetch },
+                context: record,
+              });
+            }}
+          >
+            <EditFilled />
+          </Button>
+          <PrintWrapperComponent
+            templateObject={{
+              name: TemplateList("payment").payment_receipt.key,
+              variables: { id: record.id },
+            }}
+            messageObject={{
+              to: job.ownr_ea,
+            }}
+            id={job.id}
+          />
+        </Space>
       ),
     },
   ];
@@ -154,7 +169,7 @@ export function JobPayments({
       extra={
         <Space wrap>
           <Button
-            disabled={jobRO}
+            disabled={!job.converted}
             onClick={() =>
               setPaymentContext({
                 actions: { refetch: refetch },

client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx

@@ -1,4 +1,4 @@
-import { Checkbox, PageHeader, Table } from "antd";
+import { Checkbox, Table, Typography } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -21,6 +21,7 @@ export default function JobReconciliationBillsTable({
       title: t("billlines.fields.line_desc"),
       dataIndex: "line_desc",
       key: "line_desc",
+      width: "35%",
       sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
       sortOrder:
         state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
@@ -29,6 +30,8 @@ export default function JobReconciliationBillsTable({
       title: t("billlines.labels.from"),
       dataIndex: "from",
       key: "from",
+      width: "20%",
+      ellipsis: true,
       render: (text, record) =>
         `${record.bill.vendor && record.bill.vendor.name} / ${
           record.bill.invoice_number
@@ -57,7 +60,7 @@ export default function JobReconciliationBillsTable({
       ),
     },
     {
-      title: t("billlines.fields.quantity"),
+      title: t("joblines.fields.part_qty"),
       dataIndex: "quantity",
       key: "quantity",
       sorter: (a, b) => a.quantity - b.quantity,
@@ -86,10 +89,12 @@ export default function JobReconciliationBillsTable({
   };
 
   return (
-    <PageHeader title={t("bills.labels.bills")}>
+    <div>
+      <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
       <Table
         pagination={false}
-        scroll={{ y: "40vh", x: true }}
+        size="small"
+        scroll={{ y: "80vh", x: true }}
         columns={columns}
         rowKey="id"
         dataSource={invoiceLineData}
@@ -99,6 +104,6 @@ export default function JobReconciliationBillsTable({
           selectedRowKeys: selectedLines,
         }}
       />
-    </PageHeader>
+    </div>
   );
 }

client/src/components/job-reconciliation-modal/job-reconciliation-modal.component.jsx

@@ -22,21 +22,23 @@ export default function JobReconciliationModalComponent({ job, bills }) {
   );
 
   return (
-    <div>
-      <Row gutter={[16, 16]}>
-        <Col span={12}>
-          <JobReconciliationPartsTable
-            jobLineData={jobLineData}
-            jobLineState={jobLineState}
-          />
-        </Col>
-        <Col span={12}>
-          <JobReconciliationBillsTable
-            invoiceLineData={invoiceLineData}
-            billLineState={billLineState}
-          />
-        </Col>
-      </Row>
+    <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
+      <div style={{ flex: 1 }}>
+        <Row gutter={8}>
+          <Col span={12}>
+            <JobReconciliationPartsTable
+              jobLineData={jobLineData}
+              jobLineState={jobLineState}
+            />
+          </Col>
+          <Col span={12}>
+            <JobReconciliationBillsTable
+              invoiceLineData={invoiceLineData}
+              billLineState={billLineState}
+            />
+          </Col>
+        </Row>
+      </div>
       <Row>
         <JobReconciliationTotals
           jobLines={jobLineData}

client/src/components/job-reconciliation-modal/job-reconciliation-modal.styles.scss

@@ -0,0 +1,12 @@
+.imex-reconciliation-modal {
+  top: 20px;
+  .ant-modal-content {
+    height: 95vh;
+    display: flex;
+    flex-direction: column;
+    .ant-modal-body {
+      display: flex;
+      flex: 1;
+    }
+  }
+}

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

@@ -10,6 +10,7 @@ import { selectReconciliation } from "../../redux/modals/modals.selectors";
 import JobReconciliationModalComponent from "./job-reconciliation-modal.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import AlertComponent from "../alert/alert.component";
+import "./job-reconciliation-modal.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   reconciliationModal: selectReconciliation,
@@ -38,23 +39,23 @@ function JobReconciliationModalContainer({
   return (
     <Modal
       title={t("jobs.labels.reconciliationheader")}
-      width={"90%"}
+      width={"95%"}
       visible={visible}
       okText={t("general.actions.close")}
       onOk={handleCancel}
       onCancel={handleCancel}
       cancelButtonProps={{ display: "none" }}
       destroyOnClose
+      className="imex-reconciliation-modal"
     >
-      <LoadingSpinner loading={loading}>
-        {error && <AlertComponent message={error.message} type="error" />}
-        {data && (
-          <JobReconciliationModalComponent
-            job={data && data.jobs_by_pk}
-            bills={data && data.bills}
-          />
-        )}
-      </LoadingSpinner>
+      {loading && <LoadingSpinner loading={loading} />}
+      {error && <AlertComponent message={error.message} type="error" />}
+      {data && (
+        <JobReconciliationModalComponent
+          job={data && data.jobs_by_pk}
+          bills={data && data.bills}
+        />
+      )}
     </Modal>
   );
 }

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

@@ -1,4 +1,4 @@
-import { PageHeader, Table } from "antd";
+import { Table, Typography } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -102,11 +102,13 @@ export default function JobReconcilitionPartsTable({
   };
 
   return (
-    <PageHeader title={t("jobs.labels.lines")}>
+    <div>
+      <Typography.Title level={4}>{t("jobs.labels.lines")}</Typography.Title>
       <Table
         pagination={false}
         columns={columns}
-        scroll={{ y: "40vh", x: true }}
+        size="small"
+        scroll={{ y: "80vh", x: true }}
         rowKey="id"
         dataSource={jobLineData}
         onChange={handleTableChange}
@@ -122,6 +124,6 @@ export default function JobReconcilitionPartsTable({
       <div style={{ fontStyle: "italic", margin: "4px" }}>
         {t("jobs.labels.reconciliation.removedpartsstrikethrough")}
       </div>
-    </PageHeader>
+    </div>
   );
 }

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

@@ -1,6 +1,6 @@
 import { LoadingOutlined } from "@ant-design/icons";
 import { useLazyQuery } from "@apollo/client";
-import { Empty, Select } from "antd";
+import { Empty, Select, Space, Tag } from "antd";
 import _ from "lodash";
 import React, { forwardRef, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -80,13 +80,20 @@ const JobSearchSelect = (
         {theOptions
           ? theOptions.map((o) => (
               <Option key={o.id} value={o.id} status={o.status}>
-                {`${clm_no ? `${o.clm_no} | ` : ""}${
-                  o.ro_number || t("general.labels.na")
-                } | ${o.ownr_ln || ""} ${o.ownr_fn || ""} ${
-                  o.ownr_co_nm ? ` ${o.ownr_co_num}` : ""
-                }| ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
-                  o.v_model_desc || ""
-                }`}
+                <Space align="center">
+                  <span>
+                    {`${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${
+                      o.ro_number || t("general.labels.na")
+                    } | ${o.ownr_ln || ""} ${o.ownr_fn || ""} ${
+                      o.ownr_co_nm ? ` ${o.ownr_co_num}` : ""
+                    }| ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
+                      o.v_model_desc || ""
+                    }`}
+                  </span>
+                  <Tag>
+                    <strong>{o.status}</strong>
+                  </Tag>
+                </Space>
               </Option>
             ))
           : null}

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

@@ -0,0 +1,57 @@
+import { DownCircleFilled } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
+import { Button, Dropdown, Menu, notification } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(JobsAdminStatus);
+
+export function JobsAdminStatus({ bodyshop, job }) {
+  const { t } = useTranslation();
+
+  const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
+  const updateJobStatus = (status) => {
+    mutationUpdateJobstatus({
+      variables: { jobId: job.id, status: status },
+    })
+      .then((r) => {
+        notification["success"]({ message: t("jobs.successes.save") });
+        // refetch();
+      })
+      .catch((error) => {
+        notification["error"]({ message: t("jobs.errors.saving") });
+      });
+  };
+
+  const statusmenu = (
+    <Menu
+      onClick={(e) => {
+        updateJobStatus(e.key);
+      }}
+    >
+      {bodyshop.md_ro_statuses.statuses.map((item) => (
+        <Menu.Item key={item}>{item}</Menu.Item>
+      ))}
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
+      <Button shape="round">
+        <span>{job.status}</span>
+
+        <DownCircleFilled />
+      </Button>
+    </Dropdown>
+  );
+}

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

@@ -11,6 +11,7 @@ export const GetSupplementDelta = async (client, jobId, newLines) => {
     query: GET_ALL_JOBLINES_BY_PK,
     variables: { id: jobId },
   });
+
   const existingLines = _.cloneDeep(existingLinesFromDb);
   const linesToInsert = [];
   const linesToUpdate = [];
@@ -19,11 +20,14 @@ export const GetSupplementDelta = async (client, jobId, newLines) => {
     const matchingIndex = existingLines.findIndex(
       (eL) => eL.unq_seq === newLine.unq_seq
     );
+
+    //Should do a check to make sure there is only 1 matching unq sequence number.
+
     if (matchingIndex >= 0) {
       //Found a relevant matching line. Add it to lines to update.
       linesToUpdate.push({
         id: existingLines[matchingIndex].id,
-        newData: newLine,
+        newData: { ...newLine, removed: false },
       });
 
       //Splice out item we found for performance.

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

@@ -1,4 +1,4 @@
-import { Collapse, Form, Input, Select, Switch } from "antd";
+import { Collapse, Form, Input, InputNumber, Select, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -11,7 +11,8 @@ import FormItemPhone, {
   PhoneItemFormatterValidation,
 } from "../form-items-formatted/phone-form-item.component";
 import JobsDetailRatesChangeButton from "../jobs-detail-rates-change-button/jobs-detail-rates-change-button.component";
-import { JobsDetailRatesParts } from "../jobs-detail-rates/jobs-detail-rates.parts.component";
+import JobsDetailRatesParts from "../jobs-detail-rates/jobs-detail-rates.parts.component";
+import JobsMarkPstExempt from "../jobs-mark-pst-exempt/jobs-mark-pst-exempt.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -187,7 +188,7 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
           header={t("menus.jobsdetail.financials")}
         >
           <JobsDetailRatesChangeButton form={form} />
-
+          <JobsMarkPstExempt form={form} />
           <LayoutFormRow>
             <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
               <CurrencyInput />
@@ -240,6 +241,26 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
               <CurrencyInput />
             </Form.Item>
           </LayoutFormRow>
+          <LayoutFormRow>
+            <Form.Item
+              label={t("jobs.fields.federal_tax_rate")}
+              name="federal_tax_rate"
+            >
+              <InputNumber min={0} max={1} precision={2} />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.state_tax_rate")}
+              name="state_tax_rate"
+            >
+              <InputNumber min={0} max={1} precision={2} />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.local_tax_rate")}
+              name="local_tax_rate"
+            >
+              <InputNumber min={0} max={1} precision={2} />
+            </Form.Item>
+          </LayoutFormRow>
           <LayoutFormRow>
             <Form.Item label={t("jobs.fields.rate_lab")} name="rate_lab">
               <CurrencyInput />

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx

@@ -1,14 +1,14 @@
+import { useQuery } from "@apollo/client";
 import React, { useContext } from "react";
-import JobsCreateVehicleInfoComponent from "./jobs-create-vehicle-info.component";
+import { SEARCH_VEHICLES } from "../../graphql/vehicles.queries";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import AlertComponent from "../alert/alert.component";
-import { SEARCH_VEHICLE_BY_VIN } from "../../graphql/vehicles.queries";
-import { useQuery } from "@apollo/client";
+import JobsCreateVehicleInfoComponent from "./jobs-create-vehicle-info.component";
 
 export default function JobsCreateVehicleInfoContainer({ form }) {
   const [state] = useContext(JobCreateContext);
-  const { loading, error, data } = useQuery(SEARCH_VEHICLE_BY_VIN, {
-    variables: { vin: `%${state.vehicle.search}%` },
+  const { loading, error, data } = useQuery(SEARCH_VEHICLES, {
+    variables: { search: `%${state.vehicle.search}%` },
     skip: !state.vehicle.search,
   });
 
@@ -17,7 +17,7 @@ export default function JobsCreateVehicleInfoContainer({ form }) {
   return (
     <JobsCreateVehicleInfoComponent
       loading={loading}
-      vehicles={data ? data.vehicles : null}
+      vehicles={data ? data.search_vehicles : null}
     />
   );
 }

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

@@ -17,6 +17,7 @@ import {
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import JobsDetaiLheaderCsi from "./jobs-detail-header-actions.csi.component";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
+import JobsDetailHeaderActionsExportcustdataComponent from "./jobs-detail-header-actions.exportcustdata.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -155,7 +156,7 @@ export function JobsDetailHeaderActions({
       </Menu.Item>
       <Menu.Item
         key="enterpayments"
-        disabled={jobRO || !job.converted}
+        disabled={!job.converted}
         onClick={() => {
           logImEXEvent("job_header_enter_payment");
 
@@ -180,7 +181,7 @@ export function JobsDetailHeaderActions({
       {job.inproduction ? (
         <Menu.Item
           key="addtoproduction"
-          disabled={!!!job.converted || jobRO}
+          disabled={!job.converted}
           onClick={() => AddToProduction(client, job.id, refetch, true)}
         >
           {t("jobs.actions.removefromproduction")}
@@ -188,7 +189,7 @@ export function JobsDetailHeaderActions({
       ) : (
         <Menu.Item
           key="addtoproduction"
-          disabled={!!!job.converted || !!job.inproduction || jobRO}
+          disabled={!job.converted}
           onClick={() => AddToProduction(client, job.id, refetch)}
         >
           {t("jobs.actions.addtoproduction")}
@@ -200,7 +201,7 @@ export function JobsDetailHeaderActions({
           ? t("production.labels.alertoff")
           : t("production.labels.alerton")}
       </Menu.Item>
-      <Menu.SubMenu title={t("menus.jobsactions.duplicate")}>
+      <Menu.SubMenu key="dupe" title={t("menus.jobsactions.duplicate")}>
         <Menu.Item>
           <Popconfirm
             title={t("jobs.labels.duplicateconfirm")}
@@ -316,6 +317,7 @@ export function JobsDetailHeaderActions({
           {t("menus.jobsactions.admin")}
         </Link>
       </Menu.Item>
+      <JobsDetailHeaderActionsExportcustdataComponent job={job} />
       <JobsDetaiLheaderCsi job={job} />
       <Menu.Item
         key="jobcosting"

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

@@ -19,6 +19,7 @@ import {
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser'
@@ -97,6 +98,7 @@ export function JobsDetailHeaderCsi({
         }
         if (e.key === "email")
           setEmailOptions({
+            jobid: job.id,
             messageOptions: {
               to: [job.ownr_ea],
               replyTo: bodyshop.email,
@@ -139,6 +141,7 @@ export function JobsDetailHeaderCsi({
     } else {
       if (e.key === "email")
         setEmailOptions({
+          jobid: job.id,
           messageOptions: {
             to: [job.ownr_ea],
             replyTo: bodyshop.email,
@@ -177,8 +180,11 @@ export function JobsDetailHeaderCsi({
     }
   };
 
+  if (!HasFeatureAccess({ featureName: "csi", bodyshop })) return <></>;
+
   return (
     <Menu.SubMenu
+      key="sendcsi"
       title={t("jobs.actions.sendcsi")}
       disabled={!job.converted}
       {...props}

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

@@ -0,0 +1,107 @@
+import { Menu, notification } from "antd";
+import axios from "axios";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { auth, logImEXEvent } from "../../firebase/firebase.utils";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({});
+
+export function JobsDetailHeaderActionexportCustomerData({
+  bodyshop,
+  job,
+  ...props
+}) {
+  const { t } = useTranslation();
+
+  const handleExportCustData = async (e) => {
+    logImEXEvent("job_export_cust_data");
+    let QbXmlResponse;
+    try {
+      QbXmlResponse = await axios.post(
+        "/accounting/qbxml/receivables",
+        { jobIds: [job.id], custDataOnly: true },
+        {
+          headers: {
+            Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
+          },
+        }
+      );
+      console.log("handle -> XML", QbXmlResponse);
+    } catch (error) {
+      console.log("Error getting QBXML from Server.", error);
+      notification["error"]({
+        message: t("jobs.errors.exporting", {
+          error: "Unable to retrieve QBXML. " + JSON.stringify(error.message),
+        }),
+      });
+
+      return;
+    }
+
+    let PartnerResponse;
+    try {
+      PartnerResponse = await axios.post(
+        "http://localhost:1337/qb/",
+        QbXmlResponse.data,
+        {
+          headers: {
+            Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
+          },
+        }
+      );
+    } catch (error) {
+      console.log("Error connecting to quickbooks or partner.", error);
+      notification["error"]({
+        message: t("jobs.errors.exporting-partner"),
+      });
+
+      return;
+    }
+    //Check to see if any of them failed. If they didn't don't execute the update.
+    const failedTransactions = PartnerResponse.data.filter((r) => !r.success);
+    if (failedTransactions.length > 0) {
+      //Uh oh. At least one was no good.
+      failedTransactions.forEach((ft) => {
+        //insert failed export log
+        notification.open({
+          // key: "failedexports",
+          type: "error",
+          message: t("jobs.errors.exporting", {
+            error: ft.errorMessage || "",
+          }),
+        });
+      });
+
+      //Handle Failures.
+    } else {
+      //Insert success export log.
+
+      notification.open({
+        type: "success",
+        key: "jobsuccessexport",
+        message: t("jobs.successes.exported"),
+      });
+    }
+  };
+
+  return (
+    <Menu.Item
+      {...props}
+      onClick={handleExportCustData}
+      key="exportcustdata"
+      disabled={!job.converted}
+    >
+      {t("jobs.actions.exportcustdata")}
+    </Menu.Item>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobsDetailHeaderActionexportCustomerData);

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

@@ -1,4 +1,13 @@
-import { Form, Input, InputNumber, Select, Space, Switch, Tooltip } from "antd";
+import {
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  Space,
+  Switch,
+  Tooltip,
+} from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -7,6 +16,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import CABCpvrtCalculator from "../ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobsDetailRatesChangeButton from "../jobs-detail-rates-change-button/jobs-detail-rates-change-button.component";
+import JobsMarkPstExempt from "../jobs-mark-pst-exempt/jobs-mark-pst-exempt.component";
 import FormRow from "../layout-form-row/layout-form-row.component";
 import JobsDetailRatesParts from "./jobs-detail-rates.parts.component";
 
@@ -103,8 +113,19 @@ export function JobsDetailRates({ jobRO, form, job }) {
           <Switch disabled={jobRO} />
         </Form.Item>
       </FormRow>
-      <JobsDetailRatesChangeButton form={form} disabled={jobRO} />
-      <FormRow header={t("jobs.forms.laborrates")}>
+      <Divider
+        orientation="left"
+        type="horizontal"
+        style={{ marginTop: ".8rem", float: "right" }}
+      >
+        {t("jobs.forms.laborrates")}
+      </Divider>
+      <Space>
+        <div></div>
+        <JobsDetailRatesChangeButton form={form} disabled={jobRO} />
+        <JobsMarkPstExempt form={form} />
+      </Space>
+      <FormRow noDivider>
         <Form.Item
           label={t("jobs.fields.labor_rate_desc")}
           name="labor_rate_desc"
@@ -180,7 +201,6 @@ export function JobsDetailRates({ jobRO, form, job }) {
           <CurrencyInput disabled={jobRO} />
         </Form.Item>
       </FormRow>
-
       <JobsDetailRatesParts form={form} />
     </div>
   );

client/src/components/jobs-detail-rates/jobs-detail-rates.parts.component.jsx

@@ -19,7 +19,11 @@ export function JobsDetailRatesParts({
 
   return (
     <Collapse defaultActiveKey={expanded && "rates"}>
-      <Collapse.Panel header={t("jobs.labels.parts_tax_rates")} key="rates">
+      <Collapse.Panel
+        forceRender
+        header={t("jobs.labels.parts_tax_rates")}
+        key="rates"
+      >
         <LayoutFormRow header={t("joblines.fields.part_types.PAA")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}

client/src/components/jobs-documents-gallery/job-documents.utility.js

@@ -9,9 +9,18 @@ export const GenerateSrcUrl = (value) => {
   )}/upload/${value.key}${extension ? `.${extension}` : ""}`;
 };
 
-export const GenerateThumbUrl = (value) =>
-  `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+export const GenerateThumbUrl = (value) => {
+  let extension = value.extension;
+  if (extension && extension.toLowerCase().includes("heic")) extension = "jpg";
+  else if (
+    DetermineFileType(value.type) !== "image" ||
+    (value.type && value.type.includes("application"))
+  )
+    extension = "jpg";
+
+  return `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
     value.type
   )}/upload/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${
     value.key
-  }`;
+  }${extension ? `.${extension}` : ""}`;
+};

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

@@ -163,9 +163,9 @@ function JobsDocumentsComponent({
               currentImageWillChange={onCurrentImageChange}
               customControls={[
                 <Button
+                  key="edit-button"
                   style={{
                     float: "right",
-
                     zIndex: "5",
                   }}
                   onClick={() => {
@@ -177,7 +177,7 @@ function JobsDocumentsComponent({
                     if (newWindow) newWindow.opener = null;
                   }}
                 >
-                  <EditFilled style={{}} />
+                  <EditFilled />
                 </Button>,
               ]}
               onClickImage={(props) => {

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

@@ -5,9 +5,7 @@ import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { DELETE_DOCUMENT } from "../../graphql/documents.queries";
-import cleanAxios from "../../utils/CleanAxios";
-import { DetermineFileType } from "../documents-upload/documents-upload.utility";
+import { DELETE_DOCUMENTS } from "../../graphql/documents.queries";
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
 
 export default function JobsDocumentsDeleteButton({
@@ -15,73 +13,57 @@ export default function JobsDocumentsDeleteButton({
   deletionCallback,
 }) {
   const { t } = useTranslation();
-  const [deleteDocument] = useMutation(DELETE_DOCUMENT);
+  const [deleteDocument] = useMutation(DELETE_DOCUMENTS);
   const imagesToDelete = [
     ...galleryImages.images.filter((image) => image.isSelected),
     ...galleryImages.other.filter((image) => image.isSelected),
   ];
   const [loading, setLoading] = useState(false);
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
     logImEXEvent("job_documents_delete", { count: imagesToDelete.length });
     setLoading(true);
-    imagesToDelete.forEach((image) => {
-      let timestamp = Math.floor(Date.now() / 1000);
-      let public_id = image.key;
-
-      axios
-        .post("/media/sign", {
-          public_id: public_id,
-          timestamp: timestamp,
-        })
-        .then((response) => {
-          var signature = response.data;
-          var options = {
-            headers: { "X-Requested-With": "XMLHttpRequest" },
-          };
-          const formData = new FormData();
-          formData.append("api_key", process.env.REACT_APP_CLOUDINARY_API_KEY);
-          formData.append("public_id", public_id);
-          formData.append("timestamp", timestamp);
-          formData.append("signature", signature);
-
-          cleanAxios
-            .post(
-              `${
-                process.env.REACT_APP_CLOUDINARY_ENDPOINT_API
-              }/${DetermineFileType(image.type)}/destroy`,
-              formData,
-              options
-            )
-            .then((response) => {
-              deleteDocument({ variables: { id: image.id } })
-                .then((r) => {
-                  notification.open({
-                    key: "docdeletedsuccesfully",
-                    type: "success",
-                    message: t("documents.successes.delete"),
-                  });
-
-                  if (deletionCallback) deletionCallback();
-                })
-                .catch((error) => {
-                  notification["error"]({
-                    message: t("documents.errors.deleting", {
-                      message: JSON.stringify(error),
-                    }),
-                  });
-                });
-              //Delete it from our database.
-            })
-            .catch((error) => {
-              notification["error"]({
-                message: t("documents.errors.deleting_cloudinary", {
-                  message: JSON.stringify(error),
-                }),
-              });
-            });
-        });
+    const res = await axios.post("/media/delete", {
+      ids: imagesToDelete,
     });
+
+    const successfulDeletes = [];
+    res.data.forEach((resType) => {
+      Object.keys(resType.deleted).forEach((key) => {
+        if (resType.deleted[key] !== "deleted") {
+          notification["error"]({
+            message: t("documents.errors.deleting_cloudinary", {
+              message: JSON.stringify(resType.deleted[key]),
+            }),
+          });
+        } else {
+          successfulDeletes.push(key.replace(/\.[^/.]+$/, ""));
+        }
+      });
+    });
+    const delres = await deleteDocument({
+      variables: {
+        ids: imagesToDelete
+          .filter((i) => successfulDeletes.includes(i.key))
+          .map((i) => i.id),
+      },
+    });
+    if (delres.errors) {
+      notification["error"]({
+        message: t("documents.errors.deleting", {
+          message: JSON.stringify(delres.errors),
+        }),
+      });
+    } else {
+      notification.open({
+        key: "docdeletedsuccesfully",
+        type: "success",
+        message: t("documents.successes.delete"),
+      });
+
+      if (deletionCallback) deletionCallback();
+    }
+
     setLoading(false);
   };
 

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import Gallery from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
-import { DetermineFileType } from "../documents-upload/documents-upload.utility";
+import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";
 
 function JobsDocumentGalleryExternal({
   data,
@@ -15,14 +15,8 @@ function JobsDocumentGalleryExternal({
     let documents = data.reduce((acc, value) => {
       if (value.type.startsWith("image")) {
         acc.push({
-          src: `${
-            process.env.REACT_APP_CLOUDINARY_ENDPOINT
-          }/${DetermineFileType(value.type)}/upload/${value.key}`,
-          thumbnail: `${
-            process.env.REACT_APP_CLOUDINARY_ENDPOINT
-          }/${DetermineFileType(value.type)}/upload/${
-            process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS
-          }/${value.key}`,
+          src: GenerateSrcUrl(value),
+          thumbnail: GenerateThumbUrl(value),
           thumbnailHeight: 225,
           thumbnailWidth: 225,
           isSelected: false,

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

@@ -50,8 +50,8 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       width: "25%",
       //sortOrder: sortcolumn === "ownr_ln" && sortorder,
       render: (text, record) => {
-        return record.owner ? (
-          <Link to={"/manage/owners/" + record.owner.id}>
+        return record.ownerid ? (
+          <Link to={"/manage/owners/" + record.ownerid}>
             {`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
               record.ownr_co_nm || ""
             }`}

client/src/components/jobs-mark-pst-exempt/jobs-mark-pst-exempt.component.jsx

@@ -0,0 +1,55 @@
+import { Popconfirm, Button } from "antd";
+import React from "react";
+import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import _ from "lodash";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  jobRO: selectJobReadOnly,
+});
+
+export function JobsMarkPstExempt({ jobRO, form }) {
+  const { t } = useTranslation();
+
+  const handleConfirm = () => {
+    const newPartRates = _.cloneDeep(form.getFieldValue("parts_tax_rates"));
+
+    Object.keys(newPartRates).forEach((key) => {
+      newPartRates[key] = {
+        ...newPartRates[key],
+        prt_tax_in: false,
+        prt_tax_rt: 0,
+      };
+    });
+
+    form.setFieldsValue({
+      state_tax_rate: 0,
+      tax_lbr_rt: 0,
+      tax_levies_rt: 0,
+      tax_sub_rt: 0,
+      tax_shop_mat_rt: 0,
+      tax_paint_mat_rt: 0,
+      tax_str_rt: 0,
+      tax_tow_rt: 0,
+      parts_tax_rates: newPartRates,
+    });
+  };
+
+  return (
+    <Popconfirm
+      onConfirm={handleConfirm}
+      disabled={jobRO}
+      okText={t("general.labels.yes")}
+      cancelText={t("general.labels.no")}
+      title={t("jobs.actions.markpstexemptconfirm")}
+    >
+      <Button type="link" disabled={jobRO}>
+        {t("jobs.actions.markpstexempt")}
+      </Button>
+    </Popconfirm>
+  );
+}
+export default connect(mapStateToProps, null)(JobsMarkPstExempt);

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

@@ -31,11 +31,14 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
       title: t("jobs.fields.vehicle"),
       dataIndex: "vehicleid",
       key: "vehicleid",
-      render: (text, record) => (
-        <Link to={`/manage/vehicles/${record.vehicleid}`}>
-          {`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc}`}
-        </Link>
-      ),
+      render: (text, record) =>
+        record.vehicleid ? (
+          <Link to={`/manage/vehicles/${record.vehicleid}`}>
+            {`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc}`}
+          </Link>
+        ) : (
+          t("jobs.errors.novehicle")
+        ),
     },
     {
       title: t("jobs.fields.clm_no"),

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

@@ -90,7 +90,11 @@ export function PartsOrderListTableComponent({
         </Button>
       )}
       <Button
-        disabled={jobRO || record.return}
+        disabled={
+          jobRO ||
+          record.return ||
+          record.vendor.id === bodyshop.inhousevendorid
+        }
         onClick={() => {
           logImEXEvent("parts_order_receive_bill");
           setPartsReceiveContext({
@@ -139,7 +143,10 @@ export function PartsOrderListTableComponent({
         </Button>
       </Popconfirm>
       <Button
-        disabled={jobRO}
+        disabled={
+          (jobRO ? !record.return : jobRO) ||
+          record.vendor.id === bodyshop.inhousevendorid
+        }
         onClick={() => {
           logImEXEvent("parts_order_receive_bill");
 
@@ -157,7 +164,7 @@ export function PartsOrderListTableComponent({
                     quantity: pol.quantity,
 
                     actual_price: pol.act_price,
-                    cost_center: pol.jobline.part_type
+                    cost_center: pol.jobline?.part_type
                       ? responsibilityCenters.defaults.costs[
                           pol.jobline.part_type
                         ] || null
@@ -183,6 +190,7 @@ export function PartsOrderListTableComponent({
             ? Templates.parts_return_slip.subject
             : Templates.parts_order.subject,
         }}
+        id={job.id}
       />
     </Space>
   );

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -101,7 +101,9 @@ export function PartsOrderModalContainer({
 
     const jobLinesResult = await updateJobLines({
       variables: {
-        ids: values.parts_order_lines.data.map((item) => item.job_line_id),
+        ids: values.parts_order_lines.data
+          .filter((item) => item.job_line_id)
+          .map((item) => item.job_line_id),
         status: isReturn
           ? bodyshop.md_order_statuses.default_returned || "Returned*"
           : bodyshop.md_order_statuses.default_ordered || "Ordered*",
@@ -180,7 +182,8 @@ export function PartsOrderModalContainer({
             ? Templates.parts_return_slip.subject
             : Templates.parts_order.subject,
         },
-        "e"
+        "e",
+        jobId
       );
     } else if (sendType === "p") {
       GenerateDocument(

client/src/components/payment-form/payment-form.totalpayments.component.jsx

@@ -20,7 +20,9 @@ export default function PaymentFormTotalPayments({ jobid }) {
 
   if (!data) return <></>;
   const totalPayments = data.jobs_by_pk.payments.reduce((acc, val) => {
-    return acc.add(Dinero({ amount: (val.amount || 0) * 100 }));
+    return acc.add(
+      Dinero({ amount: Math.round(((val && val.amount) || 0) * 100) })
+    );
   }, Dinero());
 
   const balance =
@@ -39,7 +41,7 @@ export default function PaymentFormTotalPayments({ jobid }) {
         <Statistic
           title={t("payments.labels.balance")}
           valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
-          value={balance.toFormat()}
+          value={(balance && balance.toFormat()) || ""}
         />
       )}
       {!balance && <div>{t("jobs.errors.nofinancial")}</div>}

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

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client";
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { Button, Form, Modal, notification } from "antd";
 import axios from "axios";
@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { GET_JOB_INFO_FOR_STRIPE } from "../../graphql/jobs.queries";
 import {
   INSERT_NEW_PAYMENT,
   UPDATE_PAYMENT,
@@ -44,6 +45,7 @@ function PaymentModalContainer({
   const [enterAgain, setEnterAgain] = useState(false);
   const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [updatePayment] = useMutation(UPDATE_PAYMENT);
+  const client = useApolloClient();
   const stripe = useStripe();
   const elements = useElements();
   const { t } = useTranslation();
@@ -80,13 +82,22 @@ function PaymentModalContainer({
           stripe_acct_id: bodyshop.stripe_acct_id,
         });
 
+        const { data } = await client.query({
+          query: GET_JOB_INFO_FOR_STRIPE,
+          variables: { jobid: values.jobid },
+        });
+
         stripePayment = await stripe.confirmCardPayment(
           secretKey.data.clientSecret,
           {
             payment_method: {
               card: elements.getElement(CardElement),
               billing_details: {
-                name: "Jenny Rosen",
+                name: `${data.jobs_by_pk.ownr_fn || ""} ${
+                  data.jobs_by_pk.ownr_ln || ""
+                } ${data.jobs_by_pk.ownr_co_nm || ""}`,
+                email: data.jobs_by_pk.ownr_ea,
+                phone: data.jobs_by_pk.ownr_ph1,
               },
             },
           }
@@ -133,7 +144,8 @@ function PaymentModalContainer({
               replyTo: bodyshop.email,
               subject: Templates.payment_receipt.subject,
             },
-            sendby === "email" ? "e" : "p"
+            sendby === "email" ? "e" : "p",
+            paymentObj.jobid
           );
         }
       } else {

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

@@ -1,4 +1,4 @@
-import { SyncOutlined } from "@ant-design/icons";
+import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
@@ -15,6 +15,8 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import CaBcEtfTableModalContainer from "../ca-bc-etf-table-modal/ca-bc-etf-table-modal.container";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 
+const stripeTestEnv = process.env.REACT_APP_STRIPE_PUBLIC_KEY; //.includes("test");
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -128,6 +130,18 @@ export function PaymentsListPaginated({
       title: t("payments.fields.stripeid"),
       dataIndex: "stripeid",
       key: "stripeid",
+      render: (text, record) =>
+        record.stripeid ? (
+          <a
+            href={
+              stripeTestEnv
+                ? `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/test/payments/${record.stripeid}`
+                : `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/payments/${record.stripeid}`
+            }
+          >
+            {record.stripeid}
+          </a>
+        ) : null,
     },
     {
       title: t("payments.fields.created_at"),
@@ -160,7 +174,7 @@ export function PaymentsListPaginated({
               });
             }}
           >
-            {t("general.actions.edit")}
+            <EditFilled />
           </Button>
           <PrintWrapperComponent
             templateObject={{
@@ -168,6 +182,7 @@ export function PaymentsListPaginated({
               variables: { id: record.id },
             }}
             messageObject={{ subject: Templates.payment_receipt.subject }}
+            id={record.job && record.job.id}
           />
         </Space>
       ),

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

@@ -52,7 +52,8 @@ export function PrintCenterItemComponent({
                 variables: { id: id },
               },
               { to: context.job && context.job.ownr_ea, subject: item.subject },
-              "e"
+              "e",
+              id
             );
           }}
         />

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

@@ -1,4 +1,4 @@
-import { Card, Col, Input, Row, Typography } from "antd";
+import { Card, Col, Input, Row, Space, Typography } from "antd";
 import _ from "lodash";
 import React, { useState } from "react";
 import { connect } from "react-redux";
@@ -26,7 +26,9 @@ export function PrintCenterJobsComponent({ printCenterModal }) {
 
   const filteredJobsReportsList =
     search !== ""
-      ? JobsReportsList.filter((r) => r.title.toLowerCase().includes(search))
+      ? JobsReportsList.filter((r) =>
+          r.title.toLowerCase().includes(search.toLowerCase())
+        )
       : JobsReportsList;
 
   //Group it, create cards, and then filter out.
@@ -42,10 +44,13 @@ export function PrintCenterJobsComponent({ printCenterModal }) {
         <Col lg={16} md={12} sm={24} className="print-center-list">
           <Card
             extra={
-              <Input.Search
-                onChange={(e) => setSearch(e.target.value)}
-                value={search}
-              />
+              <Space wrap>
+                <Jobd3RdPartyModal jobId={jobId} />
+                <Input.Search
+                  onChange={(e) => setSearch(e.target.value)}
+                  value={search}
+                />
+              </Space>
             }
           >
             <Row gutter={[16, 16]}>
@@ -71,7 +76,6 @@ export function PrintCenterJobsComponent({ printCenterModal }) {
               ))}
             </Row>
           </Card>
-          <Jobd3RdPartyModal jobId={jobId} />
         </Col>
       </Row>
     </div>

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

@@ -7,11 +7,12 @@ export default function PrintWrapperComponent({
   templateObject,
   messageObject = {},
   children,
+  id,
 }) {
   const [loading, setLoading] = useState(false);
   const handlePrint = async (type) => {
     setLoading(true);
-    await GenerateDocument(templateObject, messageObject, type);
+    await GenerateDocument(templateObject, messageObject, type, id);
     setLoading(false);
   };
 

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

@@ -0,0 +1,42 @@
+import { Button, Dropdown, Menu } from "antd";
+import React, { useState } from "react";
+import { TemplateList } from "../../utils/TemplateConstants";
+import { useTranslation } from "react-i18next";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+
+const ProdTemplates = TemplateList("production");
+
+export default function ProductionListPrint() {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  return (
+    <Dropdown
+      trigger="click"
+      overlay={
+        <Menu>
+          {Object.keys(ProdTemplates).map((key) => (
+            <Menu.Item
+              key={key}
+              onClick={async () => {
+                setLoading(true);
+                await GenerateDocument(
+                  {
+                    name: ProdTemplates[key].key,
+                    // variables: { id: contract.id },
+                  },
+                  {},
+                  "p"
+                );
+                setLoading(false);
+              }}
+            >
+              {ProdTemplates[key].title}
+            </Menu.Item>
+          ))}
+        </Menu>
+      }
+    >
+      <Button loading={loading}>{t("general.labels.print")}</Button>
+    </Dropdown>
+  );
+}

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

@@ -13,6 +13,7 @@ import ProductionListColumnsAdd from "../production-list-columns/production-list
 import ProductionListColumns from "../production-list-columns/production-list-columns.data";
 import ProductionListDetail from "../production-list-detail/production-list-detail.component";
 import ProductionListSaveConfigButton from "../production-list-save-config-button/production-list-save-config-button.component";
+import ProductionListPrint from "./production-list-print.component";
 import ProductionListTableViewSelect from "./production-list-table-view-select.component";
 import ResizeableTitle from "./production-list-table.resizeable.component";
 
@@ -88,14 +89,16 @@ export function ProductionListTable({
     setColumns(columns.filter((i) => i.key !== key));
   };
 
-  const handleResize = (index) => (e, { size }) => {
-    const nextColumns = [...columns];
-    nextColumns[index] = {
-      ...nextColumns[index],
-      width: size.width,
+  const handleResize =
+    (index) =>
+    (e, { size }) => {
+      const nextColumns = [...columns];
+      nextColumns[index] = {
+        ...nextColumns[index],
+        width: size.width,
+      };
+      setColumns(nextColumns);
     };
-    setColumns(nextColumns);
-  };
 
   const headerItem = (col) => (
     <Dropdown
@@ -178,6 +181,7 @@ export function ProductionListTable({
               placeholder={t("general.labels.search")}
               value={searchText}
             />
+            <ProductionListPrint />
           </Space>
         }
       />

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

@@ -54,6 +54,7 @@ const ret = {
 
   "shop:vendors": 2,
   "shop:rbac": 1,
+  "shop:dashboard": 3,
   "shop:templates": 4,
 
   "temporarydocs:view": 2,

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

@@ -32,27 +32,23 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
   const Templates = TemplateList("report_center");
   const { visible } = reportCenterModal;
 
-  const [
-    callVendorQuery,
-    { data: vendorData, called: vendorCalled },
-  ] = useLazyQuery(QUERY_ALL_VENDORS, {
-    skip: !(
-      visible &&
-      Templates[form.getFieldValue("key")] &&
-      Templates[form.getFieldValue("key")].idtype
-    ),
-  });
+  const [callVendorQuery, { data: vendorData, called: vendorCalled }] =
+    useLazyQuery(QUERY_ALL_VENDORS, {
+      skip: !(
+        visible &&
+        Templates[form.getFieldValue("key")] &&
+        Templates[form.getFieldValue("key")].idtype
+      ),
+    });
 
-  const [
-    callEmployeeQuery,
-    { data: employeeData, called: employeeCalled },
-  ] = useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
-    skip: !(
-      visible &&
-      Templates[form.getFieldValue("key")] &&
-      Templates[form.getFieldValue("key")].idtype
-    ),
-  });
+  const [callEmployeeQuery, { data: employeeData, called: employeeCalled }] =
+    useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
+      skip: !(
+        visible &&
+        Templates[form.getFieldValue("key")] &&
+        Templates[form.getFieldValue("key")].idtype
+      ),
+    });
 
   const handleFinish = async (values) => {
     setLoading(true);
@@ -73,7 +69,8 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
         to: values.to,
         subject: Templates[values.key]?.subject,
       },
-      values.sendby === "email" ? "e" : "p"
+      values.sendby === "email" ? "e" : "p",
+      id
     );
     setLoading(false);
   };

client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.js

@@ -53,7 +53,7 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
           name="Ideal Load"
           dataKey="target"
           stroke="darkgreen"
-          fill="whitr"
+          fill="white"
           fillOpacity={0}
         />
         <Radar

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

@@ -9,6 +9,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import Event from "../job-at-change/schedule-event.container";
 import HeaderComponent from "./schedule-calendar-header.component";
 import "./schedule-calendar.styles.scss";
+import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -45,45 +46,48 @@ export function ScheduleCalendarWrapperComponent({
   const selectedDate = new Date(date || moment(search.date) || Date.now());
 
   return (
-    <Calendar
-      events={data}
-      defaultView={search.view || defaultView || "week"}
-      date={selectedDate}
-      onNavigate={(date, view, action) => {
-        search.date = date.toISOString().substr(0, 10);
-        history.push({ search: queryString.stringify(search) });
-      }}
-      onRangeChange={(start, end) => {
-        if (setDateRangeCallback) setDateRangeCallback({ start, end });
-      }}
-      onView={(view) => {
-        search.view = view;
-        history.push({ search: queryString.stringify(search) });
-      }}
-      step={15}
-      // timeslots={1}
-      showMultiDayTimes
-      localizer={localizer}
-      min={
-        bodyshop.schedule_start_time
-          ? new Date(bodyshop.schedule_start_time)
-          : new Date("2020-01-01T06:00:00")
-      }
-      max={
-        bodyshop.schedule_end_time
-          ? new Date(bodyshop.schedule_end_time)
-          : new Date("2020-01-01T20:00:00")
-      }
-      eventPropGetter={handleEventPropStyles}
-      components={{
-        event: (e) =>
-          Event({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
-        header: (p) => (
-          <HeaderComponent {...p} events={data} refetch={refetch} />
-        ),
-      }}
-      {...otherProps}
-    />
+    <>
+      <JobDetailCards />
+      <Calendar
+        events={data}
+        defaultView={search.view || defaultView || "week"}
+        date={selectedDate}
+        onNavigate={(date, view, action) => {
+          search.date = date.toISOString().substr(0, 10);
+          history.push({ search: queryString.stringify(search) });
+        }}
+        onRangeChange={(start, end) => {
+          if (setDateRangeCallback) setDateRangeCallback({ start, end });
+        }}
+        onView={(view) => {
+          search.view = view;
+          history.push({ search: queryString.stringify(search) });
+        }}
+        step={15}
+        // timeslots={1}
+        showMultiDayTimes
+        localizer={localizer}
+        min={
+          bodyshop.schedule_start_time
+            ? new Date(bodyshop.schedule_start_time)
+            : new Date("2020-01-01T06:00:00")
+        }
+        max={
+          bodyshop.schedule_end_time
+            ? new Date(bodyshop.schedule_end_time)
+            : new Date("2020-01-01T20:00:00")
+        }
+        eventPropGetter={handleEventPropStyles}
+        components={{
+          event: (e) =>
+            Event({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
+          header: (p) => (
+            <HeaderComponent {...p} events={data} refetch={refetch} />
+          ),
+        }}
+        {...otherProps}
+      />
+    </>
   );
 }
 

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

@@ -9,6 +9,7 @@ export default function ScheduleCalendarComponent({ data, refetch }) {
   return (
     <Row gutter={[16, 16]}>
       <ScheduleModal />
+
       <Col span={24}>
         <PageHeader
           extra={

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

@@ -12,7 +12,7 @@ import EmailInput from "../form-items-formatted/email-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
-
+import "./schedule-job-modal.scss";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -170,7 +170,7 @@ export function ScheduleJobModalComponent({
             const values = form.getFieldsValue();
 
             return (
-              <div style={{ height: "70vh" }}>
+              <div className="schedule-job-modal">
                 <ScheduleDayViewContainer day={values.start} />
               </div>
             );

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

@@ -148,6 +148,7 @@ export function ScheduleJobModalContainer({
     toggleModalVisible();
     if (values.notifyCustomer) {
       setEmailOptions({
+        jobid: jobId,
         messageOptions: {
           to: [values.email],
           replyTo: bodyshop.email,

client/src/components/schedule-job-modal/schedule-job-modal.scss

@@ -0,0 +1,10 @@
+.schedule-job-modal {
+  height: 70vh;
+  .rbc-calendar {
+    .rbc-toolbar {
+      .rbc-btn-group {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -261,7 +261,6 @@ export default function ShopInfoGeneral({ form }) {
           label={t("bodyshop.fields.md_categories")}
           rules={[
             {
-              required: true,
               //message: t("general.validation.required"),
               type: "array",
             },
@@ -437,6 +436,14 @@ export default function ShopInfoGeneral({ form }) {
         >
           <CurrencyInput />
         </Form.Item>
+
+        <Form.Item
+          name={["attach_pdf_to_email"]}
+          label={t("bodyshop.fields.attach_pdf_to_email")}
+          valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow header={t("bodyshop.labels.messagingpresets")}>
         <Form.List name={["md_messaging_presets"]}>
@@ -826,6 +833,180 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
+      <LayoutFormRow grow header={t("bodyshop.fields.md_jobline_presets")}>
+        <Form.List name={["md_jobline_presets"]}>
+          {(fields, { add, remove, move }) => {
+            return (
+              <div>
+                {fields.map((field, index) => (
+                  <Form.Item key={field.key}>
+                    <LayoutFormRow noDivider>
+                      <Form.Item
+                        label={t("general.labels.label")}
+                        key={`${index}label`}
+                        name={[field.name, "label"]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.line_desc")}
+                        key={`${index}line_desc`}
+                        name={[field.name, "line_desc"]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.mod_lbr_ty")}
+                        key={`${index}mod_lbr_ty`}
+                        name={[field.name, "mod_lbr_ty"]}
+                      >
+                        <Select allowClear>
+                          <Select.Option value="LAA">
+                            {t("joblines.fields.lbr_types.LAA")}
+                          </Select.Option>
+                          <Select.Option value="LAB">
+                            {t("joblines.fields.lbr_types.LAB")}
+                          </Select.Option>
+                          <Select.Option value="LAD">
+                            {t("joblines.fields.lbr_types.LAD")}
+                          </Select.Option>
+                          <Select.Option value="LAE">
+                            {t("joblines.fields.lbr_types.LAE")}
+                          </Select.Option>
+                          <Select.Option value="LAF">
+                            {t("joblines.fields.lbr_types.LAF")}
+                          </Select.Option>
+                          <Select.Option value="LAG">
+                            {t("joblines.fields.lbr_types.LAG")}
+                          </Select.Option>
+                          <Select.Option value="LAM">
+                            {t("joblines.fields.lbr_types.LAM")}
+                          </Select.Option>
+                          <Select.Option value="LAR">
+                            {t("joblines.fields.lbr_types.LAR")}
+                          </Select.Option>
+                          <Select.Option value="LAS">
+                            {t("joblines.fields.lbr_types.LAS")}
+                          </Select.Option>
+                          <Select.Option value="LAU">
+                            {t("joblines.fields.lbr_types.LAU")}
+                          </Select.Option>
+                          <Select.Option value="LA1">
+                            {t("joblines.fields.lbr_types.LA1")}
+                          </Select.Option>
+                          <Select.Option value="LA2">
+                            {t("joblines.fields.lbr_types.LA2")}
+                          </Select.Option>
+                          <Select.Option value="LA3">
+                            {t("joblines.fields.lbr_types.LA3")}
+                          </Select.Option>
+                          <Select.Option value="LA4">
+                            {t("joblines.fields.lbr_types.LA4")}
+                          </Select.Option>
+                        </Select>
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.mod_lb_hrs")}
+                        key={`${index}mod_lb_hrs`}
+                        name={[field.name, "mod_lb_hrs"]}
+                      >
+                        <InputNumber precision={1} />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.part_type")}
+                        key={`${index}part_type`}
+                        name={[field.name, "part_type"]}
+                      >
+                        <Select allowClear>
+                          <Select.Option value="PAA">
+                            {t("joblines.fields.part_types.PAA")}
+                          </Select.Option>
+                          <Select.Option value="PAC">
+                            {t("joblines.fields.part_types.PAC")}
+                          </Select.Option>
+                          <Select.Option value="PAE">
+                            {t("joblines.fields.part_types.PAE")}
+                          </Select.Option>
+                          <Select.Option value="PAL">
+                            {t("joblines.fields.part_types.PAL")}
+                          </Select.Option>
+                          <Select.Option value="PAM">
+                            {t("joblines.fields.part_types.PAM")}
+                          </Select.Option>
+                          <Select.Option value="PAN">
+                            {t("joblines.fields.part_types.PAN")}
+                          </Select.Option>
+                          <Select.Option value="PAO">
+                            {t("joblines.fields.part_types.PAO")}
+                          </Select.Option>
+                          <Select.Option value="PAR">
+                            {t("joblines.fields.part_types.PAR")}
+                          </Select.Option>
+                          <Select.Option value="PAS">
+                            {t("joblines.fields.part_types.PAS")}
+                          </Select.Option>
+                        </Select>
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.oem_partno")}
+                        key={`${index}oem_partno`}
+                        name={[field.name, "oem_partno"]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.part_qty")}
+                        key={`${index}part_qty`}
+                        name={[field.name, "part_qty"]}
+                      >
+                        <CurrencyInput precision={2} min={0} />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.act_price")}
+                        key={`${index}act_price`}
+                        name={[field.name, "act_price"]}
+                      >
+                        <CurrencyInput precision={2} min={0} />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.prt_dsmk_p")}
+                        key={`${index}prt_dsmk_p`}
+                        name={[field.name, "prt_dsmk_p"]}
+                      >
+                        <InputNumber precision={0} min={0} max={100} />
+                      </Form.Item>
+
+                      <Space wrap>
+                        <DeleteFilled
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
+                      </Space>
+                    </LayoutFormRow>
+                  </Form.Item>
+                ))}
+                <Form.Item>
+                  <Button
+                    type="dashed"
+                    onClick={() => {
+                      add();
+                    }}
+                    style={{ width: "100%" }}
+                  >
+                    {t("general.actions.add")}
+                  </Button>
+                </Form.Item>
+              </div>
+            );
+          }}
+        </Form.List>
+      </LayoutFormRow>
     </div>
   );
 }