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

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

Browse Source
This commit is contained in:
Veronika Smirnova
2025-07-26 21:07:35 +03:00
parent 25fead48e9
commit f198994400
15 changed files with 989 additions and 852 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/fulfillment-supplies/fulfillment-supplies-dashboard.tsx
View File

@ -19,7 +19,7 @@ export function FulfillmentSuppliesDashboard() {
<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()} px-2 xl:px-4 py-2 xl:py-3 overflow-hidden transition-all duration-300`}
>
<div className="h-full w-full flex flex-col">
{/* Основной контент с табами */}
@ -29,26 +29,32 @@ export function FulfillmentSuppliesDashboard() {
onValueChange={setActiveTab}
className="h-full flex flex-col"
>
<TabsList className="grid w-full grid-cols-2 bg-white/5 backdrop-blur border-white/10 flex-shrink-0 h-10">
<TabsList className="grid w-full grid-cols-2 bg-white/5 backdrop-blur border-white/10 flex-shrink-0 h-8 xl:h-10">
<TabsTrigger
value="fulfillment"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-sm"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs xl:text-sm"
>
<Building2 className="h-3 w-3" />
Поставки на фулфилмент
<span className="hidden sm:inline">
Поставки на фулфилмент
</span>
<span className="sm:hidden">Фулфилмент</span>
</TabsTrigger>
<TabsTrigger
value="marketplace"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-sm"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs xl:text-sm"
>
<ShoppingCart className="h-3 w-3" />
Поставки на маркетплейсы
<span className="hidden sm:inline">
Поставки на маркетплейсы
</span>
<span className="sm:hidden">Маркетплейсы</span>
</TabsTrigger>
</TabsList>
<TabsContent
value="fulfillment"
className="flex-1 overflow-hidden mt-3"
className="flex-1 overflow-hidden mt-2 xl:mt-3"
>
<Card className="glass-card h-full overflow-hidden p-0">
<FulfillmentSuppliesTab />
@ -57,7 +63,7 @@ export function FulfillmentSuppliesDashboard() {
<TabsContent
value="marketplace"
className="flex-1 overflow-hidden mt-3"
className="flex-1 overflow-hidden mt-2 xl:mt-3"
>
<Card className="glass-card h-full overflow-hidden p-0">
<MarketplaceSuppliesTab />

546
src/components/fulfillment-supplies/fulfillment-supplies/fulfillment-goods-tab.tsx
View File

@ -421,6 +421,11 @@ export function FulfillmentGoodsTab() {
);
const toggleSellerExpansion = (sellerId: string) => {
if (!sellerId) {
console.error("SellerId is undefined or null");
return;
}
const newExpanded = new Set(expandedSellers);
if (newExpanded.has(sellerId)) {
newExpanded.delete(sellerId);
@ -431,6 +436,11 @@ export function FulfillmentGoodsTab() {
};
const toggleSupplyExpansion = (supplyId: string) => {
if (!supplyId) {
console.error("SupplyId is undefined or null");
return;
}
const newExpanded = new Set(expandedSupplies);
if (newExpanded.has(supplyId)) {
newExpanded.delete(supplyId);
@ -441,6 +451,11 @@ export function FulfillmentGoodsTab() {
};
const toggleRouteExpansion = (routeId: string) => {
if (!routeId) {
console.error("RouteId is undefined or null");
return;
}
const newExpanded = new Set(expandedRoutes);
if (newExpanded.has(routeId)) {
newExpanded.delete(routeId);
@ -451,6 +466,11 @@ export function FulfillmentGoodsTab() {
};
const toggleSupplierExpansion = (supplierId: string) => {
if (!supplierId) {
console.error("SupplierId is undefined or null");
return;
}
const newExpanded = new Set(expandedSuppliers);
if (newExpanded.has(supplierId)) {
newExpanded.delete(supplierId);
@ -634,34 +654,37 @@ export function FulfillmentGoodsTab() {
};
return (
<div className="h-full flex flex-col p-4">
<div className="h-full flex flex-col p-2 xl:p-4">
<Tabs
value={activeTab}
onValueChange={setActiveTab}
className="h-full flex flex-col"
>
{/* Вкладки товаров */}
<TabsList className="grid w-full grid-cols-3 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-10 mb-4">
<TabsList className="grid w-full grid-cols-3 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-8 xl:h-10 mb-2 xl:mb-4">
<TabsTrigger
value="new"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-sm"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 xl:gap-2 text-xs xl:text-sm"
>
<Clock className="h-4 w-4" />
Новые
<Clock className="h-3 w-3 xl:h-4 xl:w-4" />
<span className="hidden sm:inline">Новые</span>
<span className="sm:hidden">Н</span>
</TabsTrigger>
<TabsTrigger
value="receiving"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-sm"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 xl:gap-2 text-xs xl:text-sm"
>
<FileText className="h-4 w-4" />
Приёмка
<FileText className="h-3 w-3 xl:h-4 xl:w-4" />
<span className="hidden sm:inline">Приёмка</span>
<span className="sm:hidden">П</span>
</TabsTrigger>
<TabsTrigger
value="received"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-sm"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 xl:gap-2 text-xs xl:text-sm"
>
<CheckCircle className="h-4 w-4" />
Принято
<CheckCircle className="h-3 w-3 xl:h-4 xl:w-4" />
<span className="hidden sm:inline">Принято</span>
<span className="sm:hidden">Пр</span>
</TabsTrigger>
</TabsList>
@ -705,60 +728,66 @@ export function FulfillmentGoodsTab() {
};
return (
<div className="h-full flex flex-col space-y-4">
<div className="h-full flex flex-col space-y-2 xl:space-y-4">
{/* Статистика с кнопкой */}
<div className="flex items-center justify-between gap-4">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 flex-1">
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-blue-500/20 rounded">
<Package className="h-3 w-3 text-blue-400" />
<div className="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-3 xl:gap-4">
<div className="grid grid-cols-2 xl:grid-cols-4 gap-2 xl:gap-3 flex-1">
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-blue-500/20 rounded">
<Package className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-blue-400" />
</div>
<div>
<p className="text-white/60 text-xs">Поставок</p>
<p className="text-lg font-bold text-white">
<p className="text-white/60 text-[10px] xl:text-xs">
Поставок
</p>
<p className="text-sm xl:text-lg font-bold text-white">
{tabFilteredSupplies.length}
</p>
</div>
</div>
</Card>
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-green-500/20 rounded">
<TrendingUp className="h-3 w-3 text-green-400" />
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-green-500/20 rounded">
<TrendingUp className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-green-400" />
</div>
<div>
<p className="text-white/60 text-xs">Стоимость</p>
<p className="text-lg font-bold text-white">
<div className="min-w-0 flex-1">
<p className="text-white/60 text-[10px] xl:text-xs">
Стоимость
</p>
<p className="text-sm xl:text-lg font-bold text-white truncate">
{formatCurrency(getTabTotalValue())}
</p>
</div>
</div>
</Card>
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-purple-500/20 rounded">
<Package2 className="h-3 w-3 text-purple-400" />
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-purple-500/20 rounded">
<Package2 className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-purple-400" />
</div>
<div>
<p className="text-white/60 text-xs">Товаров</p>
<p className="text-lg font-bold text-white">
<p className="text-white/60 text-[10px] xl:text-xs">
Товаров
</p>
<p className="text-sm xl:text-lg font-bold text-white">
{getTabTotalQuantity()} ед.
</p>
</div>
</div>
</Card>
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-orange-500/20 rounded">
<Boxes className="h-3 w-3 text-orange-400" />
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-orange-500/20 rounded">
<Boxes className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-orange-400" />
</div>
<div>
<p className="text-white/60 text-xs">Объём</p>
<p className="text-lg font-bold text-white">
<p className="text-white/60 text-[10px] xl:text-xs">Объём</p>
<p className="text-sm xl:text-lg font-bold text-white">
{getTabTotalVolume().toFixed(1)} м³
</p>
</div>
@ -768,29 +797,30 @@ export function FulfillmentGoodsTab() {
<Button
size="sm"
className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white text-sm px-6 h-[60px] whitespace-nowrap"
className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white text-xs xl:text-sm px-3 xl:px-6 h-[50px] xl:h-[60px] whitespace-nowrap w-full xl:w-auto"
>
<Plus className="h-4 w-4 mr-2" />
Создать поставку
<Plus className="h-3 w-3 xl:h-4 xl:w-4 mr-1 xl:mr-2" />
<span className="hidden sm:inline">Создать поставку</span>
<span className="sm:hidden">Создать</span>
</Button>
</div>
{/* Фильтры */}
<div className="flex items-center gap-3">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 xl:gap-3">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
<Search className="absolute left-2 xl:left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 xl:h-4 xl:w-4 text-white/40" />
<Input
placeholder="Поиск по номеру, магазину, ИНН..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="glass-input pl-10 text-white placeholder:text-white/40"
className="glass-input pl-8 xl:pl-10 text-white placeholder:text-white/40 text-xs xl:text-sm h-8 xl:h-auto"
/>
</div>
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className="glass-input text-white text-sm px-3 py-2 rounded-lg bg-white/5 border border-white/10"
className="glass-input text-white text-xs xl:text-sm px-2 xl:px-3 py-1.5 xl:py-2 rounded-lg bg-white/5 border border-white/10 h-8 xl:h-auto"
>
<option value="all">Все статусы</option>
<option value="planned">Запланировано</option>
@ -802,7 +832,7 @@ export function FulfillmentGoodsTab() {
{/* Список поставок */}
<div className="flex-1 overflow-hidden">
<div className="h-full overflow-y-auto space-y-3">
<div className="h-full overflow-y-auto space-y-2 xl:space-y-3">
{tabFilteredSupplies.map((supply, index) => {
const isSellerExpanded = expandedSellers.has(supply.seller.id);
const isSupplyExpanded = expandedSupplies.has(supply.id);
@ -810,32 +840,44 @@ export function FulfillmentGoodsTab() {
return (
<Card
key={supply.id}
className="glass-card p-4 hover:bg-white/10 transition-colors"
className="glass-card p-2 xl:p-4 hover:bg-white/10 transition-colors"
>
<div className="space-y-3">
<div className="space-y-2 xl:space-y-3">
{/* Компактный блок с названием магазина */}
<div
className="flex items-center justify-between bg-white/5 rounded-lg p-2 cursor-pointer hover:bg-white/10 transition-colors"
onClick={() => toggleSellerExpansion(supply.seller.id)}
className="flex flex-col xl:flex-row xl:items-center xl:justify-between bg-white/5 rounded-lg p-1.5 xl:p-2 cursor-pointer hover:bg-white/10 transition-colors gap-2 xl:gap-0"
onClick={() => {
if (supply?.seller?.id) {
toggleSellerExpansion(supply.seller.id);
} else {
console.error(
"Supply seller or seller.id is undefined",
supply
);
}
}}
>
<div className="flex items-center gap-3">
<div className="p-1.5 bg-green-500/20 rounded">
<Store className="h-3 w-3 text-green-400" />
<div className="flex items-center gap-2 xl:gap-3">
<div className="p-1 xl:p-1.5 bg-green-500/20 rounded">
<Store className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-green-400" />
</div>
<div className="flex items-center gap-2">
<span className="text-white font-medium text-sm">
<div className="flex flex-col xl:flex-row xl:items-center gap-1 xl:gap-2 min-w-0 flex-1">
<span className="text-white font-medium text-xs xl:text-sm truncate">
{supply.seller.storeName}
</span>
<span className="text-white/60 text-xs"> • </span>
<span className="text-white/80 text-xs">
{supply.seller.managerName}
</span>
<span className="text-white/60 text-xs"> • </span>
<span className="text-white/80 text-xs">
{supply.seller.phone}
</span>
<span className="text-white/60 text-xs"> • </span>
<div className="flex items-center gap-1">
<div className="flex items-center gap-1 xl:gap-2 text-[10px] xl:text-xs">
<span className="text-white/80 truncate">
{supply.seller.managerName}
</span>
<span className="text-white/60 hidden xl:inline">
{" "}
•{" "}
</span>
<span className="text-white/80 truncate">
{supply.seller.phone}
</span>
</div>
<div className="flex items-center gap-1 xl:hidden">
<a
href={`https://t.me/${supply.seller.phone.replace(
/[^\d]/g,
@ -920,7 +962,16 @@ export function FulfillmentGoodsTab() {
{/* Единый блок со всеми параметрами в одной строке */}
<div
className="bg-white/5 rounded-lg p-4 cursor-pointer hover:bg-white/10 transition-colors"
onClick={() => toggleSupplyExpansion(supply.id)}
onClick={() => {
if (supply?.id) {
toggleSupplyExpansion(supply.id);
} else {
console.error(
"Supply or supply.id is undefined",
supply
);
}
}}
>
<div className="grid grid-cols-2 lg:grid-cols-9 gap-4 items-center">
{/* Порядковый номер */}
@ -1079,9 +1130,16 @@ export function FulfillmentGoodsTab() {
>
<div
className="grid grid-cols-1 lg:grid-cols-8 gap-3 items-center cursor-pointer hover:bg-white/5 transition-colors rounded-lg p-1"
onClick={() =>
toggleRouteExpansion(route.id)
}
onClick={() => {
if (route && route.id) {
toggleRouteExpansion(route.id);
} else {
console.error(
"Route or route.id is undefined",
route
);
}
}}
>
{/* Название маршрута */}
<div className="lg:col-span-2">
@ -1089,7 +1147,7 @@ export function FulfillmentGoodsTab() {
Маршрут
</p>
<p className="text-white font-medium text-sm">
{route.routeName}
{route?.routeName || "Без названия"}
</p>
</div>
@ -1099,7 +1157,7 @@ export function FulfillmentGoodsTab() {
Откуда
</p>
<p className="text-white text-xs">
{route.fromAddress}
{route?.fromAddress || "Не указано"}
</p>
</div>
@ -1109,7 +1167,7 @@ export function FulfillmentGoodsTab() {
Куда
</p>
<p className="text-white text-xs">
{route.toAddress}
{route?.toAddress || "Не указано"}
</p>
</div>
@ -1119,7 +1177,7 @@ export function FulfillmentGoodsTab() {
Расстояние
</p>
<p className="text-white font-semibold text-sm">
{route.distance} км
{route?.distance || 0} км
</p>
</div>
@ -1129,7 +1187,7 @@ export function FulfillmentGoodsTab() {
Время
</p>
<p className="text-white font-semibold text-sm">
{route.estimatedTime}
{route?.estimatedTime || "Не указано"}
</p>
</div>
@ -1157,192 +1215,220 @@ export function FulfillmentGoodsTab() {
{/* Третий уровень - Поставщики/Оптовики */}
{isRouteExpanded &&
route.suppliers &&
route?.suppliers &&
Array.isArray(route.suppliers) &&
route.suppliers.length > 0 && (
<div className="mt-4 pt-4 border-t border-white/10">
<div className="mb-3">
<h5 className="text-white font-medium text-sm flex items-center gap-2">
<Building2 className="h-4 w-4 text-purple-400" />
Поставщики/Оптовики (
{route.suppliers.length})
{route?.suppliers?.length || 0})
</h5>
</div>
<div className="space-y-2">
{route.suppliers.map((supplier) => {
const isSupplierExpanded =
expandedSuppliers.has(
supplier.id
);
return (
<div
key={supplier.id}
className="bg-white/5 rounded-lg p-3 border border-white/5"
>
{(route?.suppliers || []).map(
(supplier) => {
const isSupplierExpanded =
expandedSuppliers.has(
supplier.id
);
return (
<div
className="grid grid-cols-1 lg:grid-cols-7 gap-3 items-center cursor-pointer hover:bg-white/5 transition-colors rounded-lg p-1"
onClick={() =>
toggleSupplierExpansion(
supplier.id
)
}
key={supplier.id}
className="bg-white/5 rounded-lg p-3 border border-white/5"
>
{/* Название поставщика */}
<div className="lg:col-span-2">
<p className="text-white/60 text-xs mb-1">
Поставщик
</p>
<p className="text-white font-medium text-sm">
{supplier.name}
</p>
</div>
<div
className="grid grid-cols-1 lg:grid-cols-7 gap-3 items-center cursor-pointer hover:bg-white/5 transition-colors rounded-lg p-1"
onClick={() => {
if (
supplier &&
supplier.id
) {
toggleSupplierExpansion(
supplier.id
);
} else {
console.error(
"Supplier or supplier.id is undefined",
supplier
);
}
}}
>
{/* Название поставщика */}
<div className="lg:col-span-2">
<p className="text-white/60 text-xs mb-1">
Поставщик
</p>
<p className="text-white font-medium text-sm">
{supplier?.name ||
"Без названия"}
</p>
</div>
{/* ИНН */}
<div>
<p className="text-white/60 text-xs mb-1">
ИНН
</p>
<p className="text-white text-xs font-mono">
{supplier.inn}
</p>
</div>
{/* ИНН */}
<div>
<p className="text-white/60 text-xs mb-1">
ИНН
</p>
<p className="text-white text-xs font-mono">
{supplier?.inn ||
"Не указан"}
</p>
</div>
{/* Тип */}
<div className="text-center">
<p className="text-white/60 text-xs mb-1">
Тип
</p>
<Badge
variant="outline"
className={`text-xs ${
supplier.type ===
{/* Тип */}
<div className="text-center">
<p className="text-white/60 text-xs mb-1">
Тип
</p>
<Badge
variant="outline"
className={`text-xs ${
supplier?.type ===
"WHOLESALE"
? "text-blue-300 border-blue-400/30 bg-blue-500/10"
: "text-orange-300 border-orange-400/30 bg-orange-500/10"
}`}
>
{supplier?.type ===
"WHOLESALE"
? "text-blue-300 border-blue-400/30 bg-blue-500/10"
: "text-orange-300 border-orange-400/30 bg-orange-500/10"
}`}
>
{supplier.type ===
"WHOLESALE"
? "Оптовик"
: "Поставщик"}
</Badge>
</div>
? "Оптовик"
: "Поставщик"}
</Badge>
</div>
{/* Менеджер */}
<div>
<p className="text-white/60 text-xs mb-1">
Менеджер
</p>
<p className="text-white text-xs">
{supplier.managerName}
</p>
</div>
{/* Менеджер */}
<div>
<p className="text-white/60 text-xs mb-1">
Менеджер
</p>
<p className="text-white text-xs">
{supplier?.managerName ||
"Не указан"}
</p>
</div>
{/* Стоимость */}
<div className="text-center">
<p className="text-white/60 text-xs mb-1">
Стоимость
</p>
<p className="text-green-400 font-semibold text-sm">
{formatCurrency(
supplier.totalValue
{/* Стоимость */}
<div className="text-center">
<p className="text-white/60 text-xs mb-1">
Стоимость
</p>
<p className="text-green-400 font-semibold text-sm">
{formatCurrency(
supplier?.totalValue ||
0
)}
</p>
</div>
{/* Статус */}
<div className="text-center">
<p className="text-white/60 text-xs mb-1">
Статус
</p>
{getSupplierStatusBadge(
supplier?.status ||
"active"
)}
</p>
</div>
</div>
{/* Статус */}
<div className="text-center">
<p className="text-white/60 text-xs mb-1">
Статус
</p>
{getSupplierStatusBadge(
supplier.status
)}
</div>
</div>
{/* Детальная информация о поставщике */}
{isSupplierExpanded && (
<div className="mt-3 pt-3 border-t border-white/5">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div>
<p className="text-white/60 text-xs mb-1">
Полное название
</p>
<p className="text-white text-sm">
{supplier.fullName ||
supplier.name}
</p>
</div>
<div>
<p className="text-white/60 text-xs mb-1">
Телефон
</p>
<div className="flex items-center gap-2">
<p className="text-white text-sm">
{supplier.phone}
{/* Детальная информация о поставщике */}
{isSupplierExpanded && (
<div className="mt-3 pt-3 border-t border-white/5">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div>
<p className="text-white/60 text-xs mb-1">
Полное название
</p>
<div className="flex items-center gap-1">
<a
href={`https://t.me/${supplier.phone.replace(
/[^\d]/g,
""
)}`}
target="_blank"
rel="noopener noreferrer"
className="p-1 bg-blue-500/20 rounded hover:bg-blue-500/30 transition-colors"
title="Написать в Telegram"
>
<svg
className="h-3 w-3 text-blue-400"
viewBox="0 0 24 24"
fill="currentColor"
<p className="text-white text-sm">
{supplier?.fullName ||
supplier?.name ||
"Не указано"}
</p>
</div>
<div>
<p className="text-white/60 text-xs mb-1">
Телефон
</p>
<div className="flex items-center gap-2">
<p className="text-white text-sm">
{supplier?.phone ||
"Не указан"}
</p>
<div className="flex items-center gap-1">
<a
href={`https://t.me/${(
supplier?.phone ||
""
).replace(
/[^\d]/g,
""
)}`}
target="_blank"
rel="noopener noreferrer"
className="p-1 bg-blue-500/20 rounded hover:bg-blue-500/30 transition-colors"
title="Написать в Telegram"
>
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
</svg>
</a>
<a
href={`https://wa.me/${supplier.phone.replace(
/[^\d]/g,
""
)}`}
target="_blank"
rel="noopener noreferrer"
className="p-1 bg-green-500/20 rounded hover:bg-green-500/30 transition-colors"
title="Написать в WhatsApp"
>
<svg
className="h-3 w-3 text-green-400"
viewBox="0 0 24 24"
fill="currentColor"
<svg
className="h-3 w-3 text-blue-400"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
</svg>
</a>
<a
href={`https://wa.me/${(
supplier?.phone ||
""
).replace(
/[^\d]/g,
""
)}`}
target="_blank"
rel="noopener noreferrer"
className="p-1 bg-green-500/20 rounded hover:bg-green-500/30 transition-colors"
title="Написать в WhatsApp"
>
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488" />
</svg>
</a>
<svg
className="h-3 w-3 text-green-400"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488" />
</svg>
</a>
</div>
</div>
</div>
<div>
<p className="text-white/60 text-xs mb-1">
Email
</p>
<p className="text-white text-sm">
{supplier?.email ||
"Не указан"}
</p>
</div>
</div>
<div>
<div className="mt-3">
<p className="text-white/60 text-xs mb-1">
Email
Адрес
</p>
<p className="text-white text-sm">
{supplier.email}
{supplier?.address ||
"Не указан"}
</p>
</div>
</div>
<div className="mt-3">
<p className="text-white/60 text-xs mb-1">
Адрес
</p>
<p className="text-white text-sm">
{supplier.address}
</p>
</div>
</div>
)}
</div>
);
})}
)}
</div>
);
}
)}
</div>
</div>
)}

43
src/components/fulfillment-supplies/fulfillment-supplies/fulfillment-supplies-tab.tsx
View File

@ -21,7 +21,12 @@ export function FulfillmentSuppliesTab() {
// Проверяем URL параметр при загрузке
useEffect(() => {
const tabParam = searchParams.get("tab");
if (tabParam && ["goods", "detailed-supplies", "consumables", "returns"].includes(tabParam)) {
if (
tabParam &&
["goods", "detailed-supplies", "consumables", "returns"].includes(
tabParam
)
) {
setActiveTab(tabParam);
}
}, [searchParams]);
@ -41,34 +46,40 @@ export function FulfillmentSuppliesTab() {
onValueChange={handleTabChange}
className="h-full flex flex-col"
>
<TabsList className="grid w-full grid-cols-4 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-10 mb-3 mx-4 mt-4">
<TabsList className="grid w-full grid-cols-4 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-8 xl:h-10 mb-2 xl:mb-3 mx-2 xl:mx-4 mt-2 xl:mt-4">
<TabsTrigger
value="goods"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-[10px] xl:text-xs"
>
<Package className="h-3 w-3" />
Товар
<Package className="h-2.5 w-2.5 xl:h-3 xl:w-3" />
<span className="hidden sm:inline">Товар</span>
<span className="sm:hidden">Т</span>
</TabsTrigger>
<TabsTrigger
value="detailed-supplies"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-[10px] xl:text-xs"
>
<Building2 className="h-3 w-3" />
Наши расходники
<Building2 className="h-2.5 w-2.5 xl:h-3 xl:w-3" />
<span className="hidden md:inline">Наши расходники</span>
<span className="md:hidden hidden sm:inline">Наши</span>
<span className="sm:hidden">Н</span>
</TabsTrigger>
<TabsTrigger
value="consumables"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-[10px] xl:text-xs"
>
<Wrench className="h-3 w-3" />
Расходники селлеров
<Wrench className="h-2.5 w-2.5 xl:h-3 xl:w-3" />
<span className="hidden md:inline">Расходники селлеров</span>
<span className="md:hidden hidden sm:inline">Селлеры</span>
<span className="sm:hidden">С</span>
</TabsTrigger>
<TabsTrigger
value="returns"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-[10px] xl:text-xs"
>
<RotateCcw className="h-3 w-3" />
Возвраты с ПВЗ
<RotateCcw className="h-2.5 w-2.5 xl:h-3 xl:w-3" />
<span className="hidden sm:inline">Возвраты с ПВЗ</span>
<span className="sm:hidden">В</span>
</TabsTrigger>
</TabsList>
@ -80,13 +91,13 @@ export function FulfillmentSuppliesTab() {
value="detailed-supplies"
className="flex-1 overflow-hidden"
>
<div className="h-full p-4 overflow-y-auto">
<div className="h-full p-2 xl:p-4 overflow-y-auto">
<FulfillmentDetailedSuppliesTab />
</div>
</TabsContent>
<TabsContent value="consumables" className="flex-1 overflow-hidden">
<div className="h-full p-4 overflow-y-auto">
<div className="h-full p-2 xl:p-4 overflow-y-auto">
<FulfillmentConsumablesOrdersTab />
</div>
</TabsContent>

24
src/components/fulfillment-supplies/marketplace-supplies/marketplace-supplies-tab.tsx
View File

@ -18,24 +18,30 @@ export function MarketplaceSuppliesTab() {
onValueChange={setActiveTab}
className="h-full flex flex-col"
>
<TabsList className="grid w-full grid-cols-2 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-10 mb-3 mx-4 mt-4">
<TabsList className="grid w-full grid-cols-2 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-8 xl:h-10 mb-2 xl:mb-3 mx-2 xl:mx-4 mt-2 xl:mt-4">
<TabsTrigger
value="wildberries"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-xs"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 xl:gap-2 text-[10px] xl:text-xs"
>
<div className="w-3 h-3 bg-purple-500 rounded-sm flex items-center justify-center">
<span className="text-white text-[8px] font-bold">W</span>
<div className="w-2.5 h-2.5 xl:w-3 xl:h-3 bg-purple-500 rounded-sm flex items-center justify-center">
<span className="text-white text-[6px] xl:text-[8px] font-bold">
W
</span>
</div>
Wildberries
<span className="hidden sm:inline">Wildberries</span>
<span className="sm:hidden">WB</span>
</TabsTrigger>
<TabsTrigger
value="ozon"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-xs"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 xl:gap-2 text-[10px] xl:text-xs"
>
<div className="w-3 h-3 bg-blue-500 rounded-sm flex items-center justify-center">
<span className="text-white text-[8px] font-bold">O</span>
<div className="w-2.5 h-2.5 xl:w-3 xl:h-3 bg-blue-500 rounded-sm flex items-center justify-center">
<span className="text-white text-[6px] xl:text-[8px] font-bold">
O
</span>
</div>
Ozon
<span className="hidden sm:inline">Ozon</span>
<span className="sm:hidden">OZ</span>
</TabsTrigger>
</TabsList>

89
src/components/fulfillment-supplies/marketplace-supplies/ozon-supplies-tab.tsx
View File

@ -13,6 +13,8 @@ import {
AlertCircle,
Eye,
Calendar,
Package2,
Box,
} from "lucide-react";
// Мок данные для поставок на Ozon
@ -143,60 +145,62 @@ export function OzonSuppliesTab() {
};
return (
<div className="h-full flex flex-col space-y-4 p-4">
<div className="h-full flex flex-col space-y-2 xl:space-y-4 p-2 xl:p-4">
{/* Статистика с кнопкой */}
<div className="flex items-center justify-between gap-4">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 flex-1">
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-blue-500/20 rounded">
<Package className="h-3 w-3 text-blue-400" />
<div className="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-3 xl:gap-4">
<div className="grid grid-cols-2 xl:grid-cols-4 gap-2 xl:gap-3 flex-1">
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-blue-500/20 rounded">
<Package className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-blue-400" />
</div>
<div>
<p className="text-white/60 text-xs">Поставок</p>
<p className="text-lg font-bold text-white">
<p className="text-white/60 text-[10px] xl:text-xs">Поставок</p>
<p className="text-sm xl:text-lg font-bold text-white">
{filteredSupplies.length}
</p>
</div>
</div>
</Card>
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-green-500/20 rounded">
<TrendingUp className="h-3 w-3 text-green-400" />
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-green-500/20 rounded">
<TrendingUp className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-green-400" />
</div>
<div>
<p className="text-white/60 text-xs">Стоимость</p>
<p className="text-lg font-bold text-white">
<div className="min-w-0 flex-1">
<p className="text-white/60 text-[10px] xl:text-xs">
Стоимость
</p>
<p className="text-sm xl:text-lg font-bold text-white truncate">
{formatCurrency(getTotalValue())}
</p>
</div>
</div>
</Card>
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-purple-500/20 rounded">
<AlertCircle className="h-3 w-3 text-purple-400" />
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-purple-500/20 rounded">
<Package2 className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-purple-400" />
</div>
<div>
<p className="text-white/60 text-xs">Товаров</p>
<p className="text-lg font-bold text-white">
<p className="text-white/60 text-[10px] xl:text-xs">Товаров</p>
<p className="text-sm xl:text-lg font-bold text-white">
{getTotalItems()}
</p>
</div>
</div>
</Card>
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-orange-500/20 rounded">
<Package className="h-3 w-3 text-orange-400" />
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-orange-500/20 rounded">
<Box className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-orange-400" />
</div>
<div>
<p className="text-white/60 text-xs">Коробок</p>
<p className="text-lg font-bold text-white">
<p className="text-white/60 text-[10px] xl:text-xs">Коробок</p>
<p className="text-sm xl:text-lg font-bold text-white">
{getTotalBoxes()}
</p>
</div>
@ -206,46 +210,47 @@ export function OzonSuppliesTab() {
<Button
size="sm"
className="bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white text-sm px-6 h-[60px] whitespace-nowrap"
className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white text-xs xl:text-sm px-3 xl:px-6 h-[50px] xl:h-[60px] whitespace-nowrap w-full xl:w-auto"
>
<Plus className="h-4 w-4 mr-2" />
Создать поставку
<Plus className="h-3 w-3 xl:h-4 xl:w-4 mr-1 xl:mr-2" />
<span className="hidden sm:inline">Создать поставку</span>
<span className="sm:hidden">Создать</span>
</Button>
</div>
{/* Фильтры */}
<div className="flex items-center gap-3">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 xl:gap-3">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
<Search className="absolute left-2 xl:left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 xl:h-4 xl:w-4 text-white/40" />
<Input
placeholder="Поиск по ID поставки, складу, товарам..."
placeholder="Поиск по ID поставки..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="glass-input pl-10 text-white placeholder:text-white/40"
className="glass-input pl-8 xl:pl-10 text-white placeholder:text-white/40 text-xs xl:text-sm h-8 xl:h-auto"
/>
</div>
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className="glass-input text-white text-sm px-3 py-2 rounded-lg bg-white/5 border border-white/10"
className="glass-input text-white text-xs xl:text-sm px-2 xl:px-3 py-1.5 xl:py-2 rounded-lg bg-white/5 border border-white/10 h-8 xl:h-auto"
>
<option value="all">Все статусы</option>
<option value="awaiting_packaging">Ожидает упаковки</option>
<option value="sent_to_delivery">Отправлена</option>
<option value="created">Создана</option>
<option value="confirmed">Подтверждена</option>
<option value="in-transit">В пути</option>
<option value="delivered">Доставлена</option>
<option value="cancelled">Отменена</option>
<option value="arbitration">Арбитраж</option>
<option value="accepted">Принята</option>
</select>
</div>
{/* Список поставок */}
<div className="flex-1 overflow-hidden">
<div className="h-full overflow-y-auto space-y-3">
<div className="h-full overflow-y-auto space-y-2 xl:space-y-3">
{filteredSupplies.map((supply) => (
<Card
key={supply.id}
className="glass-card p-4 hover:bg-white/10 transition-colors"
className="glass-card p-2 xl:p-4 hover:bg-white/10 transition-colors"
>
<div className="flex items-center justify-between">
<div className="flex-1">

85
src/components/fulfillment-supplies/marketplace-supplies/wildberries-supplies-tab.tsx
View File

@ -13,6 +13,8 @@ import {
AlertCircle,
Eye,
Calendar,
Package2,
Box,
} from "lucide-react";
// Мок данные для поставок на Wildberries
@ -139,60 +141,62 @@ export function WildberriesSuppliesTab() {
};
return (
<div className="h-full flex flex-col space-y-4 p-4">
<div className="h-full flex flex-col space-y-2 xl:space-y-4 p-2 xl:p-4">
{/* Статистика с кнопкой */}
<div className="flex items-center justify-between gap-4">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 flex-1">
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-purple-500/20 rounded">
<Package className="h-3 w-3 text-purple-400" />
<div className="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-3 xl:gap-4">
<div className="grid grid-cols-2 xl:grid-cols-4 gap-2 xl:gap-3 flex-1">
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-purple-500/20 rounded">
<Package className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-purple-400" />
</div>
<div>
<p className="text-white/60 text-xs">Поставок</p>
<p className="text-lg font-bold text-white">
<p className="text-white/60 text-[10px] xl:text-xs">Поставок</p>
<p className="text-sm xl:text-lg font-bold text-white">
{filteredSupplies.length}
</p>
</div>
</div>
</Card>
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-green-500/20 rounded">
<TrendingUp className="h-3 w-3 text-green-400" />
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-green-500/20 rounded">
<TrendingUp className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-green-400" />
</div>
<div>
<p className="text-white/60 text-xs">Стоимость</p>
<p className="text-lg font-bold text-white">
<div className="min-w-0 flex-1">
<p className="text-white/60 text-[10px] xl:text-xs">
Стоимость
</p>
<p className="text-sm xl:text-lg font-bold text-white truncate">
{formatCurrency(getTotalValue())}
</p>
</div>
</div>
</Card>
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-blue-500/20 rounded">
<AlertCircle className="h-3 w-3 text-blue-400" />
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-blue-500/20 rounded">
<Package2 className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-blue-400" />
</div>
<div>
<p className="text-white/60 text-xs">Товаров</p>
<p className="text-lg font-bold text-white">
<p className="text-white/60 text-[10px] xl:text-xs">Товаров</p>
<p className="text-sm xl:text-lg font-bold text-white">
{getTotalItems()}
</p>
</div>
</div>
</Card>
<Card className="glass-card p-3 h-[60px]">
<div className="flex items-center space-x-2 h-full">
<div className="p-1.5 bg-orange-500/20 rounded">
<Package className="h-3 w-3 text-orange-400" />
<Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
<div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
<div className="p-1 xl:p-1.5 bg-orange-500/20 rounded">
<Box className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-orange-400" />
</div>
<div>
<p className="text-white/60 text-xs">Коробок</p>
<p className="text-lg font-bold text-white">
<p className="text-white/60 text-[10px] xl:text-xs">Коробок</p>
<p className="text-sm xl:text-lg font-bold text-white">
{getTotalBoxes()}
</p>
</div>
@ -202,46 +206,47 @@ export function WildberriesSuppliesTab() {
<Button
size="sm"
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white text-sm px-6 h-[60px] whitespace-nowrap"
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white text-xs xl:text-sm px-3 xl:px-6 h-[50px] xl:h-[60px] whitespace-nowrap w-full xl:w-auto"
>
<Plus className="h-4 w-4 mr-2" />
Создать поставку
<Plus className="h-3 w-3 xl:h-4 xl:w-4 mr-1 xl:mr-2" />
<span className="hidden sm:inline">Создать поставку</span>
<span className="sm:hidden">Создать</span>
</Button>
</div>
{/* Фильтры */}
<div className="flex items-center gap-3">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 xl:gap-3">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
<Search className="absolute left-2 xl:left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 xl:h-4 xl:w-4 text-white/40" />
<Input
placeholder="Поиск по ID поставки, складу, товарам..."
placeholder="Поиск по ID поставки..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="glass-input pl-10 text-white placeholder:text-white/40"
className="glass-input pl-8 xl:pl-10 text-white placeholder:text-white/40 text-xs xl:text-sm h-8 xl:h-auto"
/>
</div>
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className="glass-input text-white text-sm px-3 py-2 rounded-lg bg-white/5 border border-white/10"
className="glass-input text-white text-xs xl:text-sm px-2 xl:px-3 py-1.5 xl:py-2 rounded-lg bg-white/5 border border-white/10 h-8 xl:h-auto"
>
<option value="all">Все статусы</option>
<option value="created">Создана</option>
<option value="confirmed">Подтверждена</option>
<option value="shipped">Отправлена</option>
<option value="in-transit">В пути</option>
<option value="delivered">Доставлена</option>
<option value="cancelled">Отменена</option>
<option value="accepted">Принята</option>
</select>
</div>
{/* Список поставок */}
<div className="flex-1 overflow-hidden">
<div className="h-full overflow-y-auto space-y-3">
<div className="h-full overflow-y-auto space-y-2 xl:space-y-3">
{filteredSupplies.map((supply) => (
<Card
key={supply.id}
className="glass-card p-4 hover:bg-white/10 transition-colors"
className="glass-card p-2 xl:p-4 hover:bg-white/10 transition-colors"
>
<div className="flex items-center justify-between">
<div className="flex-1">