287 lines
9.0 KiB
TypeScript
287 lines
9.0 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState } from "react";
|
||
import { Card } from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import {
|
||
ArrowLeft,
|
||
Building2,
|
||
MapPin,
|
||
Phone,
|
||
Mail,
|
||
Package,
|
||
Star,
|
||
} from "lucide-react";
|
||
// import { SupplierProducts } from './supplier-products'
|
||
|
||
interface Supplier {
|
||
id: string;
|
||
inn: string;
|
||
name: string;
|
||
fullName: string;
|
||
address: string;
|
||
phone?: string;
|
||
email?: string;
|
||
rating: number;
|
||
productCount: number;
|
||
avatar?: string;
|
||
specialization: string[];
|
||
}
|
||
|
||
interface SupplierSelectionProps {
|
||
onBack: () => void;
|
||
onClose: () => void;
|
||
onSupplyCreated: () => void;
|
||
}
|
||
|
||
// Моковые данные поставщиков
|
||
const mockSuppliers: Supplier[] = [
|
||
{
|
||
id: "1",
|
||
inn: "7707083893",
|
||
name: "ОПТ-Электроника",
|
||
fullName: 'ООО "ОПТ-Электроника"',
|
||
address: "г. Москва, ул. Садовая, д. 15",
|
||
phone: "+7 (495) 123-45-67",
|
||
email: "opt@electronics.ru",
|
||
rating: 4.8,
|
||
productCount: 1250,
|
||
specialization: ["Электроника", "Бытовая техника"],
|
||
},
|
||
{
|
||
id: "2",
|
||
inn: "7707083894",
|
||
name: "ТекстильМастер",
|
||
fullName: 'ООО "ТекстильМастер"',
|
||
address: "г. Иваново, пр. Ленина, д. 42",
|
||
phone: "+7 (4932) 55-66-77",
|
||
email: "sales@textilmaster.ru",
|
||
rating: 4.6,
|
||
productCount: 850,
|
||
specialization: ["Текстиль", "Одежда", "Домашний текстиль"],
|
||
},
|
||
{
|
||
id: "3",
|
||
inn: "7707083895",
|
||
name: "МетизКомплект",
|
||
fullName: 'ООО "МетизКомплект"',
|
||
address: "г. Тула, ул. Металлургов, д. 8",
|
||
phone: "+7 (4872) 33-44-55",
|
||
email: "info@metiz.ru",
|
||
rating: 4.9,
|
||
productCount: 2100,
|
||
specialization: ["Крепеж", "Метизы", "Инструменты"],
|
||
},
|
||
{
|
||
id: "4",
|
||
inn: "7707083896",
|
||
name: "ПродОпт",
|
||
fullName: 'ООО "ПродОпт"',
|
||
address: "г. Краснодар, ул. Красная, д. 123",
|
||
phone: "+7 (861) 777-88-99",
|
||
email: "order@prodopt.ru",
|
||
rating: 4.7,
|
||
productCount: 560,
|
||
specialization: ["Продукты питания", "Напитки"],
|
||
},
|
||
{
|
||
id: "5",
|
||
inn: "7707083897",
|
||
name: "СтройМатериалы+",
|
||
fullName: 'ООО "СтройМатериалы+"',
|
||
address: "г. Воронеж, пр. Революции, д. 67",
|
||
phone: "+7 (473) 222-33-44",
|
||
email: "stroim@materials.ru",
|
||
rating: 4.5,
|
||
productCount: 1800,
|
||
specialization: ["Стройматериалы", "Сантехника"],
|
||
},
|
||
{
|
||
id: "6",
|
||
inn: "7707083898",
|
||
name: "КосметикОпт",
|
||
fullName: 'ООО "КосметикОпт"',
|
||
address: "г. Санкт-Петербург, Невский пр., д. 45",
|
||
phone: "+7 (812) 111-22-33",
|
||
email: "beauty@cosmeticopt.ru",
|
||
rating: 4.4,
|
||
productCount: 920,
|
||
specialization: ["Косметика", "Парфюмерия", "Уход"],
|
||
},
|
||
];
|
||
|
||
export function SupplierSelection({
|
||
onBack,
|
||
onClose,
|
||
onSupplyCreated,
|
||
}: SupplierSelectionProps) {
|
||
const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(
|
||
null
|
||
);
|
||
|
||
if (selectedSupplier) {
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setSelectedSupplier(null)}
|
||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||
>
|
||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||
Назад
|
||
</Button>
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-white mb-1">
|
||
Товары поставщика
|
||
</h2>
|
||
<p className="text-white/60">{selectedSupplier.name}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="text-center py-12">
|
||
<p className="text-white/60">Компонент товаров в разработке...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const renderStars = (rating: number) => {
|
||
return Array.from({ length: 5 }, (_, i) => (
|
||
<Star
|
||
key={i}
|
||
className={`h-4 w-4 ${
|
||
i < Math.floor(rating)
|
||
? "text-yellow-400 fill-current"
|
||
: "text-gray-400"
|
||
}`}
|
||
/>
|
||
));
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={onBack}
|
||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||
>
|
||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||
Назад
|
||
</Button>
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-white mb-1">
|
||
Выбор поставщика
|
||
</h2>
|
||
<p className="text-white/60">
|
||
Выберите поставщика для создания поставки
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={onClose}
|
||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||
>
|
||
Отмена
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{mockSuppliers.map((supplier) => (
|
||
<Card
|
||
key={supplier.id}
|
||
className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-105"
|
||
onClick={() => setSelectedSupplier(supplier)}
|
||
>
|
||
<div className="space-y-4">
|
||
{/* Заголовок карточки */}
|
||
<div className="flex items-start space-x-3">
|
||
<div className="p-3 bg-blue-500/20 rounded-lg">
|
||
<Building2 className="h-6 w-6 text-blue-400" />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h3 className="text-white font-semibold text-lg mb-1 truncate">
|
||
{supplier.name}
|
||
</h3>
|
||
<p className="text-white/60 text-xs mb-2 truncate">
|
||
{supplier.fullName}
|
||
</p>
|
||
<div className="flex items-center space-x-1 mb-2">
|
||
{renderStars(supplier.rating)}
|
||
<span className="text-white/60 text-sm ml-2">
|
||
{supplier.rating}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Информация */}
|
||
<div className="space-y-2">
|
||
<div className="flex items-center space-x-2">
|
||
<MapPin className="h-4 w-4 text-gray-400" />
|
||
<span className="text-white/80 text-sm truncate">
|
||
{supplier.address}
|
||
</span>
|
||
</div>
|
||
|
||
{supplier.phone && (
|
||
<div className="flex items-center space-x-2">
|
||
<Phone className="h-4 w-4 text-gray-400" />
|
||
<span className="text-white/80 text-sm">
|
||
{supplier.phone}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{supplier.email && (
|
||
<div className="flex items-center space-x-2">
|
||
<Mail className="h-4 w-4 text-gray-400" />
|
||
<span className="text-white/80 text-sm truncate">
|
||
{supplier.email}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<Package className="h-4 w-4 text-gray-400" />
|
||
<span className="text-white/80 text-sm">
|
||
{supplier.productCount} товаров
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Специализация */}
|
||
<div className="space-y-2">
|
||
<p className="text-white/60 text-xs">Специализация:</p>
|
||
<div className="flex flex-wrap gap-1">
|
||
{supplier.specialization.map((spec, index) => (
|
||
<Badge
|
||
key={index}
|
||
className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs"
|
||
>
|
||
{spec}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ИНН */}
|
||
<div className="pt-2 border-t border-white/10">
|
||
<p className="text-white/60 text-xs">ИНН: {supplier.inn}</p>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|