Job costing improvements. IO-527

client/src/components/job-costing-modal/job-costing-modal.component.jsx

@@ -8,7 +8,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import JobCostingPartsTable from "../job-costing-parts-table/job-costing-parts-table.component";
 import JobCostingStatistics from "../job-costing-statistics/job-costing-statistics.component";
 import JobCostingPie from "./job-costing-modal.pie.component";
-
+import _ from "lodash";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -18,6 +18,11 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function JobCostingModalComponent({ bodyshop, job }) {
   const defaultProfits = bodyshop.md_responsibility_centers.defaults.profits;
+  const allProfitCenters = _.union(
+    bodyshop.md_responsibility_centers.profits.map((p) => p.name),
+    bodyshop.md_responsibility_centers.costs.map((p) => p.name)
+  );
+
   // const defaultCosts = bodyshop.md_responsibility_centers.defaults.costs;
   const { t } = useTranslation();
   const jobLineTotalsByProfitCenter =
@@ -71,6 +76,7 @@ export function JobCostingModalComponent({ bodyshop, job }) {
           .multiply(line_val.quantity)
           .multiply(bill_val.is_credit_memo ? -1 : 1)
       );
+
       return null;
     });
     return bill_acc;
@@ -107,8 +113,8 @@ export function JobCostingModalComponent({ bodyshop, job }) {
     gppercentFormatted: null,
   };
 
-  const costCenterData = Object.keys(defaultProfits).map((key, idx) => {
+  const costCenterData = allProfitCenters.map((key, idx) => {
-    const ccVal = defaultProfits[key];
+    const ccVal = key; // defaultProfits[key];
     const sale_labor =
       jobLineTotalsByProfitCenter.labor[ccVal] || Dinero({ amount: 0 });
     const sale_parts =
@@ -178,7 +184,11 @@ export function JobCostingModalComponent({ bodyshop, job }) {
   return (
     <div>
       <JobCostingStatistics job={job} summaryData={summaryData} />
-      <JobCostingPartsTable job={job} data={costCenterData} />
+      <JobCostingPartsTable
+        job={job}
+        data={costCenterData}
+        summaryData={summaryData}
+      />
       <div className="imex-flex-row">
         <div style={{ flex: 1 }}>
           <Typography.Title level={4}>

client/src/components/job-costing-modal/job-costing-modal.container.jsx

@@ -37,7 +37,9 @@ export function JobCostingModalContainer({
     <Modal
       visible={visible}
       title={t("jobs.labels.jobcosting")}
+      onOk={() => toggleModalVisible()}
       onCancel={() => toggleModalVisible()}
+      cancelButtonProps={{ style: { display: "none" } }}
       width="90%"
       destroyOnClose
     >

client/src/components/job-costing-modal/job-costing-modal.pie.component.jsx

@@ -44,8 +44,6 @@ export default function JobCostingPieComponent({
     Calculatedata,
   ]);
 
-  console.log(type, memoizedData);
-
   return (
     <ResponsiveContainer width="100%" height={175}>
       <PieChart>

client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx

@@ -1,9 +1,10 @@
-import { Table } from "antd";
+import { Input, Table, Typography } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 
-export default function JobCostingPartsTable({ job, data }) {
+export default function JobCostingPartsTable({ job, data, summaryData }) {
+  const [searchText, setSearchText] = useState("");
   const [state, setState] = useState({
     sortedInfo: {},
   });
@@ -59,16 +60,61 @@ export default function JobCostingPartsTable({ job, data }) {
     },
   ];
 
+  const filteredData =
+    searchText === ""
+      ? data
+      : data.filter((d) =>
+          (d.cost_center || "")
+            .toString()
+            .toLowerCase()
+            .includes(searchText.toLowerCase())
+        );
+
   return (
     <div>
       <Table
         size="small"
+        title={() => {
+          return (
+            <div className="imex-table-header">
+              <div className="imex-table-header__search">
+                <Input.Search
+                  placeholder={t("general.labels.search")}
+                  value={searchText}
+                  onChange={(e) => {
+                    e.preventDefault();
+                    setSearchText(e.target.value);
+                  }}
+                />
+              </div>
+            </div>
+          );
+        }}
         scroll={{ x: "50%", y: "40rem" }}
         onChange={handleTableChange}
         pagination={{ position: "top", defaultPageSize: 25 }}
         columns={columns}
         rowKey="id"
-        dataSource={data}
+        dataSource={filteredData}
+        summary={() => (
+          <Table.Summary.Row>
+            <Table.Summary.Cell>
+              <Typography.Title level={4}>
+                {t("general.labels.totals")}
+              </Typography.Title>
+            </Table.Summary.Cell>
+            <Table.Summary.Cell>
+              {summaryData.totalSales.toFormat()}
+            </Table.Summary.Cell>
+            <Table.Summary.Cell>
+              {summaryData.totalCost.toFormat()}
+            </Table.Summary.Cell>
+            <Table.Summary.Cell>
+              {summaryData.gpdollars.toFormat()}
+            </Table.Summary.Cell>
+            <Table.Summary.Cell></Table.Summary.Cell>
+          </Table.Summary.Row>
+        )}
       />
     </div>
   );

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -37,13 +37,6 @@ export default function ReportCenterModalComponent({ context }) {
         autoComplete={"off"}
         layout="vertical"
         form={form}
-        initialValues={{
-          to: [
-            "allan.carr@thinkimex.com",
-            "allanlcarr@outlook.com",
-            "allanlcarr@icloud.com",
-          ],
-        }}
       >
         <Form.Item
           name="key"

client/src/components/report-center-modal/report-center-modal.container.jsx

@@ -28,6 +28,7 @@ export function ReportCenterModalContainer({
       visible={visible}
       title={t("printcenter.labels.reportcentermodal")}
       onOk={() => toggleModalVisible()}
+      onCancel={() => toggleModalVisible()}
       cancelButtonProps={{ style: { display: "none" } }}
       destroyOnClose
     >