apps/frontend/src/widgets/broker-account-layout/index.ts

@@ -1,3 +1,3 @@
 export { useBrokerAccountContext } from './lib/useBrokerAccountContext'
-export type { BrokerAccountContext } from './ui/BrokerAccountLayout'
+export type { BrokerAccountContextValue } from './ui/BrokerAccountLayout'
 export { BrokerAccountLayout } from './ui/BrokerAccountLayout'

apps/frontend/src/widgets/broker-account-layout/lib/useBrokerAccountContext.ts

@@ -1,6 +1,10 @@
-import { useParams } from '@tanstack/react-router'
+import { useContext } from 'react'
+import { BrokerAccountContext } from '../ui/BrokerAccountLayout'
 
 export function useBrokerAccountContext() {
-  const { accountId = '' } = useParams({ from: '/broker/$accountId' })
-  return { accountId }
+  const context = useContext(BrokerAccountContext)
+  if (!context) {
+    throw new Error('useBrokerAccountContext must be used within BrokerAccountLayout')
+  }
+  return context
 }

apps/frontend/src/widgets/broker-account-layout/ui/BrokerAccountLayout.tsx

@@ -1,8 +1,10 @@
 import { Heading } from '@moex-vibe/design-system'
 import { Box } from '@mui/material'
+import type { UseQueryResult } from '@tanstack/react-query'
 import { Link, useParams } from '@tanstack/react-router'
-import type { ReactNode } from 'react'
+import { createContext, type ReactNode } from 'react'
 import { useBrokerPortfolio } from '@/entities/broker-account'
+import type { BrokerPortfolio } from '@/shared/api'
 
 const baseLinkStyle: React.CSSProperties = {
   padding: '10px 12px',
@@ -17,19 +19,27 @@ const baseLinkStyle: React.CSSProperties = {
 }
 
 const links = [
-  { to: '.', label: 'Обзор' },
+  { to: '', label: 'Обзор' },
   { to: '/shares', label: 'Акции' },
   { to: '/bonds', label: 'Облигации' },
   { to: '/operations', label: 'Операции' },
   { to: '/events', label: 'События' },
 ]
 
+export interface BrokerAccountContextValue {
+  accountId: string
+  portfolio: UseQueryResult<BrokerPortfolio>
+}
+
+export const BrokerAccountContext = createContext<BrokerAccountContextValue | null>(null)
+
 export function BrokerAccountLayout({ children }: { children: ReactNode }) {
   const { accountId = '' } = useParams({ from: '/broker/$accountId' })
   const portfolio = useBrokerPortfolio(accountId)
   const basePath = `/broker/${encodeURIComponent(accountId)}`
 
   return (
+    <BrokerAccountContext.Provider value={{ accountId, portfolio }}>
       <Box sx={{ display: 'grid', gap: 3 }}>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
           <Heading level={1}>{portfolio.data?.account.name || 'Брокерский счёт'}</Heading>
@@ -65,6 +75,7 @@ export function BrokerAccountLayout({ children }: { children: ReactNode }) {
                 key={link.to}
                 to={`${basePath}${link.to}`}
                 style={baseLinkStyle}
+                activeOptions={{ exact: link.to === '' }}
                 activeProps={{
                   style: {
                     ...baseLinkStyle,
@@ -81,5 +92,6 @@ export function BrokerAccountLayout({ children }: { children: ReactNode }) {
           <Box sx={{ minWidth: 0 }}>{children}</Box>
         </Box>
       </Box>
+    </BrokerAccountContext.Provider>
   )
 }