From 8ad5f3c70cb068ffffab816b292f126d1bf7223f Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Sun, 21 Jun 2026 20:21:00 +0300
Subject: [PATCH] feat: migrate BrokerPositionsPage and BrokerOperationsPage

---
 .../ui/BrokerOperationsPage.tsx               | 26 ++++++++++++-------
 .../ui/BrokerPositionsPage.tsx                | 14 +++++-----
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/apps/frontend/src/pages/broker-operations/ui/BrokerOperationsPage.tsx b/apps/frontend/src/pages/broker-operations/ui/BrokerOperationsPage.tsx
index 2a52d29..f6e7135 100644
--- a/apps/frontend/src/pages/broker-operations/ui/BrokerOperationsPage.tsx
+++ b/apps/frontend/src/pages/broker-operations/ui/BrokerOperationsPage.tsx
@@ -1,5 +1,7 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { Box } from '@mui/material';
+import { Heading, Text } from '@moex-vibe/design-system';
 import {
   BROKER_OPERATION_TYPE_OPTIONS,
   isBrokerOperationType,
@@ -32,7 +34,9 @@ export function BrokerOperationsPage() {
   }
 
   const history = operations.error ? (
-    <p role="alert">Не удалось загрузить историю операций</p>
+    <Text component="p" tone="negative" role="alert">
+      Не удалось загрузить историю операций
+    </Text>
   ) : (
     <BrokerOperationsTable
       title="История операций"
@@ -53,13 +57,15 @@ export function BrokerOperationsPage() {
   );
 
   return (
-    <section aria-labelledby="broker-operations-heading">
-      <div className="broker-operations__toolbar">
-        <h2 id="broker-operations-heading" style={{ fontSize: 20, margin: 0 }}>
+    <Box component="section" aria-labelledby="broker-operations-heading">
+      <Box
+        sx={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 2, mb: 2 }}
+      >
+        <Heading level={2} id="broker-operations-heading">
           Операции
-        </h2>
-        <label>
-          <span>Тип операции</span>
+        </Heading>
+        <Box component="label" sx={{ display: 'grid', gap: 0.5, color: 'text.secondary' }}>
+          <Text variant="label">Тип операции</Text>
           <select value={selectedType} onChange={handleTypeChange}>
             <option value="">Все операции</option>
             {BROKER_OPERATION_TYPE_OPTIONS.map((option) => (
@@ -68,9 +74,9 @@ export function BrokerOperationsPage() {
               </option>
             ))}
           </select>
-        </label>
-      </div>
+        </Box>
+      </Box>
       {history}
-    </section>
+    </Box>
   );
 }
diff --git a/apps/frontend/src/pages/broker-positions/ui/BrokerPositionsPage.tsx b/apps/frontend/src/pages/broker-positions/ui/BrokerPositionsPage.tsx
index 5586b0b..7e75cc8 100644
--- a/apps/frontend/src/pages/broker-positions/ui/BrokerPositionsPage.tsx
+++ b/apps/frontend/src/pages/broker-positions/ui/BrokerPositionsPage.tsx
@@ -1,3 +1,5 @@
+import { Box } from '@mui/material';
+import { Heading, Text } from '@moex-vibe/design-system';
 import { useBrokerPositions } from '@/entities/broker-position';
 import { useBrokerAccountContext } from '@/widgets/broker-account-layout';
 import { BrokerPositionTable } from '@/widgets/broker-positions-table';
@@ -15,14 +17,14 @@ export function BrokerPositionsPage({ type, title }: BrokerPositionsPageProps) {
 
   if (positions.error) {
     return (
-      <section aria-labelledby={`broker-${type}-heading`}>
-        <h2 id={`broker-${type}-heading`} style={{ fontSize: 20, margin: 0 }}>
+      <Box component="section" aria-labelledby={`broker-${type}-heading`}>
+        <Heading level={2} id={`broker-${type}-heading`}>
           {title}
-        </h2>
-        <p role="alert">
+        </Heading>
+        <Text component="p" tone="negative" role="alert">
           {type === 'share' ? 'Не удалось загрузить акции' : 'Не удалось загрузить облигации'}
-        </p>
-      </section>
+        </Text>
+      </Box>
     );
   }