Tax reports nav bar added

rylorin · Nov 2, 2024 · 2568ada · 2568ada
1 parent e38472a
commit 2568ada
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 33 deletions.
diff --git a/src/app/components/Portfolio/Report/ReportIndex.tsx b/src/app/components/Portfolio/Report/ReportIndex.tsx
@@ -1,4 +1,4 @@
-import { Box, Link, Spacer, Table, TableCaption, TableContainer, Tbody, Td, Thead, Tr } from "@chakra-ui/react";
+import { Link, Table, TableCaption, TableContainer, Tbody, Td, Thead, Tr } from "@chakra-ui/react";
 import { FunctionComponent, default as React } from "react";
 import { Link as RouterLink, useLoaderData, useParams } from "react-router-dom";
 import { ReportEntry } from "../../../../routers/reports.types";
@@ -98,26 +98,6 @@ const ReportsIndex: FunctionComponent<Props> = ({ ..._rest }): React.ReactNode =
 
   return (
     <>
-      <Box>
-        <Spacer />
-        <Link to={"../ytd"} as={RouterLink}>
-          YTD
-        </Link>
-        {" | "}
-        <Link to={"../12m"} as={RouterLink}>
-          12M
-        </Link>
-        {" | "}
-        <Link to={"../index"} as={RouterLink}>
-          All
-        </Link>
-        {/* <Routes>
-          <Route index element={"All"} /> |
-          <Route path="/YTD" element={"YTD"} /> |
-          <Route path="/12M" element={"12M"} />
-        </Routes> */}
-        <Spacer />
-      </Box>
       <BarChart
         title="Realized Performance"
         labels={theReports.map((item) => `${item.year}-${item.month}`)}

diff --git a/src/app/components/Portfolio/Report/ReportLayout.tsx b/src/app/components/Portfolio/Report/ReportLayout.tsx
@@ -0,0 +1,33 @@
+import { Box, Link, VStack } from "@chakra-ui/react";
+import { FunctionComponent, default as React } from "react";
+import { Link as RouterLink, useParams } from "react-router-dom";
+import { ReportLink } from "./links";
+
+type ReportLayoutProps = {
+  children: React.ReactNode;
+};
+
+const ReportLayout: FunctionComponent<ReportLayoutProps> = ({ children, ..._rest }): React.ReactNode => {
+  const { portfolioId } = useParams();
+
+  return (
+    <VStack align="left">
+      <Box>
+        <Link to={ReportLink.toYtd(portfolioId)} as={RouterLink}>
+          YTD
+        </Link>
+        {" | "}
+        <Link to={ReportLink.to12m(portfolioId)} as={RouterLink}>
+          12M
+        </Link>
+        {" | "}
+        <Link to={ReportLink.toAll(portfolioId)} as={RouterLink}>
+          All
+        </Link>
+      </Box>
+      {children}
+    </VStack>
+  );
+};
+
+export default ReportLayout;
diff --git a/src/app/components/Portfolio/Report/ReportSummary.tsx b/src/app/components/Portfolio/Report/ReportSummary.tsx
@@ -1,12 +1,10 @@
-import { Box, Link, Spacer } from "@chakra-ui/react";
 import { FunctionComponent, default as React } from "react";
-import { Link as RouterLink, useLoaderData, useParams } from "react-router-dom";
+import { useLoaderData } from "react-router-dom";
 import { ReportEntry } from "../../../../routers/reports.types";
 import Dividends from "./DividendsComponent";
 import Fees from "./FeesComponent";
 import Interests from "./InterestsComponent";
 import PnL from "./PnLsComponent";
-import { ReportLink } from "./links";
 
 type Props = Record<string, never>;
 
@@ -22,19 +20,10 @@ const compareReports = (a: ReportEntry, b: ReportEntry): number => {
  * @returns
  */
 const ReportSummary: FunctionComponent<Props> = ({ ..._rest }): React.ReactNode => {
-  const { portfolioId } = useParams();
   const theReports: ReportEntry[] = (useLoaderData() as ReportEntry[]).sort(compareReports);
 
   return (
     <>
-      <Box>
-        <Spacer />
-        <Link to={ReportLink.toIndex(portfolioId)} as={RouterLink}>
-          Index
-        </Link>
-        <Spacer />
-      </Box>
-
       <h2>Dividends</h2>
       <Dividends theReports={theReports} />
 

diff --git a/src/app/components/Portfolio/Report/links.ts b/src/app/components/Portfolio/Report/links.ts
@@ -1,5 +1,8 @@
 export const ReportLink = {
   toIndex: (portfolioId: number | string): string => (portfolioId ? `/portfolio/${portfolioId}/reports/ytd` : "#"),
+  toYtd: (portfolioId: number | string): string => (portfolioId ? `/portfolio/${portfolioId}/reports/ytd` : "#"),
+  to12m: (portfolioId: number | string): string => (portfolioId ? `/portfolio/${portfolioId}/reports/12m` : "#"),
+  toAll: (portfolioId: number | string): string => (portfolioId ? `/portfolio/${portfolioId}/reports/index` : "#"),
   toSummary: (portfolioId: number | string, year: number | string): string =>
     portfolioId && year ? `/portfolio/${portfolioId}/reports/year/${year}/` : "#",
   toDetails: (portfolioId: number | string, year: number | string): string =>

diff --git a/src/app/main.tsx b/src/app/main.tsx
@@ -34,6 +34,7 @@ import {
 } from "./components/Portfolio/Position/loaders";
 import ReportDetails from "./components/Portfolio/Report/ReportDetails";
 import ReportsIndex from "./components/Portfolio/Report/ReportIndex";
+import ReportLayout from "./components/Portfolio/Report/ReportLayout";
 import ReportSummary from "./components/Portfolio/Report/ReportSummary";
 import {
   reportSummaryLoader,
@@ -291,6 +292,11 @@ const router = createBrowserRouter([
               /* Tax reports */
               {
                 path: "reports",
+                element: (
+                  <ReportLayout>
+                    <Outlet />
+                  </ReportLayout>
+                ),
                 children: [
                   { path: "index", element: <ReportsIndex />, loader: reportsIndexLoader },
                   { path: "ytd", element: <ReportsIndex />, loader: reportsIndexLoaderYtd },