93 lines
4.3 KiB
TypeScript
93 lines
4.3 KiB
TypeScript
"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 { AdvertisingTab } from '@/components/seller-statistics/advertising-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-4 overflow-hidden transition-all duration-300`}>
|
||
<div className="h-full w-full flex flex-col">{/* Убираем ограничение по ширине для полного использования экрана */}
|
||
|
||
{/* Основной контент с табами */}
|
||
<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}
|
||
onPeriodChange={setSelectedPeriod}
|
||
onUseCustomDatesChange={setUseCustomDates}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="advertising" className="h-full m-0 overflow-hidden">
|
||
<AdvertisingTab
|
||
selectedPeriod={selectedPeriod}
|
||
useCustomDates={useCustomDates}
|
||
startDate={startDate}
|
||
endDate={endDate}
|
||
/>
|
||
</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>
|
||
)
|
||
}
|