From 21df354df63f950915a9f7a395c04b1e6db5950f Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Sat, 27 Jun 2026 13:21:15 +0300
Subject: [PATCH] fix(frontend): align dashboard card heading hierarchy

BrokerDashboardCard previously rendered <Heading level={3} size="section">,
which produced an <h3> under the <h1> account name in BrokerAccountLayout,
skipping the <h2> level. Use level={2} so the semantic HTML is a proper
<h2> while keeping the compact "section" visual size.

Also extract the byte-identical toolbar wrapper (grid + chips + date filter
slot) shared by BrokerDashboardEventsCard and BrokerDashboardIncomeCard
into BrokerDashboardTableToolbar to remove duplicated sx config.
---
 .../ui/BrokerDashboardCard.tsx                |  2 +-
 .../ui/BrokerDashboardEventsCard.tsx          | 36 +++++++------------
 .../ui/BrokerDashboardIncomeCard.tsx          | 36 +++++++------------
 .../ui/BrokerDashboardTableToolbar.tsx        | 28 +++++++++++++++
 4 files changed, 53 insertions(+), 49 deletions(-)
 create mode 100644 apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardTableToolbar.tsx

diff --git a/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardCard.tsx b/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardCard.tsx
index abd1a07..301ec6f 100644
--- a/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardCard.tsx
+++ b/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardCard.tsx
@@ -40,7 +40,7 @@ export function BrokerDashboardCard({
           mb: 1.5,
         }}
       >
-        <Heading level={3} size="section">
+        <Heading level={2} size="section">
           {title}
         </Heading>
         {action}
diff --git a/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardEventsCard.tsx b/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardEventsCard.tsx
index ed6c469..26cb870 100644
--- a/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardEventsCard.tsx
+++ b/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardEventsCard.tsx
@@ -8,6 +8,7 @@ import { eventStatusLabel, eventTypeLabel } from '../lib/dashboardFormatters'
 import { BrokerDashboardCard } from './BrokerDashboardCard'
 import { BrokerDashboardDateFilter } from './BrokerDashboardDateFilter'
 import { BrokerDashboardTableSkeleton } from './BrokerDashboardTableSkeleton'
+import { BrokerDashboardTableToolbar } from './BrokerDashboardTableToolbar'
 
 const EVENT_FILTERS: Array<{
   type: DashboardEventType
@@ -81,30 +82,17 @@ export function BrokerDashboardEventsCard({
       title="События"
       action={<Link to={`/broker/${encodeURIComponent(accountId)}/events`}>Все события</Link>}
       filters={
-        <Box
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: { xs: '1fr', md: 'minmax(0, 1fr) auto' },
-            gap: 1.25,
-            alignItems: 'center',
-            border: '1px solid',
-            borderColor: 'divider',
-            bgcolor: 'grey.50',
-            borderRadius: 2,
-            p: 1,
-          }}
+        <BrokerDashboardTableToolbar
+          chips={EVENT_FILTERS.map((filter) => (
+            <Chip
+              key={filter.type}
+              label={filter.label}
+              tone={filter.tone}
+              selected={selectedTypes.includes(filter.type)}
+              onClick={() => onToggleType(filter.type)}
+            />
+          ))}
         >
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, minWidth: 0 }}>
-            {EVENT_FILTERS.map((filter) => (
-              <Chip
-                key={filter.type}
-                label={filter.label}
-                tone={filter.tone}
-                selected={selectedTypes.includes(filter.type)}
-                onClick={() => onToggleType(filter.type)}
-              />
-            ))}
-          </Box>
           <BrokerDashboardDateFilter
             appliedLabel={appliedDateLabel}
             preset={draftPreset}
@@ -117,7 +105,7 @@ export function BrokerDashboardEventsCard({
             onReset={onResetFilters}
             onApply={onApplyFilters}
           />
-        </Box>
+        </BrokerDashboardTableToolbar>
       }
     >
       {selectedTypes.length === 0 ? (
diff --git a/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardIncomeCard.tsx b/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardIncomeCard.tsx
index 6c32cae..412fcc4 100644
--- a/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardIncomeCard.tsx
+++ b/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardIncomeCard.tsx
@@ -8,6 +8,7 @@ import { getDashboardIncomeRows, sumDashboardIncome } from '../lib/dashboardInco
 import { BrokerDashboardCard } from './BrokerDashboardCard'
 import { BrokerDashboardDateFilter } from './BrokerDashboardDateFilter'
 import { BrokerDashboardTableSkeleton } from './BrokerDashboardTableSkeleton'
+import { BrokerDashboardTableToolbar } from './BrokerDashboardTableToolbar'
 
 const INCOME_FILTERS: Array<{
   type: DashboardIncomeType
@@ -73,30 +74,17 @@ export function BrokerDashboardIncomeCard({
       title="Доходы"
       action={<Link to={`/broker/${encodeURIComponent(accountId)}/operations`}>Все операции</Link>}
       filters={
-        <Box
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: { xs: '1fr', md: 'minmax(0, 1fr) auto' },
-            gap: 1.25,
-            alignItems: 'center',
-            border: '1px solid',
-            borderColor: 'divider',
-            bgcolor: 'grey.50',
-            borderRadius: 2,
-            p: 1,
-          }}
+        <BrokerDashboardTableToolbar
+          chips={INCOME_FILTERS.map((filter) => (
+            <Chip
+              key={filter.type}
+              label={filter.label}
+              tone={filter.tone}
+              selected={selectedTypes.includes(filter.type)}
+              onClick={() => onToggleType(filter.type)}
+            />
+          ))}
         >
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, minWidth: 0 }}>
-            {INCOME_FILTERS.map((filter) => (
-              <Chip
-                key={filter.type}
-                label={filter.label}
-                tone={filter.tone}
-                selected={selectedTypes.includes(filter.type)}
-                onClick={() => onToggleType(filter.type)}
-              />
-            ))}
-          </Box>
           <BrokerDashboardDateFilter
             appliedLabel={appliedDateLabel}
             preset={draftPreset}
@@ -109,7 +97,7 @@ export function BrokerDashboardIncomeCard({
             onReset={onResetFilters}
             onApply={onApplyFilters}
           />
-        </Box>
+        </BrokerDashboardTableToolbar>
       }
     >
       {selectedTypes.length === 0 ? (
diff --git a/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardTableToolbar.tsx b/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardTableToolbar.tsx
new file mode 100644
index 0000000..02b5e36
--- /dev/null
+++ b/apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardTableToolbar.tsx
@@ -0,0 +1,28 @@
+import { Box } from '@mui/material'
+import type { ReactNode } from 'react'
+
+type BrokerDashboardTableToolbarProps = {
+  chips: ReactNode
+  children: ReactNode
+}
+
+export function BrokerDashboardTableToolbar({ chips, children }: BrokerDashboardTableToolbarProps) {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: { xs: '1fr', md: 'minmax(0, 1fr) auto' },
+        gap: 1.25,
+        alignItems: 'center',
+        border: '1px solid',
+        borderColor: 'divider',
+        bgcolor: 'grey.50',
+        borderRadius: 2,
+        p: 1,
+      }}
+    >
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, minWidth: 0 }}>{chips}</Box>
+      {children}
+    </Box>
+  )
+}