IO-233 WIP CDK

client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

@@ -1,17 +1,21 @@
-import { Button, Table } from "antd";
-import React, { useState } from "react";
+import { Button, Table, Typography } from "antd";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import Dinero from "dinero.js";
+import { SyncOutlined } from "@ant-design/icons";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
 });
+
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
@@ -20,6 +24,15 @@ export default connect(
 export function DmsAllocationsSummary({ socket, bodyshop, jobId }) {
   const { t } = useTranslation();
   const [allocationsSummary, setAllocationsSummary] = useState([]);
+
+  useEffect(() => {
+    if (socket.connected) {
+      socket.emit("cdk-calculate-allocations", jobId, (ack) =>
+        setAllocationsSummary(ack)
+      );
+    }
+  }, [socket, socket.connected, jobId]);
+
   const columns = [
     {
       title: t("jobs.fields.dms.center"),
@@ -71,13 +84,45 @@ export function DmsAllocationsSummary({ socket, bodyshop, jobId }) {
             );
           }}
         >
-          Get
+          <SyncOutlined />
         </Button>
       )}
       pagination={{ position: "top", defaultPageSize: 50 }}
       columns={columns}
       rowKey="center"
       dataSource={allocationsSummary}
+      summary={() => {
+        const totals = allocationsSummary.reduce(
+          (acc, val) => {
+            return {
+              totalSale: acc.totalSale.add(Dinero(val.sale)),
+              totalCost: acc.totalCost.add(Dinero(val.cost)),
+            };
+          },
+          {
+            totalSale: Dinero(),
+            totalCost: Dinero(),
+          }
+        );
+
+        return (
+          <Table.Summary.Row>
+            <Table.Summary.Cell>
+              <Typography.Title level={4}>
+                {t("general.labels.totals")}
+              </Typography.Title>
+            </Table.Summary.Cell>
+            <Table.Summary.Cell>
+              {totals.totalSale.toFormat()}
+            </Table.Summary.Cell>
+            <Table.Summary.Cell>
+              {totals.totalCost.toFormat()}
+            </Table.Summary.Cell>
+            <Table.Summary.Cell></Table.Summary.Cell>
+            <Table.Summary.Cell></Table.Summary.Cell>
+          </Table.Summary.Row>
+        );
+      }}
     />
   );
 }

client/src/components/dms-post-form/dms-post-form.component.jsx

@@ -1,5 +1,13 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Button, Form, Input } from "antd";
+import {
+  Button,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  Space,
+  Statistic,
+} from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,7 +16,8 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-
+import Dinero from "dinero.js";
+import { determineDmsType } from "../../pages/dms/dms.container";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -17,11 +26,38 @@ const mapDispatchToProps = (dispatch) => ({
 });
 export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);
 
-export function DmsPostForm({ bodyshop, socket, jobId }) {
+export function DmsPostForm({ bodyshop, socket, job }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
+
+  const handlePayerSelect = (value, index) => {
+    form.setFieldsValue({
+      payers: form.getFieldValue("payers").map((payer, mapIndex) => {
+        if (index !== mapIndex) return payer;
+        const cdkPayer =
+          bodyshop.cdk_configuration.payers &&
+          bodyshop.cdk_configuration.payers.find((i) => i.name === value);
+
+        if (!cdkPayer) return payer;
+
+        return {
+          ...cdkPayer,
+          dms_acctnumber: cdkPayer.dms_acctnumber,
+          controlnumber: job && job[cdkPayer.control_type],
+        };
+      }),
+    });
+  };
+
+  const handleFinish = (values) => {
+    socket.emit(`${determineDmsType(bodyshop)}-export-job`, {
+      jobId: job.id,
+      ...values,
+    });
+  };
+
   return (
-    <Form form={form} layout="vertical">
+    <Form form={form} layout="vertical" onFinish={handleFinish}>
       <LayoutFormRow>
         <Form.Item
           name="journal"
@@ -39,6 +75,32 @@ export function DmsPostForm({ bodyshop, socket, jobId }) {
         >
           <Input />
         </Form.Item>
+        <Form.Item
+          name="kmin"
+          label={t("jobs.fields.kmin")}
+          initialValue={job && job.kmin}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <InputNumber disabled />
+        </Form.Item>
+        <Form.Item
+          name="kmout"
+          label={t("jobs.fields.kmout")}
+          initialValue={job && job.kmout}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <InputNumber disabled />
+        </Form.Item>
         <Form.Item
           name="dms_make"
           label={t("jobs.fields.dms.dms_make")}
@@ -81,20 +143,30 @@ export function DmsPostForm({ bodyshop, socket, jobId }) {
                         },
                       ]}
                     >
-                      <Input />
+                      <Select
+                        onSelect={(value) => handlePayerSelect(value, index)}
+                      >
+                        {bodyshop.cdk_configuration &&
+                          bodyshop.cdk_configuration.payers &&
+                          bodyshop.cdk_configuration.payers.map((payer) => (
+                            <Select.Option key={payer.name}>
+                              {payer.name}
+                            </Select.Option>
+                          ))}
+                      </Select>
                     </Form.Item>
 
                     <Form.Item
-                      label={t("jobs.fields.dms.payer.account")}
-                      key={`${index}account`}
-                      name={[field.name, "account"]}
+                      label={t("jobs.fields.dms.payer.dms_acctnumber")}
+                      key={`${index}dms_acctnumber`}
+                      name={[field.name, "dms_acctnumber"]}
                       rules={[
                         {
                           required: true,
                         },
                       ]}
                     >
-                      <Input />
+                      <Input disabled />
                     </Form.Item>
 
                     <Form.Item
@@ -107,8 +179,9 @@ export function DmsPostForm({ bodyshop, socket, jobId }) {
                         },
                       ]}
                     >
