84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import type { BondResponse } from '../api/responses';
|
||
|
||
interface BondDetailsProps {
|
||
bond: BondResponse;
|
||
}
|
||
|
||
const rowStyle: React.CSSProperties = {
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
padding: '8px 0',
|
||
borderBottom: '1px solid #eee',
|
||
};
|
||
|
||
export function BondDetails({ bond }: BondDetailsProps) {
|
||
const md = bond.marketData;
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
background: 'var(--color-surface)',
|
||
borderRadius: 'var(--border-radius)',
|
||
boxShadow: 'var(--shadow)',
|
||
padding: 24,
|
||
}}
|
||
>
|
||
<div style={{ marginBottom: 16 }}>
|
||
<h2 style={{ fontSize: 28, fontWeight: 700 }}>{bond.shortName}</h2>
|
||
<div style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>{bond.isin}</div>
|
||
</div>
|
||
|
||
<div style={{ fontSize: 36, fontWeight: 700, marginBottom: 4 }}>
|
||
{md.price?.toFixed(2) ?? '—'}%
|
||
</div>
|
||
|
||
<div style={{ marginTop: 16 }}>
|
||
<div style={rowStyle}>
|
||
<span>Номинал</span>
|
||
<span>
|
||
{bond.faceValue.toLocaleString('ru-RU')} {bond.faceUnit}
|
||
</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Дата погашения</span>
|
||
<span>{bond.matDate}</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Купон</span>
|
||
<span>
|
||
{md.couponValue ?? '—'} ₽ {md.couponPercent != null ? `(${md.couponPercent}%)` : ''}
|
||
</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Период купона</span>
|
||
<span>{bond.couponPeriod} дней</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Следующий купон</span>
|
||
<span>{md.nextCouponDate ?? '—'}</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>НКД</span>
|
||
<span>{md.accruedInt?.toFixed(2) ?? '—'} ₽</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Доходность к погашению</span>
|
||
<span>{md.yieldToMaturity != null ? md.yieldToMaturity.toFixed(2) + '%' : '—'}</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Дюрация</span>
|
||
<span>{md.duration != null ? md.duration.toFixed(2) : '—'}</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Тип</span>
|
||
<span>{bond.bondType}</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>ISIN</span>
|
||
<span>{bond.isin}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|