104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
import { useState } from 'react';
|
||
import { useParams } from 'react-router-dom';
|
||
import type { BrokerMoney } from '../../api/responses';
|
||
import { useBrokerOperations } from '../../hooks/useBrokerOperations';
|
||
import { useBrokerPortfolio } from '../../hooks/useBrokerPortfolio';
|
||
import { BrokerOperationsTable } from './BrokerOperationsTable';
|
||
import { BrokerPositionsSection } from './BrokerPositionsSection';
|
||
|
||
function formatMoney(value: BrokerMoney | null | undefined) {
|
||
if (!value) return '-';
|
||
|
||
return new Intl.NumberFormat('ru-RU', {
|
||
style: 'currency',
|
||
currency: value.currency || 'RUB',
|
||
maximumFractionDigits: 2,
|
||
}).format(value.value);
|
||
}
|
||
|
||
export function BrokerAccountDetailPage() {
|
||
const { accountId } = useParams();
|
||
const [operationCursor, setOperationCursor] = useState<string | undefined>(undefined);
|
||
const [operationCursorStack, setOperationCursorStack] = useState<Array<string | undefined>>([]);
|
||
const portfolio = useBrokerPortfolio(accountId);
|
||
const operations = useBrokerOperations(accountId, { limit: 10, cursor: operationCursor });
|
||
|
||
if (portfolio.isLoading) return <p>Загрузка портфеля...</p>;
|
||
if (portfolio.error || !portfolio.data) {
|
||
return <p style={{ color: 'var(--color-negative)' }}>Не удалось загрузить портфель</p>;
|
||
}
|
||
|
||
function handleNextOperationsPage() {
|
||
const nextCursor = operations.data?.nextCursor;
|
||
if (!nextCursor || !operations.data?.hasNext) return;
|
||
|
||
setOperationCursorStack((previous) => [...previous, operationCursor]);
|
||
setOperationCursor(nextCursor);
|
||
}
|
||
|
||
function handlePreviousOperationsPage() {
|
||
if (operationCursorStack.length === 0) return;
|
||
|
||
const nextStack = operationCursorStack.slice(0, -1);
|
||
const previousCursor = operationCursorStack[operationCursorStack.length - 1];
|
||
setOperationCursorStack(nextStack);
|
||
setOperationCursor(previousCursor);
|
||
}
|
||
|
||
return (
|
||
<div style={{ display: 'grid', gap: 24 }}>
|
||
<header>
|
||
<h1 style={{ fontSize: 28, lineHeight: 1.2, marginBottom: 12 }}>
|
||
{portfolio.data.account.name}
|
||
</h1>
|
||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'baseline' }}>
|
||
<strong style={{ fontSize: 24 }}>{formatMoney(portfolio.data.totals.portfolio)}</strong>
|
||
<span style={{ color: 'var(--color-text-secondary)' }}>
|
||
День: {formatMoney(portfolio.data.yields.daily)}
|
||
</span>
|
||
<span style={{ color: 'var(--color-text-secondary)' }}>
|
||
Ожидаемая: {portfolio.data.yields.expectedPercent ?? '-'}%
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section
|
||
style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
|
||
gap: 12,
|
||
}}
|
||
>
|
||
{portfolio.data.cash.map((money) => (
|
||
<div
|
||
key={money.currency}
|
||
style={{
|
||
background: 'var(--color-surface)',
|
||
border: '1px solid #e0e0e0',
|
||
borderRadius: 8,
|
||
padding: 16,
|
||
}}
|
||
>
|
||
<div style={{ color: 'var(--color-text-secondary)', fontSize: 13 }}>
|
||
{money.currency}
|
||
</div>
|
||
<strong>{formatMoney(money)}</strong>
|
||
</div>
|
||
))}
|
||
</section>
|
||
|
||
<BrokerPositionsSection positions={portfolio.data.positions} />
|
||
|
||
<BrokerOperationsTable
|
||
isLoading={operations.isLoading}
|
||
page={operations.data}
|
||
pageNumber={operationCursorStack.length + 1}
|
||
canGoBack={operationCursorStack.length > 0}
|
||
canGoForward={Boolean(operations.data?.hasNext && operations.data.nextCursor)}
|
||
onPrevious={handlePreviousOperationsPage}
|
||
onNext={handleNextOperationsPage}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|