-                      <CurrencyInput />
+                      <CurrencyInput min={0} />
                     </Form.Item>
+
                     <Form.Item
                       label={t("jobs.fields.dms.payer.controlnumber")}
                       key={`${index}controlnumber`}
@@ -122,6 +195,27 @@ export function DmsPostForm({ bodyshop, socket, jobId }) {
                       <Input />
                     </Form.Item>
 
+                    <Form.Item shouldUpdate>
+                      {() => {
+                        const payers = form.getFieldValue("payers");
+
+                        const row = payers && payers[index];
+
+                        const cdkPayer =
+                          bodyshop.cdk_configuration.payers &&
+                          bodyshop.cdk_configuration.payers.find(
+                            (i) => i && row && i.name === row.name
+                          );
+
+                        return (
+                          <div>
+                            {cdkPayer &&
+                              t(`jobs.fields.${cdkPayer.control_type}`)}
+                          </div>
+                        );
+                      }}
+                    </Form.Item>
+
                     <DeleteFilled
                       onClick={() => {
                         remove(field.name);
@@ -133,18 +227,58 @@ export function DmsPostForm({ bodyshop, socket, jobId }) {
               <Form.Item>
                 <Button
                   type="dashed"
+                  disabled={!(fields.length < 3)}
                   onClick={() => {
-                    add();
+                    if (fields.length < 3) add();
                   }}
                   style={{ width: "100%" }}
                 >
-                  {t("general.actions.add")}
+                  {t("dms.actions.addpayer")}
                 </Button>
               </Form.Item>
             </div>
           );
         }}
       </Form.List>
+      <Form.Item shouldUpdate>
+        {() => {
+          //Perform Calculation to determine discrepancy.
+          let totalAllocated = Dinero();
+
+          const payers = form.getFieldValue("payers");
+          payers &&
+            payers.forEach((payer) => {
+              totalAllocated = totalAllocated.add(
+                Dinero({ amount: Math.round((payer?.amount || 0) * 100) })
+              );
+            });
+          const discrep = Dinero(job.job_totals.totals.total_repairs).subtract(
+            totalAllocated
+          );
+          return (
+            <Space>
+              <Statistic
+                title={t("jobs.labels.dms.totalallocated")}
+                value={totalAllocated.toFormat()}
+              />
+              <Statistic
+                title={t("jobs.fields.subtotal")}
+                value={Dinero(job.job_totals.totals.total_repairs).toFormat()}
+              />
+              <Statistic
+                title={t("jobs.labels.dms.notallocated")}
+                valueStyle={{
+                  color: discrep.getAmount() === 0 ? "green" : "red",
+                }}
+                value={discrep.toFormat()}
+              />
+              <Button disabled={discrep.getAmount() !== 0} htmlType="submit">
+                {t("jobs.actions.dms.post")}
+              </Button>
+            </Space>
+          );
+        }}
+      </Form.Item>
     </Form>
   );
 }