Sfera/sfera-new
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлены новые зависимости для работы с графиками и статистикой: интегрирован пакет recharts для визуализации данных. Обновлены компоненты бизнес-демо и сайдбара, добавлены новые функции для отображения информации о поставках и статистике. Улучшена структура кода и взаимодействие с пользователем. Обновлены GraphQL резолверы для получения статистики Wildberries.

Browse Source
This commit is contained in:
Bivekich
2025-07-22 13:29:15 +03:00
parent 20c27a2fa2
commit a62a09faca
13 changed files with 2388 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/components/seller-statistics/seller-statistics-dashboard.tsx Normal file
View File

@ -0,0 +1,168 @@
"use client"
import { useState } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
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 { DateRangePicker } from '@/components/ui/date-picker'
import { BarChart3, PieChart, TrendingUp, Calendar } from 'lucide-react'
export function SellerStatisticsDashboard() {
const { getSidebarMargin } = useSidebar()
const [selectedPeriod, setSelectedPeriod] = useState('week')
const [useCustomDates, setUseCustomDates] = useState(false)
const [startDate, setStartDate] = useState('')
const [endDate, setEndDate] = useState('')
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>
{/* Основной контент с табами */}
<div className="flex-1 overflow-hidden">
<Tabs defaultValue="sales" className="h-full flex flex-col">
<TabsList className="grid w-full grid-cols-3 bg-white/5 backdrop-blur border border-white/10 rounded-xl flex-shrink-0 h-11">
<TabsTrigger
value="sales"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 flex items-center gap-2 text-sm rounded-lg"
>
<BarChart3 className="h-4 w-4" />
Продажи
</TabsTrigger>
<TabsTrigger
value="advertising"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 flex items-center gap-2 text-sm rounded-lg"
>
<TrendingUp className="h-4 w-4" />
Реклама
</TabsTrigger>
<TabsTrigger
value="other"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 flex items-center gap-2 text-sm rounded-lg"
>
<PieChart className="h-4 w-4" />
Иное
</TabsTrigger>
</TabsList>
{/* Контент вкладок */}
<div className="flex-1 overflow-hidden mt-3">
<TabsContent value="sales" className="h-full m-0 overflow-hidden">
<SalesTab
selectedPeriod={selectedPeriod}
useCustomDates={useCustomDates}
startDate={startDate}
endDate={endDate}
/>
</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>
</TabsContent>
<TabsContent value="other" 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">
<PieChart 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>
</TabsContent>
</div>
</Tabs>
</div>
</div>
</main>
</div>
)
}