Добавлены новые зависимости для работы с графиками и статистикой, включая @radix-ui/react-popover, date-fns и react-day-picker. Обновлены компоненты для отображения статистики продаж, улучшена агрегация данных и добавлены функции сортировки в таблицах. Обновлены API маршруты для получения данных о статистике Wildberries. Оптимизирован код для повышения читаемости и производительности.

src/components/seller-statistics/seller-statistics-dashboard.tsx

@@ -6,6 +6,7 @@ import { Card } from '@/components/ui/card'
 import { Sidebar } from '@/components/dashboard/sidebar'
 import { useSidebar } from '@/hooks/useSidebar'
 import { SalesTab } from '@/components/seller-statistics/sales-tab'
+import { AdvertisingTab } from '@/components/seller-statistics/advertising-tab'
 import { DateRangePicker } from '@/components/ui/date-picker'
 import { BarChart3, PieChart, TrendingUp, Calendar } from 'lucide-react'
 
@@ -19,83 +20,8 @@ export function SellerStatisticsDashboard() {
   return (
     <div className="h-screen flex overflow-hidden">
       <Sidebar />
-      <main className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}>
-        <div className="h-full w-full flex flex-col">
-          {/* Компактный заголовок с переключателями */}
-          <div className="flex items-center justify-between mb-3 flex-shrink-0">
-            <div>
-              <h1 className="text-xl font-bold text-white mb-1">Статистика продаж</h1>
-              <p className="text-white/50 text-sm">Аналитика продаж, заказов и рекламы</p>
-            </div>
-            
-            {/* Переключатели периода и пользовательские даты */}
-            <div className="flex items-center gap-3">
-              {/* Стильные переключатели периода */}
-              <div className="flex gap-1 bg-white/5 backdrop-blur border border-white/10 rounded-xl p-1">
-                <button
-                  onClick={() => {
-                    setSelectedPeriod('week')
-                    setUseCustomDates(false)
-                  }}
-                  className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 ${
-                    selectedPeriod === 'week' && !useCustomDates
-                      ? 'bg-white/20 text-white shadow-sm'
-                      : 'text-white/60 hover:bg-white/10 hover:text-white/80'
-                  }`}
-                >
-                  Неделя
-                </button>
-                <button
-                  onClick={() => {
-                    setSelectedPeriod('month')
-                    setUseCustomDates(false)
-                  }}
-                  className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 ${
-                    selectedPeriod === 'month' && !useCustomDates
-                      ? 'bg-white/20 text-white shadow-sm'
-                      : 'text-white/60 hover:bg-white/10 hover:text-white/80'
-                  }`}
-                >
-                  Месяц
-                </button>
-                <button
-                  onClick={() => {
-                    setSelectedPeriod('quarter')
-                    setUseCustomDates(false)
-                  }}
-                  className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 ${
-                    selectedPeriod === 'quarter' && !useCustomDates
-                      ? 'bg-white/20 text-white shadow-sm'
-                      : 'text-white/60 hover:bg-white/10 hover:text-white/80'
-                  }`}
-                >
-                  Квартал
-                </button>
-                <button
-                  onClick={() => setUseCustomDates(true)}
-                  className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 flex items-center gap-1 ${
-                    useCustomDates
-                      ? 'bg-white/20 text-white shadow-sm'
-                      : 'text-white/60 hover:bg-white/10 hover:text-white/80'
-                  }`}
-                >
-                  <Calendar className="h-3 w-3" />
-                  Период
-                </button>
-              </div>
-
-              {/* Выбор произвольных дат */}
-              {useCustomDates && (
-                <DateRangePicker
-                  startDate={startDate}
-                  endDate={endDate}
-                  onStartDateChange={setStartDate}
-                  onEndDateChange={setEndDate}
-                  className="min-w-[280px]"
-                />
-              )}
-            </div>
-          </div>
+      <main className={`flex-1 ${getSidebarMargin()} px-4 py-4 overflow-hidden transition-all duration-300`}>
+        <div className="h-full w-full flex flex-col">{/* Убираем ограничение по ширине для полного использования экрана */}
 
           {/* Основной контент с табами */}
           <div className="flex-1 overflow-hidden">
@@ -132,19 +58,18 @@ export function SellerStatisticsDashboard() {
                     useCustomDates={useCustomDates}
                     startDate={startDate}
                     endDate={endDate}
+                    onPeriodChange={setSelectedPeriod}
+                    onUseCustomDatesChange={setUseCustomDates}
                   />
                 </TabsContent>
                 
                 <TabsContent value="advertising" className="h-full m-0 overflow-hidden">
-                  <Card className="glass-card h-full overflow-hidden p-6">
-                    <div className="flex items-center justify-center h-full">
-                      <div className="text-center">
-                        <TrendingUp className="h-12 w-12 text-white/40 mx-auto mb-4" />
-                        <h3 className="text-lg font-semibold text-white mb-2">Статистика рекламы</h3>
-                        <p className="text-white/60">Раздел в разработке</p>
-                      </div>
-                    </div>
-                  </Card>
+                  <AdvertisingTab
+                    selectedPeriod={selectedPeriod} 
+                    useCustomDates={useCustomDates}
+                    startDate={startDate}
+                    endDate={endDate}
+                  />
                 </TabsContent>
                 
                 <TabsContent value="other" className="h-full m-0 overflow-hidden">