# Broker Accounts Page — Design System Migration

## Status

Draft

## 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