apps/frontend/src/pages/broker/BrokerOperationsTable.tsx

@@ -3,9 +3,7 @@ import type { BrokerMoney, BrokerOperation, BrokerOperationsPage } from '../../a
 import {
   getBrokerInstrumentPath,
   getBrokerOperationImpact,
-  getBrokerOperationImpactLabel,
   getBrokerOperationTypeLabel,
-  type BrokerOperationImpact,
 } from './brokerDisplay';
 
 const tableStyle = {
@@ -27,33 +25,14 @@ const tdStyle = {
   verticalAlign: 'top',
 } satisfies React.CSSProperties;
 
-const impactStyles: Record<BrokerOperationImpact, React.CSSProperties> = {
-  adds: {
-    background: 'rgba(46, 125, 50, 0.1)',
-    color: 'var(--color-positive)',
-  },
-  reduces: {
-    background: 'rgba(198, 40, 40, 0.1)',
-    color: 'var(--color-negative)',
-  },
-  neutral: {
-    background: 'rgba(25, 118, 210, 0.1)',
-    color: 'var(--color-primary)',
-  },
-  unknown: {
-    background: 'rgba(102, 102, 102, 0.12)',
-    color: 'var(--color-text-secondary)',
-  },
-};
-
 function formatMoney(value: BrokerMoney | null | undefined) {
   if (!value) return '-';
-
+  const formatted = new Intl.NumberFormat('ru-RU', {
-  return new Intl.NumberFormat('ru-RU', {
     style: 'currency',
     currency: value.currency || 'RUB',
     maximumFractionDigits: 2,
   }).format(value.value);
+  return value.value > 0 ? `+${formatted}` : formatted;
 }
 
 function formatDate(value: string | null) {
@@ -84,28 +63,23 @@ function OperationInstrument({ operation }: { operation: BrokerOperation }) {
   return <Link to={path}>{label}</Link>;
 }
 
-function OperationType({ operation }: { operation: BrokerOperation }) {
+const pagButtonStyle: React.CSSProperties = {
-  const impact = getBrokerOperationImpact(operation);
+  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,
+};
 
-  return (
+const pagButtonDisabledStyle: React.CSSProperties = {
-    <div style={{ display: 'grid', gap: 4 }}>
+  ...pagButtonStyle,
-      <span>{getBrokerOperationTypeLabel(operation)}</span>
+  opacity: 0.35,
-      <span
+  cursor: 'not-allowed',
-        style={{
+};
-          justifySelf: 'start',
-          borderRadius: 999,
-          fontSize: 12,
-          fontWeight: 700,
-          lineHeight: 1,
-          padding: '5px 8px',
-          ...impactStyles[impact],
-        }}
-      >
-        {getBrokerOperationImpactLabel(impact)}
-      </span>
-    </div>
-  );
-}
 
 export function BrokerOperationsTable({
   isLoading,
@@ -139,14 +113,32 @@ export function BrokerOperationsTable({
       >
         <h2 style={{ fontSize: 20, margin: 0 }}>Операции</h2>
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <button type="button" onClick={onPrevious} disabled={!canGoBack}>
+          <button
-            Назад
+            type="button"
+            onClick={onPrevious}
+            disabled={!canGoBack}
+            style={canGoBack ? pagButtonStyle : pagButtonDisabledStyle}
+          >
+            ←
           </button>
-          <span style={{ color: 'var(--color-text-secondary)', fontSize: 13 }}>
+          <span
-            Страница {pageNumber}
+            style={{
+              minWidth: 20,
+              textAlign: 'center',
+              color: 'var(--color-text-secondary)',
+              fontSize: 14,
+              fontWeight: 600,
+            }}
+          >
+            {pageNumber}
           </span>
-          <button type="button" onClick={onNext} disabled={!canGoForward}>
+          <button
-            Вперед
+            type="button"
+            onClick={onNext}
+            disabled={!canGoForward}
+            style={canGoForward ? pagButtonStyle : pagButtonDisabledStyle}
+          >
+            →
           </button>
         </div>
       </div>
@@ -182,7 +174,7 @@ export function BrokerOperationsTable({
                   <tr key={operation.cursor || operation.id}>
                     <td style={tdStyle}>{formatDate(operation.date)}</td>
                     <td style={tdStyle}>
-                      <OperationType operation={operation} />
+                      <span>{getBrokerOperationTypeLabel(operation)}</span>
                     </td>
                     <td style={tdStyle}>
                       <OperationInstrument operation={operation} />