Create base account route

moneymgr_web/src/App.tsx

@@ -15,6 +15,7 @@ import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 import { BaseLoginPage } from "./widgets/BaseLoginPage";
 import { TokensRoute } from "./routes/TokensRoute";
 import { AccountsRoute } from "./routes/AccountsRoute";
+import { AccountRoute } from "./routes/AccountRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -41,6 +42,7 @@ export function App() {
           <Route path="" element={<HomeRoute />} />
           <Route path="tokens" element={<TokensRoute />} />
           <Route path="accounts" element={<AccountsRoute />} />
+          <Route path="account/:accountId" element={<AccountRoute />} />
 
           <Route path="*" element={<NotFoundRoute />} />
         </Route>

moneymgr_web/src/routes/AccountRoute.tsx

@@ -0,0 +1,27 @@
+import { useParams } from "react-router-dom";
+import { MoneyMgrWebRouteContainer } from "../widgets/MoneyMgrWebRouteContainer";
+import { useAccounts } from "../hooks/AccountsListProvider";
+import { NotFoundRoute } from "./NotFound";
+import { AccountWidget } from "../widgets/AccountWidget";
+
+export function AccountRoute(): React.ReactElement {
+  const { accountId } = useParams();
+
+  const accounts = useAccounts();
+  const account = accounts.get(Number(accountId));
+
+  if (account === null) return <NotFoundRoute />;
+
+  return (
+    <MoneyMgrWebRouteContainer
+      label={
+        <span style={{ display: "inline-flex", alignItems: "center" }}>
+          <AccountWidget account={account} />
+          &nbsp;{account.name}
+        </span>
+      }
+    >
+      TODO : table
+    </MoneyMgrWebRouteContainer>
+  );
+}

moneymgr_web/src/widgets/MoneyMgrWebRouteContainer.tsx

@@ -3,7 +3,7 @@ import React, { PropsWithChildren } from "react";
 
 export function MoneyMgrWebRouteContainer(
   p: {
-    label: string;
+    label: string | React.ReactElement;
     actions?: React.ReactElement;
   } & PropsWithChildren
 ): React.ReactElement {