Добавлен новый функционал для обработки заказов поставок расходников в компоненте CreateConsumablesSupplyPage. Реализован выбор фулфилмент-центра, улучшена логика создания заказа с учетом нового поля fulfillmentCenterId. Обновлен компонент SuppliesConsumablesTab для отображения заказов поставок с новыми данными. Оптимизированы стили и структура кода для повышения удобства использования.

This commit is contained in:
Veronika Smirnova
2025-07-24 14:12:20 +03:00
parent 441d2daefb
commit 41228f4c17
6 changed files with 1036 additions and 1170 deletions

View File

@ -24,7 +24,11 @@ import {
Wrench,
Box,
} from "lucide-react";
import { GET_MY_COUNTERPARTIES, GET_ALL_PRODUCTS } from "@/graphql/queries";
import {
GET_MY_COUNTERPARTIES,
GET_ALL_PRODUCTS,
GET_SUPPLY_ORDERS,
} from "@/graphql/queries";
import { CREATE_SUPPLY_ORDER } from "@/graphql/mutations";
import { OrganizationAvatar } from "@/components/market/organization-avatar";
import { toast } from "sonner";
@ -81,6 +85,8 @@ export function CreateConsumablesSupplyPage() {
const [searchQuery, setSearchQuery] = useState("");
const [productSearchQuery, setProductSearchQuery] = useState("");
const [deliveryDate, setDeliveryDate] = useState("");
const [selectedFulfillmentCenter, setSelectedFulfillmentCenter] =
useState<ConsumableSupplier | null>(null);
const [isCreatingSupply, setIsCreatingSupply] = useState(false);
// Загружаем контрагентов-поставщиков расходников
@ -105,6 +111,11 @@ export function CreateConsumablesSupplyPage() {
counterpartiesData?.myCounterparties || []
).filter((org: ConsumableSupplier) => org.type === "WHOLESALE");
// Фильтруем фулфилмент-центры
const fulfillmentCenters = (
counterpartiesData?.myCounterparties || []
).filter((org: ConsumableSupplier) => org.type === "FULFILLMENT");
// Фильтруем поставщиков по поисковому запросу
const filteredSuppliers = consumableSuppliers.filter(
(supplier: ConsumableSupplier) =>
@ -210,6 +221,13 @@ export function CreateConsumablesSupplyPage() {
return;
}
// Для селлеров требуется выбор фулфилмент-центра
// TODO: Добавить проверку типа текущей организации
if (!selectedFulfillmentCenter) {
toast.error("Выберите фулфилмент-центр для доставки");
return;
}
setIsCreatingSupply(true);
try {
@ -218,21 +236,32 @@ export function CreateConsumablesSupplyPage() {
input: {
partnerId: selectedSupplier.id,
deliveryDate: deliveryDate,
fulfillmentCenterId: selectedFulfillmentCenter.id,
items: selectedConsumables.map((consumable) => ({
productId: consumable.id,
quantity: consumable.selectedQuantity,
})),
},
},
refetchQueries: [{ query: GET_SUPPLY_ORDERS }],
});
if (result.data?.createSupplyOrder?.success) {
toast.success("Поставка расходников создана успешно!");
router.push("/supplies");
toast.success("Заказ поставки расходников создан успешно!");
// Очищаем форму
setSelectedSupplier(null);
setSelectedFulfillmentCenter(null);
setSelectedConsumables([]);
setDeliveryDate("");
setProductSearchQuery("");
setSearchQuery("");
// Перенаправляем на страницу поставок фулфилмента
router.push("/fulfillment-supplies");
} else {
toast.error(
result.data?.createSupplyOrder?.message ||
"Ошибка при создании поставки"
"Ошибка при создании заказа поставки"
);
}
} catch (error) {
@ -247,16 +276,16 @@ export function CreateConsumablesSupplyPage() {
<div className="h-screen flex overflow-hidden">
<Sidebar />
<main
className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}
className={`flex-1 ${getSidebarMargin()} overflow-auto transition-all duration-300`}
>
<div className="h-full w-full flex flex-col">
<div className="min-h-full w-full flex flex-col px-3 py-2">
{/* Заголовок */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center justify-between mb-3 flex-shrink-0">
<div>
<h1 className="text-2xl font-bold text-white mb-2">
<h1 className="text-xl font-bold text-white mb-1">
Создание поставки расходников
</h1>
<p className="text-white/60">
<p className="text-white/60 text-sm">
Выберите поставщика и добавьте расходники в заказ
</p>
</div>
@ -264,130 +293,165 @@ export function CreateConsumablesSupplyPage() {
variant="ghost"
size="sm"
onClick={() => router.push("/supplies")}
className="text-white/60 hover:text-white hover:bg-white/10"
className="text-white/60 hover:text-white hover:bg-white/10 text-sm"
>
<ArrowLeft className="h-4 w-4 mr-2" />
Назад к поставкам
<ArrowLeft className="h-4 w-4 mr-1" />
Назад
</Button>
</div>
{/* Основной контент с двумя блоками */}
<div className="flex-1 overflow-hidden flex gap-4">
<div className="flex-1 flex gap-3 min-h-0">
{/* Левая колонка - Поставщики и Расходники */}
<div className="flex-1 flex flex-col gap-4 overflow-hidden">
<div className="flex-1 flex flex-col gap-3 min-h-0">
{/* Блок "Поставщики" */}
<Card className="bg-white/10 backdrop-blur border-white/20 flex-shrink-0">
<div className="p-4 border-b border-white/10">
<div className="flex items-center justify-between mb-3">
<h2 className="text-lg font-semibold text-white flex items-center">
<Building2 className="h-5 w-5 mr-2" />
<Card className="bg-gradient-to-r from-white/15 via-white/10 to-white/15 backdrop-blur-xl border border-white/30 shadow-2xl flex-shrink-0 sticky top-0 z-10 rounded-xl overflow-hidden">
<div className="p-3 bg-gradient-to-r from-purple-500/10 to-pink-500/10">
<div className="flex items-center justify-between gap-4">
<h2 className="text-lg font-bold text-white flex items-center flex-shrink-0 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
<Building2 className="h-5 w-5 mr-3 text-purple-400" />
Поставщики
</h2>
<div className="relative flex-1 max-w-sm">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-300 h-4 w-4 z-10" />
<Input
placeholder="Найти поставщика..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white/20 backdrop-blur border-white/30 text-white placeholder-white/50 pl-10 h-8 text-sm rounded-full shadow-inner focus:ring-2 focus:ring-purple-400/50 focus:border-purple-400/50 transition-all duration-300"
/>
</div>
{selectedSupplier && (
<Button
variant="ghost"
size="sm"
onClick={() => setSelectedSupplier(null)}
className="text-white/60 hover:text-white hover:bg-white/10"
className="text-white/70 hover:text-white hover:bg-white/20 text-sm h-8 px-3 flex-shrink-0 rounded-full transition-all duration-300 hover:scale-105"
>
Сбросить выбор
Сбросить
</Button>
)}
</div>
<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"
/>
</div>
</div>
<div className="p-4 max-h-60 overflow-y-auto">
<div className="px-3 pb-3 h-24 overflow-hidden">
{counterpartiesLoading ? (
<div className="text-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent mx-auto mb-3"></div>
<p className="text-white/60">Загрузка поставщиков...</p>
<div className="text-center py-4">
<div className="animate-spin rounded-full h-6 w-6 border-2 border-purple-400 border-t-transparent mx-auto mb-2"></div>
<p className="text-white/70 text-sm font-medium">
Загружаем поставщиков...
</p>
</div>
) : filteredSuppliers.length === 0 ? (
<div className="text-center py-8">
<Building2 className="h-8 w-8 text-white/40 mx-auto mb-2" />
<p className="text-white/60 text-sm">
<div className="text-center py-4">
<div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full p-3 w-fit mx-auto mb-2">
<Building2 className="h-6 w-6 text-purple-300" />
</div>
<p className="text-white/70 text-sm font-medium">
{searchQuery
? "Поставщики не найдены"
: "У вас пока нет партнеров-поставщиков расходников"}
: "Добавьте поставщиков"}
</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
{filteredSuppliers.map((supplier: ConsumableSupplier) => (
<Card
key={supplier.id}
className={`p-3 cursor-pointer transition-all border ${
selectedSupplier?.id === supplier.id
? "bg-orange-500/20 border-orange-500/50"
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"
}`}
onClick={() => setSelectedSupplier(supplier)}
>
<div className="flex items-center space-x-3">
<OrganizationAvatar
organization={{
id: supplier.id,
name:
supplier.name ||
supplier.fullName ||
"Поставщик",
fullName: supplier.fullName,
users: (supplier.users || []).map((user) => ({
id: user.id,
avatar: user.avatar,
})),
}}
size="sm"
/>
<div className="flex-1 min-w-0">
<h3 className="text-white font-medium text-sm truncate">
{supplier.name ||
supplier.fullName ||
"Поставщик"}
</h3>
<div className="flex items-center space-x-1 mb-1">
{renderStars(4.5)}
<span className="text-white/60 text-xs ml-1">
4.5
</span>
<div className="flex gap-2 h-full pt-1">
{filteredSuppliers
.slice(0, 7)
.map((supplier: ConsumableSupplier, index) => (
<Card
key={supplier.id}
className={`relative cursor-pointer transition-all duration-300 border flex-shrink-0 rounded-xl overflow-hidden group hover:scale-105 hover:shadow-xl ${
selectedSupplier?.id === supplier.id
? "bg-gradient-to-br from-orange-500/30 via-orange-400/20 to-orange-500/30 border-orange-400/60 shadow-lg shadow-orange-500/25"
: "bg-gradient-to-br from-white/10 via-white/5 to-white/10 border-white/20 hover:from-white/20 hover:via-white/10 hover:to-white/20 hover:border-white/40"
}`}
style={{
width: "calc((100% - 48px) / 7)", // 48px = 6 gaps * 8px each
animationDelay: `${index * 100}ms`,
}}
onClick={() => setSelectedSupplier(supplier)}
>
<div className="flex flex-col items-center justify-center h-full p-2 space-y-1">
<div className="relative">
<OrganizationAvatar
organization={{
id: supplier.id,
name:
supplier.name ||
supplier.fullName ||
"Поставщик",
fullName: supplier.fullName,
users: (supplier.users || []).map(
(user) => ({
id: user.id,
avatar: user.avatar,
})
),
}}
size="sm"
/>
{selectedSupplier?.id === supplier.id && (
<div className="absolute -top-1 -right-1 bg-gradient-to-r from-orange-400 to-orange-500 rounded-full w-4 h-4 flex items-center justify-center shadow-lg animate-pulse">
<span className="text-white text-xs font-bold">
</span>
</div>
)}
</div>
<div className="text-center w-full space-y-0.5">
<h3 className="text-white font-semibold text-xs truncate leading-tight group-hover:text-purple-200 transition-colors duration-300">
{(
supplier.name ||
supplier.fullName ||
"Поставщик"
).slice(0, 10)}
</h3>
<div className="flex items-center justify-center space-x-1">
<span className="text-yellow-400 text-sm animate-pulse">
</span>
<span className="text-white/80 text-xs font-medium">
4.5
</span>
</div>
<div className="w-full bg-white/10 rounded-full h-1 overflow-hidden">
<div
className="bg-gradient-to-r from-purple-400 to-pink-400 h-full rounded-full animate-pulse"
style={{ width: "90%" }}
></div>
</div>
</div>
<p className="text-white/60 text-xs truncate">
ИНН: {supplier.inn}
</p>
</div>
{selectedSupplier?.id === supplier.id && (
<div className="flex-shrink-0">
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
Выбран
</Badge>
</div>
)}
{/* Hover эффект */}
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/0 to-pink-500/0 group-hover:from-purple-500/10 group-hover:to-pink-500/10 transition-all duration-300 pointer-events-none"></div>
</Card>
))}
{filteredSuppliers.length > 7 && (
<div
className="flex-shrink-0 flex flex-col items-center justify-center bg-gradient-to-br from-white/10 to-white/5 rounded-xl border border-white/20 text-white/70 hover:text-white transition-all duration-300 hover:scale-105"
style={{ width: "calc((100% - 48px) / 7)" }}
>
<div className="text-lg font-bold text-purple-300">
+{filteredSuppliers.length - 7}
</div>
</Card>
))}
<div className="text-xs">ещё</div>
</div>
)}
</div>
)}
</div>
</Card>
{/* Блок "Расходники" */}
<Card className="bg-white/10 backdrop-blur border-white/20 flex-1 overflow-hidden">
<div className="p-4 border-b border-white/10">
<div className="flex items-center justify-between mb-3">
<Card className="bg-white/10 backdrop-blur border-white/20 flex-1 min-h-0 flex flex-col">
<div className="p-3 border-b border-white/10 flex-shrink-0">
<div className="flex items-center justify-between mb-2">
<h2 className="text-lg font-semibold text-white flex items-center">
<Wrench className="h-5 w-5 mr-2" />
<Wrench className="h-4 w-4 mr-2" />
Расходники
{selectedSupplier && (
<span className="text-white/60 text-sm font-normal ml-2">
<span className="text-white/60 text-xs font-normal ml-2 truncate">
- {selectedSupplier.name || selectedSupplier.fullName}
</span>
)}
@ -395,151 +459,220 @@ export function CreateConsumablesSupplyPage() {
</div>
{selectedSupplier && (
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-white/40 h-3 w-3" />
<Input
placeholder="Поиск расходников..."
value={productSearchQuery}
onChange={(e) => setProductSearchQuery(e.target.value)}
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-7 h-8 text-sm"
/>
</div>
)}
</div>
<div className="p-4 flex-1 overflow-y-auto">
<div className="p-3 flex-1 overflow-y-auto">
{!selectedSupplier ? (
<div className="text-center py-12">
<Wrench className="h-12 w-12 text-white/40 mx-auto mb-4" />
<p className="text-white/60">
<div className="text-center py-8">
<Wrench className="h-8 w-8 text-white/40 mx-auto mb-3" />
<p className="text-white/60 text-sm">
Выберите поставщика для просмотра расходников
</p>
</div>
) : productsLoading ? (
<div className="text-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent mx-auto mb-3"></div>
<p className="text-white/60">Загрузка расходников...</p>
<div className="text-center py-8">
<div className="animate-spin rounded-full h-6 w-6 border-2 border-white border-t-transparent mx-auto mb-2"></div>
<p className="text-white/60 text-sm">Загрузка...</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">
У данного поставщика нет доступных расходников
<div className="text-center py-8">
<Package className="h-8 w-8 text-white/40 mx-auto mb-3" />
<p className="text-white/60 text-sm">
Нет доступных расходников
</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 && product.images[0] ? (
<Image
src={product.images[0]}
alt={product.name}
width={200}
height={200}
className="w-full h-full object-cover"
/>
) : product.mainImage ? (
<Image
src={product.mainImage}
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 className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-3">
{supplierProducts.map(
(product: ConsumableProduct, index) => {
const selectedQuantity = getSelectedQuantity(
product.id
);
return (
<Card
key={product.id}
className={`relative bg-gradient-to-br from-white/10 via-white/5 to-white/10 backdrop-blur border border-white/20 p-3 rounded-xl overflow-hidden group hover:shadow-xl transition-all duration-300 ${
selectedQuantity > 0
? "ring-2 ring-green-400/50 bg-gradient-to-br from-green-500/20 via-green-400/10 to-green-500/20"
: "hover:from-white/20 hover:via-white/10 hover:to-white/20 hover:border-white/40"
}`}
style={{
animationDelay: `${index * 50}ms`,
minHeight: "200px",
width: "100%",
}}
>
<div className="space-y-2 h-full flex flex-col">
{/* Изображение товара */}
<div className="aspect-square bg-white/5 rounded-lg overflow-hidden relative flex-shrink-0">
{product.images &&
product.images.length > 0 &&
product.images[0] ? (
<Image
src={product.images[0]}
alt={product.name}
width={100}
height={100}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
) : product.mainImage ? (
<Image
src={product.mainImage}
alt={product.name}
width={100}
height={100}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<Wrench className="h-8 w-8 text-white/40" />
</div>
)}
{selectedQuantity > 0 && (
<div className="absolute top-2 right-2 bg-gradient-to-r from-green-400 to-green-500 rounded-full w-6 h-6 flex items-center justify-center shadow-lg animate-pulse">
<span className="text-white text-xs font-bold">
{selectedQuantity > 999
? "999+"
: selectedQuantity}
</span>
</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}
{/* Информация о товаре */}
<div className="space-y-1 flex-grow">
<h3 className="text-white font-medium text-sm leading-tight line-clamp-2 group-hover:text-purple-200 transition-colors duration-300">
{product.name}
</h3>
{product.category && (
<Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs px-2 py-1">
{product.category.name.slice(0, 10)}
</Badge>
)}
<div className="flex items-center justify-between">
<span className="text-green-400 font-semibold text-sm">
{formatCurrency(product.price)}
</span>
{product.stock && (
<span className="text-white/60 text-xs">
{product.stock}
</span>
)}
</span>
{product.stock && (
<span className="text-white/60 text-sm">
В наличии: {product.stock}
</span>
</div>
</div>
{/* Управление количеством */}
<div className="flex flex-col items-center space-y-2 mt-auto">
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
onClick={() =>
updateConsumableQuantity(
product.id,
Math.max(0, selectedQuantity - 1)
)
}
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/20 rounded-full transition-all duration-300"
disabled={selectedQuantity === 0}
>
<Minus className="h-3 w-3" />
</Button>
<Input
type="text"
inputMode="numeric"
pattern="[0-9]*"
value={
selectedQuantity === 0
? ""
: selectedQuantity.toString()
}
onChange={(e) => {
let inputValue = e.target.value;
// Удаляем все нецифровые символы
inputValue = inputValue.replace(
/[^0-9]/g,
""
);
// Удаляем ведущие нули
inputValue = inputValue.replace(
/^0+/,
""
);
// Если строка пустая после удаления нулей, устанавливаем 0
const numericValue =
inputValue === ""
? 0
: parseInt(inputValue);
// Ограничиваем значение максимумом 99999
const clampedValue = Math.min(
numericValue,
99999
);
updateConsumableQuantity(
product.id,
clampedValue
);
}}
onBlur={(e) => {
// При потере фокуса, если поле пустое, устанавливаем 0
if (e.target.value === "") {
updateConsumableQuantity(
product.id,
0
);
}
}}
className="w-16 h-7 text-center text-sm bg-white/10 border-white/20 text-white rounded px-1 focus:ring-2 focus:ring-purple-400/50 focus:border-purple-400/50"
placeholder="0"
/>
<Button
variant="ghost"
size="sm"
onClick={() =>
updateConsumableQuantity(
product.id,
Math.min(selectedQuantity + 1, 99999)
)
}
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/20 rounded-full transition-all duration-300"
>
<Plus className="h-3 w-3" />
</Button>
</div>
{selectedQuantity > 0 && (
<div className="text-center">
<span className="text-green-400 font-bold text-sm bg-green-500/10 px-3 py-1 rounded-full">
{formatCurrency(
product.price * selectedQuantity
)}
</span>
</div>
)}
</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>
);
})}
{/* Hover эффект */}
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/0 to-pink-500/0 group-hover:from-purple-500/5 group-hover:to-pink-500/5 transition-all duration-300 pointer-events-none rounded-xl"></div>
</Card>
);
}
)}
</div>
)}
</div>
@ -547,22 +680,43 @@ export function CreateConsumablesSupplyPage() {
</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="w-72 flex-shrink-0">
<Card className="bg-white/10 backdrop-blur border-white/20 p-3 sticky top-0">
<h3 className="text-white font-semibold mb-3 flex items-center text-sm">
<ShoppingCart className="h-4 w-4 mr-2" />
Корзина ({getTotalItems()} шт)
</h3>
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
{selectedConsumables.length === 0 ? (
<div className="text-center py-6">
<div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full p-4 w-fit mx-auto mb-3">
<ShoppingCart className="h-8 w-8 text-purple-300" />
</div>
<p className="text-white/60 text-sm font-medium mb-2">
Корзина пуста
</p>
<p className="text-white/40 text-xs mb-3">
Добавьте расходники для создания поставки
</p>
{selectedFulfillmentCenter && (
<div className="bg-white/5 rounded-lg p-2 mb-2">
<p className="text-white/60 text-xs">Доставка в:</p>
<p className="text-white text-xs font-medium">
{selectedFulfillmentCenter.name ||
selectedFulfillmentCenter.fullName}
</p>
</div>
)}
</div>
) : (
<div className="space-y-2 mb-3 max-h-48 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">
<p className="text-white text-xs font-medium truncate">
{consumable.name}
</p>
<p className="text-white/60 text-xs">
@ -571,7 +725,7 @@ export function CreateConsumablesSupplyPage() {
</p>
</div>
<div className="flex items-center space-x-2">
<span className="text-green-400 font-medium text-sm">
<span className="text-green-400 font-medium text-xs">
{formatCurrency(
consumable.price * consumable.selectedQuantity
)}
@ -582,7 +736,7 @@ export function CreateConsumablesSupplyPage() {
onClick={() =>
updateConsumableQuantity(consumable.id, 0)
}
className="h-6 w-6 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
className="h-5 w-5 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
>
×
</Button>
@ -590,40 +744,78 @@ export function CreateConsumablesSupplyPage() {
</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]}
<div className="border-t border-white/20 pt-3">
<div className="mb-3">
<label className="text-white/60 text-xs mb-1 block">
Фулфилмент-центр:
</label>
<div className="relative">
<select
value={selectedFulfillmentCenter?.id || ""}
onChange={(e) => {
const center = fulfillmentCenters.find(
(fc) => fc.id === e.target.value
);
setSelectedFulfillmentCenter(center || null);
}}
className="w-full bg-white/10 border border-white/20 text-white h-8 text-sm rounded px-2 focus:ring-2 focus:ring-purple-400/50 focus:border-purple-400/50"
required
/>
>
<option value="" className="bg-gray-800 text-white">
Выберите фулфилмент-центр
</option>
{fulfillmentCenters.map((center) => (
<option
key={center.id}
value={center.id}
className="bg-gray-800 text-white"
>
{center.name ||
center.fullName ||
"Фулфилмент-центр"}
</option>
))}
</select>
</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 className="mb-3">
<label className="text-white/60 text-xs mb-1 block">
Дата поставки:
</label>
<Input
type="date"
value={deliveryDate}
onChange={(e) => setDeliveryDate(e.target.value)}
className="bg-white/10 border-white/20 text-white h-8 text-sm"
min={new Date().toISOString().split("T")[0]}
required
/>
</div>
<div className="flex items-center justify-between mb-3">
<span className="text-white font-semibold text-sm">
Итого:
</span>
<span className="text-green-400 font-bold text-lg">
{formatCurrency(getTotalAmount())}
</span>
</div>
<Button
onClick={handleCreateSupply}
disabled={
isCreatingSupply ||
!deliveryDate ||
!selectedFulfillmentCenter ||
selectedConsumables.length === 0
}
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 h-8 text-sm"
>
{isCreatingSupply ? "Создание..." : "Создать поставку"}
</Button>
</div>
</Card>
</div>
</div>
</div>
</main>