Fixed up job details lines table + jobs totals page.

2020-06-11 14:09:12 -07:00
parent 886c7e9cb9
commit 4e5c305f95
20 changed files with 562 additions and 517 deletions
--- a/client/src/components/allocations-employee-label/allocations-employee-label.component.jsx
+++ b/client/src/components/allocations-employee-label/allocations-employee-label.component.jsx
@@ -4,10 +4,11 @@ import { MdRemoveCircleOutline } from "react-icons/md";

 export default function AllocationsLabelComponent({ allocation, handleClick }) {
  return (
-    <div style={{ display: "flex" }}>
+    <div style={{ display: "flex", alignItems: "center" }}>
      <span>
-        {`${allocation.employee.first_name || ""} ${allocation.employee
-          .last_name || ""} (${allocation.hours || ""})`}
+        {`${allocation.employee.first_name || ""} ${
+          allocation.employee.last_name || ""
+        } (${allocation.hours || ""})`}
      </span>
      <Icon
        style={{ color: "red", padding: "0px 4px" }}
--- a/client/src/components/allocations-employee-label/allocations-employee-label.container.jsx
+++ b/client/src/components/allocations-employee-label/allocations-employee-label.container.jsx
@@ -8,19 +8,21 @@ import { useTranslation } from "react-i18next";
 export default function AllocationsLabelContainer({ allocation, refetch }) {
  const [deleteAllocation] = useMutation(DELETE_ALLOCATION);
  const { t } = useTranslation();
-  const handleClick = e => {
+
+  const handleClick = (e) => {
    e.preventDefault();
    deleteAllocation({ variables: { id: allocation.id } })
-      .then(r => {
+      .then((r) => {
        notification["success"]({
-          message: t("allocations.successes.deleted")
+          message: t("allocations.successes.deleted"),
        });
        if (refetch) refetch();
      })
-      .catch(error => {
+      .catch((error) => {
        notification["error"]({ message: t("allocations.errors.deleting") });
      });
  };
+
  return (
    <AllocationsLabelComponent
      allocation={allocation}
--- a/client/src/components/fcm-notification/fcm-notification.component.jsx
+++ b/client/src/components/fcm-notification/fcm-notification.component.jsx
@@ -21,7 +21,6 @@ class FcmNotificationComponent extends Component {
      .requestPermission()
      .then(async function () {
        const token = await messaging.getToken();
-        console.log("Instance Token", token);
        client.mutate({
          mutation: UPDATE_FCM_TOKEN,
          variables: { authEmail: currentUser.email, token: { [token]: true } },
--- a/client/src/components/form-items-formatted/currency-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/currency-form-item.component.jsx
@@ -4,8 +4,9 @@ function FormItemCurrency(props, ref) {
  return (
    <InputNumber
      {...props}
-      //formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
-      // parser={value => value.replace(/\$\s?|(,*)/g, "")}
+      style={{ width: "initial" }}
+      formatter={(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+      parser={(value) => value.replace(/\$\s?|(,*)/g, "")}
      precision={2}
    />
  );
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines.component.jsx
@@ -10,8 +10,11 @@ import AllocationsAssignmentContainer from "../allocations-assignment/allocation
 import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
 import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
+import { onlyUnique } from "../../utils/arrayHelper";

 const mapDispatchToProps = (dispatch) => ({
+  setJobLineEditContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "jobLineEdit" })),
  setPartsOrderContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "partsOrder" })),
 });
@@ -34,30 +37,20 @@ export function JobLinesComponent({

  const columns = [
    {
-      title: t("joblines.fields.line_no"),
+      title: "#",
      dataIndex: "line_no",
      key: "line_no",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
      sorter: (a, b) => a.line_no - b.line_no,
      sortOrder:
        state.sortedInfo.columnKey === "line_no" && state.sortedInfo.order,
-      //ellipsis: true,
-      editable: true,
-      width: 75,
    },
    {
-      title: t("joblines.fields.unq_seq"),
-      dataIndex: "unq_seq",
-      key: "unq_seq",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
-      sorter: (a, b) => a.unq_seq - b.unq_seq,
+      title: t("joblines.fields.line_ind"),
+      dataIndex: "line_ind",
+      key: "line_ind",
+      sorter: (a, b) => alphaSort(a.line_ind, b.line_ind),
      sortOrder:
-        state.sortedInfo.columnKey === "unq_seq" && state.sortedInfo.order,
-      //ellipsis: true,
-      editable: true,
-      width: 75,
+        state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
    },
    {
      title: t("joblines.fields.line_desc"),
@@ -67,7 +60,6 @@ export function JobLinesComponent({
      sortOrder:
        state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
      ellipsis: true,
-      editable: true,
    },
    {
      title: t("joblines.fields.oem_partno"),
@@ -81,8 +73,6 @@ export function JobLinesComponent({
      sortOrder:
        state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
      ellipsis: true,
-      editable: true,
-
      render: (text, record) => (
        <span>
          {record.oem_partno ? record.oem_partno : record.op_code_desc}
@@ -99,24 +89,28 @@ export function JobLinesComponent({
      filters: [
        {
          text: t("jobs.labels.partsfilter"),
-          value: "parts",
+          value: ["PAN", "PAL", "PAA", "PAS", "PASL"],
+        },
+        {
+          text: "PAN",
+          value: ["PAN"],
+        },
+        {
+          text: "PAL",
+          value: ["PAL"],
+        },
+        {
+          text: "PAA",
+          value: ["PAA"],
+        },
+        {
+          text: "PAS/PASL",
+          value: ["PAS", "PASL"],
        },
      ],
-      // specify the condition of filtering result
-      // here is that finding the name started with `value`
-      onFilter: (value, record) =>
-        ["PAN", "PAL", "PAA", "PAS", "PASL"].includes(record.part_type),
-      ellipsis: true,
-      editable: true,
-    },
-    {
-      title: t("joblines.fields.line_ind"),
-      dataIndex: "line_ind",
-      key: "line_ind",
-      sorter: (a, b) => alphaSort(a.line_ind, b.line_ind),
-      sortOrder:
-        state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
+      onFilter: (value, record) => value.includes(record.part_type),
    },
+
    {
      title: t("joblines.fields.act_price"),
      dataIndex: "act_price",
@@ -125,7 +119,6 @@ export function JobLinesComponent({
      sortOrder:
        state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
      ellipsis: true,
-
      render: (text, record) => (
        <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
      ),
@@ -134,7 +127,6 @@ export function JobLinesComponent({
      title: t("joblines.fields.part_qty"),
      dataIndex: "part_qty",
      key: "part_qty",
-      ellipsis: true,
    },
    {
      title: t("joblines.fields.total"),
@@ -144,7 +136,6 @@ export function JobLinesComponent({
      sortOrder:
        state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
      ellipsis: true,
-
      render: (text, record) => (
        <CurrencyFormatter>
          {record.act_price * record.part_qty}
@@ -155,6 +146,7 @@ export function JobLinesComponent({
      title: t("joblines.fields.mod_lb_hrs"),
      dataIndex: "mod_lb_hrs",
      key: "mod_lb_hrs",
+      responsive: ["lg"],
      sorter: (a, b) => a.mod_lb_hrs - b.mod_lb_hrs,
      sortOrder:
        state.sortedInfo.columnKey === "mod_lb_hrs" && state.sortedInfo.order,
@@ -166,12 +158,24 @@ export function JobLinesComponent({
      sorter: (a, b) => alphaSort(a.status, b.status),
      sortOrder:
        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters:
+        (jobLines &&
+          jobLines
+            .map((l) => l.status)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Status*",
+                value: [s],
+              };
+            })) ||
+        [],
+      onFilter: (value, record) => value.includes(record.status),
    },
    {
      title: t("allocations.fields.employee"),
      dataIndex: "employee",
      key: "employee",
-
      sorter: (a, b) =>
        alphaSort(
          a.allocations[0] &&
@@ -194,12 +198,6 @@ export function JobLinesComponent({
                />
              ))
            : null}
-          <AllocationsAssignmentContainer
-            key={record.id}
-            refetch={refetch}
-            jobLineId={record.id}
-            hours={record.mod_lb_hrs}
-          />
        </span>
      ),
    },
@@ -208,7 +206,7 @@ export function JobLinesComponent({
      dataIndex: "actions",
      key: "actions",
      render: (text, record) => (
-        <span>
+        <div>
          <Button
            onClick={() => {
              setJobLineEditContext({
@@ -218,7 +216,13 @@ export function JobLinesComponent({
            }}>
            {t("general.actions.edit")}
          </Button>
-        </span>
+          <AllocationsAssignmentContainer
+            key={record.id}
+            refetch={refetch}
+            jobLineId={record.id}
+            hours={record.mod_lb_hrs}
+          />
+        </div>
      ),
    },
  ];
@@ -243,16 +247,17 @@ export function JobLinesComponent({
    <div>
      <PartsOrderModalContainer />
      <Table
+        columns={columns}
+        rowKey='id'
+        loading={loading}
+        size='small'
+        pagination={{ position: "top", defaultPageSize: 50 }}
+        dataSource={jobLines}
+        onChange={handleTableChange}
+        scroll={{ x: true, y: "40rem" }}
        title={() => {
          return (
-            <div>
-              <Input.Search
-                placeholder={t("general.labels.search")}
-                onChange={(e) => {
-                  e.preventDefault();
-                  setSearchText(e.target.value);
-                }}
-              />
+            <div className='imex-table-header'>
              <Button
                disabled={selectedLines.length > 0 ? false : true}
                onClick={() => {
@@ -282,11 +287,18 @@ export function JobLinesComponent({
                }}>
                {t("joblines.actions.new")}
              </Button>
+              <div className='imex-table-header__search'>
+                <Input.Search
+                  placeholder={t("general.labels.search")}
+                  onChange={(e) => {
+                    e.preventDefault();
+                    setSearchText(e.target.value);
+                  }}
+                />
+              </div>
            </div>
          );
        }}
-        loading={loading}
-        size='small'
        expandedRowRender={(record) => (
          <div style={{ margin: 0 }}>
            <strong>{t("parts_orders.labels.orderhistory")}</strong>
@@ -301,7 +313,6 @@ export function JobLinesComponent({
            ))}
          </div>
        )}
-        pagination={{ position: "top", defaultPageSize: 25 }}
        rowSelection={{
          selectedRowKeys: selectedLines.map((item) => item.id),
          onSelectAll: (selected, selectedRows, changeRows) => {
@@ -310,10 +321,6 @@ export function JobLinesComponent({
          onSelect: (record, selected, selectedRows, nativeEvent) =>
            setSelectedLines(selectedRows),
        }}
-        columns={columns}
-        rowKey='id'
-        dataSource={jobLines}
-        onChange={handleTableChange}
      />
    </div>
  );
--- a/client/src/components/job-detail-lines/job-lines.container.jsx
+++ b/client/src/components/job-detail-lines/job-lines.container.jsx
@@ -1,70 +1,59 @@
 import { useQuery } from "@apollo/react-hooks";
 import React, { useState } from "react";
-
 import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
 import AlertComponent from "../alert/alert.component";
 import JobLinesComponent from "./job-lines.component";

-import { connect } from "react-redux";
-import { setModalContext } from "../../redux/modals/modals.actions";
-const mapDispatchToProps = dispatch => ({
-  setJobLineEditContext: context =>
-    dispatch(setModalContext({ context: context, modal: "jobLineEdit" }))
-});
-
-export function JobLinesContainer({ jobId, setJobLineEditContext }) {
+function JobLinesContainer({ jobId }) {
  const { loading, error, data, refetch } = useQuery(GET_JOB_LINES_BY_PK, {
    variables: { id: jobId },
-    fetchPolicy: "network-only"
  });

  const [searchText, setSearchText] = useState("");
  const [selectedLines, setSelectedLines] = useState([]);

-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  const jobLines =
+    data && data.joblines
+      ? searchText
+        ? data.joblines.filter(
+            (jl) =>
+              (jl.unq_seq || "")
+                .toString()
+                .toLowerCase()
+                .includes(searchText.toLowerCase()) ||
+              (jl.line_desc || "")
+                .toLowerCase()
+                .includes(searchText.toLowerCase()) ||
+              (jl.part_type || "")
+                .toLowerCase()
+                .includes(searchText.toLowerCase()) ||
+              (jl.oem_partno || "")
+                .toLowerCase()
+                .includes(searchText.toLowerCase()) ||
+              (jl.op_code_desc || "")
+                .toLowerCase()
+                .includes(searchText.toLowerCase()) ||
+              (jl.db_price || "")
+                .toString()
+                .includes(searchText.toLowerCase()) ||
+              (jl.act_price || "").toString().includes(searchText.toLowerCase())
+          )
+        : data.joblines
+      : null;

  return (
    <JobLinesComponent
      loading={loading}
      refetch={refetch}
-      jobLines={
-        data && data.joblines
-          ? searchText
-            ? data.joblines.filter(
-                jl =>
-                  (jl.unq_seq || "")
-                    .toString()
-                    .toLowerCase()
-                    .includes(searchText.toLowerCase()) ||
-                  (jl.line_desc || "")
-                    .toLowerCase()
-                    .includes(searchText.toLowerCase()) ||
-                  (jl.part_type || "")
-                    .toLowerCase()
-                    .includes(searchText.toLowerCase()) ||
-                  (jl.oem_partno || "")
-                    .toLowerCase()
-                    .includes(searchText.toLowerCase()) ||
-                  (jl.op_code_desc || "")
-                    .toLowerCase()
-                    .includes(searchText.toLowerCase()) ||
-                  (jl.db_price || "")
-                    .toString()
-                    .includes(searchText.toLowerCase()) ||
-                  (jl.act_price || "")
-                    .toString()
-                    .includes(searchText.toLowerCase())
-              )
-            : data.joblines
-          : null
-      }
+      jobLines={jobLines}
      setSearchText={setSearchText}
      selectedLines={selectedLines}
      setSelectedLines={setSelectedLines}
      jobId={jobId}
-      setJobLineEditContext={setJobLineEditContext}
    />
  );
 }

-export default connect(null, mapDispatchToProps)(JobLinesContainer);
+export default JobLinesContainer;
--- a/client/src/components/job-totals-table/job-totals-table.component.jsx
+++ b/client/src/components/job-totals-table/job-totals-table.component.jsx
@@ -6,6 +6,8 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import { CalculateJob } from "./job-totals.utility";
+import "./job-totals-table.styles.scss";
+
 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
@@ -23,231 +25,186 @@ export function JobsTotalsTableComponent({ bodyshop, job }) {
    console.log("Totals was falsey.");
    return <LoadingSkeleton />;
  }
-  return (
-    <div>
-      <Row>
-        <Descriptions
-          bordered
-          size="small"
-          column={3}
-          title={t("jobs.labels.rates")}
-        >
-          <Descriptions.Item label={t("jobs.fields.rate_laa")}>
-            <Statistic
-              value={totals.rates.laa.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.laa.hours.toFixed(2)} @ ${
-                totals.rates.laa.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_lab")}>
-            <Statistic
-              value={totals.rates.lab.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.lab.hours.toFixed(2)} @ ${
-                totals.rates.lab.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_lad")}>
-            <Statistic
-              value={totals.rates.lad.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.lad.hours.toFixed(2)} @ ${
-                totals.rates.lad.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_lae")}>
-            <Statistic
-              value={totals.rates.lae.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.lae.hours.toFixed(2)} @ ${
-                totals.rates.lae.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_laf")}>
-            <Statistic
-              value={totals.rates.laf.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.laf.hours.toFixed(2)} @ ${
-                totals.rates.laf.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_lag")}>
-            <Statistic
-              value={totals.rates.lag.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.lag.hours.toFixed(2)} @ ${
-                totals.rates.lag.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_lam")}>
-            <Statistic
-              value={totals.rates.lam.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.lam.hours.toFixed(2)} @ ${
-                totals.rates.lam.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_lar")}>
-            <Statistic
-              value={totals.rates.lar.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.lar.hours.toFixed(2)} @ ${
-                totals.rates.lar.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_las")}>
-            <Statistic
-              value={totals.rates.las.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.las.hours.toFixed(2)} @ ${
-                totals.rates.las.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_lau")}>
-            <Statistic
-              value={totals.rates.lau.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.lau.hours.toFixed(2)} @ ${
-                totals.rates.lau.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_la1")}>
-            <Statistic
-              value={totals.rates.la1.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.la1.hours.toFixed(2)} @ ${
-                totals.rates.la1.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_la2")}>
-            <Statistic
-              value={totals.rates.la2.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.la2.hours.toFixed(2)} @ ${
-                totals.rates.la2.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_la3")}>
-            <Statistic
-              value={totals.rates.la3.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.la3.hours.toFixed(2)} @ ${
-                totals.rates.la3.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_la4")}>
-            <Statistic
-              value={totals.rates.la4.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.la4.hours.toFixed(2)} @ ${
-                totals.rates.la4.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.fields.rate_atp")}>
-            <Statistic
-              value={totals.rates.atp.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.atp.hours.toFixed(2)} @ ${
-                totals.rates.atp.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.labels.mapa")}>
-            <Statistic
-              value={totals.rates.mapa.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.mapa.hours.toFixed(2)} @ ${
-                totals.rates.mapa.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item label={t("jobs.labels.shop_mat")}>
-            <Statistic
-              value={totals.rates.mash.total.toFormat()}
-              precision={2}
-              suffix={`(${totals.rates.mash.hours.toFixed(2)} @ ${
-                totals.rates.mash.rate
-              })`}
-            />
-          </Descriptions.Item>
-          <Descriptions.Item
-            style={{ color: "red" }}
-            label={t("jobs.labels.rates_subtotal")}
-          >
-            <Statistic value={totals.rates.subtotal.toFormat()} />
-          </Descriptions.Item>
-        </Descriptions>
-      </Row>
-      <Row>
-        <Col span={8}>
-          <Descriptions
-            bordered
-            size="small"
-            column={1}
-            title={t("jobs.labels.partssubletstotal")}
-          >
-            <Descriptions.Item label={t("jobs.labels.partstotal")}>
-              <Statistic
-                value={totals.parts.parts.total.toFormat()}
-                suffix={`(${totals.parts.parts.subtotal.toFormat()} ± ${totals.parts.parts.adjustments.toFormat()})`}
-              />
-            </Descriptions.Item>
-            <Descriptions.Item label={t("jobs.labels.subletstotal")}>
-              <Statistic
-                value={totals.parts.sublets.total.toFormat()}
-                suffix={`(${totals.parts.sublets.subtotal.toFormat()} ± ${totals.parts.sublets.adjustments.toFormat()})`}
-              />
-            </Descriptions.Item>
-          </Descriptions>
-        </Col>

-        <Col span={8}>
-          <Descriptions
-            bordered
-            size="small"
-            column={1}
-            title={t("jobs.labels.totals")}
-          >
-            <Descriptions.Item label={t("jobs.labels.subtotal")}>
-              <Statistic value={totals.totals.subtotal.toFormat()} />
-            </Descriptions.Item>
-            <Descriptions.Item label={t("jobs.labels.federal_tax_amt")}>
-              <Statistic value={totals.totals.federal_tax.toFormat()} />
-            </Descriptions.Item>
-            <Descriptions.Item label={t("jobs.labels.state_tax_amt")}>
-              <Statistic value={totals.totals.state_tax.toFormat()} />
-            </Descriptions.Item>
-            <Descriptions.Item label={t("jobs.labels.local_tax_amt")}>
-              <Statistic value={totals.totals.local_tax.toFormat()} />
-            </Descriptions.Item>
-          </Descriptions>
-        </Col>
-        <Col span={8}>
-          <Statistic
-            title={t("jobs.labels.total_repairs")}
-            value={totals.totals.total_repairs.toFormat()}
-          />
-          <Statistic
-            title={t("jobs.labels.net_repairs")}
-            value={totals.totals.net_repairs.toFormat()}
-          />
-        </Col>
-      </Row>
+  return (
+    <div className='job-totals-container'>
+      <div className='job-totals-tables'>
+        <table className='job-totals-rates-table'>
+          <thead>
+            <tr>
+              <th>{t("jobs.labels.rates")}</th>
+              <th>$</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>{t("jobs.fields.rate_laa")}</td>
+              <td>{totals.rates.laa.total.toFormat()}</td>
+              <td>{`(${totals.rates.laa.hours.toFixed(2)} @ ${
+                totals.rates.laa.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_lab")}</td>
+              <td>{totals.rates.lab.total.toFormat()}</td>
+              <td>{`(${totals.rates.lab.hours.toFixed(2)} @ ${
+                totals.rates.lab.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_lad")}</td>
+              <td>{totals.rates.lad.total.toFormat()}</td>
+              <td>{`(${totals.rates.lad.hours.toFixed(2)} @ ${
+                totals.rates.lad.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_lae")}</td>
+              <td>{totals.rates.lae.total.toFormat()}</td>
+              <td>{`(${totals.rates.lae.hours.toFixed(2)} @ ${
+                totals.rates.lae.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_laf")}</td>
+              <td>{totals.rates.laf.total.toFormat()}</td>
+              <td>{`(${totals.rates.laf.hours.toFixed(2)} @ ${
+                totals.rates.laf.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_lag")}</td>
+              <td>{totals.rates.lag.total.toFormat()}</td>
+              <td>{`(${totals.rates.lag.hours.toFixed(2)} @ ${
+                totals.rates.lag.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_lam")}</td>
+              <td>{totals.rates.lam.total.toFormat()}</td>
+              <td>{`(${totals.rates.lam.hours.toFixed(2)} @ ${
+                totals.rates.lam.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_lar")}</td>
+              <td>{totals.rates.lar.total.toFormat()}</td>
+              <td>{`(${totals.rates.lar.hours.toFixed(2)} @ ${
+                totals.rates.lar.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_las")}</td>
+              <td>{totals.rates.las.total.toFormat()}</td>
+              <td>{`(${totals.rates.las.hours.toFixed(2)} @ ${
+                totals.rates.las.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_lau")}</td>
+              <td>{totals.rates.lau.total.toFormat()}</td>
+              <td>{`(${totals.rates.lau.hours.toFixed(2)} @ ${
+                totals.rates.lau.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_la1")}</td>
+              <td>{totals.rates.la1.total.toFormat()}</td>
+              <td>{`(${totals.rates.la1.hours.toFixed(2)} @ ${
+                totals.rates.la1.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_la2")}</td>
+              <td>{totals.rates.la2.total.toFormat()}</td>
+              <td>{`(${totals.rates.la2.hours.toFixed(2)} @ ${
+                totals.rates.la2.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_la3")}</td>
+              <td>{totals.rates.la3.total.toFormat()}</td>
+              <td>{`(${totals.rates.la3.hours.toFixed(2)} @ ${
+                totals.rates.la3.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_la4")}</td>
+              <td>{totals.rates.la4.total.toFormat()}</td>
+              <td>{`(${totals.rates.la4.hours.toFixed(2)} @ ${
+                totals.rates.la4.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.fields.rate_atp")}</td>
+              <td>{totals.rates.atp.total.toFormat()}</td>
+              <td>{`(${totals.rates.atp.hours.toFixed(2)} @ ${
+                totals.rates.atp.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.labels.mapa")}</td>
+              <td>{totals.rates.mapa.total.toFormat()}</td>
+              <td>{`(${totals.rates.mapa.hours.toFixed(2)} @ ${
+                totals.rates.mapa.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.labels.mash")}</td>
+              <td>{totals.rates.mash.total.toFormat()}</td>
+              <td>{`(${totals.rates.mash.hours.toFixed(2)} @ ${
+                totals.rates.mash.rate
+              })`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.labels.rates_subtotal")}</td>
+              <td>{totals.rates.subtotal.toFormat()}</td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+        <table className='job-totals-parts-table'>
+          <tbody>
+            <tr>
+              <td>{t("jobs.labels.partstotal")}</td>
+              <td>{totals.parts.parts.total.toFormat()}</td>
+              <td>{`(${totals.parts.parts.subtotal.toFormat()} ± ${totals.parts.parts.adjustments.toFormat()})`}</td>
+            </tr>
+            <tr>
+              <td>{t("jobs.labels.subletstotal")}</td>
+              <td>{totals.parts.sublets.total.toFormat()}</td>
+              <td>{`(${totals.parts.sublets.subtotal.toFormat()} ± ${totals.parts.sublets.adjustments.toFormat()})`}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div className='job-totals-stats'>
+        <Statistic
+          title={t("jobs.labels.subtotal")}
+          value={totals.totals.subtotal.toFormat()}
+        />
+        <Statistic
+          title={t("jobs.labels.state_tax_amt")}
+          value={totals.totals.state_tax.toFormat()}
+        />
+        <Statistic
+          title={t("jobs.labels.local_tax_amt")}
+          value={totals.totals.local_tax.toFormat()}
+        />
+        <Statistic
+          title={t("jobs.labels.federal_tax_amt")}
+          value={totals.totals.federal_tax.toFormat()}
+        />
+        <Statistic
+          title={t("jobs.labels.total_repairs")}
+          value={totals.totals.total_repairs.toFormat()}
+        />
+        <Statistic
+          title={t("jobs.labels.net_repairs")}
+          value={totals.totals.net_repairs.toFormat()}
+        />
+      </div>
    </div>
  );
 }
--- a/client/src/components/job-totals-table/job-totals-table.styles.scss
+++ b/client/src/components/job-totals-table/job-totals-table.styles.scss
@@ -0,0 +1,24 @@
+.job-totals-container {
+  display: flex;
+  flex-flow: wrap;
+}
+.job-totals-tables {
+  flex: 1;
+  display: block;
+}
+
+.job-totals-rates-table,
+.job-totals-parts-table {
+  border: black;
+  width: 100%;
+}
+
+.job-totals-stats {
+  margin: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  .ant-statistic {
+    margin: 0.5rem;
+  }
+}
--- a/client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx
+++ b/client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx
@@ -1,4 +1,4 @@
-import { Form, Input, Switch, InputNumber, Typography } from "antd";
+import { Form, Input, InputNumber, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import FormRow from "../layout-form-row/layout-form-row.component";
--- a/client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx
+++ b/client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx
@@ -2,131 +2,128 @@ import { Col, Divider, Form, Input, InputNumber, Row } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import JobTotalsTable from "../job-totals-table/job-totals-table.component";
+import FormRow from "../layout-form-row/layout-form-row.component";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 export default function JobsDetailFinancials({ job }) {
  const { t } = useTranslation();

  return (
-    <Row>
-      <Col offset={1} span={7}>
-        <Form.Item label={t("jobs.fields.ded_amt")} name='ded_amt'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.ded_status")} name='ded_status'>
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("jobs.fields.depreciation_taxes")}
-          name='depreciation_taxes'>
-          <InputNumber />
-        </Form.Item>
-        TODO This is equivalent of GST payable.
-        <Form.Item
-          label={t("jobs.fields.federal_tax_payable")}
-          name='federal_tax_payable'>
-          <InputNumber />
-        </Form.Item>
-        TODO equivalent of other customer amount
-        <Form.Item
-          label={t("jobs.fields.other_amount_payable")}
-          name='other_amount_payable'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("jobs.fields.towing_payable")}
-          name='towing_payable'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("jobs.fields.storage_payable")}
-          name='storage_payable'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("jobs.fields.adjustment_bottom_line")}
-          name='adjustment_bottom_line'>
-          <InputNumber />
-        </Form.Item>
-        <Divider />
-        <Form.Item
-          label={t("jobs.fields.labor_rate_desc")}
-          name='labor_rate_desc'>
-          <Input />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_lab")} name='rate_lab'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_lad")} name='rate_lad'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_lae")} name='rate_lae'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_lar")} name='rate_lar'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_las")} name='rate_las'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_laf")} name='rate_laf'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_lam")} name='rate_lam'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_lag")} name='rate_lag'>
-          <InputNumber />
-        </Form.Item>
-        Note //TODO Remove ATP rate?
-        <Form.Item label={t("jobs.fields.rate_atp")} name='rate_atp'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_lau")} name='rate_lau'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_la1")} name='rate_la1'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_la2")} name='rate_la2'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_la3")} name='rate_la3'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_la4")} name='rate_la4'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_mapa")} name='rate_mapa'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_mash")} name='rate_mash'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_mahw")} name='rate_mahw'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_ma2s")} name='rate_ma2s'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_ma3s")} name='rate_ma3s'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_mabl")} name='rate_mabl'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_macs")} name='rate_macs'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_matd")} name='rate_matd'>
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.rate_laa")} name='rate_laa'>
-          <InputNumber />
-        </Form.Item>
+    <Row gutter={[32, 32]}>
+      <Col span={12}>
+        <FormRow header={t("jobs.forms.dedinfo")}>
+          <Form.Item label={t("jobs.fields.ded_status")} name='ded_status'>
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.ded_amt")} name='ded_amt'>
+            <CurrencyInput />
+          </Form.Item>
+        </FormRow>
+        <FormRow>
+          <Form.Item
+            label={t("jobs.fields.depreciation_taxes")}
+            name='depreciation_taxes'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.other_amount_payable")}
+            name='other_amount_payable'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.towing_payable")}
+            name='towing_payable'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.storage_payable")}
+            name='storage_payable'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.federal_tax_payable")}
+            name='federal_tax_payable'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.adjustment_bottom_line")}
+            name='adjustment_bottom_line'>
+            <CurrencyInput />
+          </Form.Item>
+        </FormRow>
+        <FormRow header={t("jobs.forms.laborrates")}>
+          <Form.Item label={t("jobs.fields.rate_laa")} name='rate_laa'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_lab")} name='rate_lab'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_lad")} name='rate_lad'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_lae")} name='rate_lae'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_lar")} name='rate_lar'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_las")} name='rate_las'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_laf")} name='rate_laf'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_lam")} name='rate_lam'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_lag")} name='rate_lag'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_la1")} name='rate_la1'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_la2")} name='rate_la2'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_la3")} name='rate_la3'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_la4")} name='rate_la4'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_atp")} name='rate_atp'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_lau")} name='rate_lau'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_mapa")} name='rate_mapa'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_mash")} name='rate_mash'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_mahw")} name='rate_mahw'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_ma2s")} name='rate_ma2s'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_ma3s")} name='rate_ma3s'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_mabl")} name='rate_mabl'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_macs")} name='rate_macs'>
+            <CurrencyInput />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.rate_matd")} name='rate_matd'>
+            <CurrencyInput />
+          </Form.Item>
+        </FormRow>
      </Col>
-      <Col offset={1} span={15}>
+      <Col span={12}>
        <JobTotalsTable job={job} />
-        <p>Mitchell: {JSON.stringify(job.cieca_ttl, null, "\t")}</p>
-        <p>Mine:{JSON.stringify(job.job_totals, null, "\t")}</p>
      </Col>
    </Row>
  );
--- a/client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx
+++ b/client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx
@@ -1,10 +1,10 @@
-import { DatePicker, Divider, Form, Input, Typography } from "antd";
+import { DatePicker, Form, Input } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
-import FormRow from "../layout-form-row/layout-form-row.component";
 import Car from "../job-damage-visual/job-damage-visual.component";
+import FormRow from "../layout-form-row/layout-form-row.component";

 export default function JobsDetailInsurance({ job, form }) {
  const { getFieldValue } = form;
--- 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,6 @@
 import React from "react";
 import { Row, Col, Typography } from "antd";
+import "./layout-form-row.styles.scss";

 export default function LayoutFormRow({ header, children }) {
  if (!!!children.length) {
@@ -8,7 +9,6 @@ export default function LayoutFormRow({ header, children }) {
  }
  const rowGutter = { gutter: [32, 32] };
  const colSpan = (maxspan) => {
-    console.log("maxspan", maxspan);
    return {
      xs: {
        span: 24,
@@ -25,7 +25,7 @@ export default function LayoutFormRow({ header, children }) {
  };

  return (
-    <div>
+    <div className='imex-form-row'>
      {header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
      <Row {...rowGutter}>
        {children.map((c, idx) => (
--- a/client/src/components/layout-form-row/layout-form-row.styles.scss
+++ b/client/src/components/layout-form-row/layout-form-row.styles.scss
@@ -0,0 +1,6 @@
+//Override Antd Row margin to save space on forms.
+.imex-form-row {
+  .ant-row {
+    margin-bottom: 0rem;
+  }
+}