Links to statements added to tax report

eslint.config.mjs

@@ -3,6 +3,7 @@ import eslint from "@eslint/js";
 import prettier from "eslint-plugin-prettier/recommended";
 import rxjs from "eslint-plugin-rxjs";
 // import storybook from "eslint-plugin-storybook";
+// import react from "eslint-plugin-react";
 import tseslint from "typescript-eslint";
 
 export default tseslint.config(
@@ -49,12 +50,18 @@ export default tseslint.config(
       "@typescript-eslint/restrict-plus-operands": "error",
       "@typescript-eslint/restrict-template-expressions": "error",
       "@typescript-eslint/unbound-method": "error",
+      "@typescript-eslint/promise-function-async": "warn",
       "rxjs/no-async-subscribe": "warn",
       "rxjs/no-ignored-observable": "warn",
       "rxjs/no-ignored-subscription": "warn",
       "rxjs/no-unbound-methods": "warn",
       "rxjs/throw-error": "warn",
     },
   },
-  { ignores: ["node_modules/*", "build/*", "dist/*", "**/*.spec.ts", "*.config.mjs"] },
+  // {
+  //   files: ["**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}"],
+  //   plugins: { react: fixupPluginRules(react) },
+  //   ...react.configs.recommended,
+  // },
+  { ignores: ["node_modules/*", ".storybook/", "build/*", "dist/*", "**/*.spec.ts", "*.config.mjs"] },
 );

package.json

@@ -88,6 +88,7 @@
     "eslint": "^9.2.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-storybook": "^0.8.0",
     "http-proxy-middleware": "^3.0.0",

src/app/components/Portfolio/Balance/actions.ts

@@ -6,11 +6,11 @@ import { ActionFunctionArgs, redirect } from "react-router-dom";
  * @param params
  * @returns
  */
