feat: updatable nagivation items

harp_apps/dashboard/frontend/src/Components/Layout/Layout.test.tsx

@@ -6,9 +6,14 @@ import { renderWithClient } from "tests/utils"
 import { default as Layout } from "./Layout"
 
 it("renders the title and data when the query is successful", async () => {
+  const navigationItems = [
+    { label: "Overview", to: "/", exact: true },
+    { label: "Transactions", to: "/transactions" },
+    { label: "System", to: "/system" },
+  ]
   const result = renderWithClient(
     <MemoryRouter>
-      <Layout title="Harp EA" />
+      <Layout title="Harp EA" navigationItems={navigationItems} />
     </MemoryRouter>,
   )
 

harp_apps/dashboard/frontend/src/Components/Layout/Layout.tsx

@@ -9,12 +9,11 @@ import { Navbar } from "ui/Components/Navbar"
 import { classNames } from "ui/Utilities"
 
 const StyledContainerWithHorizontalConstraint = styled.div(() => [tw`mx-auto px-2 sm:px-6 lg:px-8`])
-
-const navigationItems = [
-  { label: "Overview", to: "/", exact: true },
-  { label: "Transactions", to: "/transactions" },
-  { label: "System", to: "/system" },
-]
+export interface NavigationItem {
+  label: string
+  to: string
+  exact?: boolean
+}
 
 function RightNav() {
   const systemQuery = useSystemQuery()
@@ -67,7 +66,7 @@ export function Loader({ style, className }: { style?: CSSProperties; className?
   )
 }
 
-function Layout({ title }: { title: string }) {
+function Layout({ title, navigationItems }: { title: string; navigationItems: NavigationItem[] }) {
   const location = useLocation()
   return (
     <div className="flex h-screen min-h-screen max-h-screen w-screen flex-col">

harp_apps/dashboard/frontend/src/Pages/Transactions/Components/List/TransactionDataTable.tsx

@@ -1,11 +1,11 @@
 import { StarIcon } from "@heroicons/react/24/outline"
 import { formatDistance } from "date-fns"
 import { useState } from "react"
-import { DataTable } from "ui/Components/DataTable"
 
 import { useSetUserFlagMutation } from "Domain/Transactions"
 import { getRequestFromTransactionMessages, getResponseFromTransactionMessages } from "Domain/Transactions/Utils"
 import { Message, Transaction } from "Models/Transaction"
+import { DataTable } from "ui/Components/DataTable"
 
 import { Duration } from "../Duration"
 import { MessageSummary } from "../MessageSummary.tsx"

harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionListPage.tsx

@@ -13,9 +13,9 @@ import { SearchBar } from "ui/Components/SearchBar/SearchBar"
 import { H1 } from "ui/Components/Typography"
 
 import { RefreshButton } from "./Components/Buttons.tsx"
+import { TransactionsDataTableProps } from "./Components/List/TransactionDataTable.tsx"
 import { OptionalPaginator } from "./Components/OptionalPaginator.tsx"
 import { TransactionListOnQuerySuccess } from "./TransactionListOnQuerySuccess.tsx"
-import { TransactionsDataTableProps } from "./Components/List/TransactionDataTable.tsx"
 
 interface TransactionListPageProps {
   TransactionDataTable: React.FC<TransactionsDataTableProps>

harp_apps/dashboard/frontend/src/main.tsx

@@ -10,11 +10,16 @@ import GlobalStyles from "Styles/GlobalStyles"
 import "./index.css"
 
 const TransactionListPage = lazy(() => import("./Pages/Transactions/TransactionListPage"))
+const navigationItems = [
+  { label: "Overview", to: "/", exact: true },
+  { label: "Transactions", to: "/transactions" },
+  { label: "System", to: "/system" },
+]
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <Layout title="HARP EA" />,
+    element: <Layout title="HARP EA" navigationItems={navigationItems} />,
     children: [
       {
         path: "",