From 045a3660a3e58dfa961d1246311b3f5faae56169 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Wed, 28 Sep 2022 11:30:11 -0700
Subject: [PATCH 1/4] IO-2054 Updated labels for multi AR.

---
 bodyshop_translations.babel                   | 42 +++++++++++++++++++
 .../pages/jobs-close/jobs-close.component.jsx | 12 +++++-
 client/src/translations/en_us/common.json     |  2 +
 client/src/translations/es/common.json        |  2 +
 client/src/translations/fr/common.json        |  2 +
 5 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index c905978c4..61ce03247 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -28335,6 +28335,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>pimraryamountpayable</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>
                                     <folder_node>
                                         <name>plitooltips</name>
                                         <children>
@@ -35325,6 +35346,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>external</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>findermodal</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/pages/jobs-close/jobs-close.component.jsx b/client/src/pages/jobs-close/jobs-close.component.jsx
index 3df8aafc6..4f014a240 100644
--- a/client/src/pages/jobs-close/jobs-close.component.jsx
+++ b/client/src/pages/jobs-close/jobs-close.component.jsx
@@ -416,7 +416,7 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
                       <Button
                         disabled={jobRO}
                         onClick={() => {
-                  add();
+                          add();
                         }}
                         style={{ width: "100%" }}
                       >
