Added invoice totals + high level reconciliation on PLI jobs tab. BOD-26

bodyshop_translations.babel

@@ -5902,6 +5902,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>retailtotal</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>state_tax</name>
                                         <definition_loaded>false</definition_loaded>
@@ -9374,6 +9395,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>difference</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>documents</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/invoice-form/invoice-form.component.jsx

@@ -44,21 +44,23 @@ export default function InvoiceFormComponent({
         setDiscount(matchingVendors[0].discount);
       }
     }
-  }, [form, setDiscount, vendorAutoCompleteOptions]);
+    if (form.getFieldValue("jobid")) {
+      loadLines({ variables: { id: form.getFieldValue("jobid") } });
+    }
+  }, [form, setDiscount, vendorAutoCompleteOptions, loadLines]);
 
   return (
-    <div className="invoice-form-wrapper">
+    <div className='invoice-form-wrapper'>
-      <div className="invoice-form-invoice-details">
+      <div className='invoice-form-invoice-details'>
         <Form.Item
-          name="jobid"
+          name='jobid'
           label={t("invoices.fields.ro_number")}
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}
+          ]}>
-        >
           <JobSearchSelect
             options={roAutoCompleteOptions}
             disabled={invoiceEdit}
@@ -71,81 +73,73 @@ export default function InvoiceFormComponent({
         </Form.Item>
         <Form.Item
           label={t("invoices.fields.vendor")}
-          name="vendorid"
+          name='vendorid'
           style={{ display: invoiceEdit ? "none" : null }}
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}
+          ]}>
-        >
           <VendorSearchSelect
             options={vendorAutoCompleteOptions}
             onSelect={handleVendorSelect}
           />
         </Form.Item>
       </div>
-      <div className="invoice-form-invoice-details">
+      <div className='invoice-form-invoice-details'>
         <Form.Item
           label={t("invoices.fields.invoice_number")}
-          name="invoice_number"
+          name='invoice_number'
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}
+          ]}>
-        >
           <Input />
         </Form.Item>
         <Form.Item
           label={t("invoices.fields.date")}
-          name="date"
+          name='date'
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}
+          ]}>
-        >
           <DatePicker />
         </Form.Item>
         <Form.Item
           label={t("invoices.fields.is_credit_memo")}
-          name="is_credit_memo"
+          name='is_credit_memo'
-          valuePropName="checked"
+          valuePropName='checked'>
-        >
           <Switch />
         </Form.Item>
         <Form.Item
           label={t("invoices.fields.total")}
-          name="total"
+          name='total'
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}
+          ]}>
-        >
           <CurrencyInput />
         </Form.Item>
         <Form.Item
           label={t("invoices.fields.federal_tax_rate")}
-          name="federal_tax_rate"
+          name='federal_tax_rate'>
-        >
           <CurrencyInput />
         </Form.Item>
         <Form.Item
           label={t("invoices.fields.state_tax_rate")}
-          name="state_tax_rate"
+          name='state_tax_rate'>
-        >
           <CurrencyInput />
         </Form.Item>
         <Form.Item
           label={t("invoices.fields.local_tax_rate")}
-          name="local_tax_rate"
+          name='local_tax_rate'>
-        >
           <CurrencyInput />
         </Form.Item>
       </div>
@@ -161,19 +155,18 @@ export default function InvoiceFormComponent({
         // </Form.Item>
       }
       <Form.Item
-        name="upload"
+        name='upload'
-        label="Upload"
+        label='Upload'
         style={{ display: invoiceEdit ? "none" : null }}
-        valuePropName="fileList"
+        valuePropName='fileList'
         getValueFromEvent={(e) => {
           console.log("Upload event:", e);
           if (Array.isArray(e)) {
             return e;
           }
           return e && e.fileList;
-        }}
+        }}>
-      >
+        <Upload name='logo' beforeUpload={() => false} listType='picture'>
-        <Upload name="logo" beforeUpload={() => false} listType="picture">
           <Button>Click to upload</Button>
         </Upload>
       </Form.Item>
