Added quantity to entering invoices BOD-182

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

@@ -94,8 +94,7 @@ export function InvoicesListTableComponent({
       render: (text, record) => (
         <div>
           <Link
-            to={`/manage/invoices?invoiceid=${record.id}&vendorid=${record.vendorid}`}
-          >
+            to={`/manage/invoices?invoiceid=${record.id}&vendorid=${record.vendorid}`}>
             <Button>{t("invoices.actions.edit")}</Button>
           </Link>
           <Button
@@ -120,8 +119,7 @@ export function InvoicesListTableComponent({
                   isReturn: true,
                 },
               })
-            }
-          >
+            }>
             {t("invoices.actions.return")}
           </Button>
         </div>
@@ -167,6 +165,14 @@ export function InvoicesListTableComponent({
           <CurrencyFormatter>{record.actual_cost}</CurrencyFormatter>
         ),
       },
+      {
+        title: t("invoicelines.fields.quantity"),
+        dataIndex: "quantity",
+        key: "quantity",
+        sorter: (a, b) => a.quantity - b.quantity,
+        sortOrder:
+          state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order,
+      },
       {
         title: t("invoicelines.fields.cost_center"),
         dataIndex: "cost_center",
@@ -237,11 +243,11 @@ export function InvoicesListTableComponent({
           </Descriptions.Item>
         </Descriptions>
         <Table
-          size="small"
+          size='small'
           scroll={{ x: "50%", y: "40rem" }}
           pagination={{ position: "top", defaultPageSize: 25 }}
           columns={columns}
-          rowKey="id"
+          rowKey='id'
           dataSource={record.invoicelines}
         />
       </div>
@@ -249,82 +255,85 @@ export function InvoicesListTableComponent({
   };
 
   return (
-    <Table
-      loading={loading}
-      size="small"
-      title={() => (
-        <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>
+      <Typography.Title level={4}>
+        {t("invoices.labels.invoices")}
+      </Typography.Title>
+      <Table
+        loading={loading}
+        size='small'
+        title={() => (
+          <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>
-        </div>
-      )}
-      scroll={{ x: "50%", y: "40rem" }}
-      expandedRowRender={rowExpander}
-      pagination={{ position: "top", defaultPageSize: 25 }}
-      columns={columns}
-      rowKey="id"
-      dataSource={invoices}
-      onChange={handleTableChange}
-      expandable={{
-        expandedRowKeys: [selectedInvoice],
-        onExpand: (expanded, record) => {
-          handleOnRowClick(expanded ? record : null);
-        },
-      }}
-      rowSelection={{
-        onSelect: (record) => {
-          handleOnRowClick(record);
-        },
-        selectedRowKeys: [selectedInvoice],
-        type: "radio",
-      }}
-      onRow={(record, rowIndex) => {
-        return {
-          onClick: (event) => {
+        )}
+        scroll={{ x: "50%", y: "40rem" }}
+        expandedRowRender={rowExpander}
+        pagination={{ position: "top", defaultPageSize: 25 }}
+        columns={columns}
+        rowKey='id'
+        dataSource={invoices}
+        onChange={handleTableChange}
+        expandable={{
+          expandedRowKeys: [selectedInvoice],
+          onExpand: (expanded, record) => {
+            handleOnRowClick(expanded ? record : null);
+          },
+        }}
+        rowSelection={{
+          onSelect: (record) => {
             handleOnRowClick(record);
-          }, // click row
-          onDoubleClick: (event) => {}, // double click row
-          onContextMenu: (event) => {}, // right button click row
-          onMouseEnter: (event) => {}, // mouse enter row
-          onMouseLeave: (event) => {}, // mouse leave row
-        };
-      }}
-    />
+          },
+          selectedRowKeys: [selectedInvoice],
+          type: "radio",
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleOnRowClick(record);
+            }, // click row
+            onDoubleClick: (event) => {}, // double click row
+            onContextMenu: (event) => {}, // right button click row
+            onMouseEnter: (event) => {}, // mouse enter row
+            onMouseLeave: (event) => {}, // mouse leave row
+          };
+        }}
+      />
+    </div>
   );
 }
 export default connect(null, mapDispatchToProps)(InvoicesListTableComponent);