47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { AllocationChart } from './AllocationChart';
|
||
import type { PortfolioDetail } from '@/shared/api/responses';
|
||
|
||
export function PortfolioSummary({ portfolio }: { portfolio: PortfolioDetail }) {
|
||
return (
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
gap: 32,
|
||
padding: 20,
|
||
background: 'var(--color-surface)',
|
||
border: '1px solid #e0e0e0',
|
||
borderRadius: 'var(--border-radius)',
|
||
}}
|
||
>
|
||
<AllocationChart positions={portfolio.positions} totalValue={portfolio.totalValue} />
|
||
<div>
|
||
<div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginBottom: 4 }}>
|
||
Общая стоимость
|
||
</div>
|
||
<div style={{ fontSize: 24, fontWeight: 700 }}>
|
||
{portfolio.totalValue?.toLocaleString('ru-RU', {
|
||
minimumFractionDigits: 2,
|
||
maximumFractionDigits: 2,
|
||
})}
|
||
<span
|
||
style={{
|
||
fontSize: 14,
|
||
fontWeight: 400,
|
||
color: 'var(--color-text-secondary)',
|
||
marginLeft: 4,
|
||
}}
|
||
>
|
||
{portfolio.currency}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginBottom: 4 }}>
|
||
Позиций
|
||
</div>
|
||
<div style={{ fontSize: 24, fontWeight: 700 }}>{portfolio.positions.length}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|