Sfera/sfera-new
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Обновлен компонент CreateSupplyPage: улучшена структура кода и стили, добавлены новые функции для обработки товаров и поставок. Оптимизирован интерфейс с использованием новых компонентов и улучшена логика отображения данных. Исправлены ошибки и улучшена читаемость кода.

Browse Source
This commit is contained in:
Veronika Smirnova
2025-07-25 15:23:11 +03:00
parent 072d330202
commit 7d9b76a792
2 changed files with 438 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

516
src/components/supplies/direct-supply-creation.tsx
View File

@ -668,14 +668,14 @@ export function DirectSupplyCreation({
return (
<>
<style>{lineClampStyles}</style>
<div className="space-y-3 w-full">
<div className="flex flex-col h-full space-y-2 w-full min-h-0">
{/* НОВЫЙ БЛОК СОЗДАНИЯ ПОСТАВКИ */}
<Card className="bg-white/10 backdrop-blur-xl border border-white/20 p-3">
<Card className="bg-white/10 backdrop-blur-xl border border-white/20 p-2">
{/* Первая строка */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-2 items-end mb-0.5">
<div className="grid grid-cols-1 md:grid-cols-4 gap-1.5 items-end mb-0.5">
{/* 1. Модуль выбора даты */}
<div>
<Label className="text-white/80 text-xs mb-1 block flex items-center gap-1">
<Label className="text-white/80 text-xs mb-0.5 block flex items-center gap-1">
<CalendarIcon className="h-3 w-3" />
Дата
</Label>
@ -684,7 +684,7 @@ export function DirectSupplyCreation({
type="date"
value={deliveryDate}
onChange={(e) => setDeliveryDate(e.target.value)}
className="w-full h-8 rounded-lg border-0 bg-white/20 backdrop-blur px-2 py-1 text-white placeholder:text-white/50 focus:bg-white/30 focus:outline-none focus:ring-1 focus:ring-white/20 text-xs font-medium"
className="w-full h-7 rounded-lg border-0 bg-white/20 backdrop-blur px-2 py-1 text-white placeholder:text-white/50 focus:bg-white/30 focus:outline-none focus:ring-1 focus:ring-white/20 text-xs font-medium"
min={new Date().toISOString().split("T")[0]}
/>
</div>
@ -692,7 +692,7 @@ export function DirectSupplyCreation({
{/* 2. Модуль выбора фулфилмента */}
<div>
<Label className="text-white/80 text-xs mb-1 block flex items-center gap-1">
<Label className="text-white/80 text-xs mb-0.5 block flex items-center gap-1">
<Building className="h-3 w-3" />
Фулфилмент
</Label>
@ -700,7 +700,7 @@ export function DirectSupplyCreation({
value={selectedFulfillment}
onValueChange={setSelectedFulfillment}
>
<SelectTrigger className="w-full h-8 py-0 px-2 bg-white/20 border-0 text-white focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs">
<SelectTrigger className="w-full h-7 py-0 px-2 bg-white/20 border-0 text-white focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs">
<SelectValue placeholder="ФУЛФИЛМЕНТ ИВАНОВО" />
</SelectTrigger>
<SelectContent>
@ -715,7 +715,7 @@ export function DirectSupplyCreation({
{/* 3. Объём товаров */}
<div>
<Label className="text-white/80 text-xs mb-1 block">
<Label className="text-white/80 text-xs mb-0.5 block">
Объём товаров
</Label>
<Input
@ -725,13 +725,13 @@ export function DirectSupplyCreation({
setGoodsVolume(parseFloat(e.target.value) || 0)
}
placeholder="м³"
className="h-8 bg-white/20 border-0 text-white placeholder:text-white/50 focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs"
className="h-7 bg-white/20 border-0 text-white placeholder:text-white/50 focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs"
/>
</div>
{/* 4. Грузовые места */}
<div>
<Label className="text-white/80 text-xs mb-1 block">
<Label className="text-white/80 text-xs mb-0.5 block">
Грузовые места
</Label>
<Input
@ -739,16 +739,16 @@ export function DirectSupplyCreation({
value={cargoPlaces || ""}
onChange={(e) => setCargoPlaces(parseInt(e.target.value) || 0)}
placeholder="шт"
className="h-8 bg-white/20 border-0 text-white placeholder:text-white/50 focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs"
className="h-7 bg-white/20 border-0 text-white placeholder:text-white/50 focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs"
/>
</div>
</div>
{/* Вторая строка */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-2 items-end">
<div className="grid grid-cols-1 md:grid-cols-4 gap-1.5 items-end">
{/* 5. Цена товаров */}
<div>
<Label className="text-white/80 text-xs mb-1 block">
<Label className="text-white/80 text-xs mb-0.5 block">
Цена товаров
</Label>
<Input
@ -756,13 +756,13 @@ export function DirectSupplyCreation({
value={goodsPrice || ""}
onChange={(e) => setGoodsPrice(parseFloat(e.target.value) || 0)}
placeholder="₽"
className="h-8 bg-white/20 border-0 text-white placeholder:text-white/50 focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs"
className="h-7 bg-white/20 border-0 text-white placeholder:text-white/50 focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs"
/>
</div>
{/* 6. Цена услуг фулфилмента */}
<div>
<Label className="text-white/80 text-xs mb-1 block">
<Label className="text-white/80 text-xs mb-0.5 block">
Цена услуг фулфилмент
</Label>
<Input
@ -772,13 +772,13 @@ export function DirectSupplyCreation({
setFulfillmentServicesPrice(parseFloat(e.target.value) || 0)
}
placeholder="₽"
className="h-8 bg-white/20 border-0 text-white placeholder:text-white/50 focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs"
className="h-7 bg-white/20 border-0 text-white placeholder:text-white/50 focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs"
/>
</div>
{/* 7. Цена логистики */}
<div>
<Label className="text-white/80 text-xs mb-1 block">
<Label className="text-white/80 text-xs mb-0.5 block">
Логистика до фулфилмента
</Label>
<Input
@ -788,14 +788,16 @@ export function DirectSupplyCreation({
setLogisticsPrice(parseFloat(e.target.value) || 0)
}
placeholder="₽"
className="h-8 bg-white/20 border-0 text-white placeholder:text-white/50 focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs"
className="h-7 bg-white/20 border-0 text-white placeholder:text-white/50 focus:bg-white/30 focus:ring-1 focus:ring-white/20 text-xs"
/>
</div>
{/* 8. Итоговая сумма */}
<div>
<Label className="text-white/80 text-xs mb-1 block">Итого</Label>
<div className="h-8 bg-white/10 rounded-lg flex items-center justify-center">
<Label className="text-white/80 text-xs mb-0.5 block">
Итого
</Label>
<div className="h-7 bg-white/10 rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-sm">
{formatCurrency(getTotalSum()).replace(" ₽", " ₽")}
</span>
@ -804,143 +806,187 @@ export function DirectSupplyCreation({
</div>
</Card>
{/* Блок поиска товаров - оптимизированное расположение */}
<Card className="bg-white/10 backdrop-blur-xl border border-white/20 p-3">
<div className="mb-1">
<Label className="text-white/80 text-xs mb-2 block flex items-center gap-1">
<Search className="h-3 w-3" />
Поиск товаров Wildberries
</Label>
<div className="flex items-center space-x-2">
<Input
placeholder="Введите название товара, артикул или бренд..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="bg-white/20 border-0 text-white placeholder-white/60 h-8 text-xs flex-1 focus:bg-white/30 focus:ring-1 focus:ring-white/20"
onKeyPress={(e) => e.key === "Enter" && searchCards()}
/>
<Button
onClick={searchCards}
disabled={loading}
className="h-8 px-4 bg-white/20 hover:bg-white/30 border-0 text-white text-xs font-medium backdrop-blur"
>
{loading ? (
<div className="animate-spin rounded-full h-3 w-3 border-b-2 border-white"></div>
) : (
<>
<Search className="h-3 w-3 mr-1" />
Поиск
</>
)}
</Button>
</div>
</div>
{/* Элегантный блок поиска и товаров */}
<div className="relative">
{/* Главная карточка с градиентом */}
<div className="bg-gradient-to-br from-white/15 via-white/10 to-white/5 backdrop-blur-xl border border-white/20 rounded-2xl p-4 shadow-2xl">
{/* Компактный заголовок с поиском */}
<div className="flex items-center justify-between mb-2">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-gradient-to-r from-purple-500 to-blue-500 rounded-lg flex items-center justify-center shadow-lg">
<Search className="h-4 w-4 text-white" />
</div>
<div>
<h3 className="text-white font-semibold text-base">
Каталог товаров
</h3>
<p className="text-white/60 text-xs">
Найдено: {wbCards.length}
</p>
</div>
</div>
{/* Карточки товаров - увеличенный размер и единообразность */}
<div className="space-y-1">
<div className="flex items-center justify-between">
<span className="text-white/80 text-xs font-medium">
Найдено товаров: {wbCards.length}
</span>
{/* Поиск в заголовке */}
<div className="flex items-center space-x-3 flex-1 max-w-md ml-4">
<div className="relative flex-1">
<Input
placeholder="Поиск товаров..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-3 pr-16 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:bg-white/15 focus:border-white/40 text-sm h-8"
onKeyPress={(e) => e.key === "Enter" && searchCards()}
/>
<Button
onClick={searchCards}
disabled={loading}
className="absolute right-1 top-1 h-6 px-2 bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white border-0 rounded text-xs"
>
{loading ? (
<div className="animate-spin rounded-full h-3 w-3 border border-white/30 border-t-white"></div>
) : (
"Найти"
)}
</Button>
</div>
</div>
{/* Статистика в поставке */}
{supplyItems.length > 0 && (
<Badge
variant="secondary"
className="bg-purple-500/20 text-purple-200 text-xs"
>
В поставке: {supplyItems.length}
</Badge>
<div className="bg-gradient-to-r from-purple-500/20 to-blue-500/20 backdrop-blur border border-purple-400/30 rounded-lg px-3 py-1 ml-3">
<div className="flex items-center space-x-2">
<div className="w-1.5 h-1.5 bg-purple-400 rounded-full animate-pulse"></div>
<span className="text-purple-200 font-medium text-xs">
В поставке: {supplyItems.length}
</span>
</div>
</div>
)}
</div>
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-2">
{loading
? [...Array(12)].map((_, i) => (
{/* Сетка товаров */}
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3">
{loading ? (
// Красивые skeleton-карточки
[...Array(16)].map((_, i) => (
<div key={i} className="group">
<div className="aspect-[3/4] bg-gradient-to-br from-white/10 to-white/5 rounded-xl animate-pulse">
<div className="w-full h-full bg-white/5 rounded-xl"></div>
</div>
<div className="mt-1 px-1">
<div className="h-3 bg-white/10 rounded animate-pulse"></div>
</div>
</div>
))
) : wbCards.length > 0 ? (
// Красивые карточки товаров
wbCards.map((card) => {
const isInSupply = supplyItems.some(
(item) => item.card.nmID === card.nmID
);
return (
<div
key={i}
className="aspect-[3/4] bg-white/5 rounded-lg animate-pulse"
></div>
))
: wbCards.map((card) => {
const isInSupply = supplyItems.some(
(item) => item.card.nmID === card.nmID
);
return (
key={card.nmID}
className={`group cursor-pointer transition-all duration-300 hover:scale-105 ${
isInSupply ? "scale-105" : ""
}`}
onClick={() => addToSupply(card)}
>
{/* Карточка товара */}
<div
key={card.nmID}
className={`group relative cursor-pointer transition-all duration-200 hover:scale-105 hover:z-10 ${
className={`relative aspect-[3/4] rounded-xl overflow-hidden shadow-lg transition-all duration-300 ${
isInSupply
? "ring-2 ring-purple-400 ring-offset-1 ring-offset-transparent"
: ""
? "ring-2 ring-purple-400 shadow-purple-400/25 bg-gradient-to-br from-purple-500/20 to-blue-500/20"
: "bg-white/10 hover:bg-white/15 hover:shadow-xl"
}`}
onClick={() => addToSupply(card)}
>
<div className="aspect-[3/4] bg-white/10 rounded-lg overflow-hidden backdrop-blur-sm border border-white/20 hover:border-white/40 transition-all">
<img
src={
WildberriesService.getCardImage(
card,
"c516x688"
) || "/api/placeholder/120/160"
}
alt={card.title}
className="w-full h-full object-cover transition-transform group-hover:scale-110"
loading="lazy"
/>
<img
src={
WildberriesService.getCardImage(card, "c516x688") ||
"/api/placeholder/200/267"
}
alt={card.title}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
loading="lazy"
/>
{/* Оверлей с информацией */}
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
<div className="absolute bottom-2 left-2 right-2">
<div className="text-white text-xs font-medium line-clamp-2 mb-1">
{card.title}
</div>
<div className="text-white/70 text-[10px]">
Арт: {card.vendorCode}
</div>
{card.sizes && card.sizes[0] && (
<div className="text-purple-300 text-[10px] font-medium">
от{" "}
{card.sizes[0].discountedPrice ||
card.sizes[0].price}{" "}
₽
</div>
)}
</div>
</div>
{/* Градиентный оверлей */}
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
{/* Индикатор добавления в поставку */}
{isInSupply && (
<div className="absolute top-2 right-2 bg-purple-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold shadow-lg">
✓
</div>
{/* Информация при наведении */}
<div className="absolute bottom-0 left-0 right-0 p-3 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
<h4 className="text-white font-medium text-sm line-clamp-2 mb-1">
{card.title}
</h4>
<p className="text-white/80 text-xs mb-1">
Арт: {card.vendorCode}
</p>
{card.sizes && card.sizes[0] && (
<p className="text-purple-300 font-semibold text-sm">
от{" "}
{card.sizes[0].discountedPrice ||
card.sizes[0].price}{" "}
₽
</p>
)}
{/* Индикатор при наведении */}
<div className="absolute top-2 left-2 bg-white/20 backdrop-blur text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<Plus className="h-3 w-3" />
</div>
</div>
</div>
);
})}
</div>
{!loading && wbCards.length === 0 && (
<div className="text-center py-4">
<Package className="h-8 w-8 text-white/20 mx-auto mb-2" />
<p className="text-white/60 text-xs">
{searchTerm
? "Товары не найдены"
: "Введите запрос для поиска товаров"}
</p>
{searchTerm && (
<p className="text-white/40 text-[10px] mt-1">
Попробуйте изменить условия поиска
{/* Индикаторы */}
{isInSupply ? (
<div className="absolute top-3 right-3 w-8 h-8 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg">
<svg
className="w-4 h-4 text-white"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
</div>
) : (
<div className="absolute top-3 right-3 w-8 h-8 bg-white/20 backdrop-blur rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<Plus className="w-4 h-4 text-white" />
</div>
)}
{/* Эффект при клике */}
<div className="absolute inset-0 bg-white/20 opacity-0 group-active:opacity-100 transition-opacity duration-150" />
</div>
{/* Название под карточкой */}
<div className="mt-1 px-1">
<h4 className="text-white/90 font-medium text-xs line-clamp-2 leading-tight">
{card.title}
</h4>
</div>
</div>
);
})
) : (
// Пустое состояние
<div className="col-span-full flex flex-col items-center justify-center py-8">
<div className="w-16 h-16 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-2xl flex items-center justify-center mb-3">
<Package className="w-8 h-8 text-white/40" />
</div>
<h3 className="text-white/80 font-medium text-base mb-1">
{searchTerm ? "Товары не найдены" : "Начните поиск товаров"}
</h3>
<p className="text-white/50 text-sm text-center max-w-md">
{searchTerm
? "Попробуйте изменить поисковый запрос"
: "Введите название товара в поле поиска"}
</p>
)}
</div>
)}
</div>
)}
</div>
</div>
</Card>
{/* Декоративные элементы */}
<div className="absolute -top-1 -left-1 w-4 h-4 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full opacity-60 animate-pulse" />
<div className="absolute -bottom-1 -right-1 w-3 h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-40 animate-pulse delay-700" />
</div>
{/* Услуги и расходники в одной строке */}
{selectedFulfillmentOrg && (
@ -1027,44 +1073,37 @@ export function DirectSupplyCreation({
</Card>
)}
{/* Модуль товаров в поставке - новый дизайн */}
<Card className="bg-white/10 backdrop-blur border-white/20 p-3">
<div className="flex items-center justify-between mb-3">
{/* Модуль товаров в поставке - растягивается до низа */}
<Card className="bg-white/10 backdrop-blur border-white/20 p-2 flex-1 flex flex-col min-h-0">
<div className="flex items-center justify-between mb-2 flex-shrink-0">
<span className="text-white font-medium text-sm">
Товары в поставке
</span>
<Button
onClick={() => setShowSupplierModal(true)}
variant="outline"
size="sm"
className="bg-white/5 border-white/20 text-white hover:bg-white/10 h-7 px-3 text-xs"
>
<Plus className="h-3 w-3 mr-1" />
Поставщик
</Button>
</div>
{supplyItems.length === 0 ? (
<div className="text-center py-6">
<Package className="h-8 w-8 text-white/20 mx-auto mb-2" />
<p className="text-white/60 text-xs">
Добавьте товары из карточек выше
</p>
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<Package className="h-8 w-8 text-white/20 mx-auto mb-2" />
<p className="text-white/60 text-xs">
Добавьте товары из карточек выше
</p>
</div>
</div>
) : (
<div className="space-y-4">
<div className="flex-1 overflow-y-auto space-y-1">
{supplyItems.map((item) => (
<Card
key={item.card.nmID}
className="bg-white/5 border-white/10 p-3"
className="bg-white/5 border-white/10 p-1.5"
>
{/* Заголовок товара с кнопкой удаления */}
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
<div className="text-white font-medium text-sm line-clamp-1">
{/* Компактный заголовок товара */}
<div className="flex items-center justify-between mb-1">
<div className="flex items-center space-x-2 min-w-0">
<div className="text-white font-medium text-xs line-clamp-1 truncate">
{item.card.title}
</div>
<div className="text-white/60 text-xs">
<div className="text-white/60 text-[10px] flex-shrink-0">
Арт: {item.card.vendorCode}
</div>
</div>
@ -1072,47 +1111,44 @@ export function DirectSupplyCreation({
onClick={() => removeFromSupply(item.card.nmID)}
size="sm"
variant="ghost"
className="h-6 w-6 p-0 text-white/60 hover:text-red-400"
className="h-5 w-5 p-0 text-white/60 hover:text-red-400 flex-shrink-0"
>
<X className="h-4 w-4" />
<X className="h-3 w-3" />
</Button>
</div>
{/* Названия блоков */}
<div
className="grid grid-cols-8 gap-2"
style={{ marginBottom: "4px" }}
>
<div className="text-white/80 text-xs font-medium text-center">
{/* Компактные названия блоков */}
<div className="grid grid-cols-8 gap-1 mb-1">
<div className="text-white/80 text-[9px] font-medium text-center">
Товар
</div>
<div className="text-white/80 text-xs font-medium text-center">
<div className="text-white/80 text-[9px] font-medium text-center">
Параметры
</div>
<div className="text-white/80 text-xs font-medium text-center">
<div className="text-white/80 text-[9px] font-medium text-center">
Заказать
</div>
<div className="text-white/80 text-xs font-medium text-center">
<div className="text-white/80 text-[9px] font-medium text-center">
Цена
</div>
<div className="text-white/80 text-xs font-medium text-center">
Услуги фулфилмента
<div className="text-white/80 text-[9px] font-medium text-center">
Услуги фф
</div>
<div className="text-white/80 text-xs font-medium text-center">
<div className="text-white/80 text-[9px] font-medium text-center">
Поставщик
</div>
<div className="text-white/80 text-xs font-medium text-center">
Расходники фулфилмента
<div className="text-white/80 text-[9px] font-medium text-center">
Расходники фф
</div>
<div className="text-white/80 text-xs font-medium text-center">
Расходники селлера
<div className="text-white/80 text-[9px] font-medium text-center">
Расходники
</div>
</div>
{/* Оптимизированная сетка для 13" - все блоки в одну строку */}
<div className="grid grid-cols-8 gap-2">
{/* Компактная сетка блоков */}
<div className="grid grid-cols-8 gap-1">
{/* Блок 1: Картинка товара */}
<div className="bg-white/10 rounded-lg overflow-hidden relative">
<div className="bg-white/10 rounded-lg overflow-hidden relative h-20">
<img
src={
WildberriesService.getCardImage(
@ -1126,16 +1162,16 @@ export function DirectSupplyCreation({
</div>
{/* Блок 2: Параметры */}
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center">
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center h-20">
<div className="space-y-1">
<div className="text-white/70 text-[9px] text-center">
<div className="text-white/70 text-xs text-center">
{item.card.object}
</div>
<div className="text-white/70 text-[9px] text-center">
<div className="text-white/70 text-xs text-center">
{item.card.countryProduction}
</div>
{item.card.sizes && item.card.sizes[0] && (
<div className="text-white/70 text-[9px] text-center">
<div className="text-white/70 text-xs text-center">
{item.card.sizes[0].techSize}
</div>
)}
@ -1143,8 +1179,8 @@ export function DirectSupplyCreation({
</div>
{/* Блок 3: Заказать */}
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center">
<div className="text-white/60 text-[10px] mb-1 text-center">
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center h-20">
<div className="text-white/60 text-xs mb-2 text-center">
Количество
</div>
<Input
@ -1157,14 +1193,14 @@ export function DirectSupplyCreation({
parseInt(e.target.value) || 0
)
}
className="bg-purple-500/20 border-purple-400/30 text-white text-center h-7 text-xs font-bold"
className="bg-purple-500/20 border-purple-400/30 text-white text-center h-8 text-sm font-bold"
min="1"
/>
</div>
{/* Блок 4: Цена */}
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center">
<div className="text-white/60 text-[10px] mb-1 text-center">
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center h-20">
<div className="text-white/60 text-xs mb-1 text-center">
За единицу
</div>
<Input
@ -1180,22 +1216,22 @@ export function DirectSupplyCreation({
className="bg-white/20 border-white/20 text-white text-center h-7 text-xs"
placeholder="₽"
/>
<div className="text-white/80 text-[9px] font-medium text-center mt-1">
<div className="text-white/80 text-xs font-medium text-center mt-1">
{formatCurrency(item.totalPrice).replace(" ₽", "₽")}
</div>
</div>
{/* Блок 5: Услуги фулфилмента */}
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center">
<div className="space-y-1 max-h-16 overflow-y-auto">
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center h-20">
<div className="space-y-2 max-h-16 overflow-y-auto">
{selectedFulfillmentOrg &&
organizationServices[selectedFulfillmentOrg] ? (
organizationServices[selectedFulfillmentOrg]
.slice(0, 2)
.slice(0, 4)
.map((service) => (
<label
key={service.id}
className="flex items-center space-x-1 cursor-pointer"
className="flex items-center space-x-2 cursor-pointer"
>
<input
type="checkbox"
@ -1214,15 +1250,15 @@ export function DirectSupplyCreation({
);
}
}}
className="w-2 h-2"
className="w-3 h-3"
/>
<span className="text-white text-[9px]">
<span className="text-white text-xs">
{service.name.substring(0, 8)}...
</span>
</label>
))
) : (
<span className="text-white/60 text-[9px] text-center">
<span className="text-white/60 text-xs text-center">
Выберите фулфилмент
</span>
)}
@ -1230,14 +1266,14 @@ export function DirectSupplyCreation({
</div>
{/* Блок 6: Поставщик */}
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center">
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center space-y-2 h-20">
<Select
value={item.supplierId}
onValueChange={(value) =>
updateSupplyItem(item.card.nmID, "supplierId", value)
}
>
<SelectTrigger className="bg-white/20 border-white/20 text-white h-7 text-[10px]">
<SelectTrigger className="bg-white/20 border-white/20 text-white h-7 text-xs">
<SelectValue placeholder="Выбрать" />
</SelectTrigger>
<SelectContent>
@ -1248,19 +1284,49 @@ export function DirectSupplyCreation({
))}
</SelectContent>
</Select>
{/* Информация о выбранном поставщике */}
{item.supplierId &&
suppliers.find((s) => s.id === item.supplierId) && (
<div className="text-xs text-white/60 space-y-1">
<div className="truncate">
{
suppliers.find((s) => s.id === item.supplierId)
?.contactName
}
</div>
<div className="truncate">
{
suppliers.find((s) => s.id === item.supplierId)
?.phone
}
</div>
</div>
)}
{/* Кнопка добавления поставщика */}
<Button
onClick={() => setShowSupplierModal(true)}
variant="outline"
size="sm"
className="bg-white/5 border-white/20 text-white hover:bg-white/10 h-6 px-2 text-xs w-full"
>
<Plus className="h-3 w-3 mr-1" />
Добавить
</Button>
</div>
{/* Блок 7: Расходники фулфилмента */}
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center">
<div className="space-y-1 max-h-16 overflow-y-auto">
{/* Блок 7: Расходники фф */}
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center h-20">
<div className="space-y-2 max-h-16 overflow-y-auto">
{selectedFulfillmentOrg &&
organizationSupplies[selectedFulfillmentOrg] ? (
organizationSupplies[selectedFulfillmentOrg]
.slice(0, 2)
.slice(0, 4)
.map((supply) => (
<label
key={supply.id}
className="flex items-center space-x-1 cursor-pointer"
className="flex items-center space-x-2 cursor-pointer"
>
<input
type="checkbox"
@ -1279,15 +1345,15 @@ export function DirectSupplyCreation({
);
}
}}
className="w-2 h-2"
className="w-3 h-3"
/>
<span className="text-white text-[9px]">
<span className="text-white text-xs">
{supply.name.substring(0, 6)}...
</span>
</label>
))
) : (
<span className="text-white/60 text-[9px] text-center">
<span className="text-white/60 text-xs text-center">
Выберите фулфилмент
</span>
)}
@ -1295,23 +1361,19 @@ export function DirectSupplyCreation({
</div>
{/* Блок 8: Расходники селлера */}
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center">
<div className="space-y-1">
<label className="flex items-center space-x-1 cursor-pointer">
<input type="checkbox" className="w-2 h-2" />
<span className="text-white text-[9px]">
Упаковка
</span>
<div className="bg-white/10 rounded-lg p-2 flex flex-col justify-center h-20">
<div className="space-y-2">
<label className="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" className="w-3 h-3" />
<span className="text-white text-xs">Упаковка</span>
</label>
<label className="flex items-center space-x-1 cursor-pointer">
<input type="checkbox" className="w-2 h-2" />
<span className="text-white text-[9px]">
Этикетки
</span>
<label className="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" className="w-3 h-3" />
<span className="text-white text-xs">Этикетки</span>
</label>
<label className="flex items-center space-x-1 cursor-pointer">
<input type="checkbox" className="w-2 h-2" />
<span className="text-white text-[9px]">Пакеты</span>
<label className="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" className="w-3 h-3" />
<span className="text-white text-xs">Пакеты</span>
</label>
</div>
</div>