From acd8984d5b992804c2fffd80dd746cef3ae6af59 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Thu, 23 Jul 2020 14:39:45 -0700
Subject: [PATCH] Minor random fixes

---
 .../chat-send-message.component.jsx           |   7 +-
 .../contract-status-select.component.jsx      |  14 +-
 .../currency-form-item.component.jsx          |   1 +
 .../email-form-item.component.jsx             |   1 +
 .../phone-form-item.component.jsx             |   9 +-
 .../reset-form-item.component.jsx             |   6 +-
 .../global-search/global-search.component.jsx |  47 +--
 .../components/header/header.component.jsx    | 161 ++++----
 .../jobs-available-new.component.jsx          |  52 +--
 .../jobs-available-supplement.component.jsx   |  27 +-
 .../shop-info/shop-info.component.jsx         | 357 +++++++++---------
 .../shop-info/shop-info.container.jsx         |   2 +
 ...p-info.responsibilitycenters.component.jsx |  31 +-
 client/src/graphql/jobs.queries.js            |   4 +-
 .../courtesy-car-create.page.container.jsx    |   2 +-
 .../pages/manage/manage.page.component.jsx    |  11 +-
 .../src/pages/manage/manage.page.styles.scss  |   6 +-
 client/src/utils/RenderTemplate.js            |   4 +-
 18 files changed, 389 insertions(+), 353 deletions(-)

diff --git a/client/src/components/chat-send-message/chat-send-message.component.jsx b/client/src/components/chat-send-message/chat-send-message.component.jsx
index f7c3a9ebd..810777688 100644
--- 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={
diff --git a/client/src/components/contract-status-select/contract-status-select.component.jsx b/client/src/components/contract-status-select/contract-status-select.component.jsx
index f622dafd0..a248a1220 100644
--- 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);
diff --git a/client/src/components/form-items-formatted/currency-form-item.component.jsx b/client/src/components/form-items-formatted/currency-form-item.component.jsx
index bf301d359..e0edbd355 100644
--- 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, "")}
diff --git a/client/src/components/form-items-formatted/email-form-item.component.jsx b/client/src/components/form-items-formatted/email-form-item.component.jsx
index 2874245bb..96e091923 100644
--- 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}`}>
diff --git a/client/src/components/form-items-formatted/phone-form-item.component.jsx b/client/src/components/form-items-formatted/phone-form-item.component.jsx
index 30638a00c..c25d79e93 100644
--- 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);
diff --git a/client/src/components/form-items-formatted/reset-form-item.component.jsx b/client/src/components/form-items-formatted/reset-form-item.component.jsx
index 54ef8e357..377be7b0e 100644
--- 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);
diff --git a/client/src/components/global-search/global-search.component.jsx b/client/src/components/global-search/global-search.component.jsx
index d0a800728..60b4ec82e 100644
--- 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>
   );
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index 12c3591cf..76258c5d9 100644
--- 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>
diff --git a/client/src/components/jobs-available-new/jobs-available-new.component.jsx b/client/src/components/jobs-available-new/jobs-available-new.component.jsx
index 7a91e4555..381866d7c 100644
--- 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}
diff --git a/client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx b/client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx
index 8b66447f5..aac9a0abc 100644
--- 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}
       />
diff --git a/client/src/components/shop-info/shop-info.component.jsx b/client/src/components/shop-info/shop-info.component.jsx
index 8154bd709..1a0f2d1ea 100644
--- 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"
diff --git a/client/src/components/shop-info/shop-info.container.jsx b/client/src/components/shop-info/shop-info.container.jsx
index 7d1f0cfa3..c1355c6c8 100644
--- 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}
     >
diff --git a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
index 22ba39867..b45fabae6 100644
--- 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>
diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js
index a911a53c0..0d907347d 100644
--- 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
     }
   }
 `;
diff --git 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
index a9bd1bdd7..552c22812 100644
--- 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>
   );
diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx
index 849a65d70..041984369 100644
--- 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>
   );
diff --git a/client/src/pages/manage/manage.page.styles.scss b/client/src/pages/manage/manage.page.styles.scss
index c52165882..3d1c7a378 100644
--- 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;
 }
 
diff --git a/client/src/utils/RenderTemplate.js b/client/src/utils/RenderTemplate.js
index 9aa11001f..dcae1d37c 100644
--- 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({