Добавлены новые зависимости для компонента dropdown-menu и обновлены соответствующие импорты. Изменены заголовки и логика отображения статистики в компонентах FulfillmentDetailedSuppliesTab и FulfillmentSuppliesTab для улучшения восприятия данных. Упрощена логика расчета эффективности в компоненте SuppliesConsumablesTab, удалены неиспользуемые поля.
This commit is contained in:
Veronika Smirnova
645
src/components/supplies/create-consumables-supply-page.tsx
Normal file
645
src/components/supplies/create-consumables-supply-page.tsx
Normal file
@ -0,0 +1,645 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useQuery, useMutation } from "@apollo/client";
|
||||
import { Sidebar } from "@/components/dashboard/sidebar";
|
||||
import { useSidebar } from "@/hooks/useSidebar";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Building2,
|
||||
MapPin,
|
||||
Phone,
|
||||
Mail,
|
||||
Star,
|
||||
Search,
|
||||
Package,
|
||||
Plus,
|
||||
Minus,
|
||||
ShoppingCart,
|
||||
Wrench,
|
||||
Box,
|
||||
} from "lucide-react";
|
||||
import { GET_MY_COUNTERPARTIES, GET_ALL_PRODUCTS } from "@/graphql/queries";
|
||||
import { CREATE_SUPPLY_ORDER } from "@/graphql/mutations";
|
||||
import { OrganizationAvatar } from "@/components/market/organization-avatar";
|
||||
import { toast } from "sonner";
|
||||
import Image from "next/image";
|
||||
|
||||
interface ConsumableSupplier {
|
||||
id: string;
|
||||
inn: string;
|
||||
name?: string;
|
||||
fullName?: string;
|
||||
type: "FULFILLMENT" | "SELLER" | "LOGIST" | "WHOLESALE";
|
||||
address?: string;
|
||||
phones?: Array<{ value: string }>;
|
||||
emails?: Array<{ value: string }>;
|
||||
users?: Array<{ id: string; avatar?: string; managerName?: string }>;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface ConsumableProduct {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
price: number;
|
||||
category?: { name: string };
|
||||
images?: Array<{ url: string }>;
|
||||
organization: {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
stock?: number;
|
||||
unit?: string;
|
||||
}
|
||||
|
||||
interface SelectedConsumable {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
selectedQuantity: number;
|
||||
unit?: string;
|
||||
category?: string;
|
||||
supplierId: string;
|
||||
supplierName: string;
|
||||
}
|
||||
|
||||
export function CreateConsumablesSupplyPage() {
|
||||
const router = useRouter();
|
||||
const { getSidebarMargin } = useSidebar();
|
||||
const [selectedSupplier, setSelectedSupplier] =
|
||||
useState<ConsumableSupplier | null>(null);
|
||||
const [selectedConsumables, setSelectedConsumables] = useState<
|
||||
SelectedConsumable[]
|
||||
>([]);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [productSearchQuery, setProductSearchQuery] = useState("");
|
||||
const [deliveryDate, setDeliveryDate] = useState("");
|
||||
const [isCreatingSupply, setIsCreatingSupply] = useState(false);
|
||||
|
||||
// Загружаем контрагентов-поставщиков расходников
|
||||
const { data: counterpartiesData, loading: counterpartiesLoading } = useQuery(
|
||||
GET_MY_COUNTERPARTIES
|
||||
);
|
||||
|
||||
// Загружаем товары для выбранного поставщика
|
||||
const { data: productsData, loading: productsLoading } = useQuery(
|
||||
GET_ALL_PRODUCTS,
|
||||
{
|
||||
skip: !selectedSupplier,
|
||||
variables: { search: productSearchQuery || null, category: null },
|
||||
}
|
||||
);
|
||||
|
||||
// Мутация для создания заказа поставки расходников
|
||||
const [createSupplyOrder] = useMutation(CREATE_SUPPLY_ORDER);
|
||||
|
||||
// Фильтруем только поставщиков расходников (оптовиков)
|
||||
const consumableSuppliers = (
|
||||
counterpartiesData?.myCounterparties || []
|
||||
).filter((org: ConsumableSupplier) => org.type === "WHOLESALE");
|
||||
|
||||
// Фильтруем поставщиков по поисковому запросу
|
||||
const filteredSuppliers = consumableSuppliers.filter(
|
||||
(supplier: ConsumableSupplier) =>
|
||||
supplier.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
supplier.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
supplier.inn?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
// Фильтруем товары по выбранному поставщику
|
||||
const supplierProducts = selectedSupplier
|
||||
? (productsData?.allProducts || []).filter(
|
||||
(product: ConsumableProduct) =>
|
||||
product.organization.id === selectedSupplier.id
|
||||
)
|
||||
: [];
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const renderStars = (rating: number = 4.5) => {
|
||||
return Array.from({ length: 5 }, (_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`h-3 w-3 ${
|
||||
i < Math.floor(rating)
|
||||
? "text-yellow-400 fill-current"
|
||||
: "text-gray-400"
|
||||
}`}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
||||
const updateConsumableQuantity = (productId: string, quantity: number) => {
|
||||
const product = supplierProducts.find(
|
||||
(p: ConsumableProduct) => p.id === productId
|
||||
);
|
||||
if (!product || !selectedSupplier) return;
|
||||
|
||||
setSelectedConsumables((prev) => {
|
||||
const existing = prev.find((p) => p.id === productId);
|
||||
|
||||
if (quantity === 0) {
|
||||
// Удаляем расходник если количество 0
|
||||
return prev.filter((p) => p.id !== productId);
|
||||
}
|
||||
|
||||
if (existing) {
|
||||
// Обновляем количество существующего расходника
|
||||
return prev.map((p) =>
|
||||
p.id === productId ? { ...p, selectedQuantity: quantity } : p
|
||||
);
|
||||
} else {
|
||||
// Добавляем новый расходник
|
||||
return [
|
||||
...prev,
|
||||
{
|
||||
id: product.id,
|
||||
name: product.name,
|
||||
price: product.price,
|
||||
selectedQuantity: quantity,
|
||||
unit: product.unit || "шт",
|
||||
category: product.category?.name || "Расходники",
|
||||
supplierId: selectedSupplier.id,
|
||||
supplierName:
|
||||
selectedSupplier.name || selectedSupplier.fullName || "Поставщик",
|
||||
},
|
||||
];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getSelectedQuantity = (productId: string): number => {
|
||||
const selected = selectedConsumables.find((p) => p.id === productId);
|
||||
return selected ? selected.selectedQuantity : 0;
|
||||
};
|
||||
|
||||
const getTotalAmount = () => {
|
||||
return selectedConsumables.reduce(
|
||||
(sum, consumable) => sum + consumable.price * consumable.selectedQuantity,
|
||||
0
|
||||
);
|
||||
};
|
||||
|
||||
const getTotalItems = () => {
|
||||
return selectedConsumables.reduce(
|
||||
(sum, consumable) => sum + consumable.selectedQuantity,
|
||||
0
|
||||
);
|
||||
};
|
||||
|
||||
const handleCreateSupply = async () => {
|
||||
if (!selectedSupplier || selectedConsumables.length === 0 || !deliveryDate) {
|
||||
toast.error("Заполните все обязательные поля");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCreatingSupply(true);
|
||||
|
||||
try {
|
||||
const result = await createSupplyOrder({
|
||||
variables: {
|
||||
input: {
|
||||
partnerId: selectedSupplier.id,
|
||||
deliveryDate: deliveryDate,
|
||||
items: selectedConsumables.map((consumable) => ({
|
||||
productId: consumable.id,
|
||||
quantity: consumable.selectedQuantity,
|
||||
})),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (result.data?.createSupplyOrder?.success) {
|
||||
toast.success("Поставка расходников создана успешно!");
|
||||
router.push("/supplies");
|
||||
} else {
|
||||
toast.error(
|
||||
result.data?.createSupplyOrder?.message || "Ошибка при создании поставки"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error creating consumables supply:", error);
|
||||
toast.error("Ошибка при создании поставки расходников");
|
||||
} finally {
|
||||
setIsCreatingSupply(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Если выбран поставщик, показываем его товары
|
||||
if (selectedSupplier) {
|
||||
return (
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main
|
||||
className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}
|
||||
>
|
||||
<div className="h-full w-full flex flex-col">
|
||||
{/* Заголовок с навигацией */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<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>
|
||||
<h1 className="text-2xl font-bold text-white mb-1">
|
||||
Расходники поставщика
|
||||
</h1>
|
||||
<p className="text-white/60">
|
||||
{selectedSupplier.name || selectedSupplier.fullName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => router.push("/supplies")}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Поиск по товарам */}
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Поиск расходников..."
|
||||
value={productSearchQuery}
|
||||
onChange={(e) => setProductSearchQuery(e.target.value)}
|
||||
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Основной контент */}
|
||||
<div className="flex-1 overflow-hidden flex gap-4">
|
||||
{/* Список товаров */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{productsLoading ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-white/60">Загрузка расходников...</p>
|
||||
</div>
|
||||
) : supplierProducts.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
|
||||
<p className="text-white/60">
|
||||
У данного поставщика нет доступных расходников
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{supplierProducts.map((product: ConsumableProduct) => {
|
||||
const selectedQuantity = getSelectedQuantity(product.id);
|
||||
return (
|
||||
<Card
|
||||
key={product.id}
|
||||
className="bg-white/10 backdrop-blur border-white/20 p-4"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{/* Изображение товара */}
|
||||
<div className="aspect-square bg-white/5 rounded-lg overflow-hidden">
|
||||
{product.images && product.images.length > 0 ? (
|
||||
<Image
|
||||
src={product.images[0].url}
|
||||
alt={product.name}
|
||||
width={200}
|
||||
height={200}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<Wrench className="h-12 w-12 text-white/40" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Информация о товаре */}
|
||||
<div>
|
||||
<h3 className="text-white font-medium mb-1 line-clamp-2">
|
||||
{product.name}
|
||||
</h3>
|
||||
{product.category && (
|
||||
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs mb-2">
|
||||
{product.category.name}
|
||||
</Badge>
|
||||
)}
|
||||
<p className="text-white/60 text-sm mb-2 line-clamp-2">
|
||||
{product.description || "Описание отсутствует"}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-green-400 font-semibold">
|
||||
{formatCurrency(product.price)}
|
||||
{product.unit && (
|
||||
<span className="text-white/60 text-sm ml-1">
|
||||
/ {product.unit}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{product.stock && (
|
||||
<span className="text-white/60 text-sm">
|
||||
В наличии: {product.stock}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Управление количеством */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
updateConsumableQuantity(
|
||||
product.id,
|
||||
Math.max(0, selectedQuantity - 1)
|
||||
)
|
||||
}
|
||||
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
disabled={selectedQuantity === 0}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-white font-medium w-8 text-center">
|
||||
{selectedQuantity}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
updateConsumableQuantity(
|
||||
product.id,
|
||||
selectedQuantity + 1
|
||||
)
|
||||
}
|
||||
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{selectedQuantity > 0 && (
|
||||
<span className="text-green-400 font-medium text-sm">
|
||||
{formatCurrency(
|
||||
product.price * selectedQuantity
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Корзина */}
|
||||
{selectedConsumables.length > 0 && (
|
||||
<div className="w-80 flex-shrink-0">
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4 sticky top-0">
|
||||
<h3 className="text-white font-semibold mb-4 flex items-center">
|
||||
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||
Корзина ({getTotalItems()} шт)
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
|
||||
{selectedConsumables.map((consumable) => (
|
||||
<div
|
||||
key={consumable.id}
|
||||
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white text-sm font-medium truncate">
|
||||
{consumable.name}
|
||||
</p>
|
||||
<p className="text-white/60 text-xs">
|
||||
{formatCurrency(consumable.price)} ×{" "}
|
||||
{consumable.selectedQuantity}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-green-400 font-medium text-sm">
|
||||
{formatCurrency(
|
||||
consumable.price * consumable.selectedQuantity
|
||||
)}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
updateConsumableQuantity(consumable.id, 0)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-white/20 pt-4">
|
||||
<div className="mb-4">
|
||||
<label className="text-white/60 text-sm mb-2 block">
|
||||
Дата поставки:
|
||||
</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={deliveryDate}
|
||||
onChange={(e) => setDeliveryDate(e.target.value)}
|
||||
className="bg-white/10 border-white/20 text-white"
|
||||
min={new Date().toISOString().split('T')[0]}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-white font-semibold">Итого:</span>
|
||||
<span className="text-green-400 font-bold text-lg">
|
||||
{formatCurrency(getTotalAmount())}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleCreateSupply}
|
||||
disabled={isCreatingSupply || !deliveryDate}
|
||||
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50"
|
||||
>
|
||||
{isCreatingSupply ? "Создание..." : "Создать поставку расходников"}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Показываем список поставщиков
|
||||
return (
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main
|
||||
className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}
|
||||
>
|
||||
<div className="h-full w-full flex flex-col">
|
||||
{/* Заголовок */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white mb-2">
|
||||
Создание поставки расходников
|
||||
</h1>
|
||||
<p className="text-white/60">
|
||||
Выберите поставщика расходников для создания поставки
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => router.push("/supplies")}
|
||||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад к поставкам
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Поиск */}
|
||||
<div className="mb-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Поиск поставщиков по названию, ИНН..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10 max-w-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Список поставщиков */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{counterpartiesLoading ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-white/60">Загрузка поставщиков...</p>
|
||||
</div>
|
||||
) : filteredSuppliers.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<Building2 className="h-12 w-12 text-white/40 mx-auto mb-4" />
|
||||
<p className="text-white/60">
|
||||
{searchQuery
|
||||
? "Поставщики не найдены"
|
||||
: "У вас пока нет партнеров-поставщиков расходников"}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredSuppliers.map((supplier: ConsumableSupplier) => (
|
||||
<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"
|
||||
onClick={() => setSelectedSupplier(supplier)}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Аватар и основная информация */}
|
||||
<div className="flex items-start space-x-3">
|
||||
<OrganizationAvatar
|
||||
organization={{
|
||||
id: supplier.id,
|
||||
name:
|
||||
supplier.name || supplier.fullName || "Поставщик",
|
||||
users: supplier.users || [],
|
||||
}}
|
||||
size="md"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-white font-semibold text-lg mb-1 truncate">
|
||||
{supplier.name || supplier.fullName || "Поставщик"}
|
||||
</h3>
|
||||
<div className="flex items-center space-x-1 mb-2">
|
||||
{renderStars()}
|
||||
<span className="text-white/60 text-sm ml-2">
|
||||
4.5
|
||||
</span>
|
||||
</div>
|
||||
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30">
|
||||
<Wrench className="h-3 w-3 mr-1" />
|
||||
Поставщик расходников
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Контактная информация */}
|
||||
<div className="space-y-2">
|
||||
{supplier.address && (
|
||||
<div className="flex items-center space-x-2 text-white/60 text-sm">
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span className="truncate">{supplier.address}</span>
|
||||
</div>
|
||||
)}
|
||||
{supplier.phones && supplier.phones.length > 0 && (
|
||||
<div className="flex items-center space-x-2 text-white/60 text-sm">
|
||||
<Phone className="h-4 w-4" />
|
||||
<span>{supplier.phones[0].value}</span>
|
||||
</div>
|
||||
)}
|
||||
{supplier.emails && supplier.emails.length > 0 && (
|
||||
<div className="flex items-center space-x-2 text-white/60 text-sm">
|
||||
<Mail className="h-4 w-4" />
|
||||
<span className="truncate">
|
||||
{supplier.emails[0].value}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Дополнительная информация */}
|
||||
<div className="pt-2 border-t border-white/10">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-white/60">ИНН:</span>
|
||||
<span className="text-white">{supplier.inn}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Кнопка выбора */}
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedSupplier(supplier);
|
||||
}}
|
||||
>
|
||||
<Box className="h-4 w-4 mr-2" />
|
||||
Выбрать поставщика
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user