Minor random fixes

2020-07-23 14:39:45 -07:00
parent 8a4f0dda44
commit acd8984d5b
18 changed files with 389 additions and 353 deletions
--- a/client/src/components/chat-send-message/chat-send-message.component.jsx
+++ b/client/src/components/chat-send-message/chat-send-message.component.jsx
@@ -1,4 +1,4 @@
-import { LoadingOutlined } from "@ant-design/icons";
+import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
 import { Input, Spin } from "antd";
 import React, { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
@@ -52,12 +52,12 @@ function ChatSendMessageComponent({
  };

  return (
-    <div style={{ display: "flex " }}>
+    <div className="imex-flex-row">
      <Input.TextArea
+        className="imex-flex-row__margin imex-flex-row__grow"
        allowClear
        autoFocus
        ref={inputArea}
-        suffix={<span>a</span>}
        autoSize={{ minRows: 1, maxRows: 4 }}
        value={message}
        disabled={isSending}
@@ -68,6 +68,7 @@ function ChatSendMessageComponent({
          if (!!!event.shiftKey) handleEnter();
        }}
      />
+      <SendOutlined className="imex-flex-row__margin" onClick={handleEnter} />
      <Spin
        style={{ display: `${isSending ? "" : "none"}` }}
        indicator={
--- a/client/src/components/contract-status-select/contract-status-select.component.jsx
+++ b/client/src/components/contract-status-select/contract-status-select.component.jsx
@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, forwardRef } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";
 const { Option } = Select;

-const ContractStatusComponent = ({
-  value = "contracts.status.new",
-  onChange
-}) => {
+const ContractStatusComponent = (
+  { value = "contracts.status.new", onChange },
+  ref
+) => {
  const [option, setOption] = useState(value);
  const { t } = useTranslation();

@@ -20,7 +20,7 @@ const ContractStatusComponent = ({
    <Select
      value={option}
      style={{
-        width: 100
+        width: 100,
      }}
      onChange={setOption}
    >
@@ -32,4 +32,4 @@ const ContractStatusComponent = ({
    </Select>
  );
 };
-export default ContractStatusComponent;
+export default forwardRef(ContractStatusComponent);
--- a/client/src/components/form-items-formatted/currency-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/currency-form-item.component.jsx
@@ -4,6 +4,7 @@ function FormItemCurrency(props, ref) {
  return (
    <InputNumber
      {...props}
+      ref={ref}
      style={{ width: "initial" }}
      // formatter={(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
      // parser={(value) => value.replace(/\$\s?|(,*)/g, "")}
--- a/client/src/components/form-items-formatted/email-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/email-form-item.component.jsx
@@ -5,6 +5,7 @@ function FormItemEmail(props, ref) {
  return (
    <Input
      {...props}
+      ref={ref}
      addonAfter={
        props.defaultValue || props.value ? (
          <a href={`mailto:${props.defaultValue || props.value}`}>
--- a/client/src/components/form-items-formatted/phone-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/phone-form-item.component.jsx
@@ -1,14 +1,7 @@
 import React, { forwardRef } from "react";
 import NumberFormat from "react-number-format";
 function FormItemPhone(props, ref) {
-  return (
-    <NumberFormat
-      {...props}
-      
-      type="tel"
-      format="###-###-####"
-    />
-  );
+  return <NumberFormat {...props} ref={ref} type="tel" format="###-###-####" />;
 }

 export default forwardRef(FormItemPhone);
--- a/client/src/components/form-items-formatted/reset-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/reset-form-item.component.jsx
@@ -1,9 +1,9 @@
 import { Button } from "antd";
-import React from "react";
+import React, { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";

-export default function ResetForm({ resetFields }) {
+function ResetForm({ resetFields }) {
  const { t } = useTranslation();
  return (
    <AlertComponent
@@ -19,3 +19,5 @@ export default function ResetForm({ resetFields }) {
    />
  );
 }
+
+export default forwardRef(ResetForm);
--- a/client/src/components/global-search/global-search.component.jsx
+++ b/client/src/components/global-search/global-search.component.jsx
@@ -27,9 +27,10 @@ export default function GlobalSearch() {
        {title}
        <a
          style={{ float: "right" }}
-          href='https://www.google.com/search?q=antd'
-          target='_blank'
-          rel='noopener noreferrer'>
+          href="https://www.google.com/search?q=antd"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
          more
        </a>
      </span>
@@ -45,8 +46,8 @@ export default function GlobalSearch() {
              value: job.ro_number,
              label: (
                <Link to={`/manage/jobs/${job.id}`}>
-                  <div className='imex-flex-row'>
-                    <span className='imex-flex-row__margin-large'>
+                  <div className="imex-flex-row">
+                    <span className="imex-flex-row__margin-large">
                      <strong>
                        {job.ro_number
                          ? `${job.ro_number || ""} / ${job.est_number || ""}`
@@ -54,16 +55,16 @@ export default function GlobalSearch() {
                      </strong>
                    </span>

-                    <span className='imex-flex-row__margin-large'>{`${
+                    <span className="imex-flex-row__margin-large">{`${
                      job.ownr_fn || ""
                    } ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`}</span>
-                    <span className='imex-flex-row__margin-large'>{`${
+                    <span className="imex-flex-row__margin-large">{`${
                      job.v_model_yr || ""
                    } ${job.v_make_desc || ""} ${
                      job.v_model_desc || ""
                    }`}</span>
-                    <span className='imex-flex-row__margin-large'>{`${job.clm_no}`}</span>
-                    <span className='imex-flex-row__margin-large imex-flex-row__grow'>
+                    <span className="imex-flex-row__margin-large">{`${job.clm_no}`}</span>
+                    <span className="imex-flex-row__margin-large imex-flex-row__grow">
                      <CurrencyFormatter>{`${job.clm_total}`}</CurrencyFormatter>
                    </span>
                  </div>
@@ -81,8 +82,8 @@ export default function GlobalSearch() {
              }`,
              label: (
                <Link to={`/manage/owners/${owner.id}`}>
-                  <div className='imex-flex-row'>
-                    <span className='imex-flex-row__margin-large'>{`${
+                  <div className="imex-flex-row">
+                    <span className="imex-flex-row__margin-large">{`${
                      owner.ownr_fn || ""
                    } ${owner.ownr_ln || ""} ${owner.ownr_co_nm || ""}`}</span>
                  </div>
@@ -100,8 +101,8 @@ export default function GlobalSearch() {
              } ${vehicle.v_model_desc || ""}`,
              label: (
                <Link to={`/manage/vehicles/${vehicle.id}`}>
-                  <div className='imex-flex-row'>
-                    <span className='imex-flex-row__margin-large'>{`${
+                  <div className="imex-flex-row">
+                    <span className="imex-flex-row__margin-large">{`${
                      vehicle.v_model_yr || ""
                    } ${vehicle.v_make_desc || ""} ${
                      vehicle.v_model_desc || ""
@@ -119,11 +120,11 @@ export default function GlobalSearch() {
              value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`,
              label: (
                <Link to={`/manage/jobs/${payment.job.id}`}>
-                  <div className='imex-flex-row'>
-                    <span className='imex-flex-row__margin-large'>{`${payment.job.ro_number}`}</span>
-                    <span className='imex-flex-row__margin-large'>{`${payment.job.memo}`}</span>
-                    <span className='imex-flex-row__margin-large'>{`${payment.job.amount}`}</span>
-                    <span className='imex-flex-row__margin-large'>{`${payment.job.transactionid}`}</span>
+                  <div className="imex-flex-row">
+                    <span className="imex-flex-row__margin-large">{`${payment.job.ro_number}`}</span>
+                    <span className="imex-flex-row__margin-large">{`${payment.job.memo}`}</span>
+                    <span className="imex-flex-row__margin-large">{`${payment.job.amount}`}</span>
+                    <span className="imex-flex-row__margin-large">{`${payment.job.transactionid}`}</span>
                  </div>
                </Link>
              ),
@@ -133,16 +134,16 @@ export default function GlobalSearch() {
      ]
    : [];

-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
    <div>
      <AutoComplete
-        dropdownClassName='certain-category-search-dropdown'
        dropdownMatchSelectWidth={false}
-        style={{ width: 250 }}
-        options={options}>
-        <Input.Search size='large' loading={loading} onSearch={handleSearch} />
+        style={{ width: 200 }}
+        options={options}
+      >
+        <Input.Search loading={loading} onSearch={handleSearch} />
      </AutoComplete>
    </div>
  );
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -43,8 +43,9 @@ const logoSpan = {
  xs: {
    span: 0,
  },
+  sm: { span: 0 },
  md: {
-    span: 1,
+    span: 0,
  },
  lg: {
    span: 2,
@@ -52,12 +53,9 @@ const logoSpan = {
 };

 const menuSpan = {
-  xs: {
-    span: 24,
-  },
  md: {
-    span: 22,
-    offset: 1,
+    span: 24,
+    //offset: 1,
  },
  lg: {
    span: 21,
@@ -82,7 +80,7 @@ function Header({
      <Row>
        <Col {...logoSpan}>
          <img
-            className='header-shop-logo'
+            className="header-shop-logo"
            alt={bodyshop ? bodyshop.shopname : "ImEX Online Logo"}
            src={
              bodyshop && bodyshop.logo_img_path
@@ -93,16 +91,14 @@ function Header({
        </Col>
        <Col {...menuSpan}>
          <Menu
-            mode='horizontal'
-            theme='dark'
-            className='header-main-menu'
+            mode="horizontal"
+            theme="dark"
+            className="header-main-menu"
            selectedKeys={["home"]}
-            onClick={handleMenuClick}>
-            <Menu.Item>
-              <GlobalSearch />
-            </Menu.Item>
-            <Menu.Item key='home'>
-              <Link to='/manage'>
+            onClick={handleMenuClick}
+          >
+            <Menu.Item key="home">
+              <Link to="/manage">
                <HomeFilled />
                {t("menus.header.home")}
              </Link>
@@ -113,50 +109,51 @@ function Header({
                  <Icon component={FaCarCrash} />
                  <span>{t("menus.header.jobs")}</span>
                </span>
-              }>
-              <Menu.Item key='schedule'>
-                <Link to='/manage/schedule'>
+              }
+            >
+              <Menu.Item key="schedule">
+                <Link to="/manage/schedule">
                  <Icon component={FaCalendarAlt} />
                  {t("menus.header.schedule")}
                </Link>
              </Menu.Item>
-              <Menu.Item key='productionlist'>
-                <Link to='/manage/production/list'>
+              <Menu.Item key="productionlist">
+                <Link to="/manage/production/list">
                  <Icon component={FaCalendarAlt} />
                  {t("menus.header.productionlist")}
                </Link>
              </Menu.Item>
-              <Menu.Item key='productionboard'>
-                <Link to='/manage/production/board'>
+              <Menu.Item key="productionboard">
+                <Link to="/manage/production/board">
                  {t("menus.header.productionboard")}
                </Link>
              </Menu.Item>
-              <Menu.Item key='scoreboard'>
-                <Link to='/manage/scoreboard'>
+              <Menu.Item key="scoreboard">
+                <Link to="/manage/scoreboard">
                  {t("menus.header.scoreboard")}
                </Link>
              </Menu.Item>
-              <Menu.Item key='activejobs'>
-                <Link to='/manage/jobs'>{t("menus.header.activejobs")}</Link>
+              <Menu.Item key="activejobs">
+                <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
              </Menu.Item>
-              <Menu.Item key='alljobs'>
-                <Link to='/manage/jobs/all'>{t("menus.header.alljobs")}</Link>
+              <Menu.Item key="alljobs">
+                <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
              </Menu.Item>
-              <Menu.Item key='availablejobs'>
-                <Link to='/manage/available'>
+              <Menu.Item key="availablejobs">
+                <Link to="/manage/available">
                  {t("menus.header.availablejobs")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu title={t("menus.header.customers")}>
-              <Menu.Item key='owners'>
-                <Link to='/manage/owners'>
+              <Menu.Item key="owners">
+                <Link to="/manage/owners">
                  <TeamOutlined />
                  {t("menus.header.owners")}
                </Link>
              </Menu.Item>
-              <Menu.Item key='vehicles'>
-                <Link to='/manage/vehicles'>
+              <Menu.Item key="vehicles">
+                <Link to="/manage/vehicles">
                  <CarFilled />
                  {t("menus.header.vehicles")}
                </Link>
@@ -168,21 +165,22 @@ function Header({
                  <CarFilled />
                  <span>{t("menus.header.courtesycars")}</span>
                </span>
-              }>
-              <Menu.Item key='courtesycarsall'>
-                <Link to='/manage/courtesycars'>
+              }
+            >
+              <Menu.Item key="courtesycarsall">
+                <Link to="/manage/courtesycars">
                  <CarFilled />
                  {t("menus.header.courtesycars-all")}
                </Link>
              </Menu.Item>
-              <Menu.Item key='contracts'>
-                <Link to='/manage/courtesycars/contracts'>
+              <Menu.Item key="contracts">
+                <Link to="/manage/courtesycars/contracts">
                  <FileFilled />
                  {t("menus.header.courtesycars-contracts")}
                </Link>
              </Menu.Item>
-              <Menu.Item key='newcontract'>
-                <Link to='/manage/courtesycars/contracts/new'>
+              <Menu.Item key="newcontract">
+                <Link to="/manage/courtesycars/contracts/new">
                  <FileAddFilled />
                  {t("menus.header.courtesycars-newcontract")}
                </Link>
@@ -194,90 +192,97 @@ function Header({
                  <DollarCircleFilled />
                  <span>{t("menus.header.accounting")}</span>
                </span>
-              }>
+              }
+            >
              <Menu.Item
-                key='enterpayments'
+                key="enterpayments"
                onClick={() => {
                  setPaymentContext({
                    actions: {},
                    context: {},
                  });
-                }}>
+                }}
+              >
                <Icon component={FaCreditCard} />
                {t("menus.header.enterpayment")}
              </Menu.Item>

              <Menu.Item
-                key='enterinvoices'
+                key="enterinvoices"
                onClick={() => {
                  setInvoiceEnterContext({
                    actions: {},
                    context: {},
                  });
-                }}>
+                }}
+              >
                {t("menus.header.enterinvoices")}
              </Menu.Item>
-              <Menu.Item key='invoices'>
-                <Link to='/manage/invoices'>{t("menus.header.invoices")}</Link>
+              <Menu.Item key="invoices">
+                <Link to="/manage/invoices">{t("menus.header.invoices")}</Link>
              </Menu.Item>
-              <Menu.Item key='timetickets'>
-                <Link to='/manage/timetickets'>
+              <Menu.Item key="timetickets">
+                <Link to="/manage/timetickets">
                  {t("menus.header.timetickets")}
                </Link>
              </Menu.Item>
              <Menu.Item
-                key='entertimetickets'
+                key="entertimetickets"
                onClick={() => {
                  setTimeTicketContext({
                    actions: {},
                    context: {},
                  });
-                }}>
+                }}
+              >
                {t("menus.header.entertimeticket")}
              </Menu.Item>

              <Menu.SubMenu title={t("menus.header.export")}>
-                <Menu.Item key='receivables'>
-                  <Link to='/manage/accounting/receivables'>
+                <Menu.Item key="receivables">
+                  <Link to="/manage/accounting/receivables">
                    {t("menus.header.accounting-receivables")}
                  </Link>
                </Menu.Item>
-                <Menu.Item key='payables'>
-                  <Link to='/manage/accounting/payables'>
+                <Menu.Item key="payables">
+                  <Link to="/manage/accounting/payables">
                    {t("menus.header.accounting-payables")}
                  </Link>
                </Menu.Item>
-                <Menu.Item key='payments'>
-                  <Link to='/manage/accounting/payments'>
+                <Menu.Item key="payments">
+                  <Link to="/manage/accounting/payments">
                    {t("menus.header.accounting-payments")}
                  </Link>
                </Menu.Item>
              </Menu.SubMenu>

-              <Menu.Item key='allpayments'>
-                <Link to='/manage/payments'>
+              <Menu.Item key="allpayments">
+                <Link to="/manage/payments">
                  {t("menus.header.allpayments")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu title={t("menus.header.shop")}>
-              <Menu.Item key='shop'>
-                <Link to='/manage/shop'>{t("menus.header.shop_config")}</Link>
+              <Menu.Item key="shop">
+                <Link to="/manage/shop">{t("menus.header.shop_config")}</Link>
              </Menu.Item>
-              <Menu.Item key='shop-templates'>
-                <Link to='/manage/shop/templates'>
+              <Menu.Item key="shop-templates">
+                <Link to="/manage/shop/templates">
                  {t("menus.header.shop_templates")}
                </Link>
              </Menu.Item>
-              <Menu.Item key='shop-vendors'>
-                <Link to='/manage/shop/vendors'>
+              <Menu.Item key="shop-vendors">
+                <Link to="/manage/shop/vendors">
                  {t("menus.header.shop_vendors")}
                </Link>
              </Menu.Item>
-              <Menu.Item key='shop-csi'>
-                <Link to='/manage/shop/csi'>{t("menus.header.shop_csi")}</Link>
+              <Menu.Item key="shop-csi">
+                <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
              </Menu.Item>
            </Menu.SubMenu>
+            <Menu.Item>
+              <GlobalSearch />
+            </Menu.Item>
            <Menu.SubMenu
              title={
                <div>
@@ -300,17 +305,18 @@ function Header({

                  {currentUser.displayName || t("general.labels.unknown")}
                </div>
-              }>
+              }
+            >
              <Menu.Item danger onClick={() => signOutStart()}>
                {t("user.actions.signout")}
              </Menu.Item>
-              <Menu.Item key='shiftclock'>
-                <Link to='/manage/shiftclock'>
+              <Menu.Item key="shiftclock">
+                <Link to="/manage/shiftclock">
                  {t("menus.header.shiftclock")}
                </Link>
              </Menu.Item>
              <Menu.Item>
-                <Link to='/manage/profile'>
+                <Link to="/manage/profile">
                  {t("menus.currentuser.profile")}
                </Link>
              </Menu.Item>
@@ -320,14 +326,15 @@ function Header({
                    <GlobalOutlined />
                    <span>{t("menus.currentuser.languageselector")}</span>
                  </span>
-                }>
-                <Menu.Item actiontype='lang-select' key='en-US'>
+                }
+              >
+                <Menu.Item actiontype="lang-select" key="en-US">
                  {t("general.languages.english")}
                </Menu.Item>
-                <Menu.Item actiontype='lang-select' key='fr-CA'>
+                <Menu.Item actiontype="lang-select" key="fr-CA">
                  {t("general.languages.french")}
                </Menu.Item>
-                <Menu.Item actiontype='lang-select' key='es-MX'>
+                <Menu.Item actiontype="lang-select" key="es-MX">
                  {t("general.languages.spanish")}
                </Menu.Item>
              </Menu.SubMenu>
--- a/client/src/components/jobs-available-new/jobs-available-new.component.jsx
+++ b/client/src/components/jobs-available-new/jobs-available-new.component.jsx
@@ -1,4 +1,8 @@
-import { DeleteFilled, PlusCircleFilled, SyncOutlined } from "@ant-design/icons";
+import {
+  DeleteFilled,
+  PlusCircleFilled,
+  SyncOutlined,
+} from "@ant-design/icons";
 import { Button, notification, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -20,13 +24,13 @@ export default function JobsAvailableComponent({
  selectedOwner,
  setSelectedOwner,
  loadEstData,
-  estData
+  estData,
 }) {
  const { t } = useTranslation();

  const [state, setState] = useState({
    sortedInfo: {},
-    filteredInfo: { text: "" }
+    filteredInfo: { text: "" },
  });

  const handleTableChange = (pagination, filters, sorter) => {
@@ -43,7 +47,7 @@ export default function JobsAvailableComponent({
      // filteredValue: state.filteredInfo.text || null,
      sorter: (a, b) => alphaSort(a, b),
      sortOrder:
-        state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order,
    },
    {
      title: t("jobs.fields.owner"),
@@ -53,7 +57,7 @@ export default function JobsAvailableComponent({
      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
      //width: "25%",
      sortOrder:
-        state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order,
    },
    {
      title: t("jobs.fields.vehicle"),
@@ -61,7 +65,7 @@ export default function JobsAvailableComponent({
      key: "vehicle_info",
      sorter: (a, b) => alphaSort(a.vehicle_info, b.vehicle_info),
      sortOrder:
-        state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order,
      //ellipsis: true
    },
    {
@@ -70,7 +74,7 @@ export default function JobsAvailableComponent({
      key: "clm_no",
      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
      sortOrder:
-        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
      //width: "12%",
      //ellipsis: true
    },
@@ -83,7 +87,7 @@ export default function JobsAvailableComponent({
        state.sortedInfo.columnKey === "clm_amt" && state.sortedInfo.order,
      render: (text, record) => (
        <CurrencyFormatter>{record.clm_amt}</CurrencyFormatter>
-      )
+      ),
      //width: "12%",
      //ellipsis: true
    },
@@ -93,7 +97,7 @@ export default function JobsAvailableComponent({
      key: "uploaded_by",
      sorter: (a, b) => alphaSort(a.uploaded_by, b.uploaded_by),
      sortOrder:
-        state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order,
      //width: "12%",
      //ellipsis: true
    },
@@ -106,7 +110,7 @@ export default function JobsAvailableComponent({
        state.sortedInfo.columnKey === "updated_at" && state.sortedInfo.order,
      render: (text, record) => (
        <DateTimeFormatter>{record.updated_at}</DateTimeFormatter>
-      )
+      ),
      //width: "12%",
      //ellipsis: true
    },
@@ -117,9 +121,9 @@ export default function JobsAvailableComponent({
        <span>
          <Button
            onClick={() => {
-              deleteJob({ variables: { id: record.id } }).then(r => {
+              deleteJob({ variables: { id: record.id } }).then((r) => {
                notification["success"]({
-                  message: t("jobs.successes.deleted")
+                  message: t("jobs.successes.deleted"),
                });
                refetch();
              });
@@ -136,10 +140,10 @@ export default function JobsAvailableComponent({
            <PlusCircleFilled />
          </Button>
        </span>
-      )
+      ),
      //width: "12%",
      //ellipsis: true
-    }
+    },
  ];

  const owner =
@@ -169,9 +173,12 @@ export default function JobsAvailableComponent({
        loading={loading}
        title={() => {
          return (
-            <div>
-              <strong>{t("jobs.labels.availablenew")}</strong>
+            <div className="imex-flex-row">
+              <strong className="imex-flex-row__margin">
+                {t("jobs.labels.availablenew")}
+              </strong>
              <Button
+                className="imex-flex-row__margin"
                onClick={() => {
                  refetch();
                }}
@@ -179,19 +186,20 @@ export default function JobsAvailableComponent({
                <SyncOutlined />
              </Button>
              <Button
+                className="imex-flex-row__margin"
                onClick={() => {
                  deleteAllNewJobs()
-                    .then(r => {
+                    .then((r) => {
                      notification["success"]({
                        message: t("jobs.successes.all_deleted", {
-                          count: r.data.delete_available_jobs.affected_rows
-                        })
+                          count: r.data.delete_available_jobs.affected_rows,
+                        }),
                      });
                      refetch();
                    })
-                    .catch(r => {
+                    .catch((r) => {
                      notification["error"]({
-                        message: t("jobs.errors.deleted") + " " + r.message
+                        message: t("jobs.errors.deleted") + " " + r.message,
                      });
                    });
                }}
@@ -203,7 +211,7 @@ export default function JobsAvailableComponent({
        }}
        size="small"
        pagination={{ position: "top" }}
-        columns={columns.map(item => ({ ...item }))}
+        columns={columns.map((item) => ({ ...item }))}
        rowKey="id"
        dataSource={data && data.available_jobs}
        onChange={handleTableChange}
--- a/client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx
+++ b/client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx
@@ -141,7 +141,8 @@ export default function JobsAvailableSupplementComponent({
                });
                refetch();
              });
-            }}>
+            }}
+          >
            <DeleteFilled />
          </Button>
          <Button
@@ -149,7 +150,8 @@ export default function JobsAvailableSupplementComponent({
              loadEstData({ variables: { id: record.id } });
              modalSearchState[1](record.clm_no);
              setModalVisible(true);
-            }}>
+            }}
+          >
            <PlusCircleFilled />
          </Button>
        </span>
@@ -191,22 +193,31 @@ export default function JobsAvailableSupplementComponent({
        loading={loading}
        title={() => {
          return (
-            <div>
-              <strong>{t("jobs.labels.availablesupplements")}</strong>
+            <div className="imex-flex-row">
+              <strong className="imex-flex-row__margin">
+                {t("jobs.labels.availablesupplements")}
+              </strong>
              <Button
+                className="imex-flex-row__margin"
                onClick={() => {
                  refetch();
-                }}>
+                }}
+              >
                <SyncOutlined />
              </Button>
-              <Button onClick={handleDeleteAll}>Delete All</Button>
+              <Button
+                className="imex-flex-row__margin"
+                onClick={handleDeleteAll}
+              >
+                Delete All
+              </Button>
            </div>
          );
        }}
-        size='small'
+        size="small"
        pagination={{ position: "top" }}
        columns={columns}
-        rowKey='id'
+        rowKey="id"
        dataSource={data && data.available_jobs}
        onChange={handleTableChange}
      />
--- a/client/src/components/shop-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -14,6 +14,7 @@ import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
 import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
 import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
 import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";

 export default function ShopInfoComponent({ form }) {
  const { t } = useTranslation();
@@ -24,171 +25,191 @@ export default function ShopInfoComponent({ form }) {
      </Button>
      <Collapse defaultActiveKey="shopinfo">
        <Collapse.Panel key="shopinfo" header={t("bodyshop.labels.shopinfo")}>
-          <Form.Item label={t("bodyshop.fields.shopname")} name="shopname">
-            <Input />
-          </Form.Item>
-          <Form.Item label={t("bodyshop.fields.address1")} name="address1">
-            <Input />
-          </Form.Item>
+          <LayoutFormRow>
+            <Form.Item label={t("bodyshop.fields.shopname")} name="shopname">
+              <Input />
+            </Form.Item>
+            <Form.Item label={t("bodyshop.fields.address1")} name="address1">
+              <Input />
+            </Form.Item>
+            <Form.Item label={t("bodyshop.fields.address2")} name="address2">
+              <Input />
+            </Form.Item>
+            <Form.Item label={t("bodyshop.fields.city")} name="city">
+              <Input />
+            </Form.Item>
+            <Form.Item label={t("bodyshop.fields.state")} name="state">
+              <Input />
+            </Form.Item>
+            <Form.Item label={t("bodyshop.fields.zip_post")} name="zip_post">
+              <Input />
+            </Form.Item>
+          </LayoutFormRow>
+          <LayoutFormRow>
+            <Form.Item label={t("bodyshop.fields.country")} name="country">
+              <Input />
+            </Form.Item>
+            <Form.Item label={t("bodyshop.fields.email")} name="email">
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.fields.federal_tax_id")}
+              name="federal_tax_id"
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.fields.insurance_vendor_id")}
+              name="insurance_vendor_id"
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.fields.logo_img_path")}
+              name="logo_img_path"
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.fields.state_tax_id")}
+              name="state_tax_id"
+            >
+              <Input />
+            </Form.Item>
+          </LayoutFormRow>
+          <LayoutFormRow>
+            <Form.Item
+              label={t("bodyshop.fields.invoice_federal_tax_rate")}
+              name={["invoice_tax_rates", "federal_tax_rate"]}
+            >
+              <InputNumber />
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.fields.invoice_state_tax_rate")}
+              name={["invoice_tax_rates", "state_tax_rate"]}
+            >
+              <InputNumber />
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.fields.invoice_local_tax_rate")}
+              name={["invoice_tax_rates", "local_tax_rate"]}
+            >
+              <InputNumber />
+            </Form.Item>

-          <Form.Item label={t("bodyshop.fields.address2")} name="address2">
-            <Input />
-          </Form.Item>
-          <Form.Item label={t("bodyshop.fields.city")} name="city">
-            <Input />
-          </Form.Item>
-          <Form.Item label={t("bodyshop.fields.state")} name="state">
-            <Input />
-          </Form.Item>
-          <Form.Item label={t("bodyshop.fields.zip_post")} name="zip_post">
-            <Input />
-          </Form.Item>
-          <Form.Item label={t("bodyshop.fields.country")} name="country">
-            <Input />
-          </Form.Item>
-          <Form.Item label={t("bodyshop.fields.email")} name="email">
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.federal_tax_id")}
-            name="federal_tax_id"
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.insurance_vendor_id")}
-            name="insurance_vendor_id"
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.logo_img_path")}
-            name="logo_img_path"
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.state_tax_id")}
-            name="state_tax_id"
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.invoice_federal_tax_rate")}
-            name={["invoice_tax_rates", "federal_tax_rate"]}
-          >
-            <InputNumber />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.invoice_state_tax_rate")}
-            name={["invoice_tax_rates", "state_tax_rate"]}
-          >
-            <InputNumber />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.invoice_local_tax_rate")}
-            name={["invoice_tax_rates", "local_tax_rate"]}
-          >
-            <InputNumber />
-          </Form.Item>
+            <Form.Item
+              label={t("bodyshop.fields.appt_length")}
+              name={"appt_length"}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <InputNumber min={15} precision={0} />
+            </Form.Item>
+          </LayoutFormRow>
+          <LayoutFormRow>
+            <Form.Item
+              label={t("bodyshop.fields.dailypainttarget")}
+              name={["scoreboard_target", "dailyPaintTarget"]}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <InputNumber min={0} precision={0} />
+            </Form.Item>

-          <Form.Item
-            label={t("bodyshop.fields.appt_length")}
-            name={"appt_length"}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <InputNumber min={15} precisio={0} />
-          </Form.Item>
+            <Form.Item
+              label={t("bodyshop.fields.dailybodytarget")}
+              name={["scoreboard_target", "dailyBodyTarget"]}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <InputNumber min={0} precision={0} />
+            </Form.Item>

-          <Form.Item
-            label={t("bodyshop.fields.dailypainttarget")}
-            name={["scoreboard_target", "dailyPaintTarget"]}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <InputNumber min={0} precisio={0} />
-          </Form.Item>
-
-          <Form.Item
-            label={t("bodyshop.fields.dailybodytarget")}
-            name={["scoreboard_target", "dailyBodyTarget"]}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <InputNumber min={0} precisio={0} />
-          </Form.Item>
-
-          <Form.Item
-            label={t("bodyshop.fields.lastnumberworkingdays")}
-            name={["scoreboard_target", "lastNumberWorkingDays"]}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <InputNumber min={0} max={12} precisio={0} />
-          </Form.Item>
-
-          <Form.Item
-            label={t("bodyshop.labels.accountingtiers")}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-            name={["accountingconfig", "tiers"]}
-          >
-            <Radio.Group>
-              <Radio value={2}>2</Radio>
-              <Radio value={3}>3</Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("bodyshop.labels.2tiersetup")}
-                  shouldUpdate
-                  rules={[
-                    {
-                      required:
-                        form.getFieldValue(["accountingconfig", "tiers"]) === 2,
-                      message: t("general.validation.required"),
-                    },
-                  ]}
-                  name={["accountingconfig", "twotierpref"]}
-                >
-                  <Radio.Group
-                    disabled={
-                      form.getFieldValue(["accountingconfig", "tiers"]) === 3
-                    }
+            <Form.Item
+              label={t("bodyshop.fields.lastnumberworkingdays")}
+              name={["scoreboard_target", "lastNumberWorkingDays"]}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <InputNumber min={0} max={12} precision={0} />
+            </Form.Item>
+            <Form.Item
+              name={["md_referral_sources"]}
+              label={t("bodyshop.fields.md_referral_sources")}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                  type: "array",
+                },
+              ]}
+            >
+              <Select mode="tags" />
+            </Form.Item>
+            <Form.Item
+              label={t("bodyshop.labels.accountingtiers")}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                },
+              ]}
+              name={["accountingconfig", "tiers"]}
+            >
+              <Radio.Group>
+                <Radio value={2}>2</Radio>
+                <Radio value={3}>3</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item shouldUpdate>
+              {() => {
+                return (
+                  <Form.Item
+                    label={t("bodyshop.labels.2tiersetup")}
+                    shouldUpdate
+                    rules={[
+                      {
+                        required:
+                          form.getFieldValue(["accountingconfig", "tiers"]) ===
+                          2,
+                        message: t("general.validation.required"),
+                      },
+                    ]}
+                    name={["accountingconfig", "twotierpref"]}
                  >
-                    <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
-                    <Radio value="source">
-                      {t("bodyshop.labels.2tiersource")}
-                    </Radio>
-                  </Radio.Group>
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
-
+                    <Radio.Group
+                      disabled={
+                        form.getFieldValue(["accountingconfig", "tiers"]) === 3
+                      }
+                    >
+                      <Radio value="name">
+                        {t("bodyshop.labels.2tiername")}
+                      </Radio>
+                      <Radio value="source">
+                        {t("bodyshop.labels.2tiersource")}
+                      </Radio>
+                    </Radio.Group>
+                  </Form.Item>
+                );
+              }}
+            </Form.Item>
+          </LayoutFormRow>
          <Form.List name={["md_messaging_presets"]}>
            {(fields, { add, remove }) => {
              return (
@@ -250,20 +271,6 @@ export default function ShopInfoComponent({ form }) {
              );
            }}
          </Form.List>
-
-          <Form.Item
-            name={["md_referral_sources"]}
-            label={t("bodyshop.fields.md_referral_sources")}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-                type: "array",
-              },
-            ]}
-          >
-            <Select mode="tags" />
-          </Form.Item>
        </Collapse.Panel>
        <Collapse.Panel
          key="roStatus"
--- a/client/src/components/shop-info/shop-info.container.jsx
+++ b/client/src/components/shop-info/shop-info.container.jsx
@@ -43,6 +43,8 @@ export default function ShopInfoContainer() {
  return (
    <Form
      form={form}
+      layout='vertical'
+      autoComplete='new-password'
      onFinish={handleFinish}
      initialValues={data ? data.bodyshops[0] : null}
    >
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
@@ -3,6 +3,7 @@ import { Button, Form, Input, Select, InputNumber } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 //TODO Fix up styles.
 const SelectorDiv = styled.div`
  .ant-form-item .ant-select {
@@ -53,7 +54,7 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                    <div style={{ display: "flex" }}>
+                    <LayoutFormRow>
                      <Form.Item
                        style={{ padding: 0, margin: 2 }}
                        label={t("bodyshop.fields.responsibilitycenter")}
@@ -137,7 +138,7 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
                          remove(field.name);
                        }}
                      />
-                    </div>
+                    </LayoutFormRow>
                  </Form.Item>
                ))}
                <Form.Item>
@@ -164,7 +165,7 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                    <div style={{ display: "flex" }}>
+                    <LayoutFormRow>
                      <Form.Item
                        style={{ padding: 0, margin: 2 }}
                        label={t("bodyshop.fields.responsibilitycenter")}
@@ -248,7 +249,7 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
                          remove(field.name);
                        }}
                      />
-                    </div>
+                    </LayoutFormRow>
                  </Form.Item>
                ))}
                <Form.Item>
@@ -1066,8 +1067,8 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
            </Select>
          </Form.Item>
        </SelectorDiv>
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          <div style={{ display: "flex" }}>
+        <div>
+          <LayoutFormRow>
            <Form.Item
              label={t("bodyshop.fields.responsibilitycenters.federal_tax")}
              rules={[
@@ -1160,8 +1161,8 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
            >
              <InputNumber precision={2} />
            </Form.Item>
-          </div>
-          <div style={{ display: "flex" }}>
+          </LayoutFormRow>
+          <LayoutFormRow>
            <Form.Item
              label={t("bodyshop.fields.responsibilitycenters.state_tax")}
              rules={[
@@ -1254,8 +1255,8 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
            >
              <InputNumber precision={2} />
            </Form.Item>
-          </div>
-          <div style={{ display: "flex" }}>
+          </LayoutFormRow>
+          <LayoutFormRow>
            <Form.Item
              label={t("bodyshop.fields.responsibilitycenters.local_tax")}
              rules={[
@@ -1348,9 +1349,9 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
            >
              <InputNumber precision={2} />
            </Form.Item>
-          </div>
+          </LayoutFormRow>

-          <div style={{ display: "flex" }}>
+          <LayoutFormRow>
            <Form.Item
              label={t("bodyshop.fields.responsibilitycenters.ar")}
              rules={[
@@ -1411,8 +1412,8 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
            >
              <Input />
            </Form.Item>
-          </div>
-          <div style={{ display: "flex" }}>
+          </LayoutFormRow>
+          <LayoutFormRow>
            <Form.Item
              label={t("bodyshop.fields.responsibilitycenters.ar")}
              rules={[
@@ -1473,7 +1474,7 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
            >
              <Input />
            </Form.Item>
-          </div>
+          </LayoutFormRow>
        </div>
      </div>
    </div>
--- a/client/src/graphql/jobs.queries.js
+++ b/client/src/graphql/jobs.queries.js
@@ -887,9 +887,9 @@ export const QUERY_ALL_JOB_FIELDS = gql`
        status
        tax_part
        unq_seq
-        employee_body
-        employee_refinish
      }
+      employee_body
+      employee_refinish
    }
  }
 `;
--- a/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
+++ b/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
@@ -47,7 +47,7 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs }) {
  }, [t, setBreadcrumbs]);

  return (
-    <Form form={form} autoComplete="no" onFinish={handleFinish}>
+    <Form form={form} autoComplete="new-password" onFinish={handleFinish}>
      <CourtesyCarCreateComponent />
    </Form>
  );
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -151,10 +151,10 @@ export function Manage({ match, conflict }) {
  }, [t]);

  return (
-    <Layout className='layout-container'>
+    <Layout className="layout-container">
      <HeaderContainer />
-      <BreadCrumbs />
-      <Content className='content-container'>
+
+      <Content className="content-container">
        <FcmNotification />
        <ErrorBoundary>
          {conflict ? (
@@ -163,7 +163,9 @@ export function Manage({ match, conflict }) {
            <Suspense
              fallback={
                <LoadingSpinner message={t("general.labels.loadingapp")} />
-              }>
+              }
+            >
+              <BreadCrumbs />
              <EnterInvoiceModalContainer />
              <JobCostingModal />
              <EmailOverlayContainer />
@@ -347,7 +349,6 @@ export function Manage({ match, conflict }) {
        </ErrorBoundary>
        <ChatAffixContainer />
        <BackTop />
-        <Layout.Footer> Some footer</Layout.Footer>
      </Content>
    </Layout>
  );
--- a/client/src/pages/manage/manage.page.styles.scss
+++ b/client/src/pages/manage/manage.page.styles.scss
@@ -1,8 +1,8 @@
 .content-container {
  overflow-y: auto;
-  margin: 0rem 1.5rem;
-  padding: 0.5rem 1.5rem;
-  border-radius: 12px;
+  margin: 1rem 1rem 0rem 1rem;
+  padding: 0.25rem 1rem 0rem 1rem;
+  border-radius: 4px;
  background: #fff;
 }

--- a/client/src/utils/RenderTemplate.js
+++ b/client/src/utils/RenderTemplate.js
@@ -21,8 +21,8 @@ export default async function RenderTemplate(templateObject, bodyshop) {
    console.log("templateToUse", templateToUse);
  } else {
    //No template found.Uh oh.
-    alert("Template key does not exist.");
-    throw new Error("Template key does not exist.");
+    alert("Error: Template key does not exist.");
+    //throw new Error("Template key does not exist.");
  }

  const { data: contextData } = await client.query({