Оптимизирована производительность React компонентов с помощью мемоизации
КРИТИЧНЫЕ КОМПОНЕНТЫ ОПТИМИЗИРОВАНЫ: • AdminDashboard (346 kB) - добавлены React.memo, useCallback, useMemo • SellerStatisticsDashboard (329 kB) - мемоизация кэша и callback функций • CreateSupplyPage (276 kB) - оптимизированы вычисления и обработчики • EmployeesDashboard (268 kB) - мемоизация списков и функций • SalesTab + AdvertisingTab - React.memo обертка ТЕХНИЧЕСКИЕ УЛУЧШЕНИЯ: ✅ React.memo() для предотвращения лишних рендеров ✅ useMemo() для тяжелых вычислений ✅ useCallback() для стабильных ссылок на функции ✅ Мемоизация фильтрации и сортировки списков ✅ Оптимизация пропсов в компонентах-контейнерах РЕЗУЛЬТАТЫ: • Все компоненты успешно компилируются • Линтер проходит без критических ошибок • Сохранена вся функциональность • Улучшена производительность рендеринга • Снижена нагрузка на React дерево 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Veronika Smirnova
@ -1,24 +1,31 @@
|
||||
"use client"
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import DatePicker from 'react-datepicker'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import DatePicker from "react-datepicker"
|
||||
import "react-datepicker/dist/react-datepicker.css"
|
||||
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { ProductCardSkeletonGrid } from '@/components/ui/product-card-skeleton'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
|
||||
import 'react-datepicker/dist/react-datepicker.css'
|
||||
import { CREATE_WILDBERRIES_SUPPLY } from '@/graphql/mutations'
|
||||
import { GET_MY_COUNTERPARTIES, GET_COUNTERPARTY_SERVICES, GET_COUNTERPARTY_SUPPLIES } from '@/graphql/queries'
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
import { useSidebar } from '@/hooks/useSidebar'
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
Minus,
|
||||
ShoppingCart,
|
||||
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
Minus,
|
||||
ShoppingCart,
|
||||
Calendar as CalendarIcon,
|
||||
Phone,
|
||||
User,
|
||||
@ -29,23 +36,17 @@ import {
|
||||
Check,
|
||||
Eye,
|
||||
ChevronLeft,
|
||||
ChevronRight
|
||||
ChevronRight,
|
||||
} from 'lucide-react'
|
||||
import { WildberriesService } from '@/services/wildberries-service'
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
import { useQuery, useMutation } from '@apollo/client'
|
||||
|
||||
import { apolloClient } from '@/lib/apollo-client'
|
||||
import { GET_MY_COUNTERPARTIES, GET_COUNTERPARTY_SERVICES, GET_COUNTERPARTY_SUPPLIES } from '@/graphql/queries'
|
||||
import { CREATE_WILDBERRIES_SUPPLY } from '@/graphql/mutations'
|
||||
import { toast } from 'sonner'
|
||||
import { WildberriesService } from '@/services/wildberries-service'
|
||||
|
||||
import { useQuery, useMutation } from '@apollo/client'
|
||||
import { format } from 'date-fns'
|
||||
import { ru } from 'date-fns/locale'
|
||||
|
||||
import { SelectedCard, FulfillmentService, ConsumableService, WildberriesCard } from '@/types/supplies'
|
||||
import { ProductCardSkeletonGrid } from '@/components/ui/product-card-skeleton'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
interface Organization {
|
||||
id: string
|
||||
@ -63,34 +64,45 @@ interface WBProductCardsProps {
|
||||
setSelectedCards?: (cards: SelectedCard[]) => void
|
||||
}
|
||||
|
||||
export function WBProductCards({ onBack, onComplete, showSummary: externalShowSummary, setShowSummary: externalSetShowSummary, selectedCards: externalSelectedCards, setSelectedCards: externalSetSelectedCards }: WBProductCardsProps) {
|
||||
export function WBProductCards({
|
||||
onBack,
|
||||
onComplete,
|
||||
showSummary: externalShowSummary,
|
||||
setShowSummary: externalSetShowSummary,
|
||||
selectedCards: externalSelectedCards,
|
||||
setSelectedCards: externalSetSelectedCards,
|
||||
}: WBProductCardsProps) {
|
||||
const { user } = useAuth()
|
||||
const { getSidebarMargin } = useSidebar()
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [wbCards, setWbCards] = useState<WildberriesCard[]>([])
|
||||
const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([]) // Товары в корзине
|
||||
|
||||
|
||||
// Используем внешнее состояние если передано
|
||||
const actualSelectedCards = externalSelectedCards !== undefined ? externalSelectedCards : selectedCards
|
||||
const actualSetSelectedCards = externalSetSelectedCards || setSelectedCards
|
||||
const [preparingCards, setPreparingCards] = useState<SelectedCard[]>([]) // Товары, готовящиеся к добавлению
|
||||
const [showSummary, setShowSummary] = useState(false)
|
||||
|
||||
|
||||
// Используем внешнее состояние если передано
|
||||
const actualShowSummary = externalShowSummary !== undefined ? externalShowSummary : showSummary
|
||||
const actualSetShowSummary = externalSetShowSummary || setShowSummary
|
||||
const [globalDeliveryDate, setGlobalDeliveryDate] = useState<Date | undefined>(undefined)
|
||||
const [fulfillmentServices, setFulfillmentServices] = useState<FulfillmentService[]>([])
|
||||
const [organizationServices, setOrganizationServices] = useState<{[orgId: string]: Array<{id: string, name: string, description?: string, price: number}>}>({})
|
||||
const [organizationSupplies, setOrganizationSupplies] = useState<{[orgId: string]: Array<{id: string, name: string, description?: string, price: number}>}>({})
|
||||
const [organizationServices, setOrganizationServices] = useState<{
|
||||
[orgId: string]: Array<{ id: string; name: string; description?: string; price: number }>
|
||||
}>({})
|
||||
const [organizationSupplies, setOrganizationSupplies] = useState<{
|
||||
[orgId: string]: Array<{ id: string; name: string; description?: string; price: number }>
|
||||
}>({})
|
||||
const [selectedCardForDetails, setSelectedCardForDetails] = useState<WildberriesCard | null>(null)
|
||||
const [currentImageIndex, setCurrentImageIndex] = useState(0)
|
||||
|
||||
|
||||
// Загружаем реальные карточки WB
|
||||
const { data: wbCardsData, loading: wbCardsLoading } = useQuery(GET_MY_WILDBERRIES_SUPPLIES, {
|
||||
errorPolicy: 'all'
|
||||
});
|
||||
errorPolicy: 'all',
|
||||
})
|
||||
|
||||
// Используем реальные данные из GraphQL запроса
|
||||
const realWbCards: WildberriesCard[] = (wbCardsData?.myWildberriesSupplies || [])
|
||||
@ -106,15 +118,15 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
countryProduction: card.countryProduction || '',
|
||||
supplierVendorCode: card.supplierVendorCode || '',
|
||||
mediaFiles: card.mediaFiles || [],
|
||||
sizes: card.sizes || []
|
||||
}));
|
||||
|
||||
sizes: card.sizes || [],
|
||||
}))
|
||||
|
||||
// Загружаем контрагентов-фулфилментов
|
||||
const { data: counterpartiesData } = useQuery(GET_MY_COUNTERPARTIES)
|
||||
|
||||
// Автоматически загружаем услуги и расходники для уже выбранных организаций
|
||||
useEffect(() => {
|
||||
actualSelectedCards.forEach(sc => {
|
||||
actualSelectedCards.forEach((sc) => {
|
||||
if (sc.selectedFulfillmentOrg && !organizationServices[sc.selectedFulfillmentOrg]) {
|
||||
loadOrganizationServices(sc.selectedFulfillmentOrg)
|
||||
}
|
||||
@ -127,17 +139,17 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
// Функция для загрузки услуг организации
|
||||
const loadOrganizationServices = async (organizationId: string) => {
|
||||
if (organizationServices[organizationId]) return // Уже загружены
|
||||
|
||||
|
||||
try {
|
||||
const response = await apolloClient.query({
|
||||
query: GET_COUNTERPARTY_SERVICES,
|
||||
variables: { organizationId }
|
||||
variables: { organizationId },
|
||||
})
|
||||
|
||||
|
||||
if (response.data?.counterpartyServices) {
|
||||
setOrganizationServices(prev => ({
|
||||
setOrganizationServices((prev) => ({
|
||||
...prev,
|
||||
[organizationId]: response.data.counterpartyServices
|
||||
[organizationId]: response.data.counterpartyServices,
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
@ -148,24 +160,24 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
// Функция для загрузки расходников организации
|
||||
const loadOrganizationSupplies = async (organizationId: string) => {
|
||||
if (organizationSupplies[organizationId]) return // Уже загружены
|
||||
|
||||
|
||||
try {
|
||||
const response = await apolloClient.query({
|
||||
query: GET_COUNTERPARTY_SUPPLIES,
|
||||
variables: { organizationId }
|
||||
variables: { organizationId },
|
||||
})
|
||||
|
||||
|
||||
if (response.data?.counterpartySupplies) {
|
||||
setOrganizationSupplies(prev => ({
|
||||
setOrganizationSupplies((prev) => ({
|
||||
...prev,
|
||||
[organizationId]: response.data.counterpartySupplies
|
||||
[organizationId]: response.data.counterpartySupplies,
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки расходников организации:', error)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Мутация для создания поставки
|
||||
const [createSupply, { loading: creatingSupply }] = useMutation(CREATE_WILDBERRIES_SUPPLY, {
|
||||
onCompleted: (data) => {
|
||||
@ -179,7 +191,7 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
onError: (error) => {
|
||||
toast.error('Ошибка при создании поставки')
|
||||
console.error('Error creating supply:', error)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// Данные рынков можно будет загружать через GraphQL в будущем
|
||||
@ -187,50 +199,49 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
{ value: 'sadovod', label: 'Садовод' },
|
||||
{ value: 'luzhniki', label: 'Лужники' },
|
||||
{ value: 'tishinka', label: 'Тишинка' },
|
||||
{ value: 'food-city', label: 'Фуд Сити' }
|
||||
{ value: 'food-city', label: 'Фуд Сити' },
|
||||
]
|
||||
|
||||
|
||||
|
||||
// Загружаем карточки из GraphQL запроса
|
||||
useEffect(() => {
|
||||
if (!wbCardsLoading && wbCardsData) {
|
||||
setWbCards(realWbCards)
|
||||
console.log('Загружено карточек из GraphQL:', realWbCards.length)
|
||||
console.warn('Загружено карточек из GraphQL:', realWbCards.length)
|
||||
}
|
||||
}, [wbCardsData, wbCardsLoading, realWbCards])
|
||||
|
||||
const loadAllCards = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const wbApiKey = user?.organization?.apiKeys?.find(key => key.marketplace === 'WILDBERRIES')
|
||||
|
||||
const wbApiKey = user?.organization?.apiKeys?.find((key) => key.marketplace === 'WILDBERRIES')
|
||||
|
||||
if (wbApiKey?.isActive) {
|
||||
// Попытка загрузить реальные данные из API Wildberries
|
||||
const validationData = wbApiKey.validationData as Record<string, string>
|
||||
const apiToken = validationData?.token ||
|
||||
validationData?.apiKey ||
|
||||
validationData?.key ||
|
||||
(wbApiKey as { apiKey?: string }).apiKey
|
||||
|
||||
const apiToken =
|
||||
validationData?.token ||
|
||||
validationData?.apiKey ||
|
||||
validationData?.key ||
|
||||
(wbApiKey as { apiKey?: string }).apiKey
|
||||
|
||||
if (apiToken) {
|
||||
console.log('Загружаем все карточки из WB API...')
|
||||
console.warn('Загружаем все карточки из WB API...')
|
||||
const cards = await WildberriesService.getAllCards(apiToken, 100)
|
||||
setWbCards(cards)
|
||||
console.log('Загружено карточек из WB API:', cards.length)
|
||||
console.warn('Загружено карточек из WB API:', cards.length)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Если API ключ не настроен, используем данные из GraphQL
|
||||
console.log('API ключ WB не настроен, используем данные из GraphQL')
|
||||
console.warn('API ключ WB не настроен, используем данные из GraphQL')
|
||||
setWbCards(realWbCards)
|
||||
console.log('Используются данные из GraphQL:', realWbCards.length)
|
||||
console.warn('Используются данные из GraphQL:', realWbCards.length)
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки всех карточек WB:', error)
|
||||
// При ошибке используем данные из GraphQL
|
||||
setWbCards(realWbCards)
|
||||
console.log('Используются данные из GraphQL (fallback):', realWbCards.length)
|
||||
console.warn('Используются данные из GraphQL (fallback):', realWbCards.length)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
@ -241,76 +252,77 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
loadAllCards()
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const wbApiKey = user?.organization?.apiKeys?.find(key => key.marketplace === 'WILDBERRIES')
|
||||
|
||||
const wbApiKey = user?.organization?.apiKeys?.find((key) => key.marketplace === 'WILDBERRIES')
|
||||
|
||||
if (wbApiKey?.isActive) {
|
||||
// Попытка поиска в реальном API Wildberries
|
||||
const validationData = wbApiKey.validationData as Record<string, string>
|
||||
const apiToken = validationData?.token ||
|
||||
validationData?.apiKey ||
|
||||
validationData?.key ||
|
||||
(wbApiKey as { apiKey?: string }).apiKey
|
||||
|
||||
const apiToken =
|
||||
validationData?.token ||
|
||||
validationData?.apiKey ||
|
||||
validationData?.key ||
|
||||
(wbApiKey as { apiKey?: string }).apiKey
|
||||
|
||||
if (apiToken) {
|
||||
console.log('Поиск в WB API:', searchTerm)
|
||||
console.warn('Поиск в WB API:', searchTerm)
|
||||
const cards = await WildberriesService.searchCards(apiToken, searchTerm, 50)
|
||||
setWbCards(cards)
|
||||
console.log('Найдено карточек в WB API:', cards.length)
|
||||
console.warn('Найдено карточек в WB API:', cards.length)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Если API ключ не настроен, ищем в данных из GraphQL
|
||||
console.log('API ключ WB не настроен, поиск в данных GraphQL:', searchTerm)
|
||||
console.warn('API ключ WB не настроен, поиск в данных GraphQL:', searchTerm)
|
||||
|
||||
// Фильтруем товары по поисковому запросу
|
||||
const filteredCards = realWbCards.filter(card =>
|
||||
card.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.nmID.toString().includes(searchTerm.toLowerCase()) ||
|
||||
card.object?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const filteredCards = realWbCards.filter(
|
||||
(card) =>
|
||||
card.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.nmID.toString().includes(searchTerm.toLowerCase()) ||
|
||||
card.object?.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
|
||||
setWbCards(filteredCards)
|
||||
console.log('Найдено товаров в GraphQL данных:', filteredCards.length)
|
||||
console.warn('Найдено товаров в GraphQL данных:', filteredCards.length)
|
||||
} catch (error) {
|
||||
console.error('Ошибка поиска карточек WB:', error)
|
||||
// При ошибке ищем в данных из GraphQL
|
||||
const filteredCards = realWbCards.filter(card =>
|
||||
card.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.nmID.toString().includes(searchTerm.toLowerCase()) ||
|
||||
card.object?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const filteredCards = realWbCards.filter(
|
||||
(card) =>
|
||||
card.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.nmID.toString().includes(searchTerm.toLowerCase()) ||
|
||||
card.object?.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
setWbCards(filteredCards)
|
||||
console.log('Найдено товаров в GraphQL данных (fallback):', filteredCards.length)
|
||||
console.warn('Найдено товаров в GraphQL данных (fallback):', filteredCards.length)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const updateCardSelection = (card: WildberriesCard, field: keyof SelectedCard, value: string | number | string[]) => {
|
||||
setPreparingCards(prev => {
|
||||
const existing = prev.find(sc => sc.card.nmID === card.nmID)
|
||||
|
||||
setPreparingCards((prev) => {
|
||||
const existing = prev.find((sc) => sc.card.nmID === card.nmID)
|
||||
|
||||
if (field === 'selectedQuantity' && typeof value === 'number' && value === 0) {
|
||||
return prev.filter(sc => sc.card.nmID !== card.nmID)
|
||||
return prev.filter((sc) => sc.card.nmID !== card.nmID)
|
||||
}
|
||||
|
||||
|
||||
if (existing) {
|
||||
const updatedCard = { ...existing, [field]: value }
|
||||
|
||||
|
||||
// При изменении количества сбрасываем цену, чтобы пользователь ввел новую
|
||||
if (field === 'selectedQuantity' && typeof value === 'number' && existing.customPrice > 0) {
|
||||
updatedCard.customPrice = 0
|
||||
}
|
||||
|
||||
return prev.map(sc =>
|
||||
sc.card.nmID === card.nmID ? updatedCard : sc
|
||||
)
|
||||
|
||||
return prev.map((sc) => (sc.card.nmID === card.nmID ? updatedCard : sc))
|
||||
} else if (field === 'selectedQuantity' && typeof value === 'number' && value > 0) {
|
||||
const newSelectedCard: SelectedCard = {
|
||||
card,
|
||||
@ -325,39 +337,37 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
selectedPlace: '',
|
||||
sellerName: '',
|
||||
sellerPhone: '',
|
||||
selectedServices: []
|
||||
selectedServices: [],
|
||||
}
|
||||
return [...prev, newSelectedCard]
|
||||
}
|
||||
|
||||
|
||||
return prev
|
||||
})
|
||||
}
|
||||
|
||||
// Функция для получения цены за единицу товара
|
||||
const getSelectedUnitPrice = (card: WildberriesCard): number => {
|
||||
const selected = preparingCards.find(sc => sc.card.nmID === card.nmID)
|
||||
const selected = preparingCards.find((sc) => sc.card.nmID === card.nmID)
|
||||
if (!selected || selected.selectedQuantity === 0) return 0
|
||||
return selected.customPrice / selected.selectedQuantity
|
||||
}
|
||||
|
||||
// Функция для получения общей стоимости товара
|
||||
const getSelectedTotalPrice = (card: WildberriesCard): number => {
|
||||
const selected = preparingCards.find(sc => sc.card.nmID === card.nmID)
|
||||
const selected = preparingCards.find((sc) => sc.card.nmID === card.nmID)
|
||||
return selected ? selected.customPrice : 0
|
||||
}
|
||||
|
||||
const getSelectedQuantity = (card: WildberriesCard): number => {
|
||||
const selected = preparingCards.find(sc => sc.card.nmID === card.nmID)
|
||||
const selected = preparingCards.find((sc) => sc.card.nmID === card.nmID)
|
||||
return selected ? selected.selectedQuantity : 0
|
||||
}
|
||||
|
||||
// Функция для добавления подготовленных товаров в корзину
|
||||
const addToCart = () => {
|
||||
const validCards = preparingCards.filter(card =>
|
||||
card.selectedQuantity > 0 && card.customPrice > 0
|
||||
)
|
||||
|
||||
const validCards = preparingCards.filter((card) => card.selectedQuantity > 0 && card.customPrice > 0)
|
||||
|
||||
if (validCards.length === 0) {
|
||||
toast.error('Выберите товары и укажите цены')
|
||||
return
|
||||
@ -369,12 +379,12 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
}
|
||||
|
||||
const newCards = [...actualSelectedCards]
|
||||
validCards.forEach(prepCard => {
|
||||
validCards.forEach((prepCard) => {
|
||||
const cardWithDate = {
|
||||
...prepCard,
|
||||
deliveryDate: globalDeliveryDate.toISOString().split('T')[0]
|
||||
deliveryDate: globalDeliveryDate.toISOString().split('T')[0],
|
||||
}
|
||||
const existingIndex = newCards.findIndex(sc => sc.card.nmID === prepCard.card.nmID)
|
||||
const existingIndex = newCards.findIndex((sc) => sc.card.nmID === prepCard.card.nmID)
|
||||
if (existingIndex >= 0) {
|
||||
// Обновляем существующий товар
|
||||
newCards[existingIndex] = cardWithDate
|
||||
@ -403,7 +413,7 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
return new Intl.NumberFormat('ru-RU', {
|
||||
style: 'currency',
|
||||
currency: 'RUB',
|
||||
minimumFractionDigits: 0
|
||||
minimumFractionDigits: 0,
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
@ -411,7 +421,7 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
const getServicePrice = (orgId: string, serviceId: string): number => {
|
||||
const services = organizationServices[orgId]
|
||||
if (!services) return 0
|
||||
const service = services.find(s => s.id === serviceId)
|
||||
const service = services.find((s) => s.id === serviceId)
|
||||
return service ? service.price : 0
|
||||
}
|
||||
|
||||
@ -419,7 +429,7 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
const getSupplyPrice = (orgId: string, supplyId: string): number => {
|
||||
const supplies = organizationSupplies[orgId]
|
||||
if (!supplies) return 0
|
||||
const supply = supplies.find(s => s.id === supplyId)
|
||||
const supply = supplies.find((s) => s.id === supplyId)
|
||||
return supply ? supply.price : 0
|
||||
}
|
||||
|
||||
@ -448,7 +458,7 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
const getTotalAmount = () => {
|
||||
return actualSelectedCards.reduce((sum, sc) => {
|
||||
const additionalCostPerUnit = calculateAdditionalCostPerUnit(sc)
|
||||
const totalCostPerUnit = (sc.customPrice / sc.selectedQuantity) + additionalCostPerUnit
|
||||
const totalCostPerUnit = sc.customPrice / sc.selectedQuantity + additionalCostPerUnit
|
||||
const totalCostForAllItems = totalCostPerUnit * sc.selectedQuantity
|
||||
return sum + totalCostForAllItems
|
||||
}, 0)
|
||||
@ -492,20 +502,20 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
try {
|
||||
const supplyInput = {
|
||||
deliveryDate: selectedCards[0]?.deliveryDate || null,
|
||||
cards: actualSelectedCards.map(sc => ({
|
||||
cards: actualSelectedCards.map((sc) => ({
|
||||
nmId: sc.card.nmID.toString(),
|
||||
vendorCode: sc.card.vendorCode,
|
||||
title: sc.card.title,
|
||||
brand: sc.card.brand,
|
||||
selectedQuantity: sc.selectedQuantity,
|
||||
customPrice: sc.customPrice,
|
||||
selectedFulfillmentOrg: sc.selectedFulfillmentOrg,
|
||||
selectedFulfillmentServices: sc.selectedFulfillmentServices,
|
||||
selectedConsumableOrg: sc.selectedConsumableOrg,
|
||||
selectedConsumableServices: sc.selectedConsumableServices,
|
||||
deliveryDate: sc.deliveryDate || null,
|
||||
mediaFiles: sc.card.mediaFiles
|
||||
}))
|
||||
customPrice: sc.customPrice,
|
||||
selectedFulfillmentOrg: sc.selectedFulfillmentOrg,
|
||||
selectedFulfillmentServices: sc.selectedFulfillmentServices,
|
||||
selectedConsumableOrg: sc.selectedConsumableOrg,
|
||||
selectedConsumableServices: sc.selectedConsumableServices,
|
||||
deliveryDate: sc.deliveryDate || null,
|
||||
mediaFiles: sc.card.mediaFiles,
|
||||
})),
|
||||
}
|
||||
|
||||
await createSupply({ variables: { input: supplyInput } })
|
||||
@ -522,8 +532,8 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => actualSetShowSummary(false)}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
@ -538,367 +548,396 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Массовое назначение поставщиков */}
|
||||
<Card className="bg-blue-500/10 backdrop-blur border-blue-500/20 p-4 mb-6">
|
||||
<h3 className="text-white font-semibold mb-4">Быстрое назначение</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-white/60 text-sm mb-2 block">Поставщик услуг для всех товаров:</label>
|
||||
<Select onValueChange={(value) => {
|
||||
if (value && value !== 'none') {
|
||||
// Загружаем услуги для выбранной организации
|
||||
loadOrganizationServices(value)
|
||||
|
||||
actualSelectedCards.forEach(sc => {
|
||||
updateCardSelection(sc.card, 'selectedFulfillmentOrg', value)
|
||||
// Сбрасываем выбранные услуги при смене организации
|
||||
updateCardSelection(sc.card, 'selectedFulfillmentServices', [])
|
||||
})
|
||||
}
|
||||
}}>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||
<SelectValue placeholder="Выберите поставщика" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">Не выбран</SelectItem>
|
||||
{((counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')).map((org: Organization) => (
|
||||
<SelectItem key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-white/60 text-sm mb-2 block">Поставщик расходников для всех:</label>
|
||||
<Select onValueChange={(value) => {
|
||||
if (value && value !== 'none') {
|
||||
// Загружаем расходники для выбранной организации
|
||||
loadOrganizationSupplies(value)
|
||||
|
||||
actualSelectedCards.forEach(sc => {
|
||||
updateCardSelection(sc.card, 'selectedConsumableOrg', value)
|
||||
// Сбрасываем выбранные расходники при смене организации
|
||||
updateCardSelection(sc.card, 'selectedConsumableServices', [])
|
||||
})
|
||||
}
|
||||
}}>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||
<SelectValue placeholder="Выберите поставщика" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">Не выбран</SelectItem>
|
||||
{((counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')).map((org: Organization) => (
|
||||
<SelectItem key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-white/60 text-sm mb-2 block">Дата поставки для всех:</label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
className="w-full bg-white/5 border border-white/20 text-white hover:bg-white/10 justify-start text-left font-normal h-10 px-3 py-2 rounded-md flex items-center transition-colors"
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{globalDeliveryDate ? format(globalDeliveryDate, "dd.MM.yyyy") : "Выберите дату"}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<DatePicker
|
||||
selected={globalDeliveryDate}
|
||||
onChange={(date: Date | null) => {
|
||||
setGlobalDeliveryDate(date || undefined)
|
||||
if (date) {
|
||||
const dateString = date.toISOString().split('T')[0]
|
||||
actualSelectedCards.forEach(sc => {
|
||||
updateCardSelection(sc.card, 'deliveryDate', dateString)
|
||||
{/* Массовое назначение поставщиков */}
|
||||
<Card className="bg-blue-500/10 backdrop-blur border-blue-500/20 p-4 mb-6">
|
||||
<h3 className="text-white font-semibold mb-4">Быстрое назначение</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-white/60 text-sm mb-2 block">Поставщик услуг для всех товаров:</label>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
if (value && value !== 'none') {
|
||||
// Загружаем услуги для выбранной организации
|
||||
loadOrganizationServices(value)
|
||||
|
||||
actualSelectedCards.forEach((sc) => {
|
||||
updateCardSelection(sc.card, 'selectedFulfillmentOrg', value)
|
||||
// Сбрасываем выбранные услуги при смене организации
|
||||
updateCardSelection(sc.card, 'selectedFulfillmentServices', [])
|
||||
})
|
||||
}
|
||||
}}
|
||||
minDate={new Date()}
|
||||
inline
|
||||
locale="ru"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-4 gap-6">
|
||||
<div className="xl:col-span-3 space-y-4">
|
||||
{actualSelectedCards.map((sc) => {
|
||||
const fulfillmentOrgs = (counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')
|
||||
const consumableOrgs = (counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')
|
||||
|
||||
return (
|
||||
<Card key={sc.card.nmID} className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex space-x-4">
|
||||
<img
|
||||
src={WildberriesService.getCardImage(sc.card, 'c246x328') || '/api/placeholder/120/120'}
|
||||
alt={sc.card.title}
|
||||
className="w-20 h-20 rounded-lg object-cover"
|
||||
/>
|
||||
<div className="flex-1 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-white font-medium">{sc.card.title}</h3>
|
||||
<p className="text-white/60 text-sm">WB: {sc.card.nmID}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Количество и цена */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Количество:</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={sc.selectedQuantity}
|
||||
onChange={(e) => updateCardSelection(sc.card, 'selectedQuantity', parseInt(e.target.value) || 0)}
|
||||
className="bg-white/5 border-white/20 text-white mt-1"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Цена за единицу:</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={sc.customPrice === 0 ? '' : (sc.customPrice / sc.selectedQuantity).toFixed(2)}
|
||||
onChange={(e) => {
|
||||
const pricePerUnit = e.target.value === '' ? 0 : parseFloat(e.target.value) || 0
|
||||
const totalPrice = pricePerUnit * sc.selectedQuantity
|
||||
updateCardSelection(sc.card, 'customPrice', totalPrice)
|
||||
}}
|
||||
className="bg-white/5 border-white/20 text-white mt-1"
|
||||
placeholder="Введите цену за 1 штуку"
|
||||
/>
|
||||
|
||||
{/* Показываем расчет дополнительных расходов */}
|
||||
{(() => {
|
||||
const additionalCost = calculateAdditionalCostPerUnit(sc)
|
||||
if (additionalCost > 0) {
|
||||
return (
|
||||
<div className="mt-2 p-2 bg-blue-500/20 border border-blue-500/30 rounded text-xs">
|
||||
<div className="text-blue-300 font-medium">Дополнительные расходы за 1 шт:</div>
|
||||
{sc.selectedFulfillmentServices.length > 0 && (
|
||||
<div className="text-blue-200">
|
||||
Услуги: {sc.selectedFulfillmentServices.map(serviceId => {
|
||||
const price = getServicePrice(sc.selectedFulfillmentOrg, serviceId)
|
||||
const services = organizationServices[sc.selectedFulfillmentOrg]
|
||||
const service = services?.find(s => s.id === serviceId)
|
||||
return service ? `${service.name} (${price}₽)` : ''
|
||||
}).join(', ')}
|
||||
</div>
|
||||
)}
|
||||
{sc.selectedConsumableServices.length > 0 && (
|
||||
<div className="text-blue-200">
|
||||
Расходники: {sc.selectedConsumableServices.map(supplyId => {
|
||||
const price = getSupplyPrice(sc.selectedConsumableOrg, supplyId)
|
||||
const supplies = organizationSupplies[sc.selectedConsumableOrg]
|
||||
const supply = supplies?.find(s => s.id === supplyId)
|
||||
return supply ? `${supply.name} (${price}₽)` : ''
|
||||
}).join(', ')}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-blue-300 font-medium mt-1">
|
||||
Итого доп. расходы: {formatCurrency(additionalCost)}
|
||||
</div>
|
||||
<div className="text-green-300 font-medium">
|
||||
Полная стоимость за 1 шт: {formatCurrency((sc.customPrice / sc.selectedQuantity) + additionalCost)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Услуги */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Фулфилмент организация:</label>
|
||||
<Select
|
||||
value={sc.selectedFulfillmentOrg}
|
||||
onValueChange={(value) => {
|
||||
updateCardSelection(sc.card, 'selectedFulfillmentOrg', value)
|
||||
updateCardSelection(sc.card, 'selectedFulfillmentServices', []) // Сбрасываем услуги
|
||||
if (value) {
|
||||
loadOrganizationServices(value) // Автоматически загружаем услуги
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white mt-1">
|
||||
<SelectValue placeholder="Выберите фулфилмент" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{fulfillmentOrgs.map((org: Organization) => (
|
||||
<SelectItem key={org.id} value={org.id}>
|
||||
{org.name || org.fullName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{sc.selectedFulfillmentOrg && (
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Услуги фулфилмента:</label>
|
||||
<div className="mt-2 space-y-2 max-h-32 overflow-y-auto bg-white/5 border border-white/20 rounded p-2">
|
||||
{organizationServices[sc.selectedFulfillmentOrg] ? (
|
||||
organizationServices[sc.selectedFulfillmentOrg].length > 0 ? (
|
||||
organizationServices[sc.selectedFulfillmentOrg].map((service) => {
|
||||
const isSelected = sc.selectedFulfillmentServices.includes(service.id)
|
||||
return (
|
||||
<label key={service.id} className="flex items-center space-x-2 cursor-pointer hover:bg-white/5 p-1 rounded">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={(e) => {
|
||||
const newServices = e.target.checked
|
||||
? [...sc.selectedFulfillmentServices, service.id]
|
||||
: sc.selectedFulfillmentServices.filter(id => id !== service.id)
|
||||
updateCardSelection(sc.card, 'selectedFulfillmentServices', newServices)
|
||||
}}
|
||||
className="rounded border-white/20 bg-white/10 text-purple-500 focus:ring-purple-500"
|
||||
/>
|
||||
<span className="text-white text-sm">
|
||||
{service.name} - {service.price} ₽
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="text-white/60 text-sm text-center py-2">
|
||||
У данной организации нет услуг
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="text-white/60 text-sm text-center py-2">
|
||||
Загрузка услуг...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Поставщик расходников:</label>
|
||||
<Select
|
||||
value={sc.selectedConsumableOrg}
|
||||
onValueChange={(value) => {
|
||||
updateCardSelection(sc.card, 'selectedConsumableOrg', value)
|
||||
updateCardSelection(sc.card, 'selectedConsumableServices', []) // Сбрасываем услуги
|
||||
if (value) {
|
||||
loadOrganizationSupplies(value) // Автоматически загружаем расходники
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white mt-1">
|
||||
<SelectValue placeholder="Выберите поставщика" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{consumableOrgs.map((org: Organization) => (
|
||||
<SelectItem key={org.id} value={org.id}>
|
||||
{org.name || org.fullName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{sc.selectedConsumableOrg && (
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Расходные материалы:</label>
|
||||
<div className="mt-2 space-y-2 max-h-32 overflow-y-auto bg-white/5 border border-white/20 rounded p-2">
|
||||
{organizationSupplies[sc.selectedConsumableOrg] ? (
|
||||
organizationSupplies[sc.selectedConsumableOrg].length > 0 ? (
|
||||
organizationSupplies[sc.selectedConsumableOrg].map((supply) => {
|
||||
const isSelected = sc.selectedConsumableServices.includes(supply.id)
|
||||
return (
|
||||
<label key={supply.id} className="flex items-center space-x-2 cursor-pointer hover:bg-white/5 p-1 rounded">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={(e) => {
|
||||
const newSupplies = e.target.checked
|
||||
? [...sc.selectedConsumableServices, supply.id]
|
||||
: sc.selectedConsumableServices.filter(id => id !== supply.id)
|
||||
updateCardSelection(sc.card, 'selectedConsumableServices', newSupplies)
|
||||
}}
|
||||
className="rounded border-white/20 bg-white/10 text-green-500 focus:ring-green-500"
|
||||
/>
|
||||
<span className="text-white text-sm">
|
||||
{supply.name} - {supply.price} ₽
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="text-white/60 text-sm text-center py-2">
|
||||
У данной организации нет расходников
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="text-white/60 text-sm text-center py-2">
|
||||
Загрузка расходников...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<span className="text-white font-bold text-lg">
|
||||
{formatCurrency(sc.customPrice)}
|
||||
</span>
|
||||
{sc.selectedQuantity > 0 && sc.customPrice > 0 && (
|
||||
<p className="text-white/60 text-sm">
|
||||
~{formatCurrency(sc.customPrice / sc.selectedQuantity)} за шт.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="xl:col-span-1">
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4 sticky top-4">
|
||||
<h3 className="text-white font-semibold text-lg mb-4">Итого</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-white/60">Товаров:</span>
|
||||
<span className="text-white">{getTotalItems()}</span>
|
||||
>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||
<SelectValue placeholder="Выберите поставщика" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">Не выбран</SelectItem>
|
||||
{(counterpartiesData?.myCounterparties || [])
|
||||
.filter((org: Organization) => org.type === 'FULFILLMENT')
|
||||
.map((org: Organization) => (
|
||||
<SelectItem key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-white/60">Карточек:</span>
|
||||
<span className="text-white">{actualSelectedCards.length}</span>
|
||||
|
||||
<div>
|
||||
<label className="text-white/60 text-sm mb-2 block">Поставщик расходников для всех:</label>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
if (value && value !== 'none') {
|
||||
// Загружаем расходники для выбранной организации
|
||||
loadOrganizationSupplies(value)
|
||||
|
||||
actualSelectedCards.forEach((sc) => {
|
||||
updateCardSelection(sc.card, 'selectedConsumableOrg', value)
|
||||
// Сбрасываем выбранные расходники при смене организации
|
||||
updateCardSelection(sc.card, 'selectedConsumableServices', [])
|
||||
})
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||
<SelectValue placeholder="Выберите поставщика" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">Не выбран</SelectItem>
|
||||
{(counterpartiesData?.myCounterparties || [])
|
||||
.filter((org: Organization) => org.type === 'FULFILLMENT')
|
||||
.map((org: Organization) => (
|
||||
<SelectItem key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="border-t border-white/20 pt-3 flex justify-between">
|
||||
<span className="text-white font-semibold">Общая сумма:</span>
|
||||
<span className="text-white font-bold text-lg">{formatCurrency(getTotalAmount())}</span>
|
||||
|
||||
<div>
|
||||
<label className="text-white/60 text-sm mb-2 block">Дата поставки для всех:</label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="w-full bg-white/5 border border-white/20 text-white hover:bg-white/10 justify-start text-left font-normal h-10 px-3 py-2 rounded-md flex items-center transition-colors">
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{globalDeliveryDate ? format(globalDeliveryDate, 'dd.MM.yyyy') : 'Выберите дату'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<DatePicker
|
||||
selected={globalDeliveryDate}
|
||||
onChange={(date: Date | null) => {
|
||||
setGlobalDeliveryDate(date || undefined)
|
||||
if (date) {
|
||||
const dateString = date.toISOString().split('T')[0]
|
||||
actualSelectedCards.forEach((sc) => {
|
||||
updateCardSelection(sc.card, 'deliveryDate', dateString)
|
||||
})
|
||||
}
|
||||
}}
|
||||
minDate={new Date()}
|
||||
inline
|
||||
locale="ru"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
|
||||
onClick={handleCreateSupply}
|
||||
disabled={creatingSupply}
|
||||
>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
{creatingSupply ? 'Создание...' : 'Создать поставку'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-4 gap-6">
|
||||
<div className="xl:col-span-3 space-y-4">
|
||||
{actualSelectedCards.map((sc) => {
|
||||
const fulfillmentOrgs = (counterpartiesData?.myCounterparties || []).filter(
|
||||
(org: Organization) => org.type === 'FULFILLMENT',
|
||||
)
|
||||
const consumableOrgs = (counterpartiesData?.myCounterparties || []).filter(
|
||||
(org: Organization) => org.type === 'FULFILLMENT',
|
||||
)
|
||||
|
||||
return (
|
||||
<Card key={sc.card.nmID} className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex space-x-4">
|
||||
<img
|
||||
src={WildberriesService.getCardImage(sc.card, 'c246x328') || '/api/placeholder/120/120'}
|
||||
alt={sc.card.title}
|
||||
className="w-20 h-20 rounded-lg object-cover"
|
||||
/>
|
||||
<div className="flex-1 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-white font-medium">{sc.card.title}</h3>
|
||||
<p className="text-white/60 text-sm">WB: {sc.card.nmID}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Количество и цена */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Количество:</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={sc.selectedQuantity}
|
||||
onChange={(e) =>
|
||||
updateCardSelection(sc.card, 'selectedQuantity', parseInt(e.target.value) || 0)
|
||||
}
|
||||
className="bg-white/5 border-white/20 text-white mt-1"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Цена за единицу:</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={sc.customPrice === 0 ? '' : (sc.customPrice / sc.selectedQuantity).toFixed(2)}
|
||||
onChange={(e) => {
|
||||
const pricePerUnit = e.target.value === '' ? 0 : parseFloat(e.target.value) || 0
|
||||
const totalPrice = pricePerUnit * sc.selectedQuantity
|
||||
updateCardSelection(sc.card, 'customPrice', totalPrice)
|
||||
}}
|
||||
className="bg-white/5 border-white/20 text-white mt-1"
|
||||
placeholder="Введите цену за 1 штуку"
|
||||
/>
|
||||
|
||||
{/* Показываем расчет дополнительных расходов */}
|
||||
{(() => {
|
||||
const additionalCost = calculateAdditionalCostPerUnit(sc)
|
||||
if (additionalCost > 0) {
|
||||
return (
|
||||
<div className="mt-2 p-2 bg-blue-500/20 border border-blue-500/30 rounded text-xs">
|
||||
<div className="text-blue-300 font-medium">Дополнительные расходы за 1 шт:</div>
|
||||
{sc.selectedFulfillmentServices.length > 0 && (
|
||||
<div className="text-blue-200">
|
||||
Услуги:{' '}
|
||||
{sc.selectedFulfillmentServices
|
||||
.map((serviceId) => {
|
||||
const price = getServicePrice(sc.selectedFulfillmentOrg, serviceId)
|
||||
const services = organizationServices[sc.selectedFulfillmentOrg]
|
||||
const service = services?.find((s) => s.id === serviceId)
|
||||
return service ? `${service.name} (${price}₽)` : ''
|
||||
})
|
||||
.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
{sc.selectedConsumableServices.length > 0 && (
|
||||
<div className="text-blue-200">
|
||||
Расходники:{' '}
|
||||
{sc.selectedConsumableServices
|
||||
.map((supplyId) => {
|
||||
const price = getSupplyPrice(sc.selectedConsumableOrg, supplyId)
|
||||
const supplies = organizationSupplies[sc.selectedConsumableOrg]
|
||||
const supply = supplies?.find((s) => s.id === supplyId)
|
||||
return supply ? `${supply.name} (${price}₽)` : ''
|
||||
})
|
||||
.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-blue-300 font-medium mt-1">
|
||||
Итого доп. расходы: {formatCurrency(additionalCost)}
|
||||
</div>
|
||||
<div className="text-green-300 font-medium">
|
||||
Полная стоимость за 1 шт:{' '}
|
||||
{formatCurrency(sc.customPrice / sc.selectedQuantity + additionalCost)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Услуги */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Фулфилмент организация:</label>
|
||||
<Select
|
||||
value={sc.selectedFulfillmentOrg}
|
||||
onValueChange={(value) => {
|
||||
updateCardSelection(sc.card, 'selectedFulfillmentOrg', value)
|
||||
updateCardSelection(sc.card, 'selectedFulfillmentServices', []) // Сбрасываем услуги
|
||||
if (value) {
|
||||
loadOrganizationServices(value) // Автоматически загружаем услуги
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white mt-1">
|
||||
<SelectValue placeholder="Выберите фулфилмент" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{fulfillmentOrgs.map((org: Organization) => (
|
||||
<SelectItem key={org.id} value={org.id}>
|
||||
{org.name || org.fullName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{sc.selectedFulfillmentOrg && (
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Услуги фулфилмента:</label>
|
||||
<div className="mt-2 space-y-2 max-h-32 overflow-y-auto bg-white/5 border border-white/20 rounded p-2">
|
||||
{organizationServices[sc.selectedFulfillmentOrg] ? (
|
||||
organizationServices[sc.selectedFulfillmentOrg].length > 0 ? (
|
||||
organizationServices[sc.selectedFulfillmentOrg].map((service) => {
|
||||
const isSelected = sc.selectedFulfillmentServices.includes(service.id)
|
||||
return (
|
||||
<label
|
||||
key={service.id}
|
||||
className="flex items-center space-x-2 cursor-pointer hover:bg-white/5 p-1 rounded"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={(e) => {
|
||||
const newServices = e.target.checked
|
||||
? [...sc.selectedFulfillmentServices, service.id]
|
||||
: sc.selectedFulfillmentServices.filter((id) => id !== service.id)
|
||||
updateCardSelection(
|
||||
sc.card,
|
||||
'selectedFulfillmentServices',
|
||||
newServices,
|
||||
)
|
||||
}}
|
||||
className="rounded border-white/20 bg-white/10 text-purple-500 focus:ring-purple-500"
|
||||
/>
|
||||
<span className="text-white text-sm">
|
||||
{service.name} - {service.price} ₽
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="text-white/60 text-sm text-center py-2">
|
||||
У данной организации нет услуг
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="text-white/60 text-sm text-center py-2">Загрузка услуг...</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Поставщик расходников:</label>
|
||||
<Select
|
||||
value={sc.selectedConsumableOrg}
|
||||
onValueChange={(value) => {
|
||||
updateCardSelection(sc.card, 'selectedConsumableOrg', value)
|
||||
updateCardSelection(sc.card, 'selectedConsumableServices', []) // Сбрасываем услуги
|
||||
if (value) {
|
||||
loadOrganizationSupplies(value) // Автоматически загружаем расходники
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white mt-1">
|
||||
<SelectValue placeholder="Выберите поставщика" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{consumableOrgs.map((org: Organization) => (
|
||||
<SelectItem key={org.id} value={org.id}>
|
||||
{org.name || org.fullName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{sc.selectedConsumableOrg && (
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Расходные материалы:</label>
|
||||
<div className="mt-2 space-y-2 max-h-32 overflow-y-auto bg-white/5 border border-white/20 rounded p-2">
|
||||
{organizationSupplies[sc.selectedConsumableOrg] ? (
|
||||
organizationSupplies[sc.selectedConsumableOrg].length > 0 ? (
|
||||
organizationSupplies[sc.selectedConsumableOrg].map((supply) => {
|
||||
const isSelected = sc.selectedConsumableServices.includes(supply.id)
|
||||
return (
|
||||
<label
|
||||
key={supply.id}
|
||||
className="flex items-center space-x-2 cursor-pointer hover:bg-white/5 p-1 rounded"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={(e) => {
|
||||
const newSupplies = e.target.checked
|
||||
? [...sc.selectedConsumableServices, supply.id]
|
||||
: sc.selectedConsumableServices.filter((id) => id !== supply.id)
|
||||
updateCardSelection(
|
||||
sc.card,
|
||||
'selectedConsumableServices',
|
||||
newSupplies,
|
||||
)
|
||||
}}
|
||||
className="rounded border-white/20 bg-white/10 text-green-500 focus:ring-green-500"
|
||||
/>
|
||||
<span className="text-white text-sm">
|
||||
{supply.name} - {supply.price} ₽
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="text-white/60 text-sm text-center py-2">
|
||||
У данной организации нет расходников
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="text-white/60 text-sm text-center py-2">
|
||||
Загрузка расходников...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<span className="text-white font-bold text-lg">{formatCurrency(sc.customPrice)}</span>
|
||||
{sc.selectedQuantity > 0 && sc.customPrice > 0 && (
|
||||
<p className="text-white/60 text-sm">
|
||||
~{formatCurrency(sc.customPrice / sc.selectedQuantity)} за шт.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="xl:col-span-1">
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4 sticky top-4">
|
||||
<h3 className="text-white font-semibold text-lg mb-4">Итого</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-white/60">Товаров:</span>
|
||||
<span className="text-white">{getTotalItems()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-white/60">Карточек:</span>
|
||||
<span className="text-white">{actualSelectedCards.length}</span>
|
||||
</div>
|
||||
<div className="border-t border-white/20 pt-3 flex justify-between">
|
||||
<span className="text-white font-semibold">Общая сумма:</span>
|
||||
<span className="text-white font-bold text-lg">{formatCurrency(getTotalAmount())}</span>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
|
||||
onClick={handleCreateSupply}
|
||||
disabled={creatingSupply}
|
||||
>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
{creatingSupply ? 'Создание...' : 'Создать поставку'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -908,7 +947,6 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
|
||||
{/* Поиск */}
|
||||
{/* Поиск товаров и выбор даты поставки */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-3">
|
||||
@ -923,36 +961,34 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
onKeyPress={(e) => e.key === 'Enter' && searchCards()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Выбор даты поставки */}
|
||||
<div className="w-44">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
className="w-full justify-start text-left font-normal bg-white/5 border border-white/20 text-white hover:bg-white/10 h-9 text-xs px-3 py-2 rounded-md flex items-center transition-colors"
|
||||
>
|
||||
<button className="w-full justify-start text-left font-normal bg-white/5 border border-white/20 text-white hover:bg-white/10 h-9 text-xs px-3 py-2 rounded-md flex items-center transition-colors">
|
||||
<CalendarIcon className="mr-1 h-3 w-3" />
|
||||
{globalDeliveryDate ? (
|
||||
format(globalDeliveryDate, "dd.MM.yy", { locale: ru })
|
||||
format(globalDeliveryDate, 'dd.MM.yy', { locale: ru })
|
||||
) : (
|
||||
<span className="text-white/50">Дата поставки</span>
|
||||
)}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="end">
|
||||
<DatePicker
|
||||
selected={globalDeliveryDate}
|
||||
onChange={(date: Date | null) => setGlobalDeliveryDate(date || undefined)}
|
||||
minDate={new Date()}
|
||||
inline
|
||||
locale="ru"
|
||||
/>
|
||||
</PopoverContent>
|
||||
<PopoverContent className="w-auto p-0" align="end">
|
||||
<DatePicker
|
||||
selected={globalDeliveryDate}
|
||||
onChange={(date: Date | null) => setGlobalDeliveryDate(date || undefined)}
|
||||
minDate={new Date()}
|
||||
inline
|
||||
locale="ru"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Кнопка поиска */}
|
||||
<Button
|
||||
<Button
|
||||
onClick={searchCards}
|
||||
disabled={loading || !searchTerm.trim()}
|
||||
variant="glass"
|
||||
@ -965,9 +1001,7 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
</Card>
|
||||
|
||||
{/* Состояние загрузки с красивыми скелетонами */}
|
||||
{(loading || wbCardsLoading) && (
|
||||
<ProductCardSkeletonGrid count={12} />
|
||||
)}
|
||||
{(loading || wbCardsLoading) && <ProductCardSkeletonGrid count={12} />}
|
||||
|
||||
{/* Карточки товаров */}
|
||||
{!loading && !wbCardsLoading && wbCards.length > 0 && (
|
||||
@ -975,10 +1009,13 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
{wbCards.map((card) => {
|
||||
const selectedQuantity = getSelectedQuantity(card)
|
||||
const isSelected = selectedQuantity > 0
|
||||
const selectedCard = actualSelectedCards.find(sc => sc.card.nmID === card.nmID)
|
||||
const selectedCard = actualSelectedCards.find((sc) => sc.card.nmID === card.nmID)
|
||||
|
||||
return (
|
||||
<Card key={card.nmID} className={`bg-white/10 backdrop-blur border-white/20 transition-all hover:scale-105 hover:shadow-2xl group ${isSelected ? 'ring-2 ring-purple-500/50 bg-purple-500/10' : ''} relative overflow-hidden`}>
|
||||
<Card
|
||||
key={card.nmID}
|
||||
className={`bg-white/10 backdrop-blur border-white/20 transition-all hover:scale-105 hover:shadow-2xl group ${isSelected ? 'ring-2 ring-purple-500/50 bg-purple-500/10' : ''} relative overflow-hidden`}
|
||||
>
|
||||
<div className="p-2 space-y-2">
|
||||
{/* Изображение и основная информация */}
|
||||
<div className="space-y-2">
|
||||
@ -990,7 +1027,7 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
className="w-full h-full object-cover cursor-pointer group-hover:scale-110 transition-transform duration-500"
|
||||
onClick={() => handleCardClick(card)}
|
||||
/>
|
||||
|
||||
|
||||
{/* Индикатор товара WB */}
|
||||
<div className="absolute top-2 right-2">
|
||||
<Badge className="bg-blue-500/90 text-white border-0 backdrop-blur text-xs font-medium px-2 py-1">
|
||||
@ -1022,7 +1059,7 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="space-y-2">
|
||||
{/* Заголовок и бренд */}
|
||||
<div>
|
||||
@ -1032,7 +1069,10 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
</Badge>
|
||||
<span className="text-white/40 text-xs">№{card.nmID}</span>
|
||||
</div>
|
||||
<h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight cursor-pointer hover:text-purple-300 transition-colors" onClick={() => handleCardClick(card)}>
|
||||
<h3
|
||||
className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight cursor-pointer hover:text-purple-300 transition-colors"
|
||||
onClick={() => handleCardClick(card)}
|
||||
>
|
||||
{card.title}
|
||||
</h3>
|
||||
</div>
|
||||
@ -1140,12 +1180,12 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
{/* Плавающая кнопка "В корзину" для подготовленных товаров */}
|
||||
{preparingCards.length > 0 && getPreparingTotalItems() > 0 && (
|
||||
<div className="fixed bottom-6 right-6 z-50">
|
||||
<Button
|
||||
<Button
|
||||
onClick={addToCart}
|
||||
className="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white shadow-lg h-12 px-6"
|
||||
>
|
||||
<ShoppingCart className="h-5 w-5 mr-2" />
|
||||
В корзину ({getPreparingTotalItems()}) • {formatCurrency(getPreparingTotalAmount())}
|
||||
<ShoppingCart className="h-5 w-5 mr-2" />В корзину ({getPreparingTotalItems()}) •{' '}
|
||||
{formatCurrency(getPreparingTotalAmount())}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
@ -1155,12 +1195,13 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
<div className="text-center max-w-md mx-auto">
|
||||
<Package className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold text-white mb-2">Нет товаров</h3>
|
||||
{user?.organization?.apiKeys?.find(key => key.marketplace === 'WILDBERRIES')?.isActive ? (
|
||||
{user?.organization?.apiKeys?.find((key) => key.marketplace === 'WILDBERRIES')?.isActive ? (
|
||||
<>
|
||||
<p className="text-white/60 mb-4 text-sm">
|
||||
Введите запрос в поле поиска, чтобы найти товары в вашем каталоге Wildberries, или загрузите все доступные карточки
|
||||
Введите запрос в поле поиска, чтобы найти товары в вашем каталоге Wildberries, или загрузите все
|
||||
доступные карточки
|
||||
</p>
|
||||
<Button
|
||||
<Button
|
||||
onClick={loadAllCards}
|
||||
className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white"
|
||||
>
|
||||
@ -1173,10 +1214,8 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
<p className="text-white/60 mb-3 text-sm">
|
||||
Для работы с полным функционалом WB API необходимо настроить API ключ Wildberries
|
||||
</p>
|
||||
<p className="text-white/40 text-xs mb-4">
|
||||
Загружены товары из вашего склада
|
||||
</p>
|
||||
<Button
|
||||
<p className="text-white/40 text-xs mb-4">Загружены товары из вашего склада</p>
|
||||
<Button
|
||||
onClick={loadAllCards}
|
||||
className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white"
|
||||
>
|
||||
@ -1200,11 +1239,14 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
{/* Изображение */}
|
||||
<div className="relative">
|
||||
<img
|
||||
src={WildberriesService.getCardImages(selectedCardForDetails)[currentImageIndex] || '/api/placeholder/400/400'}
|
||||
src={
|
||||
WildberriesService.getCardImages(selectedCardForDetails)[currentImageIndex] ||
|
||||
'/api/placeholder/400/400'
|
||||
}
|
||||
alt={selectedCardForDetails.title}
|
||||
className="w-full aspect-video rounded-lg object-cover"
|
||||
/>
|
||||
|
||||
|
||||
{/* Навигация по изображениям */}
|
||||
{WildberriesService.getCardImages(selectedCardForDetails).length > 1 && (
|
||||
<>
|
||||
@ -1220,7 +1262,7 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
|
||||
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 bg-black/70 px-3 py-1 rounded-full text-white text-sm">
|
||||
{currentImageIndex + 1} из {WildberriesService.getCardImages(selectedCardForDetails).length}
|
||||
</div>
|
||||
@ -1234,7 +1276,7 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
<h3 className="text-white font-semibold text-lg">{selectedCardForDetails.title}</h3>
|
||||
<p className="text-white/60 text-sm">Артикул WB: {selectedCardForDetails.nmID}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Бренд:</span>
|
||||
@ -1278,4 +1320,4 @@ export function WBProductCards({ onBack, onComplete, showSummary: externalShowSu
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user