Job costing improvements. IO-527

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>
   );