Добавлены модели для внешней рекламы и кэша склада WB в схему Prisma. Обновлены компоненты AdvertisingTab и WBWarehouseDashboard для работы с новыми данными. Реализованы GraphQL запросы и мутации для управления внешней рекламой и кэшем склада. Оптимизирована логика отображения статистики и добавлены новые функции для работы с рекламой.
This commit is contained in:
Bivekich
2104
src/components/seller-statistics/advertising-tab.tsx.backup
Normal file
2104
src/components/seller-statistics/advertising-tab.tsx.backup
Normal file
@ -0,0 +1,2104 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import { useQuery, useLazyQuery, useMutation } from '@apollo/client'
|
||||
import { WildberriesService } from '@/services/wildberries-service'
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { GET_WILDBERRIES_CAMPAIGN_STATS, GET_WILDBERRIES_CAMPAIGNS_LIST, GET_EXTERNAL_ADS } from '@/graphql/queries'
|
||||
import { CREATE_EXTERNAL_AD, DELETE_EXTERNAL_AD, UPDATE_EXTERNAL_AD, UPDATE_EXTERNAL_AD_CLICKS } from '@/graphql/mutations'
|
||||
import {
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
Eye,
|
||||
MousePointer,
|
||||
ShoppingCart,
|
||||
DollarSign,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Plus,
|
||||
Trash2,
|
||||
ExternalLink,
|
||||
Copy,
|
||||
AlertCircle,
|
||||
BarChart3,
|
||||
Minimize2,
|
||||
Calendar,
|
||||
Package,
|
||||
Link,
|
||||
Smartphone,
|
||||
Monitor,
|
||||
Globe,
|
||||
Target,
|
||||
ArrowUpDown,
|
||||
Percent
|
||||
} from 'lucide-react'
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from '@/components/ui/chart'
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, BarChart, Bar, ResponsiveContainer, ComposedChart } from 'recharts'
|
||||
|
||||
// Интерфейсы для новой структуры таблицы
|
||||
interface ExternalAd {
|
||||
id: string
|
||||
name: string
|
||||
url: string
|
||||
cost: number
|
||||
clicks?: number
|
||||
}
|
||||
|
||||
interface ProductAdvertising {
|
||||
wbCampaigns: {
|
||||
campaignId: number
|
||||
views: number
|
||||
clicks: number
|
||||
cost: number
|
||||
orders: number
|
||||
}[]
|
||||
externalAds: ExternalAd[]
|
||||
}
|
||||
|
||||
interface ProductData {
|
||||
nmId: number
|
||||
name: string
|
||||
totalViews: number
|
||||
totalClicks: number
|
||||
totalCost: number
|
||||
totalOrders: number
|
||||
totalRevenue: number
|
||||
advertising: ProductAdvertising
|
||||
}
|
||||
|
||||
interface DailyAdvertisingData {
|
||||
date: string
|
||||
totalSum: number
|
||||
totalOrders: number
|
||||
totalRevenue: number
|
||||
products: ProductData[]
|
||||
}
|
||||
|
||||
interface CampaignStatsProps {
|
||||
selectedPeriod: string
|
||||
useCustomDates: boolean
|
||||
startDate: string
|
||||
endDate: string
|
||||
}
|
||||
|
||||
// Интерфейсы для API данных
|
||||
interface GeneratedLink {
|
||||
id: string
|
||||
adId: string
|
||||
adName: string
|
||||
targetUrl: string
|
||||
trackingUrl: string
|
||||
clicks: number
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
interface CampaignProduct {
|
||||
views: number
|
||||
clicks: number
|
||||
ctr: number
|
||||
cpc: number
|
||||
sum: number
|
||||
atbs: number
|
||||
orders: number
|
||||
cr: number
|
||||
shks: number
|
||||
sum_price: number
|
||||
name: string
|
||||
nmId: number
|
||||
}
|
||||
|
||||
interface CampaignApp {
|
||||
views: number
|
||||
clicks: number
|
||||
ctr: number
|
||||
cpc: number
|
||||
sum: number
|
||||
atbs: number
|
||||
orders: number
|
||||
cr: number
|
||||
shks: number
|
||||
sum_price: number
|
||||
appType: number
|
||||
nm: CampaignProduct[]
|
||||
}
|
||||
|
||||
interface CampaignDay {
|
||||
date: string
|
||||
views: number
|
||||
clicks: number
|
||||
ctr: number
|
||||
cpc: number
|
||||
sum: number
|
||||
atbs: number
|
||||
orders: number
|
||||
cr: number
|
||||
shks: number
|
||||
sum_price: number
|
||||
apps: CampaignApp[]
|
||||
}
|
||||
|
||||
interface BoosterStat {
|
||||
date: string
|
||||
nm: number
|
||||
avg_position: number
|
||||
}
|
||||
|
||||
interface CampaignInterval {
|
||||
begin: string
|
||||
end: string
|
||||
}
|
||||
|
||||
interface CampaignStats {
|
||||
advertId: number
|
||||
views: number
|
||||
clicks: number
|
||||
ctr: number
|
||||
cpc: number
|
||||
sum: number
|
||||
atbs: number
|
||||
orders: number
|
||||
cr: number
|
||||
shks: number
|
||||
sum_price: number
|
||||
interval?: CampaignInterval
|
||||
days: CampaignDay[]
|
||||
boosterStats: BoosterStat[]
|
||||
}
|
||||
|
||||
interface CampaignListItem {
|
||||
advertId: number
|
||||
changeTime: string
|
||||
}
|
||||
|
||||
interface CampaignGroup {
|
||||
type: number
|
||||
status: number
|
||||
count: number
|
||||
advert_list: CampaignListItem[]
|
||||
}
|
||||
|
||||
interface CampaignsListData {
|
||||
adverts: CampaignGroup[]
|
||||
all: number
|
||||
}
|
||||
|
||||
// Компонент компактного селектора кампаний
|
||||
const CompactCampaignSelector = ({
|
||||
onCampaignsSelected,
|
||||
selectedCampaigns,
|
||||
loading: statsLoading
|
||||
}: {
|
||||
onCampaignsSelected: (ids: number[]) => void,
|
||||
selectedCampaigns: number[],
|
||||
loading: boolean
|
||||
}) => {
|
||||
const [isExpanded, setIsExpanded] = useState(true) // Автоматически разворачиваем для удобства
|
||||
const [showManualInput, setShowManualInput] = useState(false)
|
||||
const [manualIds, setManualIds] = useState('')
|
||||
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set(selectedCampaigns))
|
||||
const [filterType, setFilterType] = useState<number | 'all'>('all')
|
||||
const [filterStatus, setFilterStatus] = useState<number | 'all'>('all')
|
||||
|
||||
const { data: campaignsData, loading, error } = useQuery(GET_WILDBERRIES_CAMPAIGNS_LIST, {
|
||||
errorPolicy: 'all'
|
||||
})
|
||||
|
||||
const campaigns = campaignsData?.getWildberriesCampaignsList?.data?.adverts || []
|
||||
|
||||
// Автоматически выбираем все доступные кампании при загрузке данных
|
||||
useEffect(() => {
|
||||
if (campaigns.length > 0 && selectedIds.size === 0) {
|
||||
const allCampaigns = campaigns
|
||||
.flatMap((group: CampaignGroup) => group.advert_list.map((item: CampaignListItem) => item.advertId))
|
||||
|
||||
if (allCampaigns.length > 0) {
|
||||
setSelectedIds(new Set(allCampaigns))
|
||||
// Автоматически загружаем статистику для всех кампаний
|
||||
onCampaignsSelected(allCampaigns)
|
||||
}
|
||||
}
|
||||
}, [campaigns, onCampaignsSelected])
|
||||
|
||||
// Функции для получения названий типов и статусов
|
||||
const getCampaignTypeName = (type: number) => {
|
||||
const types: Record<number, string> = {
|
||||
4: 'Авто',
|
||||
5: 'Фразы',
|
||||
6: 'Предмет',
|
||||
7: 'Бренд',
|
||||
8: 'Медиа',
|
||||
9: 'Карусель'
|
||||
}
|
||||
return types[type] || `Тип ${type}`
|
||||
}
|
||||
|
||||
const getCampaignStatusName = (status: number) => {
|
||||
const statuses: Record<number, string> = {
|
||||
7: 'Завершена',
|
||||
8: 'Отклонена',
|
||||
9: 'Активна',
|
||||
11: 'На паузе'
|
||||
}
|
||||
return statuses[status] || `Статус ${status}`
|
||||
}
|
||||
|
||||
const getStatusColor = (status: number) => {
|
||||
const colors: Record<number, string> = {
|
||||
9: 'text-green-400',
|
||||
11: 'text-yellow-400',
|
||||
7: 'text-gray-400',
|
||||
8: 'text-red-400'
|
||||
}
|
||||
return colors[status] || 'text-white'
|
||||
}
|
||||
|
||||
// Фильтрация кампаний
|
||||
const filteredCampaigns = campaigns.filter((group: CampaignGroup) =>
|
||||
(filterType === 'all' || group.type === filterType) &&
|
||||
(filterStatus === 'all' || group.status === filterStatus)
|
||||
)
|
||||
|
||||
const handleCampaignToggle = (campaignId: number) => {
|
||||
const newSelected = new Set(selectedIds)
|
||||
if (newSelected.has(campaignId)) {
|
||||
newSelected.delete(campaignId)
|
||||
} else {
|
||||
newSelected.add(campaignId)
|
||||
}
|
||||
setSelectedIds(newSelected)
|
||||
}
|
||||
|
||||
const handleSelectAll = (group: CampaignGroup) => {
|
||||
const newSelected = new Set(selectedIds)
|
||||
const groupIds = group.advert_list.map((item: CampaignListItem) => item.advertId)
|
||||
const allSelected = groupIds.every((id: number) => newSelected.has(id))
|
||||
|
||||
if (allSelected) {
|
||||
groupIds.forEach(id => newSelected.delete(id))
|
||||
} else {
|
||||
groupIds.forEach(id => newSelected.add(id))
|
||||
}
|
||||
setSelectedIds(newSelected)
|
||||
}
|
||||
|
||||
const handleApplySelection = () => {
|
||||
if (showManualInput && manualIds.trim()) {
|
||||
const ids = manualIds.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id))
|
||||
onCampaignsSelected(ids)
|
||||
} else {
|
||||
onCampaignsSelected(Array.from(selectedIds))
|
||||
}
|
||||
}
|
||||
|
||||
const uniqueTypes = [...new Set(campaigns.map((group: CampaignGroup) => group.type))] as number[]
|
||||
const uniqueStatuses = [...new Set(campaigns.map((group: CampaignGroup) => group.status))] as number[]
|
||||
|
||||
return (
|
||||
<Card className="glass-card p-3">
|
||||
<div className="space-y-3">
|
||||
{/* Компактный заголовок */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="h-7 px-2 text-white hover:bg-white/10"
|
||||
>
|
||||
{isExpanded ? <Minimize2 className="h-3 w-3" /> : <BarChart3 className="h-3 w-3" />}
|
||||
<span className="ml-1 text-sm">Кампании</span>
|
||||
</Button>
|
||||
<Badge variant="outline" className="border-white/20 text-white text-xs">
|
||||
{selectedIds.size}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowManualInput(!showManualInput)}
|
||||
className="h-7 px-2 text-xs text-white/60 hover:bg-white/10"
|
||||
>
|
||||
{showManualInput ? 'Список' : 'Ручной'}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleApplySelection}
|
||||
disabled={statsLoading || (showManualInput ? !manualIds.trim() : selectedIds.size === 0)}
|
||||
size="sm"
|
||||
className="h-7 px-3 bg-blue-600 hover:bg-blue-700 text-white text-xs"
|
||||
>
|
||||
{statsLoading ? (
|
||||
<div className="animate-spin rounded-full h-3 w-3 border-b border-white" />
|
||||
) : (
|
||||
<>
|
||||
<Eye className="h-3 w-3 mr-1" />
|
||||
{selectedIds.size > 0 ? `Загрузить (${selectedIds.size})` : 'Выбрать'}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Развернутый контент */}
|
||||
{isExpanded && (
|
||||
<div className="space-y-3">
|
||||
{showManualInput ? (
|
||||
<Input
|
||||
placeholder="ID через запятую: 12345, 67890"
|
||||
value={manualIds}
|
||||
onChange={(e) => setManualIds(e.target.value)}
|
||||
className="h-8 bg-white/5 border-white/20 text-white placeholder:text-white/40 text-xs"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{/* Компактные фильтры */}
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<select
|
||||
value={filterType}
|
||||
onChange={(e) => setFilterType(e.target.value === 'all' ? 'all' : parseInt(e.target.value))}
|
||||
className="h-7 bg-white/5 border border-white/20 rounded px-2 text-white text-xs"
|
||||
>
|
||||
<option value="all">Все типы</option>
|
||||
{uniqueTypes.map((type: number) => (
|
||||
<option key={type} value={type}>{getCampaignTypeName(type)}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={filterStatus}
|
||||
onChange={(e) => setFilterStatus(e.target.value === 'all' ? 'all' : parseInt(e.target.value))}
|
||||
className="h-7 bg-white/5 border border-white/20 rounded px-2 text-white text-xs"
|
||||
>
|
||||
<option value="all">Все статусы</option>
|
||||
{uniqueStatuses.map((status: number) => (
|
||||
<option key={status} value={status}>{getCampaignStatusName(status)}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Компактный список кампаний */}
|
||||
{loading ? (
|
||||
<Skeleton className="h-20 bg-white/10" />
|
||||
) : error ? (
|
||||
<Alert className="bg-red-500/10 border-red-500/30 text-red-400 py-2">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
<AlertDescription className="text-xs">
|
||||
Ошибка: {error.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : (
|
||||
<div className="max-h-32 overflow-y-auto space-y-2">
|
||||
{filteredCampaigns.map((group: CampaignGroup) => (
|
||||
<div key={`${group.type}-${group.status}`} className="bg-white/5 rounded p-2">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={group.advert_list.every(item => selectedIds.has(item.advertId))}
|
||||
onCheckedChange={() => handleSelectAll(group)}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
<span className="text-xs font-medium text-white">
|
||||
{getCampaignTypeName(group.type)}
|
||||
</span>
|
||||
<span className={`text-xs ${getStatusColor(group.status)}`}>
|
||||
{getCampaignStatusName(group.status)}
|
||||
</span>
|
||||
<Badge variant="outline" className="border-white/20 text-white text-xs px-1 py-0">
|
||||
{group.count}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-1 ml-4">
|
||||
{group.advert_list.map((campaign) => (
|
||||
<div
|
||||
key={campaign.advertId}
|
||||
className="flex items-center gap-1 p-1 bg-white/5 rounded cursor-pointer hover:bg-white/10 text-xs"
|
||||
onClick={() => handleCampaignToggle(campaign.advertId)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={selectedIds.has(campaign.advertId)}
|
||||
onCheckedChange={() => handleCampaignToggle(campaign.advertId)}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
<span className="text-white truncate">#{campaign.advertId}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export function AdvertisingTab({ selectedPeriod, useCustomDates, startDate, endDate }: CampaignStatsProps) {
|
||||
onUpdateExternalAd,
|
||||
onGenerateLink
|
||||
}: {
|
||||
dailyData: DailyAdvertisingData[],
|
||||
productPhotos: Map<number, string>,
|
||||
generatedLinksData: Record<string, GeneratedLink[]>,
|
||||
onAddExternalAd: (date: string, ad: Omit<ExternalAd, 'id'>) => void,
|
||||
onRemoveExternalAd: (date: string, adId: string) => void,
|
||||
onUpdateExternalAd: (date: string, adId: string, updates: Partial<ExternalAd>) => void,
|
||||
onGenerateLink: (date: string, adId: string, adName: string, adUrl: string) => void
|
||||
}) => {
|
||||
const [expandedDays, setExpandedDays] = useState<Set<string>>(new Set())
|
||||
const [expandedProducts, setExpandedProducts] = useState<Set<string>>(new Set())
|
||||
const [newExternalAd, setNewExternalAd] = useState({ name: '', url: '', cost: '', productId: '' })
|
||||
const [showAddForm, setShowAddForm] = useState<string | null>(null) // Показываем форму для конкретного товара
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
if (value === 0) return '—'
|
||||
if (value < 100) {
|
||||
return `${value.toFixed(2)}₽`
|
||||
}
|
||||
return new Intl.NumberFormat('ru-RU', {
|
||||
style: 'currency',
|
||||
currency: 'RUB',
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
}
|
||||
|
||||
const formatNumber = (value: number) => {
|
||||
return value > 0 ? new Intl.NumberFormat('ru-RU').format(value) : '—'
|
||||
}
|
||||
|
||||
const toggleDay = (date: string) => {
|
||||
const newExpanded = new Set(expandedDays)
|
||||
if (newExpanded.has(date)) {
|
||||
newExpanded.delete(date)
|
||||
} else {
|
||||
newExpanded.add(date)
|
||||
}
|
||||
setExpandedDays(newExpanded)
|
||||
}
|
||||
|
||||
const toggleProduct = (date: string, nmId: number) => {
|
||||
const key = `${date}-${nmId}`
|
||||
const newExpanded = new Set(expandedProducts)
|
||||
if (newExpanded.has(key)) {
|
||||
newExpanded.delete(key)
|
||||
} else {
|
||||
newExpanded.add(key)
|
||||
}
|
||||
setExpandedProducts(newExpanded)
|
||||
}
|
||||
|
||||
const handleAddExternalAdLocal = (date: string, nmId: number) => {
|
||||
console.log('handleAddExternalAdLocal called:', { date, nmId, newExternalAd })
|
||||
|
||||
if (newExternalAd.name && newExternalAd.url && newExternalAd.cost) {
|
||||
console.log('Calling onAddExternalAd with:', {
|
||||
date,
|
||||
ad: {
|
||||
name: newExternalAd.name,
|
||||
url: newExternalAd.url,
|
||||
cost: parseFloat(newExternalAd.cost) || 0
|
||||
}
|
||||
})
|
||||
|
||||
onAddExternalAd(date, {
|
||||
name: newExternalAd.name,
|
||||
url: newExternalAd.url,
|
||||
cost: parseFloat(newExternalAd.cost) || 0
|
||||
})
|
||||
setNewExternalAd({ name: '', url: '', cost: '', productId: '' })
|
||||
setShowAddForm(null)
|
||||
} else {
|
||||
console.log('Missing required fields:', {
|
||||
name: newExternalAd.name,
|
||||
url: newExternalAd.url,
|
||||
cost: newExternalAd.cost
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white/5 rounded-lg border border-white/10 overflow-hidden">
|
||||
{/* Фильтры */}
|
||||
<div className="p-4 border-b border-white/10">
|
||||
<div className="flex gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="wb-ads"
|
||||
checked={showWbAds}
|
||||
onCheckedChange={setShowWbAds}
|
||||
className="border-white/30"
|
||||
/>
|
||||
<Label htmlFor="wb-ads" className="text-white/80 text-sm">Реклама ВБ</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="external-ads"
|
||||
checked={showExternalAds}
|
||||
onCheckedChange={setShowExternalAds}
|
||||
className="border-white/30"
|
||||
/>
|
||||
<Label htmlFor="external-ads" className="text-white/80 text-sm">Реклама внешняя</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Заголовок таблицы */}
|
||||
<div className="bg-purple-600/20 border-b border-white/10">
|
||||
<div className="grid grid-cols-5 gap-4 p-3 text-white text-sm font-medium">
|
||||
<div>Дата</div>
|
||||
<div className="text-center">Сумма (руб)</div>
|
||||
<div className="text-center">Заказы (ед)</div>
|
||||
<div className="text-center">Реклама ВБ</div>
|
||||
<div className="text-center">Реклама внешняя</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Строки таблицы */}
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{dailyData.map((day) => {
|
||||
// Подсчитываем суммы за день
|
||||
const dayWbCost = day.products.reduce((sum, product) => sum + product.totalCost, 0)
|
||||
const dayExternalCost = day.products.reduce((sum, product) =>
|
||||
sum + product.advertising.externalAds.reduce((adSum, ad) => adSum + ad.cost, 0), 0)
|
||||
const dayTotalCost = dayWbCost + dayExternalCost
|
||||
const dayOrders = day.totalOrders
|
||||
|
||||
return (
|
||||
<div key={day.date} className="grid grid-cols-5 gap-4 p-3 border-b border-white/5 hover:bg-white/5 text-white/80 text-sm">
|
||||
<div className="font-medium">{day.date}</div>
|
||||
<div className="text-center">{formatCurrency(dayTotalCost)}</div>
|
||||
<div className="text-center">{dayOrders}</div>
|
||||
<div className="text-center">
|
||||
{showWbAds ? formatCurrency(dayWbCost) : '—'}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
{showExternalAds ? formatCurrency(dayExternalCost) : '—'}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Старый компонент (для совместимости)
|
||||
const UltraCompactCampaignTable = ({
|
||||
campaigns,
|
||||
expandedCampaigns,
|
||||
onToggleExpand,
|
||||
productPhotos
|
||||
}: {
|
||||
campaigns: CampaignStats[],
|
||||
expandedCampaigns: Set<number>,
|
||||
onToggleExpand: (id: number) => void,
|
||||
productPhotos: Map<number, string>
|
||||
}) => {
|
||||
const [sortField, setSortField] = useState<keyof CampaignStats>('advertId')
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
if (value === 0) return '—'
|
||||
if (value < 1000) return `${value.toFixed(2)}₽`
|
||||
if (value < 1000000) return `${(value / 1000).toFixed(1)}K₽`
|
||||
return `${(value / 1000000).toFixed(1)}M₽`
|
||||
}
|
||||
|
||||
const formatNumber = (value: number) => {
|
||||
if (value === 0) return '—'
|
||||
if (value < 1000) return value.toString()
|
||||
if (value < 1000000) return `${(value / 1000).toFixed(1)}K`
|
||||
return `${(value / 1000000).toFixed(1)}M`
|
||||
}
|
||||
|
||||
const formatPercent = (value: number) => {
|
||||
return value === 0 ? '—' : `${value.toFixed(1)}%`
|
||||
}
|
||||
|
||||
const getAppTypeIcon = (appType: number) => {
|
||||
const iconClass = "h-3 w-3"
|
||||
switch (appType) {
|
||||
case 1: return <Smartphone className={`${iconClass} text-blue-400`} />
|
||||
case 2: return <Monitor className={`${iconClass} text-green-400`} />
|
||||
case 3: return <Globe className={`${iconClass} text-purple-400`} />
|
||||
case 32: return <Monitor className={`${iconClass} text-emerald-400`} />
|
||||
case 64: return <Globe className={`${iconClass} text-amber-400`} />
|
||||
default: return <Target className={`${iconClass} text-gray-400`} />
|
||||
}
|
||||
}
|
||||
|
||||
const sortedCampaigns = [...campaigns].sort((a, b) => {
|
||||
const aVal = a[sortField] as number
|
||||
const bVal = b[sortField] as number
|
||||
return sortDirection === 'asc' ? aVal - bVal : bVal - aVal
|
||||
})
|
||||
|
||||
const handleSort = (field: keyof CampaignStats) => {
|
||||
if (sortField === field) {
|
||||
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
|
||||
} else {
|
||||
setSortField(field)
|
||||
setSortDirection('desc')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{/* Сверх-компактный заголовок таблицы */}
|
||||
<div className="grid grid-cols-12 gap-1 p-2 bg-white/10 rounded text-xs font-medium text-white/80">
|
||||
<div
|
||||
className="col-span-2 flex items-center gap-1 cursor-pointer hover:text-white"
|
||||
onClick={() => handleSort('advertId')}
|
||||
>
|
||||
Товары
|
||||
<ArrowUpDown className="h-3 w-3" />
|
||||
</div>
|
||||
<div
|
||||
className="text-center cursor-pointer hover:text-white"
|
||||
onClick={() => handleSort('views')}
|
||||
>
|
||||
👁
|
||||
</div>
|
||||
<div
|
||||
className="text-center cursor-pointer hover:text-white"
|
||||
onClick={() => handleSort('clicks')}
|
||||
>
|
||||
🖱
|
||||
</div>
|
||||
<div
|
||||
className="text-center cursor-pointer hover:text-white"
|
||||
onClick={() => handleSort('ctr')}
|
||||
>
|
||||
CTR
|
||||
</div>
|
||||
<div
|
||||
className="text-center cursor-pointer hover:text-white"
|
||||
onClick={() => handleSort('cpc')}
|
||||
>
|
||||
CPC
|
||||
</div>
|
||||
<div
|
||||
className="text-center cursor-pointer hover:text-white"
|
||||
onClick={() => handleSort('sum')}
|
||||
>
|
||||
💰
|
||||
</div>
|
||||
<div
|
||||
className="text-center cursor-pointer hover:text-white"
|
||||
onClick={() => handleSort('orders')}
|
||||
>
|
||||
📦
|
||||
</div>
|
||||
<div
|
||||
className="text-center cursor-pointer hover:text-white"
|
||||
onClick={() => handleSort('cr')}
|
||||
>
|
||||
CR
|
||||
</div>
|
||||
<div
|
||||
className="text-center cursor-pointer hover:text-white"
|
||||
onClick={() => handleSort('shks')}
|
||||
>
|
||||
шт
|
||||
</div>
|
||||
<div
|
||||
className="col-span-2 text-center cursor-pointer hover:text-white"
|
||||
onClick={() => handleSort('sum_price')}
|
||||
>
|
||||
Выручка
|
||||
</div>
|
||||
<div className="text-center">ROI</div>
|
||||
</div>
|
||||
|
||||
{/* Строки кампаний */}
|
||||
{sortedCampaigns.map((campaign) => {
|
||||
const isExpanded = expandedCampaigns.has(campaign.advertId)
|
||||
const roi = campaign.sum > 0 ? ((campaign.sum_price - campaign.sum) / campaign.sum * 100) : 0
|
||||
|
||||
return (
|
||||
<div key={campaign.advertId} className="space-y-1">
|
||||
{/* Основная строка кампании с товарами */}
|
||||
<div
|
||||
className="grid grid-cols-12 gap-1 p-2 bg-white/5 rounded border border-white/10 hover:bg-white/10 transition-colors cursor-pointer text-xs"
|
||||
onClick={() => onToggleExpand(campaign.advertId)}
|
||||
>
|
||||
<div className="col-span-2 flex items-center gap-1">
|
||||
{isExpanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
|
||||
<div className="flex flex-col gap-1 flex-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="font-medium text-white text-xs">#{campaign.advertId}</span>
|
||||
<Badge variant="outline" className="border-white/20 text-white text-xs px-1 py-0">
|
||||
{campaign.days.length}д
|
||||
</Badge>
|
||||
</div>
|
||||
{/* Мини-карточки товаров */}
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{campaign.days
|
||||
.flatMap(day => day.apps?.flatMap(app => app.nm) || [])
|
||||
.reduce((unique: CampaignProduct[], product) => {
|
||||
if (!unique.find(p => p.nmId === product.nmId)) {
|
||||
unique.push(product)
|
||||
}
|
||||
return unique
|
||||
}, [])
|
||||
.slice(0, 3)
|
||||
.map((product) => (
|
||||
<div
|
||||
key={product.nmId}
|
||||
className="bg-white/10 rounded px-1 py-0.5 text-xs text-white/80 hover:bg-white/20 transition-colors"
|
||||
title={product.name}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<Package className="h-2 w-2" />
|
||||
<span className="truncate max-w-12">
|
||||
{product.name.length > 8 ? `${product.name.slice(0, 8)}...` : product.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{campaign.days
|
||||
.flatMap(day => day.apps?.flatMap(app => app.nm) || [])
|
||||
.reduce((unique: CampaignProduct[], product) => {
|
||||
if (!unique.find(p => p.nmId === product.nmId)) {
|
||||
unique.push(product)
|
||||
}
|
||||
return unique
|
||||
}, []).length > 3 && (
|
||||
<div className="bg-white/5 rounded px-1 py-0.5 text-xs text-white/60">
|
||||
+{campaign.days
|
||||
.flatMap(day => day.apps?.flatMap(app => app.nm) || [])
|
||||
.reduce((unique: CampaignProduct[], product) => {
|
||||
if (!unique.find(p => p.nmId === product.nmId)) {
|
||||
unique.push(product)
|
||||
}
|
||||
return unique
|
||||
}, []).length - 3}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-white">{formatNumber(campaign.views)}</div>
|
||||
<div className="text-center text-white">{formatNumber(campaign.clicks)}</div>
|
||||
<div className="text-center text-white">{formatPercent(campaign.ctr)}</div>
|
||||
<div className="text-center text-white">{formatCurrency(campaign.cpc)}</div>
|
||||
<div className="text-center text-white">{formatCurrency(campaign.sum)}</div>
|
||||
<div className="text-center text-white">{formatNumber(campaign.orders)}</div>
|
||||
<div className="text-center text-white">{formatPercent(campaign.cr)}</div>
|
||||
<div className="text-center text-white">{formatNumber(campaign.shks)}</div>
|
||||
<div className="col-span-2 text-center text-white">{formatCurrency(campaign.sum_price)}</div>
|
||||
<div className={`text-center font-medium ${roi > 0 ? 'text-green-400' : roi < 0 ? 'text-red-400' : 'text-gray-400'}`}>
|
||||
{roi === 0 ? '—' : `${roi > 0 ? '+' : ''}${roi.toFixed(0)}%`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Развернутое содержимое */}
|
||||
{isExpanded && (
|
||||
<div className="ml-4 space-y-2">
|
||||
{/* Товары в кампании - полноценные карточки */}
|
||||
{campaign.days.some(day => day.apps?.some(app => app.nm && app.nm.length > 0)) && (
|
||||
<div className="bg-white/2 rounded p-3 border border-white/5">
|
||||
<h4 className="text-sm font-medium text-white mb-3 flex items-center gap-2">
|
||||
<Package className="h-4 w-4" />
|
||||
Товары в кампании
|
||||
</h4>
|
||||
|
||||
<div className="space-y-2">
|
||||
{campaign.days
|
||||
.flatMap(day => day.apps?.flatMap(app => app.nm) || [])
|
||||
.reduce((unique: CampaignProduct[], product) => {
|
||||
const existing = unique.find(p => p.nmId === product.nmId)
|
||||
if (existing) {
|
||||
existing.views += product.views
|
||||
existing.clicks += product.clicks
|
||||
existing.sum += product.sum
|
||||
existing.orders += product.orders
|
||||
existing.sum_price += product.sum_price
|
||||
existing.shks += product.shks
|
||||
existing.ctr = existing.views > 0 ? (existing.clicks / existing.views) * 100 : 0
|
||||
existing.cr = existing.clicks > 0 ? (existing.orders / existing.clicks) * 100 : 0
|
||||
existing.cpc = existing.clicks > 0 ? existing.sum / existing.clicks : 0
|
||||
} else {
|
||||
unique.push({ ...product })
|
||||
}
|
||||
return unique
|
||||
}, [])
|
||||
.sort((a, b) => b.sum - a.sum)
|
||||
.map((product) => {
|
||||
const roi = product.sum > 0 ? ((product.sum_price - product.sum) / product.sum * 100) : 0
|
||||
|
||||
// Получаем фото из API или используем fallback
|
||||
const photoUrl = productPhotos.get(product.nmId)
|
||||
|
||||
return (
|
||||
<div key={product.nmId} className="flex items-center gap-3 bg-white/5 rounded-lg p-3 border border-white/10 hover:bg-white/10 transition-colors">
|
||||
{/* Фото товара */}
|
||||
<div className="relative flex-shrink-0">
|
||||
{photoUrl ? (
|
||||
<img
|
||||
src={photoUrl}
|
||||
alt={product.name}
|
||||
className="w-16 h-16 object-cover rounded-lg bg-white/10"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement
|
||||
target.style.display = 'none'
|
||||
const placeholder = target.nextElementSibling as HTMLElement
|
||||
if (placeholder) placeholder.style.display = 'flex'
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<div className={`w-16 h-16 bg-white/10 rounded-lg items-center justify-center ${photoUrl ? 'hidden' : 'flex'}`}>
|
||||
<Package className="h-6 w-6 text-white/40" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Основная информация о товаре */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex-1 min-w-0 pr-2">
|
||||
<h5 className="text-white font-medium text-sm mb-1 overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }} title={product.name}>
|
||||
{product.name}
|
||||
</h5>
|
||||
<p className="text-white/60 text-xs">
|
||||
Артикул WB: {product.nmId}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ROI badge */}
|
||||
<div className={`px-2 py-1 rounded text-xs font-medium flex-shrink-0 ${
|
||||
roi > 0 ? 'bg-green-500 text-white' :
|
||||
roi < 0 ? 'bg-red-500 text-white' :
|
||||
'bg-gray-500 text-white'
|
||||
}`}>
|
||||
{roi === 0 ? '—' : `${roi > 0 ? '+' : ''}${roi.toFixed(0)}%`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Статистика в строку */}
|
||||
<div className="grid grid-cols-4 md:grid-cols-7 gap-2 text-xs">
|
||||
<div className="bg-white/5 rounded p-2 text-center">
|
||||
<div className="text-white/60 mb-1">Показы</div>
|
||||
<div className="text-white font-medium">{formatNumber(product.views)}</div>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded p-2 text-center">
|
||||
<div className="text-white/60 mb-1">Клики</div>
|
||||
<div className="text-white font-medium">{formatNumber(product.clicks)}</div>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded p-2 text-center">
|
||||
<div className="text-white/60 mb-1">CTR</div>
|
||||
<div className="text-white font-medium">{formatPercent(product.ctr)}</div>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded p-2 text-center">
|
||||
<div className="text-white/60 mb-1">Затраты</div>
|
||||
<div className="text-white font-medium">{formatCurrency(product.sum)}</div>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded p-2 text-center">
|
||||
<div className="text-white/60 mb-1">CPC</div>
|
||||
<div className="text-white font-medium">{formatCurrency(product.cpc)}</div>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded p-2 text-center">
|
||||
<div className="text-white/60 mb-1">Заказы</div>
|
||||
<div className="text-white font-medium">{formatNumber(product.orders)}</div>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded p-2 text-center">
|
||||
<div className="text-white/60 mb-1">CR</div>
|
||||
<div className="text-white font-medium">{formatPercent(product.cr)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Компактная статистика по дням */}
|
||||
{campaign.days.length > 0 && (
|
||||
<div className="bg-white/2 rounded p-2 border border-white/5">
|
||||
<h4 className="text-xs font-medium text-white/70 mb-2 flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
По дням ({campaign.days.length})
|
||||
</h4>
|
||||
|
||||
<div className="space-y-1 max-h-32 overflow-y-auto">
|
||||
{campaign.days.map((day, dayIndex) => (
|
||||
<div key={dayIndex} className="grid grid-cols-11 gap-1 p-1 bg-white/5 rounded text-xs">
|
||||
<div className="col-span-2 text-white/80">
|
||||
{new Date(day.date).toLocaleDateString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit'
|
||||
})}
|
||||
</div>
|
||||
<div className="text-center text-white">{formatNumber(day.views)}</div>
|
||||
<div className="text-center text-white">{formatNumber(day.clicks)}</div>
|
||||
<div className="text-center text-white">{formatPercent(day.ctr)}</div>
|
||||
<div className="text-center text-white">{formatCurrency(day.cpc)}</div>
|
||||
<div className="text-center text-white">{formatCurrency(day.sum)}</div>
|
||||
<div className="text-center text-white">{formatNumber(day.orders)}</div>
|
||||
<div className="text-center text-white">{formatPercent(day.cr)}</div>
|
||||
<div className="text-center text-white">{formatNumber(day.shks)}</div>
|
||||
<div className="text-center text-white">{formatCurrency(day.sum_price)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Компактная статистика по платформам */}
|
||||
{campaign.days.some(day => day.apps && day.apps.length > 0) && (
|
||||
<div className="bg-white/2 rounded p-2 border border-white/5">
|
||||
<h4 className="text-xs font-medium text-white/70 mb-2 flex items-center gap-1">
|
||||
<BarChart3 className="h-3 w-3" />
|
||||
Платформы
|
||||
</h4>
|
||||
|
||||
<div className="space-y-1">
|
||||
{campaign.days.flatMap(day => day.apps || [])
|
||||
.reduce((acc: CampaignApp[], app) => {
|
||||
const existing = acc.find(a => a.appType === app.appType)
|
||||
if (existing) {
|
||||
existing.views += app.views
|
||||
existing.clicks += app.clicks
|
||||
existing.sum += app.sum
|
||||
existing.orders += app.orders
|
||||
existing.sum_price += app.sum_price
|
||||
} else {
|
||||
acc.push({ ...app })
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
.map((app, appIndex) => (
|
||||
<div key={appIndex} className="grid grid-cols-10 gap-1 p-1 bg-white/5 rounded text-xs">
|
||||
<div className="col-span-2 flex items-center gap-1">
|
||||
{getAppTypeIcon(app.appType)}
|
||||
<span className="text-white/80 truncate">
|
||||
{app.appType === 1 ? 'Мобайл' :
|
||||
app.appType === 32 ? 'Десктоп' :
|
||||
app.appType === 64 ? 'Моб.WB' : `Тип${app.appType}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-center text-white">{formatNumber(app.views)}</div>
|
||||
<div className="text-center text-white">{formatNumber(app.clicks)}</div>
|
||||
<div className="text-center text-white">{formatPercent(app.ctr)}</div>
|
||||
<div className="text-center text-white">{formatCurrency(app.sum)}</div>
|
||||
<div className="text-center text-white">{formatNumber(app.orders)}</div>
|
||||
<div className="text-center text-white">{formatPercent(app.cr)}</div>
|
||||
<div className="text-center text-white">{formatNumber(app.shks)}</div>
|
||||
<div className="text-center text-white">{formatCurrency(app.sum_price)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Позиции товаров */}
|
||||
{campaign.boosterStats.length > 0 && (
|
||||
<div className="bg-white/2 rounded p-2 border border-white/5">
|
||||
<h4 className="text-xs font-medium text-white/70 mb-2 flex items-center gap-1">
|
||||
<TrendingUp className="h-3 w-3" />
|
||||
Позиции
|
||||
</h4>
|
||||
<div className="grid grid-cols-3 gap-1">
|
||||
{campaign.boosterStats.slice(0, 6).map((booster, index) => (
|
||||
<div key={index} className="bg-white/5 rounded p-1 text-xs">
|
||||
<div className="text-white/60">
|
||||
{new Date(booster.date).toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' })}
|
||||
</div>
|
||||
<div className="text-white font-medium">
|
||||
#{booster.avg_position}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function AdvertisingTab({ selectedPeriod, useCustomDates, startDate, endDate }: CampaignStatsProps) {
|
||||
const { user } = useAuth()
|
||||
|
||||
// Состояния для фильтров
|
||||
const [showWbAds, setShowWbAds] = useState(true)
|
||||
const [showExternalAds, setShowExternalAds] = useState(true)
|
||||
|
||||
// Состояния для раскрытия строк
|
||||
const [expandedDays, setExpandedDays] = useState<Set<string>>(new Set())
|
||||
const [expandedProducts, setExpandedProducts] = useState<Set<string>>(new Set())
|
||||
const [expandedCampaigns, setExpandedCampaigns] = useState<Set<number>>(new Set())
|
||||
|
||||
// Состояние для формы добавления внешней рекламы
|
||||
const [showAddForm, setShowAddForm] = useState<string | null>(null)
|
||||
const [newExternalAd, setNewExternalAd] = useState({
|
||||
name: '',
|
||||
url: '',
|
||||
cost: ''
|
||||
})
|
||||
|
||||
const [campaignStats, setCampaignStats] = useState<CampaignStats[]>([])
|
||||
const [productPhotos, setProductPhotos] = useState<Map<number, string>>(new Map())
|
||||
const [dailyData, setDailyData] = useState<DailyAdvertisingData[]>([])
|
||||
const [generatedLinksData, setGeneratedLinksData] = useState<Record<string, GeneratedLink[]>>({})
|
||||
const prevCampaignStats = useRef<CampaignStats[]>([])
|
||||
|
||||
// Вычисляем диапазон дат для запроса внешней рекламы
|
||||
const getDateRange = () => {
|
||||
if (useCustomDates && startDate && endDate) {
|
||||
return { dateFrom: startDate, dateTo: endDate }
|
||||
}
|
||||
|
||||
const endDateCalc = new Date()
|
||||
const startDateCalc = new Date()
|
||||
|
||||
switch (selectedPeriod) {
|
||||
case 'week':
|
||||
startDateCalc.setDate(endDateCalc.getDate() - 7)
|
||||
break
|
||||
case 'month':
|
||||
startDateCalc.setMonth(endDateCalc.getMonth() - 1)
|
||||
break
|
||||
case 'quarter':
|
||||
startDateCalc.setMonth(endDateCalc.getMonth() - 3)
|
||||
break
|
||||
}
|
||||
|
||||
return {
|
||||
dateFrom: startDateCalc.toISOString().split('T')[0],
|
||||
dateTo: endDateCalc.toISOString().split('T')[0]
|
||||
}
|
||||
}
|
||||
|
||||
const { dateFrom, dateTo } = getDateRange()
|
||||
|
||||
// GraphQL запросы и мутации
|
||||
const { data: externalAdsData, loading: externalAdsLoading, error: externalAdsError, refetch: refetchExternalAds } = useQuery(GET_EXTERNAL_ADS, {
|
||||
variables: { dateFrom, dateTo },
|
||||
skip: !user,
|
||||
fetchPolicy: 'cache-and-network'
|
||||
})
|
||||
|
||||
const [createExternalAd] = useMutation(CREATE_EXTERNAL_AD, {
|
||||
onCompleted: () => {
|
||||
refetchExternalAds()
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Error creating external ad:', error)
|
||||
},
|
||||
})
|
||||
|
||||
const [deleteExternalAd] = useMutation(DELETE_EXTERNAL_AD, {
|
||||
onCompleted: () => {
|
||||
refetchExternalAds()
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Error deleting external ad:', error)
|
||||
},
|
||||
})
|
||||
|
||||
const [updateExternalAd] = useMutation(UPDATE_EXTERNAL_AD, {
|
||||
onCompleted: () => {
|
||||
refetchExternalAds()
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Error updating external ad:', error)
|
||||
},
|
||||
})
|
||||
|
||||
const [updateExternalAdClicks] = useMutation(UPDATE_EXTERNAL_AD_CLICKS, {
|
||||
onError: (error) => {
|
||||
console.error('Error updating external ad clicks:', error)
|
||||
},
|
||||
})
|
||||
|
||||
// Загружаем данные из localStorage только для ссылок (они остаются локальными)
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const savedLinksData = localStorage.getItem('advertisingLinksData')
|
||||
|
||||
if (savedLinksData) {
|
||||
try {
|
||||
const linksData = JSON.parse(savedLinksData)
|
||||
|
||||
// Удаляем дубликаты ссылок
|
||||
const cleanedLinksData: Record<string, GeneratedLink[]> = {}
|
||||
Object.keys(linksData).forEach(date => {
|
||||
const uniqueLinks = new Map<string, GeneratedLink>()
|
||||
linksData[date].forEach((link: GeneratedLink) => {
|
||||
const key = `${link.adId}-${link.adName}`
|
||||
if (!uniqueLinks.has(key) || link.clicks > (uniqueLinks.get(key)?.clicks || 0)) {
|
||||
uniqueLinks.set(key, link)
|
||||
}
|
||||
})
|
||||
cleanedLinksData[date] = Array.from(uniqueLinks.values())
|
||||
})
|
||||
|
||||
setGeneratedLinksData(cleanedLinksData)
|
||||
localStorage.setItem('advertisingLinksData', JSON.stringify(cleanedLinksData))
|
||||
} catch (error) {
|
||||
console.error('Error loading links data:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Загружаем статистику кликов
|
||||
const loadClickStatistics = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/track-click')
|
||||
const clickStats = await response.json()
|
||||
|
||||
// Получаем свежие данные из localStorage
|
||||
const savedLinksData = localStorage.getItem('advertisingLinksData')
|
||||
const currentLinksData = savedLinksData ? JSON.parse(savedLinksData) : {}
|
||||
|
||||
// Обновляем счетчики кликов в ссылках
|
||||
setGeneratedLinksData(prev => {
|
||||
const updated = { ...prev }
|
||||
Object.keys(updated).forEach(date => {
|
||||
updated[date] = updated[date].map(link => ({
|
||||
...link,
|
||||
clicks: clickStats[link.id] || link.clicks
|
||||
}))
|
||||
})
|
||||
|
||||
// Сохраняем обновленные ссылки
|
||||
localStorage.setItem('advertisingLinksData', JSON.stringify(updated))
|
||||
return updated
|
||||
})
|
||||
|
||||
// Обновляем клики в базе данных для внешней рекламы
|
||||
if (externalAdsData?.getExternalAds?.success && externalAdsData.getExternalAds.externalAds) {
|
||||
const promises = (externalAdsData.getExternalAds.externalAds as Array<{id: string, clicks: number}>).map((ad) => {
|
||||
// Находим соответствующую ссылку для этой рекламы
|
||||
const allLinks: GeneratedLink[] = Object.values(currentLinksData).flat() as GeneratedLink[]
|
||||
const adLink = allLinks.find(link => link.adId === ad.id)
|
||||
|
||||
if (adLink && clickStats[adLink.id] && clickStats[adLink.id] !== ad.clicks) {
|
||||
// Обновляем клики в БД только если они изменились
|
||||
return updateExternalAdClicks({
|
||||
variables: {
|
||||
id: ad.id,
|
||||
clicks: clickStats[adLink.id]
|
||||
}
|
||||
}).catch((error: unknown) => {
|
||||
console.error(`Error updating clicks for ad ${ad.id}:`, error)
|
||||
})
|
||||
}
|
||||
return Promise.resolve()
|
||||
})
|
||||
|
||||
await Promise.all(promises)
|
||||
|
||||
// Обновляем данные внешней рекламы после синхронизации
|
||||
refetchExternalAds()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading click statistics:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Загружаем статистику кликов периодически
|
||||
useEffect(() => {
|
||||
loadClickStatistics()
|
||||
const interval = setInterval(loadClickStatistics, 10000) // каждые 10 секунд
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
const { data: campaignsData, loading: campaignsLoading } = useQuery(GET_WILDBERRIES_CAMPAIGNS_LIST, {
|
||||
errorPolicy: 'all'
|
||||
})
|
||||
|
||||
const [getCampaignStats, { loading, error }] = useLazyQuery(GET_WILDBERRIES_CAMPAIGN_STATS, {
|
||||
onCompleted: (data) => {
|
||||
if (data.getWildberriesCampaignStats.success) {
|
||||
setCampaignStats(data.getWildberriesCampaignStats.data)
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Campaign stats error:', error)
|
||||
}
|
||||
})
|
||||
|
||||
// Загрузка фотографий товаров (точно как на складе WB)
|
||||
const loadProductPhotos = async (nmIds: number[]) => {
|
||||
if (!user?.organization?.apiKeys?.find(key => key.marketplace === 'WILDBERRIES')?.isActive) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const wbApiKey = user?.organization?.apiKeys?.find(key => key.marketplace === 'WILDBERRIES')
|
||||
|
||||
if (!wbApiKey?.isActive) {
|
||||
console.error('Advertising: API ключ Wildberries не настроен')
|
||||
return
|
||||
}
|
||||
|
||||
const validationData = wbApiKey.validationData as Record<string, string>
|
||||
const apiToken = validationData?.token ||
|
||||
validationData?.apiKey ||
|
||||
validationData?.key ||
|
||||
(wbApiKey as { apiKey?: string }).apiKey
|
||||
|
||||
if (!apiToken) {
|
||||
console.error('Advertising: Токен API не найден')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('Advertising: Loading product photos...')
|
||||
|
||||
// Используем точно тот же метод что и на складе
|
||||
const cards = await WildberriesService.getAllCards(apiToken).catch(() => [])
|
||||
console.log('Advertising: Loaded cards:', cards.length)
|
||||
|
||||
if (cards.length === 0) {
|
||||
console.error('Advertising: Нет карточек товаров в WB')
|
||||
return
|
||||
}
|
||||
|
||||
const newPhotos = new Map<number, string>()
|
||||
const uniqueNmIds = [...new Set(nmIds)]
|
||||
|
||||
cards.forEach(card => {
|
||||
if (uniqueNmIds.includes(card.nmID) && card.photos && Array.isArray(card.photos) && card.photos.length > 0) {
|
||||
const photo = card.photos[0]
|
||||
const photoUrl = photo.big || photo.c516x688 || photo.c246x328 || photo.tm || photo.square
|
||||
if (photoUrl) {
|
||||
newPhotos.set(card.nmID, photoUrl)
|
||||
console.log(`Advertising: Found photo for ${card.nmID}: ${photoUrl}`)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log(`Advertising: Loaded ${newPhotos.size} product photos`)
|
||||
setProductPhotos(prev => new Map([...prev, ...newPhotos]))
|
||||
|
||||
} catch (error) {
|
||||
console.error('Advertising: Error loading product photos:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Автоматически загружаем все доступные кампании
|
||||
useEffect(() => {
|
||||
if (campaignsData?.getWildberriesCampaignsList?.data?.adverts) {
|
||||
const campaigns = campaignsData.getWildberriesCampaignsList.data.adverts
|
||||
const allCampaignIds = campaigns
|
||||
.flatMap((group: CampaignGroup) => group.advert_list.map((item: CampaignListItem) => item.advertId))
|
||||
|
||||
if (allCampaignIds.length > 0) {
|
||||
handleCampaignsSelected(allCampaignIds)
|
||||
}
|
||||
}
|
||||
}, [campaignsData, selectedPeriod, useCustomDates, startDate, endDate])
|
||||
|
||||
// Преобразование данных кампаний в новый формат таблицы
|
||||
const convertCampaignDataToDailyData = (campaigns: CampaignStats[]): DailyAdvertisingData[] => {
|
||||
const dailyMap = new Map<string, DailyAdvertisingData>()
|
||||
|
||||
campaigns.forEach(campaign => {
|
||||
campaign.days.forEach(day => {
|
||||
const dateKey = day.date.split('T')[0] // Получаем только дату без времени
|
||||
|
||||
if (!dailyMap.has(dateKey)) {
|
||||
dailyMap.set(dateKey, {
|
||||
date: dateKey,
|
||||
totalSum: 0,
|
||||
totalOrders: 0,
|
||||
totalRevenue: 0,
|
||||
products: []
|
||||
})
|
||||
}
|
||||
|
||||
const dailyRecord = dailyMap.get(dateKey)!
|
||||
|
||||
// Добавляем товары с их рекламными кампаниями
|
||||
if (day.apps) {
|
||||
day.apps.forEach(app => {
|
||||
if (app.nm) {
|
||||
app.nm.forEach(product => {
|
||||
let existingProduct = dailyRecord.products.find(p => p.nmId === product.nmId)
|
||||
|
||||
if (!existingProduct) {
|
||||
// Создаем новый товар
|
||||
existingProduct = {
|
||||
nmId: product.nmId,
|
||||
name: product.name,
|
||||
totalViews: 0,
|
||||
totalClicks: 0,
|
||||
totalCost: 0,
|
||||
totalOrders: 0,
|
||||
totalRevenue: 0,
|
||||
advertising: {
|
||||
wbCampaigns: [],
|
||||
externalAds: []
|
||||
}
|
||||
}
|
||||
dailyRecord.products.push(existingProduct)
|
||||
}
|
||||
|
||||
// Суммируем данные товара
|
||||
existingProduct.totalViews += product.views
|
||||
existingProduct.totalClicks += product.clicks
|
||||
existingProduct.totalCost += product.sum
|
||||
existingProduct.totalOrders += product.orders
|
||||
existingProduct.totalRevenue += product.sum_price
|
||||
|
||||
// Добавляем данные ВБ кампании для этого товара
|
||||
const existingCampaign = existingProduct.advertising.wbCampaigns.find(c => c.campaignId === campaign.advertId)
|
||||
if (existingCampaign) {
|
||||
existingCampaign.views += product.views
|
||||
existingCampaign.clicks += product.clicks
|
||||
existingCampaign.cost += product.sum
|
||||
existingCampaign.orders += product.orders
|
||||
} else {
|
||||
existingProduct.advertising.wbCampaigns.push({
|
||||
campaignId: campaign.advertId,
|
||||
views: product.views,
|
||||
clicks: product.clicks,
|
||||
cost: product.sum,
|
||||
orders: product.orders
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// После создания структуры товаров, добавляем внешнюю рекламу из GraphQL данных
|
||||
const result = Array.from(dailyMap.values())
|
||||
|
||||
if (externalAdsData?.getExternalAds?.success && externalAdsData.getExternalAds.externalAds) {
|
||||
result.forEach(day => {
|
||||
const externalAdsForDay = externalAdsData.getExternalAds.externalAds.filter(
|
||||
(ad: ExternalAd & { date: string; nmId: string }) => ad.date === day.date
|
||||
)
|
||||
|
||||
if (externalAdsForDay.length > 0 && day.products.length > 0) {
|
||||
// Группируем внешнюю рекламу по nmId товара
|
||||
const adsByProduct = externalAdsForDay.reduce((acc: Record<string, ExternalAd[]>, ad: ExternalAd & { date: string; nmId: string }) => {
|
||||
if (!acc[ad.nmId]) acc[ad.nmId] = []
|
||||
acc[ad.nmId].push({
|
||||
id: ad.id,
|
||||
name: ad.name,
|
||||
url: ad.url,
|
||||
cost: ad.cost,
|
||||
clicks: ad.clicks || 0
|
||||
})
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
// Добавляем внешнюю рекламу к соответствующим товарам
|
||||
day.products.forEach(product => {
|
||||
if (adsByProduct[product.nmId.toString()]) {
|
||||
product.advertising.externalAds = adsByProduct[product.nmId.toString()]
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Обновляем общие суммы дня (ВБ реклама + внешняя реклама)
|
||||
result.forEach(day => {
|
||||
day.totalSum = day.products.reduce((sum, product) =>
|
||||
sum + product.totalCost + product.advertising.externalAds.reduce((adSum, ad) => adSum + ad.cost, 0), 0)
|
||||
day.totalOrders = day.products.reduce((sum, product) => sum + product.totalOrders, 0)
|
||||
day.totalRevenue = day.products.reduce((sum, product) => sum + product.totalRevenue, 0)
|
||||
})
|
||||
|
||||
return result.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Загружаем фотографии когда получаем статистику кампаний
|
||||
useEffect(() => {
|
||||
if (campaignStats.length > 0) {
|
||||
const nmIds = campaignStats
|
||||
.flatMap(campaign => campaign.days)
|
||||
.flatMap(day => day.apps?.flatMap(app => app.nm) || [])
|
||||
.map(product => product.nmId)
|
||||
|
||||
// Проверяем, есть ли новые nmIds, которых еще нет в productPhotos
|
||||
const newNmIds = nmIds.filter(nmId => !productPhotos.has(nmId))
|
||||
|
||||
if (newNmIds.length > 0) {
|
||||
console.log('Loading photos for new products:', newNmIds.length)
|
||||
loadProductPhotos(newNmIds)
|
||||
}
|
||||
|
||||
// Преобразуем данные в новый формат только если это первая загрузка или изменились кампании/внешняя реклама
|
||||
if (dailyData.length === 0 ||
|
||||
JSON.stringify(campaignStats) !== JSON.stringify(prevCampaignStats.current) ||
|
||||
externalAdsData) {
|
||||
const newDailyData = convertCampaignDataToDailyData(campaignStats)
|
||||
setDailyData(newDailyData)
|
||||
prevCampaignStats.current = campaignStats
|
||||
}
|
||||
}
|
||||
}, [campaignStats, externalAdsData]) // Добавляем externalAdsData в зависимости
|
||||
|
||||
const handleCampaignsSelected = (ids: number[]) => {
|
||||
if (ids.length === 0) return
|
||||
|
||||
let campaigns
|
||||
if (useCustomDates && startDate && endDate) {
|
||||
campaigns = ids.map(id => ({
|
||||
id,
|
||||
interval: {
|
||||
begin: startDate,
|
||||
end: endDate
|
||||
}
|
||||
}))
|
||||
} else {
|
||||
const endDateCalc = new Date()
|
||||
const startDateCalc = new Date()
|
||||
|
||||
switch (selectedPeriod) {
|
||||
case 'week':
|
||||
startDateCalc.setDate(endDateCalc.getDate() - 7)
|
||||
break
|
||||
case 'month':
|
||||
startDateCalc.setMonth(endDateCalc.getMonth() - 1)
|
||||
break
|
||||
case 'quarter':
|
||||
startDateCalc.setMonth(endDateCalc.getMonth() - 3)
|
||||
break
|
||||
}
|
||||
|
||||
campaigns = ids.map(id => ({
|
||||
id,
|
||||
interval: {
|
||||
begin: startDateCalc.toISOString().split('T')[0],
|
||||
end: endDateCalc.toISOString().split('T')[0]
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
getCampaignStats({
|
||||
variables: {
|
||||
input: { campaigns }
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const toggleCampaignExpanded = (campaignId: number) => {
|
||||
const newExpanded = new Set(expandedCampaigns)
|
||||
if (newExpanded.has(campaignId)) {
|
||||
newExpanded.delete(campaignId)
|
||||
} else {
|
||||
newExpanded.add(campaignId)
|
||||
}
|
||||
setExpandedCampaigns(newExpanded)
|
||||
}
|
||||
|
||||
// Обработчики для внешней рекламы
|
||||
const handleAddExternalAd = async (date: string, ad: Omit<ExternalAd, 'id'>) => {
|
||||
console.log('handleAddExternalAd called:', { date, ad })
|
||||
|
||||
try {
|
||||
// Находим nmId из первого товара дня (или можно передать отдельно)
|
||||
const dayData = dailyData.find(d => d.date === date)
|
||||
const nmId = dayData?.products[0]?.nmId?.toString() || '0'
|
||||
|
||||
await createExternalAd({
|
||||
variables: {
|
||||
input: {
|
||||
name: ad.name,
|
||||
url: ad.url,
|
||||
cost: ad.cost,
|
||||
date: date,
|
||||
nmId: nmId
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log('External ad created successfully')
|
||||
} catch (error) {
|
||||
console.error('Error creating external ad:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveExternalAd = async (date: string, adId: string) => {
|
||||
console.log('handleRemoveExternalAd called:', { date, adId })
|
||||
|
||||
try {
|
||||
await deleteExternalAd({
|
||||
variables: { id: adId }
|
||||
})
|
||||
|
||||
console.log('External ad deleted successfully')
|
||||
} catch (error) {
|
||||
console.error('Error deleting external ad:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateExternalAd = async (date: string, adId: string, updates: Partial<ExternalAd>) => {
|
||||
console.log('handleUpdateExternalAd called:', { date, adId, updates })
|
||||
|
||||
try {
|
||||
// Находим текущую рекламу для получения полных данных
|
||||
const currentAd = dailyData
|
||||
.find(d => d.date === date)
|
||||
?.products.flatMap(p => p.advertising.externalAds)
|
||||
.find(ad => ad.id === adId)
|
||||
|
||||
if (!currentAd) {
|
||||
console.error('External ad not found')
|
||||
return
|
||||
}
|
||||
|
||||
// Находим nmId из товара, к которому привязана реклама
|
||||
const dayData = dailyData.find(d => d.date === date)
|
||||
const product = dayData?.products.find(p =>
|
||||
p.advertising.externalAds.some(ad => ad.id === adId)
|
||||
)
|
||||
const nmId = product?.nmId?.toString() || '0'
|
||||
|
||||
await updateExternalAd({
|
||||
variables: {
|
||||
id: adId,
|
||||
input: {
|
||||
name: updates.name || currentAd.name,
|
||||
url: updates.url || currentAd.url,
|
||||
cost: updates.cost || currentAd.cost,
|
||||
date: date,
|
||||
nmId: nmId
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log('External ad updated successfully')
|
||||
} catch (error) {
|
||||
console.error('Error updating external ad:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Обработчики для ссылок-кликеров
|
||||
const handleGenerateLink = (date: string, adId: string, adName: string, adUrl: string) => {
|
||||
// Проверяем, есть ли уже ссылка для этой рекламы в этот день
|
||||
const existingLinks = generatedLinksData[date] || []
|
||||
const existingLink = existingLinks.find(link => link.adId === adId && link.adName === adName)
|
||||
|
||||
if (existingLink) {
|
||||
// Если ссылка уже существует, просто копируем её
|
||||
navigator.clipboard.writeText(existingLink.trackingUrl).then(() => {
|
||||
alert(`Ссылка уже существует и скопирована!\nПользователи будут переходить на: ${existingLink.targetUrl}`)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// Валидируем URL
|
||||
let validUrl = adUrl.trim()
|
||||
if (!validUrl.startsWith('http://') && !validUrl.startsWith('https://')) {
|
||||
validUrl = 'https://' + validUrl
|
||||
}
|
||||
|
||||
const linkId = `link-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
|
||||
const trackedUrl = `${window.location.origin}/track/${linkId}?redirect=${encodeURIComponent(validUrl)}`
|
||||
|
||||
console.log('Generating link:', {
|
||||
linkId,
|
||||
originalUrl: adUrl,
|
||||
validUrl,
|
||||
trackedUrl,
|
||||
encodedUrl: encodeURIComponent(validUrl)
|
||||
})
|
||||
|
||||
const newLink: GeneratedLink = {
|
||||
id: linkId,
|
||||
adId,
|
||||
adName,
|
||||
targetUrl: validUrl,
|
||||
trackingUrl: trackedUrl,
|
||||
clicks: 0,
|
||||
createdAt: new Date().toISOString()
|
||||
}
|
||||
|
||||
setGeneratedLinksData(prev => {
|
||||
const newData = {
|
||||
...prev,
|
||||
[date]: [...(prev[date] || []), newLink]
|
||||
}
|
||||
// Сохраняем данные в localStorage
|
||||
localStorage.setItem('advertisingLinksData', JSON.stringify(newData))
|
||||
return newData
|
||||
})
|
||||
|
||||
// Копируем ссылку в буфер обмена
|
||||
navigator.clipboard.writeText(trackedUrl).then(() => {
|
||||
console.log('Ссылка-кликер скопирована в буфер обмена:', trackedUrl)
|
||||
alert(`Ссылка скопирована! Вставьте её в рекламу.\nПользователи будут переходить на: ${validUrl}`)
|
||||
})
|
||||
}
|
||||
|
||||
const handleCopyLink = (linkId: string) => {
|
||||
// Найдем ссылку во всех датах
|
||||
let linkToCopy: GeneratedLink | undefined
|
||||
Object.values(generatedLinksData).forEach(links => {
|
||||
const found = links.find(link => link.id === linkId)
|
||||
if (found) linkToCopy = found
|
||||
})
|
||||
|
||||
if (linkToCopy) {
|
||||
navigator.clipboard.writeText(linkToCopy.trackingUrl).then(() => {
|
||||
console.log('Ссылка-кликер скопирована в буфер обмена:', linkToCopy!.trackingUrl)
|
||||
alert(`Ссылка скопирована! Люди будут переходить на: ${linkToCopy!.targetUrl}`)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('ru-RU', {
|
||||
style: 'currency',
|
||||
currency: 'RUB',
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
}
|
||||
|
||||
const formatNumber = (value: number) => {
|
||||
return new Intl.NumberFormat('ru-RU').format(value)
|
||||
}
|
||||
|
||||
const formatPercent = (value: number) => {
|
||||
return `${value.toFixed(2)}%`
|
||||
}
|
||||
|
||||
// Подготовка данных для графика с включением внешней рекламы
|
||||
const chartData = React.useMemo(() => {
|
||||
if (dailyData.length === 0) return []
|
||||
|
||||
return dailyData.map(day => {
|
||||
const dayViews = day.products.reduce((sum, product) => sum + product.totalViews, 0)
|
||||
const dayClicks = day.products.reduce((sum, product) => sum + product.totalClicks, 0)
|
||||
const dayExternalClicks = day.products.reduce((sum, product) =>
|
||||
sum + product.advertising.externalAds.reduce((adSum, ad) => adSum + (ad.clicks || 0), 0), 0)
|
||||
const dayOrders = day.totalOrders
|
||||
const dayWbCost = day.products.reduce((sum, product) => sum + product.totalCost, 0)
|
||||
const dayExternalCost = day.products.reduce((sum, product) =>
|
||||
sum + product.advertising.externalAds.reduce((adSum, ad) => adSum + ad.cost, 0), 0)
|
||||
|
||||
return {
|
||||
date: new Date(day.date).toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' }),
|
||||
views: dayViews,
|
||||
clicks: dayClicks + dayExternalClicks,
|
||||
wbClicks: dayClicks,
|
||||
externalClicks: dayExternalClicks,
|
||||
sum: dayWbCost + dayExternalCost,
|
||||
wbSum: dayWbCost,
|
||||
externalSum: dayExternalCost,
|
||||
orders: dayOrders
|
||||
}
|
||||
}).reverse() // График показывает от старых к новым датам
|
||||
}, [dailyData])
|
||||
|
||||
// Подготовка данных для графика расходов с разделением ВБ и внешней рекламы
|
||||
const spendingChartData = React.useMemo(() => {
|
||||
if (dailyData.length === 0) return []
|
||||
|
||||
return dailyData.map(day => {
|
||||
const wbSum = day.products.reduce((sum, product) => sum + product.totalCost, 0)
|
||||
const externalSum = day.products.reduce((sum, product) =>
|
||||
sum + product.advertising.externalAds.reduce((adSum, ad) => adSum + ad.cost, 0), 0)
|
||||
|
||||
return {
|
||||
date: new Date(day.date).toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' }),
|
||||
wbSum: wbSum,
|
||||
externalSum: externalSum,
|
||||
sum: wbSum + externalSum, // Общая сумма для совместимости
|
||||
fullDate: day.date
|
||||
}
|
||||
}).sort((a, b) => a.fullDate.localeCompare(b.fullDate))
|
||||
}, [dailyData])
|
||||
|
||||
const chartConfig = {
|
||||
views: {
|
||||
label: "Показы",
|
||||
color: "#8b5cf6",
|
||||
},
|
||||
clicks: {
|
||||
label: "Клики (общие)",
|
||||
color: "#06b6d4",
|
||||
},
|
||||
wbClicks: {
|
||||
label: "Клики ВБ",
|
||||
color: "#06b6d4",
|
||||
},
|
||||
externalClicks: {
|
||||
label: "Клики внешние",
|
||||
color: "#f59e0b",
|
||||
},
|
||||
sum: {
|
||||
label: "Затраты (общие) ₽",
|
||||
color: "#f59e0b",
|
||||
},
|
||||
wbSum: {
|
||||
label: "Затраты ВБ ₽",
|
||||
color: "#3b82f6",
|
||||
},
|
||||
externalSum: {
|
||||
label: "Затраты внешние ₽",
|
||||
color: "#ec4899",
|
||||
},
|
||||
orders: {
|
||||
label: "Заказы",
|
||||
color: "#10b981",
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col space-y-3 overflow-hidden">
|
||||
{/* Ошибки */}
|
||||
{error && (
|
||||
<Alert className="bg-red-500/10 border-red-500/30 text-red-400 py-2">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
<AlertDescription className="text-xs">
|
||||
{error.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{externalAdsError && (
|
||||
<Alert className="bg-red-500/10 border-red-500/30 text-red-400 mb-4">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
<AlertDescription className="text-xs">
|
||||
Ошибка загрузки внешней рекламы: {externalAdsError.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Результаты */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{(loading || campaignsLoading || externalAdsLoading) ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Skeleton key={i} className="h-16 bg-white/10" />
|
||||
))}
|
||||
</div>
|
||||
) : campaignStats.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{/* График расходов */}
|
||||
{spendingChartData.length > 0 && (
|
||||
<Card className="glass-card p-3">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-semibold text-white flex items-center gap-2">
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
Расходы на рекламу
|
||||
</h3>
|
||||
<div className="text-xs text-white/60">
|
||||
<div>Общие: {formatCurrency(spendingChartData.reduce((sum, day) => sum + day.sum, 0))}</div>
|
||||
<div className="flex gap-3 mt-1">
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded"></div>
|
||||
ВБ: {formatCurrency(spendingChartData.reduce((sum, day) => sum + day.wbSum, 0))}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="w-2 h-2 bg-pink-500 rounded"></div>
|
||||
Внешняя: {formatCurrency(spendingChartData.reduce((sum, day) => sum + day.externalSum, 0))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-48">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={spendingChartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: 'rgba(255,255,255,0.6)', fontSize: 10 }}
|
||||
axisLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: 'rgba(255,255,255,0.6)', fontSize: 10 }}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => `${(value / 1000).toFixed(0)}K₽`}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-black/80 p-2 rounded border border-white/20">
|
||||
<p className="text-white text-xs">{`Дата: ${label}`}</p>
|
||||
{payload.map((entry, index) => (
|
||||
<p key={index} className="text-xs" style={{ color: entry.color }}>
|
||||
{`${entry.name}: ${formatCurrency(entry.value as number)}`}
|
||||
</p>
|
||||
))}
|
||||
<p className="text-white text-xs border-t border-white/20 pt-1 mt-1">
|
||||
{`Общие расходы: ${formatCurrency(
|
||||
payload.reduce((sum, entry) => sum + (entry.value as number), 0)
|
||||
)}`}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="wbSum"
|
||||
fill="#3b82f6"
|
||||
name="ВБ реклама"
|
||||
radius={[2, 2, 0, 0]}
|
||||
opacity={0.8}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="externalSum"
|
||||
fill="#ec4899"
|
||||
name="Внешняя реклама"
|
||||
radius={[2, 2, 0, 0]}
|
||||
opacity={0.8}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Компактная общая статистика */}
|
||||
<Card className="glass-card p-3">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-semibold text-white flex items-center gap-2">
|
||||
<TrendingUp className="h-4 w-4" />
|
||||
Сводка ({campaignStats.length} кампаний)
|
||||
</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 md:grid-cols-8 gap-2 mb-3">
|
||||
{/* Показы */}
|
||||
<div className="bg-white/5 rounded p-2">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<Eye className="h-3 w-3 text-purple-400" />
|
||||
<span className="text-xs text-white/60">Показы</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white">
|
||||
{formatNumber(campaignStats.reduce((sum, stat) => sum + stat.views, 0))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Клики */}
|
||||
<div className="bg-white/5 rounded p-2">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<MousePointer className="h-3 w-3 text-cyan-400" />
|
||||
<span className="text-xs text-white/60">Клики</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white">
|
||||
{formatNumber(campaignStats.reduce((sum, stat) => sum + stat.clicks, 0))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTR */}
|
||||
<div className="bg-white/5 rounded p-2">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<Percent className="h-3 w-3 text-green-400" />
|
||||
<span className="text-xs text-white/60">CTR</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white">
|
||||
{formatPercent(
|
||||
campaignStats.reduce((sum, stat, _, arr) => {
|
||||
const totalViews = arr.reduce((s, st) => s + st.views, 0)
|
||||
const totalClicks = arr.reduce((s, st) => s + st.clicks, 0)
|
||||
return totalViews > 0 ? (totalClicks / totalViews) * 100 : 0
|
||||
}, 0)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CPC */}
|
||||
<div className="bg-white/5 rounded p-2">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<DollarSign className="h-3 w-3 text-amber-400" />
|
||||
<span className="text-xs text-white/60">CPC</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white">
|
||||
{formatCurrency(
|
||||
campaignStats.reduce((sum, stat, _, arr) => {
|
||||
const totalClicks = arr.reduce((s, st) => s + st.clicks, 0)
|
||||
const totalSum = arr.reduce((s, st) => s + st.sum, 0)
|
||||
return totalClicks > 0 ? totalSum / totalClicks : 0
|
||||
}, 0)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Затраты */}
|
||||
<div className="bg-white/5 rounded p-2">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<DollarSign className="h-3 w-3 text-red-400" />
|
||||
<span className="text-xs text-white/60">Затраты</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white">
|
||||
{formatCurrency(campaignStats.reduce((sum, stat) => sum + stat.sum, 0))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Заказы */}
|
||||
<div className="bg-white/5 rounded p-2">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<ShoppingCart className="h-3 w-3 text-green-400" />
|
||||
<span className="text-xs text-white/60">Заказы</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white">
|
||||
{formatNumber(campaignStats.reduce((sum, stat) => sum + stat.orders, 0))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CR */}
|
||||
<div className="bg-white/5 rounded p-2">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<Percent className="h-3 w-3 text-blue-400" />
|
||||
<span className="text-xs text-white/60">CR</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white">
|
||||
{formatPercent(
|
||||
campaignStats.reduce((sum, stat, _, arr) => {
|
||||
const totalClicks = arr.reduce((s, st) => s + st.clicks, 0)
|
||||
const totalOrders = arr.reduce((s, st) => s + st.orders, 0)
|
||||
return totalClicks > 0 ? (totalOrders / totalClicks) * 100 : 0
|
||||
}, 0)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Выручка */}
|
||||
<div className="bg-white/5 rounded p-2">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<DollarSign className="h-3 w-3 text-emerald-400" />
|
||||
<span className="text-xs text-white/60">Выручка</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white">
|
||||
{formatCurrency(campaignStats.reduce((sum, stat) => sum + stat.sum_price, 0))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</Card>
|
||||
|
||||
{/* Новая таблица рекламы */}
|
||||
<Card className="glass-card p-3">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-semibold text-white flex items-center gap-2">
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
Статистика рекламы
|
||||
</h3>
|
||||
<div className="text-xs text-white/60">
|
||||
{dailyData.length} дней данных
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Простая таблица согласно дизайну Figma */}
|
||||
<div className="bg-white/5 rounded-lg border border-white/10 overflow-hidden">
|
||||
{/* Фильтры */}
|
||||
<div className="p-4 border-b border-white/10">
|
||||
<div className="flex gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="wb-ads"
|
||||
checked={showWbAds}
|
||||
onCheckedChange={(checked) => setShowWbAds(checked === true)}
|
||||
className="border-white/30"
|
||||
/>
|
||||
<Label htmlFor="wb-ads" className="text-white/80 text-sm">Реклама ВБ</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="external-ads"
|
||||
checked={showExternalAds}
|
||||
onCheckedChange={(checked) => setShowExternalAds(checked === true)}
|
||||
className="border-white/30"
|
||||
/>
|
||||
<Label htmlFor="external-ads" className="text-white/80 text-sm">Реклама внешняя</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Заголовок таблицы */}
|
||||
<div className="bg-purple-600/20 border-b border-white/10">
|
||||
<div className="grid grid-cols-5 gap-4 p-3 text-white text-sm font-medium">
|
||||
<div>Дата</div>
|
||||
<div className="text-center">Сумма (руб)</div>
|
||||
<div className="text-center">Заказы (ед)</div>
|
||||
<div className="text-center">Реклама ВБ</div>
|
||||
<div className="text-center">Реклама внешняя</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Строки таблицы */}
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{dailyData.map((day) => {
|
||||
// Подсчитываем суммы за день
|
||||
const dayWbCost = day.products.reduce((sum, product) => sum + product.totalCost, 0)
|
||||
const dayExternalCost = day.products.reduce((sum, product) =>
|
||||
sum + product.advertising.externalAds.reduce((adSum, ad) => adSum + ad.cost, 0), 0)
|
||||
const dayTotalCost = dayWbCost + dayExternalCost
|
||||
const dayOrders = day.totalOrders
|
||||
|
||||
return (
|
||||
<div key={day.date} className="grid grid-cols-5 gap-4 p-3 border-b border-white/5 hover:bg-white/5 text-white/80 text-sm">
|
||||
<div className="font-medium">{day.date}</div>
|
||||
<div className="text-center">{formatCurrency(dayTotalCost)}</div>
|
||||
<div className="text-center">{dayOrders}</div>
|
||||
<div className="text-center">
|
||||
{showWbAds ? formatCurrency(dayWbCost) : '—'}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
{showExternalAds ? formatCurrency(dayExternalCost) : '—'}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
<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 mb-4">Загружаем статистику по всем доступным кампаниям...</p>
|
||||
<p className="text-white/40 text-sm">
|
||||
Поддерживается API Wildberries /adv/v2/fullstats
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user