Further work on totals testing. Almost accurate now.

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

@@ -1,60 +1,146 @@
-import { Table } from "antd";
+import { Button, Descriptions, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { alphaSort } from "../../utils/sorters";
+import { Link } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
-export default function InvoicesListTableComponent({ loading, invoices }) {
-  const [state, setState] = useState({
-    sortedInfo: {}
-  });
+import { alphaSort } from "../../utils/sorters";
+
+export default function InvoicesListTableComponent({
+  loading,
+  invoices,
+  selectedInvoice,
+  handleOnRowClick,
+}) {
   const { t } = useTranslation();
 
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+
   const columns = [
     {
       title: t("invoices.fields.vendorname"),
       dataIndex: "vendorname",
       key: "vendorname",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
       sortOrder:
         state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
-      //ellipsis: true,
-      render: (text, record) => <span>{record.vendor.name}</span>
+      render: (text, record) => <span>{record.vendor.name}</span>,
     },
     {
       title: t("invoices.fields.invoice_number"),
       dataIndex: "invoice_number",
       key: "invoice_number",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
       sortOrder:
         state.sortedInfo.columnKey === "invoice_number" &&
-        state.sortedInfo.order
-      //ellipsis: true,
+        state.sortedInfo.order,
     },
     {
       title: t("invoices.fields.date"),
       dataIndex: "date",
       key: "date",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
+
       sorter: (a, b) => a.date - b.date,
       sortOrder:
         state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
-      //ellipsis: true,
-      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>
-    }
+      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
+    },
+    {
+      title: t("invoices.fields.total"),
+      dataIndex: "total",
+      key: "total",
+
+      sorter: (a, b) => a.total - b.total,
+      sortOrder:
+        state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
+      render: (text, record) => (
+        <CurrencyFormatter>{record.total}</CurrencyFormatter>
+      ),
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <Link to={`/manage/invoices/${record.id}`}>
+          <Button>{t("invoices.actions.edit")}</Button>
+        </Link>
+      ),
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  const rowExpander = record => (
-    <div style={{ margin: 0 }}>Invoice details</div>
-  );
+  const rowExpander = (record) => {
+    const columns = [
+      {
+        title: t("invoicelines.fields.line_desc"),
+        dataIndex: "line_desc",
+        key: "line_desc",
+        sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
+        sortOrder:
+          state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
+      },
+      {
+        title: t("invoicelines.fields.retail"),
+        dataIndex: "actual_price",
+        key: "actual_price",
+        sorter: (a, b) => a.actual_price - b.actual_price,
+        sortOrder:
+          state.sortedInfo.columnKey === "actual_price" &&
+          state.sortedInfo.order,
+        render: (text, record) => (
+          <CurrencyFormatter>{record.actual_price}</CurrencyFormatter>
+        ),
+      },
+      {
+        title: t("invoicelines.fields.actual_cost"),
+        dataIndex: "actual_cost",
+        key: "actual_cost",
+        sorter: (a, b) => a.actual_cost - b.actual_cost,
+        sortOrder:
+          state.sortedInfo.columnKey === "actual_cost" &&
+          state.sortedInfo.order,
+        render: (text, record) => (
+          <CurrencyFormatter>{record.actual_cost}</CurrencyFormatter>
+        ),
+      },
+      {
+        title: t("invoicelines.fields.cost_center"),
+        dataIndex: "cost_center",
+        key: "cost_center",
+        sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
+        sortOrder:
+          state.sortedInfo.columnKey === "cost_center" &&
+          state.sortedInfo.order,
+      },
+    ];
+
+    return (
+      <div>
+        <Descriptions title="User Info">
+          <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
+          <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
+          <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
+          <Descriptions.Item label="Remark">empty</Descriptions.Item>
+          <Descriptions.Item label="Address">
+            No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+          </Descriptions.Item>
+        </Descriptions>
+        <Table
+          size="small"
+          pagination={{ position: "top", defaultPageSize: 25 }}
+          columns={columns.map((item) => ({ ...item }))}
+          rowKey="id"
+          dataSource={record.invoicelines}
+        />
+      </div>
+    );
+  };
 
   return (
     <Table
@@ -62,10 +148,34 @@ export default function InvoicesListTableComponent({ loading, invoices }) {
       size="small"
       expandedRowRender={rowExpander}
       pagination={{ position: "top", defaultPageSize: 25 }}
-      columns={columns.map(item => ({ ...item }))}
+      columns={columns.map((item) => ({ ...item }))}
       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) => {
+            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
+        };
+      }}
     />
   );
 }