From e85be1c1737b15df331a75425d21eb6d1910adc6 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 31 Mar 2021 11:02:11 -0700
Subject: [PATCH 1/7] IO-813 Calculation updates to include adjustments

---
 .../job-totals-table.component.jsx            |  6 +-
 .../job-totals.table.other.component.jsx      | 26 ++++++-
 server/accounting/qbxml/qbxml-receivables.js  |  2 +-
 server/job/job-totals.js                      | 69 +++++++++++--------
 4 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/client/src/components/job-totals-table/job-totals-table.component.jsx b/client/src/components/job-totals-table/job-totals-table.component.jsx
index ab660b784..6262e2835 100644
--- a/client/src/components/job-totals-table/job-totals-table.component.jsx
+++ b/client/src/components/job-totals-table/job-totals-table.component.jsx
@@ -46,13 +46,13 @@ export function JobsTotalsTableComponent({ jobRO, job }) {
           </Card>
         </Col>
         <Col {...colSpan}>
-          <Row gutter={[0, 32]}>
-            <Col span={24}>
+          <Row gutter={[16, 16]}>
+            <Col sm={24} md={12}>
               <Card title={t("jobs.labels.partstotal")}>
                 <JobTotalsTableParts job={job} />
               </Card>
             </Col>
-            <Col span={24}>
+            <Col sm={24} md={12}>
               <Card title={t("jobs.labels.othertotal")}>
                 <JobTotalsTableOther job={job} />
               </Card>
diff --git a/client/src/components/job-totals-table/job-totals.table.other.component.jsx b/client/src/components/job-totals-table/job-totals.table.other.component.jsx
index c3160e866..24f322f71 100644
--- a/client/src/components/job-totals-table/job-totals.table.other.component.jsx
+++ b/client/src/components/job-totals-table/job-totals.table.other.component.jsx
@@ -17,9 +17,29 @@ export default function JobTotalsTableOther({ job }) {
         key: t("jobs.labels.subletstotal"),
         total: job.job_totals.parts.sublets.total,
       },
+      ...((job.job_totals.additional.additionalCostItems &&
+        job.job_totals.additional.additionalCostItems.map((i) => {
+          return {
+            key: i.key,
+            total: i.total,
+          };
+        })) ||
+        []),
       {
-        key: t("jobs.labels.additionaltotal"),
-        total: job.job_totals.additional,
+        key: t("jobs.fields.adjustment_bottom_line"),
+        total: job.job_totals.additional.adjustments,
+      },
+      {
+        key: t("jobs.fields.towing"),
+        total: job.job_totals.additional.towing,
+      },
+      {
+        key: t("jobs.fields.storage"),
+        total: job.job_totals.additional.storage,
+      },
+      {
+        key: t("jobs.fields.pvrt"),
+        total: job.job_totals.additional.pvrt,
       },
     ];
   }, [job.job_totals, t]);
