Merge branch 'release/2023-05-19' into feature/payroll

2023-05-17 07:51:23 -07:00
parent b06fbd25a0 2c80c81197
commit 097dc06c65
115 changed files with 3826 additions and 1193 deletions
--- a/client/src/components/bill-delete-button/bill-delete-button.component.jsx
+++ b/client/src/components/bill-delete-button/bill-delete-button.component.jsx
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { DELETE_BILL } from "../../graphql/bills.queries";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";

-export default function BillDeleteButton({ bill }) {
+export default function BillDeleteButton({ bill, callback }) {
  const [loading, setLoading] = useState(false);
  const { t } = useTranslation();
  const [deleteBill] = useMutation(DELETE_BILL);
@@ -36,6 +36,8 @@ export default function BillDeleteButton({ bill }) {

    if (!!!result.errors) {
      notification["success"]({ message: t("bills.successes.deleted") });
+
+      if (callback && typeof callback === "function") callback(bill.id);
    } else {
      //Check if it's an fkey violation.
      const error = JSON.stringify(result.errors);
--- 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-convert-button/jobs-convert-button.component.jsx
+++ b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
@@ -109,8 +109,8 @@ export function JobsConvertButton({
          ]}
        >
          <Select>
-            {bodyshop.md_ins_cos.map((s) => (
-              <Select.Option key={s.name} value={s.name}>
+            {bodyshop.md_ins_cos.map((s, i) => (
+              <Select.Option key={i} value={s.name}>
                {s.name}
              </Select.Option>
            ))}
--- 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-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/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
@@ -1,8 +1,9 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Input, Space, Table, Typography } from "antd";
+import axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useHistory, useLocation } from "react-router-dom";
@@ -21,6 +22,8 @@ const mapDispatchToProps = (dispatch) => ({

 export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
  const search = queryString.parse(useLocation().search);
+  const [openSearchResults, setOpenSearchResults] = useState([]);
+  const [searchLoading, setSearchLoading] = useState(false);
  const { page, sortcolumn, sortorder } = search;
  const history = useHistory();

@@ -193,6 +196,28 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
    history.push({ search: queryString.stringify(search) });
  };

+  useEffect(() => {
+    if (search.search && search.search.trim() !== "") {
+      searchJobs();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  async function searchJobs(value) {
+    try {
+      setSearchLoading(true);
+      const searchData = await axios.post("/search", {
+        search: value || search.search,
+        index: "jobs",
+      });
+      setOpenSearchResults(searchData.data.hits.hits.map((s) => s._source));
+    } catch (error) {
+      console.log("Error while fetching search results", error);
+    } finally {
+      setSearchLoading(false);
+    }
+  }
+
  return (
    <Card
      extra={
@@ -205,6 +230,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
              <Button
                onClick={() => {
                  delete search.search;
+                  delete search.page;
                  history.push({ search: queryString.stringify(search) });
                }}
              >
@@ -220,24 +246,32 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
            onSearch={(value) => {
              search.search = value;
              history.push({ search: queryString.stringify(search) });
+              searchJobs(value);
            }}
+            loading={loading || searchLoading}
            enterButton
          />
        </Space>
      }
    >
      <Table
-        loading={loading}
-        pagination={{
-          position: "top",
-          pageSize: 25,
-          current: parseInt(page || 1),
-          total: total,
-          showSizeChanger: false,
-        }}
+        loading={loading || searchLoading}
+        pagination={
+          search?.search
+            ? {
+                pageSize: 25,
+                showSizeChanger: false,
+              }
+            : {
+                pageSize: 25,
+                current: parseInt(page || 1),
+                total: total,
+                showSizeChanger: false,
+              }
+        }
        columns={columns}
        rowKey="id"
-        dataSource={jobs}
+        dataSource={search?.search ? openSearchResults : jobs}
        onChange={handleTableChange}
      />
    </Card>
--- 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/payment-modal/payment-modal.container.jsx
+++ b/client/src/components/payment-modal/payment-modal.container.jsx
@@ -52,7 +52,7 @@ function PaymentModalContainer({
    const { useStripe, sendby, ...paymentObj } = values;

    setLoading(true);
-
+    let updatedPayment; //Moved up from if statement for greater scope.
    try {
      if (!context || (context && !context.id)) {
        const newPayment = await insertPayment({
@@ -87,7 +87,7 @@ function PaymentModalContainer({
          );
        }
      } else {
-        const updatedPayment = await updatePayment({
+        updatedPayment = await updatePayment({
          variables: {
            paymentId: context.id,
            payment: paymentObj,
@@ -101,7 +101,11 @@ function PaymentModalContainer({
        }
      }

-      if (actions.refetch) actions.refetch();
+      if (actions.refetch)
+        actions.refetch(
+          updatedPayment && updatedPayment.data.update_payments.returning[0]
+        );
+
      if (enterAgain) {
        const prev = form.getFieldsValue(["date"]);

--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
@@ -1,20 +1,23 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
+import { useApolloClient } from "@apollo/client";
 import { Button, Card, Input, Space, Table, Typography } from "antd";
+import axios from "axios";
 import queryString from "query-string";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { QUERY_PAYMENT_BY_ID } from "../../graphql/payments.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
-import { alphaSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort } from "../../utils/sorters";
 import CaBcEtfTableModalContainer from "../ca-bc-etf-table-modal/ca-bc-etf-table-modal.container";
-import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -39,7 +42,10 @@ export function PaymentsListPaginated({
  bodyshop,
 }) {
  const search = queryString.parse(useLocation().search);
+  const [openSearchResults, setOpenSearchResults] = useState([]);
+  const [searchLoading, setSearchLoading] = useState(false);
  const { page, sortcolumn, sortorder } = search;
+  const client = useApolloClient();
  const history = useHistory();
  const [state, setState] = useState({
    sortedInfo: {},
@@ -52,13 +58,17 @@ export function PaymentsListPaginated({
      title: t("jobs.fields.ro_number"),
      dataIndex: "ro_number",
      key: "ro_number",
-      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
-      sortOrder: sortcolumn === "ro_number" && sortorder,
-      render: (text, record) => (
-        <Link to={"/manage/jobs/" + record.job.id}>
-          {record.job.ro_number || t("general.labels.na")}
-        </Link>
-      ),
+      // sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
+      // sortOrder: sortcolumn === "ro_number" && sortorder,
+      render: (text, record) => {
+        return record.job ? (
+          <Link to={"/manage/jobs/" + record.job.id}>
+            {record.job.ro_number || t("general.labels.na")}
+          </Link>
+        ) : (
+          <span>{t("general.labels.na")}</span>
+        );
+      },
    },
    {
      title: t("payments.fields.paymentnum"),
@@ -72,16 +82,16 @@ export function PaymentsListPaginated({
      dataIndex: "owner",
      key: "owner",
      ellipsis: true,
-      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
-      sortOrder: sortcolumn === "owner" && sortorder,
+      // sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
+      // sortOrder: sortcolumn === "owner" && sortorder,
      render: (text, record) => {
-        return record.job.owner ? (
-          <Link to={"/manage/owners/" + record.job.owner.id}>
-            <OwnerNameDisplay ownerObject={record} />
+        return record.job?.owner ? (
+          <Link to={"/manage/owners/" + record.job?.owner?.id}>
+            <OwnerNameDisplay ownerObject={record.job} />
          </Link>
        ) : (
          <span>
-            <OwnerNameDisplay ownerObject={record} />
+            <OwnerNameDisplay ownerObject={record.job} />
          </span>
        );
      },
@@ -147,10 +157,33 @@ export function PaymentsListPaginated({
        <Space>
          <Button
            disabled={record.exportedat}
-            onClick={() => {
+            onClick={async () => {
+              let apolloResults;
+              if (search.search) {
+                const { data } = await client.query({
+                  query: QUERY_PAYMENT_BY_ID,
+                  variables: {
+                    paymentId: record.id,
+                  },
+                });
+                apolloResults = data.payments_by_pk;
+              }
              setPaymentContext({
-                actions: { refetch: refetch },
-                context: record,
+                actions: {
+                  refetch: apolloResults
+                    ? (updatedRecord) => {
+                        setOpenSearchResults((results) =>
+                          results.map((result) => {
+                            if (result.id !== record.id) {
+                              return result;
+                            }
+                            return updatedRecord;
+                          })
+                        );
+                      }
+                    : refetch,
+                },
+                context: apolloResults ? apolloResults : record,
              });
            }}
          >
@@ -177,6 +210,28 @@ export function PaymentsListPaginated({
    history.push({ search: queryString.stringify(search) });
  };

+  useEffect(() => {
+    if (search.search && search.search.trim() !== "") {
+      searchPayments();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  async function searchPayments(value) {
+    try {
+      setSearchLoading(true);
+      const searchData = await axios.post("/search", {
+        search: value || search.search,
+        index: "payments",
+      });
+      setOpenSearchResults(searchData.data.hits.hits.map((s) => s._source));
+    } catch (error) {
+      console.log("Error while fetching search results", error);
+    } finally {
+      setSearchLoading(false);
+    }
+  }
+
  return (
    <Card
      extra={
@@ -189,6 +244,7 @@ export function PaymentsListPaginated({
              <Button
                onClick={() => {
                  delete search.search;
+                  delete search.page;
                  history.push({ search: queryString.stringify(search) });
                }}
              >
@@ -212,24 +268,33 @@ export function PaymentsListPaginated({
            onSearch={(value) => {
              search.search = value;
              history.push({ search: queryString.stringify(search) });
+              searchPayments(value);
            }}
+            loading={loading || searchLoading}
            enterButton
          />
        </Space>
      }
    >
      <Table
-        loading={loading}
+        loading={loading || searchLoading}
        scroll={{ x: true }}
-        pagination={{
-          position: "top",
-          pageSize: 25,
-          current: parseInt(page || 1),
-          total: total,
-        }}
+        pagination={
+          search?.search
+            ? {
+                pageSize: 25,
+                showSizeChanger: false,
+              }
+            : {
+                pageSize: 25,
+                current: parseInt(page || 1),
+                total: total,
+                showSizeChanger: false,
+              }
+        }
        columns={columns}
        rowKey="id"
-        dataSource={payments}
+        dataSource={search?.search ? openSearchResults : payments}
        onChange={handleTableChange}
      />
    </Card>
--- a/client/src/components/print-center-jobs/print-center-jobs.component.jsx
+++ b/client/src/components/print-center-jobs/print-center-jobs.component.jsx
@@ -29,7 +29,10 @@ export function PrintCenterJobsComponent({ printCenterModal, bodyshop }) {
    })
    .filter(
      (temp) =>
-        !temp.regions || (temp.regions && temp.regions[bodyshop.region_config])
+        !temp.regions ||
+        (temp.regions && temp.regions[bodyshop.region_config]) ||
+        (temp.regions &&
+          bodyshop.region_config.includes(Object.keys(temp.regions)) === true)
    );

  const filteredJobsReportsList =
--- a/client/src/components/production-board-kanban-card/production-board-kanban-card-color-legend.component.jsx
+++ b/client/src/components/production-board-kanban-card/production-board-kanban-card-color-legend.component.jsx
@@ -0,0 +1,51 @@
+import { Col, List, Space, Typography } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const CardColorLegend = ({ bodyshop }) => {
+  const { t } = useTranslation();
+  const data = bodyshop.ssbuckets.map((bucket) => {
+    let color = { r: 255, g: 255, b: 255 };
+
+    if (bucket.color) {
+      color = bucket.color;
+
+      if (bucket.color.rgb) {
+        color = bucket.color.rgb;
+      }
+    }
+
+    return {
+      label: bucket.label,
+      color,
+    };
+  });
+
+  return (
+    <Col>
+      <Typography>{t("production.labels.legend")}</Typography>
+      <List
+        grid={{
+          gutter: 16,
+        }}
+        dataSource={data}
+        renderItem={(item) => (
+          <List.Item>
+            <Space>
+              <div
+                style={{
+                  width: "1.5rem",
+                  aspectRatio: "1/1",
+                  backgroundColor: `rgba(${item.color.r},${item.color.g},${item.color.b},${item.color.a})`,
+                }}
+              ></div>
+              <div>{item.label}</div>
+            </Space>
+          </List.Item>
+        )}
+      />
+    </Col>
+  );
+};
+
+export default CardColorLegend;
--- a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
+++ b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
@@ -18,6 +18,31 @@ import moment from "moment";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";

+const cardColor = (ssbuckets, totalHrs) => {
+  const bucket = ssbuckets.filter(
+    (bucket) =>
+      bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true)
+  )[0];
+
+  let color = { r: 255, g: 255, b: 255 };
+
+  if (bucket && bucket.color) {
+    color = bucket.color;
+
+    if (bucket.color.rgb) {
+      color = bucket.color.rgb;
+    }
+  }
+
+  return color;
+};
+
+function getContrastYIQ(bgColor) {
+  const yiq = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;
+
+  return yiq >= 128 ? "black" : "white";
+}
+
 export default function ProductionBoardCard(
  technician,
  card,
@@ -54,10 +79,22 @@ export default function ProductionBoardCard(
        .isSame(moment(card.scheduled_completion), "day") &&
        "production-completion-soon"));

+  const totalHrs =
+    card.labhrs.aggregate.sum.mod_lb_hrs + card.larhrs.aggregate.sum.mod_lb_hrs;
+  const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);
+
  return (
    <Card
      className="react-kanban-card imex-kanban-card"
      size="small"
+      style={{
+        backgroundColor:
+          cardSettings &&
+          cardSettings.cardcolor &&
+          `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
+        color:
+          cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor),
+      }}
      title={
        <Space>
          <ProductionAlert record={card} key="alert" />
--- a/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
@@ -104,6 +104,13 @@ export default function ProductionBoardKanbanCardSettings({
              >
                <Switch />
              </Form.Item>
+              <Form.Item
+                valuePropName="checked"
+                label={t("production.labels.cardcolor")}
+                name="cardcolor"
+              >
+                <Switch />
+              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
@@ -166,7 +173,7 @@ export default function ProductionBoardKanbanCardSettings({
    </div>
  );
  return (
-    <Popover content={overlay} visible={visible}>
+    <Popover content={overlay} visible={visible} placement="topRight">
      <Button loading={loading} onClick={() => setVisible(true)}>
        {t("production.labels.cardsettings")}
      </Button>
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
@@ -22,6 +22,7 @@ import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-se
 //import "@asseinfo/react-kanban/dist/styles.css";
 import "./production-board-kanban.styles.scss";
 import { createBoardData } from "./production-board-kanban.utils.js";
+import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  technician: selectTechnician,
@@ -221,6 +222,7 @@ export function ProductionBoardKanbanComponent({
          employeeassignments: true,
          scheduled_completion: true,
          stickyheader: false,
+          cardcolor: false,
        };

  return (
@@ -256,6 +258,11 @@ export function ProductionBoardKanbanComponent({
          </Space>
        }
      />
+
+      {cardSettings.cardcolor && (
+        <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />
+      )}
+
      <ProductionListDetailComponent jobs={data} />
      <StickyContainer>
        <Board
--- 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/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,4 +1,6 @@
 import { Card } from "antd";
+import Dinero from "dinero.js";
+import _ from "lodash";
 import moment from "moment";
 import React from "react";
 import { connect } from "react-redux";
@@ -17,7 +19,7 @@ import {
 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,
      };
    }

@@ -64,7 +71,9 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
          bodyshop.scoreboard_target.dailyBodyTarget +
            bodyshop.scoreboard_target.dailyPaintTarget,
          val
-        ),
+        ) +
+          bodyshop.scoreboard_target.dailyBodyTarget +
+          bodyshop.scoreboard_target.dailyPaintTarget,
        1
      ),
      accHrs: _.round(
@@ -73,6 +82,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 +103,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 +131,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/shop-info/shop-info.rostatus.component.jsx
+++ b/client/src/components/shop-info/shop-info.rostatus.component.jsx
@@ -396,7 +396,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
  );
 }

-const ColorPicker = ({ value, onChange, style, ...restProps }) => {
+export const ColorPicker = ({ value, onChange, style, ...restProps }) => {
  const handleChange = (color) => {
    if (onChange) onChange(color.rgb);
  };
--- a/client/src/components/shop-info/shop-info.scheduling.component.jsx
+++ b/client/src/components/shop-info/shop-info.scheduling.component.jsx
@@ -15,6 +15,7 @@ import { useTranslation } from "react-i18next";
 import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-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 { ColorPicker } from "./shop-info.rostatus.component";

 export default function ShopInfoSchedulingComponent({ form }) {
  const { t } = useTranslation();
@@ -277,17 +278,50 @@ export default function ShopInfoSchedulingComponent({ form }) {
                      >
                        <InputNumber />
                      </Form.Item>
-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows
-                          move={move}
-                          index={index}
-                          total={fields.length}
-                        />
+
+                      <Space direction="horizontal">
+                        <Form.Item
+                          label={
+                            <Space>
+                              {t("bodyshop.fields.ssbuckets.color")}
+                              <Button
+                                size="small"
+                                onClick={() => {
+                                  form.setFieldValue([
+                                    "ssbuckets",
+                                    field.name,
+                                    "color",
+                                  ]);
+
+                                  form.setFields([
+                                    {
+                                      name: ["ssbuckets", field.name, "color"],
+                                      touched: true,
+                                    },
+                                  ]);
+                                }}
+                              >
+                                Reset
+                              </Button>
+                            </Space>
+                          }
+                          key={`${index}color`}
+                          name={[field.name, "color"]}
+                        >
+                          <ColorPicker />
+                        </Form.Item>
+                        <Space wrap>
+                          <DeleteFilled
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                          <FormListMoveArrows
+                            move={move}
+                            index={index}
+                            total={fields.length}
+                          />
+                        </Space>
                      </Space>
                    </LayoutFormRow>
                  </Form.Item>
--- 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"