Добавлены модели и функциональность для управления логистикой, включая создание, обновление и удаление логистических маршрутов через GraphQL. Обновлены компоненты для отображения и управления логистикой, улучшен интерфейс взаимодействия с пользователем. Реализованы новые типы данных и интерфейсы для логистики, а также улучшена обработка ошибок.
This commit is contained in:
Bivekich
301
src/components/supplies/create-supply-form.tsx
Normal file
301
src/components/supplies/create-supply-form.tsx
Normal file
@ -0,0 +1,301 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
ShoppingCart,
|
||||
Users,
|
||||
ArrowLeft,
|
||||
Package,
|
||||
Building2,
|
||||
MapPin,
|
||||
Phone,
|
||||
Mail,
|
||||
Star
|
||||
} from 'lucide-react'
|
||||
// import { WholesalerSelection } from './wholesaler-selection'
|
||||
|
||||
interface Wholesaler {
|
||||
id: string
|
||||
inn: string
|
||||
name: string
|
||||
fullName: string
|
||||
address: string
|
||||
phone?: string
|
||||
email?: string
|
||||
rating: number
|
||||
productCount: number
|
||||
avatar?: string
|
||||
specialization: string[]
|
||||
}
|
||||
|
||||
interface CreateSupplyFormProps {
|
||||
onClose: () => void
|
||||
onSupplyCreated: () => void
|
||||
}
|
||||
|
||||
// Моковые данные оптовиков
|
||||
const mockWholesalers: Wholesaler[] = [
|
||||
{
|
||||
id: '1',
|
||||
inn: '7707083893',
|
||||
name: 'ОПТ-Электроника',
|
||||
fullName: 'ООО "ОПТ-Электроника"',
|
||||
address: 'г. Москва, ул. Садовая, д. 15',
|
||||
phone: '+7 (495) 123-45-67',
|
||||
email: 'opt@electronics.ru',
|
||||
rating: 4.8,
|
||||
productCount: 1250,
|
||||
specialization: ['Электроника', 'Бытовая техника']
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
inn: '7707083894',
|
||||
name: 'ТекстильМастер',
|
||||
fullName: 'ООО "ТекстильМастер"',
|
||||
address: 'г. Иваново, пр. Ленина, д. 42',
|
||||
phone: '+7 (4932) 55-66-77',
|
||||
email: 'sales@textilmaster.ru',
|
||||
rating: 4.6,
|
||||
productCount: 850,
|
||||
specialization: ['Текстиль', 'Одежда', 'Домашний текстиль']
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
inn: '7707083895',
|
||||
name: 'МетизКомплект',
|
||||
fullName: 'ООО "МетизКомплект"',
|
||||
address: 'г. Тула, ул. Металлургов, д. 8',
|
||||
phone: '+7 (4872) 33-44-55',
|
||||
email: 'info@metiz.ru',
|
||||
rating: 4.9,
|
||||
productCount: 2100,
|
||||
specialization: ['Крепеж', 'Метизы', 'Инструменты']
|
||||
}
|
||||
]
|
||||
|
||||
export function CreateSupplyForm({ onClose, onSupplyCreated }: CreateSupplyFormProps) {
|
||||
const [selectedVariant, setSelectedVariant] = useState<'cards' | 'wholesaler' | null>(null)
|
||||
const [selectedWholesaler, setSelectedWholesaler] = useState<Wholesaler | null>(null)
|
||||
|
||||
const renderStars = (rating: number) => {
|
||||
return Array.from({ length: 5 }, (_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`h-4 w-4 ${i < Math.floor(rating) ? 'text-yellow-400 fill-current' : 'text-gray-400'}`}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
if (selectedVariant === 'wholesaler') {
|
||||
if (selectedWholesaler) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedWholesaler(null)}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад
|
||||
</Button>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white mb-1">Товары оптовика</h2>
|
||||
<p className="text-white/60">{selectedWholesaler.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-center py-12">
|
||||
<p className="text-white/60">Компонент товаров оптовика в разработке...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedVariant(null)}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад
|
||||
</Button>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white mb-1">Выбор оптовика</h2>
|
||||
<p className="text-white/60">Выберите оптовика для создания поставки</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{mockWholesalers.map((wholesaler) => (
|
||||
<Card
|
||||
key={wholesaler.id}
|
||||
className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-105"
|
||||
onClick={() => setSelectedWholesaler(wholesaler)}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Заголовок карточки */}
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="p-3 bg-blue-500/20 rounded-lg">
|
||||
<Building2 className="h-6 w-6 text-blue-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-white font-semibold text-lg mb-1 truncate">
|
||||
{wholesaler.name}
|
||||
</h3>
|
||||
<p className="text-white/60 text-xs mb-2 truncate">
|
||||
{wholesaler.fullName}
|
||||
</p>
|
||||
<div className="flex items-center space-x-1 mb-2">
|
||||
{renderStars(wholesaler.rating)}
|
||||
<span className="text-white/60 text-sm ml-2">{wholesaler.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Информация */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<MapPin className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm truncate">{wholesaler.address}</span>
|
||||
</div>
|
||||
|
||||
{wholesaler.phone && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Phone className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm">{wholesaler.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{wholesaler.email && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Mail className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm truncate">{wholesaler.email}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Package className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm">{wholesaler.productCount} товаров</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Специализация */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-white/60 text-xs">Специализация:</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{wholesaler.specialization.map((spec, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs"
|
||||
>
|
||||
{spec}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ИНН */}
|
||||
<div className="pt-2 border-t border-white/10">
|
||||
<p className="text-white/60 text-xs">ИНН: {wholesaler.inn}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white mb-2">Создание поставки</h2>
|
||||
<p className="text-white/60">Выберите способ создания поставки</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Вариант 1: Карточки */}
|
||||
<Card
|
||||
className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30"
|
||||
onClick={() => setSelectedVariant('cards')}
|
||||
>
|
||||
<div className="text-center space-y-4">
|
||||
<div className="p-4 bg-blue-500/20 rounded-lg w-fit mx-auto">
|
||||
<ShoppingCart className="h-8 w-8 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">Карточки</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Создание поставки через выбор товаров по карточкам
|
||||
</p>
|
||||
</div>
|
||||
<Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30">
|
||||
В разработке
|
||||
</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Вариант 2: Оптовик */}
|
||||
<Card
|
||||
className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30"
|
||||
onClick={() => setSelectedVariant('wholesaler')}
|
||||
>
|
||||
<div className="text-center space-y-4">
|
||||
<div className="p-4 bg-green-500/20 rounded-lg w-fit mx-auto">
|
||||
<Users className="h-8 w-8 text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">Оптовик</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Создание поставки через выбор товаров у оптовиков
|
||||
</p>
|
||||
</div>
|
||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/30">
|
||||
Доступно
|
||||
</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
782
src/components/supplies/create-supply-page.tsx
Normal file
782
src/components/supplies/create-supply-page.tsx
Normal file
@ -0,0 +1,782 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||
import {
|
||||
ArrowLeft,
|
||||
ShoppingCart,
|
||||
Users,
|
||||
Building2,
|
||||
MapPin,
|
||||
Phone,
|
||||
Mail,
|
||||
Star,
|
||||
Plus,
|
||||
Minus,
|
||||
Info,
|
||||
Package,
|
||||
Zap,
|
||||
Heart,
|
||||
Eye,
|
||||
ShoppingBag
|
||||
} from 'lucide-react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface WholesalerForCreation {
|
||||
id: string
|
||||
inn: string
|
||||
name: string
|
||||
fullName: string
|
||||
address: string
|
||||
phone?: string
|
||||
email?: string
|
||||
rating: number
|
||||
productCount: number
|
||||
avatar?: string
|
||||
specialization: string[]
|
||||
}
|
||||
|
||||
interface WholesalerProduct {
|
||||
id: string
|
||||
name: string
|
||||
article: string
|
||||
description: string
|
||||
price: number
|
||||
quantity: number
|
||||
category: string
|
||||
brand?: string
|
||||
color?: string
|
||||
size?: string
|
||||
weight?: number
|
||||
dimensions?: string
|
||||
material?: string
|
||||
images: string[]
|
||||
mainImage?: string
|
||||
discount?: number
|
||||
isNew?: boolean
|
||||
isBestseller?: boolean
|
||||
}
|
||||
|
||||
interface SelectedProduct extends WholesalerProduct {
|
||||
selectedQuantity: number
|
||||
}
|
||||
|
||||
// Моковые данные оптовиков
|
||||
const mockWholesalers: WholesalerForCreation[] = [
|
||||
{
|
||||
id: '1',
|
||||
inn: '7707083893',
|
||||
name: 'ОПТ-Электроника',
|
||||
fullName: 'ООО "ОПТ-Электроника"',
|
||||
address: 'г. Москва, ул. Садовая, д. 15',
|
||||
phone: '+7 (495) 123-45-67',
|
||||
email: 'opt@electronics.ru',
|
||||
rating: 4.8,
|
||||
productCount: 1250,
|
||||
specialization: ['Электроника', 'Бытовая техника']
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
inn: '7707083894',
|
||||
name: 'ТекстильМастер',
|
||||
fullName: 'ООО "ТекстильМастер"',
|
||||
address: 'г. Иваново, пр. Ленина, д. 42',
|
||||
phone: '+7 (4932) 55-66-77',
|
||||
email: 'sales@textilmaster.ru',
|
||||
rating: 4.6,
|
||||
productCount: 850,
|
||||
specialization: ['Текстиль', 'Одежда', 'Домашний текстиль']
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
inn: '7707083895',
|
||||
name: 'МетизКомплект',
|
||||
fullName: 'ООО "МетизКомплект"',
|
||||
address: 'г. Тула, ул. Металлургов, д. 8',
|
||||
phone: '+7 (4872) 33-44-55',
|
||||
email: 'info@metiz.ru',
|
||||
rating: 4.9,
|
||||
productCount: 2100,
|
||||
specialization: ['Крепеж', 'Метизы', 'Инструменты']
|
||||
}
|
||||
]
|
||||
|
||||
// Улучшенные моковые данные товаров
|
||||
const mockProducts: WholesalerProduct[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'iPhone 15 Pro Max',
|
||||
article: 'APL-15PM-256',
|
||||
description: 'Флагманский смартфон Apple с титановым корпусом, камерой 48 МП и чипом A17 Pro',
|
||||
price: 124900,
|
||||
quantity: 45,
|
||||
category: 'Смартфоны',
|
||||
brand: 'Apple',
|
||||
color: 'Натуральный титан',
|
||||
size: '6.7"',
|
||||
weight: 221,
|
||||
dimensions: '159.9 x 76.7 x 8.25 мм',
|
||||
material: 'Титан, стекло',
|
||||
images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-15-pro-max-naturaltitanium-select?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1692845705224'],
|
||||
mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-15-pro-max-naturaltitanium-select?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1692845705224',
|
||||
isNew: true,
|
||||
isBestseller: true
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Sony WH-1000XM5',
|
||||
article: 'SNY-WH1000XM5',
|
||||
description: 'Беспроводные наушники премиум-класса с лучшим в отрасли шумоподавлением',
|
||||
price: 34900,
|
||||
quantity: 128,
|
||||
category: 'Наушники',
|
||||
brand: 'Sony',
|
||||
color: 'Черный',
|
||||
weight: 250,
|
||||
material: 'Пластик, эко-кожа',
|
||||
images: ['https://www.sony.ru/image/5d02da5df552836db894cead8a68f5f3?fmt=pjpeg&wid=330&bgcolor=FFFFFF&bgc=FFFFFF'],
|
||||
mainImage: 'https://www.sony.ru/image/5d02da5df552836db894cead8a68f5f3?fmt=pjpeg&wid=330&bgcolor=FFFFFF&bgc=FFFFFF',
|
||||
discount: 15,
|
||||
isBestseller: true
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'iPad Pro 12.9" M2',
|
||||
article: 'APL-IPADPRO-M2',
|
||||
description: 'Самый мощный iPad с чипом M2, дисплеем Liquid Retina XDR и поддержкой Apple Pencil',
|
||||
price: 109900,
|
||||
quantity: 32,
|
||||
category: 'Планшеты',
|
||||
brand: 'Apple',
|
||||
color: 'Серый космос',
|
||||
size: '12.9"',
|
||||
weight: 682,
|
||||
dimensions: '280.6 x 214.9 x 6.4 мм',
|
||||
material: 'Алюминий',
|
||||
images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/ipad-pro-12-select-wifi-spacegray-202210?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1664411207213'],
|
||||
mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/ipad-pro-12-select-wifi-spacegray-202210?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1664411207213',
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'MacBook Pro 16" M3 Max',
|
||||
article: 'APL-MBP16-M3MAX',
|
||||
description: 'Профессиональный ноутбук с чипом M3 Max, 36 ГБ памяти и дисплеем Liquid Retina XDR',
|
||||
price: 329900,
|
||||
quantity: 18,
|
||||
category: 'Ноутбуки',
|
||||
brand: 'Apple',
|
||||
color: 'Серый космос',
|
||||
size: '16"',
|
||||
weight: 2160,
|
||||
dimensions: '355.7 x 248.1 x 16.8 мм',
|
||||
material: 'Алюминий',
|
||||
images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/mbp16-spacegray-select-202310?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1697230830200'],
|
||||
mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/mbp16-spacegray-select-202310?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1697230830200',
|
||||
isNew: true,
|
||||
isBestseller: true
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Apple Watch Ultra 2',
|
||||
article: 'APL-AWU2-49',
|
||||
description: 'Самые прочные и функциональные умные часы Apple для экстремальных приключений',
|
||||
price: 89900,
|
||||
quantity: 67,
|
||||
category: 'Умные часы',
|
||||
brand: 'Apple',
|
||||
color: 'Натуральный титан',
|
||||
size: '49 мм',
|
||||
weight: 61,
|
||||
dimensions: '49 x 44 x 14.4 мм',
|
||||
material: 'Титан',
|
||||
images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/watch-ultra2-select-202309?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1693967875133'],
|
||||
mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/watch-ultra2-select-202309?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1693967875133',
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'Magic Keyboard для iPad Pro',
|
||||
article: 'APL-MK-IPADPRO',
|
||||
description: 'Клавиатура с трекпадом и подсветкой клавиш для iPad Pro 12.9"',
|
||||
price: 36900,
|
||||
quantity: 89,
|
||||
category: 'Аксессуары',
|
||||
brand: 'Apple',
|
||||
color: 'Черный',
|
||||
weight: 710,
|
||||
dimensions: '280.9 x 214.3 x 25 мм',
|
||||
material: 'Алюминий, пластик',
|
||||
images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MJQJ3?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1639066901000'],
|
||||
mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MJQJ3?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1639066901000'
|
||||
}
|
||||
]
|
||||
|
||||
export function CreateSupplyPage() {
|
||||
const router = useRouter()
|
||||
const [selectedVariant, setSelectedVariant] = useState<'cards' | 'wholesaler' | null>(null)
|
||||
const [selectedWholesaler, setSelectedWholesaler] = useState<WholesalerForCreation | null>(null)
|
||||
const [selectedProducts, setSelectedProducts] = useState<SelectedProduct[]>([])
|
||||
const [showSummary, setShowSummary] = useState(false)
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('ru-RU', {
|
||||
style: 'currency',
|
||||
currency: 'RUB',
|
||||
minimumFractionDigits: 0
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
const renderStars = (rating: number) => {
|
||||
return Array.from({ length: 5 }, (_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`h-4 w-4 ${i < Math.floor(rating) ? 'text-yellow-400 fill-current' : 'text-gray-400'}`}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
const updateProductQuantity = (productId: string, quantity: number) => {
|
||||
const product = mockProducts.find(p => p.id === productId)
|
||||
if (!product) return
|
||||
|
||||
setSelectedProducts(prev => {
|
||||
const existing = prev.find(p => p.id === productId)
|
||||
|
||||
if (quantity === 0) {
|
||||
return prev.filter(p => p.id !== productId)
|
||||
}
|
||||
|
||||
if (existing) {
|
||||
return prev.map(p =>
|
||||
p.id === productId ? { ...p, selectedQuantity: quantity } : p
|
||||
)
|
||||
} else {
|
||||
return [...prev, { ...product, selectedQuantity: quantity }]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getSelectedQuantity = (productId: string): number => {
|
||||
const selected = selectedProducts.find(p => p.id === productId)
|
||||
return selected ? selected.selectedQuantity : 0
|
||||
}
|
||||
|
||||
const getTotalAmount = () => {
|
||||
return selectedProducts.reduce((sum, product) => {
|
||||
const discountedPrice = product.discount
|
||||
? product.price * (1 - product.discount / 100)
|
||||
: product.price
|
||||
return sum + (discountedPrice * product.selectedQuantity)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const getTotalItems = () => {
|
||||
return selectedProducts.reduce((sum, product) => sum + product.selectedQuantity, 0)
|
||||
}
|
||||
|
||||
const handleCreateSupply = () => {
|
||||
console.log('Создание поставки с товарами:', selectedProducts)
|
||||
// TODO: Здесь будет реальное создание поставки
|
||||
router.push('/supplies')
|
||||
}
|
||||
|
||||
const handleGoBack = () => {
|
||||
if (selectedWholesaler) {
|
||||
setSelectedWholesaler(null)
|
||||
setSelectedProducts([])
|
||||
setShowSummary(false)
|
||||
} else if (selectedVariant) {
|
||||
setSelectedVariant(null)
|
||||
} else {
|
||||
router.push('/supplies')
|
||||
}
|
||||
}
|
||||
|
||||
// Рендер товаров оптовика
|
||||
if (selectedWholesaler && selectedVariant === 'wholesaler') {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56">
|
||||
<div className="p-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleGoBack}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Товары оптовика</h1>
|
||||
<p className="text-white/60">{selectedWholesaler.name} • {mockProducts.length} товаров</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowSummary(!showSummary)}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<Info className="h-4 w-4 mr-2" />
|
||||
Резюме ({selectedProducts.length})
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showSummary && selectedProducts.length > 0 && (
|
||||
<Card className="bg-gradient-to-r from-purple-500/10 to-pink-500/10 backdrop-blur border-purple-500/30 p-8 mb-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-white font-semibold text-xl flex items-center">
|
||||
<ShoppingBag className="h-5 w-5 mr-2" />
|
||||
Резюме заказа
|
||||
</h3>
|
||||
<Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30">
|
||||
{selectedProducts.length} товаров
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{selectedProducts.map((product) => {
|
||||
const discountedPrice = product.discount
|
||||
? product.price * (1 - product.discount / 100)
|
||||
: product.price
|
||||
return (
|
||||
<div key={product.id} className="flex justify-between items-center bg-white/5 rounded-lg p-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<img
|
||||
src={product.mainImage || '/api/placeholder/60/60'}
|
||||
alt={product.name}
|
||||
className="w-12 h-12 rounded-lg object-cover"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-white font-medium">{product.name}</span>
|
||||
<div className="flex items-center space-x-2 mt-1">
|
||||
<span className="text-white/60 text-sm">× {product.selectedQuantity}</span>
|
||||
{product.discount && (
|
||||
<Badge className="bg-red-500/20 text-red-300 border-red-500/30 text-xs">
|
||||
-{product.discount}%
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-white font-bold">
|
||||
{formatCurrency(discountedPrice * product.selectedQuantity)}
|
||||
</span>
|
||||
{product.discount && (
|
||||
<div className="text-white/40 text-sm line-through">
|
||||
{formatCurrency(product.price * product.selectedQuantity)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div className="border-t border-white/20 pt-6 flex justify-between items-center">
|
||||
<span className="text-white font-semibold text-lg">
|
||||
Итого: {getTotalItems()} товаров
|
||||
</span>
|
||||
<span className="text-white font-bold text-2xl">
|
||||
{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 text-lg py-6"
|
||||
onClick={handleCreateSupply}
|
||||
disabled={selectedProducts.length === 0}
|
||||
>
|
||||
<ShoppingCart className="h-5 w-5 mr-2" />
|
||||
Создать поставку
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{mockProducts.map((product) => {
|
||||
const selectedQuantity = getSelectedQuantity(product.id)
|
||||
const discountedPrice = product.discount
|
||||
? product.price * (1 - product.discount / 100)
|
||||
: product.price
|
||||
|
||||
return (
|
||||
<Card key={product.id} className="bg-white/10 backdrop-blur border-white/20 overflow-hidden group hover:bg-white/15 hover:border-white/30 transition-all duration-300 hover:scale-105 hover:shadow-2xl">
|
||||
<div className="aspect-square relative bg-white/5 overflow-hidden">
|
||||
<img
|
||||
src={product.mainImage || '/api/placeholder/400/400'}
|
||||
alt={product.name}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
|
||||
{/* Badges в верхних углах */}
|
||||
<div className="absolute top-3 left-3 flex flex-col space-y-2">
|
||||
{product.isNew && (
|
||||
<Badge className="bg-blue-500 text-white border-0 font-medium">
|
||||
<Zap className="h-3 w-3 mr-1" />
|
||||
NEW
|
||||
</Badge>
|
||||
)}
|
||||
{product.isBestseller && (
|
||||
<Badge className="bg-orange-500 text-white border-0 font-medium">
|
||||
<Star className="h-3 w-3 mr-1" />
|
||||
ХИТ
|
||||
</Badge>
|
||||
)}
|
||||
{product.discount && (
|
||||
<Badge className="bg-red-500 text-white border-0 font-bold">
|
||||
-{product.discount}%
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Количество в наличии */}
|
||||
<div className="absolute top-3 right-3">
|
||||
<Badge className={`${product.quantity > 50 ? 'bg-green-500/80' : product.quantity > 10 ? 'bg-yellow-500/80' : 'bg-red-500/80'} text-white border-0 backdrop-blur`}>
|
||||
{product.quantity} шт
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Overlay с кнопками */}
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||||
<div className="flex space-x-2">
|
||||
<Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
|
||||
<Heart className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-4">
|
||||
{/* Заголовок и бренд */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
{product.brand && (
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
|
||||
{product.brand}
|
||||
</Badge>
|
||||
)}
|
||||
<Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
|
||||
{product.category}
|
||||
</Badge>
|
||||
</div>
|
||||
<h3 className="text-white font-semibold text-lg mb-1 line-clamp-2 leading-tight">
|
||||
{product.name}
|
||||
</h3>
|
||||
<p className="text-white/60 text-xs mb-2">
|
||||
Артикул: {product.article}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Описание */}
|
||||
<p className="text-white/70 text-sm line-clamp-2 leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
|
||||
{/* Характеристики */}
|
||||
<div className="space-y-2">
|
||||
{product.color && (
|
||||
<div className="text-white/60 text-xs flex items-center">
|
||||
<div className="w-3 h-3 rounded-full bg-gray-400 mr-2"></div>
|
||||
Цвет: <span className="text-white ml-1">{product.color}</span>
|
||||
</div>
|
||||
)}
|
||||
{product.size && (
|
||||
<div className="text-white/60 text-xs">
|
||||
Размер: <span className="text-white">{product.size}</span>
|
||||
</div>
|
||||
)}
|
||||
{product.weight && (
|
||||
<div className="text-white/60 text-xs">
|
||||
Вес: <span className="text-white">{product.weight} г</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Цена */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-white/10">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="text-white font-bold text-xl">
|
||||
{formatCurrency(discountedPrice)}
|
||||
</div>
|
||||
{product.discount && (
|
||||
<div className="text-white/40 text-sm line-through">
|
||||
{formatCurrency(product.price)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-white/60 text-xs">за штуку</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Управление количеством */}
|
||||
<div className="flex items-center justify-between space-x-3">
|
||||
<div className="flex items-center space-x-2 flex-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateProductQuantity(product.id, Math.max(0, selectedQuantity - 1))}
|
||||
disabled={selectedQuantity === 0}
|
||||
className="h-9 w-9 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<Input
|
||||
type="number"
|
||||
value={selectedQuantity}
|
||||
onChange={(e) => {
|
||||
const value = Math.max(0, Math.min(product.quantity, parseInt(e.target.value) || 0))
|
||||
updateProductQuantity(product.id, value)
|
||||
}}
|
||||
className="h-9 w-16 text-center bg-white/10 border-white/20 text-white text-sm"
|
||||
min={0}
|
||||
max={product.quantity}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateProductQuantity(product.id, Math.min(product.quantity, selectedQuantity + 1))}
|
||||
disabled={selectedQuantity >= product.quantity}
|
||||
className="h-9 w-9 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{selectedQuantity > 0 && (
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white flex-shrink-0"
|
||||
>
|
||||
<ShoppingCart className="h-4 w-4 mr-1" />
|
||||
{selectedQuantity}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Сумма для выбранного товара */}
|
||||
{selectedQuantity > 0 && (
|
||||
<div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded-lg p-3">
|
||||
<div className="text-green-300 text-sm font-medium text-center">
|
||||
Сумма: {formatCurrency(discountedPrice * selectedQuantity)}
|
||||
{product.discount && (
|
||||
<span className="text-green-200 text-xs ml-2">
|
||||
(экономия {formatCurrency((product.price - discountedPrice) * selectedQuantity)})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Floating корзина */}
|
||||
{selectedProducts.length > 0 && (
|
||||
<div className="fixed bottom-6 right-6 z-50">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-2xl text-lg px-8 py-4"
|
||||
onClick={() => setShowSummary(!showSummary)}
|
||||
>
|
||||
<ShoppingCart className="h-5 w-5 mr-3" />
|
||||
Корзина ({selectedProducts.length}) • {formatCurrency(getTotalAmount())}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Рендер выбора оптовиков
|
||||
if (selectedVariant === 'wholesaler') {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56">
|
||||
<div className="p-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleGoBack}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Выбор оптовика</h1>
|
||||
<p className="text-white/60">Выберите оптовика для создания поставки</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{mockWholesalers.map((wholesaler) => (
|
||||
<Card
|
||||
key={wholesaler.id}
|
||||
className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-105"
|
||||
onClick={() => setSelectedWholesaler(wholesaler)}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="p-3 bg-blue-500/20 rounded-lg">
|
||||
<Building2 className="h-6 w-6 text-blue-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-white font-semibold text-lg mb-1 truncate">
|
||||
{wholesaler.name}
|
||||
</h3>
|
||||
<p className="text-white/60 text-xs mb-2 truncate">
|
||||
{wholesaler.fullName}
|
||||
</p>
|
||||
<div className="flex items-center space-x-1 mb-2">
|
||||
{renderStars(wholesaler.rating)}
|
||||
<span className="text-white/60 text-sm ml-2">{wholesaler.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<MapPin className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm truncate">{wholesaler.address}</span>
|
||||
</div>
|
||||
|
||||
{wholesaler.phone && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Phone className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm">{wholesaler.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{wholesaler.email && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Mail className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm truncate">{wholesaler.email}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Package className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm">{wholesaler.productCount} товаров</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-white/60 text-xs">Специализация:</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{wholesaler.specialization.map((spec, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs"
|
||||
>
|
||||
{spec}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-white/10">
|
||||
<p className="text-white/60 text-xs">ИНН: {wholesaler.inn}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Главная страница выбора варианта
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56">
|
||||
<div className="p-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => router.push('/supplies')}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад к поставкам
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Создание поставки</h1>
|
||||
<p className="text-white/60">Выберите способ создания поставки</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<Card
|
||||
className="bg-white/10 backdrop-blur border-white/20 p-8 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-105"
|
||||
onClick={() => setSelectedVariant('cards')}
|
||||
>
|
||||
<div className="text-center space-y-6">
|
||||
<div className="p-6 bg-blue-500/20 rounded-2xl w-fit mx-auto">
|
||||
<ShoppingCart className="h-12 w-12 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold text-white mb-3">Карточки</h3>
|
||||
<p className="text-white/60">
|
||||
Создание поставки через выбор товаров по карточкам
|
||||
</p>
|
||||
</div>
|
||||
<Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30 text-lg px-4 py-2">
|
||||
В разработке
|
||||
</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
className="bg-white/10 backdrop-blur border-white/20 p-8 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-105"
|
||||
onClick={() => setSelectedVariant('wholesaler')}
|
||||
>
|
||||
<div className="text-center space-y-6">
|
||||
<div className="p-6 bg-green-500/20 rounded-2xl w-fit mx-auto">
|
||||
<Users className="h-12 w-12 text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold text-white mb-3">Оптовик</h3>
|
||||
<p className="text-white/60">
|
||||
Создание поставки через выбор товаров у оптовиков
|
||||
</p>
|
||||
</div>
|
||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-lg px-4 py-2">
|
||||
Доступно
|
||||
</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
724
src/components/supplies/supplies-dashboard.tsx
Normal file
724
src/components/supplies/supplies-dashboard.tsx
Normal file
@ -0,0 +1,724 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
Calendar,
|
||||
Package,
|
||||
MapPin,
|
||||
Building2,
|
||||
TrendingUp,
|
||||
AlertTriangle,
|
||||
DollarSign
|
||||
} from 'lucide-react'
|
||||
|
||||
|
||||
// Типы данных для 5-уровневой структуры
|
||||
|
||||
|
||||
|
||||
interface ProductParameter {
|
||||
id: string
|
||||
name: string
|
||||
value: string
|
||||
unit?: string
|
||||
}
|
||||
|
||||
interface Product {
|
||||
id: string
|
||||
name: string
|
||||
sku: string
|
||||
category: string
|
||||
plannedQty: number
|
||||
actualQty: number
|
||||
defectQty: number
|
||||
productPrice: number
|
||||
parameters: ProductParameter[]
|
||||
}
|
||||
|
||||
interface Wholesaler {
|
||||
id: string
|
||||
name: string
|
||||
inn: string
|
||||
contact: string
|
||||
address: string
|
||||
products: Product[]
|
||||
totalAmount: number
|
||||
}
|
||||
|
||||
interface Route {
|
||||
id: string
|
||||
from: string
|
||||
fromAddress: string
|
||||
to: string
|
||||
toAddress: string
|
||||
wholesalers: Wholesaler[]
|
||||
totalProductPrice: number
|
||||
fulfillmentServicePrice: number
|
||||
logisticsPrice: number
|
||||
totalAmount: number
|
||||
}
|
||||
|
||||
interface Supply {
|
||||
id: string
|
||||
number: number
|
||||
deliveryDate: string
|
||||
createdDate: string
|
||||
routes: Route[]
|
||||
plannedTotal: number
|
||||
actualTotal: number
|
||||
defectTotal: number
|
||||
totalProductPrice: number
|
||||
totalFulfillmentPrice: number
|
||||
totalLogisticsPrice: number
|
||||
grandTotal: number
|
||||
status: 'planned' | 'in-transit' | 'delivered' | 'completed'
|
||||
}
|
||||
|
||||
// Моковые данные для 5-уровневой структуры
|
||||
const mockSupplies: Supply[] = [
|
||||
{
|
||||
id: '1',
|
||||
number: 1,
|
||||
deliveryDate: '2024-01-15',
|
||||
createdDate: '2024-01-10',
|
||||
status: 'delivered',
|
||||
plannedTotal: 180,
|
||||
actualTotal: 173,
|
||||
defectTotal: 2,
|
||||
totalProductPrice: 3750000,
|
||||
totalFulfillmentPrice: 43000,
|
||||
totalLogisticsPrice: 27000,
|
||||
grandTotal: 3820000,
|
||||
routes: [
|
||||
{
|
||||
id: 'r1',
|
||||
from: 'Садовод',
|
||||
fromAddress: 'Москва, 14-й км МКАД',
|
||||
to: 'SFERAV Logistics',
|
||||
toAddress: 'Москва, ул. Складская, 15',
|
||||
totalProductPrice: 3600000,
|
||||
fulfillmentServicePrice: 25000,
|
||||
logisticsPrice: 15000,
|
||||
totalAmount: 3640000,
|
||||
wholesalers: [
|
||||
{
|
||||
id: 'w1',
|
||||
name: 'ООО "ТехноСнаб"',
|
||||
inn: '7701234567',
|
||||
contact: '+7 (495) 123-45-67',
|
||||
address: 'Москва, ул. Торговая, 1',
|
||||
totalAmount: 3600000,
|
||||
products: [
|
||||
{
|
||||
id: 'p1',
|
||||
name: 'Смартфон iPhone 15',
|
||||
sku: 'APL-IP15-128',
|
||||
category: 'Электроника',
|
||||
plannedQty: 50,
|
||||
actualQty: 48,
|
||||
defectQty: 2,
|
||||
productPrice: 75000,
|
||||
parameters: [
|
||||
{ id: 'param1', name: 'Цвет', value: 'Черный' },
|
||||
{ id: 'param2', name: 'Память', value: '128', unit: 'ГБ' },
|
||||
{ id: 'param3', name: 'Гарантия', value: '12', unit: 'мес' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'r2',
|
||||
from: 'ТЯК Москва',
|
||||
fromAddress: 'Москва, Алтуфьевское шоссе, 27',
|
||||
to: 'MegaFulfillment',
|
||||
toAddress: 'Подольск, ул. Индустриальная, 42',
|
||||
totalProductPrice: 150000,
|
||||
fulfillmentServicePrice: 18000,
|
||||
logisticsPrice: 12000,
|
||||
totalAmount: 180000,
|
||||
wholesalers: [
|
||||
{
|
||||
id: 'w2',
|
||||
name: 'ИП Петров А.В.',
|
||||
inn: '123456789012',
|
||||
contact: '+7 (499) 987-65-43',
|
||||
address: 'Москва, пр-т Мира, 45',
|
||||
totalAmount: 150000,
|
||||
products: [
|
||||
{
|
||||
id: 'p2',
|
||||
name: 'Чехол для iPhone 15',
|
||||
sku: 'ACC-IP15-CASE',
|
||||
category: 'Аксессуары',
|
||||
plannedQty: 100,
|
||||
actualQty: 95,
|
||||
defectQty: 0,
|
||||
productPrice: 1500,
|
||||
parameters: [
|
||||
{ id: 'param4', name: 'Материал', value: 'Силикон' },
|
||||
{ id: 'param5', name: 'Цвет', value: 'Прозрачный' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
number: 2,
|
||||
deliveryDate: '2024-01-20',
|
||||
createdDate: '2024-01-12',
|
||||
status: 'in-transit',
|
||||
plannedTotal: 30,
|
||||
actualTotal: 30,
|
||||
defectTotal: 0,
|
||||
totalProductPrice: 750000,
|
||||
totalFulfillmentPrice: 18000,
|
||||
totalLogisticsPrice: 12000,
|
||||
grandTotal: 780000,
|
||||
routes: [
|
||||
{
|
||||
id: 'r3',
|
||||
from: 'Садовод',
|
||||
fromAddress: 'Москва, 14-й км МКАД',
|
||||
to: 'WB Подольск',
|
||||
toAddress: 'Подольск, ул. Складская, 25',
|
||||
totalProductPrice: 750000,
|
||||
fulfillmentServicePrice: 18000,
|
||||
logisticsPrice: 12000,
|
||||
totalAmount: 780000,
|
||||
wholesalers: [
|
||||
{
|
||||
id: 'w3',
|
||||
name: 'ООО "АудиоТех"',
|
||||
inn: '7702345678',
|
||||
contact: '+7 (495) 555-12-34',
|
||||
address: 'Москва, ул. Звуковая, 8',
|
||||
totalAmount: 750000,
|
||||
products: [
|
||||
{
|
||||
id: 'p3',
|
||||
name: 'Наушники AirPods Pro',
|
||||
sku: 'APL-AP-PRO2',
|
||||
category: 'Аудио',
|
||||
plannedQty: 30,
|
||||
actualQty: 30,
|
||||
defectQty: 0,
|
||||
productPrice: 25000,
|
||||
parameters: [
|
||||
{ id: 'param6', name: 'Тип', value: 'Беспроводные' },
|
||||
{ id: 'param7', name: 'Шумоподавление', value: 'Активное' },
|
||||
{ id: 'param8', name: 'Время работы', value: '6', unit: 'ч' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export function SuppliesDashboard() {
|
||||
const [expandedSupplies, setExpandedSupplies] = useState<Set<string>>(new Set())
|
||||
const [expandedRoutes, setExpandedRoutes] = useState<Set<string>>(new Set())
|
||||
const [expandedWholesalers, setExpandedWholesalers] = useState<Set<string>>(new Set())
|
||||
const [expandedProducts, setExpandedProducts] = useState<Set<string>>(new Set())
|
||||
|
||||
|
||||
const toggleSupplyExpansion = (supplyId: string) => {
|
||||
const newExpanded = new Set(expandedSupplies)
|
||||
if (newExpanded.has(supplyId)) {
|
||||
newExpanded.delete(supplyId)
|
||||
} else {
|
||||
newExpanded.add(supplyId)
|
||||
}
|
||||
setExpandedSupplies(newExpanded)
|
||||
}
|
||||
|
||||
const toggleRouteExpansion = (routeId: string) => {
|
||||
const newExpanded = new Set(expandedRoutes)
|
||||
if (newExpanded.has(routeId)) {
|
||||
newExpanded.delete(routeId)
|
||||
} else {
|
||||
newExpanded.add(routeId)
|
||||
}
|
||||
setExpandedRoutes(newExpanded)
|
||||
}
|
||||
|
||||
const toggleWholesalerExpansion = (wholesalerId: string) => {
|
||||
const newExpanded = new Set(expandedWholesalers)
|
||||
if (newExpanded.has(wholesalerId)) {
|
||||
newExpanded.delete(wholesalerId)
|
||||
} else {
|
||||
newExpanded.add(wholesalerId)
|
||||
}
|
||||
setExpandedWholesalers(newExpanded)
|
||||
}
|
||||
|
||||
const toggleProductExpansion = (productId: string) => {
|
||||
const newExpanded = new Set(expandedProducts)
|
||||
if (newExpanded.has(productId)) {
|
||||
newExpanded.delete(productId)
|
||||
} else {
|
||||
newExpanded.add(productId)
|
||||
}
|
||||
setExpandedProducts(newExpanded)
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: Supply['status']) => {
|
||||
const statusMap = {
|
||||
planned: { label: 'Запланирована', color: 'bg-blue-500/20 text-blue-300 border-blue-500/30' },
|
||||
'in-transit': { label: 'В пути', color: 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30' },
|
||||
delivered: { label: 'Доставлена', color: 'bg-green-500/20 text-green-300 border-green-500/30' },
|
||||
completed: { label: 'Завершена', color: 'bg-purple-500/20 text-purple-300 border-purple-500/30' }
|
||||
}
|
||||
const { label, color } = statusMap[status]
|
||||
return <Badge className={`${color} border`}>{label}</Badge>
|
||||
}
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('ru-RU', {
|
||||
style: 'currency',
|
||||
currency: 'RUB',
|
||||
minimumFractionDigits: 0
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const calculateProductTotal = (product: Product) => {
|
||||
return product.actualQty * product.productPrice
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const getEfficiencyBadge = (planned: number, actual: number, defect: number) => {
|
||||
const efficiency = ((actual - defect) / planned) * 100
|
||||
if (efficiency >= 95) {
|
||||
return <Badge className="bg-green-500/20 text-green-300 border-green-500/30 border">Отлично</Badge>
|
||||
} else if (efficiency >= 90) {
|
||||
return <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30 border">Хорошо</Badge>
|
||||
} else {
|
||||
return <Badge className="bg-red-500/20 text-red-300 border-red-500/30 border">Проблемы</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56">
|
||||
<div className="p-8">
|
||||
{/* Заголовок */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Поставки</h1>
|
||||
<p className="text-white/60">Управление поставками товаров</p>
|
||||
</div>
|
||||
<Button
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg"
|
||||
onClick={() => {
|
||||
window.location.href = '/supplies/create'
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать поставку
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Статистика */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-3 bg-blue-500/20 rounded-lg">
|
||||
<Package className="h-6 w-6 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">Всего поставок</p>
|
||||
<p className="text-2xl font-bold text-white">{mockSupplies.length}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-3 bg-green-500/20 rounded-lg">
|
||||
<TrendingUp className="h-6 w-6 text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">Общая сумма</p>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{formatCurrency(mockSupplies.reduce((sum, supply) => sum + supply.grandTotal, 0))}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-3 bg-yellow-500/20 rounded-lg">
|
||||
<Calendar className="h-6 w-6 text-yellow-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">В пути</p>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{mockSupplies.filter(supply => supply.status === 'in-transit').length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-3 bg-red-500/20 rounded-lg">
|
||||
<AlertTriangle className="h-6 w-6 text-red-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">С браком</p>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{mockSupplies.filter(supply => supply.defectTotal > 0).length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Многоуровневая таблица поставок */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-white/20">
|
||||
<th className="text-left p-4 text-white font-semibold">№</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Дата поставки</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Дата создания</th>
|
||||
<th className="text-left p-4 text-white font-semibold">План</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Брак</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Цена товаров</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Услуги ФФ</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Логистика до ФФ</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Итого сумма</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Статус</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mockSupplies.map((supply) => {
|
||||
const isSupplyExpanded = expandedSupplies.has(supply.id)
|
||||
|
||||
return (
|
||||
<React.Fragment key={supply.id}>
|
||||
{/* Уровень 1: Основная строка поставки */}
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10">
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleSupplyExpansion(supply.id)}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isSupplyExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<span className="text-white font-bold text-lg">#{supply.number}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-semibold">{formatDate(supply.deliveryDate)}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">{formatDate(supply.createdDate)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{supply.plannedTotal}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{supply.actualTotal}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className={`font-semibold ${supply.defectTotal > 0 ? 'text-red-400' : 'text-white'}`}>
|
||||
{supply.defectTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-semibold">{formatCurrency(supply.totalProductPrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-blue-400 font-semibold">{formatCurrency(supply.totalFulfillmentPrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-purple-400 font-semibold">{formatCurrency(supply.totalLogisticsPrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<DollarSign className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-bold text-lg">{formatCurrency(supply.grandTotal)}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
{getStatusBadge(supply.status)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Уровень 2: Маршруты */}
|
||||
{isSupplyExpanded && supply.routes.map((route) => {
|
||||
const isRouteExpanded = expandedRoutes.has(route.id)
|
||||
return (
|
||||
<React.Fragment key={route.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10">
|
||||
<td className="p-4 pl-12">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleRouteExpansion(route.id)}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isRouteExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<MapPin className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-white font-medium">Маршрут</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<span className="font-medium">{route.from}</span>
|
||||
<span className="text-white/60">→</span>
|
||||
<span className="font-medium">{route.to}</span>
|
||||
</div>
|
||||
<div className="text-xs text-white/60">{route.fromAddress} → {route.toAddress}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.wholesalers.reduce((sum, w) =>
|
||||
sum + w.products.reduce((pSum, p) => pSum + p.plannedQty, 0), 0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.wholesalers.reduce((sum, w) =>
|
||||
sum + w.products.reduce((pSum, p) => pSum + p.actualQty, 0), 0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.wholesalers.reduce((sum, w) =>
|
||||
sum + w.products.reduce((pSum, p) => pSum + p.defectQty, 0), 0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">{formatCurrency(route.totalProductPrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-blue-400 font-medium">{formatCurrency(route.fulfillmentServicePrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-purple-400 font-medium">{formatCurrency(route.logisticsPrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{formatCurrency(route.totalAmount)}</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Уровень 3: Оптовики */}
|
||||
{isRouteExpanded && route.wholesalers.map((wholesaler) => {
|
||||
const isWholesalerExpanded = expandedWholesalers.has(wholesaler.id)
|
||||
return (
|
||||
<React.Fragment key={wholesaler.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-green-500/10">
|
||||
<td className="p-4 pl-20">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleWholesalerExpansion(wholesaler.id)}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isWholesalerExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Building2 className="h-4 w-4 text-green-400" />
|
||||
<span className="text-white font-medium">Оптовик</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">{wholesaler.name}</div>
|
||||
<div className="text-xs text-white/60 mb-1">ИНН: {wholesaler.inn}</div>
|
||||
<div className="text-xs text-white/60 mb-1">{wholesaler.address}</div>
|
||||
<div className="text-xs text-white/60">{wholesaler.contact}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{wholesaler.products.reduce((sum, p) => sum + p.plannedQty, 0)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{wholesaler.products.reduce((sum, p) => sum + p.actualQty, 0)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{wholesaler.products.reduce((sum, p) => sum + p.defectQty, 0)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">
|
||||
{formatCurrency(wholesaler.products.reduce((sum, p) => sum + calculateProductTotal(p), 0))}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}></td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{formatCurrency(wholesaler.totalAmount)}</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Уровень 4: Товары */}
|
||||
{isWholesalerExpanded && wholesaler.products.map((product) => {
|
||||
const isProductExpanded = expandedProducts.has(product.id)
|
||||
return (
|
||||
<React.Fragment key={product.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-yellow-500/10">
|
||||
<td className="p-4 pl-28">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleProductExpansion(product.id)}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isProductExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Package className="h-4 w-4 text-yellow-400" />
|
||||
<span className="text-white font-medium">Товар</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">{product.name}</div>
|
||||
<div className="text-xs text-white/60 mb-1">Артикул: {product.sku}</div>
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs">
|
||||
{product.category}
|
||||
</Badge>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{product.plannedQty}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{product.actualQty}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className={`font-semibold ${product.defectQty > 0 ? 'text-red-400' : 'text-white'}`}>
|
||||
{product.defectQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-white">
|
||||
<div className="font-medium">{formatCurrency(calculateProductTotal(product))}</div>
|
||||
<div className="text-xs text-white/60">{formatCurrency(product.productPrice)} за шт.</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
{getEfficiencyBadge(product.plannedQty, product.actualQty, product.defectQty)}
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{formatCurrency(calculateProductTotal(product))}</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Уровень 5: Параметры товара */}
|
||||
{isProductExpanded && (
|
||||
<tr>
|
||||
<td colSpan={11} className="p-0">
|
||||
<div className="bg-white/5 border-t border-white/10">
|
||||
<div className="p-4 pl-36">
|
||||
<h4 className="text-white font-medium mb-3 flex items-center space-x-2">
|
||||
<span className="text-xs text-white/60">📋 Параметры товара:</span>
|
||||
</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{product.parameters.map((param) => (
|
||||
<div key={param.id} className="bg-white/5 rounded-lg p-3">
|
||||
<div className="text-white/80 text-xs font-medium mb-1">{param.name}</div>
|
||||
<div className="text-white text-sm">
|
||||
{param.value} {param.unit || ''}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
425
src/components/supplies/wholesaler-products.tsx
Normal file
425
src/components/supplies/wholesaler-products.tsx
Normal file
@ -0,0 +1,425 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Package,
|
||||
Plus,
|
||||
Minus,
|
||||
ShoppingCart,
|
||||
Eye,
|
||||
Info
|
||||
} from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface Wholesaler {
|
||||
id: string
|
||||
inn: string
|
||||
name: string
|
||||
fullName: string
|
||||
address: string
|
||||
phone?: string
|
||||
email?: string
|
||||
rating: number
|
||||
productCount: number
|
||||
avatar?: string
|
||||
specialization: string[]
|
||||
}
|
||||
|
||||
interface Product {
|
||||
id: string
|
||||
name: string
|
||||
article: string
|
||||
description: string
|
||||
price: number
|
||||
quantity: number
|
||||
category: string
|
||||
brand?: string
|
||||
color?: string
|
||||
size?: string
|
||||
weight?: number
|
||||
dimensions?: string
|
||||
material?: string
|
||||
images: string[]
|
||||
mainImage?: string
|
||||
}
|
||||
|
||||
interface SelectedProduct extends Product {
|
||||
selectedQuantity: number
|
||||
}
|
||||
|
||||
interface WholesalerProductsProps {
|
||||
wholesaler: Wholesaler
|
||||
onBack: () => void
|
||||
onClose: () => void
|
||||
onSupplyCreated: () => void
|
||||
}
|
||||
|
||||
// Моковые данные товаров
|
||||
const mockProducts: Product[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Смартфон Samsung Galaxy A54',
|
||||
article: 'SGX-A54-128',
|
||||
description: 'Смартфон с экраном 6.4", камерой 50 МП, 128 ГБ памяти',
|
||||
price: 28900,
|
||||
quantity: 150,
|
||||
category: 'Смартфоны',
|
||||
brand: 'Samsung',
|
||||
color: 'Черный',
|
||||
size: '6.4"',
|
||||
weight: 202,
|
||||
dimensions: '158.2 x 76.7 x 8.2 мм',
|
||||
material: 'Алюминий, стекло',
|
||||
images: ['/api/placeholder/300/300?text=Samsung+A54'],
|
||||
mainImage: '/api/placeholder/300/300?text=Samsung+A54'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Наушники Sony WH-1000XM4',
|
||||
article: 'SNY-WH1000XM4',
|
||||
description: 'Беспроводные наушники с шумоподавлением',
|
||||
price: 24900,
|
||||
quantity: 85,
|
||||
category: 'Наушники',
|
||||
brand: 'Sony',
|
||||
color: 'Черный',
|
||||
weight: 254,
|
||||
material: 'Пластик, кожа',
|
||||
images: ['/api/placeholder/300/300?text=Sony+WH1000XM4'],
|
||||
mainImage: '/api/placeholder/300/300?text=Sony+WH1000XM4'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Планшет iPad Air 10.9"',
|
||||
article: 'APL-IPADAIR-64',
|
||||
description: 'Планшет Apple iPad Air с чипом M1, 64 ГБ',
|
||||
price: 54900,
|
||||
quantity: 45,
|
||||
category: 'Планшеты',
|
||||
brand: 'Apple',
|
||||
color: 'Серый космос',
|
||||
size: '10.9"',
|
||||
weight: 461,
|
||||
dimensions: '247.6 x 178.5 x 6.1 мм',
|
||||
material: 'Алюминий',
|
||||
images: ['/api/placeholder/300/300?text=iPad+Air'],
|
||||
mainImage: '/api/placeholder/300/300?text=iPad+Air'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'Ноутбук Lenovo ThinkPad E15',
|
||||
article: 'LNV-TE15-I5',
|
||||
description: 'Ноутбук 15.6" Intel Core i5, 8 ГБ ОЗУ, 256 ГБ SSD',
|
||||
price: 45900,
|
||||
quantity: 25,
|
||||
category: 'Ноутбуки',
|
||||
brand: 'Lenovo',
|
||||
color: 'Черный',
|
||||
size: '15.6"',
|
||||
weight: 1700,
|
||||
dimensions: '365 x 240 x 19.9 мм',
|
||||
material: 'Пластик',
|
||||
images: ['/api/placeholder/300/300?text=ThinkPad+E15'],
|
||||
mainImage: '/api/placeholder/300/300?text=ThinkPad+E15'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Умные часы Apple Watch SE',
|
||||
article: 'APL-AWSE-40',
|
||||
description: 'Умные часы Apple Watch SE 40 мм',
|
||||
price: 21900,
|
||||
quantity: 120,
|
||||
category: 'Умные часы',
|
||||
brand: 'Apple',
|
||||
color: 'Белый',
|
||||
size: '40 мм',
|
||||
weight: 30,
|
||||
dimensions: '40 x 34 x 10.7 мм',
|
||||
material: 'Алюминий',
|
||||
images: ['/api/placeholder/300/300?text=Apple+Watch+SE'],
|
||||
mainImage: '/api/placeholder/300/300?text=Apple+Watch+SE'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'Клавиатура Logitech MX Keys',
|
||||
article: 'LGT-MXKEYS',
|
||||
description: 'Беспроводная клавиатура для продуктивной работы',
|
||||
price: 8900,
|
||||
quantity: 75,
|
||||
category: 'Клавиатуры',
|
||||
brand: 'Logitech',
|
||||
color: 'Графит',
|
||||
weight: 810,
|
||||
dimensions: '430.2 x 20.5 x 131.6 мм',
|
||||
material: 'Пластик, металл',
|
||||
images: ['/api/placeholder/300/300?text=MX+Keys'],
|
||||
mainImage: '/api/placeholder/300/300?text=MX+Keys'
|
||||
}
|
||||
]
|
||||
|
||||
export function WholesalerProducts({ wholesaler, onBack, onClose, onSupplyCreated }: WholesalerProductsProps) {
|
||||
const [selectedProducts, setSelectedProducts] = useState<SelectedProduct[]>([])
|
||||
const [showSummary, setShowSummary] = useState(false)
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('ru-RU', {
|
||||
style: 'currency',
|
||||
currency: 'RUB',
|
||||
minimumFractionDigits: 0
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
const updateProductQuantity = (productId: string, quantity: number) => {
|
||||
const product = mockProducts.find(p => p.id === productId)
|
||||
if (!product) return
|
||||
|
||||
setSelectedProducts(prev => {
|
||||
const existing = prev.find(p => p.id === productId)
|
||||
|
||||
if (quantity === 0) {
|
||||
// Удаляем продукт если количество 0
|
||||
return prev.filter(p => p.id !== productId)
|
||||
}
|
||||
|
||||
if (existing) {
|
||||
// Обновляем количество существующего продукта
|
||||
return prev.map(p =>
|
||||
p.id === productId ? { ...p, selectedQuantity: quantity } : p
|
||||
)
|
||||
} else {
|
||||
// Добавляем новый продукт
|
||||
return [...prev, { ...product, selectedQuantity: quantity }]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getSelectedQuantity = (productId: string): number => {
|
||||
const selected = selectedProducts.find(p => p.id === productId)
|
||||
return selected ? selected.selectedQuantity : 0
|
||||
}
|
||||
|
||||
const getTotalAmount = () => {
|
||||
return selectedProducts.reduce((sum, product) =>
|
||||
sum + (product.price * product.selectedQuantity), 0
|
||||
)
|
||||
}
|
||||
|
||||
const getTotalItems = () => {
|
||||
return selectedProducts.reduce((sum, product) => sum + product.selectedQuantity, 0)
|
||||
}
|
||||
|
||||
const handleCreateSupply = () => {
|
||||
console.log('Создание поставки с товарами:', selectedProducts)
|
||||
// TODO: Здесь будет реальное создание поставки
|
||||
onSupplyCreated()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onBack}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад
|
||||
</Button>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white mb-1">Товары оптовика</h2>
|
||||
<p className="text-white/60">{wholesaler.name} • {mockProducts.length} товаров</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowSummary(!showSummary)}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<Info className="h-4 w-4 mr-2" />
|
||||
Резюме ({selectedProducts.length})
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showSummary && selectedProducts.length > 0 && (
|
||||
<Card className="bg-purple-500/10 backdrop-blur border-purple-500/30 p-6">
|
||||
<h3 className="text-white font-semibold text-lg mb-4">Резюме заказа</h3>
|
||||
<div className="space-y-3">
|
||||
{selectedProducts.map((product) => (
|
||||
<div key={product.id} className="flex justify-between items-center">
|
||||
<div>
|
||||
<span className="text-white">{product.name}</span>
|
||||
<span className="text-white/60 text-sm ml-2">× {product.selectedQuantity}</span>
|
||||
</div>
|
||||
<span className="text-white font-medium">
|
||||
{formatCurrency(product.price * product.selectedQuantity)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="border-t border-white/20 pt-3 flex justify-between items-center">
|
||||
<span className="text-white font-semibold">
|
||||
Итого: {getTotalItems()} товаров
|
||||
</span>
|
||||
<span className="text-white font-bold text-xl">
|
||||
{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={selectedProducts.length === 0}
|
||||
>
|
||||
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||
Создать поставку
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{mockProducts.map((product) => {
|
||||
const selectedQuantity = getSelectedQuantity(product.id)
|
||||
|
||||
return (
|
||||
<Card key={product.id} className="bg-white/10 backdrop-blur border-white/20 overflow-hidden">
|
||||
<div className="aspect-square relative bg-white/5">
|
||||
<Image
|
||||
src={product.mainImage || '/api/placeholder/300/300'}
|
||||
alt={product.name}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="absolute top-2 right-2">
|
||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/30">
|
||||
В наличии: {product.quantity}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-3">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-1 line-clamp-2">
|
||||
{product.name}
|
||||
</h3>
|
||||
<p className="text-white/60 text-xs mb-2">
|
||||
Артикул: {product.article}
|
||||
</p>
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
|
||||
{product.category}
|
||||
</Badge>
|
||||
{product.brand && (
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
|
||||
{product.brand}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-white/60 text-sm line-clamp-2">
|
||||
{product.description}
|
||||
</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
{product.color && (
|
||||
<div className="text-white/60 text-xs">
|
||||
Цвет: <span className="text-white">{product.color}</span>
|
||||
</div>
|
||||
)}
|
||||
{product.size && (
|
||||
<div className="text-white/60 text-xs">
|
||||
Размер: <span className="text-white">{product.size}</span>
|
||||
</div>
|
||||
)}
|
||||
{product.weight && (
|
||||
<div className="text-white/60 text-xs">
|
||||
Вес: <span className="text-white">{product.weight} г</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2 border-t border-white/10">
|
||||
<div>
|
||||
<div className="text-white font-bold text-lg">
|
||||
{formatCurrency(product.price)}
|
||||
</div>
|
||||
<div className="text-white/60 text-xs">за штуку</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateProductQuantity(product.id, Math.max(0, selectedQuantity - 1))}
|
||||
disabled={selectedQuantity === 0}
|
||||
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<Input
|
||||
type="number"
|
||||
value={selectedQuantity}
|
||||
onChange={(e) => {
|
||||
const value = Math.max(0, Math.min(product.quantity, parseInt(e.target.value) || 0))
|
||||
updateProductQuantity(product.id, value)
|
||||
}}
|
||||
className="h-8 w-16 text-center bg-white/10 border-white/20 text-white"
|
||||
min={0}
|
||||
max={product.quantity}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateProductQuantity(product.id, Math.min(product.quantity, selectedQuantity + 1))}
|
||||
disabled={selectedQuantity >= product.quantity}
|
||||
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{selectedQuantity > 0 && (
|
||||
<div className="bg-green-500/20 border border-green-500/30 rounded-lg p-2">
|
||||
<div className="text-green-300 text-sm font-medium">
|
||||
Сумма: {formatCurrency(product.price * selectedQuantity)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{selectedProducts.length > 0 && (
|
||||
<div className="fixed bottom-6 right-6">
|
||||
<Button
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg"
|
||||
onClick={() => setShowSummary(!showSummary)}
|
||||
>
|
||||
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||
Корзина ({selectedProducts.length}) • {formatCurrency(getTotalAmount())}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
260
src/components/supplies/wholesaler-selection.tsx
Normal file
260
src/components/supplies/wholesaler-selection.tsx
Normal file
@ -0,0 +1,260 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Building2,
|
||||
MapPin,
|
||||
Phone,
|
||||
Mail,
|
||||
Package,
|
||||
Star
|
||||
} from 'lucide-react'
|
||||
// import { WholesalerProducts } from './wholesaler-products'
|
||||
|
||||
interface Wholesaler {
|
||||
id: string
|
||||
inn: string
|
||||
name: string
|
||||
fullName: string
|
||||
address: string
|
||||
phone?: string
|
||||
email?: string
|
||||
rating: number
|
||||
productCount: number
|
||||
avatar?: string
|
||||
specialization: string[]
|
||||
}
|
||||
|
||||
interface WholesalerSelectionProps {
|
||||
onBack: () => void
|
||||
onClose: () => void
|
||||
onSupplyCreated: () => void
|
||||
}
|
||||
|
||||
// Моковые данные оптовиков
|
||||
const mockWholesalers: Wholesaler[] = [
|
||||
{
|
||||
id: '1',
|
||||
inn: '7707083893',
|
||||
name: 'ОПТ-Электроника',
|
||||
fullName: 'ООО "ОПТ-Электроника"',
|
||||
address: 'г. Москва, ул. Садовая, д. 15',
|
||||
phone: '+7 (495) 123-45-67',
|
||||
email: 'opt@electronics.ru',
|
||||
rating: 4.8,
|
||||
productCount: 1250,
|
||||
specialization: ['Электроника', 'Бытовая техника']
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
inn: '7707083894',
|
||||
name: 'ТекстильМастер',
|
||||
fullName: 'ООО "ТекстильМастер"',
|
||||
address: 'г. Иваново, пр. Ленина, д. 42',
|
||||
phone: '+7 (4932) 55-66-77',
|
||||
email: 'sales@textilmaster.ru',
|
||||
rating: 4.6,
|
||||
productCount: 850,
|
||||
specialization: ['Текстиль', 'Одежда', 'Домашний текстиль']
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
inn: '7707083895',
|
||||
name: 'МетизКомплект',
|
||||
fullName: 'ООО "МетизКомплект"',
|
||||
address: 'г. Тула, ул. Металлургов, д. 8',
|
||||
phone: '+7 (4872) 33-44-55',
|
||||
email: 'info@metiz.ru',
|
||||
rating: 4.9,
|
||||
productCount: 2100,
|
||||
specialization: ['Крепеж', 'Метизы', 'Инструменты']
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
inn: '7707083896',
|
||||
name: 'ПродОпт',
|
||||
fullName: 'ООО "ПродОпт"',
|
||||
address: 'г. Краснодар, ул. Красная, д. 123',
|
||||
phone: '+7 (861) 777-88-99',
|
||||
email: 'order@prodopt.ru',
|
||||
rating: 4.7,
|
||||
productCount: 560,
|
||||
specialization: ['Продукты питания', 'Напитки']
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
inn: '7707083897',
|
||||
name: 'СтройМатериалы+',
|
||||
fullName: 'ООО "СтройМатериалы+"',
|
||||
address: 'г. Воронеж, пр. Революции, д. 67',
|
||||
phone: '+7 (473) 222-33-44',
|
||||
email: 'stroim@materials.ru',
|
||||
rating: 4.5,
|
||||
productCount: 1800,
|
||||
specialization: ['Стройматериалы', 'Сантехника']
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
inn: '7707083898',
|
||||
name: 'КосметикОпт',
|
||||
fullName: 'ООО "КосметикОпт"',
|
||||
address: 'г. Санкт-Петербург, Невский пр., д. 45',
|
||||
phone: '+7 (812) 111-22-33',
|
||||
email: 'beauty@cosmeticopt.ru',
|
||||
rating: 4.4,
|
||||
productCount: 920,
|
||||
specialization: ['Косметика', 'Парфюмерия', 'Уход']
|
||||
}
|
||||
]
|
||||
|
||||
export function WholesalerSelection({ onBack, onClose, onSupplyCreated }: WholesalerSelectionProps) {
|
||||
const [selectedWholesaler, setSelectedWholesaler] = useState<Wholesaler | null>(null)
|
||||
|
||||
if (selectedWholesaler) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedWholesaler(null)}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад
|
||||
</Button>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white mb-1">Товары оптовика</h2>
|
||||
<p className="text-white/60">{selectedWholesaler.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center py-12">
|
||||
<p className="text-white/60">Компонент товаров в разработке...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderStars = (rating: number) => {
|
||||
return Array.from({ length: 5 }, (_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`h-4 w-4 ${i < Math.floor(rating) ? 'text-yellow-400 fill-current' : 'text-gray-400'}`}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onBack}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад
|
||||
</Button>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white mb-1">Выбор оптовика</h2>
|
||||
<p className="text-white/60">Выберите оптовика для создания поставки</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{mockWholesalers.map((wholesaler) => (
|
||||
<Card
|
||||
key={wholesaler.id}
|
||||
className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-105"
|
||||
onClick={() => setSelectedWholesaler(wholesaler)}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Заголовок карточки */}
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="p-3 bg-blue-500/20 rounded-lg">
|
||||
<Building2 className="h-6 w-6 text-blue-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-white font-semibold text-lg mb-1 truncate">
|
||||
{wholesaler.name}
|
||||
</h3>
|
||||
<p className="text-white/60 text-xs mb-2 truncate">
|
||||
{wholesaler.fullName}
|
||||
</p>
|
||||
<div className="flex items-center space-x-1 mb-2">
|
||||
{renderStars(wholesaler.rating)}
|
||||
<span className="text-white/60 text-sm ml-2">{wholesaler.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Информация */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<MapPin className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm truncate">{wholesaler.address}</span>
|
||||
</div>
|
||||
|
||||
{wholesaler.phone && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Phone className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm">{wholesaler.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{wholesaler.email && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Mail className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm truncate">{wholesaler.email}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Package className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-white/80 text-sm">{wholesaler.productCount} товаров</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Специализация */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-white/60 text-xs">Специализация:</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{wholesaler.specialization.map((spec, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs"
|
||||
>
|
||||
{spec}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ИНН */}
|
||||
<div className="pt-2 border-t border-white/10">
|
||||
<p className="text-white/60 text-xs">ИНН: {wholesaler.inn}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user