Merge branch 'release/2023-04-28' into feature/america

2023-04-27 15:21:42 -07:00
parent 648e8aaae0 ea7c22daec
commit 184d72c444
73 changed files with 3394 additions and 922 deletions
--- a/client/src/components/breadcrumbs/breadcrumbs.component.jsx
+++ b/client/src/components/breadcrumbs/breadcrumbs.component.jsx
@@ -7,7 +7,9 @@ import { createStructuredSelector } from "reselect";
 import { selectBreadcrumbs } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
+import GlobalSearchOs from "../global-search/global-search-os.component";
 import "./breadcrumbs.styles.scss";
+import { useTreatments } from "@splitsoftware/splitio-react";

 const mapStateToProps = createStructuredSelector({
  breadcrumbs: selectBreadcrumbs,
@@ -15,6 +17,12 @@ const mapStateToProps = createStructuredSelector({
 });

 export function BreadCrumbs({ breadcrumbs, bodyshop }) {
+  const { OpenSearch } = useTreatments(
+    ["OpenSearch"],
+    {},
+    bodyshop && bodyshop.imexshopid
+  );
+
  return (
    <Row className="breadcrumb-container">
      <Col xs={24} sm={24} md={16}>
@@ -38,7 +46,7 @@ export function BreadCrumbs({ breadcrumbs, bodyshop }) {
        </Breadcrumb>
      </Col>
      <Col xs={24} sm={24} md={8}>
-        <GlobalSearch />
+        {OpenSearch.treatment === "on" ? <GlobalSearchOs /> : <GlobalSearch />}
      </Col>
    </Row>
  );
--- a/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx
+++ b/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx
@@ -10,7 +10,10 @@ export default function CABCpvrtCalculator({ disabled, form }) {

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

--- a/client/src/components/global-search/global-search-os.component.jsx
+++ b/client/src/components/global-search/global-search-os.component.jsx
@@ -0,0 +1,216 @@
+import { AutoComplete, Divider, Input, Space } from "antd";
+import axios from "axios";
+import _ from "lodash";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useHistory } from "react-router-dom";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
+import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
+
+export default function GlobalSearchOs() {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState(false);
+
+  const executeSearch = async (v) => {
+    if (v && v && v !== "" && v.length >= 3) {
+      try {
+        setLoading(true);
+        const searchData = await axios.post("/search", {
+          search: v,
+        });
+
+        const resultsByType = {
+          payments: [],
+          jobs: [],
+          bills: [],
+          owners: [],
+          vehicles: [],
+        };
+
+        searchData.data.hits.hits.forEach((hit) => {
+          resultsByType[hit._index].push(hit._source);
+        });
+        setData([
+          {
+            label: renderTitle(t("menus.header.search.jobs")),
+            options: resultsByType.jobs.map((job) => {
+              return {
+                key: job.id,
+                value: job.ro_number || "N/A",
+                label: (
+                  <Link to={`/manage/jobs/${job.id}`}>
+                    <Space size="small" split={<Divider type="vertical" />}>
+                      <strong>{job.ro_number || t("general.labels.na")}</strong>
+                      <span>{`${job.status || ""}`}</span>
+                      <span>
+                        <OwnerNameDisplay ownerObject={job} />
+                      </span>
+                      <span>{`${job.v_model_yr || ""} ${
+                        job.v_make_desc || ""
+                      } ${job.v_model_desc || ""}`}</span>
+                      <span>{`${job.clm_no || ""}`}</span>
+                    </Space>
+                  </Link>
+                ),
+              };
+            }),
+          },
+          {
+            label: renderTitle(t("menus.header.search.owners")),
+            options: resultsByType.owners.map((owner) => {
+              return {
+                key: owner.id,
+                value: OwnerNameDisplayFunction(owner),
+                label: (
+                  <Link to={`/manage/owners/${owner.id}`}>
+                    <Space
+                      size="small"
+                      split={<Divider type="vertical" />}
+                      wrap
+                    >
+                      <span>
+                        <OwnerNameDisplay ownerObject={owner} />
+                      </span>
+                      <PhoneNumberFormatter>
+                        {owner.ownr_ph1}
+                      </PhoneNumberFormatter>
+                      <PhoneNumberFormatter>
+                        {owner.ownr_ph2}
+                      </PhoneNumberFormatter>
+                    </Space>
+                  </Link>
+                ),
+              };
+            }),
+          },
+          {
+            label: renderTitle(t("menus.header.search.vehicles")),
+            options: resultsByType.vehicles.map((vehicle) => {
+              return {
+                key: vehicle.id,
+                value: `${vehicle.v_model_yr || ""} ${
+                  vehicle.v_make_desc || ""
+                } ${vehicle.v_model_desc || ""}`,
+                label: (
+                  <Link to={`/manage/vehicles/${vehicle.id}`}>
+                    <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>
+                        <VehicleVinDisplay>
+                          {vehicle.v_vin || ""}
+                        </VehicleVinDisplay>
+                      </span>
+                    </Space>
+                  </Link>
+                ),
+              };
+            }),
+          },
+          {
+            label: renderTitle(t("menus.header.search.payments")),
+            options: resultsByType.payments.map((payment) => {
+              return {
+                key: payment.id,
+                value: `${payment.job?.ro_number} ${payment.amount}`,
+                label: (
+                  <Link to={`/manage/jobs/${payment.job?.id}`}>
+                    <Space size="small" split={<Divider type="vertical" />}>
+                      <span>{payment.paymentnum}</span>
+                      <span>{payment.job?.ro_number}</span>
+                      <span>{payment.memo || ""}</span>
+                      <span>{payment.amount || ""}</span>
+                      <span>{payment.transactionid || ""}</span>
+                    </Space>
+                  </Link>
+                ),
+              };
+            }),
+          },
+          {
+            label: renderTitle(t("menus.header.search.bills")),
+            options: resultsByType.bills.map((bill) => {
+              return {
+                key: bill.id,
+                value: `${bill.invoice_number} - ${bill.vendor.name}`,
+                label: (
+                  <Link to={`/manage/bills?billid=${bill.id}`}>
+                    <Space size="small" split={<Divider type="vertical" />}>
+                      <span>{bill.invoice_number}</span>
+                      <span>{bill.vendor.name}</span>
+                      <span>{bill.date}</span>
+                    </Space>
+                  </Link>
+                ),
+              };
+            }),
+          },
+          // {
+          //   label: renderTitle(t("menus.header.search.phonebook")),
+          //   options: resultsByType.search_phonebook.map((pb) => {
+          //     return {
+          //       key: pb.id,
+          //       value: `${pb.firstname || ""} ${pb.lastname || ""} ${
+          //         pb.company || ""
+          //       }`,
+          //       label: (
+          //         <Link to={`/manage/phonebook?phonebookentry=${pb.id}`}>
+          //           <Space size="small" split={<Divider type="vertical" />}>
+          //             <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${
+          //               pb.company || ""
+          //             }`}</span>
+          //             <PhoneNumberFormatter>{pb.phone1}</PhoneNumberFormatter>
+          //             <span>{pb.email}</span>
+          //           </Space>
+          //         </Link>
+          //       ),
+          //     };
+          //   }),
+          // },
+        ]);
+      } catch (error) {
+        console.log("Error while fetching search results", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+  const debouncedExecuteSearch = _.debounce(executeSearch, 750);
+
+  const handleSearch = (value) => {
+    debouncedExecuteSearch(value);
+  };
+
+  const renderTitle = (title) => {
+    return <span>{title}</span>;
+  };
+
+  return (
+    <AutoComplete
+      options={data}
+      onSearch={handleSearch}
+      defaultActiveFirstOption
+      onSelect={(val, opt) => {
+        history.push(opt.label.props.to);
+      }}
+      onClear={() => setData([])}
+    >
+      <Input.Search
+        size="large"
+        placeholder={t("general.labels.globalsearch")}
+        enterButton
+        allowClear
+        loading={loading}
+      />
+    </AutoComplete>
+  );
+}
--- a/client/src/components/global-search/global-search.component.jsx
+++ b/client/src/components/global-search/global-search.component.jsx
@@ -8,7 +8,7 @@ import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
 import OwnerNameDisplay, {
-  OwnerNameDisplayFunction
+  OwnerNameDisplayFunction,
 } from "../owner-name-display/owner-name-display.component";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 export default function GlobalSearch() {
@@ -18,11 +18,18 @@ export default function GlobalSearch() {
    useLazyQuery(GLOBAL_SEARCH_QUERY);

  const executeSearch = (v) => {
-    if (v && v.variables.search && v.variables.search !== "") callSearch(v);
+    if (
+      v &&
+      v.variables.search &&
+      v.variables.search !== "" &&
+      v.variables.search.length >= 3
+    )
+      callSearch(v);
  };
  const debouncedExecuteSearch = _.debounce(executeSearch, 750);

  const handleSearch = (value) => {
+    console.log("Handle Search");
    debouncedExecuteSearch({ variables: { search: value } });
  };

@@ -37,7 +44,7 @@ export default function GlobalSearch() {
          options: data.search_jobs.map((job) => {
            return {
              key: job.id,
-              value: job.ro_number,
+              value: job.ro_number || "N/A",
              label: (
                <Link to={`/manage/jobs/${job.id}`}>
                  <Space size="small" split={<Divider type="vertical" />}>
--- a/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
+++ b/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
@@ -82,7 +82,7 @@ export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
        >
          <CurrencyInput disabled={jobRO || bodyshop.cdk_dealerid} />
        </Form.Item>
-        <Space align="end">
+        <Space align="center">
          <Form.Item label={t("jobs.fields.ca_bc_pvrt")} name="ca_bc_pvrt">
            <CurrencyInput disabled={jobRO} min={0} />
          </Form.Item>
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -34,8 +34,8 @@ function JobsDocumentsComponent({
        const fileType = DetermineFileType(value.type);
        if (value.type.startsWith("image")) {
          acc.images.push({
-            src: GenerateSrcUrl(value),
-            thumbnail: GenerateThumbUrl(value),
+            // src: GenerateSrcUrl(value),
+            src: GenerateThumbUrl(value),
            // src: GenerateSrcUrl(value),
            // thumbnail: GenerateThumbUrl(value),
            fullsize: GenerateSrcUrl(value),
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.external.component.jsx
+++ b/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 { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";
+import { GenerateThumbUrl } from "./job-documents.utility";

 function JobsDocumentGalleryExternal({
  data,
@@ -15,8 +15,8 @@ function JobsDocumentGalleryExternal({
    let documents = data.reduce((acc, value) => {
      if (value.type.startsWith("image")) {
        acc.push({
-          src: GenerateSrcUrl(value),
-          thumbnail: GenerateThumbUrl(value),
+          //src: GenerateSrcUrl(value),
+          src: GenerateThumbUrl(value),
          thumbnailHeight: 225,
          thumbnailWidth: 225,
          isSelected: false,
--- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx
@@ -52,11 +52,15 @@ function JobDocumentsLocalGalleryExternal({
              val.type.mime &&
              val.type.mime.startsWith("image")
            ) {
-              acc.push(val);
+              acc.push({ ...val, src: val.thumbnail });
            }
            return acc;
          }, [])
        : [];
+    console.log(
+      "🚀 ~ file: jobs-documents-local-gallery.external.component.jsx:48 ~ useEffect ~ documents:",
+      documents
+    );

    setgalleryImages(documents);
  }, [allMedia, jobId, setgalleryImages, t]);
--- a/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
+++ b/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
@@ -34,7 +34,7 @@ export function NoteUpsertModalContainer({
  const [updateNote] = useMutation(UPDATE_NOTE);

  const { visible, context, actions } = noteUpsertModal;
-  const { jobId, existingNote } = context;
+  const { jobId, existingNote, text } = context;
  const { refetch } = actions;

  const [form] = Form.useForm();
@@ -45,8 +45,12 @@ export function NoteUpsertModalContainer({
      form.setFieldsValue(existingNote);
    } else if (!existingNote && visible) {
      form.resetFields();
+
+      if (text) {
+        form.setFieldValue("text", text);
+      }
    }
-  }, [existingNote, form, visible]);
+  }, [existingNote, form, visible, text]);

  const handleFinish = async (formValues) => {
    const { relatedros, ...values } = formValues;
@@ -82,6 +86,7 @@ export function NoteUpsertModalContainer({
            { ...values, jobid: jobId, created_by: currentUser.email },
          ],
        },
+        refetchQueries: ["QUERY_NOTES_BY_JOB_PK"],
      });

      if (AdditionalNoteInserts.length > 0) {
--- a/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
+++ b/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
@@ -201,6 +201,7 @@ export function PartsOrderListTableComponent({
          subject: record.return
            ? Templates.parts_return_slip.subject
            : Templates.parts_order.subject,
+          to: record.vendor.email,
        }}
        id={job.id}
      />
@@ -296,7 +297,6 @@ export function PartsOrderListTableComponent({
        sortOrder:
          state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order,
      },
-
      {
        title: t("parts_orders.fields.act_price"),
        dataIndex: "act_price",
--- a/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
@@ -1,12 +1,23 @@
 import Icon from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Input, Popover } from "antd";
+import { Button, Input, Popover, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaRegStickyNote } from "react-icons/fa";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
-export default function ProductionListColumnProductionNote({ record }) {
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setNoteUpsertContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "noteUpsert" })),
+});
+
+function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
  const { t } = useTranslation();

  const [note, setNote] = useState(
@@ -60,12 +71,26 @@ export default function ProductionListColumnProductionNote({ record }) {
            // onPressEnter={handleSaveNote}
            autoFocus
            allowClear
+            style={{ marginBottom: "1em" }}
          />
-          <div>
-            <Button onClick={handleSaveNote}>
+          <Space>
+            <Button onClick={handleSaveNote} type="primary">
              {t("general.actions.save")}
            </Button>
-          </div>
+            <Button
+              onClick={() => {
+                setVisible(false);
+                setNoteUpsertContext({
+                  context: {
+                    jobId: record.id,
+                    text: note,
+                  },
+                });
+              }}
+            >
+              {t("notes.actions.savetojobnotes")}
+            </Button>
+          </Space>
        </div>
      }
      trigger={["click"]}
@@ -85,3 +110,8 @@ export default function ProductionListColumnProductionNote({ record }) {
    </Popover>
  );
 }
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ProductionListColumnProductionNote);
--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -92,7 +92,11 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
        to: values.to,
        subject: Templates[values.key]?.subject,
      },
-      values.sendby === "email" ? "e" : "p",
+      values.sendbyexcel === "excel"
+        ? "x"
+        : values.sendby === "email"
+        ? "e"
+        : "p",
      id
    );
    setLoading(false);
@@ -250,15 +254,38 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
            ranges={DatePIckerRanges}
          />
        </Form.Item>
-        <Form.Item
-          label={t("general.labels.sendby")}
-          name="sendby"
-          initialValue="print"
-        >
-          <Radio.Group>
-            <Radio value="email">{t("general.labels.email")}</Radio>
-            <Radio value="print">{t("general.labels.print")}</Radio>
-          </Radio.Group>
+        <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
+          {() => {
+            const key = form.getFieldValue("key");
+            //Kind of Id
+            const reporttype = Templates[key] && Templates[key].reporttype;
+
+            if (reporttype === "excel")
+              return (
+                <Form.Item
+                  label={t("general.labels.sendby")}
+                  name="sendbyexcel"
+                  initialValue="excel"
+                >
+                  <Radio.Group>
+                    <Radio value="excel">{t("general.labels.excel")}</Radio>
+                  </Radio.Group>
+                </Form.Item>
+              );
+            if (reporttype !== "excel")
+              return (
+                <Form.Item
+                  label={t("general.labels.sendby")}
+                  name="sendby"
+                  initialValue="print"
+                >
+                  <Radio.Group>
+                    <Radio value="email">{t("general.labels.email")}</Radio>
+                    <Radio value="print">{t("general.labels.print")}</Radio>
+                  </Radio.Group>
+                </Form.Item>
+              );
+          }}
        </Form.Item>

        <div
--- a/client/src/components/scoreboard-chart/chart-custom-tooltip.jsx
+++ b/client/src/components/scoreboard-chart/chart-custom-tooltip.jsx
@@ -0,0 +1,39 @@
+import Dinero from "dinero.js";
+
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div
+        style={{
+          backgroundColor: "white",
+          border: "1px solid gray",
+          padding: "0.5rem",
+        }}
+      >
+        <p style={{ margin: "0" }}>{label}</p>
+        {payload.map((data, index) => {
+          if (data.dataKey === "sales" || data.dataKey === "accSales")
+            return (
+              <p
+                style={{ margin: "10px 0", color: data.color }}
+                key={index}
+              >{`${data.name} : ${Dinero({
+                amount: Math.round(data.value * 100),
+              }).toFormat()}`}</p>
+            );
+
+          return (
+            <p
+              style={{ margin: "10px 0", color: data.color }}
+              key={index}
+            >{`${data.name} : ${data.value}`}</p>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default CustomTooltip;
--- a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
+++ b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
@@ -1,3 +1,4 @@
+import Dinero from "dinero.js";
 import { Card } from "antd";
 import moment from "moment";
 import React from "react";
@@ -18,6 +19,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util";
 import _ from "lodash";
+import CustomTooltip from "./chart-custom-tooltip";

 const graphProps = {
  strokeWidth: 3,
@@ -44,14 +46,19 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
          return {
            bodyhrs: dayAcc.bodyhrs + dayVal.bodyhrs,
            painthrs: dayAcc.painthrs + dayVal.painthrs,
+            sales:
+              dayAcc.painthrs +
+              dayVal.job.job_totals.totals.subtotal.amount / 100 +
+              2500,
          };
        },
-        { bodyhrs: 0, painthrs: 0 }
+        { bodyhrs: 0, painthrs: 0, sales: 0 }
      );
    } else {
      dayhrs = {
        bodyhrs: 0,
        painthrs: 0,
+        sales: 0,
      };
    }

@@ -73,6 +80,13 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
          : dayhrs.painthrs + dayhrs.bodyhrs,
        1
      ),
+      sales: _.round(dayhrs.sales, 2),
+      accSales: _.round(
+        acc.length > 0
+          ? acc[acc.length - 1].accSales + dayhrs.sales
+          : dayhrs.sales,
+        2
+      ),
    };

    return [...acc, theValue];
@@ -87,22 +101,27 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
        >
          <CartesianGrid stroke="#f5f5f5" />
          <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
-          <YAxis strokeWidth={graphProps.strokeWidth} />
-          <Tooltip />
-          <Legend />
-          <Area
-            type="monotone"
-            name="Accumulated Hours"
-            dataKey="accHrs"
-            fill="lightgreen"
-            stroke="green"
+          <YAxis
+            strokeWidth={graphProps.strokeWidth}
+            // allowDataOverflow
+            dataKey="sales"
+            yAxisId="right"
+            tickFormatter={(value) =>
+              Dinero({ amount: Math.round(value * 100) }).toFormat()
+            }
+            orientation="right"
          />
+          <YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth} />
+          <Tooltip content={<CustomTooltip />} />
+          <Legend />
+
          <Bar
            name="Body Hours"
            dataKey="bodyHrs"
            stackId="day"
            barSize={20}
            fill="darkblue"
+            yAxisId="left"
          />
          <Bar
            name="Paint Hours"
@@ -110,12 +129,42 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
            stackId="day"
            barSize={20}
            fill="darkred"
+            yAxisId="left"
          />
          <Line
            name="Target Hours"
            type="monotone"
            dataKey="accTargetHrs"
            stroke="#ff7300"
+            yAxisId="left"
+            strokeWidth={graphProps.strokeWidth}
+          />
+
+          <Area
+            type="monotone"
+            name="MTD Hours"
+            dataKey="accHrs"
+            fill="lightblue"
+            stroke="blue"
+            yAxisId="left"
+          />
+          {
+            //  <Area
+            //         type="monotone"
+            //         name="MTD Sales"
+            //         dataKey="accSales"
+            //         fill="lightgreen"
+            //         stroke="green"
+            //         yAxisId="right"
+            //       />
+          }
+          <Bar
+            name="Sales"
+            dataKey="sales"
+            stackId="day"
+            barSize={20}
+            fill="darkgreen"
+            yAxisId="right"
            strokeWidth={graphProps.strokeWidth}
          />
        </ComposedChart>
--- a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx
+++ b/client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx
@@ -241,9 +241,11 @@ export default function ScoreboardTimeTickets() {
      );

    ret.totalEffieciencyOverPeriod =
-      (totalActualAndProductive.totalOverPeriod /
-        totalActualAndProductive.actualTotalOverPeriod) *
-      100;
+      totalActualAndProductive.actualTotalOverPeriod
+        ? (totalActualAndProductive.totalOverPeriod /
+            totalActualAndProductive.actualTotalOverPeriod) *
+          100
+        : 0;

    roundObject(ret);
    roundObject(totals);
--- a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.stats.component.jsx
+++ b/client/src/components/scoreboard-timetickets/scoreboard-timetickets.stats.component.jsx
@@ -116,7 +116,7 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
            <Col span={12}>
              <Statistic
                title={t("scoreboard.labels.efficiencyoverperiod")}
-                value={`${data.totalEffieciencyOverPeriod}%`}
+                value={`${data.totalEffieciencyOverPeriod || 0}%`}
              />
            </Col>
          </Row>
--- a/client/src/components/shop-info/shop-info.general.component.jsx
+++ b/client/src/components/shop-info/shop-info.general.component.jsx
@@ -11,13 +11,13 @@ import {
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import PhoneFormItem, {
  PhoneItemFormatterValidation,
 } from "../form-items-formatted/phone-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import FormItemEmail from "../form-items-formatted/email-form-item.component";

 import momentTZ from "moment-timezone";
 const timeZonesList = momentTZ.tz.names();
@@ -551,6 +551,13 @@ export default function ShopInfoGeneral({ form }) {
        >
          <CurrencyInput />
        </Form.Item>
+        <Form.Item
+          name={["use_paint_scale_data"]}
+          label={t("bodyshop.fields.use_paint_scale_data")}
+          valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
        <Form.Item
          name={["attach_pdf_to_email"]}
          label={t("bodyshop.fields.attach_pdf_to_email")}
--- a/client/src/components/tech-job-statistics/tech-job-statistics.component.jsx
+++ b/client/src/components/tech-job-statistics/tech-job-statistics.component.jsx
@@ -0,0 +1,131 @@
+import { useQuery } from "@apollo/client";
+import { Card, Col, Space, Statistic, Typography } from "antd";
+import moment from "moment";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE } from "../../graphql/timetickets.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+const { Title } = Typography;
+
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({});
+
+const TechJobStatistics = ({ technician }) => {
+  const { t } = useTranslation();
+
+  const startDate = moment().startOf("week");
+  const endDate = moment().endOf("week");
+
+  const { loading, error, data } = useQuery(
+    QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE,
+    {
+      variables: {
+        start: startDate.format("YYYY-MM-DD"),
+        end: endDate.format("YYYY-MM-DD"),
+        fixedStart: moment().startOf("month").format("YYYY-MM-DD"),
+        fixedEnd: moment().endOf("month").format("YYYY-MM-DD"),
+        employeeid: technician.id,
+      },
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+    }
+  );
+
+  const totals = useMemo(() => {
+    if (data && data.timetickets && data.fixedperiod) {
+      const week = data.timetickets.reduce(
+        (acc, val) => {
+          acc.productivehrs = acc.productivehrs + val.productivehrs;
+          acc.actualhrs = acc.actualhrs + val.actualhrs;
+          return acc;
+        },
+        { productivehrs: 0, actualhrs: 0 }
+      );
+
+      const month = data.fixedperiod.reduce(
+        (acc, val) => {
+          acc.productivehrs = acc.productivehrs + val.productivehrs;
+          acc.actualhrs = acc.actualhrs + val.actualhrs;
+          return acc;
+        },
+        { productivehrs: 0, actualhrs: 0 }
+      );
+
+      return {
+        week,
+        month,
+      };
+    }
+
+    return {
+      week: { productivehrs: 0, actualhrs: 0 },
+      month: { productivehrs: 0, actualhrs: 0 },
+    };
+  }, [data]);
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <Card title={t("scoreboard.labels.productivestatistics")}>
+      <Space size={100}>
+        <Col>
+          <Title level={5}>{t("scoreboard.labels.thisweek")}</Title>
+          <Space size={20}>
+            <Statistic
+              title={t("timetickets.fields.productivehrs")}
+              value={totals.week.productivehrs.toFixed(2)}
+            />
+            <Statistic
+              title={t("timetickets.fields.actualhrs")}
+              value={totals.week.actualhrs.toFixed(2)}
+            />
+            <Statistic
+              title={t("timetickets.labels.efficiency")}
+              value={
+                totals.week.actualhrs
+                  ? `${(
+                      (totals.week.productivehrs / totals.week.actualhrs) *
+                      100
+                    ).toFixed(2)}%`
+                  : "0%"
+              }
+            />
+          </Space>
+        </Col>
+        <Col>
+          <Title level={5}>{t("scoreboard.labels.thismonth")}</Title>
+          <Space size={20}>
+            <Statistic
+              title={t("timetickets.fields.productivehrs")}
+              value={totals.month.productivehrs.toFixed(2)}
+            />
+            <Statistic
+              title={t("timetickets.fields.actualhrs")}
+              value={totals.month.actualhrs.toFixed(2)}
+            />
+            <Statistic
+              title={t("timetickets.labels.efficiency")}
+              value={
+                totals.month.actualhrs
+                  ? `${(
+                      (totals.month.productivehrs / totals.month.actualhrs) *
+                      100
+                    ).toFixed(2)}%`
+                  : "0%"
+              }
+            />
+          </Space>
+        </Col>
+      </Space>
+    </Card>
+  );
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(TechJobStatistics);
--- a/client/src/components/tech-sider/tech-sider.component.jsx
+++ b/client/src/components/tech-sider/tech-sider.component.jsx
@@ -29,7 +29,17 @@ export function TechSider({ technician, techLogout }) {
  };

  return (
-    <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
+    <Sider
+      style={{
+        height: "100vh",
+        position: "sticky",
+        top: 0,
+        left: 0,
+      }}
+      collapsible
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    >
      <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
        <Menu.Item
          key="1"