-export const balanceSave = ({ request, params }: ActionFunctionArgs): Promise<Response> => {
+export const balanceSave = async ({ request, params }: ActionFunctionArgs): Promise<Response> => {
   const { portfolioId, balanceId } = params;
   return request
     .formData()
-    .then((formData: Iterable<readonly [PropertyKey, any]>) => {
+    .then(async (formData: Iterable<readonly [PropertyKey, any]>) => {
       const data = Object.fromEntries(formData);
       // console.log("balance save ", data);
       return fetch(`/api/portfolio/${portfolioId}/balances/id/${balanceId}/SaveBalance`, {
@@ -22,7 +22,7 @@ export const balanceSave = ({ request, params }: ActionFunctionArgs): Promise<Re
         body: JSON.stringify({ ...data, strategy: parseInt(data.strategy as string) }),
       });
     })
-    .then((response: Response) => response.json())
+    .then(async (response: Response) => response.json())
     .then((_data) => redirect("../"));
 };
 
@@ -31,15 +31,15 @@ export const balanceSave = ({ request, params }: ActionFunctionArgs): Promise<Re
  * @param params
  * @returns
  */
-export const balanceDelete = ({ request, params }: ActionFunctionArgs): Promise<Response> => {
+export const balanceDelete = async ({ request, params }: ActionFunctionArgs): Promise<Response> => {
   const { portfolioId, balanceId } = params;
   return request
     .formData()
-    .then((_formData: Iterable<readonly [PropertyKey, any]>) => {
+    .then(async (_formData: Iterable<readonly [PropertyKey, any]>) => {
       return fetch(`/api/portfolio/${portfolioId}/balances/id/${balanceId}/DeleteBalance`, {
         method: "DELETE",
       });
     })
-    .then((response: Response) => response.text())
+    .then(async (response: Response) => response.text())
     .then((_data) => redirect("../"));
 };

src/app/components/Portfolio/Balance/loaders.ts

@@ -6,10 +6,10 @@ import { BalanceEntry } from "../../../../routers/balances.types";
  * @param params
  * @returns
  */
-export const balancesIndexLoader = ({ params }: LoaderFunctionArgs): Promise<BalanceEntry[]> => {
+export const balancesIndexLoader = async ({ params }: LoaderFunctionArgs): Promise<BalanceEntry[]> => {
   const { portfolioId } = params;
   return fetch(`/api/portfolio/${portfolioId}/balances/index`)
-    .then((response) => response.json())
+    .then(async (response) => response.json())
     .then((data) => data.balances as BalanceEntry[]);
 };
 
@@ -18,10 +18,10 @@ export const balancesIndexLoader = ({ params }: LoaderFunctionArgs): Promise<Bal
  * @param params
  * @returns
  */
-export const balancesShowLoader = ({ params }: LoaderFunctionArgs): Promise<BalanceEntry> => {
+export const balancesShowLoader = async ({ params }: LoaderFunctionArgs): Promise<BalanceEntry> => {
   const { portfolioId, balanceId } = params;
   // console.log("balancesShowLoader", portfolioId, balanceId);
   return fetch(`/api/portfolio/${portfolioId}/balances/id/${balanceId}`)
-    .then((response) => response.json())
+    .then(async (response) => response.json())
     .then((data) => data.balance as BalanceEntry);
 };

src/app/components/Portfolio/Contract/loaders.ts

@@ -6,9 +6,9 @@ import { ContractEntry } from "../../../../routers/repository.types";
  * @param params
  * @returns
  */
-export const contractShowLoader = ({ params }: LoaderFunctionArgs): Promise<ContractEntry> => {
+export const contractShowLoader = async ({ params }: LoaderFunctionArgs): Promise<ContractEntry> => {
   const { portfolioId, contractId } = params;
   return fetch(`/api/portfolio/${portfolioId}/contracts/id/${contractId}`)
-    .then((response) => response.json())
+    .then(async (response) => response.json())
     .then((data) => data.contract as ContractEntry);
 };

src/app/components/Portfolio/Layout/PortfolioLayout.tsx

@@ -16,7 +16,7 @@ const PortfolioLayout: FunctionComponent<PortfolioLayoutProps> = ({ children, ..
 
   useEffect(() => {
     fetch(`/api/portfolio/${portfolioId}`)
-      .then((response) => response.json())
+      .then(async (response) => response.json())
       .then((data) => setPortfolio(data.portfolio as PortfolioModel))
       .catch((error) => console.error("error fetching portfolio:", error));
   }, []);

src/app/components/Portfolio/Portfolio/loaders.ts

@@ -6,9 +6,9 @@ import { Portfolio as PortfolioModel } from "../../../../models/portfolio.model"
  * @param param0
  * @returns
  */
-export const portfolioLoader = ({ params }: LoaderFunctionArgs): Promise<PortfolioModel> => {
+export const portfolioLoader = async ({ params }: LoaderFunctionArgs): Promise<PortfolioModel> => {
   const { portfolioId } = params;
   return fetch(`/api/portfolio/${portfolioId}`)
-    .then((response) => response.json())
+    .then(async (response) => response.json())
     .then((data) => data.portfolio as PortfolioModel);
 };

src/app/components/Portfolio/Position/actions.ts

@@ -5,11 +5,11 @@ import { ActionFunctionArgs, redirect } from "react-router-dom";
  * @param params
  * @returns
  */
-export const positionSave = ({ request, params }: ActionFunctionArgs): Promise<Response> => {
+export const positionSave = async ({ request, params }: ActionFunctionArgs): Promise<Response> => {
   const { portfolioId, positionId } = params;
   return request
     .formData()
-    .then((formData: Iterable<readonly [PropertyKey, any]>) => {
+    .then(async (formData: Iterable<readonly [PropertyKey, any]>) => {
       const data = Object.fromEntries(formData);
       // console.log("data:", data);
       return fetch(`/api/portfolio/${portfolioId}/positions/id/${positionId}/SavePosition`, {
@@ -21,7 +21,7 @@ export const positionSave = ({ request, params }: ActionFunctionArgs): Promise<R
         body: JSON.stringify(data),
       });
     })
-    .then((response: Response) => response.json())
+    .then(async (response: Response) => response.json())
     .then((_data) => redirect("../"));
 };
 
@@ -30,14 +30,14 @@ export const positionSave = ({ request, params }: ActionFunctionArgs): Promise<R
  * @param params
  * @returns
  */
-export const positionDelete = ({ request, params }: ActionFunctionArgs): Promise<Response> => {
+export const positionDelete = async ({ request, params }: ActionFunctionArgs): Promise<Response> => {
   const { portfolioId, positionId } = params;
   return request
     .formData()
-    .then((_formData: Iterable<readonly [PropertyKey, any]>) => {
+    .then(async (_formData: Iterable<readonly [PropertyKey, any]>) => {
       return fetch(`/api/portfolio/${portfolioId}/positions/id/${positionId}/DeletePosition`);
     })
-    .then((response: Response) => response.text())
+    .then(async (response: Response) => response.text())
     .then((_data) => redirect("../"));
 };
 
@@ -46,15 +46,15 @@ export const positionDelete = ({ request, params }: ActionFunctionArgs): Promise
  * @param params
  * @returns
  */
-export const positionGuessTrade = ({ request, params }: ActionFunctionArgs): Promise<Response> => {
+export const positionGuessTrade = async ({ request, params }: ActionFunctionArgs): Promise<Response> => {
   const { portfolioId, positionId } = params;
   return request
     .formData()
-    .then((formData: Iterable<readonly [PropertyKey, any]>) => {
+    .then(async (formData: Iterable<readonly [PropertyKey, any]>) => {
       const _data = Object.fromEntries(formData);
       return fetch(`/api/portfolio/${portfolioId}/positions/${positionId}/GuessTrade`);
     })
-    .then((response: Response) => response.json())
+    .then(async (response: Response) => response.json())
     .then((_data) => redirect("../"));
 };
 
@@ -64,15 +64,15 @@ export const positionGuessTrade = ({ request, params }: ActionFunctionArgs): Pro
  * @param request
  * @returns
  */
-export const positionAddToTrade = ({ request, params }: ActionFunctionArgs): Promise<Response> => {
+export const positionAddToTrade = async ({ request, params }: ActionFunctionArgs): Promise<Response> => {
   const { portfolioId, positionId, tradeId } = params;
   return request
     .formData()
-    .then((formData: Iterable<readonly [PropertyKey, any]>) => {
+    .then(async (formData: Iterable<readonly [PropertyKey, any]>) => {
       const _data = Object.fromEntries(formData);
       return fetch(`/api/portfolio/${portfolioId}/positions/${positionId}/AddToTrade/${tradeId}`);
     })
-    .then((response: Response) => response.json())
+    .then(async (response: Response) => response.json())
     .then((_data) => redirect("../"));
 };
 
@@ -82,15 +82,15 @@ export const positionAddToTrade = ({ request, params }: ActionFunctionArgs): Pro
  * @param request
  * @returns
  */
-export const positionUnlinkTrade = ({ request, params }: ActionFunctionArgs): Promise<Response> => {
+export const positionUnlinkTrade = async ({ request, params }: ActionFunctionArgs): Promise<Response> => {
   const { portfolioId, positionId } = params;
   // console.log("positionUnlinkTrade", portfolioId, positionId);
   return request
     .formData()
-    .then((formData: Iterable<readonly [PropertyKey, any]>) => {
+    .then(async (formData: Iterable<readonly [PropertyKey, any]>) => {
       const _data = Object.fromEntries(formData);
       return fetch(`/api/portfolio/${portfolioId}/positions/${positionId}/UnlinkTrade`);
     })
-    .then((response: Response) => response.json())
+    .then(async (response: Response) => response.json())
     .then((_data) => redirect("../"));
 };

src/app/components/Portfolio/Position/loaders.ts

@@ -7,10 +7,10 @@ import { PositionEntry } from "../../../../routers/positions.types";
  * @param param0
  * @returns
  */
-export const positionsIndexLoader = ({ params }: LoaderFunctionArgs): Promise<PositionEntry[]> => {
+export const positionsIndexLoader = async ({ params }: LoaderFunctionArgs): Promise<PositionEntry[]> => {
   const { portfolioId } = params;
   return fetch(`/api/portfolio/${portfolioId}/positions/index`)
-    .then((response) => response.json())
+    .then(async (response) => response.json())
     .then((data) => data.positions as PositionEntry[]);
 };
 
@@ -19,10 +19,10 @@ export const positionsIndexLoader = ({ params }: LoaderFunctionArgs): Promise<Po
  * @param param0
  * @returns
  */
-export const positionsOptionsLoader = ({ params }: LoaderFunctionArgs): Promise<PositionEntry[]> => {
+export const positionsOptionsLoader = async ({ params }: LoaderFunctionArgs): Promise<PositionEntry[]> => {
   const { portfolioId } = params;
   return fetch(`/api/portfolio/${portfolioId}/positions/index`)
-    .then((response) => response.json())
+    .then(async (response) => response.json())
     .then((data: { positions: PositionEntry[] }) => data.positions.filter((item) => item.contract.secType == "OPT"));
 };
 
@@ -31,9 +31,9 @@ export const positionsOptionsLoader = ({ params }: LoaderFunctionArgs): Promise<
  * @param param0
  * @returns
  */
-export const positionShowLoader = ({ params }: LoaderFunctionArgs): Promise<Position> => {
+export const positionShowLoader = async ({ params }: LoaderFunctionArgs): Promise<Position> => {
   const { portfolioId, positionId } = params;
   return fetch(`/api/portfolio/${portfolioId}/positions/id/${positionId}`)
-    .then((response) => response.json())
+    .then(async (response) => response.json())
     .then((data) => data.position as Position);
 };

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

@@ -1,7 +1,10 @@
-import { Box, HStack, Spacer, Text, VStack } from "@chakra-ui/react";
+import { Box, HStack, Link, Spacer, Text, VStack } from "@chakra-ui/react";
 import { default as React } from "react";
+import { Link as RouterLink, useParams } from "react-router-dom";
 import { DididendSummary, ReportEntry } from "../../../../routers/reports.types";
 import Number from "../../Number/Number";
+import { StatementLink } from "../Statement/links";
+import { formatMonth } from "./utils";
 
 type Props = { theReports: ReportEntry[] };
 
@@ -12,10 +15,12 @@ const _compareReports = (a: ReportEntry, b: ReportEntry): number => {
 };
 
 const OneCountryTable = ({
+  portfolioId,
   theReports,
   country,
   ..._rest
 }: {
+  portfolioId: string;
   theReports: ReportEntry[];
   country: string;
 }): React.ReactNode => {
@@ -36,10 +41,10 @@ const OneCountryTable = ({
           report.dividendsSummary
             .filter((summary: DididendSummary) => summary.country == country)
             .map((item) => (
-              <HStack key={`${report.year}-${report.month}-${item.country}`}>
-                <Text width="120px">
-                  {report.year}-{report.month}
-                </Text>
+              <HStack key={`${report.year}-${report.month}`}>
+                <Link to={StatementLink.toMonth(portfolioId, report.year, report.month)} as={RouterLink}>
+                  <Text width="120px">{formatMonth(report.year, report.month)}</Text>
+                </Link>
                 <Number value={item.grossAmountInBase} width="120px" />
                 <Number value={item.taxes} width="120px" />
                 <Number value={item.grossAmountInBase + item.taxes} width="120px" />
@@ -64,6 +69,8 @@ const OneCountryTable = ({
  * @returns
  */
 const Dividends = ({ theReports, ..._rest }: Props): React.ReactNode => {
+  const { portfolioId } = useParams();
+
   let grossTotal = 0;
   let taxesTotal = 0;
   let netTotal = 0;
@@ -97,7 +104,7 @@ const Dividends = ({ theReports, ..._rest }: Props): React.ReactNode => {
         {countries.map((country) => (
           <HStack alignContent="left" key={country} borderBottom="1px" borderColor="gray.200">
             <Box width="120px">{country}</Box>
-            <OneCountryTable theReports={theReports} country={country} />
+            <OneCountryTable portfolioId={portfolioId} theReports={theReports} country={country} />
           </HStack>
         ))}
         <HStack>

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

@@ -1,22 +1,21 @@
-import { Box, HStack, Spacer, Text, VStack } from "@chakra-ui/react";
+import { Box, HStack, Link, Spacer, Text, VStack } from "@chakra-ui/react";
 import { default as React } from "react";
+import { Link as RouterLink, useParams } from "react-router-dom";
 import { ReportEntry } from "../../../../routers/reports.types";
 import Number from "../../Number/Number";
+import { StatementLink } from "../Statement/links";
+import { formatMonth } from "./utils";
 
 type Props = { theReports: ReportEntry[] };
 
-const _compareReports = (a: ReportEntry, b: ReportEntry): number => {
-  let result = a.year - b.year;
-  if (!result) result = a.month - b.month;
-  return result;
-};
-
 /**
  * Fees table component
  * @param theReports Tax reports to summarize. Assume their summaries are sorted by date
  * @returns
  */
 const Fees = ({ theReports, ..._rest }: Props): React.ReactNode => {
+  const { portfolioId } = useParams();
+
   return (
     <>
       <VStack align="left">
@@ -29,9 +28,9 @@ const Fees = ({ theReports, ..._rest }: Props): React.ReactNode => {
         </HStack>
         {theReports.map((report) => (
           <HStack alignContent="left" key={`${report.year}-${report.month}`}>
-            <Text width="120px">
-              {report.year}-{report.month}
-            </Text>
+            <Link to={StatementLink.toMonth(portfolioId, report.year, report.month)} as={RouterLink}>
+              <Text width="120px">{formatMonth(report.year, report.month)}</Text>
+            </Link>
             <Number value={report.feesSummary.totalAmountInBase} width="120px" />
             <Spacer />
           </HStack>