@@ -67,7 +87,7 @@ export default function JobTotalsTableOther({ job }) {
 
           <Table.Summary.Cell>
             <strong>
-              {Dinero(job.job_totals.parts.parts.total).toFormat()}
+              {Dinero(job.job_totals.additional.total).toFormat()}
             </strong>
           </Table.Summary.Cell>
         </Table.Summary.Row>
diff --git a/server/accounting/qbxml/qbxml-receivables.js b/server/accounting/qbxml/qbxml-receivables.js
index bc5cc2eb4..cb1c6a6e6 100644
--- a/server/accounting/qbxml/qbxml-receivables.js
+++ b/server/accounting/qbxml/qbxml-receivables.js
@@ -199,7 +199,7 @@ const generateInvoiceQbxml = (
         (i) => jobline.profitcenter_part.toLowerCase() === i.name.toLowerCase()
       );
 
-      if (!!!account) {
+      if (!account) {
         throw new Error(
           `A matching account does not exist for the allocation. Center: ${center}`
         );
diff --git a/server/job/job-totals.js b/server/job/job-totals.js
index f17a32e5c..06c5674a3 100644
--- a/server/job/job-totals.js
+++ b/server/job/job-totals.js
@@ -279,31 +279,41 @@ function IsAdditionalCost(jobLine) {
 }
 
 function CalculateAdditional(job) {
-  let ret = job.joblines
+  let ret = {
+    additionalCosts: null,
+    additionalCostItems: [],
+    adjustments: null,
+    towing: null,
+    storage: null,
+    pvrt: null,
+    total: null,
+  };
+  ret.additionalCosts = job.joblines
     .filter((jl) => !jl.removed && IsAdditionalCost(jl))
     .reduce((acc, val) => {
-      return acc.add(
-        Dinero({ amount: Math.round((val.act_price || 0) * 100) }).multiply(
-          val.part_qty || 1
-        )
-      );
+      const lineValue = Dinero({
+        amount: Math.round((val.act_price || 0) * 100),
+      }).multiply(val.part_qty || 1);
+      ret.additionalCostItems.push({ key: val.line_desc, total: lineValue });
+      return acc.add(lineValue);
     }, Dinero());
-  ret = ret
-    .add(
-      Dinero({
-        amount: Math.round((job.towing_payable || 0) * 100),
-      })
-    )
-    .add(
-      Dinero({
-        amount: Math.round((job.storage_payable || 0) * 100),
-      })
-    )
-    .add(
-      Dinero({
-        amount: Math.round((job.ca_bc_pvrt || 0) * 100),
-      })
-    );
+  ret.adjustments = Dinero({
+    amount: Math.round((job.adjustment_bottom_line || 0) * 100),
+  });
+  ret.towing = Dinero({
+    amount: Math.round((job.towing_payable || 0) * 100),
+  });
+  ret.storage = Dinero({
+    amount: Math.round((job.storage_payable || 0) * 100),
+  });
+  ret.pvrt = Dinero({
+    amount: Math.round((job.ca_bc_pvrt || 0) * 100),
+  });
+  ret.total = ret.additionalCosts
+    .add(ret.adjustments) //IO-813 Adjustment takes care of GST & PST at labor rate.
+    .add(ret.towing)
+    .add(ret.storage)
+    .add(ret.pvrt);
 
   return ret;
 }
@@ -312,7 +322,7 @@ function CalculateTaxesTotals(job, otherTotals) {
   const subtotal = otherTotals.parts.parts.subtotal
     .add(otherTotals.parts.sublets.subtotal)
     .add(otherTotals.rates.subtotal) //No longer using just rates subtotal to include mapa/mash.
-    .add(otherTotals.additional);
+    .add(otherTotals.additional.total);
   // .add(Dinero({ amount: (job.towing_payable || 0) * 100 }))
   // .add(Dinero({ amount: (job.storage_payable || 0) * 100 }));
 
@@ -371,14 +381,15 @@ function CalculateTaxesTotals(job, otherTotals) {
         otherTotals.rates.subtotal.percentage((job.tax_lbr_rt || 0) * 100) // THis is currently using the lbr tax rate from PFH not PFL.
       )
       .add(
-        Dinero({
-          amount: Math.round((job.towing_payable || 0) * 100),
-        }).percentage((job.tax_tow_rt || 0) * 100)
+        otherTotals.additional.adjustments.percentage(
+          (job.tax_lbr_rt || 0) * 100
+        )
       )
       .add(
-        Dinero({
-          amount: Math.round((job.storage_payable || 0) * 100),
-        }).percentage((job.tax_str_rt || 0) * 100)
+        otherTotals.additional.towing.percentage((job.tax_tow_rt || 0) * 100)
+      )
+      .add(
+        otherTotals.additional.storage.percentage((job.tax_str_rt || 0) * 100)
       )
       .add(additionalItemsTax),
     local_tax: subtotal.percentage((job.local_tax_rate || 0) * 100),

From 315b816e50656e926e3b5a0f53c89474d3c0115b Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 31 Mar 2021 11:26:22 -0700
Subject: [PATCH 2/7] Job Totals Calc Updates

---
 .../job-totals.table.other.component.jsx      | 43 +++++++++-------
 .../jobs-detail-rates.component.jsx           | 51 ++++++++++---------
 .../layout-form-row.component.jsx             |  8 +--
 3 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/client/src/components/job-totals-table/job-totals.table.other.component.jsx b/client/src/components/job-totals-table/job-totals.table.other.component.jsx
index 24f322f71..00925007c 100644
--- a/client/src/components/job-totals-table/job-totals.table.other.component.jsx
+++ b/client/src/components/job-totals-table/job-totals.table.other.component.jsx
@@ -13,10 +13,6 @@ export default function JobTotalsTableOther({ job }) {
 
   const data = useMemo(() => {
     return [
-      {
-        key: t("jobs.labels.subletstotal"),
-        total: job.job_totals.parts.sublets.total,
-      },
       ...((job.job_totals.additional.additionalCostItems &&
         job.job_totals.additional.additionalCostItems.map((i) => {
           return {
@@ -30,15 +26,15 @@ export default function JobTotalsTableOther({ job }) {
         total: job.job_totals.additional.adjustments,
       },
       {
-        key: t("jobs.fields.towing"),
+        key: t("jobs.fields.towing_payable"),
         total: job.job_totals.additional.towing,
       },
       {
-        key: t("jobs.fields.storage"),
+        key: t("jobs.fields.storage_payable"),
         total: job.job_totals.additional.storage,
       },
       {
-        key: t("jobs.fields.pvrt"),
+        key: t("jobs.fields.ca_bc_pvrt"),
         total: job.job_totals.additional.pvrt,
       },
     ];
@@ -80,17 +76,30 @@ export default function JobTotalsTableOther({ job }) {
         x: true,
       }}
       summary={() => (
-        <Table.Summary.Row>
-          <Table.Summary.Cell>
-            {t("jobs.labels.additionaltotal")}
-          </Table.Summary.Cell>
+        <>
+          <Table.Summary.Row>
+            <Table.Summary.Cell>
+              {t("jobs.labels.additionaltotal")}
+            </Table.Summary.Cell>
 
-          <Table.Summary.Cell>
-            <strong>
-              {Dinero(job.job_totals.additional.total).toFormat()}
-            </strong>
-          </Table.Summary.Cell>
-        </Table.Summary.Row>
+            <Table.Summary.Cell>
+              <strong>
+                {Dinero(job.job_totals.additional.total).toFormat()}
+              </strong>
+            </Table.Summary.Cell>
+          </Table.Summary.Row>
+          <Table.Summary.Row>
+            <Table.Summary.Cell>
+              {t("jobs.labels.subletstotal")}
+            </Table.Summary.Cell>
+
+            <Table.Summary.Cell>
+              <strong>
+                {Dinero(job.job_totals.parts.sublets.total).toFormat()}
+              </strong>
+            </Table.Summary.Cell>
+          </Table.Summary.Row>
+        </>
       )}
     />
   );
diff --git a/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx b/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
index 8a8965a13..c30edf955 100644
--- a/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
+++ b/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
@@ -52,6 +52,33 @@ export function JobsDetailRates({ jobRO, form }) {
         >
           <CurrencyInput disabled={jobRO} />
         </Form.Item>
+
+        <Space align="end">
+          <Form.Item label={t("jobs.fields.ca_bc_pvrt")} name="ca_bc_pvrt">
+            <CurrencyInput disabled={jobRO} />
+          </Form.Item>
+          <CABCpvrtCalculator form={form} disabled={jobRO} />
+        </Space>
+      </FormRow>
+      <FormRow>
+        <Form.Item
+          label={t("jobs.fields.federal_tax_rate")}
+          name="federal_tax_rate"
+        >
+          <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+        </Form.Item>
+        <Form.Item
+          label={t("jobs.fields.state_tax_rate")}
+          name="state_tax_rate"
+        >
+          <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+        </Form.Item>
+        <Form.Item
+          label={t("jobs.fields.local_tax_rate")}
+          name="local_tax_rate"
+        >
+          <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+        </Form.Item>
         <Form.Item
           label={t("jobs.fields.ca_gst_registrant")}
           name="ca_gst_registrant"
@@ -59,12 +86,6 @@ export function JobsDetailRates({ jobRO, form }) {
         >
           <Switch disabled={jobRO} />
         </Form.Item>
-        <Space align="end">
-          <Form.Item label={t("jobs.fields.ca_bc_pvrt")} name="ca_bc_pvrt">
-            <CurrencyInput disabled={jobRO} />
-          </Form.Item>
-          <CABCpvrtCalculator form={form} disabled={jobRO} />
-        </Space>
       </FormRow>
       <JobsDetailRatesChangeButton form={form} disabled={jobRO} />
       <FormRow header={t("jobs.forms.laborrates")}>
@@ -134,24 +155,6 @@ export function JobsDetailRates({ jobRO, form }) {
         <Form.Item label={t("jobs.fields.rate_matd")} name="rate_matd">
           <CurrencyInput disabled={jobRO} />
         </Form.Item>
-        <Form.Item
-          label={t("jobs.fields.federal_tax_rate")}
-          name="federal_tax_rate"
-        >
-          <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
-        </Form.Item>
-        <Form.Item
-          label={t("jobs.fields.state_tax_rate")}
-          name="state_tax_rate"
-        >
-          <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
-        </Form.Item>
-        <Form.Item
-          label={t("jobs.fields.local_tax_rate")}
-          name="local_tax_rate"
-        >
-          <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
-        </Form.Item>
       </FormRow>
 
       <JobsDetailRatesParts form={form} />
diff --git a/client/src/components/layout-form-row/layout-form-row.component.jsx b/client/src/components/layout-form-row/layout-form-row.component.jsx
index 94b1b1aa1..cec64c435 100644
--- a/client/src/components/layout-form-row/layout-form-row.component.jsx
+++ b/client/src/components/layout-form-row/layout-form-row.component.jsx
@@ -1,5 +1,5 @@
+import { Col, Divider, Row, Typography } from "antd";
 import React from "react";
-import { Row, Col, Typography } from "antd";
 import "./layout-form-row.styles.scss";
 
 export default function LayoutFormRow({
@@ -41,10 +41,12 @@ export default function LayoutFormRow({
       },
     };
   };
-
+  //{header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
   return (
     <div className="imex-form-row" {...restProps}>
-      {header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
+      <Divider orientation="left" type="horizontal">
+        {header}
+      </Divider>
       <Row {...rowGutter}>
         {children.map(
           (c, idx) =>

From eca5bd21aede0280c8d34e31648fe5966dceefb1 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 31 Mar 2021 11:35:08 -0700
Subject: [PATCH 3/7] IO-829 Resolve Parts Order Calculations issues.

---
 client/.env.development2                            | 13 +++++++++++++
 .../job-bills-total/job-bills-total.component.jsx   | 12 ++++++------
 2 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 client/.env.development2

diff --git a/client/.env.development2 b/client/.env.development2
new file mode 100644
index 000000000..96ee2121d
--- /dev/null
+++ b/client/.env.development2
@@ -0,0 +1,13 @@
+FAST_REFRESH=false
+REACT_APP_GRAPHQL_ENDPOINT=https://bodyshop-dev-db.herokuapp.com/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://bodyshop-dev-db.herokuapp.com/v1/graphql
+REACT_APP_GA_CODE=231099835
+REACT_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
+REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+REACT_APP_CLOUDINARY_API_KEY=473322739956866
+REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,f_auto,h_250,w_250
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
+REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+REACT_APP_AXIOS_BASE_API_URL=https://api.imex.online/
+REACT_APP_REPORTS_SERVER_URL=https://reports.bodyshop.app
\ No newline at end of file
diff --git a/client/src/components/job-bills-total/job-bills-total.component.jsx b/client/src/components/job-bills-total/job-bills-total.component.jsx
index ad659b9f6..3fd5e8c12 100644
--- a/client/src/components/job-bills-total/job-bills-total.component.jsx
+++ b/client/src/components/job-bills-total/job-bills-total.component.jsx
@@ -32,7 +32,7 @@ export default function JobBillsTotalComponent({
       if (p.return) {
         totalReturns = totalReturns.add(
           Dinero({
-            amount: Math.round((pol.cost || 0) * 100),
+            amount: Math.round((pol.act_price || 0) * 100),
           }).multiply(pol.quantity)
         );
       }
@@ -74,7 +74,7 @@ export default function JobBillsTotalComponent({
   const discrepWithLbrAdj = discrepancy.add(lbrAdjustments);
 
   const discrepWithCms = discrepWithLbrAdj.subtract(billCms);
-  const creditsNotReceived = totalReturns.subtract(billCms);
+  const creditsNotReceived = totalReturns.add(billCms); //billCms is tracked as a negative number.
   return (
     <Card title={t("jobs.labels.jobtotals")}>
       <Space wrap size="large">
@@ -89,7 +89,7 @@ export default function JobBillsTotalComponent({
         <Statistic
           title={t("bills.labels.discrepancy")}
           valueStyle={{
-            color: discrepancy.getAmount === 0 ? "green" : "red",
+            color: discrepancy.getAmount() === 0 ? "green" : "red",
           }}
           value={discrepancy.toFormat()}
         />
@@ -100,7 +100,7 @@ export default function JobBillsTotalComponent({
         <Statistic
           title={t("bills.labels.discrepwithlbradj")}
           valueStyle={{
-            color: discrepWithLbrAdj.getAmount === 0 ? "green" : "red",
+            color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red",
           }}
           value={discrepWithLbrAdj.toFormat()}
         />
@@ -111,7 +111,7 @@ export default function JobBillsTotalComponent({
         <Statistic
           title={t("bills.labels.discrepwithcms")}
           valueStyle={{
-            color: discrepWithCms.getAmount === 0 ? "green" : "red",
+            color: discrepWithCms.getAmount() === 0 ? "green" : "red",
           }}
           value={discrepWithCms.toFormat()}
         />
@@ -126,7 +126,7 @@ export default function JobBillsTotalComponent({
         <Statistic
           title={t("bills.labels.creditsnotreceived")}
           valueStyle={{
-            color: creditsNotReceived.getAmount === 0 ? "green" : "red",
+            color: creditsNotReceived.getAmount() === 0 ? "green" : "red",
           }}
           value={creditsNotReceived.toFormat()}
         />

From 79fc39b96457e397bb050bb5b18349005468b4c7 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 31 Mar 2021 11:41:17 -0700
Subject: [PATCH 4/7] IO-830 Label fix.

---
 bodyshop_translations.babel                   | 23 ++++++++++++++++++-
 client/.env.development2                      | 13 -----------
 .../job-detail-cards.component.jsx            |  4 ++--
 client/src/translations/en_us/common.json     |  1 +
 client/src/translations/es/common.json        |  1 +
 client/src/translations/fr/common.json        |  1 +
 6 files changed, 27 insertions(+), 16 deletions(-)
 delete mode 100644 client/.env.development2

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 6ce263e40..f1347305d 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -17226,6 +17226,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>pag</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>pal</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/.env.development2 b/client/.env.development2
deleted file mode 100644
index 96ee2121d..000000000
--- a/client/.env.development2
+++ /dev/null
@@ -1,13 +0,0 @@
-FAST_REFRESH=false
-REACT_APP_GRAPHQL_ENDPOINT=https://bodyshop-dev-db.herokuapp.com/v1/graphql
-REACT_APP_GRAPHQL_ENDPOINT_WS=wss://bodyshop-dev-db.herokuapp.com/v1/graphql
-REACT_APP_GA_CODE=231099835
-REACT_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
-REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-REACT_APP_CLOUDINARY_API_KEY=473322739956866
-REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,f_auto,h_250,w_250
-REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
-REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-REACT_APP_AXIOS_BASE_API_URL=https://api.imex.online/
-REACT_APP_REPORTS_SERVER_URL=https://reports.bodyshop.app
\ No newline at end of file
diff --git a/client/src/components/job-detail-cards/job-detail-cards.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
index 4f49d5b39..09aadf4c9 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -68,8 +68,8 @@ export function JobDetailCards({ setPrintCenterContext }) {
     <Drawer
       visible={!!selected}
       destroyOnClose
-      height={drawerPercentage}
-      placement="top"
+      width={drawerPercentage}
+      placement="right"
       onClose={handleDrawerClose}
     >
       {loading ? <LoadingSpinner /> : null}
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index ae44b0a0b..2ae91a9db 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1059,6 +1059,7 @@
 				"ownr_ph1": "Phone 1",
 				"paa": "Aftermarket",
 				"pae": "Existing",
+				"pag": "Glass",
 				"pal": "LKQ",
 				"pam": "Remanufactured",
 				"pan": "OEM/New",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 2ef0ac47c..6d6092ebb 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1059,6 +1059,7 @@
 				"ownr_ph1": "Teléfono 1",
 				"paa": "",
 				"pae": "",
+				"pag": "",
 				"pal": "",
 				"pam": "",
 				"pan": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index b942637d7..69288eb7e 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1059,6 +1059,7 @@
 				"ownr_ph1": "Téléphone 1",
 				"paa": "",
 				"pae": "",
+				"pag": "",
 				"pal": "",
 				"pam": "",
 				"pan": "",

From 3c7ce84be2e706d0e7bc62c832e557ad28894f5b Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 31 Mar 2021 14:35:58 -0700
Subject: [PATCH 5/7] IO-814 Global Search Changes

---
 .../global-search/global-search.component.jsx | 97 ++++++++++---------
 .../components/header/header.component.jsx    | 10 +-
 .../jobs-detail-header.component.jsx          |  2 +-
 client/src/graphql/search.queries.js          |  1 +
 4 files changed, 56 insertions(+), 54 deletions(-)

diff --git a/client/src/components/global-search/global-search.component.jsx b/client/src/components/global-search/global-search.component.jsx
index 38f2dbf49..feb2ef1f1 100644
--- a/client/src/components/global-search/global-search.component.jsx
+++ b/client/src/components/global-search/global-search.component.jsx
@@ -1,11 +1,11 @@
 import { useLazyQuery } from "@apollo/client";
-import { AutoComplete, Input } from "antd";
+import { AutoComplete, Divider, Input, Space } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
 
 export default function GlobalSearch() {
@@ -16,13 +16,12 @@ export default function GlobalSearch() {
   );
 
   const executeSearch = (v) => {
-    callSearch(v);
+    if (v && v.variables.search && v.variables.search !== "") callSearch(v);
   };
-  const debouncedExecuteSearch = _.debounce(executeSearch, 500);
+  const debouncedExecuteSearch = _.debounce(executeSearch, 750);
 
   const handleSearch = (value) => {
-    if (value && value !== "")
-      debouncedExecuteSearch({ variables: { search: value } });
+    debouncedExecuteSearch({ variables: { search: value } });
   };
 
   const renderTitle = (title) => {
@@ -35,27 +34,20 @@ export default function GlobalSearch() {
           label: renderTitle(t("menus.header.search.jobs")),
           options: data.search_jobs.map((job) => {
             return {
+              key: job.id,
               value: job.ro_number,
               label: (
                 <Link to={`/manage/jobs/${job.id}`}>
-                  <div className="imex-flex-row">
-                    <span className="imex-flex-row__margin-large">
-                      <strong>{job.ro_number || t("general.labels.na")}</strong>
-                    </span>
-
-                    <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">{`${
-                      job.v_model_yr || ""
-                    } ${job.v_make_desc || ""} ${
+                  <Space wrap split={<Divider type="vertical" />}>
+                    <strong>{job.ro_number || t("general.labels.na")}</strong>
+                    <span>{`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
+                      job.ownr_co_nm || ""
+                    }`}</span>
+                    <span>{`${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">
-                      <CurrencyFormatter>{`${job.clm_total}`}</CurrencyFormatter>
-                    </span>
-                  </div>
+                    <span>{`${job.clm_no}`}</span>
+                  </Space>
                 </Link>
               ),
             };
@@ -65,16 +57,20 @@ export default function GlobalSearch() {
           label: renderTitle(t("menus.header.search.owners")),
           options: data.search_owners.map((owner) => {
             return {
+              key: owner.id,
               value: `${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
                 owner.ownr_co_nm || ""
               }`,
               label: (
                 <Link to={`/manage/owners/${owner.id}`}>
-                  <div className="imex-flex-row">
-                    <span className="imex-flex-row__margin-large">{`${
-                      owner.ownr_fn || ""
-                    } ${owner.ownr_ln || ""} ${owner.ownr_co_nm || ""}`}</span>
-                  </div>
+                  <Space wrap split={<Divider type="vertical" />}>
+                    <span>{`${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
+                      owner.ownr_co_nm || ""
+                    }`}</span>
+                    <PhoneNumberFormatter>
+                      {owner.ownr_ph1}
+                    </PhoneNumberFormatter>
+                  </Space>
                 </Link>
               ),
             };
@@ -84,18 +80,21 @@ export default function GlobalSearch() {
           label: renderTitle(t("menus.header.search.vehicles")),
           options: data.search_vehicles.map((vehicle) => {
             return {
+              key: vehicle.id,
               value: `${vehicle.v_model_yr || ""} ${
                 vehicle.v_make_desc || ""
               } ${vehicle.v_model_desc || ""}`,
               label: (
                 <Link to={`/manage/vehicles/${vehicle.id}`}>
-                  <div className="imex-flex-row">
-                    <span className="imex-flex-row__margin-large">{`${
-                      vehicle.v_model_yr || ""
-                    } ${vehicle.v_make_desc || ""} ${
-                      vehicle.v_model_desc || ""
-                    } - ${vehicle.plate_no} - ${vehicle.v_vin}`}</span>
-                  </div>
+                  <Space wrap split={<Divider type="vertical" />}>
+                    <span>
+                      {`${vehicle.v_model_yr || ""} ${
+                        vehicle.v_make_desc || ""
+                      } ${vehicle.v_model_desc || ""}`}
+                    </span>
+                    <span>{vehicle.plate_no}</span>
+                    <span> {vehicle.v_vin}</span>
+                  </Space>
                 </Link>
               ),
             };
@@ -105,15 +104,16 @@ export default function GlobalSearch() {
           label: renderTitle(t("menus.header.search.payments")),
           options: data.search_payments.map((payment) => {
             return {
+              key: payment.id,
               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>
+                  <Space wrap split={<Divider type="vertical" />}>
+                    <span>{payment.job.ro_number}</span>
+                    <span>{payment.job.memo}</span>
+                    <span>{payment.job.amount}</span>
+                    <span>{payment.job.transactionid}</span>
+                  </Space>
                 </Link>
               ),
             };
@@ -123,14 +123,15 @@ export default function GlobalSearch() {
           label: renderTitle(t("menus.header.search.bills")),
           options: data.search_bills.map((bill) => {
             return {
-              value: `${bill.invoice_number}`,
+              key: bill.id,
+              value: `${bill.invoice_number} - ${bill.vendor.name}`,
               label: (
                 <Link to={`/manage/bills?billid=${bill.id}`}>
-                  <div className="imex-flex-row">
-                    <span className="imex-flex-row__margin-large">{`${bill.invoice_number}`}</span>
-                    <span className="imex-flex-row__margin-large">{`${bill.vendor.name}`}</span>
-                    <span className="imex-flex-row__margin-large">{`${bill.date}`}</span>
-                  </div>
+                  <Space wrap split={<Divider type="vertical" />}>
+                    <span>{bill.invoice_number}</span>
+                    <span>{bill.vendor.name}</span>
+                    <span>{bill.date}</span>
+                  </Space>
                 </Link>
               ),
             };
@@ -144,11 +145,11 @@ export default function GlobalSearch() {
   return (
     <AutoComplete
       dropdownMatchSelectWidth={false}
-      style={{ flex: 2 }}
       options={options}
       onSearch={handleSearch}
+      allowClear
     >
-      <Input.Search loading={loading} />
+      <Input.Search loading={loading} style={{ width: "20vw" }} />
     </AutoComplete>
   );
 }
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index 08d71de55..6a5bec000 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -298,11 +298,8 @@ function Header({
             <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
           </Menu.Item>
         </Menu.SubMenu>
-
-        <Menu.Item>
-          <GlobalSearch />
-        </Menu.Item>
         <Menu.SubMenu
+          style={{ float: "right" }}
           title={
             currentUser.displayName ||
             currentUser.email ||
@@ -344,13 +341,16 @@ function Header({
             </Menu.Item>
           </Menu.SubMenu>
         </Menu.SubMenu>
-        <Menu.SubMenu title={<ClockCircleFilled />}>
+        <Menu.SubMenu style={{ float: "right" }} title={<ClockCircleFilled />}>
           {recentItems.map((i, idx) => (
             <Menu.Item key={idx}>
               <Link to={i.url}>{i.label}</Link>
             </Menu.Item>
           ))}
         </Menu.SubMenu>
+        <Menu.Item style={{ float: "right" }}>
+          <GlobalSearch />
+        </Menu.Item>
       </Menu>
     </Layout.Header>
   );
diff --git a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
index 4b5901ad9..e4271543c 100644
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -109,7 +109,7 @@ export function JobsDetailHeader({ job, bodyshop }) {
         </Link>
       </Col>
       <Col {...colSpan}>
-        <Link to={`/manage/vehicles/${job.vehicle.id}`}>
+        <Link to={job.vehicle && `/manage/vehicles/${job.vehicle.id}`}>
           <Card
             className="ant-card-grid-hoverable"
             style={{ height: "100%" }}
diff --git a/client/src/graphql/search.queries.js b/client/src/graphql/search.queries.js
index 5b3cc307e..86b93b78e 100644
--- a/client/src/graphql/search.queries.js
+++ b/client/src/graphql/search.queries.js
@@ -22,6 +22,7 @@ export const GLOBAL_SEARCH_QUERY = gql`
       ownr_fn
       ownr_ln
       ownr_co_nm
+      ownr_ph1
     }
     search_vehicles(args: { search: $search }) {
       id

From 8b5ea08caedee0ea7dbb84c0a8d6af8025c5da3d Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 31 Mar 2021 17:49:43 -0700
Subject: [PATCH 6/7] UI Updates & Bill Entering

---
 bodyshop_translations.babel                   |  42 +
 .../bill-detail-edit.container.jsx            | 113 ++-
 .../bill-form/bill-form.component.jsx         |  31 +-
 .../bill-form/bill-form.lines.component.jsx   | 755 ++++++++++--------
 .../form-fields-changed-alert.component.jsx   |  13 +-
 .../form-fields-changed.styles.scss           |   7 +
 .../form-list-move-arrows.component.jsx       |   5 +-
 .../job-checklist-form.component.jsx          | 178 +++--
 .../job-checklist-template-list.component.jsx |  16 +-
 .../job-checklist/job-checklist.component.jsx |   6 +-
 .../job-employee-assignments.component.jsx    |  67 +-
 .../jobs-convert-button.component.jsx         |  24 +-
 .../jobs-documents-gallery.component.jsx      |   4 +-
 .../jobs-notes/jobs.notes.component.jsx       |   6 +-
 .../note-upsert-modal.component.jsx           |  74 +-
 .../note-upsert-modal.container.jsx           |   7 +-
 .../scoreboard-chart.component.jsx            |   5 +-
 .../scoreboard-day-stats.component.jsx        |  28 +-
 .../scoreboard-display.component.jsx          |  21 +-
 .../scoreboard-targets-table.component.jsx    |  17 +-
 .../vendors-form/vendors-form.component.jsx   |  58 +-
 .../vendors-form/vendors-form.container.jsx   |   1 +
 .../vendors-list/vendors-list.component.jsx   |  83 +-
 .../vendors-list/vendors-list.container.jsx   |   6 +-
 .../scoreboard/scoreboard.page.component.jsx  |  10 -
 .../scoreboard/scoreboard.page.container.jsx  |   6 +-
 .../shop-vendor.page.component.jsx            |  53 +-
 .../temporary-docs.component.jsx              |  15 +-
 client/src/translations/en_us/common.json     |   2 +
 client/src/translations/es/common.json        |   2 +
 client/src/translations/fr/common.json        |   2 +
 31 files changed, 953 insertions(+), 704 deletions(-)
 create mode 100644 client/src/components/form-fields-changed-alert/form-fields-changed.styles.scss
 delete mode 100644 client/src/pages/scoreboard/scoreboard.page.component.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index f1347305d..88008c551 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -19440,6 +19440,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>checklistdocuments</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>checklists</name>
                                         <definition_loaded>false</definition_loaded>
@@ -28469,6 +28490,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>targets</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>weeklytarget</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx b/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
index 6d763d311..da46d1841 100644
--- a/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Button, Form, PageHeader, Popconfirm } from "antd";
+import { Button, Drawer, Form, Grid, PageHeader, Popconfirm } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
+import { useLocation, useHistory } from "react-router-dom";
 import {
   INSERT_NEW_BILL_LINES,
   UPDATE_BILL_LINE,
@@ -17,6 +17,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 
 export default function BillDetailEditcontainer() {
   const search = queryString.parse(useLocation().search);
+  const history = useHistory();
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [visible, setVisible] = useState(false);
@@ -25,6 +26,22 @@ export default function BillDetailEditcontainer() {
   const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
   const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
 
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "80%",
+    xl: "80%",
+    xxl: "70%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
+
   const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
     variables: { billid: search.billid },
     skip: !!!search.billid,
@@ -111,47 +128,59 @@ export default function BillDetailEditcontainer() {
   const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
 
   return (
-    <LoadingSkeleton loading={loading}>
-      <PageHeader
-        title={
-          data &&
-          `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
-        }
-        extra={
-          <Popconfirm
-            visible={visible}
-            onConfirm={() => form.submit()}
-            onCancel={() => setVisible(false)}
-            okButtonProps={{ loading: updateLoading }}
-            title={t("bills.labels.editadjwarning")}
+    <Drawer
+      width={drawerPercentage}
+      onClose={() => {
+        delete search.billid;
+        history.push({ search: queryString.stringify(search) });
+      }}
+      visible={search.billid}
+    >
+      {loading && <LoadingSkeleton />}
+      {!loading && (
+        <>
+          <PageHeader
+            title={
+              data &&
+              `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
+            }
+            extra={
+              <Popconfirm
+                visible={visible}
+                onConfirm={() => form.submit()}
+                onCancel={() => setVisible(false)}
+                okButtonProps={{ loading: updateLoading }}
+                title={t("bills.labels.editadjwarning")}
+              >
+                <Button
+                  htmlType="submit"
+                  disabled={exported}
+                  onClick={handleSave}
+                  loading={updateLoading}
+                  type="primary"
+                >
+                  {t("general.actions.save")}
+                </Button>
+              </Popconfirm>
+            }
+          />
+          <Form
+            form={form}
+            onFinish={handleFinish}
+            initialValues={transformData(data)}
+            layout="vertical"
           >
-            <Button
-              htmlType="submit"
-              disabled={exported}
-              onClick={handleSave}
-              loading={updateLoading}
-              type="primary"
-            >
-              {t("general.actions.save")}
-            </Button>
-          </Popconfirm>
-        }
-      />
-      <Form
-        form={form}
-        onFinish={handleFinish}
-        initialValues={transformData(data)}
-        layout="vertical"
-      >
-        <BillFormContainer form={form} billEdit disabled={exported} />
-        <JobDocumentsGallery
-          jobId={data ? data.bills_by_pk.jobid : null}
-          billId={search.billid}
-          documentsList={data ? data.bills_by_pk.documents : []}
-          billsCallback={refetch}
-        />
-      </Form>
-    </LoadingSkeleton>
+            <BillFormContainer form={form} billEdit disabled={exported} />
+            <JobDocumentsGallery
+              jobId={data ? data.bills_by_pk.jobid : null}
+              billId={search.billid}
+              documentsList={data ? data.bills_by_pk.documents : []}
+              billsCallback={refetch}
+            />
+          </Form>
+        </>
+      )}
+    </Drawer>
   );
 }
 
diff --git a/client/src/components/bill-form/bill-form.component.jsx b/client/src/components/bill-form/bill-form.component.jsx
index 01c7a1994..5f748e2d5 100644
--- a/client/src/components/bill-form/bill-form.component.jsx
+++ b/client/src/components/bill-form/bill-form.component.jsx
@@ -1,16 +1,16 @@
+import { useApolloClient } from "@apollo/client";
 import {
   Button,
+  Divider,
   Form,
   Input,
   Select,
   Space,
   Statistic,
   Switch,
-  Typography,
   Upload,
 } from "antd";
 import React, { useEffect, useState } from "react";
-import { useApolloClient } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -159,7 +159,6 @@ export function BillFormComponent({
         >
           <Input disabled={disabled || disableInvNumber} />
         </Form.Item>
-
         <Form.Item
           label={t("bills.fields.date")}
           name="date"
@@ -191,6 +190,17 @@ export function BillFormComponent({
         >
           <CurrencyInput min={0} disabled={disabled} />
         </Form.Item>
+        <Form.Item label={t("bills.fields.allpartslocation")} name="location">
+          <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
+            {bodyshop.md_parts_locations.map((loc, idx) => (
+              <Select.Option key={idx} value={loc}>
+                {loc}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow>
         <Form.Item
           label={t("bills.fields.federal_tax_rate")}
           name="federal_tax_rate"
@@ -209,19 +219,8 @@ export function BillFormComponent({
         >
           <CurrencyInput min={0} />
         </Form.Item>
-        <Form.Item label={t("bills.fields.allpartslocation")} name="location">
-          <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
-            {bodyshop.md_parts_locations.map((loc, idx) => (
-              <Select.Option key={idx} value={loc}>
-                {loc}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
       </LayoutFormRow>
-      <Typography.Title level={4}>
-        {t("bills.labels.bill_lines")}
-      </Typography.Title>
+      <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
       <BillFormLines
         lineData={lineData}
         discount={discount}
@@ -264,7 +263,7 @@ export function BillFormComponent({
           if (!!totals)
             return (
               <div>
-                <Space>
+                <Space split={<Divider type="vertical" />}>
                   <Statistic
                     title={t("bills.labels.subtotal")}
                     value={totals.subtotal.toFormat()}
diff --git a/client/src/components/bill-form/bill-form.lines.component.jsx b/client/src/components/bill-form/bill-form.lines.component.jsx
index 3663198de..2c9870ea3 100644
--- a/client/src/components/bill-form/bill-form.lines.component.jsx
+++ b/client/src/components/bill-form/bill-form.lines.component.jsx
@@ -1,24 +1,22 @@
-import { DeleteFilled, WarningOutlined } from "@ant-design/icons";
+import { WarningOutlined } from "@ant-design/icons";
 import {
   Button,
-  Divider,
   Form,
   Input,
   InputNumber,
   Select,
   Space,
   Switch,
+  Table,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
-import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
-import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -38,331 +36,394 @@ export function BillEnterModalLinesComponent({
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
 
+  const columns = [
+    {
+      title: t("billlines.fields.jobline"),
+      dataIndex: "joblineid",
+      editable: true,
+      width: "10%",
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}joblinename`,
+          name: [field.name, "joblineid"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => (
+        <BillLineSearchSelect
+          disabled={disabled}
+          options={lineData}
+          onSelect={(value, opt) => {
+            setFieldsValue({
+              billlines: getFieldsValue(["billlines"]).billlines.map(
+                (item, idx) => {
+                  if (idx === index) {
+                    return {
+                      ...item,
+                      line_desc: opt.line_desc,
+                      quantity: opt.part_qty || 1,
+                      actual_price: opt.cost,
+                      cost_center: opt.part_type
+                        ? responsibilityCenters.defaults.costs[opt.part_type] ||
+                          null
+                        : null,
+                    };
+                  }
+                  return item;
+                }
+              ),
+            });
+          }}
+        />
+      ),
+    },
+    {
+      title: t("billlines.fields.line_desc"),
+      dataIndex: "line_desc",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}line_desc`,
+          name: [field.name, "line_desc"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => <Input disabled={disabled} />,
+    },
+    {
+      title: t("billlines.fields.quantity"),
+      dataIndex: "quantity",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}quantity`,
+          name: [field.name, "quantity"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => (
+        <InputNumber precision={0} min={0} disabled={disabled} />
+      ),
+    },
+    {
+      title: t("billlines.fields.actual_price"),
+      dataIndex: "actual_price",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}actual_price`,
+          name: [field.name, "actual_price"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => (
+        <CurrencyInput
+          min={0}
+          disabled={disabled}
+          onBlur={(e) => {
+            setFieldsValue({
+              billlines: getFieldsValue("billlines").billlines.map(
+                (item, idx) => {
+                  console.log("Checking", index, idx);
+                  if (idx === index) {
+                    console.log(
+                      "Found and setting.",
+                      !!item.actual_cost
+                        ? item.actual_cost
+                        : Math.round(
+                            (parseFloat(e.target.value) * (1 - discount) +
+                              Number.EPSILON) *
+                              100
+                          ) / 100
+                    );
+                    return {
+                      ...item,
+                      actual_cost: !!item.actual_cost
+                        ? item.actual_cost
+                        : Math.round(
+                            (parseFloat(e.target.value) * (1 - discount) +
+                              Number.EPSILON) *
+                              100
+                          ) / 100,
+                    };
+                  }
+                  return item;
+                }
+              ),
+            });
+          }}
+        />
+      ),
+    },
+    {
+      title: t("billlines.fields.actual_cost"),
+      dataIndex: "actual_cost",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}actual_cost`,
+          name: [field.name, "actual_cost"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => (
+        <CurrencyInput min={0} disabled={disabled} />
+      ),
+      additional: (record, index) => (
+        <Form.Item shouldUpdate>
+          {() => {
+            const line = getFieldsValue(["billlines"]).billlines[index];
+            if (!!!line) return null;
+            const lineDiscount = (
+              1 -
+              Math.round((line.actual_cost / line.actual_price) * 100) / 100
+            ).toPrecision(2);
+
+            if (lineDiscount - discount === 0) return <div />;
+            return <WarningOutlined style={{ color: "red" }} />;
+          }}
+        </Form.Item>
+      ),
+    },
+    {
+      title: t("billlines.fields.cost_center"),
+      dataIndex: "cost_center",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}cost_center`,
+          name: [field.name, "cost_center"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => (
+        <Select style={{ width: "150px" }} disabled={disabled}>
+          {responsibilityCenters.costs.map((item) => (
+            <Select.Option key={item.name}>{item.name}</Select.Option>
+          ))}
+        </Select>
+      ),
+    },
+    {
+      title: t("billlines.fields.federal_tax_applicable"),
+      dataIndex: "applicable_taxes.federal",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}fedtax`,
+          valuePropName: "checked",
+          initialValue: true,
+          name: [field.name, "applicable_taxes", "federal"],
+        };
+      },
+      formInput: (record, index) => <Switch disabled={disabled} />,
+    },
+    {
+      title: t("billlines.fields.state_tax_applicable"),
+      dataIndex: "applicable_taxes.state",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}statetax`,
+          valuePropName: "checked",
+          name: [field.name, "applicable_taxes", "state"],
+        };
+      },
+      formInput: (record, index) => <Switch disabled={disabled} />,
+    },
+    {
+      title: t("billlines.fields.local_tax_applicable"),
+      dataIndex: "applicable_taxes.local",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}localtax`,
+          valuePropName: "checked",
+          name: [field.name, "applicable_taxes", "local"],
+        };
+      },
+      formInput: (record, index) => <Switch disabled={disabled} />,
+    },
+
+    {
+      title: t("billlines.fields.location"),
+      dataIndex: "location",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}location`,
+          name: [field.name, "location"],
+        };
+      },
+      formInput: (record, index) => (
+        <Select style={{ width: "150px" }} disabled={disabled}>
+          {bodyshop.md_parts_locations.map((loc, idx) => (
+            <Select.Option key={idx} value={loc}>
+              {loc}
+            </Select.Option>
+          ))}
+        </Select>
+      ),
+    },
+    {
+      title: t("billlines.labels.deductedfromlbr"),
+      dataIndex: "deductedfromlbr",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          valuePropName: "checked",
+          key: `${field.index}deductedfromlbr`,
+          name: [field.name, "deductedfromlbr"],
+        };
+      },
+      formInput: (record, index) => <Switch disabled={disabled} />,
+      additional: (record, index) => (
+        <Form.Item shouldUpdate style={{ display: "inline-block" }}>
+          {() => {
+            if (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
+              return (
+                <div>
+                  <Form.Item
+                    label={t("joblines.fields.mod_lbr_ty")}
+                    key={`${index}modlbrty`}
+                    rules={[
+                      {
+                        required: true,
+                        message: t("general.validation.required"),
+                      },
+                    ]}
+                    name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
+                  >
+                    <Select allowClear>
+                      <Select.Option value="LAA">
+                        {t("joblines.fields.lbr_types.LAA")}
+                      </Select.Option>
+                      <Select.Option value="LAB">
+                        {t("joblines.fields.lbr_types.LAB")}
+                      </Select.Option>
+                      <Select.Option value="LAD">
+                        {t("joblines.fields.lbr_types.LAD")}
+                      </Select.Option>
+                      <Select.Option value="LAE">
+                        {t("joblines.fields.lbr_types.LAE")}
+                      </Select.Option>
+                      <Select.Option value="LAF">
+                        {t("joblines.fields.lbr_types.LAF")}
+                      </Select.Option>
+                      <Select.Option value="LAG">
+                        {t("joblines.fields.lbr_types.LAG")}
+                      </Select.Option>
+                      <Select.Option value="LAM">
+                        {t("joblines.fields.lbr_types.LAM")}
+                      </Select.Option>
+                      <Select.Option value="LAR">
+                        {t("joblines.fields.lbr_types.LAR")}
+                      </Select.Option>
+                      <Select.Option value="LAS">
+                        {t("joblines.fields.lbr_types.LAS")}
+                      </Select.Option>
+                      <Select.Option value="LAU">
+                        {t("joblines.fields.lbr_types.LAU")}
+                      </Select.Option>
+                      <Select.Option value="LA1">
+                        {t("joblines.fields.lbr_types.LA1")}
+                      </Select.Option>
+                      <Select.Option value="LA2">
+                        {t("joblines.fields.lbr_types.LA2")}
+                      </Select.Option>
+                      <Select.Option value="LA3">
+                        {t("joblines.fields.lbr_types.LA3")}
+                      </Select.Option>
+                      <Select.Option value="LA4">
+                        {t("joblines.fields.lbr_types.LA4")}
+                      </Select.Option>
+                    </Select>
+                  </Form.Item>
+                  <Form.Item
+                    label={t("jobs.labels.adjustmentrate")}
+                    name={[record.name, "lbr_adjustment", "rate"]}
+                    initialValue={bodyshop.default_adjustment_rate}
+                    rules={[
+                      {
+                        required: true,
+                        message: t("general.validation.required"),
+                      },
+                    ]}
+                  >
+                    <InputNumber precision={2} min={0.01} />
+                  </Form.Item>
+                </div>
+              );
+            return <span />;
+          }}
+        </Form.Item>
+      ),
+    },
+  ];
+
+  const mergedColumns = columns.map((col) => {
+    if (!col.editable) return col;
+    return {
+      ...col,
+      onCell: (record) => ({
+        record,
+        formItemProps: col.formItemProps,
+        formInput: col.formInput,
+        additional: col.additional,
+        dataIndex: col.dataIndex,
+        title: col.title,
+      }),
+    };
+  });
+
   return (
     <Form.List name="billlines">
       {(fields, { add, remove, move }) => {
         return (
-          <div className="invoice-form-lines-wrapper">
-            {fields.map((field, index) => (
-              <Form.Item required={false} key={field.key}>
-                <div>
-                  <div style={{ display: "flex", alignItems: "center" }}>
-                    <LayoutFormRow style={{ flex: 1 }} grow>
-                      <Form.Item
-                        span={8}
-                        label={t("billlines.fields.jobline")}
-                        key={`${index}joblinename`}
-                        name={[field.name, "joblineid"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <BillLineSearchSelect
-                          disabled={disabled}
-                          options={lineData}
-                          onSelect={(value, opt) => {
-                            setFieldsValue({
-                              billlines: getFieldsValue([
-                                "billlines",
-                              ]).billlines.map((item, idx) => {
-                                if (idx === index) {
-                                  return {
-                                    ...item,
-                                    line_desc: opt.line_desc,
-                                    quantity: opt.part_qty || 1,
-                                    actual_price: opt.cost,
-                                    cost_center: opt.part_type
-                                      ? responsibilityCenters.defaults.costs[
-                                          opt.part_type
-                                        ] || null
-                                      : null,
-                                  };
-                                }
-                                return item;
-                              }),
-                            });
-                          }}
-                        />
-                      </Form.Item>
-
-                      <Form.Item
-                        label={t("billlines.fields.line_desc")}
-                        key={`${index}line_desc`}
-                        name={[field.name, "line_desc"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <Input disabled={disabled} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("billlines.fields.quantity")}
-                        key={`${index}quantity`}
-                        name={[field.name, "quantity"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <InputNumber
-                          precision={0}
-                          min={0}
-                          disabled={disabled}
-                        />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("billlines.fields.actual_price")}
-                        key={`${index}actual_price`}
-                        name={[field.name, "actual_price"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <CurrencyInput
-                          min={0}
-                          disabled={disabled}
-                          onBlur={(e) => {
-                            setFieldsValue({
-                              billlines: getFieldsValue(
-                                "billlines"
-                              ).billlines.map((item, idx) => {
-                                if (idx === index) {
-                                  return {
-                                    ...item,
-                                    actual_cost: !!item.actual_cost
-                                      ? item.actual_cost
-                                      : Math.round(
-                                          (parseFloat(e.target.value) *
-                                            (1 - discount) +
-                                            Number.EPSILON) *
-                                            100
-                                        ) / 100,
-                                  };
-                                }
-                                return item;
-                              }),
-                            });
-                          }}
-                        />
-                      </Form.Item>
-                      <div>
-                        <Form.Item
-                          label={t("billlines.fields.actual_cost")}
-                          key={`${index}actual_cost`}
-                          name={[field.name, "actual_cost"]}
-                          rules={[
-                            {
-                              required: true,
-                              message: t("general.validation.required"),
-                            },
-                          ]}
-                        >
-                          <CurrencyInput min={0} disabled={disabled} />
-                        </Form.Item>
-                        <Form.Item shouldUpdate>
-                          {() => {
-                            const line = getFieldsValue(["billlines"])
-                              .billlines[index];
-                            if (!!!line) return null;
-                            const lineDiscount = (
-                              1 -
-                              Math.round(
-                                (line.actual_cost / line.actual_price) * 100
-                              ) /
-                                100
-                            ).toPrecision(2);
-
-                            if (lineDiscount - discount === 0) return <div />;
-                            return <WarningOutlined style={{ color: "red" }} />;
-                          }}
-                        </Form.Item>
-                      </div>
-                      <Form.Item
-                        label={t("billlines.fields.cost_center")}
-                        key={`${index}cost_center`}
-                        name={[field.name, "cost_center"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <Select style={{ width: "150px" }} disabled={disabled}>
-                          {responsibilityCenters.costs.map((item) => (
-                            <Select.Option key={item.name}>
-                              {item.name}
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Form.Item>
-                      <Space flex>
-                        <Form.Item
-                          label={t("billlines.fields.federal_tax_applicable")}
-                          key={`${index}fedtax`}
-                          initialValue={true}
-                          valuePropName="checked"
-                          name={[field.name, "applicable_taxes", "federal"]}
-                        >
-                          <Switch disabled={disabled} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("billlines.fields.state_tax_applicable")}
-                          key={`${index}statetax`}
-                          valuePropName="checked"
-                          name={[field.name, "applicable_taxes", "state"]}
-                        >
-                          <Switch disabled={disabled} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("billlines.fields.local_tax_applicable")}
-                          key={`${index}localtax`}
-                          valuePropName="checked"
-                          name={[field.name, "applicable_taxes", "local"]}
-                        >
-                          <Switch disabled={disabled} />
-                        </Form.Item>
-                      </Space>
-                      <Form.Item
-                        label={t("billlines.fields.location")}
-                        key={`${index}location`}
-                        name={[field.name, "location"]}
-                      >
-                        <Select style={{ width: "10rem" }} disabled={disabled}>
-                          {bodyshop.md_parts_locations.map((loc, idx) => (
-                            <Select.Option key={idx} value={loc}>
-                              {loc}
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Form.Item>
-                      <Form.Item
-                        label={t("billlines.labels.deductedfromlbr")}
-                        key={`${index}deductedfromlbr`}
-                        valuePropName="checked"
-                        name={[field.name, "deductedfromlbr"]}
-                      >
-                        <Switch disabled={disabled} />
-                      </Form.Item>
-                      <Form.Item shouldUpdate>
-                        {() => {
-                          if (
-                            getFieldValue([
-                              "billlines",
-                              field.name,
-                              "deductedfromlbr",
-                            ])
-                          )
-                            return (
-                              <div>
-                                <Form.Item
-                                  label={t("joblines.fields.mod_lbr_ty")}
-                                  key={`${index}modlbrty`}
-                                  rules={[
-                                    {
-                                      required: true,
-                                      message: t("general.validation.required"),
-                                    },
-                                  ]}
-                                  name={[
-                                    field.name,
-                                    "lbr_adjustment",
-                                    "mod_lbr_ty",
-                                  ]}
-                                >
-                                  <Select allowClear>
-                                    <Select.Option value="LAA">
-                                      {t("joblines.fields.lbr_types.LAA")}
-                                    </Select.Option>
-                                    <Select.Option value="LAB">
-                                      {t("joblines.fields.lbr_types.LAB")}
-                                    </Select.Option>
-                                    <Select.Option value="LAD">
-                                      {t("joblines.fields.lbr_types.LAD")}
-                                    </Select.Option>
-                                    <Select.Option value="LAE">
-                                      {t("joblines.fields.lbr_types.LAE")}
-                                    </Select.Option>
-                                    <Select.Option value="LAF">
-                                      {t("joblines.fields.lbr_types.LAF")}
-                                    </Select.Option>
-                                    <Select.Option value="LAG">
-                                      {t("joblines.fields.lbr_types.LAG")}
-                                    </Select.Option>
-                                    <Select.Option value="LAM">
-                                      {t("joblines.fields.lbr_types.LAM")}
-                                    </Select.Option>
-                                    <Select.Option value="LAR">
-                                      {t("joblines.fields.lbr_types.LAR")}
-                                    </Select.Option>
-                                    <Select.Option value="LAS">
-                                      {t("joblines.fields.lbr_types.LAS")}
-                                    </Select.Option>
-                                    <Select.Option value="LAU">
-                                      {t("joblines.fields.lbr_types.LAU")}
-                                    </Select.Option>
-                                    <Select.Option value="LA1">
-                                      {t("joblines.fields.lbr_types.LA1")}
-                                    </Select.Option>
-                                    <Select.Option value="LA2">
-                                      {t("joblines.fields.lbr_types.LA2")}
-                                    </Select.Option>
-                                    <Select.Option value="LA3">
-                                      {t("joblines.fields.lbr_types.LA3")}
-                                    </Select.Option>
-                                    <Select.Option value="LA4">
-                                      {t("joblines.fields.lbr_types.LA4")}
-                                    </Select.Option>
-                                  </Select>
-                                </Form.Item>
-                                <Form.Item
-                                  label={t("jobs.labels.adjustmentrate")}
-                                  name={[field.name, "lbr_adjustment", "rate"]}
-                                  initialValue={
-                                    bodyshop.default_adjustment_rate
-                                  }
-                                  rules={[
-                                    {
-                                      required: true,
-                                      message: t("general.validation.required"),
-                                    },
-                                  ]}
-                                >
-                                  <InputNumber precision={2} min={0.01} />
-                                </Form.Item>
-                              </div>
-                            );
-                          return <span />;
-                        }}
-                      </Form.Item>
-                    </LayoutFormRow>
-                    <FormListMoveArrows
-                      move={move}
-                      index={index}
-                      total={fields.length}
-                    />
-                    <DeleteFilled
-                      disabled={disabled}
-                      onClick={() => {
-                        remove(field.name);
-                      }}
-                    />
-                  </div>
-                  <Divider />
-                </div>
-              </Form.Item>
-            ))}
+          <>
+            <Table
+              components={{
+                body: {
+                  cell: EditableCell,
+                },
+              }}
+              size="small"
+              bordered
+              dataSource={fields}
+              columns={mergedColumns}
+              scroll={{ x: true }}
+              rowClassName="editable-row"
+            />
             <Form.Item>
               <Button
                 disabled={disabled}
@@ -374,7 +435,7 @@ export function BillEnterModalLinesComponent({
                 {t("billlines.actions.newline")}
               </Button>
             </Form.Item>
-          </div>
+          </>
         );
       }}
     </Form.List>
@@ -385,3 +446,39 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(BillEnterModalLinesComponent);
+
+const EditableCell = ({
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  children,
+  formInput,
+  formItemProps,
+  additional,
+  ...restProps
+}) => {
+  if (additional)
+    return (
+      <td {...restProps}>
+        <Space>
+          <Form.Item
+            name={dataIndex}
+            {...(formItemProps && formItemProps(record))}
+          >
+            {formInput && formInput(record, record.key)}
+          </Form.Item>
+          {additional && additional(record, record.key)}
+        </Space>
+      </td>
+    );
+
+  return (
+    <td {...restProps}>
+      <Form.Item name={dataIndex} {...(formItemProps && formItemProps(record))}>
+        {formInput && formInput(record, record.key)}
+      </Form.Item>
+    </td>
+  );
+};
diff --git a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
index bf9836d77..c03725a09 100644
--- a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
+++ b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
@@ -3,6 +3,7 @@ import { Form } from "antd";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
 import { Prompt, useLocation } from "react-router-dom";
+import "./form-fields-changed.styles.scss";
 
 export default function FormsFieldChanged({ form }) {
   const { t } = useTranslation();
@@ -11,13 +12,17 @@ export default function FormsFieldChanged({ form }) {
     form.resetFields();
   };
   const loc = useLocation();
-  if (!form.isFieldsTouched()) return <></>;
+  //if (!form.isFieldsTouched()) return <></>;
   return (
-    <Form.Item shouldUpdate style={{ margin: 0, padding: 0 }}>
+    <Form.Item
+      className="form-fields-changed"
+      shouldUpdate
+      style={{ margin: 0, padding: 0, minHeight: "unset" }}
+    >
       {() => {
         if (form.isFieldsTouched())
           return (
-            <div>
+            <span>
               <Prompt
                 when={true}
                 message={(location) => {
@@ -42,7 +47,7 @@ export default function FormsFieldChanged({ form }) {
                   </div>
                 }
               />
-            </div>
+            </span>
           );
         return <div style={{ display: "none" }}></div>;
       }}
diff --git a/client/src/components/form-fields-changed-alert/form-fields-changed.styles.scss b/client/src/components/form-fields-changed-alert/form-fields-changed.styles.scss
new file mode 100644
index 000000000..155407907
--- /dev/null
+++ b/client/src/components/form-fields-changed-alert/form-fields-changed.styles.scss
@@ -0,0 +1,7 @@
+.form-fields-changed {
+  .ant-form-item-control {
+    .ant-form-item-control-input {
+      min-height: unset !important;
+    }
+  }
+}
diff --git a/client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx b/client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx
index fa77be251..1c4bf21e6 100644
--- a/client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx
+++ b/client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx
@@ -1,4 +1,5 @@
 import { DownOutlined, UpOutlined } from "@ant-design/icons";
+import { Space } from "antd";
 import React from "react";
 export default function FormListMoveArrows({ move, index, total }) {
   const upDisabled = index === 0;
@@ -13,9 +14,9 @@ export default function FormListMoveArrows({ move, index, total }) {
   };
 
   return (
-    <div>
+    <Space direction="vertical">
       <UpOutlined disabled={upDisabled} onClick={handleUp} />
       <DownOutlined disabled={downDisabled} onClick={handleDown} />
-    </div>
+    </Space>
   );
 }
diff --git a/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx b/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
index 49c2e0f61..1e5596371 100644
--- a/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
+++ b/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Switch } from "antd";
+import { Button, Card, Form, notification, Switch } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -112,94 +112,98 @@ export function JobChecklistForm({
   };
 
   return (
-    <Form
-      form={form}
-      onFinish={handleFinish}
-      initialValues={{
-        ...(type === "intake" && {
-          addToProduction: true,
-          scheduled_completion: job && job.scheduled_completion,
-          scheduled_delivery: job && job.scheduled_delivery,
-        }),
-        ...(type === "deliver" && {
-          removeFromProduction: true,
-          actual_completion: job && job.actual_completion,
-        }),
-        ...formItems
-          .filter((fi) => fi.value)
-          .reduce((acc, fi) => {
-            acc[fi.name] = fi.value;
-            return acc;
-          }, {}),
-      }}
+    <Card
+      title={t("checklist.labels.checklist")}
+      extra={
+        !readOnly && (
+          <Button loading={loading} onClick={() => form.submit()}>
+            {t("general.actions.submit")}
+          </Button>
+        )
+      }
     >
-      {t("checklist.labels.checklist")}
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        initialValues={{
+          ...(type === "intake" && {
+            addToProduction: true,
+            scheduled_completion: job && job.scheduled_completion,
+            scheduled_delivery: job && job.scheduled_delivery,
+          }),
+          ...(type === "deliver" && {
+            removeFromProduction: true,
+            actual_completion: job && job.actual_completion,
+          }),
+          ...formItems
+            .filter((fi) => fi.value)
+            .reduce((acc, fi) => {
+              acc[fi.name] = fi.value;
+              return acc;
+            }, {}),
+        }}
+      >
+        <ConfigFormComponents componentList={formItems} readOnly={readOnly} />
 
-      <ConfigFormComponents componentList={formItems} readOnly={readOnly} />
-
-      {type === "intake" && (
-        <div>
-          <Form.Item
-            name="addToProduction"
-            valuePropName="checked"
-            label={t("checklist.labels.addtoproduction")}
-            disabled={readOnly}
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            name="scheduled_completion"
-            label={t("jobs.fields.scheduled_completion")}
-            disabled={readOnly}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <DateTimePicker />
-          </Form.Item>
-          <Form.Item
-            name="scheduled_delivery"
-            label={t("jobs.fields.scheduled_delivery")}
-            disabled={readOnly}
-          >
-            <DateTimePicker />
-          </Form.Item>
-        </div>
-      )}
-      {type === "deliver" && (
-        <div>
-          <Form.Item
-            name="actual_completion"
-            label={t("jobs.fields.actual_completion")}
-            disabled={readOnly}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <DateTimePicker />
-          </Form.Item>
-          <Form.Item
-            name="removeFromProduction"
-            valuePropName="checked"
-            label={t("checklist.labels.removefromproduction")}
-            disabled={readOnly}
-          >
-            <Switch defaultChecked={true} />
-          </Form.Item>
-        </div>
-      )}
-      {!readOnly && (
-        <Button loading={loading} htmlType="submit">
-          {t("general.actions.submit")}
-        </Button>
-      )}
-    </Form>
+        {type === "intake" && (
+          <div>
+            <Form.Item
+              name="addToProduction"
+              valuePropName="checked"
+              label={t("checklist.labels.addtoproduction")}
+              disabled={readOnly}
+            >
+              <Switch disabled={readOnly} />
+            </Form.Item>
+            <Form.Item
+              name="scheduled_completion"
+              label={t("jobs.fields.scheduled_completion")}
+              disabled={readOnly}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <DateTimePicker />
+            </Form.Item>
+            <Form.Item
+              name="scheduled_delivery"
+              label={t("jobs.fields.scheduled_delivery")}
+              disabled={readOnly}
+            >
+              <DateTimePicker />
+            </Form.Item>
+          </div>
+        )}
+        {type === "deliver" && (
+          <div>
+            <Form.Item
+              name="actual_completion"
+              label={t("jobs.fields.actual_completion")}
+              disabled={readOnly}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <DateTimePicker />
+            </Form.Item>
+            <Form.Item
+              name="removeFromProduction"
+              valuePropName="checked"
+              label={t("checklist.labels.removefromproduction")}
+              disabled={readOnly}
+            >
+              <Switch disabled={readOnly} defaultChecked={true} />
+            </Form.Item>
+          </div>
+        )}
+      </Form>
+    </Card>
   );
 }
 
diff --git a/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx b/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
index 2d0cb3064..fa8322650 100644
--- a/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
+++ b/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
@@ -1,5 +1,5 @@
 import { PrinterFilled } from "@ant-design/icons";
-import { Button, List } from "antd";
+import { Button, Card, List } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
@@ -44,10 +44,14 @@ export default function JobIntakeTemplateList({ templates }) {
   };
 
   return (
-    <div>
-      <Button onClick={renderAllTemplates} loading={loading}>
-        {t("checklist.actions.printall")}
-      </Button>
+    <Card
+      title={t("jobs.labels.checklistdocuments")}
+      extra={
+        <Button onClick={renderAllTemplates} loading={loading}>
+          {t("checklist.actions.printall")}
+        </Button>
+      }
+    >
       <List
         itemLayout="horizontal"
         dataSource={templates}
@@ -72,6 +76,6 @@ export default function JobIntakeTemplateList({ templates }) {
           </List.Item>
         )}
       />
-    </div>
+    </Card>
   );
 }
diff --git a/client/src/components/job-checklist/job-checklist.component.jsx b/client/src/components/job-checklist/job-checklist.component.jsx
index 0d4f48ff7..fda70881e 100644
--- a/client/src/components/job-checklist/job-checklist.component.jsx
+++ b/client/src/components/job-checklist/job-checklist.component.jsx
@@ -6,11 +6,11 @@ export default function JobIntakeComponent({ checklistConfig, type, job }) {
   const { form, templates } = checklistConfig;
 
   return (
-    <Row gutter={[48, 48]}>
-      <Col span={6}>
+    <Row gutter={[16, 16]}>
+      <Col sm={24} md={8}>
         <JobChecklistTemplateList templates={templates} type={type} />
       </Col>
-      <Col span={18}>
+      <Col sm={24} md={16}>
         <JobChecklistForm formItems={form} type={type} job={job} />
       </Col>
     </Row>
diff --git a/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx b/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
index 86eadafd7..40ee4dc45 100644
--- a/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
+++ b/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
@@ -1,5 +1,5 @@
 import { DeleteFilled, PlusCircleFilled } from "@ant-design/icons";
-import { Button, Popover, Select, Spin } from "antd";
+import { Button, Col, Popover, Row, Select, Space, Spin } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -40,35 +40,42 @@ export function JobEmployeeAssignments({
   };
 
   const popContent = (
-    <div>
-      <Select
-        id="employeeSelector"
-        showSearch
-        style={{ width: 200 }}
-        optionFilterProp="children"
-        onChange={onChange}
-        filterOption={(input, option) =>
-          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        }
-      >
-        {bodyshop.employees.map((emp) => (
-          <Select.Option value={emp.id} key={emp.id}>
-            {`${emp.first_name} ${emp.last_name}`}
-          </Select.Option>
-        ))}
-      </Select>
-      <Button
-        type="primary"
-        disabled={!assignment.employeeid || jobRO}
-        onClick={() => {
-          handleAdd(assignment);
-          setVisibility(false);
-        }}
-      >
-        Assign
-      </Button>
-      <Button onClick={() => setVisibility(false)}>Close</Button>
-    </div>
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <Select
+          id="employeeSelector"
+          showSearch
+          style={{ width: 200 }}
+          optionFilterProp="children"
+          onChange={onChange}
+          filterOption={(input, option) =>
+            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
+            0
+          }
+        >
+          {bodyshop.employees.map((emp) => (
+            <Select.Option value={emp.id} key={emp.id}>
+              {`${emp.first_name} ${emp.last_name}`}
+            </Select.Option>
+          ))}
+        </Select>
+      </Col>
+      <Col span={24}>
+        <Space wrap>
+          <Button
+            type="primary"
+            disabled={!assignment.employeeid || jobRO}
+            onClick={() => {
+              handleAdd(assignment);
+              setVisibility(false);
+            }}
+          >
+            Assign
+          </Button>
+          <Button onClick={() => setVisibility(false)}>Close</Button>
+        </Space>
+      </Col>
+    </Row>
   );
 
   return (
diff --git a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
index 43b581252..b301bc6f3 100644
--- a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
+++ b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
@@ -1,5 +1,13 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Select, Switch } from "antd";
+import {
+  Button,
+  Form,
+  notification,
+  Popover,
+  Select,
+  Space,
+  Switch,
+} from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -100,12 +108,14 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
         >
           <Switch />
         </Form.Item>
-        <Button type="danger" htmlType="submit">
-          {t("jobs.actions.convert")}
-        </Button>
-        <Button onClick={() => setVisible(false)}>
-          {t("general.actions.close")}
-        </Button>
+        <Space wrap>
+          <Button type="danger" htmlType="submit">
+            {t("jobs.actions.convert")}
+          </Button>
+          <Button onClick={() => setVisible(false)}>
+            {t("general.actions.close")}
+          </Button>
+        </Space>
       </Form>
     </div>
   );
diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
index 80c75af77..9f41556dd 100644
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -117,7 +117,9 @@ function JobsDocumentsComponent({
               galleryImages={galleryImages}
               deletionCallback={billsCallback || refetch}
             />
-            <JobsDocumentsGalleryReassign galleryImages={galleryImages} />
+            {!billId && (
+              <JobsDocumentsGalleryReassign galleryImages={galleryImages} />
+            )}
           </Space>
         </Col>
         <Col span={24}>
diff --git a/client/src/components/jobs-notes/jobs.notes.component.jsx b/client/src/components/jobs-notes/jobs.notes.component.jsx
index 1629ac560..e8354b026 100644
--- a/client/src/components/jobs-notes/jobs.notes.component.jsx
+++ b/client/src/components/jobs-notes/jobs.notes.component.jsx
@@ -5,7 +5,7 @@ import {
   EyeInvisibleFilled,
   WarningFilled,
 } from "@ant-design/icons";
-import { Button, Card, Table } from "antd";
+import { Button, Card, Space, Table } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -82,7 +82,7 @@ export function JobNotesComponent({
       key: "actions",
       width: 150,
       render: (text, record) => (
-        <span>
+        <Space wrap>
           <Button
             loading={deleteLoading}
             disabled={record.audit || jobRO}
@@ -104,7 +104,7 @@ export function JobNotesComponent({
           >
             <EditFilled />
           </Button>
-        </span>
+        </Space>
       ),
     },
   ];
diff --git a/client/src/components/note-upsert-modal/note-upsert-modal.component.jsx b/client/src/components/note-upsert-modal/note-upsert-modal.component.jsx
index 564421cf8..28e824bdd 100644
--- a/client/src/components/note-upsert-modal/note-upsert-modal.component.jsx
+++ b/client/src/components/note-upsert-modal/note-upsert-modal.component.jsx
@@ -1,4 +1,4 @@
-import { Form, Input, Switch } from "antd";
+import { Col, Form, Input, Row, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import NotesPresetButton from "../notes-preset-button/notes-preset-button.component";
@@ -7,37 +7,45 @@ export default function NoteUpsertModalComponent({ form }) {
   const { t } = useTranslation();
 
   return (
-    <div>
-      <Form.Item
-        label={t("notes.fields.critical")}
-        name="critical"
-        valuePropName="checked"
-      >
-        <Switch />
-      </Form.Item>
-      <Form.Item
-        label={t("notes.fields.private")}
-        name="private"
-        valuePropName="checked"
-      >
-        <Switch />
-      </Form.Item>
-      <Form.Item
-        label={t("notes.fields.text")}
-        name="text"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <Input.TextArea
-          rows={8}
-          placeholder={t("notes.labels.newnoteplaceholder")}
-        />
-      </Form.Item>
-      <NotesPresetButton form={form} />
-    </div>
+    <Row gutter={[16, 16]}>
+      <Col span={8}>
+        <Form.Item
+          label={t("notes.fields.critical")}
+          name="critical"
+          valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
+      </Col>
+      <Col span={8}>
+        <Form.Item
+          label={t("notes.fields.private")}
+          name="private"
+          valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
+      </Col>
+      <Col span={8}>
+        <NotesPresetButton form={form} />
+      </Col>
+      <Col span={24}>
+        <Form.Item
+          label={t("notes.fields.text")}
+          name="text"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input.TextArea
+            rows={8}
+            placeholder={t("notes.labels.newnoteplaceholder")}
+          />
+        </Form.Item>
+      </Col>
+    </Row>
   );
 }
diff --git a/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx b/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
index e74bc992e..9d732ea40 100644
--- a/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
+++ b/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
@@ -90,7 +90,12 @@ export function NoteUpsertModalContainer({
       }}
       destroyOnClose
     >
-      <Form form={form} onFinish={handleFinish} initialValues={existingNote}>
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        initialValues={existingNote}
+        layout="vertical"
+      >
         <NoteUpsertModalComponent form={form} />
       </Form>
     </Modal>
diff --git a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
index a5360b19f..ec7c8fd37 100644
--- a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
+++ b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
@@ -1,3 +1,4 @@
+import { Card } from "antd";
 import moment from "moment";
 import React from "react";
 import { connect } from "react-redux";
@@ -68,7 +69,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
   }, []);
 
   return (
-    <div>
+    <Card>
       <ResponsiveContainer width="100%" height={475}>
         <ComposedChart
           data={data}
@@ -108,6 +109,6 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
           />
         </ComposedChart>
       </ResponsiveContainer>
-    </div>
+    </Card>
   );
 }
diff --git a/client/src/components/scoreboard-day-stats/scoreboard-day-stats.component.jsx b/client/src/components/scoreboard-day-stats/scoreboard-day-stats.component.jsx
index 7475e7fd9..36b4a028b 100644
--- a/client/src/components/scoreboard-day-stats/scoreboard-day-stats.component.jsx
+++ b/client/src/components/scoreboard-day-stats/scoreboard-day-stats.component.jsx
@@ -26,18 +26,22 @@ export function ScoreboardDayStats({ bodyshop, date, entries }) {
   }, 0);
 
   return (
-    <div className='imex-flex-row__margin'>
-      <Card title={moment(date).format("D - ddd")}>
-        <Statistic
-          valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }}
-          value={bodyHrs.toFixed(1)}
-        />
-        <Statistic
-          valueStyle={{ color: dailyPaintTarget > paintHrs ? "red" : "green" }}
-          value={paintHrs.toFixed(1)}
-        />
-      </Card>
-    </div>
+    <Card
+      title={moment(date).format("D - ddd")}
+      className="ant-card-grid-hoverable"
+      style={{ height: "100%" }}
+    >
+      <Statistic
+        valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }}
+        label="B"
+        value={bodyHrs.toFixed(1)}
+      />
+      <Statistic
+        valueStyle={{ color: dailyPaintTarget > paintHrs ? "red" : "green" }}
+        label="P"
+        value={paintHrs.toFixed(1)}
+      />
+    </Card>
   );
 }
 export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardDayStats);
diff --git a/client/src/components/scoreboard-display/scoreboard-display.component.jsx b/client/src/components/scoreboard-display/scoreboard-display.component.jsx
index 8cd6655d4..6c126c736 100644
--- a/client/src/components/scoreboard-display/scoreboard-display.component.jsx
+++ b/client/src/components/scoreboard-display/scoreboard-display.component.jsx
@@ -1,6 +1,6 @@
+import { Col, Row } from "antd";
 import React from "react";
 import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component";
-import ScoreboardJobsList from "../scoreboard-jobs-list/scoreboard-jobs-list.component";
 import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component";
 import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
 
@@ -20,11 +20,18 @@ export default function ScoreboardDisplayComponent({ scoreboardSubscription }) {
   });
 
   return (
-    <div>
-      <ScoreboardTargetsTable />
-      <ScoreboardJobsList scoreBoardlist={scoreBoardlist} />
-      <ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
-      <ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
-    </div>
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <ScoreboardTargetsTable scoreBoardlist={scoreBoardlist} />
+      </Col>
+
+      <Col span={24}>
+        <ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
+      </Col>
+
+      <Col span={24}>
+        <ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
+      </Col>
+    </Row>
   );
 }
diff --git a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
index 99ed3773e..9b96febaf 100644
--- a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
+++ b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
@@ -1,11 +1,13 @@
 import { CalendarOutlined } from "@ant-design/icons";
-import { Col, Row, Statistic } from "antd";
+import { Card, Col, Row, Statistic } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import ScoreboardJobsList from "../scoreboard-jobs-list/scoreboard-jobs-list.component";
 import * as Util from "./scoreboard-targets-table.util";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -16,11 +18,14 @@ const mapDispatchToProps = (dispatch) => ({
 const rowGutter = [16, 16];
 const statSpans = { xs: 24, sm: 6 };
 
-export function ScoreboardTargetsTable({ bodyshop }) {
+export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
   const { t } = useTranslation();
 
   return (
-    <div>
+    <Card
+      title={t("scoreboard.labels.targets")}
+      extra={<ScoreboardJobsList scoreBoardlist={scoreBoardlist} />}
+    >
       <Row gutter={rowGutter}>
         <Col xs={24} sm={{ offset: 0, span: 4 }} lg={{ offset: 5, span: 4 }}>
           <Statistic
@@ -35,7 +40,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
               <Statistic
                 title={t("scoreboard.labels.dailytarget")}
                 value={bodyshop.scoreboard_target.dailyBodyTarget}
-                prefix='B'
+                prefix="B"
               />
             </Col>
             <Col {...statSpans}>
@@ -70,7 +75,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
             <Col {...statSpans}>
               <Statistic
                 value={bodyshop.scoreboard_target.dailyPaintTarget}
-                prefix='P'
+                prefix="P"
               />
             </Col>
             <Col {...statSpans}>
@@ -100,7 +105,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
           </Row>
         </Col>
       </Row>
-    </div>
+    </Card>
   );
 }
 export default connect(
diff --git a/client/src/components/vendors-form/vendors-form.component.jsx b/client/src/components/vendors-form/vendors-form.component.jsx
index 3118ae96c..f934b6b3a 100644
--- a/client/src/components/vendors-form/vendors-form.component.jsx
+++ b/client/src/components/vendors-form/vendors-form.component.jsx
@@ -1,9 +1,11 @@
 import { DeleteFilled } from "@ant-design/icons";
 import {
   Button,
+  Divider,
   Form,
   Input,
   InputNumber,
+  PageHeader,
   Select,
   Space,
   Switch,
@@ -27,18 +29,31 @@ export default function VendorsFormComponent({
   const { getFieldValue } = form;
   return (
     <div>
-      <Space>
-        <Button
-          onClick={() => form.submit()}
-          type="primary"
-          loading={formLoading}
-        >
-          {t("general.actions.save")}
-        </Button>
-        <Button type="danger" onClick={handleDelete} loading={formLoading}>
-          {t("general.actions.delete")}
-        </Button>
-      </Space>
+      <PageHeader
+        title={form.getFieldValue("name")}
+        extra={
+          <Space>
+            <Form.Item
+              label={t("vendors.fields.active")}
+              name="active"
+              initialValue={true}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Button
+              onClick={() => form.submit()}
+              type="primary"
+              loading={formLoading}
+            >
+              {t("general.actions.save")}
+            </Button>
+            <Button type="danger" onClick={handleDelete} loading={formLoading}>
+              {t("general.actions.delete")}
+            </Button>
+          </Space>
+        }
+      />
       <FormFieldsChanged form={form} />
       <LayoutFormRow grow>
         <Form.Item
@@ -50,14 +65,7 @@ export default function VendorsFormComponent({
         >
           <Input />
         </Form.Item>
-        <Form.Item
-          label={t("vendors.fields.active")}
-          name="active"
-          initialValue={true}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
+
         <Form.Item
           label={t("vendors.fields.email")}
           rules={[
@@ -104,7 +112,7 @@ export default function VendorsFormComponent({
           <Input />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow>
+      <LayoutFormRow grow>
         <Form.Item label={t("vendors.fields.discount")} name="discount">
           <InputNumber min={0} max={1} precision={2} />
         </Form.Item>
@@ -125,16 +133,14 @@ export default function VendorsFormComponent({
           </Select>
         </Form.Item>
       </LayoutFormRow>
-      <Typography.Title level={4}>
-        {t("vendors.labels.preferredmakes")}
-      </Typography.Title>
+      <Divider align="left">{t("vendors.labels.preferredmakes")}</Divider>
       <Form.List name="favorite">
         {(fields, { add, remove }) => {
           return (
             <div>
               {fields.map((field, index) => (
                 <Form.Item key={field.key}>
-                  <div style={{ display: "flex" }}>
+                  <Space wrap>
                     <Form.Item
                       label={t("vendors.fields.make")}
                       key={`${index}make`}
@@ -154,7 +160,7 @@ export default function VendorsFormComponent({
                         remove(field.name);
                       }}
                     />
-                  </div>
+                  </Space>
                 </Form.Item>
               ))}
               <Form.Item>
diff --git a/client/src/components/vendors-form/vendors-form.container.jsx b/client/src/components/vendors-form/vendors-form.container.jsx
index 2f3b9f1f4..746b875b5 100644
--- a/client/src/components/vendors-form/vendors-form.container.jsx
+++ b/client/src/components/vendors-form/vendors-form.container.jsx
@@ -119,6 +119,7 @@ function VendorsFormContainer({ refetch, bodyshop }) {
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
+
   return (
     <Form
       onFinish={handleFinish}
diff --git a/client/src/components/vendors-list/vendors-list.component.jsx b/client/src/components/vendors-list/vendors-list.component.jsx
index a2082663d..6e175e1fc 100644
--- a/client/src/components/vendors-list/vendors-list.component.jsx
+++ b/client/src/components/vendors-list/vendors-list.component.jsx
@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Input, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -75,47 +75,44 @@ export default function VendorsListComponent({
     : [];
 
   return (
-    <Table
-      loading={loading}
-      title={() => {
-        return (
-          <div className="imex-table-header">
-            <Button onClick={handleNewVendor}>
-              {t("vendors.actions.new")}
-            </Button>
-
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
-            <Input.Search
-              className="imex-table-header__search"
-              placeholder={t("general.labels.search")}
-              onChange={(e) => {
-                setSearchText(e.target.value);
-              }}
-              value={searchText}
-              enterButton
-            />
-          </div>
-        );
-      }}
-      pagination={{ position: "top" }}
-      columns={columns}
-      rowKey="id"
-      onChange={handleTableChange}
-      dataSource={filteredVendors}
-      rowSelection={{
-        onSelect: handleOnRowClick,
-        type: "radio",
-        selectedRowKeys: [selectedvendor],
-      }}
-      onRow={(record, rowIndex) => {
-        return {
-          onClick: (event) => {
-            handleOnRowClick(record);
-          },
-        };
-      }}
-    />
+    <Card
+      extra={
+        <Space wrap>
+          <Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onChange={(e) => {
+              setSearchText(e.target.value);
+            }}
+            value={searchText}
+            enterButton
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        pagination={{ position: "top" }}
+        columns={columns}
+        rowKey="id"
+        onChange={handleTableChange}
+        dataSource={filteredVendors}
+        rowSelection={{
+          onSelect: handleOnRowClick,
+          type: "radio",
+          selectedRowKeys: [selectedvendor],
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleOnRowClick(record);
+            },
+          };
+        }}
+      />
+    </Card>
   );
 }
diff --git a/client/src/components/vendors-list/vendors-list.container.jsx b/client/src/components/vendors-list/vendors-list.container.jsx
index 14d2c9292..771433a18 100644
--- a/client/src/components/vendors-list/vendors-list.container.jsx
+++ b/client/src/components/vendors-list/vendors-list.container.jsx
@@ -1,10 +1,10 @@
-import React from "react";
 import { useQuery } from "@apollo/client";
+import queryString from "query-string";
+import React from "react";
+import { useHistory, useLocation } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import VendorsListComponent from "./vendors-list.component";
-import queryString from "query-string";
-import { useHistory, useLocation } from "react-router-dom";
 
 export default function VendorsListContainer() {
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS);
diff --git a/client/src/pages/scoreboard/scoreboard.page.component.jsx b/client/src/pages/scoreboard/scoreboard.page.component.jsx
deleted file mode 100644
index 2483346fa..000000000
--- a/client/src/pages/scoreboard/scoreboard.page.component.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
-
-export default function ProductionBoardComponent({ scoreboardSubscription }) {
-  return (
-    <div>
-      <ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
-    </div>
-  );
-}
diff --git a/client/src/pages/scoreboard/scoreboard.page.container.jsx b/client/src/pages/scoreboard/scoreboard.page.container.jsx
index 7d108bdfc..3f17416aa 100644
--- a/client/src/pages/scoreboard/scoreboard.page.container.jsx
+++ b/client/src/pages/scoreboard/scoreboard.page.container.jsx
@@ -7,7 +7,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import ScoreboardPageComponent from "./scoreboard.page.component";
+import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
 import { useSubscription } from "@apollo/client";
 import { SUBSCRIPTION_SCOREBOARD } from "../../graphql/scoreboard.queries";
 import moment from "moment";
@@ -45,9 +45,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
 
   return (
     <RbacWrapper action="scoreboard:view">
-      <ScoreboardPageComponent
-        scoreboardSubscription={scoreboardSubscription}
-      />
+      <ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
     </RbacWrapper>
   );
 }
diff --git a/client/src/pages/shop-vendor/shop-vendor.page.component.jsx b/client/src/pages/shop-vendor/shop-vendor.page.component.jsx
index c0166034e..6eb6e2064 100644
--- a/client/src/pages/shop-vendor/shop-vendor.page.component.jsx
+++ b/client/src/pages/shop-vendor/shop-vendor.page.component.jsx
@@ -1,28 +1,45 @@
-import { Col, Row } from "antd";
+import { Drawer, Grid } from "antd";
+import queryString from "query-string";
 import React from "react";
+import { useHistory, useLocation } from "react-router-dom";
 import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
 import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
 
-const listSpan = {
-  md: { span: 24 },
-  lg: { span: 8 },
-};
-const formSapn = {
-  md: { span: 24 },
-  lg: { span: 16 },
-};
-
 export default function ShopVendorPageComponent() {
+  const search = queryString.parse(useLocation().search);
+  const { selectedvendor } = search;
+  const history = useHistory();
+
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "50%",
+    xl: "50%",
+    xxl: "45%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
+
   return (
     <div>
-      <Row gutter={[16, 16]}>
-        <Col {...listSpan}>
-          <VendorsListContainer />
-        </Col>
-        <Col {...formSapn}>
-          <VendorsFormContainer />
-        </Col>
-      </Row>
+      <VendorsListContainer />
+
+      <Drawer
+        width={drawerPercentage}
+        onClose={() => {
+          delete search.selectedvendor;
+          history.push({ search: queryString.stringify(search) });
+        }}
+        visible={selectedvendor}
+      >
+        <VendorsFormContainer />
+      </Drawer>
     </div>
   );
 }
diff --git a/client/src/pages/temporary-docs/temporary-docs.component.jsx b/client/src/pages/temporary-docs/temporary-docs.component.jsx
index f862fc850..d54898375 100644
--- a/client/src/pages/temporary-docs/temporary-docs.component.jsx
+++ b/client/src/pages/temporary-docs/temporary-docs.component.jsx
@@ -12,14 +12,11 @@ export default function TemporaryDocsComponent() {
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <div>
-      <div>Buttons to move and assign things.</div>
-      <JobsDocumentsComponent
-        data={data ? data.documents : []}
-        jobId={null}
-        billId={null}
-        refetch={refetch}
-      />
-    </div>
+    <JobsDocumentsComponent
+      data={data ? data.documents : []}
+      jobId={null}
+      billId={null}
+      refetch={refetch}
+    />
   );
 }
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 2ae91a9db..1168f070f 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1175,6 +1175,7 @@
 				},
 				"changeclass": "Changing the job's class can have fundamental impacts to already exported accounting items. Are you sure you want to do this?",
 				"checklistcompletedby": "Checklist completed by {{by}} at {{at}}",
+				"checklistdocuments": "Checklist Documents",
 				"checklists": "Checklists",
 				"closeconfirm": "Are you sure you want to close this job? This cannot be easily undone.",
 				"cost": "Cost",
@@ -1723,6 +1724,7 @@
 				"asoftodaytarget": "As of Today",
 				"dailytarget": "Daily",
 				"monthlytarget": "Monthly",
+				"targets": "Targets",
 				"weeklytarget": "Weekly",
 				"workingdays": "Working Days / Month"
 			},
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 6d6092ebb..53d5ea7dd 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1175,6 +1175,7 @@
 				},
 				"changeclass": "",
 				"checklistcompletedby": "",
+				"checklistdocuments": "",
 				"checklists": "",
 				"closeconfirm": "",
 				"cost": "",
@@ -1723,6 +1724,7 @@
 				"asoftodaytarget": "",
 				"dailytarget": "",
 				"monthlytarget": "",
+				"targets": "",
 				"weeklytarget": "",
 				"workingdays": ""
 			},
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 69288eb7e..1f21fe26d 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1175,6 +1175,7 @@
 				},
 				"changeclass": "",
 				"checklistcompletedby": "",
+				"checklistdocuments": "",
 				"checklists": "",
 				"closeconfirm": "",
 				"cost": "",
@@ -1723,6 +1724,7 @@
 				"asoftodaytarget": "",
 				"dailytarget": "",
 				"monthlytarget": "",
+				"targets": "",
 				"weeklytarget": "",
 				"workingdays": ""
 			},

From 10690ec1872fed91eb9eda8635a343fb1bf572f4 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 31 Mar 2021 17:51:00 -0700
Subject: [PATCH 7/7] Missing dependency for CI.

---
 client/src/components/vendors-form/vendors-form.component.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/vendors-form/vendors-form.component.jsx b/client/src/components/vendors-form/vendors-form.component.jsx
index f934b6b3a..fa262750a 100644
--- a/client/src/components/vendors-form/vendors-form.component.jsx
+++ b/client/src/components/vendors-form/vendors-form.component.jsx
@@ -9,7 +9,6 @@ import {
   Select,
   Space,
   Switch,
-  Typography,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";