Trade nav bar added

rylorin · Nov 2, 2024 · e38472a · e38472a
1 parent 98ccbfd
commit e38472a
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 46 deletions.
diff --git a/src/app/components/Layout/Layout.tsx b/src/app/components/Layout/Layout.tsx
@@ -28,7 +28,7 @@ const Layout: React.FunctionComponent<LayoutProps> = ({ children, ..._rest }): R
         {children}
       </Box>
       <Flex as="footer" justify="center" fontSize="xs" mt="21">
-        ©️2021-{new Date().getFullYear()}
+        &copy;2021-{new Date().getFullYear()}
         <Link href="https://github.com/rylorin" ml="1">
           rylorin
         </Link>

diff --git a/src/app/components/Portfolio/Trade/Nav.tsx b/src/app/components/Portfolio/Trade/Nav.tsx
diff --git a/src/app/components/Portfolio/Trade/TradeLayout.tsx b/src/app/components/Portfolio/Trade/TradeLayout.tsx
@@ -0,0 +1,37 @@
+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 { TradeLink } from "./links";
+
+type TradeLayoutProps = {
+  children: React.ReactNode;
+};
+
+const TradeLayout: FunctionComponent<TradeLayoutProps> = ({ children, ..._rest }): React.ReactNode => {
+  const { portfolioId } = useParams();
+
+  return (
+    <VStack align="left">
+      <Box>
+        <Link to={TradeLink.toIndex(portfolioId)} as={RouterLink}>
+          Open
+        </Link>
+        {" | "}
+        <Link to={TradeLink.toClosedYtd(portfolioId)} as={RouterLink}>
+          YTD
+        </Link>
+        {" | "}
+        <Link to={TradeLink.toClosed12m(portfolioId)} as={RouterLink}>
+          12M
+        </Link>
+        {" | "}
+        <Link to={TradeLink.toClosed(portfolioId)} as={RouterLink}>
+          All
+        </Link>
+      </Box>
+      {children}
+    </VStack>
+  );
+};
+
+export default TradeLayout;
diff --git a/src/app/components/Portfolio/Trade/TradesOpen.tsx b/src/app/components/Portfolio/Trade/TradesOpen.tsx
@@ -1,7 +1,7 @@
+import { Text, VStack } from "@chakra-ui/react";
 import { FunctionComponent, default as React } from "react";
 import { useLoaderData, useParams } from "react-router-dom";
 import { TradeEntry } from "../../../../routers/trades.types";
-import Nav from "./Nav";
 import TradesTable from "./OpenTradesTable";
 
 type Props = Record<string, never>;
@@ -35,10 +35,10 @@ const TradesOpen: FunctionComponent<Props> = ({ ..._rest }): React.ReactNode =>
   };
 
   return (
-    <>
-      <Nav />
+    <VStack align="left">
+      <Text as="h2">Open trades</Text>
       <TradesTable content={sortTrades(theTrades)} title="Open trades" />
-    </>
+    </VStack>
   );
 };
 

diff --git a/src/app/components/Portfolio/Trade/TradesSummary.tsx b/src/app/components/Portfolio/Trade/TradesSummary.tsx
@@ -1,9 +1,8 @@
-import { Text } from "@chakra-ui/react";
+import { Text, VStack } from "@chakra-ui/react";
 import React, { FunctionComponent } from "react";
 import { useLoaderData } from "react-router-dom";
 import { TradeSynthesys } from "../../../../routers/trades.types";
 import BarChart, { DataSet } from "../../Chart/BarChart";
-import Nav from "./Nav";
 import TradesMonthlyTable from "./TradesMonthlyTable";
 
 type TradeSummaryProps = Record<string, never>;
@@ -23,12 +22,11 @@ const TradeSummary: FunctionComponent<TradeSummaryProps> = ({ ..._rest }): React
   ];
 
   return (
-    <>
-      <Nav />
-      <Text>Closed trades by month</Text>
+    <VStack align="left">
+      <Text as="h2">Closed trades by month</Text>
       <BarChart title="Realized Performance" labels={labels} datasets={datasets} />
       <TradesMonthlyTable content={theSynthesys.byMonth} />
-    </>
+    </VStack>
   );
 };
 

diff --git a/src/app/main.tsx b/src/app/main.tsx
@@ -62,6 +62,7 @@ import {
 } from "./components/Portfolio/Statement/loaders";
 import TradesTable from "./components/Portfolio/Trade/ClosedTradesTable";
 import TradeEdit from "./components/Portfolio/Trade/TradeEdit";
+import TradeLayout from "./components/Portfolio/Trade/TradeLayout";
 import TradeShow from "./components/Portfolio/Trade/TradeShow";
 import TradesOpen from "./components/Portfolio/Trade/TradesOpen";
 import TradesSummary from "./components/Portfolio/Trade/TradesSummary";
@@ -206,7 +207,11 @@ const router = createBrowserRouter([
               /* Trades */
               {
                 path: "trades",
-                action: PortfolioAction,
+                element: (
+                  <TradeLayout>
+                    <Outlet />
+                  </TradeLayout>
+                ),
                 children: [
                   {
                     path: "summary",