feat: add bond pages and portfolio navigation

src/app/routes/AppRoutes.tsx

@@ -4,6 +4,14 @@ import { Navigate, Route, Routes } from "react-router";
 import { LazyPage } from "./RouteFallback";
 import { Protected, Public } from "./RouteGuards";
 
+const BondPage = lazy(async () => {
+	const { BondPage } = await import("@/pages/bond");
+	return { default: BondPage };
+});
+const BondsPage = lazy(async () => {
+	const { BondsPage } = await import("@/pages/bonds");
+	return { default: BondsPage };
+});
 const StockPage = lazy(async () => {
 	const { StockPage } = await import("@/pages/stock");
 	return { default: StockPage };
@@ -85,6 +93,22 @@ const AppRoutes: FC = () => (
 				</Protected>
 			}
 		>
+			<Route
+				path="/bonds"
+				element={
+					<LazyPage variant="content">
+						<BondsPage />
+					</LazyPage>
+				}
+			/>
+			<Route
+				path="/bonds/:bondId"
+				element={
+					<LazyPage variant="content">
+						<BondPage />
+					</LazyPage>
+				}
+			/>
 			<Route
 				path="/stocks"
 				element={

src/app/ui/AppBreadcrumbs.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useMatch } from "react-router";
 import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
 import { AccountScopeSwitch } from "./AccountScopeSwitch";
+import { BondBreadcrumbs } from "./BondBreadcrumbs";
 import { BreadcrumbTrail } from "./BreadcrumbTrail";
 import { StockBreadcrumbs } from "./StockBreadcrumbs";
 
@@ -20,6 +21,8 @@ const AppBreadcrumbs: FC = () => {
 	const settings = useMatch({ path: "/settings", end: true });
 
 	const stock = useMatch({ path: "/stocks/:stockId", end: true });
+	const bond = useMatch({ path: "/bonds/:bondId", end: true });
+	if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
 	if (stock)
 		return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
 	if (operations)

src/app/ui/BondBreadcrumbs.tsx

@@ -0,0 +1,20 @@
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useBond } from "@/entities/bond";
+import { BreadcrumbTrail } from "./BreadcrumbTrail";
+
+type BondBreadcrumbsProps = { identifier: string };
+const BondBreadcrumbs: FC<BondBreadcrumbsProps> = (props) => {
+	const { data } = useBond(props.identifier);
+	const { t } = useTranslation();
+	return (
+		<BreadcrumbTrail
+			items={[
+				{ label: t("bond.searchTitle"), to: "/bonds" },
+				{ label: data?.name ?? t("bond.instrument") },
+			]}
+		/>
+	);
+};
+
+export { BondBreadcrumbs };