From e044b64de4b3851d815dceeaf2963ff8d6ba24c5 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Sun, 21 Jun 2026 18:59:58 +0300
Subject: [PATCH] feat: migrate BrokerOperationsTable to design system

---
 .../ui/BrokerOperationsTable.tsx              | 264 +++++++++---------
 1 file changed, 135 insertions(+), 129 deletions(-)

diff --git a/apps/frontend/src/widgets/broker-operations-table/ui/BrokerOperationsTable.tsx b/apps/frontend/src/widgets/broker-operations-table/ui/BrokerOperationsTable.tsx
index 06e0ef4..4854290 100644
--- a/apps/frontend/src/widgets/broker-operations-table/ui/BrokerOperationsTable.tsx
+++ b/apps/frontend/src/widgets/broker-operations-table/ui/BrokerOperationsTable.tsx
@@ -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 }}>
-        {ticker}
+    <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' }}
-                />
-              ) : (
-                '→'
-              )}
-            </button>
-          </div>
+              {isFetching ? <Skeleton shape="circular" width={14} height={14} /> : '→'}
+            </Button>
+          </Box>
         )}
-      </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>
   );