Labor allocation on job close BOD-131

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.6.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.6.1">
     <!--
 
     BabelEdit project file
@@ -6619,6 +6619,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>allocate</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>changestatus</name>
                                         <definition_loaded>false</definition_loaded>
@@ -9028,6 +9049,27 @@
                             <folder_node>
                                 <name>labels</name>
                                 <children>
+                                    <concept_node>
+                                        <name>allocations</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>appointmentconfirmation</name>
                                         <definition_loaded>false</definition_loaded>
@@ -9070,6 +9112,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>available</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>availablenew</name>
                                         <definition_loaded>false</definition_loaded>
@@ -10869,6 +10932,27 @@
                             <folder_node>
                                 <name>jobsactions</name>
                                 <children>
+                                    <concept_node>
+                                        <name>closejob</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>duplicate</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/jobs-close-labmat-allocation/jobs-close-labmat-allocation.allocation-tags.component.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Tag } from "antd";
+export default function JobsCloseLabMatAllocationTags({
+  labmatAllocationKey,
+  labmatAllocation,
+  setLabmatAllocations,
+}) {
+  return (
+    <div>
+      {labmatAllocation.allocations.map((a, idx) => (
+        <Tag
+          closable
+          visible
+          onClose={() => {
+            setLabmatAllocations((state) => {
+              return {
+                ...state,
+                [labmatAllocationKey]: {
+                  ...labmatAllocation,
+                  allocations: labmatAllocation.allocations.filter(
+                    (val, index) => index !== idx
+                  ),
+                },
+              };
+            });
+          }}
+          key={idx}
+        >{`${a.center} - ${a.amount.toFormat()}`}</Tag>
+      ))}
+    </div>
+  );
+}

client/src/components/jobs-close-labmat-allocation/jobs-close-labmat-allocation.button.component.jsx

