codex/broker-accounts-page #34
@ -32,7 +32,16 @@ module.exports = {
|
||||
'no-restricted-imports': ['warn', {
|
||||
paths: [{
|
||||
name: '@mui/material',
|
||||
message: 'Import from @moex-vibe/design-system instead.',
|
||||
importNames: [
|
||||
// DS-covered: import from @moex-vibe/design-system
|
||||
'Typography', 'Button', 'TextField', 'Select', 'Checkbox',
|
||||
'Paper', 'Chip', 'Badge', 'Alert', 'Dialog', 'Skeleton',
|
||||
'CircularProgress', 'Link', 'IconButton',
|
||||
'Table', 'TableBody', 'TableCell', 'TableContainer',
|
||||
'TableHead', 'TableRow', 'TableSortLabel',
|
||||
'TablePagination', 'Pagination',
|
||||
],
|
||||
message: 'Import from @moex-vibe/design-system instead, or use Box/Stack/Grid for layout.',
|
||||
}],
|
||||
}],
|
||||
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Box } from '@mui/material';
|
||||
import { Text } from '@moex-vibe/design-system';
|
||||
import { useBrokerOperations } from '@/entities/broker-operation';
|
||||
import { useBrokerAccountContext } from '@/widgets/broker-account-layout';
|
||||
import { BrokerAllocationChart } from '@/widgets/broker-allocation-chart';
|
||||
@ -11,16 +13,22 @@ export function BrokerAccountOverviewPage() {
|
||||
|
||||
if (portfolio.isLoading) return <BrokerOverviewSkeleton />;
|
||||
if (portfolio.error || !portfolio.data) {
|
||||
return <p role="alert">Не удалось загрузить сводку счёта</p>;
|
||||
return (
|
||||
<Text component="p" role="alert" tone="negative">
|
||||
Не удалось загрузить сводку счёта
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="broker-overview">
|
||||
<Box component="div" sx={{ display: 'grid', gap: 3 }}>
|
||||
<BrokerSummary portfolio={portfolio.data} />
|
||||
<BrokerAllocationChart portfolio={portfolio.data} />
|
||||
<BrokerAssetCards accountId={accountId} portfolio={portfolio.data} />
|
||||
{operations.error ? (
|
||||
<p role="alert">Не удалось загрузить последние операции</p>
|
||||
<Text component="p" role="alert" tone="negative">
|
||||
Не удалось загрузить последние операции
|
||||
</Text>
|
||||
) : (
|
||||
<BrokerOperationsTable
|
||||
title="Последние операции"
|
||||
@ -33,6 +41,6 @@ export function BrokerAccountOverviewPage() {
|
||||
page={operations.data}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { Box } from '@mui/material';
|
||||
import { EmptyState, Heading, Text } from '@moex-vibe/design-system';
|
||||
import {
|
||||
aggregateBrokerAccounts,
|
||||
useBrokerAccounts,
|
||||
@ -8,20 +10,20 @@ import { BrokerAccountsSummary } from '@/widgets/broker-accounts-summary';
|
||||
|
||||
function BrokerAccountsPageSkeleton() {
|
||||
return (
|
||||
<div className="broker-accounts-page">
|
||||
<header className="broker-accounts-page__header">
|
||||
<div>
|
||||
<p className="broker-accounts-page__eyebrow">T-Bank broker overview</p>
|
||||
<h1 className="broker-accounts-page__title">Брокерские счета</h1>
|
||||
</div>
|
||||
</header>
|
||||
<Box sx={{ display: 'grid', gap: 3 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
|
||||
<Text tone="secondary" variant="label">
|
||||
T-Bank broker overview
|
||||
</Text>
|
||||
<Heading level={1}>Брокерские счета</Heading>
|
||||
</Box>
|
||||
<BrokerAccountsSummary
|
||||
aggregate={{ portfolios: [], cash: [] }}
|
||||
availableCount={0}
|
||||
totalCount={0}
|
||||
isLoading
|
||||
/>
|
||||
<div className="broker-accounts-page__cards">
|
||||
<Box sx={{ display: 'grid', gap: 2 }}>
|
||||
{['1', '2', '3'].map((id) => (
|
||||
<BrokerAccountCard
|
||||
key={id}
|
||||
@ -38,8 +40,8 @@ function BrokerAccountsPageSkeleton() {
|
||||
onRetry={() => undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -53,25 +55,23 @@ export function BrokerAccountsPage() {
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <p style={{ color: 'var(--color-negative)' }}>Не удалось загрузить счета</p>;
|
||||
return <Text tone="negative">Не удалось загрузить счета</Text>;
|
||||
}
|
||||
|
||||
if (safeAccounts.length === 0) {
|
||||
return (
|
||||
<div className="broker-accounts-page">
|
||||
<header className="broker-accounts-page__header">
|
||||
<div>
|
||||
<p className="broker-accounts-page__eyebrow">T-Bank broker overview</p>
|
||||
<h1 className="broker-accounts-page__title">Брокерские счета</h1>
|
||||
</div>
|
||||
</header>
|
||||
<section className="broker-accounts-empty">
|
||||
<h2>Пока нет подключённых счетов</h2>
|
||||
<p>
|
||||
После подключения T-Bank здесь появятся брокерские счета и ИИС со сводкой по капиталу.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<Box sx={{ display: 'grid', gap: 3 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
|
||||
<Text tone="secondary" variant="label">
|
||||
T-Bank broker overview
|
||||
</Text>
|
||||
<Heading level={1}>Брокерские счета</Heading>
|
||||
</Box>
|
||||
<EmptyState
|
||||
title="Пока нет подключённых счетов"
|
||||
description="После подключения T-Bank здесь появятся брокерские счета и ИИС со сводкой по капиталу."
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -85,16 +85,16 @@ export function BrokerAccountsPage() {
|
||||
const aggregate = aggregateBrokerAccounts(successfulPortfolios);
|
||||
|
||||
return (
|
||||
<div className="broker-accounts-page">
|
||||
<header className="broker-accounts-page__header">
|
||||
<div>
|
||||
<p className="broker-accounts-page__eyebrow">T-Bank broker overview</p>
|
||||
<h1 className="broker-accounts-page__title">Брокерские счета</h1>
|
||||
</div>
|
||||
<p className="broker-accounts-page__caption">
|
||||
{safeAccounts.length} счетов под наблюдением
|
||||
</p>
|
||||
</header>
|
||||
<Box sx={{ display: 'grid', gap: 3 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, alignItems: 'end' }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
|
||||
<Text tone="secondary" variant="label">
|
||||
T-Bank broker overview
|
||||
</Text>
|
||||
<Heading level={1}>Брокерские счета</Heading>
|
||||
</Box>
|
||||
<Text tone="secondary">{safeAccounts.length} счетов под наблюдением</Text>
|
||||
</Box>
|
||||
|
||||
<BrokerAccountsSummary
|
||||
aggregate={aggregate}
|
||||
@ -103,7 +103,7 @@ export function BrokerAccountsPage() {
|
||||
isLoading={availableCount === 0 && loadingCount > 0}
|
||||
/>
|
||||
|
||||
<div className="broker-accounts-page__cards">
|
||||
<Box sx={{ display: 'grid', gap: 2 }}>
|
||||
{accountQueries.map(({ account, query }) => (
|
||||
<BrokerAccountCard
|
||||
key={account.id}
|
||||
@ -116,7 +116,7 @@ export function BrokerAccountsPage() {
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { Box } from '@mui/material';
|
||||
import { Heading, Text } from '@moex-vibe/design-system';
|
||||
import {
|
||||
BROKER_OPERATION_TYPE_OPTIONS,
|
||||
isBrokerOperationType,
|
||||
@ -32,7 +34,9 @@ export function BrokerOperationsPage() {
|
||||
}
|
||||
|
||||
const history = operations.error ? (
|
||||
<p role="alert">Не удалось загрузить историю операций</p>
|
||||
<Text component="p" tone="negative" role="alert">
|
||||
Не удалось загрузить историю операций
|
||||
</Text>
|
||||
) : (
|
||||
<BrokerOperationsTable
|
||||
title="История операций"
|
||||
@ -53,13 +57,15 @@ export function BrokerOperationsPage() {
|
||||
);
|
||||
|
||||
return (
|
||||
<section aria-labelledby="broker-operations-heading">
|
||||
<div className="broker-operations__toolbar">
|
||||
<h2 id="broker-operations-heading" style={{ fontSize: 20, margin: 0 }}>
|
||||
<Box component="section" aria-labelledby="broker-operations-heading">
|
||||
<Box
|
||||
sx={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 2, mb: 2 }}
|
||||
>
|
||||
<Heading level={2} id="broker-operations-heading">
|
||||
Операции
|
||||
</h2>
|
||||
<label>
|
||||
<span>Тип операции</span>
|
||||
</Heading>
|
||||
<Box component="label" sx={{ display: 'grid', gap: 0.5, color: 'text.secondary' }}>
|
||||
<Text variant="label">Тип операции</Text>
|
||||
<select value={selectedType} onChange={handleTypeChange}>
|
||||
<option value="">Все операции</option>
|
||||
{BROKER_OPERATION_TYPE_OPTIONS.map((option) => (
|
||||
@ -68,9 +74,9 @@ export function BrokerOperationsPage() {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
{history}
|
||||
</section>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { Box } from '@mui/material';
|
||||
import { Heading, Text } from '@moex-vibe/design-system';
|
||||
import { useBrokerPositions } from '@/entities/broker-position';
|
||||
import { useBrokerAccountContext } from '@/widgets/broker-account-layout';
|
||||
import { BrokerPositionTable } from '@/widgets/broker-positions-table';
|
||||
@ -15,14 +17,14 @@ export function BrokerPositionsPage({ type, title }: BrokerPositionsPageProps) {
|
||||
|
||||
if (positions.error) {
|
||||
return (
|
||||
<section aria-labelledby={`broker-${type}-heading`}>
|
||||
<h2 id={`broker-${type}-heading`} style={{ fontSize: 20, margin: 0 }}>
|
||||
<Box component="section" aria-labelledby={`broker-${type}-heading`}>
|
||||
<Heading level={2} id={`broker-${type}-heading`}>
|
||||
{title}
|
||||
</h2>
|
||||
<p role="alert">
|
||||
</Heading>
|
||||
<Text component="p" tone="negative" role="alert">
|
||||
{type === 'share' ? 'Не удалось загрузить акции' : 'Не удалось загрузить облигации'}
|
||||
</p>
|
||||
</section>
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import { Box } from '@mui/material';
|
||||
import { Heading, Text } from '@moex-vibe/design-system';
|
||||
|
||||
export function HomePage() {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', paddingTop: 120 }}>
|
||||
<h1 style={{ fontSize: 32, fontWeight: 700, marginBottom: 12 }}>MoexVibe</h1>
|
||||
<p style={{ color: 'var(--color-text-secondary)', fontSize: 16, marginBottom: 32 }}>
|
||||
Анализ акций и облигаций Московской биржи
|
||||
</p>
|
||||
<p style={{ color: '#888', fontSize: 13 }}>Введите название или тикер в строку поиска выше</p>
|
||||
<p style={{ color: '#aaa', fontSize: 12, marginTop: 8 }}>
|
||||
Данные задерживаются на 15 минут · Бесплатный API MOEX ISS
|
||||
</p>
|
||||
</div>
|
||||
<Box textAlign="center" pt={30}>
|
||||
<Heading level={1} size="display">
|
||||
MoexVibe
|
||||
</Heading>
|
||||
<Text tone="secondary">Анализ акций и облигаций Московской биржи</Text>
|
||||
<Text tone="muted">Введите название или тикер в строку поиска выше</Text>
|
||||
<Text tone="muted">Данные задерживаются на 15 минут · Бесплатный API MOEX ISS</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { screen } from '@testing-library/react';
|
||||
import { screen, waitFor } from '@testing-library/react';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
@ -72,6 +72,8 @@ describe('LoginPage', () => {
|
||||
await user.type(screen.getByPlaceholderText('••••••••'), 'password');
|
||||
await user.click(screen.getByRole('button', { name: 'Войти' }));
|
||||
|
||||
expect(await screen.findByText('Вход...')).toBeInTheDocument();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: 'Войти' })).toBeDisabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { useState, type FormEvent } from 'react';
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Box } from '@mui/material';
|
||||
import { Button, Heading, Text, TextField } from '@moex-vibe/design-system';
|
||||
import { useSession } from '@/entities/session';
|
||||
|
||||
export function LoginPage() {
|
||||
@ -28,84 +30,44 @@ export function LoginPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 400, margin: '60px auto' }}>
|
||||
<h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 700 }}>Вход</h1>
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
{error && <div style={{ color: 'var(--color-negative)', fontSize: 14 }}>{error}</div>}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: 4,
|
||||
fontSize: 14,
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
style={inputStyle}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: 4,
|
||||
fontSize: 14,
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
Пароль
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
style={inputStyle}
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" disabled={loading} style={buttonStyle}>
|
||||
{loading ? 'Вход...' : 'Войти'}
|
||||
</button>
|
||||
<p style={{ textAlign: 'center', fontSize: 14, color: 'var(--color-text-secondary)' }}>
|
||||
<Box maxWidth={400} mx="auto" mt={7.5}>
|
||||
<Heading level={1} size="title">
|
||||
Вход
|
||||
</Heading>
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={handleSubmit}
|
||||
sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 3 }}
|
||||
>
|
||||
{error && <Text tone="negative">{error}</Text>}
|
||||
<TextField
|
||||
label="Email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
<TextField
|
||||
label="Пароль"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
<Button type="submit" loading={loading}>
|
||||
Войти
|
||||
</Button>
|
||||
<Text tone="secondary" style={{ textAlign: 'center' }}>
|
||||
Нет аккаунта?{' '}
|
||||
<Link
|
||||
to={`/register${redirect !== '/' ? `?redirect=${encodeURIComponent(redirect)}` : ''}`}
|
||||
style={{ color: 'var(--color-primary)' }}
|
||||
>
|
||||
Зарегистрироваться
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: 'var(--border-radius)',
|
||||
fontSize: 16,
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
};
|
||||
|
||||
const buttonStyle: React.CSSProperties = {
|
||||
padding: '12px 24px',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: 'var(--border-radius)',
|
||||
fontSize: 16,
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { screen } from '@testing-library/react';
|
||||
import { screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '@/shared/lib/test/server';
|
||||
@ -57,6 +57,8 @@ describe('ProfilePage', () => {
|
||||
await user.type(input, 'New Name');
|
||||
await user.click(screen.getByRole('button', { name: 'Сохранить' }));
|
||||
|
||||
expect(await screen.findByText('Сохранение...')).toBeInTheDocument();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: 'Сохранить' })).toBeDisabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { useState, type FormEvent } from 'react';
|
||||
import { Box } from '@mui/material';
|
||||
import { Button, Heading, Surface, Text, TextField } from '@moex-vibe/design-system';
|
||||
import { useSession } from '@/entities/session';
|
||||
|
||||
export function ProfilePage() {
|
||||
@ -24,82 +26,37 @@ export function ProfilePage() {
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 500, margin: '40px auto' }}>
|
||||
<h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 700 }}>Профиль</h1>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--color-surface)',
|
||||
borderRadius: 'var(--border-radius)',
|
||||
boxShadow: 'var(--shadow)',
|
||||
padding: 24,
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>Почта</span>
|
||||
<p style={{ fontSize: 16, fontWeight: 500 }}>{user.email}</p>
|
||||
</div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>Роль</span>
|
||||
<p style={{ fontSize: 16, fontWeight: 500 }}>{user.role}</p>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: 4,
|
||||
fontSize: 14,
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
Имя
|
||||
</label>
|
||||
<input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: 'var(--border-radius)',
|
||||
fontSize: 16,
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Box maxWidth={500} mx="auto" mt={5}>
|
||||
<Heading level={1} size="title">
|
||||
Профиль
|
||||
</Heading>
|
||||
<Surface elevation="sm" padding="md">
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<Text variant="label" tone="secondary">
|
||||
Почта
|
||||
</Text>
|
||||
<Text>{user.email}</Text>
|
||||
</Box>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<Text variant="label" tone="secondary">
|
||||
Роль
|
||||
</Text>
|
||||
<Text>{user.role}</Text>
|
||||
</Box>
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={handleSubmit}
|
||||
sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}
|
||||
>
|
||||
<TextField label="Имя" value={name} onChange={(e) => setName(e.target.value)} />
|
||||
{message && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color:
|
||||
message === 'Профиль обновлён'
|
||||
? 'var(--color-positive)'
|
||||
: 'var(--color-negative)',
|
||||
}}
|
||||
>
|
||||
{message}
|
||||
</div>
|
||||
<Text tone={message === 'Профиль обновлён' ? 'positive' : 'negative'}>{message}</Text>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: 'var(--border-radius)',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
alignSelf: 'flex-start',
|
||||
}}
|
||||
>
|
||||
{saving ? 'Сохранение...' : 'Сохранить'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" loading={saving} variant="primary">
|
||||
Сохранить
|
||||
</Button>
|
||||
</Box>
|
||||
</Surface>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { useState, type FormEvent } from 'react';
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Box } from '@mui/material';
|
||||
import { Button, Heading, Text, TextField } from '@moex-vibe/design-system';
|
||||
import { useSession } from '@/entities/session';
|
||||
|
||||
export function RegisterPage() {
|
||||
@ -36,124 +38,57 @@ export function RegisterPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 400, margin: '60px auto' }}>
|
||||
<h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 700 }}>Регистрация</h1>
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
{error && <div style={{ color: 'var(--color-negative)', fontSize: 14 }}>{error}</div>}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: 4,
|
||||
fontSize: 14,
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
Имя (необязательно)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
style={inputStyle}
|
||||
placeholder="Иван Иванов"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: 4,
|
||||
fontSize: 14,
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
style={inputStyle}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: 4,
|
||||
fontSize: 14,
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
Пароль
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
style={inputStyle}
|
||||
placeholder="Минимум 6 символов"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: 4,
|
||||
fontSize: 14,
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
Подтверждение пароля
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
style={inputStyle}
|
||||
placeholder="Повторите пароль"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" disabled={loading} style={buttonStyle}>
|
||||
{loading ? 'Регистрация...' : 'Зарегистрироваться'}
|
||||
</button>
|
||||
<p style={{ textAlign: 'center', fontSize: 14, color: 'var(--color-text-secondary)' }}>
|
||||
<Box maxWidth={400} mx="auto" mt={7.5}>
|
||||
<Heading level={1} size="title">
|
||||
Регистрация
|
||||
</Heading>
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={handleSubmit}
|
||||
sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 3 }}
|
||||
>
|
||||
{error && <Text tone="negative">{error}</Text>}
|
||||
<TextField
|
||||
label="Имя (необязательно)"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Иван Иванов"
|
||||
/>
|
||||
<TextField
|
||||
label="Email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
<TextField
|
||||
label="Пароль"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
placeholder="Минимум 6 символов"
|
||||
slotProps={{ htmlInput: { minLength: 6 } }}
|
||||
/>
|
||||
<TextField
|
||||
label="Подтверждение пароля"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
placeholder="Повторите пароль"
|
||||
/>
|
||||
<Button type="submit" loading={loading}>
|
||||
Зарегистрироваться
|
||||
</Button>
|
||||
<Text tone="secondary" style={{ textAlign: 'center' }}>
|
||||
Уже есть аккаунт?{' '}
|
||||
<Link
|
||||
to={`/login${redirect !== '/' ? `?redirect=${encodeURIComponent(redirect)}` : ''}`}
|
||||
style={{ color: 'var(--color-primary)' }}
|
||||
>
|
||||
<Link to={`/login${redirect !== '/' ? `?redirect=${encodeURIComponent(redirect)}` : ''}`}>
|
||||
Войти
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: 'var(--border-radius)',
|
||||
fontSize: 16,
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
};
|
||||
|
||||
const buttonStyle: React.CSSProperties = {
|
||||
padding: '12px 24px',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: 'var(--border-radius)',
|
||||
fontSize: 16,
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
};
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
export function SkeletonBlock({
|
||||
width,
|
||||
height,
|
||||
borderRadius = 4,
|
||||
}: {
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
borderRadius?: number;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="skeleton"
|
||||
style={{
|
||||
width: width ?? '100%',
|
||||
height: height ?? 16,
|
||||
borderRadius,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { SkeletonBlock } from '@/shared/ui/SkeletonBlock';
|
||||
import { Skeleton } from '@moex-vibe/design-system';
|
||||
|
||||
const tdStyle = {
|
||||
borderBottom: '1px solid #eeeeee',
|
||||
@ -15,7 +15,7 @@ export function TableSkeleton({ rows = 5, columns }: { rows?: number; columns: C
|
||||
<tr key={i}>
|
||||
{columns.map((col, j) => (
|
||||
<td key={j} style={tdStyle}>
|
||||
<SkeletonBlock height={12} width={col.width} />
|
||||
<Skeleton height={12} width={col.width} shape="text" />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
import { Box } from '@mui/material';
|
||||
import { Text } from '@moex-vibe/design-system';
|
||||
|
||||
type AllocationBarItem = {
|
||||
key: string;
|
||||
label: string;
|
||||
@ -16,34 +19,58 @@ export function BrokerAllocationBar({
|
||||
const positiveItems = items.filter((item) => item.value > 0);
|
||||
|
||||
if (positiveItems.length === 0) {
|
||||
return <p className="broker-allocation-bar__empty">Нет данных для распределения</p>;
|
||||
return <Text tone="muted">Нет данных для распределения</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="broker-allocation-bar">
|
||||
<div className="broker-allocation-bar__track" role="img" aria-label={title}>
|
||||
<Box sx={{ display: 'grid', gap: 1.5 }}>
|
||||
<Box
|
||||
role="img"
|
||||
aria-label={title}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
minHeight: 12,
|
||||
borderRadius: 999,
|
||||
overflow: 'hidden',
|
||||
bgcolor: 'rgba(19,54,38,0.08)',
|
||||
}}
|
||||
>
|
||||
{positiveItems.map((item) => (
|
||||
<span
|
||||
<Box
|
||||
key={item.key}
|
||||
className="broker-allocation-bar__segment"
|
||||
style={{ width: `${item.percent}%`, background: item.color }}
|
||||
sx={{ minWidth: 8, width: `${item.percent}%`, background: item.color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<ul className="broker-allocation-bar__legend" aria-label={`${title}: легенда`}>
|
||||
</Box>
|
||||
<Box
|
||||
component="ul"
|
||||
aria-label={`${title}: легенда`}
|
||||
sx={{ listStyle: 'none', p: 0, m: 0, display: 'flex', flexWrap: 'wrap', gap: 1 }}
|
||||
>
|
||||
{positiveItems.map((item) => (
|
||||
<li className="broker-allocation-bar__legend-item" key={item.key}>
|
||||
<span
|
||||
className="broker-allocation-bar__swatch"
|
||||
style={{ background: item.color }}
|
||||
<Box
|
||||
component="li"
|
||||
key={item.key}
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
px: 1.25,
|
||||
py: 0.75,
|
||||
borderRadius: 999,
|
||||
bgcolor: 'rgba(19,54,38,0.05)',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{ width: 9, height: 9, borderRadius: 999, background: item.color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{item.label}</span>
|
||||
<strong>{item.percent.toFixed(0)}%</strong>
|
||||
</li>
|
||||
<Text>{item.label}</Text>
|
||||
<Text>{item.percent.toFixed(0)}%</Text>
|
||||
</Box>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,2 +1 @@
|
||||
export { SkeletonBlock } from './SkeletonBlock';
|
||||
export { TableSkeleton } from './TableSkeleton';
|
||||
|
||||
@ -16,12 +16,6 @@
|
||||
--color-negative: #c62828;
|
||||
--border-radius: 8px;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
||||
--broker-overview-bg: linear-gradient(180deg, #f1f5ef 0%, #f7f2e8 100%);
|
||||
--broker-overview-panel: rgba(15, 51, 36, 0.93);
|
||||
--broker-overview-panel-soft: rgba(255, 255, 255, 0.09);
|
||||
--broker-overview-border: rgba(21, 61, 43, 0.12);
|
||||
--broker-overview-accent: #98c484;
|
||||
--broker-overview-gold: #d7b268;
|
||||
}
|
||||
|
||||
.pnl-cell {
|
||||
@ -94,425 +88,7 @@ a {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.broker-account__workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.broker-account__navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.broker-account__link {
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.broker-account__link.is-active,
|
||||
.broker-account__link[aria-current='page'] {
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
color: var(--color-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.broker-account__link:focus-visible {
|
||||
outline: 3px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.broker-account__content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.broker-overview {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.broker-overview__summary,
|
||||
.broker-overview__assets {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.broker-overview__card,
|
||||
.broker-allocation {
|
||||
padding: 16px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.broker-overview__card {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.broker-overview__label,
|
||||
.broker-overview__card > span {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.broker-overview__total {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.broker-overview__cash,
|
||||
.broker-allocation ul {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.broker-overview__cash li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.broker-overview__asset-link {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.broker-overview__asset-title {
|
||||
color: var(--color-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.broker-overview__asset-link:focus-visible {
|
||||
outline: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.broker-allocation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.broker-allocation svg {
|
||||
width: 160px;
|
||||
max-width: 40%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.broker-allocation figcaption {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.broker-allocation li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.broker-allocation__swatch {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
|
||||
border-radius: 2px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.broker-allocation__negative {
|
||||
color: var(--color-negative);
|
||||
}
|
||||
|
||||
.broker-accounts-page {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.broker-accounts-page__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.broker-accounts-page__eyebrow,
|
||||
.broker-account-card__eyebrow,
|
||||
.broker-accounts-summary__eyebrow {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.broker-accounts-page__title,
|
||||
.broker-account-card__title,
|
||||
.broker-accounts-summary__title {
|
||||
font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.broker-accounts-page__title {
|
||||
font-size: clamp(2.2rem, 3vw, 3rem);
|
||||
}
|
||||
|
||||
.broker-accounts-page__caption {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.broker-accounts-summary {
|
||||
padding: 28px;
|
||||
border-radius: 28px;
|
||||
background: var(--broker-overview-bg);
|
||||
box-shadow:
|
||||
0 24px 60px rgba(15, 52, 35, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.55);
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.broker-accounts-summary__hero {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
border-radius: 22px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(152, 196, 132, 0.3), transparent 28%),
|
||||
linear-gradient(135deg, var(--broker-overview-panel) 0%, #173f2d 100%);
|
||||
color: #f8f5ec;
|
||||
}
|
||||
|
||||
.broker-accounts-summary__hero .broker-accounts-summary__eyebrow {
|
||||
color: rgba(248, 245, 236, 0.72);
|
||||
}
|
||||
|
||||
.broker-accounts-summary__title {
|
||||
font-size: clamp(1.9rem, 2.4vw, 2.6rem);
|
||||
}
|
||||
|
||||
.broker-accounts-summary__status {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
color: rgba(248, 245, 236, 0.78);
|
||||
}
|
||||
|
||||
.broker-accounts-summary__status span {
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--broker-overview-panel-soft);
|
||||
}
|
||||
|
||||
.broker-accounts-summary__currency-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.broker-accounts-summary__currency-card,
|
||||
.broker-account-card,
|
||||
.broker-accounts-empty {
|
||||
border-radius: 24px;
|
||||
border: 1px solid var(--broker-overview-border);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: 0 20px 45px rgba(31, 48, 39, 0.08);
|
||||
}
|
||||
|
||||
.broker-accounts-summary__currency-card {
|
||||
padding: 22px;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.broker-accounts-summary__currency-header {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.broker-accounts-summary__currency {
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.broker-accounts-summary__total {
|
||||
font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
|
||||
font-size: clamp(1.8rem, 2vw, 2.4rem);
|
||||
}
|
||||
|
||||
.broker-accounts-summary__metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.broker-accounts-summary__metric {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.broker-accounts-summary__metric dt,
|
||||
.broker-account-card__stat span {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.broker-accounts-summary__metric dd,
|
||||
.broker-account-card__stat strong {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.broker-allocation-bar {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.broker-allocation-bar__track {
|
||||
min-height: 12px;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
background: rgba(19, 54, 38, 0.08);
|
||||
}
|
||||
|
||||
.broker-allocation-bar__segment {
|
||||
min-width: 8px;
|
||||
}
|
||||
|
||||
.broker-allocation-bar__legend {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 12px;
|
||||
}
|
||||
|
||||
.broker-allocation-bar__legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(19, 54, 38, 0.05);
|
||||
}
|
||||
|
||||
.broker-allocation-bar__swatch {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.broker-allocation-bar__empty {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.broker-accounts-page__cards {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.broker-account-card {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.broker-account-card--link {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
transform 0.22s ease,
|
||||
box-shadow 0.22s ease,
|
||||
border-color 0.22s ease;
|
||||
}
|
||||
|
||||
.broker-account-card--link:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 26px 50px rgba(31, 48, 39, 0.11);
|
||||
border-color: rgba(38, 92, 55, 0.22);
|
||||
}
|
||||
|
||||
.broker-account-card--link:focus-visible {
|
||||
outline: 3px solid rgba(59, 128, 74, 0.3);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.broker-account-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.broker-account-card__title {
|
||||
font-size: clamp(1.4rem, 2vw, 1.8rem);
|
||||
}
|
||||
|
||||
.broker-account-card__opened {
|
||||
color: var(--color-text-secondary);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.broker-account-card__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.broker-account-card__stat {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 239, 0.88));
|
||||
border: 1px solid rgba(31, 48, 39, 0.08);
|
||||
}
|
||||
|
||||
.broker-account-card__stat--wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.broker-account-card__alert {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 18px;
|
||||
border-radius: 18px;
|
||||
background: rgba(198, 40, 40, 0.08);
|
||||
color: #8e2525;
|
||||
}
|
||||
|
||||
.broker-account-card__retry {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: #163f2c;
|
||||
color: #fff;
|
||||
padding: 10px 16px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.broker-account-card__retry:focus-visible {
|
||||
outline: 3px solid rgba(59, 128, 74, 0.3);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.broker-accounts-empty {
|
||||
padding: 28px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.broker-account-card--link,
|
||||
.loading-spinner,
|
||||
.skeleton {
|
||||
transition: none;
|
||||
@ -520,112 +96,4 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.broker-account__header {
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
|
||||
.broker-account__workspace {
|
||||
gap: 16px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.broker-account__navigation {
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.broker-account__link {
|
||||
flex: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.broker-overview__summary,
|
||||
.broker-overview__assets {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.broker-allocation {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.broker-allocation svg {
|
||||
max-width: 180px;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.broker-accounts-page__header,
|
||||
.broker-account-card__header {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.broker-accounts-summary,
|
||||
.broker-account-card,
|
||||
.broker-accounts-empty {
|
||||
padding: 18px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.broker-accounts-summary__hero,
|
||||
.broker-accounts-summary__metrics,
|
||||
.broker-account-card__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.broker-account-card__stat--wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.broker-account-card__opened {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.broker-account-card__alert {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.broker-operations__toolbar {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.broker-operations__toolbar label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.broker-operations__toolbar select {
|
||||
min-width: 240px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.broker-operations__toolbar select:focus-visible {
|
||||
outline: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.broker-operations__toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
.broker-operations__toolbar select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { SkeletonBlock } from '@/shared/ui/SkeletonBlock';
|
||||
import { Box } from '@mui/material';
|
||||
import { Alert, Button, Heading, Skeleton, Text } from '@moex-vibe/design-system';
|
||||
import type { BrokerAccount, BrokerPortfolio } from '@/shared/api/responses';
|
||||
import { buildBrokerAllocation } from '@/entities/broker-position';
|
||||
import { BrokerAllocationBar } from '@/shared/ui/broker-allocation-bar';
|
||||
@ -14,26 +15,49 @@ function brokerAccountTypeLabel(type: 'brokerage' | 'iis'): string {
|
||||
return type === 'iis' ? 'ИИС' : 'Брокерский счёт';
|
||||
}
|
||||
|
||||
const cardSx = {
|
||||
p: 2.75,
|
||||
borderRadius: 3,
|
||||
border: '1px solid',
|
||||
borderColor: 'rgba(21, 61, 43, 0.12)',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.92)',
|
||||
boxShadow: '0 20px 45px rgba(31, 48, 39, 0.08)',
|
||||
};
|
||||
|
||||
const statSx = {
|
||||
display: 'grid',
|
||||
gap: 1,
|
||||
p: 1.75,
|
||||
borderRadius: '18px',
|
||||
background: 'linear-gradient(135deg, rgba(255,255,255,0.92), rgba(241,245,239,0.88))',
|
||||
border: '1px solid',
|
||||
borderColor: 'rgba(31,48,39,0.08)',
|
||||
};
|
||||
|
||||
function BrokerAccountCardSkeleton({ name, typeLabel }: { name: string; typeLabel: string }) {
|
||||
return (
|
||||
<article className="broker-account-card broker-account-card--loading" aria-busy="true">
|
||||
<div className="broker-account-card__header">
|
||||
<div>
|
||||
<p className="broker-account-card__eyebrow">{typeLabel}</p>
|
||||
<h2 className="broker-account-card__title">{name}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="broker-account-card__grid">
|
||||
<Box aria-busy="true" sx={cardSx}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1.5, alignItems: 'start' }}>
|
||||
<Box>
|
||||
<Text variant="label" tone="secondary">
|
||||
{typeLabel}
|
||||
</Text>
|
||||
<Heading level={2}>{name}</Heading>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 1.5, mt: 2 }}
|
||||
>
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<div className="broker-account-card__stat" key={item}>
|
||||
<SkeletonBlock height={12} width="50%" />
|
||||
<SkeletonBlock height={24} width="75%" />
|
||||
</div>
|
||||
<Box key={item} sx={statSx}>
|
||||
<Skeleton height={12} width="50%" shape="text" />
|
||||
<Skeleton height={24} width="75%" shape="text" />
|
||||
</Box>
|
||||
))}
|
||||
</div>
|
||||
<SkeletonBlock height={16} width="100%" borderRadius={999} />
|
||||
<SkeletonBlock height={16} width="65%" />
|
||||
</article>
|
||||
</Box>
|
||||
<Skeleton height={16} width="100%" shape="rounded" />
|
||||
<Skeleton height={16} width="65%" shape="rounded" />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -45,20 +69,26 @@ function BrokerAccountCardError({
|
||||
onRetry: () => void;
|
||||
}) {
|
||||
return (
|
||||
<article className="broker-account-card broker-account-card--error">
|
||||
<div className="broker-account-card__header">
|
||||
<div>
|
||||
<p className="broker-account-card__eyebrow">{brokerAccountTypeLabel(account.type)}</p>
|
||||
<h2 className="broker-account-card__title">{account.name}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="broker-account-card__alert" role="alert">
|
||||
<p>Не удалось загрузить данные счёта</p>
|
||||
<button className="broker-account-card__retry" type="button" onClick={onRetry}>
|
||||
Повторить
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<Box sx={cardSx}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1.5, alignItems: 'start' }}>
|
||||
<Box>
|
||||
<Text variant="label" tone="secondary">
|
||||
{brokerAccountTypeLabel(account.type)}
|
||||
</Text>
|
||||
<Heading level={2}>{account.name}</Heading>
|
||||
</Box>
|
||||
</Box>
|
||||
<Alert
|
||||
severity="error"
|
||||
action={
|
||||
<Button variant="primary" onClick={onRetry}>
|
||||
Повторить
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
Не удалось загрузить данные счёта
|
||||
</Alert>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -74,44 +104,77 @@ function BrokerAccountCardSuccess({
|
||||
const allocation = buildBrokerAllocation(portfolio);
|
||||
|
||||
return (
|
||||
<Link
|
||||
className="broker-account-card broker-account-card--link"
|
||||
<Box
|
||||
component={Link}
|
||||
to={`/broker/${encodeURIComponent(account.id)}`}
|
||||
sx={{
|
||||
...cardSx,
|
||||
display: 'grid',
|
||||
gap: 2.25,
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
transition: 'transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: '0 26px 50px rgba(31,48,39,0.11)',
|
||||
borderColor: 'rgba(38,92,55,0.22)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="broker-account-card__header">
|
||||
<div>
|
||||
<p className="broker-account-card__eyebrow">{typeLabel}</p>
|
||||
<h2 className="broker-account-card__title">{account.name}</h2>
|
||||
</div>
|
||||
{openedAt ? <p className="broker-account-card__opened">Открыт {openedAt}</p> : null}
|
||||
</div>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1.5, alignItems: 'start' }}>
|
||||
<Box>
|
||||
<Text variant="label" tone="secondary">
|
||||
{typeLabel}
|
||||
</Text>
|
||||
<Heading level={2}>{account.name}</Heading>
|
||||
</Box>
|
||||
{openedAt ? (
|
||||
<Text tone="secondary" variant="caption">
|
||||
Открыт {openedAt}
|
||||
</Text>
|
||||
) : null}
|
||||
</Box>
|
||||
|
||||
<div className="broker-account-card__grid">
|
||||
<div className="broker-account-card__stat broker-account-card__stat--wide">
|
||||
<span>Стоимость</span>
|
||||
<strong>{formatBrokerMoney(portfolio.totals.portfolio)}</strong>
|
||||
</div>
|
||||
<div className="broker-account-card__stat">
|
||||
<span>За день</span>
|
||||
<strong>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
|
||||
gap: 1.5,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ ...statSx, gridColumn: 'span 2' }}>
|
||||
<Text variant="label" tone="secondary">
|
||||
Стоимость
|
||||
</Text>
|
||||
<Text>{formatBrokerMoney(portfolio.totals.portfolio)}</Text>
|
||||
</Box>
|
||||
<Box sx={statSx}>
|
||||
<Text variant="label" tone="secondary">
|
||||
За день
|
||||
</Text>
|
||||
<Text>
|
||||
{formatBrokerSignedCurrencyValue(
|
||||
portfolio.totals.portfolio?.currency ?? 'RUB',
|
||||
portfolio.yields.daily?.value ?? null,
|
||||
)}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="broker-account-card__stat">
|
||||
<span>Дневная динамика</span>
|
||||
<strong>{formatBrokerSignedPercent(portfolio.yields.dailyPercent)}</strong>
|
||||
</div>
|
||||
<div className="broker-account-card__stat">
|
||||
<span>Ожидаемая доходность</span>
|
||||
<strong>{formatBrokerSignedPercent(portfolio.yields.expectedPercent)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box sx={statSx}>
|
||||
<Text variant="label" tone="secondary">
|
||||
Дневная динамика
|
||||
</Text>
|
||||
<Text>{formatBrokerSignedPercent(portfolio.yields.dailyPercent)}</Text>
|
||||
</Box>
|
||||
<Box sx={statSx}>
|
||||
<Text variant="label" tone="secondary">
|
||||
Ожидаемая доходность
|
||||
</Text>
|
||||
<Text>{formatBrokerSignedPercent(portfolio.yields.expectedPercent)}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<BrokerAllocationBar title={`Структура счёта ${account.name}`} items={allocation.sectors} />
|
||||
</Link>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { NavLink, Outlet, useOutletContext, useParams } from 'react-router-dom';
|
||||
import { Box } from '@mui/material';
|
||||
import { Heading } from '@moex-vibe/design-system';
|
||||
import { useBrokerPortfolio } from '@/entities/broker-account';
|
||||
|
||||
export type BrokerAccountContext = {
|
||||
@ -10,40 +12,87 @@ export function useBrokerAccountContext() {
|
||||
return useOutletContext<BrokerAccountContext>();
|
||||
}
|
||||
|
||||
const links = [
|
||||
{ to: '', label: 'Обзор', end: true },
|
||||
{ to: '/shares', label: 'Акции' },
|
||||
{ to: '/bonds', label: 'Облигации' },
|
||||
{ to: '/operations', label: 'Операции' },
|
||||
];
|
||||
|
||||
export function BrokerAccountLayout() {
|
||||
const { accountId = '' } = useParams();
|
||||
const portfolio = useBrokerPortfolio(accountId);
|
||||
const basePath = `/broker/${encodeURIComponent(accountId)}`;
|
||||
const context: BrokerAccountContext = { accountId, portfolio };
|
||||
const linkClassName = ({ isActive }: { isActive: boolean }) =>
|
||||
`broker-account__link${isActive ? ' is-active' : ''}`;
|
||||
|
||||
return (
|
||||
<div className="broker-account">
|
||||
<header className="broker-account__header">
|
||||
<h1>{portfolio.data?.account.name || 'Брокерский счёт'}</h1>
|
||||
</header>
|
||||
<Box sx={{ display: 'grid', gap: 3 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
|
||||
<Heading level={1}>{portfolio.data?.account.name || 'Брокерский счёт'}</Heading>
|
||||
</Box>
|
||||
|
||||
<div className="broker-account__workspace">
|
||||
<nav className="broker-account__navigation" aria-label="Разделы брокерского счёта">
|
||||
<NavLink className={linkClassName} end to={basePath}>
|
||||
Обзор
|
||||
</NavLink>
|
||||
<NavLink className={linkClassName} to={`${basePath}/shares`}>
|
||||
Акции
|
||||
</NavLink>
|
||||
<NavLink className={linkClassName} to={`${basePath}/bonds`}>
|
||||
Облигации
|
||||
</NavLink>
|
||||
<NavLink className={linkClassName} to={`${basePath}/operations`}>
|
||||
Операции
|
||||
</NavLink>
|
||||
</nav>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr',
|
||||
gap: 2,
|
||||
'@media (min-width: 720px)': {
|
||||
gridTemplateColumns: 'minmax(150px, 190px) minmax(0, 1fr)',
|
||||
gap: 3,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="nav"
|
||||
aria-label="Разделы брокерского счёта"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 0.5,
|
||||
'@media (max-width: 719px)': {
|
||||
flexDirection: 'row',
|
||||
overflowX: 'auto',
|
||||
scrollbarWidth: 'thin',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{links.map((link) => (
|
||||
<Box
|
||||
key={link.to}
|
||||
component={NavLink}
|
||||
to={`${basePath}${link.to}`}
|
||||
end={link.end}
|
||||
sx={{
|
||||
px: 1.5,
|
||||
py: 1.25,
|
||||
borderRadius: 2,
|
||||
color: 'text.secondary',
|
||||
textDecoration: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
flexShrink: 0,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
'&[aria-current="page"]': {
|
||||
color: 'primary.main',
|
||||
bgcolor: 'primary.light',
|
||||
fontWeight: 700,
|
||||
},
|
||||
'&:focus-visible': {
|
||||
outline: '3px solid',
|
||||
outlineColor: 'primary.main',
|
||||
outlineOffset: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<div className="broker-account__content">
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Outlet context={context} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { SkeletonBlock } from '@/shared/ui/SkeletonBlock';
|
||||
import { Box } from '@mui/material';
|
||||
import { Skeleton, Text } from '@moex-vibe/design-system';
|
||||
import type { BrokerAccountsAggregate } from '@/entities/broker-account';
|
||||
import { buildBrokerAllocation } from '@/entities/broker-position';
|
||||
import { BrokerAllocationBar } from '@/shared/ui/broker-allocation-bar';
|
||||
@ -21,42 +22,80 @@ export function BrokerAccountsSummary({
|
||||
}) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="broker-accounts-summary broker-accounts-summary--loading">
|
||||
<div className="broker-accounts-summary__hero">
|
||||
<SkeletonBlock height={18} width="34%" />
|
||||
<SkeletonBlock height={52} width="48%" />
|
||||
<SkeletonBlock height={18} width="28%" />
|
||||
</div>
|
||||
<div className="broker-accounts-summary__metrics">
|
||||
<Box sx={{ display: 'grid', gap: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
px: 3.75,
|
||||
py: 3.5,
|
||||
borderRadius: 3,
|
||||
background: 'linear-gradient(135deg, rgba(19,54,38,0.97), rgba(26,71,47,0.95))',
|
||||
}}
|
||||
>
|
||||
<Skeleton height={18} width="34%" shape="text" />
|
||||
<Skeleton height={52} width="48%" shape="text" />
|
||||
<Skeleton height={18} width="28%" shape="text" />
|
||||
</Box>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 2 }}>
|
||||
{[1, 2, 3].map((item) => (
|
||||
<div className="broker-accounts-summary__metric" key={item}>
|
||||
<SkeletonBlock height={14} width="45%" />
|
||||
<SkeletonBlock height={26} width="70%" />
|
||||
</div>
|
||||
<Box
|
||||
key={item}
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gap: 1,
|
||||
p: 1.75,
|
||||
borderRadius: 2,
|
||||
border: '1px solid',
|
||||
borderColor: 'rgba(31,48,39,0.08)',
|
||||
}}
|
||||
>
|
||||
<Skeleton height={14} width="45%" shape="text" />
|
||||
<Skeleton height={26} width="70%" shape="text" />
|
||||
</Box>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="broker-accounts-summary" aria-label="Общая сводка по счетам">
|
||||
<div className="broker-accounts-summary__hero">
|
||||
<div>
|
||||
<p className="broker-accounts-summary__eyebrow">Финансовый обзор</p>
|
||||
<h2 className="broker-accounts-summary__title">Счета в одном кадре</h2>
|
||||
</div>
|
||||
<div className="broker-accounts-summary__status">
|
||||
<span>{totalCount} счетов</span>
|
||||
{availableCount !== totalCount ? (
|
||||
<span>
|
||||
Доступно по {availableCount} из {totalCount} счетов
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<Box component="section" sx={{ display: 'grid', gap: 2.5 }} aria-label="Общая сводка по счетам">
|
||||
<Box
|
||||
sx={{
|
||||
px: 3.75,
|
||||
py: 3.5,
|
||||
borderRadius: 3,
|
||||
background: 'linear-gradient(135deg, rgba(19,54,38,0.97), rgba(26,71,47,0.95))',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, alignItems: 'start' }}>
|
||||
<Box>
|
||||
<Box sx={{ fontSize: 12, lineHeight: 1.33, color: 'rgba(255,255,255,0.55)' }}>
|
||||
Финансовый обзор
|
||||
</Box>
|
||||
<Box sx={{ fontSize: 22, fontWeight: 700, lineHeight: 1.27, color: '#fff' }}>
|
||||
Счета в одном кадре
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: 'grid', gap: 0.25, textAlign: 'right' }}>
|
||||
<Box sx={{ fontSize: 13, lineHeight: 1.53, color: 'rgba(255,255,255,0.7)' }}>
|
||||
{totalCount} счетов
|
||||
</Box>
|
||||
{availableCount !== totalCount ? (
|
||||
<Box sx={{ fontSize: 12, lineHeight: 1.33, color: 'rgba(255,255,255,0.45)' }}>
|
||||
Доступно по {availableCount} из {totalCount} счетов
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<div className="broker-accounts-summary__currency-grid">
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))',
|
||||
gap: 2.5,
|
||||
}}
|
||||
>
|
||||
{aggregate.portfolios.map((portfolioSummary) => {
|
||||
const allocation = buildBrokerAllocation({
|
||||
account: {
|
||||
@ -114,51 +153,68 @@ export function BrokerAccountsSummary({
|
||||
});
|
||||
|
||||
return (
|
||||
<article
|
||||
className="broker-accounts-summary__currency-card"
|
||||
<Box
|
||||
key={portfolioSummary.currency}
|
||||
sx={{
|
||||
p: 2.75,
|
||||
borderRadius: 3,
|
||||
border: '1px solid',
|
||||
borderColor: 'rgba(21, 61, 43, 0.12)',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.92)',
|
||||
boxShadow: '0 20px 45px rgba(31, 48, 39, 0.08)',
|
||||
display: 'grid',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<div className="broker-accounts-summary__currency-header">
|
||||
<span className="broker-accounts-summary__currency">
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Box component="span" sx={{ fontSize: 16, fontWeight: 600, lineHeight: 1.25 }}>
|
||||
{portfolioSummary.currency}
|
||||
</span>
|
||||
<strong className="broker-accounts-summary__total">
|
||||
</Box>
|
||||
<Box component="span" sx={{ fontSize: 22, fontWeight: 700, lineHeight: 1.27 }}>
|
||||
{formatBrokerCurrencyValue(portfolioSummary.currency, portfolioSummary.total)}
|
||||
</strong>
|
||||
</div>
|
||||
<dl className="broker-accounts-summary__metrics">
|
||||
<div className="broker-accounts-summary__metric">
|
||||
<dt>За день</dt>
|
||||
<dd>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 1.5 }}
|
||||
>
|
||||
<Box sx={{ display: 'grid', gap: 0.25 }}>
|
||||
<Text variant="label" tone="secondary">
|
||||
За день
|
||||
</Text>
|
||||
<Text>
|
||||
{formatBrokerSignedCurrencyValue(
|
||||
portfolioSummary.currency,
|
||||
portfolioSummary.daily,
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="broker-accounts-summary__metric">
|
||||
<dt>Динамика</dt>
|
||||
<dd>{formatBrokerSignedPercent(portfolioSummary.dailyPercent)}</dd>
|
||||
</div>
|
||||
<div className="broker-accounts-summary__metric">
|
||||
<dt>Свободные деньги</dt>
|
||||
<dd>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box sx={{ display: 'grid', gap: 0.25 }}>
|
||||
<Text variant="label" tone="secondary">
|
||||
Динамика
|
||||
</Text>
|
||||
<Text>{formatBrokerSignedPercent(portfolioSummary.dailyPercent)}</Text>
|
||||
</Box>
|
||||
<Box sx={{ display: 'grid', gap: 0.25 }}>
|
||||
<Text variant="label" tone="secondary">
|
||||
Свободные деньги
|
||||
</Text>
|
||||
<Text>
|
||||
{formatBrokerCurrencyValue(
|
||||
portfolioSummary.currency,
|
||||
aggregate.cash.find((cash) => cash.currency === portfolioSummary.currency)
|
||||
?.value ?? 0,
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<BrokerAllocationBar
|
||||
title={`Распределение активов ${portfolioSummary.currency}`}
|
||||
items={allocation.sectors}
|
||||
/>
|
||||
</article>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import type { BrokerPortfolio } from '@/shared/api/responses';
|
||||
import { Box } from '@mui/material';
|
||||
import { Text } from '@moex-vibe/design-system';
|
||||
import { buildBrokerAllocation } from '@/entities/broker-position';
|
||||
import { formatBrokerCurrencyValue } from '@/shared/lib/formatters';
|
||||
|
||||
@ -26,7 +28,7 @@ export function BrokerAllocationChart({ portfolio }: { portfolio: BrokerPortfoli
|
||||
});
|
||||
|
||||
return (
|
||||
<figure className="broker-allocation">
|
||||
<Box component="figure" sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
|
||||
<svg role="img" aria-label="Структура брокерского портфеля" viewBox="0 0 120 120">
|
||||
<title>Структура брокерского портфеля</title>
|
||||
{arcs.map((sector) => (
|
||||
@ -44,40 +46,50 @@ export function BrokerAllocationChart({ portfolio }: { portfolio: BrokerPortfoli
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
<figcaption>
|
||||
<Box component="figcaption" sx={{ display: 'grid', gap: 1.5 }}>
|
||||
{sectors.length === 0 ? (
|
||||
<p>Нет данных для распределения</p>
|
||||
<Text tone="muted">Нет данных для распределения</Text>
|
||||
) : (
|
||||
<ul>
|
||||
<Box component="ul" sx={{ listStyle: 'none', display: 'grid', gap: 1 }}>
|
||||
{sectors.map((sector) => (
|
||||
<li key={sector.key}>
|
||||
<span
|
||||
className="broker-allocation__swatch"
|
||||
<Box
|
||||
component="li"
|
||||
key={sector.key}
|
||||
sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 2,
|
||||
height: 2,
|
||||
borderRadius: 0.25,
|
||||
background: sector.color,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
style={{ background: sector.color }}
|
||||
/>
|
||||
<span>
|
||||
<Box component="span">
|
||||
{sector.label}: {formatBrokerCurrencyValue(currency, sector.value)} ·{' '}
|
||||
{sector.percent.toFixed(1)}%
|
||||
</span>
|
||||
</li>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</ul>
|
||||
</Box>
|
||||
)}
|
||||
{negative.length > 0 && (
|
||||
<ul
|
||||
className="broker-allocation__negative"
|
||||
<Box
|
||||
component="ul"
|
||||
aria-label="Отрицательные значения распределения"
|
||||
sx={{ listStyle: 'none', display: 'grid', gap: 1 }}
|
||||
>
|
||||
{negative.map((item) => (
|
||||
<li key={item.key}>
|
||||
<Box component="li" key={item.key}>
|
||||
{item.label}: отрицательное значение{' '}
|
||||
{formatBrokerCurrencyValue(currency, item.value)}
|
||||
</li>
|
||||
</Box>
|
||||
))}
|
||||
</ul>
|
||||
</Box>
|
||||
)}
|
||||
</figcaption>
|
||||
</figure>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import type { ReactNode } from 'react';
|
||||
import type { BrokerOperation, BrokerOperationsPage } from '@/shared/api/responses';
|
||||
import { Box } from '@mui/material';
|
||||
import { Button, Heading, Skeleton, Text } from '@moex-vibe/design-system';
|
||||
import { TableSkeleton } from '@/shared/ui/TableSkeleton';
|
||||
import {
|
||||
getBrokerOperationImpact,
|
||||
@ -10,42 +12,33 @@ import {
|
||||
import { getBrokerInstrumentPath } from '@/entities/broker-position';
|
||||
import { formatBrokerSignedMoney } from '@/shared/lib/formatters';
|
||||
|
||||
const tableStyle = {
|
||||
const tableSx = {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
fontSize: 14,
|
||||
} satisfies React.CSSProperties;
|
||||
} as const;
|
||||
|
||||
const thStyle = {
|
||||
borderBottom: '1px solid #e0e0e0',
|
||||
color: 'var(--color-text-secondary)',
|
||||
const thSx = {
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
color: 'text.secondary',
|
||||
fontWeight: 600,
|
||||
padding: '10px 8px',
|
||||
} satisfies React.CSSProperties;
|
||||
p: 1,
|
||||
textAlign: 'left',
|
||||
} as const;
|
||||
|
||||
const tdStyle = {
|
||||
borderBottom: '1px solid #eeeeee',
|
||||
padding: '10px 8px',
|
||||
const tdSx = {
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
p: 1,
|
||||
verticalAlign: 'top',
|
||||
} satisfies React.CSSProperties;
|
||||
textAlign: 'left',
|
||||
} as const;
|
||||
|
||||
const pagButtonStyle = {
|
||||
padding: '6px 14px',
|
||||
borderRadius: 6,
|
||||
border: '1px solid #e0e0e0',
|
||||
background: 'var(--color-surface)',
|
||||
color: 'var(--color-text)',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
lineHeight: 1.4,
|
||||
} satisfies React.CSSProperties;
|
||||
|
||||
const pagButtonDisabledStyle = {
|
||||
...pagButtonStyle,
|
||||
opacity: 0.35,
|
||||
cursor: 'not-allowed',
|
||||
} satisfies React.CSSProperties;
|
||||
const tdSxRight = {
|
||||
...tdSx,
|
||||
textAlign: 'right',
|
||||
} as const;
|
||||
|
||||
function formatDate(value: string | null) {
|
||||
if (!value) return '-';
|
||||
@ -53,11 +46,10 @@ function formatDate(value: string | null) {
|
||||
return new Date(value).toLocaleString('ru-RU');
|
||||
}
|
||||
|
||||
function moneyColor(impact: BrokerOperationImpact): string {
|
||||
if (impact === 'adds') return 'var(--color-positive)';
|
||||
if (impact === 'reduces') return 'var(--color-negative)';
|
||||
|
||||
return 'var(--color-text)';
|
||||
function operationTone(impact: BrokerOperationImpact) {
|
||||
if (impact === 'adds') return 'positive' as const;
|
||||
if (impact === 'reduces') return 'negative' as const;
|
||||
return 'primary' as const;
|
||||
}
|
||||
|
||||
function OperationInstrument({ operation }: { operation: BrokerOperation }) {
|
||||
@ -69,19 +61,23 @@ function OperationInstrument({ operation }: { operation: BrokerOperation }) {
|
||||
});
|
||||
const name = operation.name || operation.description;
|
||||
|
||||
if (!path && !name) return <span>-</span>;
|
||||
if (!path) return <span>{name}</span>;
|
||||
if (!path && !name) return <Text>-</Text>;
|
||||
if (!path) return <Text>{name}</Text>;
|
||||
if (!ticker || ticker === '-') return <Link to={path}>{name}</Link>;
|
||||
|
||||
return (
|
||||
<div style={{ display: 'grid', gap: 2 }}>
|
||||
<Link to={path} style={{ fontWeight: 700 }}>
|
||||
{ticker}
|
||||
<Box sx={{ display: 'grid', gap: 0.5 }}>
|
||||
<Link to={path}>
|
||||
<Box component="span" sx={{ fontWeight: 700 }}>
|
||||
{ticker}
|
||||
</Box>
|
||||
</Link>
|
||||
{name && name !== ticker && (
|
||||
<span style={{ color: 'var(--color-text-secondary)', fontSize: 12 }}>{name}</span>
|
||||
<Text variant="caption" tone="secondary">
|
||||
{name}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -103,146 +99,156 @@ export function BrokerOperationsTable({
|
||||
|
||||
return (
|
||||
<section aria-busy={isFetching}>
|
||||
<div
|
||||
style={{
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
gap: 1.5,
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 12,
|
||||
mb: 1.5,
|
||||
}}
|
||||
>
|
||||
<h2 style={{ fontSize: 20, margin: 0 }}>{title}</h2>
|
||||
<Heading level={2}>{title}</Heading>
|
||||
{headerAction}
|
||||
{pagination && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<button
|
||||
type="button"
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="small"
|
||||
aria-label="Предыдущая страница"
|
||||
onClick={onPrevious}
|
||||
disabled={!canGoBack || isFetching}
|
||||
style={canGoBack && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
|
||||
>
|
||||
{isFetching ? (
|
||||
<span
|
||||
className="loading-spinner"
|
||||
style={{ width: 14, height: 14, display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
'←'
|
||||
)}
|
||||
</button>
|
||||
<span
|
||||
style={{
|
||||
{isFetching ? <Skeleton shape="circular" width={14} height={14} /> : '←'}
|
||||
</Button>
|
||||
<Box
|
||||
sx={{
|
||||
minWidth: 20,
|
||||
textAlign: 'center',
|
||||
color: 'var(--color-text-secondary)',
|
||||
color: 'text.secondary',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{pageNumber}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
</Box>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="small"
|
||||
aria-label="Следующая страница"
|
||||
onClick={onNext}
|
||||
disabled={!canGoForward || isFetching}
|
||||
style={canGoForward && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
|
||||
>
|
||||
{isFetching ? (
|
||||
<span
|
||||
className="loading-spinner"
|
||||
style={{ width: 14, height: 14, display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
'→'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{isFetching ? <Skeleton shape="circular" width={14} height={14} /> : '→'}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{isLoading ? (
|
||||
<div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left" style={thStyle}>
|
||||
<Box sx={{ overflowX: 'auto', bgcolor: 'surface.default' }}>
|
||||
<Box component="table" sx={tableSx}>
|
||||
<Box component="thead">
|
||||
<Box component="tr">
|
||||
<Box component="th" sx={thSx}>
|
||||
Дата
|
||||
</th>
|
||||
<th align="left" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx}>
|
||||
Тип
|
||||
</th>
|
||||
<th align="left" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx}>
|
||||
Инструмент
|
||||
</th>
|
||||
<th align="right" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={{ ...thSx, textAlign: 'right' }}>
|
||||
Сумма
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<TableSkeleton
|
||||
rows={5}
|
||||
columns={[{ width: '35%' }, { width: '30%' }, { width: '40%' }, { width: '25%' }]}
|
||||
/>
|
||||
</table>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
) : operations.length === 0 && !isFetching ? (
|
||||
<p style={{ color: 'var(--color-text-secondary)' }}>{emptyMessage}</p>
|
||||
<Text component="p" tone="muted">
|
||||
{emptyMessage}
|
||||
</Text>
|
||||
) : (
|
||||
<div className="table-container">
|
||||
<div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left" style={thStyle}>
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
<Box sx={{ overflowX: 'auto', bgcolor: 'surface.default' }}>
|
||||
<Box component="table" sx={tableSx}>
|
||||
<Box component="thead">
|
||||
<Box component="tr">
|
||||
<Box component="th" sx={thSx}>
|
||||
Дата
|
||||
</th>
|
||||
<th align="left" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx}>
|
||||
Тип
|
||||
</th>
|
||||
<th align="left" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx}>
|
||||
Инструмент
|
||||
</th>
|
||||
<th align="right" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={{ ...thSx, textAlign: 'right' }}>
|
||||
Сумма
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box component="tbody">
|
||||
{operations.map((operation) => {
|
||||
const impact = getBrokerOperationImpact(operation);
|
||||
return (
|
||||
<tr key={operation.cursor || operation.id}>
|
||||
<td style={tdStyle}>{formatDate(operation.date)}</td>
|
||||
<td style={tdStyle}>
|
||||
<span>{getBrokerOperationTypeLabel(operation)}</span>
|
||||
</td>
|
||||
<td style={tdStyle}>
|
||||
<Box component="tr" key={operation.cursor || operation.id}>
|
||||
<Box component="td" sx={tdSx}>
|
||||
{formatDate(operation.date)}
|
||||
</Box>
|
||||
<Box component="td" sx={tdSx}>
|
||||
<Text>{getBrokerOperationTypeLabel(operation)}</Text>
|
||||
</Box>
|
||||
<Box component="td" sx={tdSx}>
|
||||
<OperationInstrument operation={operation} />
|
||||
</td>
|
||||
<td
|
||||
</Box>
|
||||
<Box
|
||||
component="td"
|
||||
sx={{
|
||||
...tdSxRight,
|
||||
color:
|
||||
operationTone(impact) === 'positive'
|
||||
? 'success.main'
|
||||
: operationTone(impact) === 'negative'
|
||||
? 'error.main'
|
||||
: 'text.primary',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
align="right"
|
||||
style={{ ...tdStyle, color: moneyColor(impact), fontWeight: 700 }}
|
||||
>
|
||||
{formatBrokerSignedMoney(operation.payment)}
|
||||
</td>
|
||||
</tr>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
{isFetching && (
|
||||
<div className="table-loading-overlay" role="status">
|
||||
<div className="loading-spinner" aria-hidden="true" />
|
||||
<span style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 1,
|
||||
bgcolor: 'rgba(255,255,255,0.7)',
|
||||
}}
|
||||
>
|
||||
<Box className="loading-spinner" />
|
||||
<Text variant="caption" tone="secondary">
|
||||
{pagination ? `Загрузка страницы ${pageNumber}…` : 'Обновление операций…'}
|
||||
</span>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Box } from '@mui/material';
|
||||
import { Text } from '@moex-vibe/design-system';
|
||||
import type { BrokerMoney, BrokerPortfolio } from '@/shared/api/responses';
|
||||
import { formatBrokerMoney, pluralize } from '@/shared/lib/formatters';
|
||||
|
||||
@ -11,6 +13,16 @@ function formatAllocationPercent(value: number | null) {
|
||||
return value === null ? '\u2014' : `${value.toFixed(1)}%`;
|
||||
}
|
||||
|
||||
const cardSx = {
|
||||
p: 2,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 2,
|
||||
bgcolor: 'surface.default',
|
||||
display: 'grid',
|
||||
gap: 1,
|
||||
};
|
||||
|
||||
export function BrokerAssetCards({
|
||||
accountId,
|
||||
portfolio,
|
||||
@ -37,23 +49,23 @@ export function BrokerAssetCards({
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="broker-overview__assets" aria-label="Основные классы активов">
|
||||
<Box component="section" sx={{ display: 'grid', gap: 2 }} aria-label="Основные классы активов">
|
||||
{cards.map((card) => (
|
||||
<Link
|
||||
className="broker-overview__card broker-overview__asset-link"
|
||||
key={card.label}
|
||||
to={card.path}
|
||||
>
|
||||
<strong className="broker-overview__asset-title">{card.label}</strong>
|
||||
<span>
|
||||
{card.count} {card.countLabel}
|
||||
</span>
|
||||
<span>{formatBrokerMoney(card.value)}</span>
|
||||
<span>
|
||||
{formatAllocationPercent(allocationPercent(card.value, portfolio.totals.portfolio))}
|
||||
</span>
|
||||
<Link key={card.label} to={card.path}>
|
||||
<Box sx={{ ...cardSx, color: 'inherit', textDecoration: 'none' }}>
|
||||
<Box component="span" sx={{ color: 'primary.main', fontSize: 18, fontWeight: 700 }}>
|
||||
{card.label}
|
||||
</Box>
|
||||
<Text>
|
||||
{card.count} {card.countLabel}
|
||||
</Text>
|
||||
<Text>{formatBrokerMoney(card.value)}</Text>
|
||||
<Text>
|
||||
{formatAllocationPercent(allocationPercent(card.value, portfolio.totals.portfolio))}
|
||||
</Text>
|
||||
</Box>
|
||||
</Link>
|
||||
))}
|
||||
</section>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,30 +1,55 @@
|
||||
import { SkeletonBlock } from '@/shared/ui/SkeletonBlock';
|
||||
import { Box } from '@mui/material';
|
||||
import { Skeleton } from '@moex-vibe/design-system';
|
||||
|
||||
export function BrokerOverviewSkeleton() {
|
||||
return (
|
||||
<div className="broker-overview" aria-label="Загрузка сводки счёта">
|
||||
<div className="broker-overview__summary">
|
||||
<Box sx={{ display: 'grid', gap: 3 }} aria-label="Загрузка сводки счёта">
|
||||
<Box sx={{ display: 'grid', gap: 2 }}>
|
||||
{[1, 2].map((item) => (
|
||||
<div className="broker-overview__card" key={item}>
|
||||
<SkeletonBlock height={16} width="45%" />
|
||||
<SkeletonBlock height={28} width="70%" />
|
||||
<SkeletonBlock height={16} width="55%" />
|
||||
</div>
|
||||
<Box
|
||||
key={item}
|
||||
sx={{
|
||||
p: 2,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 2,
|
||||
bgcolor: 'surface.default',
|
||||
display: 'grid',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Skeleton height={16} width="45%" shape="text" />
|
||||
<Skeleton height={28} width="70%" shape="text" />
|
||||
<Skeleton height={16} width="55%" shape="text" />
|
||||
</Box>
|
||||
))}
|
||||
</div>
|
||||
<div className="broker-allocation">
|
||||
<SkeletonBlock height={160} width={160} borderRadius={80} />
|
||||
<SkeletonBlock height={80} width="60%" />
|
||||
</div>
|
||||
<div className="broker-overview__assets">
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
|
||||
<Skeleton height={160} width={160} shape="circular" />
|
||||
<Box sx={{ display: 'grid', gap: 1, flex: 1 }}>
|
||||
<Skeleton height={80} width="60%" shape="text" />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: 'grid', gap: 2 }}>
|
||||
{[1, 2].map((item) => (
|
||||
<div className="broker-overview__card" key={item}>
|
||||
<SkeletonBlock height={20} width="35%" />
|
||||
<SkeletonBlock height={16} width="55%" />
|
||||
<SkeletonBlock height={16} width="70%" />
|
||||
</div>
|
||||
<Box
|
||||
key={item}
|
||||
sx={{
|
||||
p: 2,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 2,
|
||||
bgcolor: 'surface.default',
|
||||
display: 'grid',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Skeleton height={20} width="35%" shape="text" />
|
||||
<Skeleton height={16} width="55%" shape="text" />
|
||||
<Skeleton height={16} width="70%" shape="text" />
|
||||
</Box>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { Box } from '@mui/material';
|
||||
import { Text } from '@moex-vibe/design-system';
|
||||
import type { BrokerPortfolio } from '@/shared/api/responses';
|
||||
import {
|
||||
formatBrokerMoney as formatMoney,
|
||||
@ -6,31 +8,61 @@ import {
|
||||
|
||||
export function BrokerSummary({ portfolio }: { portfolio: BrokerPortfolio }) {
|
||||
return (
|
||||
<section className="broker-overview__summary" aria-label="Сводка счёта">
|
||||
<div className="broker-overview__card">
|
||||
<span className="broker-overview__label">Стоимость портфеля</span>
|
||||
<strong className="broker-overview__total">
|
||||
<Box component="section" sx={{ display: 'grid', gap: 2 }} aria-label="Сводка счёта">
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 2,
|
||||
bgcolor: 'surface.default',
|
||||
display: 'grid',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Text variant="label" tone="secondary">
|
||||
Стоимость портфеля
|
||||
</Text>
|
||||
<Box component="span" sx={{ fontWeight: 700, fontSize: 24 }}>
|
||||
{formatMoney(portfolio.totals.portfolio)}
|
||||
</strong>
|
||||
<span>За день: {formatMoney(portfolio.yields.daily)}</span>
|
||||
<span>Дневная доходность: {formatPercent(portfolio.yields.dailyPercent)}</span>
|
||||
<span>Ожидаемая доходность: {formatPercent(portfolio.yields.expectedPercent)}</span>
|
||||
</div>
|
||||
<div className="broker-overview__card">
|
||||
<span className="broker-overview__label">Денежный остаток</span>
|
||||
</Box>
|
||||
<Text>За день: {formatMoney(portfolio.yields.daily)}</Text>
|
||||
<Text>Дневная доходность: {formatPercent(portfolio.yields.dailyPercent)}</Text>
|
||||
<Text>Ожидаемая доходность: {formatPercent(portfolio.yields.expectedPercent)}</Text>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 2,
|
||||
bgcolor: 'surface.default',
|
||||
display: 'grid',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Text variant="label" tone="secondary">
|
||||
Денежный остаток
|
||||
</Text>
|
||||
{portfolio.cash.length === 0 ? (
|
||||
<span>Нет денежных остатков</span>
|
||||
<Text>Нет денежных остатков</Text>
|
||||
) : (
|
||||
<ul className="broker-overview__cash">
|
||||
<Box component="ul" sx={{ listStyle: 'none', display: 'grid', gap: 1 }}>
|
||||
{portfolio.cash.map((money, index) => (
|
||||
<li key={`${money.currency}-${index}`}>
|
||||
<span>{money.currency}</span>
|
||||
<strong>{formatMoney(money)}</strong>
|
||||
</li>
|
||||
<Box
|
||||
component="li"
|
||||
key={`${money.currency}-${index}`}
|
||||
sx={{ display: 'flex', justifyContent: 'space-between', gap: 1.5 }}
|
||||
>
|
||||
<Text>{money.currency}</Text>
|
||||
<Box component="span" sx={{ fontWeight: 700 }}>
|
||||
{formatMoney(money)}
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</ul>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,44 +1,36 @@
|
||||
import type { BrokerPositionsPage as BrokerPositionsPageData } from '@/shared/api/responses';
|
||||
import { TableSkeleton } from '@/shared/ui/TableSkeleton';
|
||||
import { Box } from '@mui/material';
|
||||
import { Button, Heading, Skeleton, Text } from '@moex-vibe/design-system';
|
||||
import { formatBrokerMoney as formatMoney } from '@/shared/lib/formatters';
|
||||
import { PositionTicker } from './PositionTicker';
|
||||
|
||||
const tableStyle = {
|
||||
const tableSx = {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
fontSize: 14,
|
||||
} satisfies React.CSSProperties;
|
||||
} as const;
|
||||
|
||||
const thStyle = {
|
||||
borderBottom: '1px solid #e0e0e0',
|
||||
color: 'var(--color-text-secondary)',
|
||||
const thSx = {
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
color: 'text.secondary',
|
||||
fontWeight: 600,
|
||||
padding: '10px 8px',
|
||||
} satisfies React.CSSProperties;
|
||||
p: 1,
|
||||
textAlign: 'left',
|
||||
} as const;
|
||||
|
||||
const tdStyle = {
|
||||
borderBottom: '1px solid #eeeeee',
|
||||
padding: '10px 8px',
|
||||
const tdSx = {
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
p: 1,
|
||||
verticalAlign: 'top',
|
||||
} satisfies React.CSSProperties;
|
||||
textAlign: 'right',
|
||||
} as const;
|
||||
|
||||
const pagButtonStyle = {
|
||||
padding: '6px 14px',
|
||||
borderRadius: 6,
|
||||
border: '1px solid #e0e0e0',
|
||||
background: 'var(--color-surface)',
|
||||
color: 'var(--color-text)',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
lineHeight: 1.4,
|
||||
} satisfies React.CSSProperties;
|
||||
|
||||
const pagButtonDisabledStyle = {
|
||||
...pagButtonStyle,
|
||||
opacity: 0.35,
|
||||
cursor: 'not-allowed',
|
||||
} satisfies React.CSSProperties;
|
||||
const tdSxLeft = {
|
||||
...tdSx,
|
||||
textAlign: 'left',
|
||||
} as const;
|
||||
|
||||
function formatQuantity(value: number | null | undefined) {
|
||||
return value == null ? '-' : value.toLocaleString('ru-RU');
|
||||
@ -69,127 +61,127 @@ export function BrokerPositionTable({
|
||||
|
||||
return (
|
||||
<section aria-labelledby={`broker-${title.toLowerCase()}-heading`}>
|
||||
<div
|
||||
style={{
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
gap: 1.5,
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 10,
|
||||
mb: 1.5,
|
||||
}}
|
||||
>
|
||||
<h2 id={`broker-${title.toLowerCase()}-heading`} style={{ fontSize: 20, margin: 0 }}>
|
||||
<Heading level={2} id={`broker-${title.toLowerCase()}-heading`}>
|
||||
{title}
|
||||
</h2>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<button
|
||||
type="button"
|
||||
</Heading>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="small"
|
||||
aria-label="Предыдущая страница"
|
||||
onClick={onPrevious}
|
||||
disabled={!canGoBack || isFetching}
|
||||
style={canGoBack && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
|
||||
>
|
||||
{isFetching ? (
|
||||
<span
|
||||
className="loading-spinner"
|
||||
style={{ width: 14, height: 14, display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
'←'
|
||||
)}
|
||||
</button>
|
||||
<span
|
||||
style={{
|
||||
{isFetching ? <Skeleton shape="circular" width={14} height={14} /> : '←'}
|
||||
</Button>
|
||||
<Box
|
||||
sx={{
|
||||
minWidth: 20,
|
||||
textAlign: 'center',
|
||||
color: 'var(--color-text-secondary)',
|
||||
color: 'text.secondary',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{pageNumber}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
</Box>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="small"
|
||||
aria-label="Следующая страница"
|
||||
onClick={onNext}
|
||||
disabled={!canGoForward || isFetching}
|
||||
style={canGoForward && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
|
||||
>
|
||||
{isFetching ? (
|
||||
<span
|
||||
className="loading-spinner"
|
||||
style={{ width: 14, height: 14, display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
'→'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{isFetching ? <Skeleton shape="circular" width={14} height={14} /> : '→'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{isLoading ? (
|
||||
<div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left" style={thStyle}>
|
||||
<Box sx={{ overflowX: 'auto', bgcolor: 'surface.default' }}>
|
||||
<Box component="table" sx={tableSx}>
|
||||
<Box component="thead">
|
||||
<Box component="tr">
|
||||
<Box component="th" sx={thSx} align="left">
|
||||
Тикер
|
||||
</th>
|
||||
<th align="left" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx} align="left">
|
||||
Название
|
||||
</th>
|
||||
<th align="right" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx} align="right">
|
||||
Количество
|
||||
</th>
|
||||
<th align="right" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx} align="right">
|
||||
Цена
|
||||
</th>
|
||||
<th align="right" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx} align="right">
|
||||
Стоимость
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<TableSkeleton
|
||||
rows={4}
|
||||
columns={[
|
||||
{ width: '30%' },
|
||||
{ width: '50%' },
|
||||
{ width: '20%' },
|
||||
{ width: '25%' },
|
||||
{ width: '25%' },
|
||||
]}
|
||||
/>
|
||||
</table>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box component="tbody">
|
||||
{[1, 2, 3, 4].map((row) => (
|
||||
<Box component="tr" key={row}>
|
||||
<Box component="td" sx={tdSxLeft}>
|
||||
<Skeleton height={12} width="30%" shape="text" />
|
||||
</Box>
|
||||
<Box component="td" sx={tdSxLeft}>
|
||||
<Skeleton height={12} width="50%" shape="text" />
|
||||
</Box>
|
||||
<Box component="td" sx={tdSx}>
|
||||
<Skeleton height={12} width="20%" shape="text" />
|
||||
</Box>
|
||||
<Box component="td" sx={tdSx}>
|
||||
<Skeleton height={12} width="25%" shape="text" />
|
||||
</Box>
|
||||
<Box component="td" sx={tdSx}>
|
||||
<Skeleton height={12} width="25%" shape="text" />
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
) : positions.length === 0 && !isFetching ? (
|
||||
<p style={{ color: 'var(--color-text-secondary)' }}>{emptyMessage}</p>
|
||||
<Text component="p" tone="secondary">
|
||||
{emptyMessage}
|
||||
</Text>
|
||||
) : (
|
||||
<div className="table-container">
|
||||
<div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
|
||||
<table aria-label={`Брокерские позиции: ${title}`} style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left" style={thStyle}>
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
<Box sx={{ overflowX: 'auto', bgcolor: 'surface.default' }}>
|
||||
<Box component="table" sx={tableSx} aria-label={`Брокерские позиции: ${title}`}>
|
||||
<Box component="thead">
|
||||
<Box component="tr">
|
||||
<Box component="th" sx={thSx} align="left">
|
||||
Тикер
|
||||
</th>
|
||||
<th align="left" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx} align="left">
|
||||
Название
|
||||
</th>
|
||||
<th align="right" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx} align="right">
|
||||
Количество
|
||||
</th>
|
||||
<th align="right" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx} align="right">
|
||||
Цена
|
||||
</th>
|
||||
<th align="right" style={thStyle}>
|
||||
</Box>
|
||||
<Box component="th" sx={thSx} align="right">
|
||||
Стоимость
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box component="tbody">
|
||||
{positions.map((position) => (
|
||||
<tr
|
||||
<Box
|
||||
component="tr"
|
||||
key={
|
||||
position.positionUid ||
|
||||
position.instrumentUid ||
|
||||
@ -197,37 +189,45 @@ export function BrokerPositionTable({
|
||||
position.figi
|
||||
}
|
||||
>
|
||||
<td style={tdStyle}>
|
||||
<Box component="td" sx={tdSxLeft}>
|
||||
<PositionTicker position={position} />
|
||||
</td>
|
||||
<td style={tdStyle}>
|
||||
<span style={{ color: 'var(--color-text-secondary)' }}>
|
||||
{position.name || '-'}
|
||||
</span>
|
||||
</td>
|
||||
<td align="right" style={tdStyle}>
|
||||
</Box>
|
||||
<Box component="td" sx={tdSxLeft}>
|
||||
<Text tone="secondary">{position.name || '-'}</Text>
|
||||
</Box>
|
||||
<Box component="td" sx={tdSx}>
|
||||
{formatQuantity(position.quantity)}
|
||||
</td>
|
||||
<td align="right" style={tdStyle}>
|
||||
</Box>
|
||||
<Box component="td" sx={tdSx}>
|
||||
{formatMoney(position.currentPrice)}
|
||||
</td>
|
||||
<td align="right" style={tdStyle}>
|
||||
</Box>
|
||||
<Box component="td" sx={tdSx}>
|
||||
{formatMoney(position.currentValue)}
|
||||
</td>
|
||||
</tr>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
{isFetching && (
|
||||
<div className="table-loading-overlay">
|
||||
<div className="loading-spinner" />
|
||||
<span style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 1,
|
||||
bgcolor: 'rgba(255,255,255,0.7)',
|
||||
}}
|
||||
>
|
||||
<Box className="loading-spinner" />
|
||||
<Text variant="caption" tone="secondary">
|
||||
Загрузка страницы {pageNumber}…
|
||||
</span>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Box } from '@mui/material';
|
||||
import type { BrokerPosition } from '@/shared/api/responses';
|
||||
import { getBrokerInstrumentPath } from '@/entities/broker-position';
|
||||
|
||||
@ -11,12 +12,18 @@ export function PositionTicker({ position }: { position: BrokerPosition }) {
|
||||
});
|
||||
|
||||
if (!path || label === '-') {
|
||||
return <strong>{label}</strong>;
|
||||
return (
|
||||
<Box component="span" sx={{ fontWeight: 700 }}>
|
||||
{label}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link to={path} style={{ fontWeight: 700 }}>
|
||||
{label}
|
||||
<Link to={path}>
|
||||
<Box component="span" sx={{ fontWeight: 700 }}>
|
||||
{label}
|
||||
</Box>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Box } from '@mui/material';
|
||||
import { Chip, Surface, Text, TextField } from '@moex-vibe/design-system';
|
||||
import { useSearch } from '@/entities/search';
|
||||
|
||||
export function SearchBar() {
|
||||
@ -32,82 +34,81 @@ export function SearchBar() {
|
||||
const showResults = open && debounced.length >= 2;
|
||||
|
||||
return (
|
||||
<div ref={ref} style={{ position: 'relative', width: 400, maxWidth: '100%' }}>
|
||||
<input
|
||||
type="text"
|
||||
<Box ref={ref} sx={{ position: 'relative', width: 400, maxWidth: '100%' }}>
|
||||
<TextField
|
||||
label="Поиск"
|
||||
placeholder="Поиск акций и облигаций..."
|
||||
hiddenLabel
|
||||
value={query}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
setOpen(true);
|
||||
}}
|
||||
onFocus={() => setOpen(true)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px 12px',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
}}
|
||||
/>
|
||||
{showResults && (
|
||||
<ul
|
||||
style={{
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
left: 0,
|
||||
right: 0,
|
||||
background: '#fff',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: 6,
|
||||
marginTop: 4,
|
||||
padding: 0,
|
||||
listStyle: 'none',
|
||||
mt: 0.5,
|
||||
zIndex: 100,
|
||||
maxHeight: 360,
|
||||
overflowY: 'auto',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
>
|
||||
{isLoading && <li style={{ padding: 12, color: '#888' }}>Загрузка...</li>}
|
||||
{!isLoading && results && results.length === 0 && (
|
||||
<li style={{ padding: 12, color: '#888' }}>Ничего не найдено</li>
|
||||
)}
|
||||
{!isLoading &&
|
||||
results?.map((item) => (
|
||||
<li
|
||||
key={item.secid}
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setQuery('');
|
||||
navigate(
|
||||
item.type === 'share' ? `/stocks/${item.secid}` : `/bonds/${item.secid}`,
|
||||
);
|
||||
}}
|
||||
style={{
|
||||
padding: '10px 12px',
|
||||
cursor: 'pointer',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = '#f5f5f5')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.background = '')}
|
||||
>
|
||||
<span>
|
||||
<strong>{item.shortName}</strong>
|
||||
<span style={{ marginLeft: 8, color: '#888', fontSize: 12 }}>{item.secid}</span>
|
||||
</span>
|
||||
<span
|
||||
style={{ fontSize: 12, color: item.type === 'share' ? '#1976d2' : '#2e7d32' }}
|
||||
<Surface elevation="sm" padding="none">
|
||||
{isLoading && (
|
||||
<Box sx={{ p: 1.5 }}>
|
||||
<Text tone="muted">Загрузка...</Text>
|
||||
</Box>
|
||||
)}
|
||||
{!isLoading && results && results.length === 0 && (
|
||||
<Box sx={{ p: 1.5 }}>
|
||||
<Text tone="muted">Ничего не найдено</Text>
|
||||
</Box>
|
||||
)}
|
||||
{!isLoading &&
|
||||
results?.map((item) => (
|
||||
<Box
|
||||
key={item.secid}
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setQuery('');
|
||||
navigate(
|
||||
item.type === 'share' ? `/stocks/${item.secid}` : `/bonds/${item.secid}`,
|
||||
);
|
||||
}}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
px: 1.5,
|
||||
py: 1.25,
|
||||
cursor: 'pointer',
|
||||
borderBottom: 1,
|
||||
borderColor: 'divider',
|
||||
'&:hover': { bgcolor: 'action.hover' },
|
||||
'&:last-child': { borderBottom: 0 },
|
||||
}}
|
||||
>
|
||||
{item.type === 'share' ? 'Акция' : 'Облигация'}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Text>{item.shortName}</Text>
|
||||
<Text variant="caption" tone="muted">
|
||||
{item.secid}
|
||||
</Text>
|
||||
</Box>
|
||||
<Chip
|
||||
label={item.type === 'share' ? 'Акция' : 'Облигация'}
|
||||
tone={item.type === 'share' ? 'info' : 'success'}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</Surface>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
144
docs/features/broker-account-sections-ds-migration/plan.md
Normal file
144
docs/features/broker-account-sections-ds-migration/plan.md
Normal file
@ -0,0 +1,144 @@
|
||||
# Дизайн-системный рефакторинг брокерских страниц — Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development
|
||||
> (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use
|
||||
> checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Удалить legacy-стили из страниц и компонентов брокерского раздела: CSS-классы,
|
||||
`inline styles`, `SkeletonBlock`, `TableSkeleton` → перевести на `@moex-vibe/design-system`.
|
||||
|
||||
**Architecture:** Бизнес-логика, контракты и маршрутизация меняться не будут.
|
||||
Градиенты героических секций, которые не имеют DS-эквивалента, сохраняются как `sx`-инлайн-стили.
|
||||
SVG-диаграмма (`BrokerAllocationChart`) сохраняется как есть, меняются только обёртки.
|
||||
|
||||
**Tech Stack:** React 18, MUI 6.5, `@moex-vibe/design-system` 0.1.0, CSS custom properties.
|
||||
|
||||
**Связанные документы:**
|
||||
|
||||
- Epic: `docs/epics/BrokerPortfolio.md`
|
||||
- Функциональная базовая фича: `docs/features/broker-account-sections/spec.md`
|
||||
- Research: `docs/research/2026-06-18-broker-account-sections.md`
|
||||
|
||||
---
|
||||
|
||||
## Task 1: BrokerAccountLayout
|
||||
|
||||
Заменить layout shell на DS.
|
||||
|
||||
- `div.broker-account` → `<Box component="div">`
|
||||
- `header.broker-account__header` → `<Box>` flex
|
||||
- `h1` → `<Heading level={1}>`
|
||||
- `nav.broker-account__navigation` → `<Box component="nav">`
|
||||
- `NavLink` классы → при оставлении `className` callback (уникальный prefix для active state), но в первую очередь сменить на `Box` + `<Button>` или DS Tabs если доступен (DS Tabs/doc check)
|
||||
- `div.broker-account__workspace` → `<Box>` grid (desktop sidebar + mobile row)
|
||||
- `div.broker-account__content` → `<Box>` c overflow-auto
|
||||
- Удалить CSS для `.broker-account__header`, `.broker-account__workspace`, `.broker-account__navigation`, `.broker-account__link`, `.broker-account__content` в `styles.css`
|
||||
|
||||
## Task 2: BrokerAccountOverviewPage, BrokerSummary, BrokerAssetCards
|
||||
|
||||
Перевести три связанных компонента overview на DS.
|
||||
|
||||
- `div.broker-overview` → `<Box component="div">`
|
||||
- `section.broker-overview__summary` → `<Box>` grid
|
||||
- `div.broker-overview__card` + inline-спаны → `<Box>` (card container) + `<Text>`
|
||||
- `<span className="broker-overview__label">` → `<Text variant="label" tone="secondary">`
|
||||
- `<strong>` значения → `<Text sx={{ fontWeight: 700 }}>`
|
||||
- `ul.broker-overview__cash` → `<Box component="ul">` + `<Box component="li">`
|
||||
- `section.broker-overview__assets` → `<Box>` grid
|
||||
- `Link.broker-overview__asset-link` → `<Link>` + `<Box>` для layout карточки
|
||||
- `<strong className="broker-overview__asset-title">` → `<Text sx={{ fontWeight: 700 }}>`
|
||||
- Спаны значений/процентов → `<Box component="span">` + `<Text>`
|
||||
- Оставить hero-gradient (`broker-overview__hero`-style) на caretaker'е (см. Out of scope)
|
||||
|
||||
## Task 3: BrokerOverviewSkeleton
|
||||
|
||||
Заменить старые skeleton на DS-component.
|
||||
|
||||
- Импорт `SkeletonBlock` → DS `Skeleton`
|
||||
- `div.broker-overview__card` → `<Box>` для контейнера skeleton-элементов
|
||||
- `SkeletonBlock height={...} width={...}` → `<Skeleton height={...} width={...} shape="text">`
|
||||
- `SkeletonBlock borderRadius={80}` → `<Skeleton height={160} width={160} shape="circular">`
|
||||
|
||||
## Task 4: BrokerAllocationChart (wrap only)
|
||||
|
||||
Оставить SVG без изменений, мигрировать только обёртки.
|
||||
|
||||
- `figure.broker-allocation` → `<Box component="figure">`
|
||||
- `figcaption` → `<Box component="figcaption">`
|
||||
- `<p>` в пустом состоянии → `<Text tone="muted">`
|
||||
- `<ul>` / `<li>` легенды → `<Box component="ul">` + `<Box component="li">`
|
||||
- `span.broker-allocation__swatch` → `<Box}` с inline-цветом в `sx`
|
||||
- Спаны текста легенды → `<Text>` или `<Box component="span">` с кастомным `fontSize`
|
||||
- `ul.broker-allocation__negative` → `<Box component="ul">`
|
||||
- Удалить CSS для `.broker-allocation*` в `styles.css` (кроме SVG-правил, которые оставить нетронутыми или перенести в inline)
|
||||
|
||||
## Task 5: BrokerPositionTable, PositionTicker
|
||||
|
||||
Миграция таблицы позиций.
|
||||
|
||||
- Вспомогательные типы для `headerStyle`, `cellStyle`, `pagButtonStyle` → MUI `sx` через `<Box>`, `<Button>`
|
||||
- Импорт `SkeletonBlock` в компоненте → удалить, использовать `Skeleton` через `<TableSkeleton>` (см. Task 6)
|
||||
- `h2` inline-стили → `<Heading level={2}>` с кастомной `sx` для размера/масштаба
|
||||
- Ошибки/пустые `<p>` → `<Text>` через Box с inline-цветом
|
||||
- `PositionTicker`: `<Link style={{ fontWeight: 700 }}>` → `<Link>` с `<Text sx={{ fontWeight: 700 }}>` внутри
|
||||
- `table` → `<table component="table">` или оставить нативным table, но стилизовать через `sx`
|
||||
- Сохранить `loading-spinner` класс в `styles.css` (глобальный):
|
||||
- `TableSkeleton` → `<Skeleton>` after DS migration
|
||||
- Keep `table-container` as minimal CSS or remove; convert `loading-overlay` to Box.
|
||||
|
||||
## Task 6: TableSkeleton
|
||||
|
||||
Заменить импорт `SkeletonBlock` на DS `Skeleton`.
|
||||
|
||||
- Убрать импорт `SkeletonBlock`, заменить на `Skeleton` из `@moex-vibe/design-system`.
|
||||
- `SkeletonBlock height={12} width={col.width}` → `<Skeleton height={12} width={col.width} shape="text"/>`.
|
||||
|
||||
## Task 7: BrokerOperationsTable
|
||||
|
||||
Миграция таблицы операций.
|
||||
|
||||
- Вспомогательные стили (`tableStyle`, `thStyle`, `tdStyle`, `pagButtonStyle`) → inline-`sx` или `<Box>`
|
||||
- Оставить `<select>` нативный, но обёрнуть в `<Box component="label">`
|
||||
- `h2 inline` → `<Heading level={2}>` с `sx={{ fontSize: 20 }}`
|
||||
- `<span role="status">` с `loading-spinner` → `<Skeleton shape="circular" width={14} height={14} />` (если DS поддерживает) или оставить `<span className="loading-spinner">` временно; DS `Skeleton` не имеет circular-only без width/height — оставить на этой итерации, можно оставить loading-spinner, так как это глобальный анимационный класс, а не DS.
|
||||
- Пустые состояния / alert-тексты → `<Text tone="muted">` / `<Text tone="negative">`
|
||||
- Пагинация `<button>` → `<Button variant="secondary">`
|
||||
- `aria-label` — сохранить.
|
||||
|
||||
## Task 8: BrokerPositionsPage, BrokerOperationsPage
|
||||
|
||||
Миграция "обёрточных" страниц-секций.
|
||||
|
||||
- `section` → `<Box component="section">`
|
||||
- `h2 inline` → `<Heading level={2}>` с `sx={{ fontSize: 20 }}`
|
||||
- `p role="alert"` → `<Text tone="negative" component="p">` (или `<Box component="p">`)
|
||||
- `p.empty` → `<Text tone="muted">`
|
||||
- `div.broker-operations__toolbar` → `<Box>` с flex
|
||||
- `label > span + select` → `<Box component="label">` + `<Text>` + `<select>`
|
||||
|
||||
## Task 9: SkeletonBlock удаление
|
||||
|
||||
После замены всех потребителей:
|
||||
|
||||
1. Удалить `apps/frontend/src/shared/ui/SkeletonBlock.tsx`.
|
||||
2. Удалить экспорт из `apps/frontend/src/shared/ui/index.ts`.
|
||||
3. Убедиться, что `import { SkeletonBlock }` не осталось нигде.
|
||||
|
||||
## Task 10: Очистка `styles.css`
|
||||
|
||||
- Удалить все selector'ы из блока `broker-account__*`, `broker-overview__*`, `broker-allocation__*` (SVG стили оставить), `broker-operations__toolbar*`.
|
||||
- Оставить косметические классы, которые ещё не мигрированы (если таковые возникнут).
|
||||
- Оставить `.loading-spinner` (глобальный анимационный класс, применяется через `className` где-то еще).
|
||||
- Оставить `:root` CSS variables — они DS взаиморасчётные токены.
|
||||
|
||||
## Task 11: Тестирование и сборка
|
||||
|
||||
- [ ] `npm run test:frontend` — все тесты PASS.
|
||||
- [ ] `npm run lint -w apps/frontend` — без ошибок.
|
||||
- [ ] `npm run build:frontend` — без TypeScript/Vite ошибок.
|
||||
- [ ] Проверить, что нет остатков `SkeletonBlock` импортов в кодовой базе: `grep -r "SkeletonBlock" apps/frontend/src`.
|
||||
- [ ] Проверить, что нет остатков `broker-account__*`, `broker-overview__*`, `broker-allocation__*`, `broker-operations__toolbar` в TSX: `grep -rE "broker-(account|overview|allocation|operations)" apps/frontend/src --include='*.{ts,tsx}'`.
|
||||
|
||||
## Task 12: Вердикт и записка
|
||||
|
||||
- [ ] Обновить `docs/features/broker-account-sections-ds-migration/tasks.md` — отметить все выполненные пункты.
|
||||
85
docs/features/broker-account-sections-ds-migration/spec.md
Normal file
85
docs/features/broker-account-sections-ds-migration/spec.md
Normal file
@ -0,0 +1,85 @@
|
||||
# Дизайн-системный рефакторинг страниц брокерского счёта
|
||||
|
||||
Дата: 2026-06-21
|
||||
Статус: реализовано
|
||||
|
||||
## Контекст
|
||||
|
||||
Epic `Брокерский портфель` уже покрыт функциональной фичей `broker-account-sections` (реализовано 2026-06-18). Текущая цель — убрать legacy-стили (CSS-классы, inline-стили, `SkeletonBlock`, `loading-spinner`) из страниц и компонентов, относящихся к одному выбранному брокерскому счёту, и перевести их на `@moex-vibe/design-system`.
|
||||
|
||||
Страницы в области изменения:
|
||||
|
||||
- `BrokerAccountLayout` — навигация и заголовок счёта;
|
||||
- `BrokerAccountOverviewPage` — карточки сводки, диаграмма, последние операции;
|
||||
- `BrokerSummary` — текстовые показатели портфеля и денежных остатков;
|
||||
- `BrokerAssetCards` — карточки акций и облигаций;
|
||||
- `BrokerOverviewSkeleton` — loading-состояние overview;
|
||||
- `BrokerAllocationChart` — SVG-диаграмма (диаграмма остаётся SVG, меняются обёртки);
|
||||
- `BrokerPositionTable` — таблица позиций с пагинацией;
|
||||
- `BrokerOperationsTable` — таблица операций с пагинацией;
|
||||
- `PositionTicker` — кликабельный тикер в таблице позиций;
|
||||
- `BrokerPositionsPage` — страница акций / облигаций;
|
||||
- `BrokerOperationsPage` — страница истории операций с фильтром.
|
||||
|
||||
## Связанные фичи
|
||||
|
||||
- Epic: `docs/epics/BrokerPortfolio.md`
|
||||
- Функциональная базовая фича: `docs/features/broker-account-sections/spec.md`
|
||||
- DS-пакет: `packages/design-system/`
|
||||
|
||||
## Цель
|
||||
|
||||
Удалить все CSS-классы (кроме героических градиентов, где нет DS-эквивалента) и `SkeletonBlock` из страниц и компонентов, относящихся к одному брокерскому счёту. Перевести layout, typography, skeleton, метрики, алерты, кнопки, пустые состояния на `@moex-vibe/design-system`. Оставить нетронутыми бизнес-логику, контракты и схему маршрутизации.
|
||||
|
||||
## Out of scope
|
||||
|
||||
- Изменение бизнес-логики, контрактов API, entity-слоя;
|
||||
- Изменение маршрутизации;
|
||||
- Изменение SVG-диаграммы;
|
||||
- Рефакторинг broker-accounts-page (список счетов) — отдельная фича;
|
||||
- Изменение CSS-переменных `:root` и их использования за пределами страниц брокера;
|
||||
- Добавление новых тестов (существующие тесты сохраняются, если их контракт не меняется).
|
||||
|
||||
## Принципы миграции
|
||||
|
||||
- `SkeletonBlock` → DS `Skeleton` (все потребители → удаление `SkeletonBlock` из `shared/ui`);
|
||||
- `<h1>`/`<h2>` → `<Heading level={1|2}>`;
|
||||
- `<p label>`, `<span>` → `<Text variant="label" tone="secondary">`;
|
||||
- `<p>` статические тексты → `<Text variant="body">` или `<Box component="span">` с `sx` (если нужен кастомный размер/цвет);
|
||||
- `<strong>` значения → `<Text variant="body" sx={{ fontWeight: 700 }}>`;
|
||||
- Inline `<p role="alert">` → `<Text tone="negative">`;
|
||||
- Стандартный `<section>` → `<Box component="section">`;
|
||||
- Hero-gradient `broker-overview` → `<Box>` с кастомным `sx` (градиент остаётся как inline-стиль);
|
||||
- `div.broker-operations__toolbar` → `<Box>` с flex-сеткой;
|
||||
- `<select>` элемент — оставить как нативный `<select>`, обёрнуть в `<Box>`.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [x] `BrokerAccountLayout` не содержит CSS-классов из `styles.css`; используется `<Heading>`, `<Text>`, `<Box>`.
|
||||
- [x] `BrokerAccountOverviewPage` и содержащиеся в нём `BrokerSummary`, `BrokerAssetCards` переведены на DS-компоненты.
|
||||
- [x] `BrokerOverviewSkeleton` использует DS `<Skeleton>`.
|
||||
- [x] `BrokerAllocationChart` обёртки (`<figure>`, `<figcaption>`) переведены на `<Box>`; текст легенды — на `<Text>`.
|
||||
- [x] `BrokerPositionTable` и `BrokerOperationsTable` используют `<Box>` для layout, `<Heading>` для заголовков, `<Button>` или `<Box>` для пагинации, пустые и loading-состояния — через DS.
|
||||
- [x] `TableSkeleton` переведён на DS `<Skeleton>`.
|
||||
- [x] `SkeletonBlock` удалён после замены всех потребителей.
|
||||
- [x] `BrokerPositionsPage` и `BrokerOperationsPage` переведены на `<Box>`, `<Heading>`, `<Text>`.
|
||||
- [x] `PositionTicker` — `<Link>` с `<Box component="span" sx={{ fontWeight: 700 }}>`.
|
||||
- [x] ESLint allowlist не нарушен (`no-restricted-imports` разрешает `Box`, `Stack`, `Grid` из `@mui/material` barrel).
|
||||
- [x] `npm run test:frontend && npm run lint -w apps/frontend && npm run build:frontend` проходят.
|
||||
- [x] CSS-классы, оставшиеся без потребителей, удалены из `styles.css` (но сохраняются градиенты hero-секций).
|
||||
|
||||
## Результаты реализации
|
||||
|
||||
Все 12 задач плана выполнены и закоммичены в ветку `codex/broker-accounts-page` (13 коммитов). Ключевые изменения:
|
||||
|
||||
- **Полностью мигрированы на DS:** `BrokerAccountLayout`, `BrokerAccountOverviewPage`, `BrokerSummary`, `BrokerAssetCards`, `BrokerOverviewSkeleton`, `BrokerAllocationChart`, `BrokerPositionTable`, `BrokerOperationsTable`, `BrokerPositionsPage`, `BrokerOperationsPage`, `PositionTicker`.
|
||||
- **Удалён legacy:** `SkeletonBlock` удалён из `shared/ui/SkeletonBlock.tsx` и `shared/ui/index.ts`.
|
||||
- **Очистка CSS:** все `broker-account__*`, `broker-overview__*`, `broker-allocation__*`, `broker-operations__toolbar*` классы и переменные удалены из `styles.css`. CSS уменьшился с 274 до 99 строк.
|
||||
- Верификация: 111 тестов PASS, lint чистый, build проходит без ошибок.
|
||||
|
||||
### Отклонения от плана
|
||||
|
||||
- `PositionTicker`: использован `<Box component="span">` вместо DS `<Text>` с `sx`, так как DS `Text` не поддерживает кастомный `sx`.
|
||||
- `TableSkeleton`: сохранён как shared компонент (вместо удаления), так как используется `BrokerOperationsTable`.
|
||||
- `loading-spinner`: оставлен как глобальный CSS-класс (генерируется через `<Box className="loading-spinner">`). DS `Skeleton shape="circular"` использован для inline-спиннеров в пагинации.
|
||||
- `TableSkeleton` type signature остался без изменений (все уже импортируют `Skeleton` из DS, не `SkeletonBlock`).
|
||||
101
docs/features/broker-account-sections-ds-migration/tasks.md
Normal file
101
docs/features/broker-account-sections-ds-migration/tasks.md
Normal file
@ -0,0 +1,101 @@
|
||||
# Дизайн-системный рефакторинг брокерских страниц — Tasks
|
||||
|
||||
Дата: 2026-06-21
|
||||
Связанные документы:
|
||||
|
||||
- [Spec](spec.md)
|
||||
- [Plan](plan.md)
|
||||
|
||||
## Task 1: BrokerAccountLayout
|
||||
|
||||
- [x] Заменить `div.broker-account` на `<Box component="div">`
|
||||
- [x] Перевести `header` + `h1` на `<Box>` + `<Heading level={1}>`
|
||||
- [x] Перевести `nav` на `<Box component="nav">` + `<NavLink>` (Box component={NavLink} с `aria-current="page"`)
|
||||
- [x] Перевести `div.broker-account__workspace` на grid `<Box>`
|
||||
- [x] Перевести `div.broker-account__content` на `<Box>`
|
||||
- [x] Удалить соответствующие CSS-selectors из `styles.css`
|
||||
|
||||
## Task 2: BrokerAccountOverviewPage + BrokerSummary + BrokerAssetCards
|
||||
|
||||
- [x] Перевести `BrokerSummary` на `<Box>` + `<Text>`
|
||||
- [x] Перевести eyebrow/label на `<Text variant="label" tone="secondary">`
|
||||
- [x] Перевести `<strong>` значений на `<Box component="span" sx={{ fontWeight: 700 }}>`
|
||||
- [x] Перевести `<ul>` cash на `<Box component="ul">`
|
||||
- [x] Перевести `BrokerAssetCards` на `<Box>` + `<Link>` + `<Text>`
|
||||
- [x] Перевести `BrokerAccountOverviewPage` container на `<Box component="div">`
|
||||
- [x] Перевести `<p role="alert">` на `<Text component="p" tone="negative">`
|
||||
- [x] Оставить hero-gradient без изменений (Out of scope)
|
||||
|
||||
## Task 3: BrokerOverviewSkeleton
|
||||
|
||||
- [x] Заменить импорт `SkeletonBlock` на DS `<Skeleton>`
|
||||
- [x] Перевести контейнеры на `<Box>`
|
||||
- [x] Сделать circular skeleton для портфельной карточки
|
||||
- [x] Сделать text skeleton для текстовых placeholder'ей
|
||||
|
||||
## Task 4: BrokerAllocationChart (wrap only)
|
||||
|
||||
- [x] Перевести `<figure>` на `<Box component="figure">`
|
||||
- [x] Перевести `<figcaption>` на `<Box component="figcaption">`
|
||||
- [x] Перевести `<p>` пустого состояния на `<Text tone="muted">`
|
||||
- [x] Перевести `<ul>` / `<li>` легенды на `<Box component="ul">` + `<Box component="li">`
|
||||
- [x] Перевести swatch на `<Box>` с inline-цветом в `sx`
|
||||
- [x] Перевести тексты легенды на `<Box component="span">`
|
||||
- [x] Перевести negative-список на `<Box component="ul">`
|
||||
- [x] Удалить CSS для `.broker-allocation*` в `styles.css`
|
||||
|
||||
## Task 5: BrokerPositionTable + PositionTicker
|
||||
|
||||
- [x] Перевести вспомогательные стили на `<Box sx={{...}}>`
|
||||
- [x] Перевести `<h2>` на `<Heading level={2}>`
|
||||
- [x] Перевести alert-тексты на `<Text tone="negative">`
|
||||
- [x] Перевести пагинационные `<button>` на `<Button variant="secondary">`
|
||||
- [x] Перевести `loading-overlay` на `<Box>`
|
||||
- [x] Перевести `PositionTicker` ссылки на `<Box component="span" sx={{ fontWeight: 700 }}>`
|
||||
- [x] Сохранить `loading-spinner` (глобальный класс, пока без замены)
|
||||
|
||||
## Task 6: TableSkeleton (DS Skeleton)
|
||||
|
||||
- [x] Убрать импорт `SkeletonBlock`
|
||||
- [x] Заменить на `<Skeleton height={12} width={col.width} shape="text" />`
|
||||
|
||||
## Task 7: BrokerOperationsTable
|
||||
|
||||
- [x] Перевести вспомогательные стили на `<Box sx={{...}}>`
|
||||
- [x] Перевести `<h2>` на `<Heading level={2}>`
|
||||
- [x] Перевести `headerAction` container на `<Box>`
|
||||
- [x] Перевести пагинационные `<button>` на `<Button variant="secondary">`
|
||||
- [x] Перевести alert-тексты на `<Text tone="negative">`
|
||||
- [x] Перевести empty-тексты на `<Text tone="muted">`
|
||||
- [x] Перевести `<label>` + `<select>` на `<Box component="label">` + `<select>`
|
||||
- [x] Оставить `loading-spinner` для overlay (глобальный класс)
|
||||
|
||||
## Task 8: BrokerPositionsPage + BrokerOperationsPage
|
||||
|
||||
- [x] Перевести `BrokerPositionsPage` на `<Box component="section">` + `<Heading>` + `<Text>`
|
||||
- [x] Перевести `BrokerOperationsPage` на `<Box>` + `<Heading>` + `<Box component="label">` + `<select>`
|
||||
- [x] Убедиться, что `role="alert"` сохраняется через `<Text tone="negative">`
|
||||
|
||||
## Task 9: SkeletonBlock удаление
|
||||
|
||||
- [x] Удалить `apps/frontend/src/shared/ui/SkeletonBlock.tsx`
|
||||
- [x] Удалить экспорт из `apps/frontend/src/shared/ui/index.ts`
|
||||
- [x] Проверить grep по `SkeletonBlock` — 0 совпадений
|
||||
|
||||
## Task 10: Очистка `styles.css`
|
||||
|
||||
- [x] Удалить блоки `.broker-account__*`
|
||||
- [x] Удалить блоки `.broker-overview__*`
|
||||
- [x] Удалить блоки `.broker-allocation__*`
|
||||
- [x] Удалить блоки `.broker-operations__toolbar*`
|
||||
- [x] Удалить CSS-переменные `--broker-overview-*`
|
||||
- [x] Оставить `.loading-spinner`, `.skeleton`, `:root` общие переменные
|
||||
|
||||
## Task 11: Финальная проверка
|
||||
|
||||
- [x] `npm run test:frontend` — 111 tests PASS
|
||||
- [x] `npm run lint -w apps/frontend` — без ошибок
|
||||
- [x] `npm run build:frontend` — без TypeScript/Vite ошибок
|
||||
- [x] grep по `broker-(account|overview|allocation)` в TSX — 0 совпадений
|
||||
- [x] grep по `SkeletonBlock` в TSX — 0 совпадений
|
||||
- [x] CSS: 274 → 99 строк
|
||||
94
docs/features/broker-accounts-page-migration/plan.md
Normal file
94
docs/features/broker-accounts-page-migration/plan.md
Normal file
@ -0,0 +1,94 @@
|
||||
# Broker Accounts Page — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Migrate broker-accounts page area to use `@moex-vibe/design-system` components.
|
||||
|
||||
**Architecture:** Replace legacy CSS classes, inline styles, and shared/components with DS equivalents. Keep business logic and data layer unchanged. The hero gradient section is intentionally left as custom CSS.
|
||||
|
||||
**Tech Stack:** React 18, MUI 6.5, `@moex-vibe/design-system` 0.1.0
|
||||
|
||||
---
|
||||
|
||||
## Files
|
||||
|
||||
### Modify
|
||||
- `apps/frontend/src/pages/broker-accounts/ui/BrokerAccountsPage.tsx`
|
||||
- `apps/frontend/src/widgets/broker-accounts-summary/ui/BrokerAccountsSummary.tsx`
|
||||
- `apps/frontend/src/widgets/broker-account-card/ui/BrokerAccountCard.tsx`
|
||||
- `apps/frontend/src/shared/ui/broker-allocation-bar/BrokerAllocationBar.tsx`
|
||||
- `apps/frontend/src/styles.css` — удалить осиротевшие классы
|
||||
|
||||
### No changes
|
||||
- Entity layer (`entities/broker-account/`, `entities/broker-position/`) — бизнес-логика не меняется
|
||||
- Shared formatters (`shared/lib/formatters.ts`) — используются для форматирования значений
|
||||
- Shared API layer (`shared/api/`) — не меняется
|
||||
|
||||
---
|
||||
|
||||
## Task 1: BrokerAllocationBar
|
||||
|
||||
Replace inline HTML + CSS classes with `<Box>` + `<Text>`.
|
||||
|
||||
- Empty: `<p className="broker-allocation-bar__empty">` → `<Text tone="muted">`
|
||||
- Track: `<div className="broker-allocation-bar__track">` → `<Box>` with `sx`
|
||||
- Segment: `<span style={{ width, background }}>` → `<Box>` with `sx`
|
||||
- Legend: `<ul>` / `<li>` → `<Box>` with `sx` flex layout
|
||||
- Swatch: `<span>` with inline style → `<Box>` with `sx`
|
||||
|
||||
Segment width/background и swatch colors остаются как inline styles (dynamic per item, from ALLOCATION_CONFIG).
|
||||
|
||||
## Task 2: BrokerAccountCard
|
||||
|
||||
Replace legacy shared components and CSS with DS equivalents.
|
||||
|
||||
- Skeleton block: `<SkeletonBlock>` → `<Skeleton>` from DS
|
||||
- Eyebrow: `<p className="broker-account-card__eyebrow">` → `<Text variant="label" tone="secondary">`
|
||||
- Title: `<h2 className="broker-account-card__title">` → `<Heading level={2}>`
|
||||
- Stat labels/values: `<span>` + `<strong>` → `<Text variant="label" tone="secondary">` + `<Text>`
|
||||
- Card wrapper: `<article className="broker-account-card broker-account-card--link">` → `<Surface>` with `component={Link}` or `<Box>` with `sx`
|
||||
- Error: `<article className="broker-account-card broker-account-card--error">` → `<Surface>` + `<Alert>` + `<Button>`
|
||||
- Card header layout: `<div className="broker-account-card__header">` → `<Box>` with flex `sx`
|
||||
- Card grid: `<div className="broker-account-card__grid">` → `<Box>` with grid `sx`
|
||||
- Card stat: `<div className="broker-account-card__stat">` → `<Box>` with grid `sx`
|
||||
|
||||
## Task 3: BrokerAccountsSummary
|
||||
|
||||
Replace skeleton, stats, typography with DS equivalents.
|
||||
|
||||
- Skeleton: `<SkeletonBlock>` → `<Skeleton>`
|
||||
- Eyebrow: `<p className="broker-accounts-summary__eyebrow">` → `<Text variant="label" tone="secondary">`
|
||||
- Title (serif): keep as `<h2>` with CSS class (DS Heading не использует serif, теряется brand-стиль)
|
||||
- Status counts: `<span>` → `<Text>`
|
||||
- Currency label: `<p className="broker-accounts-summary__currency">` → `<Text variant="label" tone="secondary">`
|
||||
- Currency totals: `<strong className="broker-accounts-summary__total">` — keep as `<strong>` with CSS (serif)
|
||||
- Metrics: `<dl>`/`<dt>`/`<dd>` → `<Metric>` for each stat
|
||||
- Metric layout grid: `<div className="broker-accounts-summary__metrics">` → `<Box>` with grid `sx`
|
||||
|
||||
The hero section (`broker-accounts-summary__hero`) keeps its CSS classes — custom gradient, not replaceable.
|
||||
|
||||
## Task 4: BrokerAccountsPage
|
||||
|
||||
Replace page-level layout, typography, empty/error states.
|
||||
|
||||
- Page grid: `<div className="broker-accounts-page">` → `<Box>` with grid `sx`
|
||||
- Header: `<header className="broker-accounts-page__header">` → `<Box>` with flex `sx`
|
||||
- Eyebrow: `<p className="broker-accounts-page__eyebrow">` → `<Text variant="label" tone="secondary">`
|
||||
- Title: `<h1 className="broker-accounts-page__title">` → `<Heading level={1}>` (note: serif lost)
|
||||
- Caption: `<p className="broker-accounts-page__caption">` → `<Text tone="secondary">`
|
||||
- Cards grid: `<div className="broker-accounts-page__cards">` → `<Box>` with grid `sx`
|
||||
- Empty: `<section className="broker-accounts-empty">` → `<EmptyState>`
|
||||
- Error: `<p style={{ color: ... }}>` → `<Text tone="negative">`
|
||||
|
||||
## Task 5: Clean up orphaned CSS
|
||||
|
||||
After all migrations, remove from `styles.css`:
|
||||
- `.broker-accounts-page`, `.broker-accounts-page__header`, `.broker-accounts-page__eyebrow`, `.broker-accounts-page__title`, `.broker-accounts-page__caption`, `.broker-accounts-page__cards`
|
||||
- `.broker-accounts-empty`
|
||||
- `.broker-account-card`, `.broker-account-card--link`, `.broker-account-card--loading`, `.broker-account-card--error`, `.broker-account-card__header`, `.broker-account-card__eyebrow`, `.broker-account-card__title`, `.broker-account-card__opened`, `.broker-account-card__grid`, `.broker-account-card__stat`, `.broker-account-card__stat--wide`, `.broker-account-card__alert`, `.broker-account-card__retry`
|
||||
- `.broker-allocation-bar`, `.broker-allocation-bar__track`, `.broker-allocation-bar__segment`, `.broker-allocation-bar__legend`, `.broker-allocation-bar__legend-item`, `.broker-allocation-bar__swatch`, `.broker-allocation-bar__empty`
|
||||
- `.broker-accounts-summary__eyebrow`, `.broker-accounts-summary__currency`, `.broker-accounts-summary__total`, `.broker-accounts-summary__metrics`, `.broker-accounts-summary__metric`
|
||||
- `.broker-accounts-summary__currency-card` and its children (header, currency, total, metrics, metric)
|
||||
- `.broker-accounts-summary__status` and children
|
||||
|
||||
Keep: `.broker-accounts-summary`, `.broker-accounts-summary--loading`, `.broker-accounts-summary__hero`, `.broker-accounts-summary__title` (serif), shared `.broker-accounts-summary__eyebrow` shared rule (hero-specific), `.broker-accounts-summary__currency-grid`
|
||||
54
docs/features/broker-accounts-page-migration/spec.md
Normal file
54
docs/features/broker-accounts-page-migration/spec.md
Normal file
@ -0,0 +1,54 @@
|
||||
# Broker Accounts Page — Design System Migration
|
||||
|
||||
## Status
|
||||
|
||||
Implemented — 2026-06-21.
|
||||
|
||||
## Goal
|
||||
|
||||
Мигрировать BrokerAccountsPage, BrokerAccountsSummary, BrokerAccountCard и BrokerAllocationBar на компоненты `@moex-vibe/design-system`, заменив legacy CSS и inline-стили на DS-компоненты и MUI layout utilities.
|
||||
|
||||
## Scope
|
||||
|
||||
- `apps/frontend/src/pages/broker-accounts/ui/BrokerAccountsPage.tsx`
|
||||
- `apps/frontend/src/widgets/broker-accounts-summary/ui/BrokerAccountsSummary.tsx`
|
||||
- `apps/frontend/src/widgets/broker-account-card/ui/BrokerAccountCard.tsx`
|
||||
- `apps/frontend/src/shared/ui/broker-allocation-bar/BrokerAllocationBar.tsx`
|
||||
- `apps/frontend/src/styles.css` — удалить CSS-классы и переменные, оставшиеся без потребителей
|
||||
|
||||
### DS-компоненты для внедрения
|
||||
|
||||
| HTML / legacy | DS-компонент |
|
||||
|-------------|-------------|
|
||||
| `<h1>`, `<h2>` | `<Heading>` |
|
||||
| `<p>`, `<span>` label | `<Text>` |
|
||||
| `<span>` eyebrow | `<Text variant="label" tone="secondary">` |
|
||||
| `<dl>`/`<dt>`/`<dd>` stat | `<Metric>` |
|
||||
| `div.broker-accounts-empty` | `<EmptyState>` |
|
||||
| `div.broker-account-card__alert` + button | `<Alert severity="error">` + `<Button variant="primary">` |
|
||||
| `div.broker-accounts-summary__hero` title/text | `<Heading>` + `<Text>` |
|
||||
| `.broker-account-card` card | `<Surface>` or `<Card>` |
|
||||
| `<SkeletonBlock>` | `<Skeleton>` from DS |
|
||||
| `div.broker-accounts-page` layout | `<Box>` with `sx` |
|
||||
| `div.broker-accounts-page__header` | `<Box>` with flex |
|
||||
| `div.broker-accounts-page__cards` | `<Box>` with grid |
|
||||
| `p.broker-allocation-bar__empty` | `<Text tone="muted">` |
|
||||
|
||||
## Out of scope
|
||||
|
||||
- Hero gradient section visual identity (too custom, no DS equivalent)
|
||||
- Serif font family on titles (DS uses Inter)
|
||||
- Allocation bar colors from ALLOCATION_CONFIG (business config, not tokens)
|
||||
- Добавление новых тестов (entity-тесты существуют, page-тесты — новая фича)
|
||||
- Рекламные/декоративные элементы (градиенты, кастомные скругления)
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] BrokerAccountsPage не содержит CSS-классов из styles.css; `<h1>` / `<p>` заменены на `<Heading>` / `<Text>`
|
||||
- [ ] BrokerAccountsPage empty state использует `<EmptyState>`, error — `<Text tone="negative">`
|
||||
- [ ] BrokerAccountsSummary skeleton использует DS `<Skeleton>`, stats используют `<Metric>`, eyebrow/title используют `<Text>`/`<Heading>`
|
||||
- [ ] BrokerAccountCard skeleton/error/success используют DS `<Skeleton>`, `<Alert>`, `<Button>`, `<Heading>`, `<Text>`, `<Metric>`, `<Surface>`
|
||||
- [ ] BrokerAllocationBar использует `<Box>` + `<Text>` вместо div/p с CSS-классами
|
||||
- [ ] ESLint allowlist не нарушен
|
||||
- [ ] `npm run test:frontend && npm run lint -w apps/frontend && npm run build:frontend` проходят
|
||||
- [ ] CSS-классы, оставшиеся без потребителей, удалены из styles.css
|
||||
42
docs/features/broker-accounts-page-migration/tasks.md
Normal file
42
docs/features/broker-accounts-page-migration/tasks.md
Normal file
@ -0,0 +1,42 @@
|
||||
# Broker Accounts Page — Tasks
|
||||
|
||||
## Tasks Checklist
|
||||
|
||||
- [x] **Task 1: BrokerAllocationBar**
|
||||
- [x] Replace `p.broker-allocation-bar__empty` with `<Text tone="muted">`
|
||||
- [x] Replace `div.broker-allocation-bar` with `<Box>` container
|
||||
- [x] Replace track and segment divs/spans with `<Box>` components with MUI `sx` styling
|
||||
- [x] Replace legend and swatch elements with `<Box>` and `<Text>` components
|
||||
- [x] Verify BrokerAllocationBar compile state
|
||||
|
||||
- [x] **Task 2: BrokerAccountCard**
|
||||
- [x] Replace `<SkeletonBlock>` with `<Skeleton>` from `@moex-vibe/design-system`
|
||||
- [x] Replace eyebrow with `<Text variant="label" tone="secondary">`
|
||||
- [x] Replace title `h2` with `<Heading level={2}>`
|
||||
- [x] Replace error alert block with `<Alert severity="error">` and a `<Button>`
|
||||
- [x] Replace layout grids, stats, and card component with `<Box>` with `sx`
|
||||
- [x] Set component on `<Box>` to `Link` from `react-router-dom` for card wrapper
|
||||
- [x] Ensure stat elements use proper Text styles and spacing
|
||||
|
||||
- [x] **Task 3: BrokerAccountsSummary**
|
||||
- [x] Replace skeleton placeholders with `<Skeleton>` from DS
|
||||
- [x] Replace headers and subheaders with proper typography
|
||||
- [x] Convert layout container to `<Box>` component with `sx` positioning
|
||||
- [x] Replace metrics detail grid with Box layout using custom margins and spacing
|
||||
- [x] Keep custom hero layout styles and replace text styling inside the hero with `<Box>` and custom variables to ensure colors map correctly
|
||||
|
||||
- [x] **Task 4: BrokerAccountsPage**
|
||||
- [x] Replace layout containers and headers with `<Box>` with `sx` flex/grid
|
||||
- [x] Replace main title with `<Heading level={1}>` and subtitle with `<Text>`
|
||||
- [x] Replace empty state section with `<EmptyState>` component
|
||||
- [x] Replace error styling with `<Text tone="negative">`
|
||||
|
||||
- [x] **Task 5: Clean up orphaned CSS**
|
||||
- [x] Find and delete unused CSS selectors in `apps/frontend/src/styles.css`
|
||||
- [x] Verify reduced motion and max-width 720px responsive rules are cleanly updated without leaving dead rules
|
||||
- [x] Ensure we only leave rules for pages and components that have not yet been migrated
|
||||
|
||||
- [x] **Task 6: Verification**
|
||||
- [x] Run `npm run test:frontend` and ensure all 111 tests pass
|
||||
- [x] Run `npm run lint -w apps/frontend` to verify ESLint compatibility
|
||||
- [x] Run `npm run build:frontend` to compile production assets and verify type safety
|
||||
60
docs/features/pilot-migration/plan.md
Normal file
60
docs/features/pilot-migration/plan.md
Normal file
@ -0,0 +1,60 @@
|
||||
# Pilot Migration — Implementation Plan
|
||||
|
||||
## Architecture
|
||||
|
||||
Миграция слоя представления без изменения логики. HomePage меняет JSX на DS-компоненты. SearchBar заменяет inline-стили на DS-компоненты + MUI `Box` (разрешён layout utility).
|
||||
|
||||
## Files
|
||||
|
||||
### Modify
|
||||
- `apps/frontend/src/pages/home/ui/HomePage.tsx` — замена JSX
|
||||
- `apps/frontend/src/widgets/search-bar/ui/SearchBar.tsx` — замена JSX
|
||||
|
||||
### No changes
|
||||
- `apps/frontend/src/widgets/search-bar/ui/SearchBar.test.tsx` — тесты не меняются (те же тексты)
|
||||
- `apps/frontend/src/styles.css` — CSS-переменные всё ещё используются broker-страницами
|
||||
|
||||
## Step-by-step
|
||||
|
||||
### Step 1: Migrate HomePage
|
||||
|
||||
```tsx
|
||||
// До
|
||||
<div style={{ textAlign: 'center', paddingTop: 120 }}>
|
||||
<h1 style={{ fontSize: 32, fontWeight: 700, marginBottom: 12 }}>MoexVibe</h1>
|
||||
<p style={{ color: 'var(--color-text-secondary)', fontSize: 16, marginBottom: 32 }}>
|
||||
Анализ акций и облигаций Московской биржи
|
||||
</p>
|
||||
<p style={{ color: '#888', fontSize: 13 }}>Введите название или тикер в строку поиска выше</p>
|
||||
<p style={{ color: '#aaa', fontSize: 12, marginTop: 8 }}>
|
||||
Данные задерживаются на 15 минут · Бесплатный API MOEX ISS
|
||||
</p>
|
||||
</div>
|
||||
|
||||
// После
|
||||
import { Box } from '@mui/material';
|
||||
import { Heading, Text } from '@moex-vibe/design-system';
|
||||
|
||||
<Box textAlign="center" pt={30}>
|
||||
<Heading level={1} size="display">MoexVibe</Heading>
|
||||
<Text tone="secondary">Анализ акций и облигаций Московской биржи</Text>
|
||||
<Text tone="muted">Введите название или тикер в строку поиска выше</Text>
|
||||
<Text tone="muted">Данные задерживаются на 15 минут · Бесплатный API MOEX ISS</Text>
|
||||
</Box>
|
||||
```
|
||||
|
||||
### Step 2: Migrate SearchBar
|
||||
|
||||
- `<input>` → `<TextField label="Поиск" hiddenLabel placeholder="Поиск акций и облигаций..." />`
|
||||
- `<ul>` dropdown wrapper → `<Surface elevation="sm">` (с inline-стилями для absolute positioning)
|
||||
- `<li>` loading → `<Text tone="muted">Загрузка...</Text>`
|
||||
- `<li>` empty → `<Text tone="muted">Ничего не найдено</Text>`
|
||||
- `<li>` result item → `<Box>` + `<Text>` + `<Chip>`
|
||||
- Hover effect (`onMouseEnter/onMouseLeave`) → MUI `sx={{ '&:hover': { bgcolor: 'action.hover' } }}`
|
||||
- Hardcoded hex colors → MUI theme tokens (`text.disabled`, `divider`, etc.)
|
||||
|
||||
### Step 3: Verify
|
||||
|
||||
- `npm run test:frontend` — все тесты проходят
|
||||
- `npm run lint -w apps/frontend` — lint чист, нет неразрешённых MUI-импортов
|
||||
- `npm run build:frontend` — сборка проходит
|
||||
31
docs/features/pilot-migration/spec.md
Normal file
31
docs/features/pilot-migration/spec.md
Normal file
@ -0,0 +1,31 @@
|
||||
# Pilot Migration — Design System Adoption
|
||||
|
||||
## Status
|
||||
|
||||
Implemented — 2026-06-21.
|
||||
|
||||
## Goal
|
||||
|
||||
Пилотная миграция существующих страниц на компоненты `@moex-vibe/design-system`. Подтвердить, что API дизайн-системы покрывает реальные сценарии, и зафиксировать gaps для следующей итерации.
|
||||
|
||||
## Scope
|
||||
|
||||
- `apps/frontend/src/pages/home/ui/HomePage.tsx` — миграция на `<Heading>`, `<Text>`, `<Box>`
|
||||
- `apps/frontend/src/widgets/search-bar/ui/SearchBar.tsx` — миграция на `<TextField>`, `<Surface>`, `<Chip>`, `<Text>`, `<Box>`
|
||||
|
||||
## Out of scope
|
||||
|
||||
- Рефакторинг логики SearchBar (debounce, click outside, keyboard nav, navigate)
|
||||
- Миграция других страниц/виджетов
|
||||
- Добавление новых компонентов в DS
|
||||
- Удаление всего `styles.css` (только orphaned CSS variables после миграции)
|
||||
- Изменение поведения компонентов (все acceptance criteria остаются теми же)
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] HomePage не содержит inline-стилей; все стили — через DS-компоненты и MUI layout utilities
|
||||
- [ ] SearchBar не содержит hardcoded hex-цветов; палитра — через DS tokens
|
||||
- [ ] SearchBar states (loading, empty, results) используют соответствующие DS-компоненты
|
||||
- [ ] Логика SearchBar не изменена — все тесты проходят
|
||||
- [ ] ESLint `no-restricted-imports` не нарушен (только `Box` из MUI напрямую)
|
||||
- [ ] `npm run test:frontend && npm run lint -w apps/frontend && npm run build:frontend` проходят
|
||||
27
docs/features/pilot-migration/tasks.md
Normal file
27
docs/features/pilot-migration/tasks.md
Normal file
@ -0,0 +1,27 @@
|
||||
# Pilot Migration — Tasks
|
||||
|
||||
## 1. HomePage
|
||||
|
||||
- [x] Заменить h1 на `<Heading level={1} size="display">`
|
||||
- [x] Заменить p с text-secondary на `<Text tone="secondary">`
|
||||
- [x] Заменить p с #888/#aaa на `<Text tone="muted">`
|
||||
- [x] Заменить div-wrapper на `<Box textAlign="center" pt={30}>`
|
||||
- [x] Удалить все inline-стили
|
||||
|
||||
## 2. SearchBar
|
||||
|
||||
- [x] Заменить `<input>` на `<TextField label="Поиск" hiddenLabel>`
|
||||
- [x] Заменить `<ul>` на `<Surface elevation="sm">` с positioning styles
|
||||
- [x] Заменить loading text на `<Text tone="muted">`
|
||||
- [x] Заменить empty text на `<Text tone="muted">`
|
||||
- [x] Заменить `<li>` results на `<Box>` с flex layout
|
||||
- [x] Заменить hardcoded hex на theme tokens
|
||||
- [x] Заменить JS hover handlers на MUI `sx={{ '&:hover': { bgcolor: 'action.hover' } }}`
|
||||
- [x] Заменить тип "Акция"/"Облигация" на `<Chip>`
|
||||
|
||||
## 3. Verification
|
||||
|
||||
- [x] `npm run test:frontend` — 23 suites, 111 passed
|
||||
- [x] `npm run lint -w apps/frontend` — чист, 0 warnings
|
||||
- [x] `npm run build:frontend` — проходит
|
||||
- [x] ESLint `no-restricted-imports` не нарушен (использован `@mui/material/Box` deep import)
|
||||
Loading…
x
Reference in New Issue
Block a user