Further refinement on jobs detail screen on header. BOD-155

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

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Checkbox, Descriptions, Table } from "antd";
+import { Button, Checkbox, Descriptions, Table, Input, Typography } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -12,22 +12,29 @@ import { alphaSort } from "../../utils/sorters";
 const mapDispatchToProps = (dispatch) => ({
   setPartsOrderContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "partsOrder" })),
+  setInvoiceEnterContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
+  setReconciliationContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "reconciliation" })),
 });
 
 export function InvoicesListTableComponent({
   job,
   loading,
-  invoices,
+  invoicesQuery,
   selectedInvoice,
   handleOnRowClick,
-  refetch,
   setPartsOrderContext,
+  setInvoiceEnterContext,
+  setReconciliationContext,
 }) {
   const { t } = useTranslation();
   const [state, setState] = useState({
     sortedInfo: {},
   });
 
+  const invoices = invoicesQuery.data ? invoicesQuery.data.invoices : [];
+  const { refetch } = invoicesQuery;
   const columns = [
     {
       title: t("invoices.fields.vendorname"),
@@ -51,7 +58,6 @@ export function InvoicesListTableComponent({
       title: t("invoices.fields.date"),
       dataIndex: "date",
       key: "date",
-
       sorter: (a, b) => a.date - b.date,
       sortOrder:
         state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
@@ -61,7 +67,6 @@ export function InvoicesListTableComponent({
       title: t("invoices.fields.total"),
       dataIndex: "total",
       key: "total",
-
       sorter: (a, b) => a.total - b.total,
       sortOrder:
         state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
@@ -212,27 +217,25 @@ export function InvoicesListTableComponent({
 
     return (
       <div>
-        <Descriptions
-          title={`${t("invoices.fields.invoice_number")} ${
-            record.invoice_number
-          }`}>
+        <Typography.Title level={3}>{`${t("invoices.fields.invoice_number")} ${
+          record.invoice_number
+        }`}</Typography.Title>
+        <Descriptions>
           <Descriptions.Item label={t("invoices.fields.federal_tax_rate")}>
-            {record.federal_tax_rate || ""}
+            {`${record.federal_tax_rate}%` || ""}
           </Descriptions.Item>
           <Descriptions.Item label={t("invoices.fields.state_tax_rate")}>
-            {record.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} />
+            {`${record.local_tax_rate}%` || ""}
           </Descriptions.Item>
         </Descriptions>
         <Table
           size='small'
+          scroll={{ x: "50%", y: "40rem" }}
           pagination={{ position: "top", defaultPageSize: 25 }}
-          columns={columns.map((item) => ({ ...item }))}
+          columns={columns}
           rowKey='id'
           dataSource={record.invoicelines}
         />
@@ -245,12 +248,45 @@ export function InvoicesListTableComponent({
       loading={loading}
       size='small'
       title={() => (
-        <div>
+        <div className='imex-table-header'>
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>
+          <Button
+            onClick={() => {
+              setInvoiceEnterContext({
+                actions: { refetch: invoicesQuery.refetch },
+                context: {
+                  job,
+                },
+              });
+            }}>
+            {t("jobs.actions.postInvoices")}
+          </Button>
+          <Button
+            onClick={() => {
+              setReconciliationContext({
+                actions: { refetch: invoicesQuery.refetch },
+                context: {
+                  job,
+                  invoices:
+                    (invoicesQuery.data && invoicesQuery.data.invoices) || [],
+                },
+              });
+            }}>
+            {t("jobs.actions.reconcile")}
+          </Button>{" "}
+          <div className='imex-table-header__search'>
+            <Input.Search
+              placeholder={t("general.labels.search")}
+              onChange={(e) => {
+                e.preventDefault();
+              }}
+            />
+          </div>
         </div>
       )}
+      scroll={{ x: "50%", y: "40rem" }}
       expandedRowRender={rowExpander}
       pagination={{ position: "top", defaultPageSize: 25 }}
       columns={columns}