@@ -196,7 +189,7 @@ export default function InvoiceFormComponent({
             totals = CalculateInvoiceTotal(values);
           if (!!totals)
             return (
-              <div className="invoice-form-totals">
+              <div className='invoice-form-totals'>
                 <Statistic
                   title={t("invoices.labels.subtotal")}
                   value={totals.subtotal.toFormat()}

client/src/components/invoices-list-table/invoices-list-table.component.jsx

@@ -1,16 +1,18 @@
-import { Button, Descriptions, Table } from "antd";
+import { Button, Descriptions, Table, Checkbox } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import { SyncOutlined } from "@ant-design/icons";
 
 export default function InvoicesListTableComponent({
   loading,
   invoices,
   selectedInvoice,
   handleOnRowClick,
+  refetch,
 }) {
   const { t } = useTranslation();
 
@@ -65,8 +67,7 @@ export default function InvoicesListTableComponent({
       key: "actions",
       render: (text, record) => (
         <Link
-          to={`/manage/invoices?invoiceid=${record.id}&vendorid=${record.vendorid}`}
+          to={`/manage/invoices?invoiceid=${record.id}&vendorid=${record.vendorid}`}>
-        >
           <Button>{t("invoices.actions.edit")}</Button>
         </Link>
       ),
@@ -120,24 +121,74 @@ export default function InvoicesListTableComponent({
           state.sortedInfo.columnKey === "cost_center" &&
           state.sortedInfo.order,
       },
+      {
+        title: t("invoicelines.fields.federal_tax_applicable"),
+        dataIndex: "applicable_taxes.federal",
+        key: "applicable_taxes.federal",
+        render: (text, record) => (
+          <Checkbox
+            disabled
+            checked={
+              (record.applicable_taxes && record.applicable_taxes.federal) ||
+              false
+            }
+          />
+        ),
+      },
+      {
+        title: t("invoicelines.fields.state_tax_applicable"),
+        dataIndex: "applicable_taxes.state",
+        key: "applicable_taxes.state",
+        render: (text, record) => (
+          <Checkbox
+            disabled
+            checked={
+              (record.applicable_taxes && record.applicable_taxes.state) ||
+              false
+            }
+          />
+        ),
+      },
+      {
+        title: t("invoicelines.fields.local_tax_applicable"),
+        dataIndex: "applicable_taxes.local",
+        key: "applicable_taxes.local",
+        render: (text, record) => (
+          <Checkbox
+            disabled
+            checked={
+              (record.applicable_taxes && record.applicable_taxes.local) ||
+              false
+            }
+          />
+        ),
+      },
     ];
 
     return (
       <div>
-        <Descriptions title="User Info">
+        <Descriptions
-          <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
+          title={`${t("invoices.fields.invoice_number")} ${
-          <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
+            record.invoice_number
-          <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
+          }`}>
-          <Descriptions.Item label="Remark">empty</Descriptions.Item>
+          <Descriptions.Item label={t("invoices.fields.federal_tax_rate")}>
-          <Descriptions.Item label="Address">
+            {record.federal_tax_rate || ""}
-            No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+          </Descriptions.Item>
+          <Descriptions.Item label={t("invoices.fields.state_tax_rate")}>
+            {record.state_tax_rate || ""}
+          </Descriptions.Item>
+          <Descriptions.Item label={t("invoices.fields.local_tax_rate")}>
+            {record.local_tax_rate || ""}
+          </Descriptions.Item>
+          <Descriptions.Item label={t("invoices.fields.is_credit_memo")}>
+            <Checkbox disabled checked={record.is_credit_memo || false} />
           </Descriptions.Item>
         </Descriptions>
         <Table
-          size="small"
+          size='small'
           pagination={{ position: "top", defaultPageSize: 25 }}
           columns={columns.map((item) => ({ ...item }))}
-          rowKey="id"
+          rowKey='id'
           dataSource={record.invoicelines}
         />
       </div>
@@ -147,11 +198,18 @@ export default function InvoicesListTableComponent({
   return (
     <Table
       loading={loading}
-      size="small"
+      size='small'
+      title={() => (
+        <div>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+        </div>
+      )}
       expandedRowRender={rowExpander}
       pagination={{ position: "top", defaultPageSize: 25 }}
       columns={columns.map((item) => ({ ...item }))}
-      rowKey="id"
+      rowKey='id'
       dataSource={invoices}
       onChange={handleTableChange}
       expandable={{

client/src/components/job-invoices-total/job-invoices-total.component.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import { Statistic, Descriptions } from "antd";
+import { useTranslation } from "react-i18next";
+import Dinero from "dinero.js";
+
+export default function JobInvoiceTotals({ loading, invoices, jobTotals }) {
+  const { t } = useTranslation();
+  if (loading) return <LoadingSkeleton />;
+  const totals = JSON.parse(jobTotals);
+
+  let invoiceTotals = Dinero({ amount: 0 });
+  invoices.forEach((i) =>
+    i.invoicelines.forEach((il) => {
+      invoiceTotals = invoiceTotals.add(
+        Dinero({
+          amount:
+            ((il.actual_price || 0) * i.is_credit_memo ? -1 : 1 || 0) * 100,
+        })
+      );
+    })
+  );
+
+  const discrepancy = Dinero(totals.parts.parts.total).subtract(invoiceTotals);
+
+  return (
+    <div>
+      <Descriptions
+        bordered
+        size='small'
+        column={1}
+        title={t("jobs.labels.partssubletstotal")}>
+        <Descriptions.Item label={t("jobs.labels.partstotal")}>
+          <Statistic
+            value={Dinero(totals.parts.parts.total).toFormat()}
+            suffix={`(${Dinero(
+              totals.parts.parts.subtotal
+            ).toFormat()} ± ${Dinero(
+              totals.parts.parts.adjustments
+            ).toFormat()})`}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label={t("jobs.labels.subletstotal")}>
+          <Statistic
+            value={Dinero(totals.parts.sublets.total).toFormat()}
+            suffix={`(${Dinero(
+              totals.parts.sublets.subtotal
+            ).toFormat()} ± ${Dinero(
+              totals.parts.sublets.adjustments
+            ).toFormat()})`}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label={t("invoices.labels.retailtotal")}>
+          <Statistic value={invoiceTotals.toFormat()} />
+        </Descriptions.Item>
+        <Descriptions.Item label={t("invoices.labels.discrepancy")}>
+          <Statistic
+            valueStyle={{
+              color: discrepancy.getAmount === 0 ? "green" : "red",
+            }}
+            value={discrepancy.toFormat()}
+          />
+        </Descriptions.Item>
+      </Descriptions>
+    </div>
+  );
+}

client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx

@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import AlertComponent from "../alert/alert.component";
 import InvoicesListTableComponent from "../invoices-list-table/invoices-list-table.component";
+import JobInvoicesTotalsComponent from "../job-invoices-total/job-invoices-total.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setInvoiceEnterContext: (context) =>
@@ -27,13 +28,19 @@ export function JobsDetailPliComponent({
               job,
             },
           });
-        }}
+        }}>
-      >
         Enter Invoice
       </Button>
       {invoicesQuery.error ? (
-        <AlertComponent message={invoicesQuery.error.message} type="error" />
+        <AlertComponent message={invoicesQuery.error.message} type='error' />
       ) : null}
+
+      <JobInvoicesTotalsComponent
+        invoices={invoicesQuery.data ? invoicesQuery.data.invoices : null}
+        loading={invoicesQuery.loading}
+        jobTotals={job.job_totals}
+      />
+
       <InvoicesListTableComponent
         loading={invoicesQuery.loading}
         handleOnRowClick={handleOnRowClick}

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -12,7 +12,7 @@ function JobsDocumentsComponent({
   invoicesCallback,
 }) {
   const [galleryImages, setgalleryImages] = useState([]);
-  console.log("Gallery Data", data);
+
   useEffect(() => {
     setgalleryImages(
       data.reduce((acc, value) => {
@@ -34,7 +34,7 @@ function JobsDocumentsComponent({
   }, [data, setgalleryImages]);
 
   return (
-    <div className="clearfix">
+    <div className='clearfix'>
       <DocumentsUploadContainer
         jobId={jobId}
         invoiceId={invoiceId}

client/src/components/labor-allocations-table/labor-allocations-table.component.jsx

@@ -31,7 +31,7 @@ export function LaborAllocationsTable({ joblines, timetickets, bodyshop }) {
       </Typography.Title>
 
       <Row>
-        <Col span={12}>
+        <Col span={6}>
           <strong>{t("timetickets.fields.cost_center")}</strong>
         </Col>
         <Col span={6}>
@@ -40,12 +40,23 @@ export function LaborAllocationsTable({ joblines, timetickets, bodyshop }) {
         <Col span={6}>
           <strong>{t("jobs.labels.hrs_claimed")}</strong>
         </Col>
+        <Col span={6}>
+          <strong>{t("jobs.labels.difference")}</strong>
+        </Col>
       </Row>
       {totals.map((t, idx) => (
         <Row key={idx}>
-          <Col span={12}>{t.cost_center}</Col>
+          <Col span={6}>{t.cost_center}</Col>
-          <Col span={6}>{t.total}</Col>
+          <Col span={6}>{t.total.toFixed(2)}</Col>
-          <Col span={6}>{t.claimed}</Col>
+          <Col span={6}>{t.claimed.toFixed(2)}</Col>
+          <Col span={6}>
+            <strong
+              style={{
+                color: Math.round(t.total - t.claimed) > 0 ? "green" : "red",
+              }}>
+              {(t.total - t.claimed).toFixed(2)}
+            </strong>
+          </Col>
         </Row>
       ))}
     </div>

client/src/graphql/invoices.queries.js

@@ -49,6 +49,9 @@ export const QUERY_INVOICES_BY_JOBID = gql`
       total
       invoice_number
       date
+      federal_tax_rate
+      state_tax_rate
+      local_tax_rate
       invoicelines {
         actual_price
         quantity
@@ -56,6 +59,7 @@ export const QUERY_INVOICES_BY_JOBID = gql`
         cost_center
         id
         line_desc
+        applicable_taxes
       }
     }
   }

client/src/pages/invoice-detail/invoice-detail.page.component.jsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function InvoiceDetailPageComponent() {
-  return <div>Invoice Detail Page Component</div>;
-}

client/src/pages/invoice-detail/invoice-detail.page.container.jsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { useParams } from "react-router-dom";
-import InvoiceDetailPageComponent from "./invoice-detail.page.component";
-import { useQuery } from "@apollo/react-hooks";
-import { QUERY_INVOICE_BY_PK } from "../../graphql/invoices.queries";
-import AlertComponent from "../../components/alert/alert.component";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import { Form } from "antd";
-
-export default function InvoiceDetailPageContainer() {
-  const { invoiceId } = useParams();
-  const [form] = Form.useForm();
-
-  const { loading, error, data } = useQuery(QUERY_INVOICE_BY_PK, {
-    variables: { invoiceid: invoiceId },
-    skip: !!!invoiceId,
-  });
-
-  if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
-
-  return (
-    <Form form={form} initialValues={data ? data.invoices_by_pk : {}}>
-      <InvoiceDetailPageComponent />
-    </Form>
-  );
-}

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -1,28 +1,16 @@
-import Icon, {
+import Icon, { BarsOutlined, CalendarFilled, DollarCircleOutlined, FileImageFilled, ToolFilled } from "@ant-design/icons";
-  BarsOutlined,
-  CalendarFilled,
-  DollarCircleOutlined,
-  FileImageFilled,
-  ToolFilled,
-} from "@ant-design/icons";
 import { Form, notification, Tabs } from "antd";
 import moment from "moment";
+import queryString from "query-string";
 import React, { lazy, Suspense } from "react";
 import { useTranslation } from "react-i18next";
-import {
+import { FaHardHat, FaHistory, FaInfo, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
-  FaHardHat,
-  FaHistory,
-  FaInfo,
-  FaRegStickyNote,
-  FaShieldAlt,
-} from "react-icons/fa";
-import { useHistory, useLocation } from "react-router-dom";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import queryString from "query-string";
 import { connect } from "react-redux";
+import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import { CalculateJob } from "../../components/job-totals-table/job-totals.utility";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const JobsLinesContainer = lazy(() =>
   import("../../components/job-detail-lines/job-lines.container")
@@ -127,14 +115,6 @@ export function JobsDetailPage({
       fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}>
       <ScheduleJobModalContainer />
       <JobLineUpsertModalContainer />
-
-      <button
-        onClick={() => {
-          let r = CalculateJob(job, bodyshop.shoprates);
-          console.log("r", r);
-        }}>
-        Calculate
-      </button>
       <Form
         form={form}
         //onFieldsChange={(a, b) => console.log("a,b", a, b)}

client/src/pages/manage/manage.page.component.jsx

@@ -67,9 +67,7 @@ const ContractsList = lazy(() =>
 const InvoicesListPage = lazy(() =>
   import("../invoices/invoices.page.container")
 );
-const InvoiceDetailPage = lazy(() =>
+
-  import("../invoice-detail/invoice-detail.page.container")
-);
 const EnterInvoiceModalContainer = lazy(() =>
   import("../../components/invoice-enter-modal/invoice-enter-modal.container")
 );
@@ -201,11 +199,6 @@ export default function Manage({ match }) {
                 path={`${match.path}/invoices`}
                 component={InvoicesListPage}
               />
-              <Route
-                exact
-                path={`${match.path}/invoices/:invoiceId`}
-                component={InvoiceDetailPage}
-              />
               <Route
                 exact
                 path={`${match.path}/owners`}

client/src/translations/en_us/common.json

@@ -407,6 +407,7 @@
 				"local_tax": "Local Tax",
 				"new": "New Invoice",
 				"noneselected": "No invoice selected.",
+				"retailtotal": "Retail Total of Invoices (Ex. Taxes)",
 				"state_tax": "State Tax",
 				"subtotal": "Subtotal"
 			},
@@ -597,6 +598,7 @@
 					"vehicleinfo": "Vehicle Info"
 				},
 				"creating_new_job": "Creating new job...",
+				"difference": "Difference",
 				"documents": "Documents",
 				"duplicateconfirm": "Are you sure you want to duplicate this job? Some elements of this job will not be duplicated.",
 				"existing_jobs": "Existing Jobs",

client/src/translations/es/common.json

@@ -407,6 +407,7 @@
 				"local_tax": "",
 				"new": "",
 				"noneselected": "",
+				"retailtotal": "",
 				"state_tax": "",
 				"subtotal": ""
 			},
@@ -597,6 +598,7 @@
 					"vehicleinfo": ""
 				},
 				"creating_new_job": "Creando nuevo trabajo ...",
+				"difference": "",
 				"documents": "documentos",
 				"duplicateconfirm": "",
 				"existing_jobs": "Empleos existentes",

client/src/translations/fr/common.json

@@ -407,6 +407,7 @@
 				"local_tax": "",
 				"new": "",
 				"noneselected": "",
+				"retailtotal": "",
 				"state_tax": "",
 				"subtotal": ""
 			},
@@ -597,6 +598,7 @@
 					"vehicleinfo": ""
 				},
 				"creating_new_job": "Création d'un nouvel emploi ...",
+				"difference": "",
 				"documents": "Les documents",
 				"duplicateconfirm": "",
 				"existing_jobs": "Emplois existants",