Добавлено состояние для сворачивания графика в компонент SalesTab. Реализована кнопка для управления отображением графика с иконками Chevron. Обновлены стили и структура кода для улучшения взаимодействия с пользователем.

src/components/seller-statistics/sales-tab.tsx

@@ -7,7 +7,7 @@ import { Card } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Skeleton } from '@/components/ui/skeleton'
-import { TrendingUp, Info, BarChart3 } from 'lucide-react'
+import { TrendingUp, Info, BarChart3, ChevronDown, ChevronUp } from 'lucide-react'
 import {
   ChartConfig,
   ChartContainer,
@@ -330,6 +330,9 @@ export function SalesTab({ selectedPeriod, useCustomDates, startDate, endDate, o
   const [sortField, setSortField] = useState<string>('')
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')
 
+  // Состояние для сворачивания графика
+  const [isChartCollapsed, setIsChartCollapsed] = useState(false)
+
   // Функция сортировки
   const handleSort = (field: string) => {
     if (sortField === field) {
@@ -455,11 +458,27 @@ export function SalesTab({ selectedPeriod, useCustomDates, startDate, endDate, o
   return (
     <div className="h-full flex flex-col space-y-2">
       {/* График с фильтрами */}
-      <Card className="glass-card p-3 flex-shrink-0 overflow-hidden" style={{ height: '380px' }}>
+      <Card 
+        className="glass-card p-3 flex-shrink-0 overflow-hidden transition-all duration-300" 
+        style={{ height: isChartCollapsed ? 'auto' : '380px' }}
+      >
         <div className="h-full flex flex-col min-h-0">
           {/* Заголовок с переключателями периода */}
           <div className="flex items-center justify-between mb-2">
-            <h3 className="text-white font-semibold">Динамика показателей</h3>
+            <div className="flex items-center gap-2">
+              <h3 className="text-white font-semibold">Динамика показателей</h3>
+              <button
+                onClick={() => setIsChartCollapsed(!isChartCollapsed)}
+                className="text-white/60 hover:text-white/80 hover:bg-white/10 p-1 rounded transition-all"
+                title={isChartCollapsed ? "Развернуть график" : "Свернуть график"}
+              >
+                {isChartCollapsed ? (
+                  <ChevronDown className="w-4 h-4" />
+                ) : (
+                  <ChevronUp className="w-4 h-4" />
+                )}
+              </button>
+            </div>
             
             {/* Переключатели периода */}
             <div className="flex items-center gap-2">
@@ -511,8 +530,11 @@ export function SalesTab({ selectedPeriod, useCustomDates, startDate, endDate, o
             </div>
           </div>
           
-          {/* Компактные чекбоксы для фильтрации */}
+          {/* Контент графика - показывается только если не свернут */}
-          <div className="mb-2 pb-2 border-b border-white/10">
+          {!isChartCollapsed && (
+            <>
+              {/* Компактные чекбоксы для фильтрации */}
+              <div className="mb-2 pb-2 border-b border-white/10">
             <div className="flex items-center justify-between mb-1">
               <span className="text-xs text-white/60">Показать на графике:</span>
                               <span className="text-xs text-blue-400 flex items-center gap-1">
@@ -640,6 +662,8 @@ export function SalesTab({ selectedPeriod, useCustomDates, startDate, endDate, o
               </BarChart>
             </ChartContainer>
           </div>
+            </>
+          )}
         </div>
       </Card>