@@ -446,6 +446,14 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
                   : Dinero();
                 return (
                   <Space size="large" wrap align="center">
+                    <Statistic
+                      title={t("jobs.labels.total_cust_payable")}
+                      value={(job.job_totals
+                        ? Dinero(job.job_totals.totals.custPayable)
+                        : Dinero()
+                      ).toFormat()}
+                    />
+                    <Divider orientation="vertical" />
                     <Statistic
                       title={t("jobs.labels.total_repairs")}
                       value={(job.job_totals
@@ -460,7 +468,7 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
                     />
                     <Typography.Title>=</Typography.Title>
                     <Statistic
-                      title={t("jobs.labels.total_cust_payable")}
+                      title={t("jobs.labels.pimraryamountpayable")}
                       valueStyle={{
                         color: discrep.getAmount() > 0 ? "green" : "red",
                       }}
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 3570e04dc..ea078dada 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1662,6 +1662,7 @@
 				"partsfilter": "Parts Only",
 				"partssubletstotal": "Parts & Sublets Total",
 				"partstotal": "Parts Total (ex. Taxes)",
+				"pimraryamountpayable": "Total Primary Payable",
 				"plitooltips": {
 					"billtotal": "The total amount of all bill lines that have been posted against this RO (not including credits, taxes, or labor adjustments).",
 					"calculatedcreditsnotreceived": "The calculated credits not received is derived by subtracting the amount of credit memos entered from the <b>retail</b> total of returns created. This does not take into account whether the credit was marked as received. You can find more information <a href=\"https://help.imex.online/en/article/credits-not-received-changes-1jy9snw\" target=\"_blank\">here</a>.",
@@ -2090,6 +2091,7 @@
 				"customer": "Customer",
 				"edit": "Edit Payment",
 				"electronicpayment": "Use Electronic Payment Processing?",
+				"external": "External",
 				"findermodal": "ICBC Payment Finder",
 				"insurance": "Insurance",
 				"new": "New Payment",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 919e650e9..a479d3208 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1662,6 +1662,7 @@
 				"partsfilter": "",
 				"partssubletstotal": "",
 				"partstotal": "",
+				"pimraryamountpayable": "",
 				"plitooltips": {
 					"billtotal": "",
 					"calculatedcreditsnotreceived": "",
@@ -2090,6 +2091,7 @@
 				"customer": "",
 				"edit": "",
 				"electronicpayment": "",
+				"external": "",
 				"findermodal": "",
 				"insurance": "",
 				"new": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 82294d431..7f8077f2e 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1662,6 +1662,7 @@
 				"partsfilter": "",
 				"partssubletstotal": "",
 				"partstotal": "",
+				"pimraryamountpayable": "",
 				"plitooltips": {
 					"billtotal": "",
 					"calculatedcreditsnotreceived": "",
@@ -2090,6 +2091,7 @@
 				"customer": "",
 				"edit": "",
 				"electronicpayment": "",
+				"external": "",
 				"findermodal": "",
 				"insurance": "",
 				"new": "",

From f6b72ab428bd8273c32eb25eb4edfd5a102c6303 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 28 Sep 2022 11:47:48 -0700
Subject: [PATCH 2/4] IO-2065 Resolve parts status filtering.

---
 .../parts-queue.page.component.jsx            | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/client/src/pages/parts-queue/parts-queue.page.component.jsx b/client/src/pages/parts-queue/parts-queue.page.component.jsx
index c9725a905..5d6226bdb 100644
--- a/client/src/pages/parts-queue/parts-queue.page.component.jsx
+++ b/client/src/pages/parts-queue/parts-queue.page.component.jsx
@@ -1,6 +1,7 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Input, Space, Table } from "antd";
+import _ from "lodash";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,7 +15,6 @@ import OwnerNameDisplay from "../../components/owner-name-display/owner-name-dis
 import ProductionListColumnComment from "../../components/production-list-columns/production-list-columns.comment.component";
 import { QUERY_PARTS_QUEUE } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { onlyUnique } from "../../utils/arrayHelper";
 import { DateTimeFormatter, TimeAgoFormatter } from "../../utils/DateFormatter";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
@@ -94,6 +94,14 @@ export function PartsQueuePageComponent({ bodyshop }) {
     //  searchParams.page = pagination.current;
     searchParams.sortcolumn = sorter.columnKey;
     searchParams.sortorder = sorter.order;
+
+    if (filters.status) {
+      searchParams.statusFilters = JSON.stringify(
+        _.flattenDeep(filters.status)
+      );
+    } else {
+      delete searchParams.statusFilters;
+    }
     setFilter(filters);
     history.push({ search: queryString.stringify(searchParams) });
   };
@@ -136,19 +144,14 @@ export function PartsQueuePageComponent({ bodyshop }) {
       key: "status",
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder: sortcolumn === "status" && sortorder,
+      filteredValue: statusFilters ? JSON.parse(statusFilters) : null,
       filters:
-        (jobs &&
-          jobs
-            .map((j) => j.status)
-            .filter(onlyUnique)
-            .map((s) => {
-              return {
-                text: s || "No Status*",
-                value: [s],
-              };
-            })) ||
-        [],
-      onFilter: (value, record) => value.includes(record.status),
+        bodyshop.md_ro_statuses.active_statuses.map((s) => {
+          return {
+            text: s || "No Status*",
+            value: [s],
+          };
+        }) || [],
       render: (text, record) => {
         return record.status || t("general.labels.na");
       },

From 1c222db5a31ebe13be5d8f2188b33b87163400b6 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 28 Sep 2022 11:55:46 -0700
Subject: [PATCH 3/4] IO-2051 Mark appointment as arrived from checklist.

---
 .../job-checklist-form.component.jsx          |  28 +++-
 client/src/graphql/appointments.queries.js    | 154 ++++++++++--------
 2 files changed, 108 insertions(+), 74 deletions(-)

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 70c4703ff..956cb4761 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
@@ -7,7 +7,10 @@ import { connect } from "react-redux";
 import { useHistory, useLocation, useParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../../../firebase/firebase.utils";
-import { MARK_LATEST_APPOINTMENT_AS_ARRIVED } from "../../../../graphql/appointments.queries";
+import {
+  MARK_APPOINTMENT_ARRIVED,
+  MARK_LATEST_APPOINTMENT_ARRIVED,
+} from "../../../../graphql/appointments.queries";
 import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
 import {
   selectBodyshop,
@@ -41,7 +44,8 @@ export function JobChecklistForm({
   const { t } = useTranslation();
   const [intakeJob] = useMutation(UPDATE_JOB);
   const [loading, setLoading] = useState(false);
-  const [markAptArrived] = useMutation(MARK_LATEST_APPOINTMENT_AS_ARRIVED);
+  const [markAptArrived] = useMutation(MARK_APPOINTMENT_ARRIVED);
+  const [markLatestAptArrived] = useMutation(MARK_LATEST_APPOINTMENT_ARRIVED);
   const [updateOwner] = useMutation(UPDATE_OWNER);
 
   const { jobId } = useParams();
@@ -125,6 +129,18 @@ export function JobChecklistForm({
         variables: { appointmentId: search.appointmentId },
       });
 
+      if (!!appUpdate.errors) {
+        notification["error"]({
+          message: t("checklist.errors.complete", {
+            error: JSON.stringify(result.errors),
+          }),
+        });
+      }
+    } else if (type === "intake" && !search.appointmentId) {
+      const appUpdate = await markLatestAptArrived({
+        variables: { jobId: jobId },
+      });
+
       if (!!appUpdate.errors) {
         notification["error"]({
           message: t("checklist.errors.complete", {
@@ -133,6 +149,7 @@ export function JobChecklistForm({
         });
       }
     }
+
     if (type === "intake" && job.owner && job.owner.id) {
       //Updae Owner Allow to Text
       const updateOwnerResult = await updateOwner({
@@ -175,12 +192,7 @@ export function JobChecklistForm({
       });
     }
   };
-  console.log(job, {
-    removeFromProduction: true,
-    actual_completion:
-      job && job.actual_completion && moment(job.actual_completion),
-    actual_delivery: job && job.actual_delivery && moment(job.actual_delivery),
-  });
+
   return (
     <Card
       title={t("checklist.labels.checklist")}
diff --git a/client/src/graphql/appointments.queries.js b/client/src/graphql/appointments.queries.js
index e508e274e..d5942caca 100644
--- a/client/src/graphql/appointments.queries.js
+++ b/client/src/graphql/appointments.queries.js
@@ -1,77 +1,81 @@
 import { gql } from "@apollo/client";
 
 export const QUERY_ALL_ACTIVE_APPOINTMENTS = gql`
-query QUERY_ALL_ACTIVE_APPOINTMENTS(
-  $start: timestamptz!
-  $end: timestamptz!
-  $startd: date!
-  $endd: date!
-) {
-  employee_vacation(
-    where: { _or: [{ start: { _gte: $startd } },
-      { end: { _lte: $endd } },
-      {_and:[{start:{_lte: $startd}},{end:{_gte:$endd}}]}] }
+  query QUERY_ALL_ACTIVE_APPOINTMENTS(
+    $start: timestamptz!
+    $end: timestamptz!
+    $startd: date!
+    $endd: date!
   ) {
-    id
-    start
-    end
-    employee {
+    employee_vacation(
+      where: {
+        _or: [
+          { start: { _gte: $startd } }
+          { end: { _lte: $endd } }
+          { _and: [{ start: { _lte: $startd } }, { end: { _gte: $endd } }] }
+        ]
+      }
+    ) {
       id
-      last_name
-      first_name
+      start
+      end
+      employee {
+        id
+        last_name
+        first_name
+      }
     }
-  }
-  appointments(
-    where: {
-      canceled: { _eq: false }
-      end: { _lte: $end }
-      start: { _gte: $start }
-    }
-  ) {
-    start
-    id
-    end
-    arrived
-    title
-    isintake
-    block
-    color
-    note
-    job {
-      alt_transport
-      ro_number
-      ownr_ln
-      ownr_co_nm
-      ownr_fn
-      ownr_ph1
-      ownr_ph2
-      ownr_ea
-      clm_total
+    appointments(
+      where: {
+        canceled: { _eq: false }
+        end: { _lte: $end }
+        start: { _gte: $start }
+      }
+    ) {
+      start
       id
-      clm_no
-      ins_co_nm
-      v_model_yr
-      v_make_desc
-      v_model_desc
-      labhrs: joblines_aggregate(
-        where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }
-      ) {
-        aggregate {
-          sum {
-            mod_lb_hrs
+      end
+      arrived
+      title
+      isintake
+      block
+      color
+      note
+      job {
+        alt_transport
+        ro_number
+        ownr_ln
+        ownr_co_nm
+        ownr_fn
+        ownr_ph1
+        ownr_ph2
+        ownr_ea
+        clm_total
+        id
+        clm_no
+        ins_co_nm
+        v_model_yr
+        v_make_desc
+        v_model_desc
+        labhrs: joblines_aggregate(
+          where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }
+        ) {
+          aggregate {
+            sum {
+              mod_lb_hrs
+            }
+          }
+        }
+        larhrs: joblines_aggregate(
+          where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }
+        ) {
+          aggregate {
+            sum {
+              mod_lb_hrs
+            }
           }
         }
       }
-      larhrs: joblines_aggregate(
-        where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }
-      ) {
-        aggregate {
-          sum {
-            mod_lb_hrs
-          }
-        }
-      }
-    }
     }
   }
 `;
@@ -382,8 +386,8 @@ export const QUERY_SCHEDULE_LOAD_DATA = gql`
   }
 `;
 
-export const MARK_LATEST_APPOINTMENT_AS_ARRIVED = gql`
-  mutation MARK_LATEST_APPOINTMENT_AS_ARRIVED($appointmentId: uuid!) {
+export const MARK_APPOINTMENT_ARRIVED = gql`
+  mutation MARK_APPOINTMENT_ARRIVED($appointmentId: uuid!) {
     update_appointments(
       where: { id: { _eq: $appointmentId } }
       _set: { arrived: true }
@@ -396,3 +400,21 @@ export const MARK_LATEST_APPOINTMENT_AS_ARRIVED = gql`
     }
   }
 `;
+export const MARK_LATEST_APPOINTMENT_ARRIVED = gql`
+  mutation MARK_LATEST_APPOINTMENT_ARRIVED($jobId: uuid!) {
+    update_appointments(
+      where: {
+        jobid: { _eq: $jobId }
+        canceled: { _eq: false }
+        isintake: { _eq: true }
+      }
+      _set: { arrived: true }
+    ) {
+      affected_rows
+      returning {
+        id
+        arrived
+      }
+    }
+  }
+`;

From 1105431909fc2018d300d34340293a397124af56 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 28 Sep 2022 12:07:27 -0700
Subject: [PATCH 4/4] IO-2054 Improved spacing for QB Multi Payer

---
 .../pages/jobs-close/jobs-close.component.jsx | 294 +++++++++---------
 1 file changed, 151 insertions(+), 143 deletions(-)

diff --git a/client/src/pages/jobs-close/jobs-close.component.jsx b/client/src/pages/jobs-close/jobs-close.component.jsx
index 4f014a240..f7e6d3795 100644
--- a/client/src/pages/jobs-close/jobs-close.component.jsx
+++ b/client/src/pages/jobs-close/jobs-close.component.jsx
@@ -3,6 +3,7 @@ import { useApolloClient, useMutation } from "@apollo/client";
 import {
   Alert,
   Button,
+  Col,
   Divider,
   Form,
   Input,
@@ -10,6 +11,7 @@ import {
   notification,
   PageHeader,
   Popconfirm,
+  Row,
   Select,
   Space,
   Statistic,
@@ -329,156 +331,162 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
         </LayoutFormRow>
         <Divider>{t("jobs.labels.multipayers")}</Divider>
         {Qb_Multi_Ar.treatment === "on" && (
-          <Space>
-            <Form.List
-              name={["qb_multiple_payers"]}
-              rules={[
-                ({ getFieldValue }) => ({
-                  validator(_, value) {
-                    let totalAllocated = Dinero();
+          <Row gutter={[16, 16]}>
+            <Col lg={8} md={24}>
+              <Form.List
+                name={["qb_multiple_payers"]}
+                rules={[
+                  ({ getFieldValue }) => ({
+                    validator(_, value) {
+                      let totalAllocated = Dinero();
 
-                    const payers = form.getFieldValue("qb_multiple_payers");
-                    payers &&
-                      payers.forEach((payer) => {
-                        totalAllocated = totalAllocated.add(
-                          Dinero({
-                            amount: Math.round((payer?.amount || 0) * 100),
-                          })
-                        );
-                      });
-                    const discrep = job.job_totals
-                      ? Dinero(job.job_totals.totals.total_repairs).subtract(
-                          totalAllocated
-                        )
-                      : Dinero();
-                    return discrep.getAmount() > 0
-                      ? Promise.resolve()
-                      : Promise.reject(
-                          new Error(
-                            t("jobs.labels.additionalpayeroverallocation")
+                      const payers = form.getFieldValue("qb_multiple_payers");
+                      payers &&
+                        payers.forEach((payer) => {
+                          totalAllocated = totalAllocated.add(
+                            Dinero({
+                              amount: Math.round((payer?.amount || 0) * 100),
+                            })
+                          );
+                        });
+                      const discrep = job.job_totals
+                        ? Dinero(job.job_totals.totals.total_repairs).subtract(
+                            totalAllocated
                           )
-                        );
-                  },
-                }),
-              ]}
-            >
-              {(fields, { add, remove }) => {
-                return (
-                  <div>
-                    {fields.map((field, index) => (
-                      <Form.Item key={field.key}>
-                        <Space>
-                          <Form.Item
-                            label={t("jobs.fields.qb_multiple_payers.name")}
-                            key={`${index}name`}
-                            name={[field.name, "name"]}
-                            rules={[
-                              {
-                                required: true,
-                              },
-                            ]}
-                          >
-                            <Select
-                              style={{ minWidth: "12rem" }}
-                              disabled={jobRO}
+                        : Dinero();
+                      return discrep.getAmount() > 0
+                        ? Promise.resolve()
+                        : Promise.reject(
+                            new Error(
+                              t("jobs.labels.additionalpayeroverallocation")
+                            )
+                          );
+                    },
+                  }),
+                ]}
+              >
+                {(fields, { add, remove }) => {
+                  return (
+                    <div>
+                      {fields.map((field, index) => (
+                        <Form.Item key={field.key}>
+                          <Space>
+                            <Form.Item
+                              label={t("jobs.fields.qb_multiple_payers.name")}
+                              key={`${index}name`}
+                              name={[field.name, "name"]}
+                              rules={[
+                                {
+                                  required: true,
+                                },
+                              ]}
                             >
-                              {bodyshop.md_ins_cos.map((s) => (
-                                <Select.Option key={s.name} value={s.name}>
-                                  {s.name}
-                                </Select.Option>
-                              ))}
-                            </Select>
-                          </Form.Item>
+                              <Select
+                                style={{ minWidth: "12rem" }}
+                                disabled={jobRO}
+                              >
+                                {bodyshop.md_ins_cos.map((s) => (
+                                  <Select.Option key={s.name} value={s.name}>
+                                    {s.name}
+                                  </Select.Option>
+                                ))}
+                              </Select>
+                            </Form.Item>
 
-                          <Form.Item
-                            label={t("jobs.fields.qb_multiple_payers.amount")}
-                            key={`${index}amount`}
-                            name={[field.name, "amount"]}
-                            rules={[
-                              {
-                                required: true,
-                              },
-                            ]}
-                          >
-                            <CurrencyInput min={0} disabled={jobRO} />
-                          </Form.Item>
+                            <Form.Item
+                              label={t("jobs.fields.qb_multiple_payers.amount")}
+                              key={`${index}amount`}
+                              name={[field.name, "amount"]}
+                              rules={[
+                                {
+                                  required: true,
+                                },
+                              ]}
+                            >
+                              <CurrencyInput min={0} disabled={jobRO} />
+                            </Form.Item>
 
-                          <DeleteFilled
-                            disabled={jobRO}
-                            onClick={() => {
-                              remove(field.name);
-                            }}
-                          />
-                        </Space>
+                            <DeleteFilled
+                              disabled={jobRO}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                          </Space>
+                        </Form.Item>
+                      ))}
+                      <Form.Item>
+                        <Button
+                          disabled={jobRO}
+                          onClick={() => {
+                            add();
+                          }}
+                          style={{ width: "100%" }}
+                        >
+                          {t("jobs.actions.dms.addpayer")}
+                        </Button>
                       </Form.Item>
-                    ))}
-                    <Form.Item>
-                      <Button
-                        disabled={jobRO}
-                        onClick={() => {
-                          add();
-                        }}
-                        style={{ width: "100%" }}
-                      >
-                        {t("jobs.actions.dms.addpayer")}
-                      </Button>
-                    </Form.Item>
-                  </div>
-                );
-              }}
-            </Form.List>
-            <Form.Item shouldUpdate>
-              {() => {
-                //Perform Calculation to determine discrepancy.
-                let totalAllocated = Dinero();
+                    </div>
+                  );
+                }}
+              </Form.List>
+            </Col>
+            <Col lg={16} md={24}>
+              <Form.Item shouldUpdate>
+                {() => {
+                  //Perform Calculation to determine discrepancy.
+                  let totalAllocated = Dinero();
 
-                const payers = form.getFieldValue("qb_multiple_payers");
-                payers &&
-                  payers.forEach((payer) => {
-                    totalAllocated = totalAllocated.add(
-                      Dinero({ amount: Math.round((payer?.amount || 0) * 100) })
-                    );
-                  });
-                const discrep = job.job_totals
-                  ? Dinero(job.job_totals.totals.total_repairs).subtract(
-                      totalAllocated
-                    )
-                  : Dinero();
-                return (
-                  <Space size="large" wrap align="center">
-                    <Statistic
-                      title={t("jobs.labels.total_cust_payable")}
-                      value={(job.job_totals
-                        ? Dinero(job.job_totals.totals.custPayable)
-                        : Dinero()
-                      ).toFormat()}
-                    />
-                    <Divider orientation="vertical" />
-                    <Statistic
-                      title={t("jobs.labels.total_repairs")}
-                      value={(job.job_totals
-                        ? Dinero(job.job_totals.totals.total_repairs)
-                        : Dinero()
-                      ).toFormat()}
-                    />
-                    <Typography.Title>-</Typography.Title>
-                    <Statistic
-                      title={t("jobs.labels.dms.totalallocated")}
-                      value={totalAllocated.toFormat()}
-                    />
-                    <Typography.Title>=</Typography.Title>
-                    <Statistic
-                      title={t("jobs.labels.pimraryamountpayable")}
-                      valueStyle={{
-                        color: discrep.getAmount() > 0 ? "green" : "red",
-                      }}
-                      value={discrep.toFormat()}
-                    />
-                  </Space>
-                );
-              }}
-            </Form.Item>
-          </Space>
+                  const payers = form.getFieldValue("qb_multiple_payers");
+                  payers &&
+                    payers.forEach((payer) => {
+                      totalAllocated = totalAllocated.add(
+                        Dinero({
+                          amount: Math.round((payer?.amount || 0) * 100),
+                        })
+                      );
+                    });
+                  const discrep = job.job_totals
+                    ? Dinero(job.job_totals.totals.total_repairs).subtract(
+                        totalAllocated
+                      )
+                    : Dinero();
+                  return (
+                    <Space size="large" wrap align="center">
+                      <Statistic
+                        title={t("jobs.labels.total_cust_payable")}
+                        value={(job.job_totals
+                          ? Dinero(job.job_totals.totals.custPayable)
+                          : Dinero()
+                        ).toFormat()}
+                      />
+                      <Divider type="vertical" />
+                      <Statistic
+                        title={t("jobs.labels.total_repairs")}
+                        value={(job.job_totals
+                          ? Dinero(job.job_totals.totals.total_repairs)
+                          : Dinero()
+                        ).toFormat()}
+                      />
+                      <Typography.Title>-</Typography.Title>
+                      <Statistic
+                        title={t("jobs.labels.dms.totalallocated")}
+                        value={totalAllocated.toFormat()}
+                      />
+                      <Typography.Title>=</Typography.Title>
+                      <Statistic
+                        title={t("jobs.labels.pimraryamountpayable")}
+                        valueStyle={{
+                          color: discrep.getAmount() > 0 ? "green" : "red",
+                        }}
+                        value={discrep.toFormat()}
+                      />
+                    </Space>
+                  );
+                }}
+              </Form.Item>
+            </Col>
+          </Row>
         )}
         <Divider />
         <JobsCloseLines job={job} />