Добавлены новые зависимости: react-datepicker и обновлены импорты в компоненте WBProductCards. Реализован новый функционал для выбора даты поставки с использованием календаря. Обновлены компоненты для улучшения взаимодействия с пользователем и оптимизации кода.
This commit is contained in:
Bivekich
207
src/components/supplies/cart-summary.tsx
Normal file
207
src/components/supplies/cart-summary.tsx
Normal file
@ -0,0 +1,207 @@
|
||||
"use client"
|
||||
|
||||
import React from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
ShoppingCart,
|
||||
Building2,
|
||||
Plus,
|
||||
Minus,
|
||||
Eye
|
||||
} from 'lucide-react'
|
||||
import { SelectedProduct } from './types'
|
||||
|
||||
interface CartSummaryProps {
|
||||
selectedProducts: SelectedProduct[]
|
||||
onQuantityChange: (productId: string, wholesalerId: string, quantity: number) => void
|
||||
onRemoveProduct: (productId: string, wholesalerId: string) => void
|
||||
onCreateSupply: () => void
|
||||
onToggleVisibility: () => void
|
||||
formatCurrency: (amount: number) => string
|
||||
visible: boolean
|
||||
}
|
||||
|
||||
export function CartSummary({
|
||||
selectedProducts,
|
||||
onQuantityChange,
|
||||
onRemoveProduct,
|
||||
onCreateSupply,
|
||||
onToggleVisibility,
|
||||
formatCurrency,
|
||||
visible
|
||||
}: CartSummaryProps) {
|
||||
if (!visible || selectedProducts.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
// Группируем товары по оптовикам
|
||||
const groupedProducts = selectedProducts.reduce((acc, product) => {
|
||||
if (!acc[product.wholesalerId]) {
|
||||
acc[product.wholesalerId] = {
|
||||
wholesaler: product.wholesalerName,
|
||||
products: []
|
||||
}
|
||||
}
|
||||
acc[product.wholesalerId].products.push(product)
|
||||
return acc
|
||||
}, {} as Record<string, { wholesaler: string; products: SelectedProduct[] }>)
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-gradient-to-br from-purple-500/10 to-pink-500/10 backdrop-blur-xl border border-purple-500/20 mb-6 shadow-2xl">
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg">
|
||||
<ShoppingCart className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-bold text-lg">Корзина</h3>
|
||||
<p className="text-purple-200 text-xs">
|
||||
{selectedProducts.length} товаров от {Object.keys(groupedProducts).length} поставщиков
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onToggleVisibility}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10 rounded-xl"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Группировка по оптовикам */}
|
||||
{Object.entries(groupedProducts).map(([wholesalerId, group]) => (
|
||||
<div key={wholesalerId} className="mb-4 last:mb-0">
|
||||
<div className="flex items-center mb-2 pb-1 border-b border-white/10">
|
||||
<Building2 className="h-4 w-4 text-blue-400 mr-2" />
|
||||
<span className="text-white font-medium">{group.wholesaler}</span>
|
||||
<Badge className="ml-2 bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
|
||||
{group.products.length} товар(ов)
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{group.products.map((product) => {
|
||||
const discountedPrice = product.discount
|
||||
? product.price * (1 - product.discount / 100)
|
||||
: product.price
|
||||
const totalPrice = discountedPrice * product.selectedQuantity
|
||||
|
||||
return (
|
||||
<div key={`${product.wholesalerId}-${product.id}`} className="flex items-center space-x-3 bg-white/5 rounded-lg p-3">
|
||||
<img
|
||||
src={product.mainImage || '/api/placeholder/50/50'}
|
||||
alt={product.name}
|
||||
className="w-12 h-12 rounded-lg object-cover"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-white font-medium text-xs mb-1 truncate">{product.name}</h4>
|
||||
<p className="text-white/60 text-xs mb-1">{product.article}</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const newQuantity = Math.max(0, product.selectedQuantity - 1)
|
||||
if (newQuantity === 0) {
|
||||
onRemoveProduct(product.id, product.wholesalerId)
|
||||
} else {
|
||||
onQuantityChange(product.id, product.wholesalerId, newQuantity)
|
||||
}
|
||||
}}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<Minus className="h-3 w-3" />
|
||||
</Button>
|
||||
<span className="text-white text-xs w-6 text-center">{product.selectedQuantity}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
onQuantityChange(
|
||||
product.id,
|
||||
product.wholesalerId,
|
||||
Math.min(product.quantity, product.selectedQuantity + 1)
|
||||
)
|
||||
}}
|
||||
disabled={product.selectedQuantity >= product.quantity}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-white font-semibold text-xs">{formatCurrency(totalPrice)}</div>
|
||||
{product.discount && (
|
||||
<div className="text-white/40 text-xs line-through">
|
||||
{formatCurrency(product.price * product.selectedQuantity)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onRemoveProduct(product.id, product.wholesalerId)}
|
||||
className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Итого */}
|
||||
<div className="border-t border-white/20 pt-3 mt-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
Итого: {getTotalItems()} товаров
|
||||
</span>
|
||||
<span className="text-white font-bold text-lg">
|
||||
{formatCurrency(getTotalAmount())}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex space-x-2 mt-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1 border-purple-300/30 text-white hover:bg-white/10"
|
||||
onClick={onToggleVisibility}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Добавить еще
|
||||
</Button>
|
||||
<Button
|
||||
className="flex-1 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
|
||||
onClick={onCreateSupply}
|
||||
>
|
||||
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||
Оформить поставку
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user