@@ -0,0 +1,94 @@
+import { PlusCircleFilled, CloseCircleFilled } from "@ant-design/icons";
+import { Button, InputNumber, Select } from "antd";
+import Dinero from "dinero.js";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const { Option } = Select;
+
+export function JobsCloseLabmatAllocationButton({
+  labmatAllocationKey,
+  labmatAllocation,
+  setLabmatAllocations,
+  bodyshop,
+}) {
+  const [visible, setVisible] = useState(false);
+  const [state, setState] = useState({ center: "", amount: 0 });
+  const { t } = useTranslation();
+  const handleAllocate = () => {
+    const existingIndex = labmatAllocation.allocations.findIndex(
+      (e) => e.center === state.center
+    );
+
+    const newAllocations = labmatAllocation.allocations.slice(0);
+    if (existingIndex > -1) {
+      newAllocations[existingIndex] = {
+        center: state.center,
+        amount: newAllocations[existingIndex].amount.add(
+          Dinero({ amount: state.amount * 100 })
+        ),
+      };
+    } else {
+      newAllocations.push({
+        center: state.center,
+        amount: Dinero({ amount: state.amount * 100 }),
+      });
+    }
+    setLabmatAllocations((labMatState) => {
+      return {
+        ...labMatState,
+        [labmatAllocationKey]: {
+          ...labmatAllocation,
+          allocations: newAllocations,
+        },
+      };
+    });
+  };
+  const showAllocation = labmatAllocation.total.getAmount() > 0;
+
+  if (!showAllocation) return null;
+  return (
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div style={{ display: visible ? "" : "none" }}>
+        <Select
+          style={{ width: "200px" }}
+          value={state.center}
+          onSelect={(val) => setState({ ...state, center: val })}
+        >
+          {bodyshop.md_responsibility_centers.profits.map((r, idx) => (
+            <Option key={idx} value={r.name}>
+              {r.name}
+            </Option>
+          ))}
+        </Select>
+        <InputNumber
+          precision={2}
+          min={0}
+          onChange={(val) => setState({ ...state, amount: val })}
+          max={labmatAllocation.total.getAmount() / 100}
+        />
+        <Button
+          onClick={handleAllocate}
+          disabled={state.amount === 0 || state.center === ""}
+        >
+          {t("jobs.actions.allocate")}
+        </Button>
+      </div>
+      <div>
+        {visible ? (
+          <CloseCircleFilled onClick={() => setVisible(false)} />
+        ) : (
+          <PlusCircleFilled onClick={() => setVisible(true)} />
+        )}
+      </div>
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(JobsCloseLabmatAllocationButton);

client/src/components/jobs-close-labmat-allocation/jobs-close-labmat-allocation.component.jsx

@@ -1,35 +1,101 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+import AllocationButton from "./jobs-close-labmat-allocation.button.component";
+import Dinero from "dinero.js";
+import AllocationTags from "./jobs-close-labmat-allocation.allocation-tags.component";
+import { List } from "antd";
 
 export default function JobCloseLabMatAllocation({
   labmatAllocations,
   setLabmatAllocations,
 }) {
-  console.log(
+  const { t } = useTranslation();
-    "JobCloseLabMatAllocation -> labmatAllocations",
+
-    labmatAllocations
+  const allocatedTotalsArray = Object.keys(labmatAllocations)
-  );
+    .filter((i) => !i.includes("subtotal"))
+    .map((i) => labmatAllocations[i].allocations)
+    .flat();
+
+  const allocatedTotal = Dinero({
+    amount: allocatedTotalsArray.reduce((acc, val) => {
+      console.log("acc", acc);
+      return (acc = acc + val.amount.getAmount());
+    }, 0),
+  });
+
   return (
-    <div>
+    <div style={{ display: "flex" }}>
       <table>
         <thead>
           <tr>
-            <th>Rate</th>
+            <th>{t("jobs.labels.laborallocations")}</th>
-            <th>Available</th>
+            <th>{t("jobs.labels.totals")}</th>
+            <th>{t("jobs.labels.available")}</th>
+            <th>{t("jobs.actions.allocate")}</th>
+            <th>{t("jobs.labels.allocations")}</th>
           </tr>
         </thead>
         <tbody>
-          {Object.keys(labmatAllocations).map((alloc) => (
+          {Object.keys(labmatAllocations).map((alloc, idx) => {
-            <tr>
+            if (!alloc.includes("subtotal"))
-              <td>{alloc}</td>
+              return (
-              <td>
+                <tr key={idx}>
-                {
+                  <td>{t(`jobs.fields.${alloc}`)}</td>
-                  //labmatAllocations[alloc].total.toFormat()
+                  <td>
-                }
+                    {labmatAllocations[alloc].total &&
-              </td>
+                      labmatAllocations[alloc].total.toFormat()}
-            </tr>
+                  </td>
-          ))}
+                  <td>
+                    {labmatAllocations[alloc].total
+                      .subtract(
+                        Dinero({
+                          amount: labmatAllocations[alloc].allocations.reduce(
+                            (acc, val) => {
+                              return acc + val.amount.getAmount();
+                            },
+                            0
+                          ),
+                        })
+                      )
+                      .toFormat()}
+                  </td>
+                  <td>
+                    <AllocationButton
+                      labmatAllocationKey={alloc}
+                      labmatAllocation={labmatAllocations[alloc]}
+                      setLabmatAllocations={setLabmatAllocations}
+                    />
+                  </td>
+                  <td>
+                    <AllocationTags
+                      labmatAllocationKey={alloc}
+                      labmatAllocation={labmatAllocations[alloc]}
+                      setLabmatAllocations={setLabmatAllocations}
+                    />
+                  </td>
+                </tr>
+              );
+            else return null;
+          })}
+          <tr>
+            <td></td>
+            <td>{labmatAllocations.subtotal.toFormat()}</td>
+            <td>{allocatedTotal.toFormat()}</td>
+            <td></td>
+            <td></td>
+          </tr>
         </tbody>
       </table>
+
+      <div>
+        <List>
+          {allocatedTotalsArray.map((i, idx) => (
+            <List.Item key={idx}>{`${
+              i.center
+            } ${i.amount.toFormat()}`}</List.Item>
+          ))}
+        </List>
+      </div>
     </div>
   );
 }

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -81,6 +81,15 @@ export function JobsDetailHeaderActions({
       >
         {t("jobs.actions.postInvoices")}
       </Menu.Item>
+      <Menu.Item key="closejob">
+        <Link
+          to={{
+            pathname: `/manage/jobs/${job.id}/close`,
+          }}
+        >
+          {t("menus.jobsactions.closejob")}
+        </Link>
+      </Menu.Item>
     </Menu>
   );
   return (

client/src/pages/jobs-close/jobs-close.component.jsx

@@ -1,24 +1,25 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CalculateJob } from "../../components/job-totals-table/job-totals.utility";
 import JobsCloseLaborMaterialAllocation from "../../components/jobs-close-labmat-allocation/jobs-close-labmat-allocation.component";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
 });
 
-export function JobsCloseComponent({ job, bodyshop }) {
+export function JobsCloseComponent({ job, bodyshop, jobTotals }) {
-  const CalcJobMemoized = useCallback(
+  const [labmatAllocations, setLabmatAllocations] = useState(
-    () => CalculateJob(job, bodyshop.shoprates),
+    Object.keys(jobTotals.rates).reduce((acc, val) => {
-    [job, bodyshop.shoprates]
+      acc[val] = jobTotals.rates[val];
+      if (val.includes("subtotal")) return acc;
+      //Not a subtotal - therefore can be allocated.
+      acc[val].allocations = [];
+      return acc;
+    }, {})
   );
 
-  const jobTotals = CalcJobMemoized();
-
-  const [labmatAllocations, setLabmatAllocations] = useState(jobTotals.rates);
-
   return (
     <div>
       <JobsCloseLaborMaterialAllocation

client/src/pages/jobs-close/jobs-close.container.jsx

@@ -3,17 +3,25 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
+import { CalculateJob } from "../../components/job-totals-table/job-totals.utility";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_JOB_CLOSE_DETAILS } from "../../graphql/jobs.queries";
 import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import JobsCloseComponent from "./jobs-close.component";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
 });
 
-export function JobsCloseContainer({ setBreadcrumbs }) {
+export function JobsCloseContainer({ setBreadcrumbs, bodyshop }) {
   const { jobId } = useParams();
   const { loading, error, data } = useQuery(QUERY_JOB_CLOSE_DETAILS, {
     variables: { id: jobId },
@@ -42,12 +50,18 @@ export function JobsCloseContainer({ setBreadcrumbs }) {
     ]);
   }, [setBreadcrumbs, t, jobId, data]);
 
+  console.log("Container rerender");
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  const jobTotals = CalculateJob(data.jobs_by_pk, bodyshop.shoprates);
   return (
     <div>
-      <JobsCloseComponent job={data ? data.jobs_by_pk : {}} />
+      <JobsCloseComponent
+        job={data ? data.jobs_by_pk : {}}
+        jobTotals={jobTotals}
+      />
     </div>
   );
 }
-export default connect(null, mapDispatchToProps)(JobsCloseContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(JobsCloseContainer);

client/src/translations/en_us/common.json

@@ -457,6 +457,7 @@
 				"addDocuments": "Add Job Documents",
 				"addNote": "Add Note",
 				"addtoproduction": "Add to Production",
+				"allocate": "Allocate",
 				"changestatus": "Change Status",
 				"convert": "Convert",
 				"gotojob": "Go to Job",
@@ -577,8 +578,10 @@
 				"vehicle": "Vehicle"
 			},
 			"labels": {
+				"allocations": "Allocations",
 				"appointmentconfirmation": "Send confirmation to customer?",
 				"audit": "Audit Trail",
+				"available": "Available",
 				"availablenew": "Available New Jobs",
 				"availablesupplements": "Available Supplements",
 				"cards": {
@@ -677,6 +680,7 @@
 				"vehicles": "Vehicles"
 			},
 			"jobsactions": {
+				"closejob": "Close Job",
 				"duplicate": "Duplicate this Job",
 				"newcccontract": "Create Courtesy Car Contract"
 			},

client/src/translations/es/common.json

@@ -457,6 +457,7 @@
 				"addDocuments": "Agregar documentos de trabajo",
 				"addNote": "Añadir la nota",
 				"addtoproduction": "",
+				"allocate": "",
 				"changestatus": "Cambiar Estado",
 				"convert": "Convertir",
 				"gotojob": "",
@@ -577,8 +578,10 @@
 				"vehicle": "Vehículo"
 			},
 			"labels": {
+				"allocations": "",
 				"appointmentconfirmation": "¿Enviar confirmación al cliente?",
 				"audit": "",
+				"available": "",
 				"availablenew": "",
 				"availablesupplements": "",
 				"cards": {
@@ -677,6 +680,7 @@
 				"vehicles": "Vehículos"
 			},
 			"jobsactions": {
+				"closejob": "",
 				"duplicate": "",
 				"newcccontract": ""
 			},

client/src/translations/fr/common.json

@@ -457,6 +457,7 @@
 				"addDocuments": "Ajouter des documents de travail",
 				"addNote": "Ajouter une note",
 				"addtoproduction": "",
+				"allocate": "",
 				"changestatus": "Changer le statut",
 				"convert": "Convertir",
 				"gotojob": "",
@@ -577,8 +578,10 @@
 				"vehicle": "Véhicule"
 			},
 			"labels": {
+				"allocations": "",
 				"appointmentconfirmation": "Envoyer une confirmation au client?",
 				"audit": "",
+				"available": "",
 				"availablenew": "",
 				"availablesupplements": "",
 				"cards": {
@@ -677,6 +680,7 @@
 				"vehicles": "Véhicules"
 			},
 			"jobsactions": {
+				"closejob": "",
 				"duplicate": "",
 				"newcccontract": ""
 			},