moex/moex-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

codex/broker-accounts-page #34

Merged
ksv741 merged 19 commits from codex/broker-accounts-page into main 2026-06-21 20:57:47 +03:00
Conversation 0 Commits 19 Files Changed 36 +135 -129
1 changed files with 135 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e044b64de4 - Show all commits

262
apps/frontend/src/widgets/broker-operations-table/ui/BrokerOperationsTable.tsx
View File

@ -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 }}>
<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' }}
/>
) : (
'→'
{isFetching ? <Skeleton shape="circular" width={14} height={14} /> : '→'}
</Button>
</Box>
)}
</button>
</div>
)}
</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>
);