Fees details refactored

src/app/components/Portfolio/Report/FeesDetails.tsx

@@ -0,0 +1,82 @@
+import { SearchIcon } from "@chakra-ui/icons";
+import { IconButton, Link, Tooltip } from "@chakra-ui/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import { default as React } from "react";
+import { Link as RouterLink, useParams } from "react-router-dom";
+import { StatementTypes } from "../../../../models/types";
+import { FeeStatementEntry, ReportEntry } from "../../../../routers/types";
+import Number from "../../Number/Number";
+import { StatementLink } from "../Statement/links";
+import { DataTable } from "./DataTable";
+type Props = { theReports: ReportEntry[] };
+
+type FeesDetails = {
+  id: number;
+  date: Date;
+  amount: number;
+  description: string;
+};
+
+const columnHelper = createColumnHelper<FeesDetails>();
+
+/**
+ * Dividends table component
+ * @param theReports Tax reports to summarize. Assume their summaries are sorted by date
+ * @returns
+ */
+const FeesDetails = ({ theReports, ..._rest }: Props): React.ReactNode => {
+  const { portfolioId } = useParams();
+
+  let totalFees = 0;
+
+  const data: FeesDetails[] = theReports
+    .reduce((p, report) => p.concat(report.feesDetails), [] as FeeStatementEntry[])
+    .map((statement) => {
+      let result: FeesDetails;
+      switch (statement.statementType) {
+        case StatementTypes.FeeStatement:
+          result = {
+            id: statement.id,
+            date: new Date(statement.date),
+            amount: statement.fees * statement.fxRateToBase,
+            description: statement.description,
+          };
+          break;
+      }
+      totalFees += result.amount;
+      return result;
+    });
+
+  const columns = [
+    columnHelper.accessor("id", {
+      cell: (info) => (
+        <Link to={StatementLink.toItem(portfolioId, info.getValue())} as={RouterLink}>
+          <IconButton aria-label="Show detail" icon={<SearchIcon />} size="xs" variant="ghost" />
+        </Link>
+      ),
+      header: "#",
+    }),
+    columnHelper.accessor("date", {
+      cell: (info) => (
+        <Tooltip label={info.getValue().toLocaleTimeString()} placement="auto" hasArrow={true}>
+          {info.getValue().toISOString().substring(0, 10)}
+        </Tooltip>
+      ),
+      footer: "Total",
+    }),
+    columnHelper.accessor("amount", {
+      cell: (info) => <Number value={info.getValue()} decimals={2} />,
+      meta: {
+        isNumeric: true,
+      },
+      footer: () => <Number value={totalFees} />,
+    }),
+    columnHelper.accessor("description", {
+      cell: (info) => info.getValue(),
+    }),
+  ];
+
+  return <DataTable columns={columns} data={data} title="Interests" />;
+};
+
+export default FeesDetails;

src/app/components/Portfolio/Report/ReportDetails.tsx

@@ -3,6 +3,7 @@ import { FunctionComponent, default as React } from "react";
 import { Link as RouterLink, useLoaderData, useParams } from "react-router-dom";
 import { ReportEntry } from "../../../../routers/reports.types";
 import StatementsTable from "../Statement/StatementsTable";
+import FeesDetails from "./FeesDetails";
 import InterestsDetails from "./InterestsDetails";
 import { ReportLink } from "./links";
 
@@ -39,24 +40,9 @@ const ReportDetails: FunctionComponent<Props> = ({ ..._rest }): React.ReactNode
 
       <h2>Interests</h2>
       <InterestsDetails theReports={theReports} />
-      {/* {theReports.map((theReport) => (
-        <Box key={`${theReport.year}-${theReport.month}`}>
-          <h3>
-            {theReport.year}-{theReport.month}
-          </h3>
-          <StatementsTable content={theReport.interestsDetails} title={`${theReport.year}-${theReport.month}`} />
-        </Box>
-      ))} */}
 
       <h2>Fees</h2>
-      {theReports.map((theReport) => (
-        <Box key={`${theReport.year}-${theReport.month}`}>
-          <h3>
-            {theReport.year}-{theReport.month}
-          </h3>
-          <StatementsTable content={theReport.feesDetails} title={`${theReport.year}-${theReport.month}`} />
-        </Box>
-      ))}
+      <FeesDetails theReports={theReports} />
 
       <h2>P/L</h2>
       {theReports.map((theReport) => (

src/app/components/Portfolio/Report/ReportSummary.tsx

@@ -3,7 +3,7 @@ import { FunctionComponent, default as React } from "react";
 import { Link as RouterLink, useLoaderData, useParams } from "react-router-dom";
 import { ReportEntry } from "../../../../routers/reports.types";
 import Dividends from "./DividendsComponent";
-import Fees from "./FeeComponent";
+import Fees from "./FeesComponent";
 import Interests from "./InterestsComponent";
 import PnL from "./PnLComponent";
 import { ReportLink } from "./links";