Добавлены новые зависимости: react-datepicker и обновлены импорты в компоненте WBProductCards. Реализован новый функционал для выбора даты поставки с использованием календаря. Обновлены компоненты для улучшения взаимодействия с пользователем и оптимизации кода.
This commit is contained in:
Bivekich
37
package-lock.json
generated
37
package-lock.json
generated
@ -48,6 +48,7 @@
|
|||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"prisma": "^6.12.0",
|
"prisma": "^6.12.0",
|
||||||
"react": "19.1.0",
|
"react": "19.1.0",
|
||||||
|
"react-datepicker": "^8.4.0",
|
||||||
"react-day-picker": "^9.8.0",
|
"react-day-picker": "^9.8.0",
|
||||||
"react-dom": "19.1.0",
|
"react-dom": "19.1.0",
|
||||||
"react-imask": "^7.6.1",
|
"react-imask": "^7.6.1",
|
||||||
@ -1813,6 +1814,21 @@
|
|||||||
"@floating-ui/utils": "^0.2.10"
|
"@floating-ui/utils": "^0.2.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@floating-ui/react": {
|
||||||
|
"version": "0.27.13",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.13.tgz",
|
||||||
|
"integrity": "sha512-Qmj6t9TjgWAvbygNEu1hj4dbHI9CY0ziCMIJrmYoDIn9TUAH5lRmiIeZmRd4c6QEZkzdoH7jNnoNyoY1AIESiA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/react-dom": "^2.1.4",
|
||||||
|
"@floating-ui/utils": "^0.2.10",
|
||||||
|
"tabbable": "^6.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=17.0.0",
|
||||||
|
"react-dom": ">=17.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@floating-ui/react-dom": {
|
"node_modules/@floating-ui/react-dom": {
|
||||||
"version": "2.1.4",
|
"version": "2.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.4.tgz",
|
||||||
@ -9855,6 +9871,21 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-datepicker": {
|
||||||
|
"version": "8.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.4.0.tgz",
|
||||||
|
"integrity": "sha512-6nPDnj8vektWCIOy9ArS3avus9Ndsyz5XgFCJ7nBxXASSpBdSL6lG9jzNNmViPOAOPh6T5oJyGaXuMirBLECag==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/react": "^0.27.3",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"date-fns": "^4.1.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-day-picker": {
|
"node_modules/react-day-picker": {
|
||||||
"version": "9.8.0",
|
"version": "9.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.8.0.tgz",
|
||||||
@ -10834,6 +10865,12 @@
|
|||||||
"node": ">=0.10"
|
"node": ">=0.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/tabbable": {
|
||||||
|
"version": "6.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
|
||||||
|
"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/tailwind-merge": {
|
"node_modules/tailwind-merge": {
|
||||||
"version": "3.3.1",
|
"version": "3.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
|
||||||
|
|||||||
@ -49,6 +49,7 @@
|
|||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"prisma": "^6.12.0",
|
"prisma": "^6.12.0",
|
||||||
"react": "19.1.0",
|
"react": "19.1.0",
|
||||||
|
"react-datepicker": "^8.4.0",
|
||||||
"react-day-picker": "^9.8.0",
|
"react-day-picker": "^9.8.0",
|
||||||
"react-dom": "19.1.0",
|
"react-dom": "19.1.0",
|
||||||
"react-imask": "^7.6.1",
|
"react-imask": "^7.6.1",
|
||||||
|
|||||||
@ -17,6 +17,7 @@ import { InteractiveDemo } from "./ui-kit/interactive-demo";
|
|||||||
import { BusinessDemo } from "./ui-kit/business-demo";
|
import { BusinessDemo } from "./ui-kit/business-demo";
|
||||||
import { TimesheetDemo } from "./ui-kit/timesheet-demo";
|
import { TimesheetDemo } from "./ui-kit/timesheet-demo";
|
||||||
import { FulfillmentWarehouseDemo } from "./ui-kit/fulfillment-warehouse-demo";
|
import { FulfillmentWarehouseDemo } from "./ui-kit/fulfillment-warehouse-demo";
|
||||||
|
import { SuppliesDemo } from "./ui-kit/supplies-demo";
|
||||||
|
|
||||||
export function UIKitSection() {
|
export function UIKitSection() {
|
||||||
return (
|
return (
|
||||||
@ -126,6 +127,12 @@ export function UIKitSection() {
|
|||||||
>
|
>
|
||||||
Склад фулфилмент
|
Склад фулфилмент
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="supplies"
|
||||||
|
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
|
||||||
|
>
|
||||||
|
Поставки
|
||||||
|
</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
<TabsContent value="buttons" className="space-y-6">
|
<TabsContent value="buttons" className="space-y-6">
|
||||||
@ -191,6 +198,10 @@ export function UIKitSection() {
|
|||||||
<TabsContent value="fulfillment-warehouse" className="space-y-6">
|
<TabsContent value="fulfillment-warehouse" className="space-y-6">
|
||||||
<FulfillmentWarehouseDemo />
|
<FulfillmentWarehouseDemo />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="supplies" className="space-y-6">
|
||||||
|
<SuppliesDemo />
|
||||||
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
634
src/components/admin/ui-kit/supplies-demo.tsx
Normal file
634
src/components/admin/ui-kit/supplies-demo.tsx
Normal file
@ -0,0 +1,634 @@
|
|||||||
|
"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
import {
|
||||||
|
ShoppingCart,
|
||||||
|
Plus,
|
||||||
|
Minus,
|
||||||
|
Eye,
|
||||||
|
Heart,
|
||||||
|
Package,
|
||||||
|
Building2,
|
||||||
|
Calendar,
|
||||||
|
Users,
|
||||||
|
Search,
|
||||||
|
Star,
|
||||||
|
Truck
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
export function SuppliesDemo() {
|
||||||
|
const [selectedQuantity, setSelectedQuantity] = useState(1);
|
||||||
|
const [cartItems, setCartItems] = useState(3);
|
||||||
|
const [cartTotal, setCartTotal] = useState(15750);
|
||||||
|
|
||||||
|
const formatCurrency = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat('ru-RU', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'RUB',
|
||||||
|
minimumFractionDigits: 0
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
|
||||||
|
const mockProduct = {
|
||||||
|
id: "1",
|
||||||
|
name: "Футболка мужская базовая хлопок 100%",
|
||||||
|
brand: "BASIC",
|
||||||
|
price: 1299,
|
||||||
|
discount: 15,
|
||||||
|
quantity: 47,
|
||||||
|
color: "Черный",
|
||||||
|
size: "L",
|
||||||
|
mainImage: "/api/placeholder/300/300",
|
||||||
|
isNew: true,
|
||||||
|
isBestseller: false
|
||||||
|
};
|
||||||
|
|
||||||
|
const mockWholesaler = {
|
||||||
|
id: "w1",
|
||||||
|
name: "ТекстильПром ООО",
|
||||||
|
rating: 4.8,
|
||||||
|
reviewsCount: 1247,
|
||||||
|
location: "Москва",
|
||||||
|
specialization: "Текстиль и одежда",
|
||||||
|
verified: true
|
||||||
|
};
|
||||||
|
|
||||||
|
const discountedPrice = mockProduct.discount
|
||||||
|
? mockProduct.price * (1 - mockProduct.discount / 100)
|
||||||
|
: mockProduct.price;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-4">Поставки - Компоненты</h2>
|
||||||
|
<p className="text-white/70 mb-6">
|
||||||
|
Демонстрация компонентов системы управления поставками
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tabs defaultValue="product-cards" className="w-full">
|
||||||
|
<TabsList className="grid grid-cols-4 bg-white/5 backdrop-blur border-white/10 mb-6">
|
||||||
|
<TabsTrigger value="product-cards">Карточки товаров</TabsTrigger>
|
||||||
|
<TabsTrigger value="wholesaler-cards">Карточки оптовиков</TabsTrigger>
|
||||||
|
<TabsTrigger value="floating-cart">Плавающая корзина</TabsTrigger>
|
||||||
|
<TabsTrigger value="supply-types">Типы поставок</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="product-cards" className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">Карточки товаров</h3>
|
||||||
|
<p className="text-white/60 mb-6">
|
||||||
|
Интерактивные карточки товаров с возможностью управления количеством
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Обычная карточка товара */}
|
||||||
|
<Card 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">
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center">
|
||||||
|
<Package className="h-16 w-16 text-white/40" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Количество в наличии */}
|
||||||
|
<div className="absolute top-2 right-2">
|
||||||
|
<Badge className={`${
|
||||||
|
mockProduct.quantity > 50
|
||||||
|
? 'bg-green-500/80'
|
||||||
|
: mockProduct.quantity > 10
|
||||||
|
? 'bg-yellow-500/80'
|
||||||
|
: 'bg-red-500/80'
|
||||||
|
} text-white border-0 backdrop-blur text-xs`}>
|
||||||
|
{mockProduct.quantity}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Скидка */}
|
||||||
|
{mockProduct.discount && (
|
||||||
|
<div className="absolute top-2 left-2">
|
||||||
|
<Badge className="bg-red-500/80 text-white border-0 backdrop-blur text-xs">
|
||||||
|
-{mockProduct.discount}%
|
||||||
|
</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-3 space-y-3">
|
||||||
|
{/* Заголовок и бренд */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
{mockProduct.brand && (
|
||||||
|
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
|
||||||
|
{mockProduct.brand}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
{mockProduct.isNew && (
|
||||||
|
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
|
||||||
|
NEW
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{mockProduct.isBestseller && (
|
||||||
|
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
|
||||||
|
HIT
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight">
|
||||||
|
{mockProduct.name}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Основная характеристика */}
|
||||||
|
<div className="text-white/60 text-xs">
|
||||||
|
{mockProduct.color && <span className="text-white">{mockProduct.color}</span>}
|
||||||
|
{mockProduct.size && <span className="text-white ml-2">{mockProduct.size}</span>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Цена */}
|
||||||
|
<div className="pt-2 border-t border-white/10">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="text-white font-bold text-lg">
|
||||||
|
{formatCurrency(discountedPrice)}
|
||||||
|
</div>
|
||||||
|
{mockProduct.discount && (
|
||||||
|
<div className="text-white/40 text-sm line-through">
|
||||||
|
{formatCurrency(mockProduct.price)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Управление количеством */}
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setSelectedQuantity(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 border border-white/20"
|
||||||
|
>
|
||||||
|
<Minus className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
value={selectedQuantity}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value.replace(/[^0-9]/g, '');
|
||||||
|
const numValue = parseInt(value) || 0;
|
||||||
|
setSelectedQuantity(Math.min(mockProduct.quantity, numValue));
|
||||||
|
}}
|
||||||
|
className="h-8 w-12 text-center bg-white/10 border-white/20 text-white text-sm"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setSelectedQuantity(Math.min(mockProduct.quantity, selectedQuantity + 1))}
|
||||||
|
disabled={selectedQuantity >= mockProduct.quantity}
|
||||||
|
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||||
|
>
|
||||||
|
<Plus className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{selectedQuantity > 0 && (
|
||||||
|
<Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
|
||||||
|
<ShoppingCart className="h-3 w-3 mr-1" />
|
||||||
|
{selectedQuantity}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Сумма для выбранного товара */}
|
||||||
|
{selectedQuantity > 0 && (
|
||||||
|
<div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-2">
|
||||||
|
<div className="text-green-300 text-xs font-medium text-center">
|
||||||
|
{formatCurrency(discountedPrice * selectedQuantity)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Компактная карточка товара */}
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-4 hover:bg-white/15 transition-colors">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-16 h-16 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded flex items-center justify-center">
|
||||||
|
<Package className="h-8 w-8 text-white/40" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="text-white font-medium text-sm truncate">Товар компактно</h4>
|
||||||
|
<p className="text-white/60 text-xs">Краткое описание</p>
|
||||||
|
<div className="flex items-center justify-between mt-2">
|
||||||
|
<span className="text-white font-bold text-sm">{formatCurrency(1599)}</span>
|
||||||
|
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
|
||||||
|
В наличии
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Карточка товара со статусом */}
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
|
||||||
|
Ожидается
|
||||||
|
</Badge>
|
||||||
|
<span className="text-white/60 text-xs">Арт: TB-001</span>
|
||||||
|
</div>
|
||||||
|
<h4 className="text-white font-medium text-sm">Товар с уведомлением</h4>
|
||||||
|
<div className="text-white/60 text-xs">
|
||||||
|
<p>Поступление: 15 марта</p>
|
||||||
|
<p>Количество: ~200 шт</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-white font-bold">{formatCurrency(899)}</span>
|
||||||
|
<Button size="sm" variant="outline" className="border-white/20 text-white text-xs">
|
||||||
|
Уведомить
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="wholesaler-cards" className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">Карточки оптовиков</h3>
|
||||||
|
<p className="text-white/60 mb-6">
|
||||||
|
Информационные карточки поставщиков и оптовиков
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Главная карточка оптовика */}
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-6 hover:bg-white/15 hover:border-white/30 transition-all duration-300 hover:scale-105">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
|
||||||
|
<Building2 className="h-6 w-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-white font-semibold text-lg">
|
||||||
|
{mockWholesaler.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-white/60 text-sm">
|
||||||
|
{mockWholesaler.specialization}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{mockWholesaler.verified && (
|
||||||
|
<Badge className="bg-green-500/20 text-green-300 border-green-500/30">
|
||||||
|
Верифицирован
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-white/60 text-sm">Рейтинг:</span>
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<div className="flex">
|
||||||
|
{Array.from({ length: 5 }, (_, i) => (
|
||||||
|
<Star
|
||||||
|
key={i}
|
||||||
|
className={`h-4 w-4 ${
|
||||||
|
i < Math.floor(mockWholesaler.rating)
|
||||||
|
? 'text-yellow-400 fill-current'
|
||||||
|
: 'text-gray-400'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span className="text-white text-sm font-medium">
|
||||||
|
{mockWholesaler.rating}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-white/60 text-sm">Отзывы:</span>
|
||||||
|
<span className="text-white text-sm">
|
||||||
|
{mockWholesaler.reviewsCount.toLocaleString('ru-RU')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-white/60 text-sm">Местоположение:</span>
|
||||||
|
<span className="text-white text-sm">{mockWholesaler.location}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
|
||||||
|
>
|
||||||
|
<Package className="h-4 w-4 mr-2" />
|
||||||
|
Товары
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="border-white/20 text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Eye className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Компактная карточка поставщика */}
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-4 hover:bg-white/15 transition-colors">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center">
|
||||||
|
<Truck className="h-5 w-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="text-white font-medium text-sm">Логистический партнер</h4>
|
||||||
|
<p className="text-white/60 text-xs">Быстрая доставка</p>
|
||||||
|
<div className="flex items-center mt-1">
|
||||||
|
<div className="flex">
|
||||||
|
{Array.from({ length: 5 }, (_, i) => (
|
||||||
|
<Star key={i} className="h-3 w-3 text-yellow-400 fill-current" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span className="text-white/60 text-xs ml-1">(4.9)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Карточка нового поставщика */}
|
||||||
|
<Card className="bg-gradient-to-br from-blue-500/10 to-cyan-500/10 backdrop-blur border-blue-500/30 p-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
|
||||||
|
Новый партнер
|
||||||
|
</Badge>
|
||||||
|
<Users className="h-5 w-5 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h4 className="text-white font-medium">ТехноТрейд ООО</h4>
|
||||||
|
<p className="text-white/60 text-sm">
|
||||||
|
Электроника и техника
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-white/60 text-xs">Заявка на партнерство</span>
|
||||||
|
<Button size="sm" variant="outline" className="border-blue-500/30 text-blue-300 text-xs">
|
||||||
|
Рассмотреть
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="floating-cart" className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">Плавающая корзина</h3>
|
||||||
|
<p className="text-white/60 mb-6">
|
||||||
|
Плавающий элемент для быстрого доступа к корзине
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Демонстрация плавающей корзины */}
|
||||||
|
<div className="relative bg-gray-900/50 border border-white/10 rounded-lg p-8 min-h-[300px]">
|
||||||
|
<p className="text-white/60 text-center">
|
||||||
|
Область контента страницы
|
||||||
|
<br />
|
||||||
|
<span className="text-xs">Плавающая корзина появляется в правом нижнем углу</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Демо плавающей корзины */}
|
||||||
|
<div className="absolute bottom-4 right-4">
|
||||||
|
<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"
|
||||||
|
onClick={() => {
|
||||||
|
setCartItems(cartItems + 1);
|
||||||
|
setCartTotal(cartTotal + 1299);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ShoppingCart className="h-5 w-5 mr-2" />
|
||||||
|
{cartItems} • {formatCurrency(cartTotal)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Различные варианты плавающих кнопок */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||||
|
<h4 className="text-white font-medium mb-3">Стандартная корзина</h4>
|
||||||
|
<Button
|
||||||
|
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
|
||||||
|
>
|
||||||
|
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||||
|
3 • {formatCurrency(cartTotal)}
|
||||||
|
</Button>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||||
|
<h4 className="text-white font-medium mb-3">Компактная</h4>
|
||||||
|
<Button size="sm" className="w-full bg-gradient-to-r from-green-500 to-emerald-500 text-white">
|
||||||
|
<ShoppingCart className="h-4 w-4 mr-1" />
|
||||||
|
{formatCurrency(cartTotal)}
|
||||||
|
</Button>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||||
|
<h4 className="text-white font-medium mb-3">С индикатором</h4>
|
||||||
|
<div className="relative">
|
||||||
|
<Button className="w-full bg-gradient-to-r from-orange-500 to-red-500 text-white">
|
||||||
|
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||||
|
Корзина
|
||||||
|
</Button>
|
||||||
|
<Badge className="absolute -top-2 -right-2 bg-red-500 text-white text-xs">
|
||||||
|
{cartItems}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кнопки управления демо */}
|
||||||
|
<div className="flex justify-center space-x-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="border-white/20 text-white"
|
||||||
|
onClick={() => {
|
||||||
|
setCartItems(Math.max(0, cartItems - 1));
|
||||||
|
setCartTotal(Math.max(0, cartTotal - 1299));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Minus className="h-4 w-4 mr-1" />
|
||||||
|
Убрать товар
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="border-white/20 text-white"
|
||||||
|
onClick={() => {
|
||||||
|
setCartItems(cartItems + 1);
|
||||||
|
setCartTotal(cartTotal + 1299);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-1" />
|
||||||
|
Добавить товар
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="border-red-500/30 text-red-300"
|
||||||
|
onClick={() => {
|
||||||
|
setCartItems(0);
|
||||||
|
setCartTotal(0);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Очистить корзину
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="supply-types" className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">Типы поставок</h3>
|
||||||
|
<p className="text-white/60 mb-6">
|
||||||
|
Различные варианты выбора типа поставки
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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-green-500/20 text-green-300 border-green-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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Дополнительные типы */}
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-6 opacity-60">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="p-4 bg-gray-500/20 rounded-lg w-fit mx-auto">
|
||||||
|
<Package className="h-8 w-8 text-gray-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-gray-500/20 text-gray-300 border-gray-500/30">
|
||||||
|
Скоро
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-6 opacity-60">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="p-4 bg-purple-500/20 rounded-lg w-fit mx-auto">
|
||||||
|
<Calendar className="h-8 w-8 text-purple-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-gray-500/20 text-gray-300 border-gray-500/30">
|
||||||
|
В разработке
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Статусы поставок */}
|
||||||
|
<div className="mt-8">
|
||||||
|
<h4 className="text-lg font-semibold text-white mb-4">Статусы поставок</h4>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30">
|
||||||
|
Подготовка
|
||||||
|
</Badge>
|
||||||
|
<p className="text-white/60 text-xs">Сбор товаров</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">
|
||||||
|
В пути
|
||||||
|
</Badge>
|
||||||
|
<p className="text-white/60 text-xs">Доставка</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<Badge className="bg-green-500/20 text-green-300 border-green-500/30">
|
||||||
|
Доставлено
|
||||||
|
</Badge>
|
||||||
|
<p className="text-white/60 text-xs">Успешно</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<Badge className="bg-red-500/20 text-red-300 border-red-500/30">
|
||||||
|
Ошибка
|
||||||
|
</Badge>
|
||||||
|
<p className="text-white/60 text-xs">Требует внимания</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -2,255 +2,23 @@
|
|||||||
|
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import { useQuery } from '@apollo/client'
|
import { useQuery } from '@apollo/client'
|
||||||
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 { Sidebar } from '@/components/dashboard/sidebar'
|
||||||
import { useSidebar } from '@/hooks/useSidebar'
|
import { useSidebar } from '@/hooks/useSidebar'
|
||||||
import { GET_MY_COUNTERPARTIES, GET_ALL_PRODUCTS } from '@/graphql/queries'
|
import { GET_MY_COUNTERPARTIES, GET_ALL_PRODUCTS } from '@/graphql/queries'
|
||||||
import {
|
|
||||||
ArrowLeft,
|
|
||||||
ShoppingCart,
|
|
||||||
Users,
|
|
||||||
Building2,
|
|
||||||
MapPin,
|
|
||||||
Phone,
|
|
||||||
Mail,
|
|
||||||
Star,
|
|
||||||
Plus,
|
|
||||||
Minus,
|
|
||||||
Info,
|
|
||||||
Package,
|
|
||||||
Zap,
|
|
||||||
Heart,
|
|
||||||
Eye,
|
|
||||||
ShoppingBag,
|
|
||||||
Search
|
|
||||||
} from 'lucide-react'
|
|
||||||
import { useRouter } from 'next/navigation'
|
import { useRouter } from 'next/navigation'
|
||||||
import Image from 'next/image'
|
|
||||||
import { WBProductCards } from './wb-product-cards'
|
import { WBProductCards } from './wb-product-cards'
|
||||||
|
import { SelectedCard as WBSelectedCard } from '@/types/supplies'
|
||||||
interface WholesalerForCreation {
|
import { TabsHeader } from './tabs-header'
|
||||||
id: string
|
import { WholesalerGrid } from './wholesaler-grid'
|
||||||
inn: string
|
import { CartSummary } from './cart-summary'
|
||||||
name: string
|
import { FloatingCart } from './floating-cart'
|
||||||
fullName: string
|
import { WholesalerProductsPage } from './wholesaler-products-page'
|
||||||
address: string
|
import {
|
||||||
phone?: string
|
WholesalerForCreation,
|
||||||
email?: string
|
WholesalerProduct,
|
||||||
rating: number
|
SelectedProduct,
|
||||||
productCount: number
|
CounterpartyWholesaler
|
||||||
avatar?: string
|
} from './types'
|
||||||
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
|
|
||||||
wholesalerId: string
|
|
||||||
wholesalerName: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface WildberriesCard {
|
|
||||||
nmID: number
|
|
||||||
vendorCode: string
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
brand: string
|
|
||||||
mediaFiles: string[]
|
|
||||||
sizes: Array<{
|
|
||||||
chrtID: number
|
|
||||||
techSize: string
|
|
||||||
wbSize: string
|
|
||||||
price: number
|
|
||||||
discountedPrice: number
|
|
||||||
quantity: number
|
|
||||||
}>
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SelectedCard {
|
|
||||||
card: WildberriesCard
|
|
||||||
selectedQuantity: number
|
|
||||||
selectedMarket: string
|
|
||||||
selectedPlace: string
|
|
||||||
sellerName: string
|
|
||||||
sellerPhone: string
|
|
||||||
deliveryDate: string
|
|
||||||
selectedServices: string[]
|
|
||||||
}
|
|
||||||
|
|
||||||
// Моковые данные оптовиков
|
|
||||||
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() {
|
export function CreateSupplyPage() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -258,7 +26,7 @@ export function CreateSupplyPage() {
|
|||||||
const [activeTab, setActiveTab] = useState<'cards' | 'wholesaler'>('cards')
|
const [activeTab, setActiveTab] = useState<'cards' | 'wholesaler'>('cards')
|
||||||
const [selectedWholesaler, setSelectedWholesaler] = useState<WholesalerForCreation | null>(null)
|
const [selectedWholesaler, setSelectedWholesaler] = useState<WholesalerForCreation | null>(null)
|
||||||
const [selectedProducts, setSelectedProducts] = useState<SelectedProduct[]>([])
|
const [selectedProducts, setSelectedProducts] = useState<SelectedProduct[]>([])
|
||||||
const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([])
|
const [selectedCards, setSelectedCards] = useState<WBSelectedCard[]>([])
|
||||||
const [showSummary, setShowSummary] = useState(false)
|
const [showSummary, setShowSummary] = useState(false)
|
||||||
const [searchQuery, setSearchQuery] = useState('')
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
|
||||||
@ -272,17 +40,11 @@ export function CreateSupplyPage() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// Фильтруем только оптовиков
|
// Фильтруем только оптовиков
|
||||||
const wholesalers = (counterpartiesData?.myCounterparties || []).filter((org: { type: string }) => org.type === 'WHOLESALE')
|
const wholesalers: CounterpartyWholesaler[] = (counterpartiesData?.myCounterparties || [])
|
||||||
|
.filter((org: { type: string }) => org.type === 'WHOLESALE')
|
||||||
// Фильтруем оптовиков по поисковому запросу
|
|
||||||
const filteredWholesalers = wholesalers.filter((wholesaler: { name?: string; fullName?: string; inn?: string }) =>
|
|
||||||
wholesaler.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
||||||
wholesaler.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
||||||
wholesaler.inn?.toLowerCase().includes(searchQuery.toLowerCase())
|
|
||||||
)
|
|
||||||
|
|
||||||
// Фильтруем товары по выбранному оптовику
|
// Фильтруем товары по выбранному оптовику
|
||||||
const wholesalerProducts = selectedWholesaler
|
const wholesalerProducts: WholesalerProduct[] = selectedWholesaler
|
||||||
? (productsData?.allProducts || []).filter((product: { organization: { id: string } }) =>
|
? (productsData?.allProducts || []).filter((product: { organization: { id: string } }) =>
|
||||||
product.organization.id === selectedWholesaler.id
|
product.organization.id === selectedWholesaler.id
|
||||||
)
|
)
|
||||||
@ -303,17 +65,8 @@ export function CreateSupplyPage() {
|
|||||||
}).format(amount)
|
}).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 updateProductQuantity = (productId: string, quantity: number) => {
|
||||||
const product = wholesalerProducts.find((p: { id: string }) => p.id === productId)
|
const product = wholesalerProducts.find((p) => p.id === productId)
|
||||||
if (!product || !selectedWholesaler) return
|
if (!product || !selectedWholesaler) return
|
||||||
|
|
||||||
setSelectedProducts(prev => {
|
setSelectedProducts(prev => {
|
||||||
@ -340,12 +93,6 @@ export function CreateSupplyPage() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const getSelectedQuantity = (productId: string): number => {
|
|
||||||
if (!selectedWholesaler) return 0
|
|
||||||
const selected = selectedProducts.find(p => p.id === productId && p.wholesalerId === selectedWholesaler.id)
|
|
||||||
return selected ? selected.selectedQuantity : 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const getTotalAmount = () => {
|
const getTotalAmount = () => {
|
||||||
return selectedProducts.reduce((sum, product) => {
|
return selectedProducts.reduce((sum, product) => {
|
||||||
const discountedPrice = product.discount
|
const discountedPrice = product.discount
|
||||||
@ -359,20 +106,17 @@ export function CreateSupplyPage() {
|
|||||||
return selectedProducts.reduce((sum, product) => sum + product.selectedQuantity, 0)
|
return selectedProducts.reduce((sum, product) => sum + product.selectedQuantity, 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleCardsComplete = (cards: SelectedCard[]) => {
|
const handleCardsComplete = (cards: WBSelectedCard[]) => {
|
||||||
setSelectedCards(cards)
|
setSelectedCards(cards)
|
||||||
console.log('Карточки товаров выбраны:', cards)
|
console.log('Карточки товаров выбраны:', cards)
|
||||||
// TODO: Здесь будет создание поставки с данными карточек
|
|
||||||
router.push('/supplies')
|
router.push('/supplies')
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleCreateSupply = () => {
|
const handleCreateSupply = () => {
|
||||||
if (activeTab === 'cards') {
|
if (activeTab === 'cards') {
|
||||||
console.log('Создание поставки с карточками Wildberries')
|
console.log('Создание поставки с карточками Wildberries')
|
||||||
// TODO: Здесь будет создание поставки с данными карточек
|
|
||||||
} else {
|
} else {
|
||||||
console.log('Создание поставки с товарами:', selectedProducts)
|
console.log('Создание поставки с товарами:', selectedProducts)
|
||||||
// TODO: Здесь будет реальное создание поставки
|
|
||||||
}
|
}
|
||||||
router.push('/supplies')
|
router.push('/supplies')
|
||||||
}
|
}
|
||||||
@ -380,366 +124,45 @@ export function CreateSupplyPage() {
|
|||||||
const handleGoBack = () => {
|
const handleGoBack = () => {
|
||||||
if (selectedWholesaler) {
|
if (selectedWholesaler) {
|
||||||
setSelectedWholesaler(null)
|
setSelectedWholesaler(null)
|
||||||
// НЕ очищаем корзину! setSelectedProducts([])
|
|
||||||
setShowSummary(false)
|
setShowSummary(false)
|
||||||
} else {
|
} else {
|
||||||
router.push('/supplies')
|
router.push('/supplies')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Рендер товаров оптовика
|
const handleRemoveProduct = (productId: string, wholesalerId: string) => {
|
||||||
if (selectedWholesaler && activeTab === 'wholesaler') {
|
setSelectedProducts(prev =>
|
||||||
return (
|
prev.filter(p => !(p.id === productId && p.wholesalerId === wholesalerId))
|
||||||
<div className="h-screen flex overflow-hidden">
|
|
||||||
<Sidebar />
|
|
||||||
<main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
|
|
||||||
<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} • {wholesalerProducts.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-white/5 backdrop-blur border-white/10 mb-8">
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="flex items-center justify-between mb-6">
|
|
||||||
<h3 className="text-white font-semibold text-xl flex items-center">
|
|
||||||
<ShoppingCart className="h-5 w-5 mr-2" />
|
|
||||||
Корзина ({selectedProducts.length})
|
|
||||||
</h3>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowSummary(false)}
|
|
||||||
className="text-white/60 hover:text-white"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Текущий оптовик */}
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="flex items-center mb-3 pb-2 border-b border-white/10">
|
|
||||||
<Building2 className="h-4 w-4 text-blue-400 mr-2" />
|
|
||||||
<span className="text-white font-medium">{selectedWholesaler?.name}</span>
|
|
||||||
<Badge className="ml-2 bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
|
|
||||||
{selectedProducts.filter(p => p.wholesalerId === selectedWholesaler?.id).length} товар(ов)
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
{selectedProducts.filter(p => p.wholesalerId === selectedWholesaler?.id).map((product) => {
|
|
||||||
const discountedPrice = product.discount
|
|
||||||
? product.price * (1 - product.discount / 100)
|
|
||||||
: product.price
|
|
||||||
const totalPrice = discountedPrice * product.selectedQuantity
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={product.id} className="flex items-center space-x-4 bg-white/5 rounded-lg p-4">
|
|
||||||
<img
|
|
||||||
src={product.mainImage || '/api/placeholder/60/60'}
|
|
||||||
alt={product.name}
|
|
||||||
className="w-16 h-16 rounded-lg object-cover"
|
|
||||||
/>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h4 className="text-white font-medium text-sm mb-1 truncate">{product.name}</h4>
|
|
||||||
<p className="text-white/60 text-xs mb-2">{product.article}</p>
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<span className="text-white/60 text-sm">× {product.selectedQuantity}</span>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
|
|
||||||
{product.discount && (
|
|
||||||
<div className="text-white/40 text-xs line-through">
|
|
||||||
{formatCurrency(product.price * product.selectedQuantity)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Другие оптовики в корзине */}
|
|
||||||
{Object.entries(
|
|
||||||
selectedProducts.filter(p => p.wholesalerId !== selectedWholesaler?.id).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[] }>)
|
|
||||||
).map(([wholesalerId, group]) => (
|
|
||||||
<div key={wholesalerId} className="mb-6 last:mb-0">
|
|
||||||
<div className="flex items-center mb-3 pb-2 border-b border-white/10">
|
|
||||||
<Building2 className="h-4 w-4 text-purple-400 mr-2" />
|
|
||||||
<span className="text-white font-medium">{group.wholesaler}</span>
|
|
||||||
<Badge className="ml-2 bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs">
|
|
||||||
{group.products.length} товар(ов)
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
{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-4 bg-white/5 rounded-lg p-4">
|
|
||||||
<img
|
|
||||||
src={product.mainImage || '/api/placeholder/60/60'}
|
|
||||||
alt={product.name}
|
|
||||||
className="w-16 h-16 rounded-lg object-cover"
|
|
||||||
/>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h4 className="text-white font-medium text-sm mb-1 truncate">{product.name}</h4>
|
|
||||||
<p className="text-white/60 text-xs mb-2">{product.article}</p>
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<span className="text-white/60 text-sm">× {product.selectedQuantity}</span>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
|
|
||||||
{product.discount && (
|
|
||||||
<div className="text-white/40 text-xs line-through">
|
|
||||||
{formatCurrency(product.price * product.selectedQuantity)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Итого */}
|
|
||||||
<div className="border-t border-white/20 pt-4 mt-6">
|
|
||||||
<div className="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 mt-4 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
|
|
||||||
onClick={handleCreateSupply}
|
|
||||||
>
|
|
||||||
<ShoppingCart className="h-4 w-4 mr-2" />
|
|
||||||
Создать поставку
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{productsLoading ? (
|
|
||||||
<div className="flex items-center justify-center p-8 col-span-full">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mx-auto mb-4"></div>
|
|
||||||
<p className="text-white/60">Загружаем товары...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : wholesalerProducts.length === 0 ? (
|
|
||||||
<div className="flex items-center justify-center p-8 col-span-full">
|
|
||||||
<div className="text-center">
|
|
||||||
<Package className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
|
||||||
<p className="text-white/60">У этого оптовика нет товаров</p>
|
|
||||||
<p className="text-white/40 text-sm mt-2">Выберите другого оптовика</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
|
|
||||||
{wholesalerProducts.map((product: {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
article: string;
|
|
||||||
description?: string;
|
|
||||||
price: number;
|
|
||||||
quantity: number;
|
|
||||||
category?: { name: string };
|
|
||||||
brand?: string;
|
|
||||||
color?: string;
|
|
||||||
size?: string;
|
|
||||||
mainImage?: string;
|
|
||||||
images?: string[]
|
|
||||||
}) => {
|
|
||||||
const selectedQuantity = getSelectedQuantity(product.id)
|
|
||||||
const discountedPrice = product.price // Убираем discount так как его нет в схеме
|
|
||||||
|
|
||||||
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"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Количество в наличии */}
|
|
||||||
<div className="absolute top-2 right-2">
|
|
||||||
<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 text-xs`}>
|
|
||||||
{product.quantity}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Убираем discount badge так как поля нет в схеме */}
|
|
||||||
|
|
||||||
{/* 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-3 space-y-3">
|
|
||||||
{/* Заголовок и бренд */}
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center justify-between mb-1">
|
|
||||||
{product.brand && (
|
|
||||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
|
|
||||||
{product.brand}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
{/* Убираем isNew и isBestseller так как этих полей нет в схеме */}
|
|
||||||
</div>
|
|
||||||
<h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight">
|
|
||||||
{product.name}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Основная характеристика */}
|
|
||||||
<div className="text-white/60 text-xs">
|
|
||||||
{product.color && <span className="text-white">{product.color}</span>}
|
|
||||||
{product.size && <span className="text-white ml-2">{product.size}</span>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Цена */}
|
|
||||||
<div className="pt-2 border-t border-white/10">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className="text-white font-bold text-lg">
|
|
||||||
{formatCurrency(discountedPrice)}
|
|
||||||
</div>
|
|
||||||
{/* Убираем отображение оригинальной цены так как discount нет */}
|
|
||||||
</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 border border-white/20"
|
|
||||||
>
|
|
||||||
<Minus className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
inputMode="numeric"
|
|
||||||
pattern="[0-9]*"
|
|
||||||
value={selectedQuantity}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.target.value.replace(/[^0-9]/g, '')
|
|
||||||
const numValue = Math.max(0, Math.min(product.quantity, parseInt(value) || 0))
|
|
||||||
updateProductQuantity(product.id, numValue)
|
|
||||||
}}
|
|
||||||
onFocus={(e) => e.target.select()}
|
|
||||||
className="h-8 w-12 text-center bg-white/10 border border-white/20 text-white text-sm rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
|
||||||
/>
|
|
||||||
<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 border border-white/20"
|
|
||||||
>
|
|
||||||
<Plus className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{selectedQuantity > 0 && (
|
|
||||||
<Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
|
|
||||||
<ShoppingCart className="h-3 w-3 mr-1" />
|
|
||||||
{selectedQuantity}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Сумма для выбранного товара */}
|
|
||||||
{selectedQuantity > 0 && (
|
|
||||||
<div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-2">
|
|
||||||
<div className="text-green-300 text-xs font-medium text-center">
|
|
||||||
{formatCurrency(discountedPrice * selectedQuantity)}
|
|
||||||
</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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleCartQuantityChange = (productId: string, wholesalerId: string, quantity: number) => {
|
||||||
|
setSelectedProducts(prev =>
|
||||||
|
prev.map(p =>
|
||||||
|
p.id === productId && p.wholesalerId === wholesalerId
|
||||||
|
? { ...p, selectedQuantity: quantity }
|
||||||
|
: p
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Рендер страницы товаров оптовика
|
||||||
|
if (selectedWholesaler && activeTab === 'wholesaler') {
|
||||||
|
return (
|
||||||
|
<WholesalerProductsPage
|
||||||
|
selectedWholesaler={selectedWholesaler}
|
||||||
|
products={wholesalerProducts}
|
||||||
|
selectedProducts={selectedProducts}
|
||||||
|
onQuantityChange={updateProductQuantity}
|
||||||
|
onBack={handleGoBack}
|
||||||
|
onCreateSupply={handleCreateSupply}
|
||||||
|
formatCurrency={formatCurrency}
|
||||||
|
showSummary={showSummary}
|
||||||
|
setShowSummary={setShowSummary}
|
||||||
|
loading={productsLoading}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
// Главная страница с табами
|
// Главная страница с табами
|
||||||
return (
|
return (
|
||||||
@ -747,360 +170,68 @@ export function CreateSupplyPage() {
|
|||||||
<Sidebar />
|
<Sidebar />
|
||||||
<main className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}>
|
<main className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}>
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
{/* Верхняя строка: Назад + Заголовок + Табы */}
|
<TabsHeader
|
||||||
<div className="flex items-center justify-between mb-4">
|
activeTab={activeTab}
|
||||||
<div className="flex items-center space-x-4">
|
onTabChange={setActiveTab}
|
||||||
<Button
|
onBack={() => router.push('/supplies')}
|
||||||
variant="ghost"
|
cartInfo={
|
||||||
size="sm"
|
activeTab === 'cards' && selectedCards.length > 0
|
||||||
onClick={() => router.push('/supplies')}
|
? {
|
||||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
itemCount: selectedCards.reduce((sum, sc) => sum + sc.selectedQuantity, 0),
|
||||||
>
|
totalAmount: 0,
|
||||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
formatCurrency
|
||||||
Назад
|
}
|
||||||
</Button>
|
: activeTab === 'wholesaler' && selectedProducts.length > 0
|
||||||
<h1 className="text-2xl font-bold text-white">Создание поставки</h1>
|
? {
|
||||||
</div>
|
itemCount: selectedProducts.length,
|
||||||
|
totalAmount: getTotalAmount(),
|
||||||
<div>
|
formatCurrency
|
||||||
<div className="grid grid-cols-2 bg-white/10 backdrop-blur border border-white/20 rounded-lg p-1">
|
}
|
||||||
<button
|
: undefined
|
||||||
onClick={() => setActiveTab('cards')}
|
}
|
||||||
className={`px-4 py-2 text-sm rounded transition-all ${
|
onCartClick={() => setShowSummary(true)}
|
||||||
activeTab === 'cards'
|
/>
|
||||||
? 'bg-white/20 text-white'
|
|
||||||
: 'text-white/60 hover:text-white hover:bg-white/10'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<ShoppingCart className="h-4 w-4 mr-1 inline" />
|
|
||||||
Карточки
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab('wholesaler')}
|
|
||||||
className={`px-4 py-2 text-sm rounded transition-all ${
|
|
||||||
activeTab === 'wholesaler'
|
|
||||||
? 'bg-white/20 text-white'
|
|
||||||
: 'text-white/60 hover:text-white hover:bg-white/10'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Users className="h-4 w-4 mr-1 inline" />
|
|
||||||
Оптовики
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Контент карточек */}
|
{/* Контент карточек */}
|
||||||
{activeTab === 'cards' && (
|
{activeTab === 'cards' && (
|
||||||
<WBProductCards
|
<WBProductCards
|
||||||
onBack={() => router.push('/supplies')}
|
onBack={() => router.push('/supplies')}
|
||||||
onComplete={handleCardsComplete}
|
onComplete={handleCardsComplete}
|
||||||
|
showSummary={showSummary}
|
||||||
|
setShowSummary={setShowSummary}
|
||||||
|
selectedCards={selectedCards}
|
||||||
|
setSelectedCards={setSelectedCards}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Контент оптовиков */}
|
{/* Контент оптовиков */}
|
||||||
{activeTab === 'wholesaler' && (
|
{activeTab === 'wholesaler' && (
|
||||||
<div>
|
<div>
|
||||||
{/* Поиск */}
|
<CartSummary
|
||||||
<div className="mb-4">
|
selectedProducts={selectedProducts}
|
||||||
<div className="relative max-w-md">
|
onQuantityChange={handleCartQuantityChange}
|
||||||
<Search className="absolute left-3 top-3 h-4 w-4 text-white/40" />
|
onRemoveProduct={handleRemoveProduct}
|
||||||
<Input
|
onCreateSupply={handleCreateSupply}
|
||||||
placeholder="Поиск оптовиков..."
|
onToggleVisibility={() => setShowSummary(false)}
|
||||||
value={searchQuery}
|
formatCurrency={formatCurrency}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
visible={showSummary && selectedProducts.length > 0}
|
||||||
className="pl-10 glass-input text-white placeholder:text-white/40 h-10"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Корзина */}
|
<WholesalerGrid
|
||||||
{showSummary && selectedProducts.length > 0 && (
|
wholesalers={wholesalers}
|
||||||
<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">
|
onWholesalerSelect={setSelectedWholesaler}
|
||||||
<div className="p-4">
|
searchQuery={searchQuery}
|
||||||
<div className="flex items-center justify-between mb-4">
|
onSearchChange={setSearchQuery}
|
||||||
<div className="flex items-center space-x-3">
|
loading={counterpartiesLoading}
|
||||||
<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(selectedProducts.reduce((acc, p) => ({ ...acc, [p.wholesalerId]: true }), {})).length} поставщиков</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowSummary(false)}
|
|
||||||
className="text-white/60 hover:text-white hover:bg-white/10 rounded-xl"
|
|
||||||
>
|
|
||||||
<Eye className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Группировка по оптовикам */}
|
<FloatingCart
|
||||||
{Object.entries(
|
itemCount={selectedProducts.length}
|
||||||
selectedProducts.reduce((acc, product) => {
|
totalAmount={getTotalAmount()}
|
||||||
if (!acc[product.wholesalerId]) {
|
formatCurrency={formatCurrency}
|
||||||
acc[product.wholesalerId] = {
|
|
||||||
wholesaler: product.wholesalerName,
|
|
||||||
products: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
acc[product.wholesalerId].products.push(product)
|
|
||||||
return acc
|
|
||||||
}, {} as Record<string, { wholesaler: string; products: SelectedProduct[] }>)
|
|
||||||
).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) {
|
|
||||||
setSelectedProducts(prev =>
|
|
||||||
prev.filter(p => !(p.id === product.id && p.wholesalerId === product.wholesalerId))
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
setSelectedProducts(prev =>
|
|
||||||
prev.map(p =>
|
|
||||||
p.id === product.id && p.wholesalerId === product.wholesalerId
|
|
||||||
? { ...p, selectedQuantity: newQuantity }
|
|
||||||
: p
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
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={() => {
|
|
||||||
setSelectedProducts(prev =>
|
|
||||||
prev.map(p =>
|
|
||||||
p.id === product.id && p.wholesalerId === product.wholesalerId
|
|
||||||
? { ...p, selectedQuantity: Math.min(product.quantity, p.selectedQuantity + 1) }
|
|
||||||
: p
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
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={() => {
|
|
||||||
setSelectedProducts(prev =>
|
|
||||||
prev.filter(p => !(p.id === product.id && p.wholesalerId === 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={() => setShowSummary(false)}
|
|
||||||
>
|
|
||||||
<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={handleCreateSupply}
|
|
||||||
>
|
|
||||||
<ShoppingCart className="h-4 w-4 mr-2" />
|
|
||||||
Оформить поставку
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{counterpartiesLoading ? (
|
|
||||||
<div className="flex items-center justify-center p-8">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mx-auto mb-4"></div>
|
|
||||||
<p className="text-white/60">Загружаем оптовиков...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : filteredWholesalers.length === 0 ? (
|
|
||||||
<div className="text-center p-8">
|
|
||||||
<Users className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
|
||||||
<p className="text-white/60">
|
|
||||||
{searchQuery ? 'Оптовики не найдены' : 'У вас нет контрагентов-оптовиков'}
|
|
||||||
</p>
|
|
||||||
<p className="text-white/40 text-sm mt-2">
|
|
||||||
{searchQuery ? 'Попробуйте изменить условия поиска' : 'Добавьте оптовиков в разделе "Партнеры"'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
||||||
{filteredWholesalers.map((wholesaler: {
|
|
||||||
id: string;
|
|
||||||
name?: string;
|
|
||||||
fullName?: string;
|
|
||||||
inn?: string;
|
|
||||||
address?: string;
|
|
||||||
phones?: { value: string }[];
|
|
||||||
emails?: { value: string }[]
|
|
||||||
}) => (
|
|
||||||
<Card
|
|
||||||
key={wholesaler.id}
|
|
||||||
className="bg-white/10 backdrop-blur border-white/20 p-4 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-[1.02]"
|
|
||||||
onClick={() => {
|
|
||||||
// Адаптируем данные под существующий интерфейс
|
|
||||||
const adaptedWholesaler = {
|
|
||||||
id: wholesaler.id,
|
|
||||||
inn: wholesaler.inn || '',
|
|
||||||
name: wholesaler.name || 'Неизвестная организация',
|
|
||||||
fullName: wholesaler.fullName || wholesaler.name || 'Неизвестная организация',
|
|
||||||
address: wholesaler.address || 'Адрес не указан',
|
|
||||||
phone: wholesaler.phones?.[0]?.value,
|
|
||||||
email: wholesaler.emails?.[0]?.value,
|
|
||||||
rating: 4.5, // Временное значение
|
|
||||||
productCount: 0, // Временное значение
|
|
||||||
specialization: ['Оптовая торговля'] // Временное значение
|
|
||||||
}
|
|
||||||
setSelectedWholesaler(adaptedWholesaler)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-start space-x-2">
|
|
||||||
<div className="p-2 bg-blue-500/20 rounded-lg">
|
|
||||||
<Building2 className="h-4 w-4 text-blue-400" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="text-white font-semibold text-sm mb-1 truncate">
|
|
||||||
{wholesaler.name || 'Неизвестная организация'}
|
|
||||||
</h3>
|
|
||||||
<p className="text-white/60 text-xs mb-1 truncate">
|
|
||||||
{wholesaler.fullName || wholesaler.name}
|
|
||||||
</p>
|
|
||||||
{wholesaler.inn && (
|
|
||||||
<p className="text-white/40 text-xs">
|
|
||||||
ИНН: {wholesaler.inn}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
{wholesaler.address && (
|
|
||||||
<div className="flex items-center space-x-1">
|
|
||||||
<MapPin className="h-3 w-3 text-gray-400" />
|
|
||||||
<span className="text-white/80 text-xs truncate">{wholesaler.address}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{wholesaler.phones?.[0]?.value && (
|
|
||||||
<div className="flex items-center space-x-1">
|
|
||||||
<Phone className="h-3 w-3 text-gray-400" />
|
|
||||||
<span className="text-white/80 text-xs">{wholesaler.phones[0].value}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{wholesaler.emails?.[0]?.value && (
|
|
||||||
<div className="flex items-center space-x-1">
|
|
||||||
<Mail className="h-3 w-3 text-gray-400" />
|
|
||||||
<span className="text-white/80 text-xs truncate">{wholesaler.emails[0].value}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-2">
|
|
||||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs px-2 py-1">
|
|
||||||
Контрагент
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-2 border-t border-white/10">
|
|
||||||
<p className="text-white/60 text-xs">ИНН: {wholesaler.inn}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Floating корзина */}
|
|
||||||
{selectedProducts.length > 0 && !showSummary && (
|
|
||||||
<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"
|
|
||||||
onClick={() => setShowSummary(true)}
|
onClick={() => setShowSummary(true)}
|
||||||
>
|
visible={selectedProducts.length > 0 && !showSummary}
|
||||||
<ShoppingCart className="h-5 w-5 mr-2" />
|
/>
|
||||||
{selectedProducts.length} • {formatCurrency(getTotalAmount())}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
38
src/components/supplies/floating-cart.tsx
Normal file
38
src/components/supplies/floating-cart.tsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { ShoppingCart } from 'lucide-react'
|
||||||
|
|
||||||
|
interface FloatingCartProps {
|
||||||
|
itemCount: number
|
||||||
|
totalAmount: number
|
||||||
|
formatCurrency: (amount: number) => string
|
||||||
|
onClick: () => void
|
||||||
|
visible: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FloatingCart({
|
||||||
|
itemCount,
|
||||||
|
totalAmount,
|
||||||
|
formatCurrency,
|
||||||
|
onClick,
|
||||||
|
visible
|
||||||
|
}: FloatingCartProps) {
|
||||||
|
if (!visible || itemCount === 0) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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"
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
<ShoppingCart className="h-5 w-5 mr-2" />
|
||||||
|
{itemCount} • {formatCurrency(totalAmount)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
183
src/components/supplies/product-card.tsx
Normal file
183
src/components/supplies/product-card.tsx
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
"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 {
|
||||||
|
Plus,
|
||||||
|
Minus,
|
||||||
|
Eye,
|
||||||
|
Heart,
|
||||||
|
ShoppingCart
|
||||||
|
} from 'lucide-react'
|
||||||
|
|
||||||
|
import { WholesalerProduct } from './types'
|
||||||
|
|
||||||
|
interface ProductCardProps {
|
||||||
|
product: WholesalerProduct
|
||||||
|
selectedQuantity: number
|
||||||
|
onQuantityChange: (quantity: number) => void
|
||||||
|
formatCurrency: (amount: number) => string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProductCard({
|
||||||
|
product,
|
||||||
|
selectedQuantity,
|
||||||
|
onQuantityChange,
|
||||||
|
formatCurrency
|
||||||
|
}: ProductCardProps) {
|
||||||
|
const discountedPrice = product.discount
|
||||||
|
? product.price * (1 - product.discount / 100)
|
||||||
|
: product.price
|
||||||
|
|
||||||
|
const handleQuantityChange = (newQuantity: number) => {
|
||||||
|
const clampedQuantity = Math.max(0, Math.min(product.quantity, newQuantity))
|
||||||
|
onQuantityChange(clampedQuantity)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card 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"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Количество в наличии */}
|
||||||
|
<div className="absolute top-2 right-2">
|
||||||
|
<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 text-xs`}>
|
||||||
|
{product.quantity}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Скидка */}
|
||||||
|
{product.discount && (
|
||||||
|
<div className="absolute top-2 left-2">
|
||||||
|
<Badge className="bg-red-500/80 text-white border-0 backdrop-blur text-xs">
|
||||||
|
-{product.discount}%
|
||||||
|
</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-3 space-y-3">
|
||||||
|
{/* Заголовок и бренд */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
{product.brand && (
|
||||||
|
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
|
||||||
|
{product.brand}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
{product.isNew && (
|
||||||
|
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
|
||||||
|
NEW
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{product.isBestseller && (
|
||||||
|
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
|
||||||
|
HIT
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight">
|
||||||
|
{product.name}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Основная характеристика */}
|
||||||
|
<div className="text-white/60 text-xs">
|
||||||
|
{product.color && <span className="text-white">{product.color}</span>}
|
||||||
|
{product.size && <span className="text-white ml-2">{product.size}</span>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Цена */}
|
||||||
|
<div className="pt-2 border-t border-white/10">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="text-white font-bold text-lg">
|
||||||
|
{formatCurrency(discountedPrice)}
|
||||||
|
</div>
|
||||||
|
{product.discount && (
|
||||||
|
<div className="text-white/40 text-sm line-through">
|
||||||
|
{formatCurrency(product.price)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Управление количеством */}
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleQuantityChange(selectedQuantity - 1)}
|
||||||
|
disabled={selectedQuantity === 0}
|
||||||
|
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||||
|
>
|
||||||
|
<Minus className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
inputMode="numeric"
|
||||||
|
pattern="[0-9]*"
|
||||||
|
value={selectedQuantity}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value.replace(/[^0-9]/g, '')
|
||||||
|
const numValue = parseInt(value) || 0
|
||||||
|
handleQuantityChange(numValue)
|
||||||
|
}}
|
||||||
|
onFocus={(e) => e.target.select()}
|
||||||
|
className="h-8 w-12 text-center bg-white/10 border border-white/20 text-white text-sm rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleQuantityChange(selectedQuantity + 1)}
|
||||||
|
disabled={selectedQuantity >= product.quantity}
|
||||||
|
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||||
|
>
|
||||||
|
<Plus className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{selectedQuantity > 0 && (
|
||||||
|
<Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
|
||||||
|
<ShoppingCart className="h-3 w-3 mr-1" />
|
||||||
|
{selectedQuantity}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Сумма для выбранного товара */}
|
||||||
|
{selectedQuantity > 0 && (
|
||||||
|
<div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-2">
|
||||||
|
<div className="text-green-300 text-xs font-medium text-center">
|
||||||
|
{formatCurrency(discountedPrice * selectedQuantity)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
59
src/components/supplies/product-grid.tsx
Normal file
59
src/components/supplies/product-grid.tsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { ProductCard } from './product-card'
|
||||||
|
import { Package } from 'lucide-react'
|
||||||
|
import { WholesalerProduct } from './types'
|
||||||
|
|
||||||
|
interface ProductGridProps {
|
||||||
|
products: WholesalerProduct[]
|
||||||
|
selectedProducts: Record<string, number>
|
||||||
|
onQuantityChange: (productId: string, quantity: number) => void
|
||||||
|
formatCurrency: (amount: number) => string
|
||||||
|
loading?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProductGrid({
|
||||||
|
products,
|
||||||
|
selectedProducts,
|
||||||
|
onQuantityChange,
|
||||||
|
formatCurrency,
|
||||||
|
loading = false
|
||||||
|
}: ProductGridProps) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center p-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mx-auto mb-4"></div>
|
||||||
|
<p className="text-white/60">Загружаем товары...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (products.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center p-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<Package className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||||||
|
<p className="text-white/60">У этого оптовика нет товаров</p>
|
||||||
|
<p className="text-white/40 text-sm mt-2">Выберите другого оптовика</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
|
||||||
|
{products.map((product) => (
|
||||||
|
<ProductCard
|
||||||
|
key={product.id}
|
||||||
|
product={product}
|
||||||
|
selectedQuantity={selectedProducts[product.id] || 0}
|
||||||
|
onQuantityChange={(quantity) => onQuantityChange(product.id, quantity)}
|
||||||
|
formatCurrency={formatCurrency}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
85
src/components/supplies/tabs-header.tsx
Normal file
85
src/components/supplies/tabs-header.tsx
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
ShoppingCart,
|
||||||
|
Users
|
||||||
|
} from 'lucide-react'
|
||||||
|
|
||||||
|
interface TabsHeaderProps {
|
||||||
|
activeTab: 'cards' | 'wholesaler'
|
||||||
|
onTabChange: (tab: 'cards' | 'wholesaler') => void
|
||||||
|
onBack: () => void
|
||||||
|
cartInfo?: {
|
||||||
|
itemCount: number
|
||||||
|
totalAmount: number
|
||||||
|
formatCurrency: (amount: number) => string
|
||||||
|
}
|
||||||
|
onCartClick?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TabsHeader({
|
||||||
|
activeTab,
|
||||||
|
onTabChange,
|
||||||
|
onBack,
|
||||||
|
cartInfo,
|
||||||
|
onCartClick
|
||||||
|
}: TabsHeaderProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<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>
|
||||||
|
<h1 className="text-2xl font-bold text-white">Создание поставки</h1>
|
||||||
|
|
||||||
|
{/* Кнопка корзины */}
|
||||||
|
{cartInfo && cartInfo.itemCount > 0 && onCartClick && (
|
||||||
|
<Button
|
||||||
|
onClick={onCartClick}
|
||||||
|
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
|
||||||
|
>
|
||||||
|
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||||
|
Корзина ({cartInfo.itemCount})
|
||||||
|
{activeTab === 'wholesaler' && ` • ${cartInfo.formatCurrency(cartInfo.totalAmount)}`}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="grid grid-cols-2 bg-white/10 backdrop-blur border border-white/20 rounded-lg p-1">
|
||||||
|
<button
|
||||||
|
onClick={() => onTabChange('cards')}
|
||||||
|
className={`px-4 py-2 text-sm rounded transition-all ${
|
||||||
|
activeTab === 'cards'
|
||||||
|
? 'bg-white/20 text-white'
|
||||||
|
: 'text-white/60 hover:text-white hover:bg-white/10'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<ShoppingCart className="h-4 w-4 mr-1 inline" />
|
||||||
|
Карточки
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => onTabChange('wholesaler')}
|
||||||
|
className={`px-4 py-2 text-sm rounded transition-all ${
|
||||||
|
activeTab === 'wholesaler'
|
||||||
|
? 'bg-white/20 text-white'
|
||||||
|
: 'text-white/60 hover:text-white hover:bg-white/10'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-1 inline" />
|
||||||
|
Оптовики
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
50
src/components/supplies/types.ts
Normal file
50
src/components/supplies/types.ts
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
export interface WholesalerForCreation {
|
||||||
|
id: string
|
||||||
|
inn: string
|
||||||
|
name: string
|
||||||
|
fullName: string
|
||||||
|
address: string
|
||||||
|
phone?: string
|
||||||
|
email?: string
|
||||||
|
rating: number
|
||||||
|
productCount: number
|
||||||
|
avatar?: string
|
||||||
|
specialization: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export 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
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SelectedProduct extends WholesalerProduct {
|
||||||
|
selectedQuantity: number
|
||||||
|
wholesalerId: string
|
||||||
|
wholesalerName: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CounterpartyWholesaler {
|
||||||
|
id: string
|
||||||
|
inn?: string
|
||||||
|
name?: string
|
||||||
|
fullName?: string
|
||||||
|
address?: string
|
||||||
|
phones?: { value: string }[]
|
||||||
|
emails?: { value: string }[]
|
||||||
|
}
|
||||||
@ -8,8 +8,10 @@ import { Badge } from '@/components/ui/badge'
|
|||||||
import { Label } from '@/components/ui/label'
|
import { Label } from '@/components/ui/label'
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||||
import { Calendar as CalendarComponent } from '@/components/ui/calendar'
|
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
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 { Sidebar } from '@/components/dashboard/sidebar'
|
||||||
import { useSidebar } from '@/hooks/useSidebar'
|
import { useSidebar } from '@/hooks/useSidebar'
|
||||||
import {
|
import {
|
||||||
@ -17,7 +19,7 @@ import {
|
|||||||
Plus,
|
Plus,
|
||||||
Minus,
|
Minus,
|
||||||
ShoppingCart,
|
ShoppingCart,
|
||||||
Calendar,
|
Calendar as CalendarIcon,
|
||||||
Phone,
|
Phone,
|
||||||
User,
|
User,
|
||||||
MapPin,
|
MapPin,
|
||||||
@ -42,6 +44,8 @@ import { SelectedCard, FulfillmentService, ConsumableService, WildberriesCard }
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
interface Organization {
|
interface Organization {
|
||||||
id: string
|
id: string
|
||||||
name?: string
|
name?: string
|
||||||
@ -52,17 +56,29 @@ interface Organization {
|
|||||||
interface WBProductCardsProps {
|
interface WBProductCardsProps {
|
||||||
onBack: () => void
|
onBack: () => void
|
||||||
onComplete: (selectedCards: SelectedCard[]) => void
|
onComplete: (selectedCards: SelectedCard[]) => void
|
||||||
|
showSummary?: boolean
|
||||||
|
setShowSummary?: (show: boolean) => void
|
||||||
|
selectedCards?: SelectedCard[]
|
||||||
|
setSelectedCards?: (cards: SelectedCard[]) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
export function WBProductCards({ onBack, onComplete, showSummary: externalShowSummary, setShowSummary: externalSetShowSummary, selectedCards: externalSelectedCards, setSelectedCards: externalSetSelectedCards }: WBProductCardsProps) {
|
||||||
const { user } = useAuth()
|
const { user } = useAuth()
|
||||||
const { getSidebarMargin } = useSidebar()
|
const { getSidebarMargin } = useSidebar()
|
||||||
const [searchTerm, setSearchTerm] = useState('')
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [wbCards, setWbCards] = useState<WildberriesCard[]>([])
|
const [wbCards, setWbCards] = useState<WildberriesCard[]>([])
|
||||||
const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([]) // Товары в корзине
|
const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([]) // Товары в корзине
|
||||||
|
|
||||||
|
// Используем внешнее состояние если передано
|
||||||
|
const actualSelectedCards = externalSelectedCards !== undefined ? externalSelectedCards : selectedCards
|
||||||
|
const actualSetSelectedCards = externalSetSelectedCards || setSelectedCards
|
||||||
const [preparingCards, setPreparingCards] = useState<SelectedCard[]>([]) // Товары, готовящиеся к добавлению
|
const [preparingCards, setPreparingCards] = useState<SelectedCard[]>([]) // Товары, готовящиеся к добавлению
|
||||||
const [showSummary, setShowSummary] = useState(false)
|
const [showSummary, setShowSummary] = useState(false)
|
||||||
|
|
||||||
|
// Используем внешнее состояние если передано
|
||||||
|
const actualShowSummary = externalShowSummary !== undefined ? externalShowSummary : showSummary
|
||||||
|
const actualSetShowSummary = externalSetShowSummary || setShowSummary
|
||||||
const [globalDeliveryDate, setGlobalDeliveryDate] = useState<Date | undefined>(undefined)
|
const [globalDeliveryDate, setGlobalDeliveryDate] = useState<Date | undefined>(undefined)
|
||||||
const [fulfillmentServices, setFulfillmentServices] = useState<FulfillmentService[]>([])
|
const [fulfillmentServices, setFulfillmentServices] = useState<FulfillmentService[]>([])
|
||||||
const [organizationServices, setOrganizationServices] = 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}>}>({})
|
||||||
@ -243,7 +259,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
|
|
||||||
// Автоматически загружаем услуги и расходники для уже выбранных организаций
|
// Автоматически загружаем услуги и расходники для уже выбранных организаций
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
selectedCards.forEach(sc => {
|
actualSelectedCards.forEach(sc => {
|
||||||
if (sc.selectedFulfillmentOrg && !organizationServices[sc.selectedFulfillmentOrg]) {
|
if (sc.selectedFulfillmentOrg && !organizationServices[sc.selectedFulfillmentOrg]) {
|
||||||
loadOrganizationServices(sc.selectedFulfillmentOrg)
|
loadOrganizationServices(sc.selectedFulfillmentOrg)
|
||||||
}
|
}
|
||||||
@ -541,24 +557,22 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
setSelectedCards(prev => {
|
const newCards = [...actualSelectedCards]
|
||||||
const newCards = [...prev]
|
validCards.forEach(prepCard => {
|
||||||
validCards.forEach(prepCard => {
|
const cardWithDate = {
|
||||||
const cardWithDate = {
|
...prepCard,
|
||||||
...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) {
|
||||||
if (existingIndex >= 0) {
|
// Обновляем существующий товар
|
||||||
// Обновляем существующий товар
|
newCards[existingIndex] = cardWithDate
|
||||||
newCards[existingIndex] = cardWithDate
|
} else {
|
||||||
} else {
|
// Добавляем новый товар
|
||||||
// Добавляем новый товар
|
newCards.push(cardWithDate)
|
||||||
newCards.push(cardWithDate)
|
}
|
||||||
}
|
|
||||||
})
|
|
||||||
return newCards
|
|
||||||
})
|
})
|
||||||
|
actualSetSelectedCards(newCards)
|
||||||
|
|
||||||
// Очищаем подготовленные товары
|
// Очищаем подготовленные товары
|
||||||
setPreparingCards([])
|
setPreparingCards([])
|
||||||
@ -621,7 +635,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getTotalAmount = () => {
|
const getTotalAmount = () => {
|
||||||
return selectedCards.reduce((sum, sc) => {
|
return actualSelectedCards.reduce((sum, sc) => {
|
||||||
const additionalCostPerUnit = calculateAdditionalCostPerUnit(sc)
|
const additionalCostPerUnit = calculateAdditionalCostPerUnit(sc)
|
||||||
const totalCostPerUnit = (sc.customPrice / sc.selectedQuantity) + additionalCostPerUnit
|
const totalCostPerUnit = (sc.customPrice / sc.selectedQuantity) + additionalCostPerUnit
|
||||||
const totalCostForAllItems = totalCostPerUnit * sc.selectedQuantity
|
const totalCostForAllItems = totalCostPerUnit * sc.selectedQuantity
|
||||||
@ -630,7 +644,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getTotalItems = () => {
|
const getTotalItems = () => {
|
||||||
return selectedCards.reduce((sum, sc) => sum + sc.selectedQuantity, 0)
|
return actualSelectedCards.reduce((sum, sc) => sum + sc.selectedQuantity, 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Функция больше не нужна, так как услуги выбираются индивидуально
|
// Функция больше не нужна, так как услуги выбираются индивидуально
|
||||||
@ -667,7 +681,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
try {
|
try {
|
||||||
const supplyInput = {
|
const supplyInput = {
|
||||||
deliveryDate: selectedCards[0]?.deliveryDate || null,
|
deliveryDate: selectedCards[0]?.deliveryDate || null,
|
||||||
cards: selectedCards.map(sc => ({
|
cards: actualSelectedCards.map(sc => ({
|
||||||
nmId: sc.card.nmID.toString(),
|
nmId: sc.card.nmID.toString(),
|
||||||
vendorCode: sc.card.vendorCode,
|
vendorCode: sc.card.vendorCode,
|
||||||
title: sc.card.title,
|
title: sc.card.title,
|
||||||
@ -689,7 +703,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (showSummary) {
|
if (actualShowSummary) {
|
||||||
return (
|
return (
|
||||||
<div className="h-screen flex overflow-hidden">
|
<div className="h-screen flex overflow-hidden">
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
@ -700,30 +714,115 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setShowSummary(false)}
|
onClick={() => actualSetShowSummary(false)}
|
||||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||||
>
|
>
|
||||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||||
Назад к товарам
|
Назад
|
||||||
</Button>
|
</Button>
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold text-white mb-1">Сводка заказа</h2>
|
<h2 className="text-2xl font-bold text-white mb-1">Корзина</h2>
|
||||||
<p className="text-white/60">Проверьте данные перед созданием поставки</p>
|
<p className="text-white/60">{actualSelectedCards.length} карточек товаров</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={onBack}
|
|
||||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
|
||||||
>
|
|
||||||
Отмена
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
{/* Массовое назначение поставщиков */}
|
||||||
<div className="lg:col-span-2 space-y-4">
|
<Card className="bg-blue-500/10 backdrop-blur border-blue-500/20 p-4 mb-6">
|
||||||
{selectedCards.map((sc) => {
|
<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)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
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 fulfillmentOrgs = (counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')
|
||||||
const consumableOrgs = (counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')
|
const consumableOrgs = (counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')
|
||||||
|
|
||||||
@ -962,21 +1061,21 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="lg:col-span-1">
|
<div className="xl:col-span-1">
|
||||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6 sticky top-4">
|
<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>
|
<h3 className="text-white font-semibold text-lg mb-4">Итого</h3>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between text-sm">
|
||||||
<span className="text-white/60">Товаров:</span>
|
<span className="text-white/60">Товаров:</span>
|
||||||
<span className="text-white">{getTotalItems()}</span>
|
<span className="text-white">{getTotalItems()}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between text-sm">
|
||||||
<span className="text-white/60">Карточек:</span>
|
<span className="text-white/60">Карточек:</span>
|
||||||
<span className="text-white">{selectedCards.length}</span>
|
<span className="text-white">{actualSelectedCards.length}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="border-t border-white/20 pt-3 flex justify-between">
|
<div className="border-t border-white/20 pt-3 flex justify-between">
|
||||||
<span className="text-white font-semibold">Общая сумма:</span>
|
<span className="text-white font-semibold">Общая сумма:</span>
|
||||||
<span className="text-white font-bold text-xl">{formatCurrency(getTotalAmount())}</span>
|
<span className="text-white font-bold text-lg">{formatCurrency(getTotalAmount())}</span>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
|
className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
|
||||||
@ -998,18 +1097,6 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex items-center justify-end">
|
|
||||||
|
|
||||||
{selectedCards.length > 0 && (
|
|
||||||
<Button
|
|
||||||
onClick={() => setShowSummary(true)}
|
|
||||||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
|
|
||||||
>
|
|
||||||
<ShoppingCart className="h-4 w-4 mr-2" />
|
|
||||||
Корзина ({getTotalItems()})
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Поиск */}
|
{/* Поиск */}
|
||||||
{/* Поиск товаров и выбор даты поставки */}
|
{/* Поиск товаров и выбор даты поставки */}
|
||||||
@ -1030,62 +1117,26 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
<div className="w-44">
|
<div className="w-44">
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button
|
<button
|
||||||
variant="outline"
|
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"
|
||||||
size="sm"
|
|
||||||
className="w-full justify-start text-left font-normal bg-white/5 border-white/20 text-white hover:bg-white/10 hover:text-white h-9 text-xs"
|
|
||||||
>
|
>
|
||||||
<Calendar className="mr-1 h-3 w-3" />
|
<CalendarIcon className="mr-1 h-3 w-3" />
|
||||||
{globalDeliveryDate ? (
|
{globalDeliveryDate ? (
|
||||||
format(globalDeliveryDate, "dd.MM.yy", { locale: ru })
|
format(globalDeliveryDate, "dd.MM.yy", { locale: ru })
|
||||||
) : (
|
) : (
|
||||||
<span className="text-white/50">Дата поставки</span>
|
<span className="text-white/50">Дата поставки</span>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-72 p-0 glass-card" align="end">
|
<PopoverContent className="w-auto p-0" align="end">
|
||||||
<div className="p-4 border-b border-white/10">
|
<DatePicker
|
||||||
<p className="text-white font-medium text-sm">Дата поставки</p>
|
selected={globalDeliveryDate}
|
||||||
<p className="text-white/60 text-xs">Выберите дату для всех товаров</p>
|
onChange={(date: Date | null) => setGlobalDeliveryDate(date || undefined)}
|
||||||
</div>
|
minDate={new Date()}
|
||||||
<CalendarComponent
|
inline
|
||||||
mode="single"
|
locale="ru"
|
||||||
selected={globalDeliveryDate}
|
/>
|
||||||
onSelect={setGlobalDeliveryDate}
|
</PopoverContent>
|
||||||
disabled={(date) => date < new Date()}
|
|
||||||
initialFocus
|
|
||||||
locale={ru}
|
|
||||||
className="glass-card border-0 p-3"
|
|
||||||
classNames={{
|
|
||||||
months: "flex flex-col space-y-3",
|
|
||||||
month: "space-y-3",
|
|
||||||
caption: "flex justify-center pt-2 relative items-center",
|
|
||||||
caption_label: "text-sm font-medium text-white",
|
|
||||||
nav: "space-x-1 flex items-center",
|
|
||||||
nav_button: "h-7 w-7 glass-secondary text-white hover:bg-white/20 hover:text-white rounded-md border-white/20",
|
|
||||||
nav_button_previous: "absolute left-1",
|
|
||||||
nav_button_next: "absolute right-1",
|
|
||||||
table: "w-full border-collapse space-y-1",
|
|
||||||
head_row: "flex",
|
|
||||||
head_cell: "text-white/70 rounded-md w-9 font-normal text-xs",
|
|
||||||
row: "flex w-full mt-2",
|
|
||||||
cell: "h-9 w-9 text-center text-xs p-0 relative focus-within:relative focus-within:z-20",
|
|
||||||
day: "h-9 w-9 p-0 font-normal text-white hover:bg-white/15 hover:text-white rounded-md transition-colors",
|
|
||||||
day_selected: "glass-button text-white hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500",
|
|
||||||
day_today: "bg-white/15 text-white font-semibold border border-white/30",
|
|
||||||
day_outside: "text-white/30 opacity-50",
|
|
||||||
day_disabled: "text-white/20 opacity-30",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{globalDeliveryDate && (
|
|
||||||
<div className="p-4 border-t border-white/10">
|
|
||||||
<Badge className="glass-secondary text-white border-white/20 text-xs">
|
|
||||||
<Calendar className="h-3 w-3 mr-1" />
|
|
||||||
{format(globalDeliveryDate, "dd MMMM yyyy", { locale: ru })}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1127,7 +1178,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
{wbCards.map((card) => {
|
{wbCards.map((card) => {
|
||||||
const selectedQuantity = getSelectedQuantity(card)
|
const selectedQuantity = getSelectedQuantity(card)
|
||||||
const isSelected = selectedQuantity > 0
|
const isSelected = selectedQuantity > 0
|
||||||
const selectedCard = selectedCards.find(sc => sc.card.nmID === card.nmID)
|
const selectedCard = actualSelectedCards.find(sc => sc.card.nmID === card.nmID)
|
||||||
|
|
||||||
return (
|
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`}>
|
||||||
@ -1210,9 +1261,9 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
updateCardSelection(card, 'selectedQuantity', newQuantity)
|
updateCardSelection(card, 'selectedQuantity', newQuantity)
|
||||||
}}
|
}}
|
||||||
disabled={selectedQuantity <= 0}
|
disabled={selectedQuantity <= 0}
|
||||||
className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20 disabled:opacity-50"
|
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20 disabled:opacity-50 flex-shrink-0"
|
||||||
>
|
>
|
||||||
<Minus className="h-3 w-3" />
|
<Minus className="h-2.5 w-2.5" />
|
||||||
</Button>
|
</Button>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@ -1225,8 +1276,8 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
updateCardSelection(card, 'selectedQuantity', numValue)
|
updateCardSelection(card, 'selectedQuantity', numValue)
|
||||||
}}
|
}}
|
||||||
onFocus={(e) => e.target.select()}
|
onFocus={(e) => e.target.select()}
|
||||||
className="flex-1 h-7 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
className="flex-1 h-6 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none min-w-0"
|
||||||
placeholder="Кол-во"
|
placeholder="0"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@ -1235,9 +1286,9 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
const newQuantity = selectedQuantity + 1
|
const newQuantity = selectedQuantity + 1
|
||||||
updateCardSelection(card, 'selectedQuantity', newQuantity)
|
updateCardSelection(card, 'selectedQuantity', newQuantity)
|
||||||
}}
|
}}
|
||||||
className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20 flex-shrink-0"
|
||||||
>
|
>
|
||||||
<Plus className="h-3 w-3" />
|
<Plus className="h-2.5 w-2.5" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1253,8 +1304,8 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
|||||||
updateCardSelection(card, 'customPrice', totalPrice)
|
updateCardSelection(card, 'customPrice', totalPrice)
|
||||||
}}
|
}}
|
||||||
onFocus={(e) => e.target.select()}
|
onFocus={(e) => e.target.select()}
|
||||||
className="w-full h-7 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-green-500 focus:border-transparent"
|
className="w-full h-6 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-green-500 focus:border-transparent"
|
||||||
placeholder={`Общая цена за ${selectedQuantity} шт`}
|
placeholder={`Цена за ${selectedQuantity} шт`}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
84
src/components/supplies/wholesaler-card.tsx
Normal file
84
src/components/supplies/wholesaler-card.tsx
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import {
|
||||||
|
Building2,
|
||||||
|
MapPin,
|
||||||
|
Phone,
|
||||||
|
Mail
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { WholesalerForCreation } from './types'
|
||||||
|
|
||||||
|
interface WholesalerCardProps {
|
||||||
|
wholesaler: WholesalerForCreation
|
||||||
|
onClick: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WholesalerCard({ wholesaler, onClick }: WholesalerCardProps) {
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className="bg-white/10 backdrop-blur border-white/20 p-4 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-[1.02]"
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-start space-x-2">
|
||||||
|
<div className="p-2 bg-blue-500/20 rounded-lg">
|
||||||
|
<Building2 className="h-4 w-4 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h3 className="text-white font-semibold text-sm mb-1 truncate">
|
||||||
|
{wholesaler.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-white/60 text-xs mb-1 truncate">
|
||||||
|
{wholesaler.fullName}
|
||||||
|
</p>
|
||||||
|
<p className="text-white/40 text-xs">
|
||||||
|
ИНН: {wholesaler.inn}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<MapPin className="h-3 w-3 text-gray-400" />
|
||||||
|
<span className="text-white/80 text-xs truncate">{wholesaler.address}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{wholesaler.phone && (
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<Phone className="h-3 w-3 text-gray-400" />
|
||||||
|
<span className="text-white/80 text-xs">{wholesaler.phone}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{wholesaler.email && (
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<Mail className="h-3 w-3 text-gray-400" />
|
||||||
|
<span className="text-white/80 text-xs truncate">{wholesaler.email}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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 className="pt-2 border-t border-white/10 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-white/60 text-xs">Товаров: {wholesaler.productCount}</p>
|
||||||
|
<p className="text-white/60 text-xs">Рейтинг: {wholesaler.rating}/5</p>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
|
||||||
|
Контрагент
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
112
src/components/supplies/wholesaler-grid.tsx
Normal file
112
src/components/supplies/wholesaler-grid.tsx
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { WholesalerCard } from './wholesaler-card'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Users, Search } from 'lucide-react'
|
||||||
|
import { WholesalerForCreation, CounterpartyWholesaler } from './types'
|
||||||
|
|
||||||
|
interface WholesalerGridProps {
|
||||||
|
wholesalers: CounterpartyWholesaler[]
|
||||||
|
onWholesalerSelect: (wholesaler: WholesalerForCreation) => void
|
||||||
|
searchQuery: string
|
||||||
|
onSearchChange: (query: string) => void
|
||||||
|
loading?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WholesalerGrid({
|
||||||
|
wholesalers,
|
||||||
|
onWholesalerSelect,
|
||||||
|
searchQuery,
|
||||||
|
onSearchChange,
|
||||||
|
loading = false
|
||||||
|
}: WholesalerGridProps) {
|
||||||
|
// Фильтруем оптовиков по поисковому запросу
|
||||||
|
const filteredWholesalers = wholesalers.filter((wholesaler) =>
|
||||||
|
wholesaler.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
wholesaler.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
wholesaler.inn?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
)
|
||||||
|
|
||||||
|
const handleWholesalerClick = (wholesaler: CounterpartyWholesaler) => {
|
||||||
|
// Адаптируем данные под существующий интерфейс
|
||||||
|
const adaptedWholesaler: WholesalerForCreation = {
|
||||||
|
id: wholesaler.id,
|
||||||
|
inn: wholesaler.inn || '',
|
||||||
|
name: wholesaler.name || 'Неизвестная организация',
|
||||||
|
fullName: wholesaler.fullName || wholesaler.name || 'Неизвестная организация',
|
||||||
|
address: wholesaler.address || 'Адрес не указан',
|
||||||
|
phone: wholesaler.phones?.[0]?.value,
|
||||||
|
email: wholesaler.emails?.[0]?.value,
|
||||||
|
rating: 4.5, // Временное значение
|
||||||
|
productCount: 0, // Временное значение
|
||||||
|
specialization: ['Оптовая торговля'] // Временное значение
|
||||||
|
}
|
||||||
|
onWholesalerSelect(adaptedWholesaler)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center p-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mx-auto mb-4"></div>
|
||||||
|
<p className="text-white/60">Загружаем оптовиков...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* Поиск */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="relative max-w-md">
|
||||||
|
<Search className="absolute left-3 top-3 h-4 w-4 text-white/40" />
|
||||||
|
<Input
|
||||||
|
placeholder="Поиск оптовиков..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => onSearchChange(e.target.value)}
|
||||||
|
className="pl-10 glass-input text-white placeholder:text-white/40 h-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filteredWholesalers.length === 0 ? (
|
||||||
|
<div className="text-center p-8">
|
||||||
|
<Users className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||||||
|
<p className="text-white/60">
|
||||||
|
{searchQuery ? 'Оптовики не найдены' : 'У вас нет контрагентов-оптовиков'}
|
||||||
|
</p>
|
||||||
|
<p className="text-white/40 text-sm mt-2">
|
||||||
|
{searchQuery ? 'Попробуйте изменить условия поиска' : 'Добавьте оптовиков в разделе "Партнеры"'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||||
|
{filteredWholesalers.map((wholesaler) => {
|
||||||
|
const adaptedWholesaler: WholesalerForCreation = {
|
||||||
|
id: wholesaler.id,
|
||||||
|
inn: wholesaler.inn || '',
|
||||||
|
name: wholesaler.name || 'Неизвестная организация',
|
||||||
|
fullName: wholesaler.fullName || wholesaler.name || 'Неизвестная организация',
|
||||||
|
address: wholesaler.address || 'Адрес не указан',
|
||||||
|
phone: wholesaler.phones?.[0]?.value,
|
||||||
|
email: wholesaler.emails?.[0]?.value,
|
||||||
|
rating: 4.5,
|
||||||
|
productCount: 0,
|
||||||
|
specialization: ['Оптовая торговля']
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WholesalerCard
|
||||||
|
key={wholesaler.id}
|
||||||
|
wholesaler={adaptedWholesaler}
|
||||||
|
onClick={() => handleWholesalerClick(wholesaler)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
134
src/components/supplies/wholesaler-products-page.tsx
Normal file
134
src/components/supplies/wholesaler-products-page.tsx
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { ProductGrid } from './product-grid'
|
||||||
|
import { CartSummary } from './cart-summary'
|
||||||
|
import { FloatingCart } from './floating-cart'
|
||||||
|
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||||
|
import { useSidebar } from '@/hooks/useSidebar'
|
||||||
|
import { ArrowLeft, Info } from 'lucide-react'
|
||||||
|
import { WholesalerForCreation, WholesalerProduct, SelectedProduct } from './types'
|
||||||
|
|
||||||
|
interface WholesalerProductsPageProps {
|
||||||
|
selectedWholesaler: WholesalerForCreation
|
||||||
|
products: WholesalerProduct[]
|
||||||
|
selectedProducts: SelectedProduct[]
|
||||||
|
onQuantityChange: (productId: string, quantity: number) => void
|
||||||
|
onBack: () => void
|
||||||
|
onCreateSupply: () => void
|
||||||
|
formatCurrency: (amount: number) => string
|
||||||
|
showSummary: boolean
|
||||||
|
setShowSummary: (show: boolean) => void
|
||||||
|
loading: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WholesalerProductsPage({
|
||||||
|
selectedWholesaler,
|
||||||
|
products,
|
||||||
|
selectedProducts,
|
||||||
|
onQuantityChange,
|
||||||
|
onBack,
|
||||||
|
onCreateSupply,
|
||||||
|
formatCurrency,
|
||||||
|
showSummary,
|
||||||
|
setShowSummary,
|
||||||
|
loading
|
||||||
|
}: WholesalerProductsPageProps) {
|
||||||
|
const { getSidebarMargin } = useSidebar()
|
||||||
|
|
||||||
|
const getSelectedQuantity = (productId: string): number => {
|
||||||
|
const selected = selectedProducts.find(p => p.id === productId && p.wholesalerId === selectedWholesaler.id)
|
||||||
|
return selected ? selected.selectedQuantity : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedProductsMap = products.reduce((acc, product) => {
|
||||||
|
acc[product.id] = getSelectedQuantity(product.id)
|
||||||
|
return acc
|
||||||
|
}, {} as Record<string, number>)
|
||||||
|
|
||||||
|
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 handleRemoveProduct = (productId: string, wholesalerId: string) => {
|
||||||
|
onQuantityChange(productId, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCartQuantityChange = (productId: string, wholesalerId: string, quantity: number) => {
|
||||||
|
onQuantityChange(productId, quantity)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-screen flex overflow-hidden">
|
||||||
|
<Sidebar />
|
||||||
|
<main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
|
||||||
|
<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={onBack}
|
||||||
|
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} • {products.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>
|
||||||
|
|
||||||
|
<CartSummary
|
||||||
|
selectedProducts={selectedProducts}
|
||||||
|
onQuantityChange={handleCartQuantityChange}
|
||||||
|
onRemoveProduct={handleRemoveProduct}
|
||||||
|
onCreateSupply={onCreateSupply}
|
||||||
|
onToggleVisibility={() => setShowSummary(false)}
|
||||||
|
formatCurrency={formatCurrency}
|
||||||
|
visible={showSummary && selectedProducts.length > 0}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ProductGrid
|
||||||
|
products={products}
|
||||||
|
selectedProducts={selectedProductsMap}
|
||||||
|
onQuantityChange={onQuantityChange}
|
||||||
|
formatCurrency={formatCurrency}
|
||||||
|
loading={loading}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FloatingCart
|
||||||
|
itemCount={selectedProducts.length}
|
||||||
|
totalAmount={getTotalAmount()}
|
||||||
|
formatCurrency={formatCurrency}
|
||||||
|
onClick={() => setShowSummary(!showSummary)}
|
||||||
|
visible={selectedProducts.length > 0 && !showSummary}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user