Обновлены компоненты управления поставками: улучшены стили и логика отображения для вкладок и карточек товаров. Добавлены проверки на наличие идентификаторов для улучшения обработки данных. Оптимизирован интерфейс с использованием новых компонентов и улучшена читаемость кода.
This commit is contained in:
Veronika Smirnova
@ -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 />
|
||||
|
||||
@ -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">
|
||||
<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 text-xs"> • </span>
|
||||
<span className="text-white/80 text-xs">
|
||||
<span className="text-white/60 hidden xl:inline">
|
||||
{" "}
|
||||
•{" "}
|
||||
</span>
|
||||
<span className="text-white/80 truncate">
|
||||
{supply.seller.phone}
|
||||
</span>
|
||||
<span className="text-white/60 text-xs"> • </span>
|
||||
<div className="flex items-center gap-1">
|
||||
</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,18 +1215,20 @@ 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) => {
|
||||
{(route?.suppliers || []).map(
|
||||
(supplier) => {
|
||||
const isSupplierExpanded =
|
||||
expandedSuppliers.has(
|
||||
supplier.id
|
||||
@ -1180,11 +1240,21 @@ export function FulfillmentGoodsTab() {
|
||||
>
|
||||
<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={() =>
|
||||
onClick={() => {
|
||||
if (
|
||||
supplier &&
|
||||
supplier.id
|
||||
) {
|
||||
toggleSupplierExpansion(
|
||||
supplier.id
|
||||
)
|
||||
);
|
||||
} else {
|
||||
console.error(
|
||||
"Supplier or supplier.id is undefined",
|
||||
supplier
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* Название поставщика */}
|
||||
<div className="lg:col-span-2">
|
||||
@ -1192,7 +1262,8 @@ export function FulfillmentGoodsTab() {
|
||||
Поставщик
|
||||
</p>
|
||||
<p className="text-white font-medium text-sm">
|
||||
{supplier.name}
|
||||
{supplier?.name ||
|
||||
"Без названия"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1202,7 +1273,8 @@ export function FulfillmentGoodsTab() {
|
||||
ИНН
|
||||
</p>
|
||||
<p className="text-white text-xs font-mono">
|
||||
{supplier.inn}
|
||||
{supplier?.inn ||
|
||||
"Не указан"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1214,13 +1286,13 @@ export function FulfillmentGoodsTab() {
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
supplier.type ===
|
||||
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 ===
|
||||
{supplier?.type ===
|
||||
"WHOLESALE"
|
||||
? "Оптовик"
|
||||
: "Поставщик"}
|
||||
@ -1233,7 +1305,8 @@ export function FulfillmentGoodsTab() {
|
||||
Менеджер
|
||||
</p>
|
||||
<p className="text-white text-xs">
|
||||
{supplier.managerName}
|
||||
{supplier?.managerName ||
|
||||
"Не указан"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1244,7 +1317,8 @@ export function FulfillmentGoodsTab() {
|
||||
</p>
|
||||
<p className="text-green-400 font-semibold text-sm">
|
||||
{formatCurrency(
|
||||
supplier.totalValue
|
||||
supplier?.totalValue ||
|
||||
0
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
@ -1255,7 +1329,8 @@ export function FulfillmentGoodsTab() {
|
||||
Статус
|
||||
</p>
|
||||
{getSupplierStatusBadge(
|
||||
supplier.status
|
||||
supplier?.status ||
|
||||
"active"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -1269,8 +1344,9 @@ export function FulfillmentGoodsTab() {
|
||||
Полное название
|
||||
</p>
|
||||
<p className="text-white text-sm">
|
||||
{supplier.fullName ||
|
||||
supplier.name}
|
||||
{supplier?.fullName ||
|
||||
supplier?.name ||
|
||||
"Не указано"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
@ -1279,11 +1355,15 @@ export function FulfillmentGoodsTab() {
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-white text-sm">
|
||||
{supplier.phone}
|
||||
{supplier?.phone ||
|
||||
"Не указан"}
|
||||
</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<a
|
||||
href={`https://t.me/${supplier.phone.replace(
|
||||
href={`https://t.me/${(
|
||||
supplier?.phone ||
|
||||
""
|
||||
).replace(
|
||||
/[^\d]/g,
|
||||
""
|
||||
)}`}
|
||||
@ -1301,7 +1381,10 @@ export function FulfillmentGoodsTab() {
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href={`https://wa.me/${supplier.phone.replace(
|
||||
href={`https://wa.me/${(
|
||||
supplier?.phone ||
|
||||
""
|
||||
).replace(
|
||||
/[^\d]/g,
|
||||
""
|
||||
)}`}
|
||||
@ -1326,7 +1409,8 @@ export function FulfillmentGoodsTab() {
|
||||
Email
|
||||
</p>
|
||||
<p className="text-white text-sm">
|
||||
{supplier.email}
|
||||
{supplier?.email ||
|
||||
"Не указан"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -1335,14 +1419,16 @@ export function FulfillmentGoodsTab() {
|
||||
Адрес
|
||||
</p>
|
||||
<p className="text-white text-sm">
|
||||
{supplier.address}
|
||||
{supplier?.address ||
|
||||
"Не указан"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -20,6 +20,8 @@ import {
|
||||
ArrowUpDown,
|
||||
Store,
|
||||
Package2,
|
||||
Eye,
|
||||
EyeOff,
|
||||
} from "lucide-react";
|
||||
|
||||
// Типы данных
|
||||
@ -57,6 +59,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
const [sortField, setSortField] = useState<keyof StoreData>("name");
|
||||
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
|
||||
const [expandedStores, setExpandedStores] = useState<Set<string>>(new Set());
|
||||
const [showAdditionalValues, setShowAdditionalValues] = useState(true);
|
||||
|
||||
// Мок данные для статистики
|
||||
const warehouseStats: WarehouseStats = {
|
||||
@ -324,6 +327,26 @@ export function FulfillmentWarehouseDashboard() {
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
{field === "pvzReturns" && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowAdditionalValues(!showAdditionalValues);
|
||||
}}
|
||||
className="p-1 rounded hover:bg-orange-500/20 transition-colors border border-orange-500/30 bg-orange-500/10 ml-2"
|
||||
title={
|
||||
showAdditionalValues
|
||||
? "Скрыть дополнительные значения"
|
||||
: "Показать дополнительные значения"
|
||||
}
|
||||
>
|
||||
{showAdditionalValues ? (
|
||||
<Eye className="h-3 w-3 text-orange-400 hover:text-orange-300" />
|
||||
) : (
|
||||
<EyeOff className="h-3 w-3 text-orange-400 hover:text-orange-300" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -397,10 +420,30 @@ export function FulfillmentWarehouseDashboard() {
|
||||
className="p-4 border-b border-white/10 flex-shrink-0"
|
||||
style={{ maxHeight: "10vh" }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-semibold text-white">
|
||||
Детализация по магазинам
|
||||
</h2>
|
||||
|
||||
{/* Компактный поиск */}
|
||||
<div className="relative mx-2.5 flex-1 max-w-xs">
|
||||
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-3.5 w-3.5 text-white/40" />
|
||||
<div className="flex space-x-2">
|
||||
<Input
|
||||
placeholder="Поиск по магазинам..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-8 h-8 text-sm glass-input text-white placeholder:text-white/40 flex-1"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-8 px-2 bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border border-blue-500/30 text-xs"
|
||||
>
|
||||
Поиск
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-blue-500/20 text-blue-300 text-xs"
|
||||
@ -408,17 +451,6 @@ export function FulfillmentWarehouseDashboard() {
|
||||
{filteredAndSortedStores.length} магазинов
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Компактный поиск */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-3.5 w-3.5 text-white/40" />
|
||||
<Input
|
||||
placeholder="Поиск по магазинам..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-8 h-8 text-sm glass-input text-white placeholder:text-white/40"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Фиксированные заголовки таблицы */}
|
||||
@ -475,6 +507,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{showAdditionalValues && (
|
||||
<div className="flex items-center justify-end space-x-1">
|
||||
{/* Положительное изменение - всегда зеленое */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
@ -495,6 +528,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-3 py-2 text-xs font-bold text-white">
|
||||
<div className="flex items-center justify-between">
|
||||
@ -517,6 +551,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{showAdditionalValues && (
|
||||
<div className="flex items-center justify-end space-x-1">
|
||||
{/* Положительное изменение - всегда зеленое */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
@ -537,6 +572,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-3 py-2 text-xs font-bold text-white">
|
||||
<div className="flex items-center justify-between">
|
||||
@ -562,6 +598,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{showAdditionalValues && (
|
||||
<div className="flex items-center justify-end space-x-1">
|
||||
{/* Положительное изменение - всегда зеленое */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
@ -582,6 +619,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-3 py-2 text-xs font-bold text-white">
|
||||
<div className="flex items-center justify-between">
|
||||
@ -608,6 +646,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{showAdditionalValues && (
|
||||
<div className="flex items-center justify-end space-x-1">
|
||||
{/* Положительное изменение - всегда зеленое */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
@ -634,6 +673,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-3 py-2 text-xs font-bold text-white">
|
||||
<div className="flex items-center justify-between">
|
||||
@ -659,6 +699,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{showAdditionalValues && (
|
||||
<div className="flex items-center justify-end space-x-1">
|
||||
{/* Положительное изменение - всегда зеленое */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
@ -679,6 +720,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -716,19 +758,24 @@ export function FulfillmentWarehouseDashboard() {
|
||||
<div className="text-white font-semibold text-sm">
|
||||
{formatNumber(store.products)}
|
||||
</div>
|
||||
{showAdditionalValues && (
|
||||
<div className="flex items-center space-x-1">
|
||||
{/* Положительное изменение - всегда зеленое */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
<span className="text-[9px] font-bold text-green-400">
|
||||
+
|
||||
{Math.abs(Math.floor(store.productsChange * 0.6))}
|
||||
{Math.abs(
|
||||
Math.floor(store.productsChange * 0.6)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{/* Отрицательное изменение - всегда красное */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
<span className="text-[9px] font-bold text-red-400">
|
||||
-
|
||||
{Math.abs(Math.floor(store.productsChange * 0.4))}
|
||||
{Math.abs(
|
||||
Math.floor(store.productsChange * 0.4)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{/* Результирующее изменение */}
|
||||
@ -738,6 +785,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -746,6 +794,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
<div className="text-white font-semibold text-sm">
|
||||
{formatNumber(store.goods)}
|
||||
</div>
|
||||
{showAdditionalValues && (
|
||||
<div className="flex items-center space-x-1">
|
||||
{/* Положительное изменение - всегда зеленое */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
@ -766,6 +815,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -774,17 +824,24 @@ export function FulfillmentWarehouseDashboard() {
|
||||
<div className="text-white font-semibold text-sm">
|
||||
{formatNumber(store.defects)}
|
||||
</div>
|
||||
{showAdditionalValues && (
|
||||
<div className="flex items-center space-x-1">
|
||||
{/* Положительное изменение - всегда зеленое */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
<span className="text-[9px] font-bold text-green-400">
|
||||
+{Math.abs(Math.floor(store.defectsChange * 0.6))}
|
||||
+
|
||||
{Math.abs(
|
||||
Math.floor(store.defectsChange * 0.6)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{/* Отрицательное изменение - всегда красное */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
<span className="text-[9px] font-bold text-red-400">
|
||||
-{Math.abs(Math.floor(store.defectsChange * 0.4))}
|
||||
-
|
||||
{Math.abs(
|
||||
Math.floor(store.defectsChange * 0.4)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{/* Результирующее изменение */}
|
||||
@ -794,6 +851,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -802,6 +860,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
<div className="text-white font-semibold text-sm">
|
||||
{formatNumber(store.sellerSupplies)}
|
||||
</div>
|
||||
{showAdditionalValues && (
|
||||
<div className="flex items-center space-x-1">
|
||||
{/* Положительное изменение - всегда зеленое */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
@ -828,6 +887,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -836,6 +896,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
<div className="text-white font-semibold text-sm">
|
||||
{formatNumber(store.pvzReturns)}
|
||||
</div>
|
||||
{showAdditionalValues && (
|
||||
<div className="flex items-center space-x-1">
|
||||
{/* Положительное изменение - всегда зеленое */}
|
||||
<div className="flex items-center space-x-0.5">
|
||||
@ -862,6 +923,7 @@ export function FulfillmentWarehouseDashboard() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,13 +2,10 @@
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { StatsCard } from "../ui/stats-card";
|
||||
import { StatsGrid } from "../ui/stats-grid";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Calendar,
|
||||
Package,
|
||||
MapPin,
|
||||
@ -371,32 +368,42 @@ export function FulfillmentGoodsTab() {
|
||||
{/* Таблица поставок товаров ФФ */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden flex-1 flex flex-col">
|
||||
<div className="overflow-auto flex-1">
|
||||
<table className="w-full">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-white/20">
|
||||
<th className="text-left p-4 text-white font-semibold">№</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Дата поставки
|
||||
<th className="text-left p-2 text-white font-semibold text-sm">
|
||||
№
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Дата создания
|
||||
<th className="text-left p-2 text-white font-semibold text-sm">
|
||||
<span className="hidden sm:inline">Дата поставки</span>
|
||||
<span className="sm:hidden">Поставка</span>
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">План</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Брак</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Цена товаров
|
||||
<th className="text-left p-2 text-white font-semibold text-sm hidden lg:table-cell">
|
||||
Создана
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Услуги ФФ
|
||||
<th className="text-left p-2 text-white font-semibold text-sm">
|
||||
План
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Логистика до ФФ
|
||||
<th className="text-left p-2 text-white font-semibold text-sm">
|
||||
Факт
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Итого сумма
|
||||
<th className="text-left p-2 text-white font-semibold text-sm">
|
||||
Брак
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
<th className="text-left p-2 text-white font-semibold text-sm">
|
||||
<span className="hidden md:inline">Цена товаров</span>
|
||||
<span className="md:hidden">Цена</span>
|
||||
</th>
|
||||
<th className="text-left p-2 text-white font-semibold text-sm hidden lg:table-cell">
|
||||
ФФ
|
||||
</th>
|
||||
<th className="text-left p-2 text-white font-semibold text-sm hidden lg:table-cell">
|
||||
Логистика
|
||||
</th>
|
||||
<th className="text-left p-2 text-white font-semibold text-sm">
|
||||
Итого
|
||||
</th>
|
||||
<th className="text-left p-2 text-white font-semibold text-sm">
|
||||
Статус
|
||||
</th>
|
||||
</tr>
|
||||
@ -412,39 +419,37 @@ export function FulfillmentGoodsTab() {
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10 cursor-pointer"
|
||||
onClick={() => toggleSupplyExpansion(supply.id)}
|
||||
>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-white font-normal text-lg">
|
||||
<td className="p-2">
|
||||
<span className="text-white font-normal text-sm">
|
||||
{supply.number}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-semibold">
|
||||
<td className="p-2">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Calendar className="h-3 w-3 text-white/40" />
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{formatDate(supply.deliveryDate)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
<td className="p-2 hidden lg:table-cell">
|
||||
<span className="text-white/80 text-sm">
|
||||
{formatDate(supply.createdDate)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
<td className="p-2">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{supply.plannedTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
<td className="p-2">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{supply.actualTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<td className="p-2">
|
||||
<span
|
||||
className={`font-semibold ${
|
||||
className={`font-semibold text-sm ${
|
||||
supply.defectTotal > 0
|
||||
? "text-red-400"
|
||||
: "text-white"
|
||||
@ -453,30 +458,30 @@ export function FulfillmentGoodsTab() {
|
||||
{supply.defectTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-semibold">
|
||||
<td className="p-2">
|
||||
<span className="text-green-400 font-semibold text-sm">
|
||||
{formatCurrency(supply.totalProductPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-blue-400 font-semibold">
|
||||
<td className="p-2 hidden lg:table-cell">
|
||||
<span className="text-blue-400 font-semibold text-sm">
|
||||
{formatCurrency(supply.totalFulfillmentPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-purple-400 font-semibold">
|
||||
<td className="p-2 hidden lg:table-cell">
|
||||
<span className="text-purple-400 font-semibold text-sm">
|
||||
{formatCurrency(supply.totalLogisticsPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<DollarSign className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-bold text-lg">
|
||||
<td className="p-2">
|
||||
<div className="flex items-center space-x-1">
|
||||
<DollarSign className="h-3 w-3 text-white/40" />
|
||||
<span className="text-white font-bold text-sm">
|
||||
{formatCurrency(supply.grandTotal)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">{getStatusBadge(supply.status)}</td>
|
||||
<td className="p-2">{getStatusBadge(supply.status)}</td>
|
||||
</tr>
|
||||
|
||||
{/* Развернутые уровни - аналогично оригинальному коду */}
|
||||
@ -485,47 +490,39 @@ export function FulfillmentGoodsTab() {
|
||||
const isRouteExpanded = expandedRoutes.has(route.id);
|
||||
return (
|
||||
<React.Fragment key={route.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10">
|
||||
<td className="p-4 pl-12">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleRouteExpansion(route.id)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
<tr
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10 cursor-pointer"
|
||||
onClick={() => toggleRouteExpansion(route.id)}
|
||||
>
|
||||
{isRouteExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<MapPin className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-white font-medium">
|
||||
<td className="p-2 relative">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-1 h-1 rounded-full bg-blue-400 mr-1"></div>
|
||||
<MapPin className="h-3 w-3 text-blue-400" />
|
||||
<span className="text-white font-medium text-sm">
|
||||
Маршрут
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute left-0 top-0 w-0.5 h-full bg-blue-400/30"></div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<td className="p-2" colSpan={1}>
|
||||
<div className="text-white">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<span className="font-medium">
|
||||
<span className="font-medium text-sm">
|
||||
{route.from}
|
||||
</span>
|
||||
<span className="text-white/60">→</span>
|
||||
<span className="font-medium">
|
||||
<span className="font-medium text-sm">
|
||||
{route.to}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
<div className="text-xs text-white/60 hidden sm:block">
|
||||
{route.fromAddress} → {route.toAddress}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
<td className="p-2 hidden lg:table-cell"></td>
|
||||
<td className="p-2">
|
||||
<span className="text-white/80 text-sm">
|
||||
{route.wholesalers.reduce(
|
||||
(sum, w) =>
|
||||
sum +
|
||||
@ -537,8 +534,8 @@ export function FulfillmentGoodsTab() {
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
<td className="p-2">
|
||||
<span className="text-white/80 text-sm">
|
||||
{route.wholesalers.reduce(
|
||||
(sum, w) =>
|
||||
sum +
|
||||
@ -550,8 +547,8 @@ export function FulfillmentGoodsTab() {
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
<td className="p-2">
|
||||
<span className="text-white/80 text-sm">
|
||||
{route.wholesalers.reduce(
|
||||
(sum, w) =>
|
||||
sum +
|
||||
@ -563,29 +560,29 @@ export function FulfillmentGoodsTab() {
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">
|
||||
<td className="p-2">
|
||||
<span className="text-green-400 font-medium text-sm">
|
||||
{formatCurrency(route.totalProductPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-blue-400 font-medium">
|
||||
<td className="p-2 hidden lg:table-cell">
|
||||
<span className="text-blue-400 font-medium text-sm">
|
||||
{formatCurrency(
|
||||
route.fulfillmentServicePrice
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-purple-400 font-medium">
|
||||
<td className="p-2 hidden lg:table-cell">
|
||||
<span className="text-purple-400 font-medium text-sm">
|
||||
{formatCurrency(route.logisticsPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
<td className="p-2">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{formatCurrency(route.totalAmount)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
<td className="p-2"></td>
|
||||
</tr>
|
||||
|
||||
{/* Остальные уровни развертывания аналогично */}
|
||||
@ -595,73 +592,66 @@ export function FulfillmentGoodsTab() {
|
||||
expandedWholesalers.has(wholesaler.id);
|
||||
return (
|
||||
<React.Fragment key={wholesaler.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-green-500/10">
|
||||
<td className="p-4 pl-20">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
<tr
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-green-500/10 cursor-pointer"
|
||||
onClick={() =>
|
||||
toggleWholesalerExpansion(
|
||||
wholesaler.id
|
||||
)
|
||||
toggleWholesalerExpansion(wholesaler.id)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isWholesalerExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Building2 className="h-4 w-4 text-green-400" />
|
||||
<span className="text-white font-medium">
|
||||
<td className="p-2 relative">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-1 h-1 rounded-full bg-green-400 mr-1"></div>
|
||||
<div className="w-1 h-1 rounded-full bg-green-400 mr-1"></div>
|
||||
<Building2 className="h-3 w-3 text-green-400" />
|
||||
<span className="text-white font-medium text-sm">
|
||||
Оптовик
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute left-0 top-0 w-0.5 h-full bg-green-400/30"></div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<td className="p-2" colSpan={1}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">
|
||||
<div className="font-medium mb-1 text-sm">
|
||||
{wholesaler.name}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
<div className="text-xs text-white/60 mb-1 hidden sm:block">
|
||||
ИНН: {wholesaler.inn}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
<div className="text-xs text-white/60 mb-1 hidden lg:block">
|
||||
{wholesaler.address}
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
<div className="text-xs text-white/60 hidden sm:block">
|
||||
{wholesaler.contact}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
<td className="p-2 hidden lg:table-cell"></td>
|
||||
<td className="p-2">
|
||||
<span className="text-white/80 text-sm">
|
||||
{wholesaler.products.reduce(
|
||||
(sum, p) => sum + p.plannedQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
<td className="p-2">
|
||||
<span className="text-white/80 text-sm">
|
||||
{wholesaler.products.reduce(
|
||||
(sum, p) => sum + p.actualQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
<td className="p-2">
|
||||
<span className="text-white/80 text-sm">
|
||||
{wholesaler.products.reduce(
|
||||
(sum, p) => sum + p.defectQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">
|
||||
<td className="p-2">
|
||||
<span className="text-green-400 font-medium text-sm">
|
||||
{formatCurrency(
|
||||
wholesaler.products.reduce(
|
||||
(sum, p) =>
|
||||
@ -671,9 +661,12 @@ export function FulfillmentGoodsTab() {
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}></td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
<td
|
||||
className="p-2 hidden lg:table-cell"
|
||||
colSpan={2}
|
||||
></td>
|
||||
<td className="p-2">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{formatCurrency(
|
||||
wholesaler.totalAmount
|
||||
)}
|
||||
@ -689,57 +682,53 @@ export function FulfillmentGoodsTab() {
|
||||
expandedProducts.has(product.id);
|
||||
return (
|
||||
<React.Fragment key={product.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-yellow-500/10">
|
||||
<td className="p-4 pl-28">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
<tr
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-yellow-500/10 cursor-pointer"
|
||||
onClick={() =>
|
||||
toggleProductExpansion(
|
||||
product.id
|
||||
)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isProductExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Package className="h-4 w-4 text-yellow-400" />
|
||||
<span className="text-white font-medium">
|
||||
<td className="p-2 relative">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-1 h-1 rounded-full bg-yellow-400 mr-1"></div>
|
||||
<div className="w-1 h-1 rounded-full bg-yellow-400 mr-1"></div>
|
||||
<div className="w-1 h-1 rounded-full bg-yellow-400 mr-1"></div>
|
||||
<Package className="h-3 w-3 text-yellow-400" />
|
||||
<span className="text-white font-medium text-sm">
|
||||
Товар
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute left-0 top-0 w-0.5 h-full bg-yellow-400/30"></div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<td className="p-2" colSpan={1}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">
|
||||
<div className="font-medium mb-1 text-sm">
|
||||
{product.name}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
<div className="text-xs text-white/60 mb-1 hidden sm:block">
|
||||
Артикул: {product.sku}
|
||||
</div>
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs">
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs hidden sm:inline-flex">
|
||||
{product.category}
|
||||
</Badge>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
<td className="p-2 hidden lg:table-cell"></td>
|
||||
<td className="p-2">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{product.plannedQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
<td className="p-2">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{product.actualQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<td className="p-2">
|
||||
<span
|
||||
className={`font-semibold ${
|
||||
className={`font-semibold text-sm ${
|
||||
product.defectQty > 0
|
||||
? "text-red-400"
|
||||
: "text-white"
|
||||
@ -748,16 +737,16 @@ export function FulfillmentGoodsTab() {
|
||||
{product.defectQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<td className="p-2">
|
||||
<div className="text-white">
|
||||
<div className="font-medium">
|
||||
<div className="font-medium text-sm">
|
||||
{formatCurrency(
|
||||
calculateProductTotal(
|
||||
product
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
<div className="text-xs text-white/60 hidden sm:block">
|
||||
{formatCurrency(
|
||||
product.productPrice
|
||||
)}{" "}
|
||||
@ -765,15 +754,18 @@ export function FulfillmentGoodsTab() {
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<td
|
||||
className="p-2 hidden lg:table-cell"
|
||||
colSpan={2}
|
||||
>
|
||||
{getEfficiencyBadge(
|
||||
product.plannedQty,
|
||||
product.actualQty,
|
||||
product.defectQty
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
<td className="p-2">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{formatCurrency(
|
||||
calculateProductTotal(
|
||||
product
|
||||
@ -781,7 +773,7 @@ export function FulfillmentGoodsTab() {
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
<td className="p-2"></td>
|
||||
</tr>
|
||||
|
||||
{/* Параметры товара */}
|
||||
@ -792,7 +784,7 @@ export function FulfillmentGoodsTab() {
|
||||
className="p-0"
|
||||
>
|
||||
<div className="bg-white/5 border-t border-white/10">
|
||||
<div className="p-4 pl-36">
|
||||
<div className="p-4">
|
||||
<h4 className="text-white font-medium mb-3 flex items-center space-x-2">
|
||||
<span className="text-xs text-white/60">
|
||||
📋 Параметры товара:
|
||||
|
||||
@ -10,7 +10,9 @@ interface FulfillmentSuppliesTabProps {
|
||||
defaultSubTab?: string;
|
||||
}
|
||||
|
||||
export function FulfillmentSuppliesTab({ defaultSubTab }: FulfillmentSuppliesTabProps) {
|
||||
export function FulfillmentSuppliesTab({
|
||||
defaultSubTab,
|
||||
}: FulfillmentSuppliesTabProps) {
|
||||
const [activeSubTab, setActiveSubTab] = useState("goods");
|
||||
|
||||
// Устанавливаем активную подвкладку при получении defaultSubTab
|
||||
@ -28,24 +30,25 @@ export function FulfillmentSuppliesTab({ defaultSubTab }: FulfillmentSuppliesTab
|
||||
className="w-full h-full flex flex-col overflow-hidden"
|
||||
>
|
||||
{/* Подвкладки для ФФ */}
|
||||
<TabsList className="grid grid-cols-3 bg-white/5 backdrop-blur border-white/10 mb-4 w-fit">
|
||||
<TabsList className="grid grid-cols-3 bg-white/5 backdrop-blur border-white/10 mb-2 w-fit text-sm">
|
||||
<TabsTrigger
|
||||
value="goods"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-3 sm:px-4"
|
||||
>
|
||||
Товар
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="supplies"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-3 sm:px-4"
|
||||
>
|
||||
Расходники
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="returns"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-3 sm:px-4"
|
||||
>
|
||||
Возвраты с ПВЗ
|
||||
<span className="hidden sm:inline">Возвраты с ПВЗ</span>
|
||||
<span className="sm:hidden">Возвраты</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
|
||||
@ -15,8 +15,6 @@ import {
|
||||
DollarSign,
|
||||
Wrench,
|
||||
Package2,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
|
||||
interface SupplyOrderItem {
|
||||
@ -214,7 +212,7 @@ export function RealSupplyOrdersTab() {
|
||||
Пока нет заказов расходников
|
||||
</h3>
|
||||
<p className="text-white/60">
|
||||
Создайте первый заказ расходников через кнопку "Создать поставку"
|
||||
Создайте первый заказ расходников через кнопку "Создать поставку"
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
@ -257,16 +255,9 @@ export function RealSupplyOrdersTab() {
|
||||
onClick={() => toggleOrderExpansion(order.id)}
|
||||
>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{isOrderExpanded ? (
|
||||
<ChevronDown className="h-4 w-4 text-white/60" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 text-white/60" />
|
||||
)}
|
||||
<span className="text-white font-medium">
|
||||
{order.id.slice(-8)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="space-y-1">
|
||||
|
||||
@ -2,13 +2,10 @@
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { StatsCard } from "../ui/stats-card";
|
||||
import { StatsGrid } from "../ui/stats-grid";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Calendar,
|
||||
Package,
|
||||
MapPin,
|
||||
@ -481,23 +478,12 @@ export function OzonSuppliesTab() {
|
||||
const isRouteExpanded = expandedRoutes.has(route.id);
|
||||
return (
|
||||
<React.Fragment key={route.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-cyan-500/10">
|
||||
<td className="p-4 pl-12">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleRouteExpansion(route.id)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
<tr
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-cyan-500/10 cursor-pointer"
|
||||
onClick={() => toggleRouteExpansion(route.id)}
|
||||
>
|
||||
{isRouteExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<MapPin className="h-4 w-4 text-cyan-400" />
|
||||
<span className="text-white font-medium">
|
||||
Маршрут
|
||||
@ -584,25 +570,14 @@ export function OzonSuppliesTab() {
|
||||
expandedWarehouses.has(warehouse.id);
|
||||
return (
|
||||
<React.Fragment key={warehouse.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-indigo-500/10">
|
||||
<td className="p-4 pl-20">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
<tr
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-indigo-500/10 cursor-pointer"
|
||||
onClick={() =>
|
||||
toggleWarehouseExpansion(
|
||||
warehouse.id
|
||||
)
|
||||
toggleWarehouseExpansion(warehouse.id)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isWarehouseExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Truck className="h-4 w-4 text-indigo-400" />
|
||||
<span className="text-white font-medium">
|
||||
Склад Ozon
|
||||
@ -675,7 +650,7 @@ export function OzonSuppliesTab() {
|
||||
key={product.id}
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-teal-500/10"
|
||||
>
|
||||
<td className="p-4 pl-28">
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Package className="h-4 w-4 text-teal-400" />
|
||||
<span className="text-white font-medium">
|
||||
|
||||
@ -2,13 +2,10 @@
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { StatsCard } from "../ui/stats-card";
|
||||
import { StatsGrid } from "../ui/stats-grid";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Calendar,
|
||||
Package,
|
||||
MapPin,
|
||||
@ -481,23 +478,12 @@ export function WildberriesSuppliesTab() {
|
||||
const isRouteExpanded = expandedRoutes.has(route.id);
|
||||
return (
|
||||
<React.Fragment key={route.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10">
|
||||
<td className="p-4 pl-12">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleRouteExpansion(route.id)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
<tr
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10 cursor-pointer"
|
||||
onClick={() => toggleRouteExpansion(route.id)}
|
||||
>
|
||||
{isRouteExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<MapPin className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-white font-medium">
|
||||
Маршрут
|
||||
@ -584,25 +570,14 @@ export function WildberriesSuppliesTab() {
|
||||
expandedWarehouses.has(warehouse.id);
|
||||
return (
|
||||
<React.Fragment key={warehouse.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-green-500/10">
|
||||
<td className="p-4 pl-20">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
<tr
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-green-500/10 cursor-pointer"
|
||||
onClick={() =>
|
||||
toggleWarehouseExpansion(
|
||||
warehouse.id
|
||||
)
|
||||
toggleWarehouseExpansion(warehouse.id)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isWarehouseExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Truck className="h-4 w-4 text-green-400" />
|
||||
<span className="text-white font-medium">
|
||||
Склад WB
|
||||
@ -675,7 +650,7 @@ export function WildberriesSuppliesTab() {
|
||||
key={product.id}
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-yellow-500/10"
|
||||
>
|
||||
<td className="p-4 pl-28">
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Package className="h-4 w-4 text-yellow-400" />
|
||||
<span className="text-white font-medium">
|
||||
|
||||
@ -23,9 +23,9 @@ export function SuppliesDashboard() {
|
||||
|
||||
// Автоматически открываем нужную вкладку при загрузке
|
||||
useEffect(() => {
|
||||
const tab = searchParams.get('tab');
|
||||
if (tab === 'consumables') {
|
||||
setActiveTab('fulfillment'); // Устанавливаем основную вкладку "Поставки на ФФ"
|
||||
const tab = searchParams.get("tab");
|
||||
if (tab === "consumables") {
|
||||
setActiveTab("fulfillment"); // Устанавливаем основную вкладку "Поставки на ФФ"
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
@ -33,7 +33,7 @@ export function SuppliesDashboard() {
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main
|
||||
className={`flex-1 ${getSidebarMargin()} px-4 py-4 overflow-hidden transition-all duration-300`}
|
||||
className={`flex-1 ${getSidebarMargin()} px-2 py-2 overflow-hidden transition-all duration-300`}
|
||||
>
|
||||
<div className="h-full">
|
||||
{/* Главные вкладки с кнопкой создания */}
|
||||
@ -42,28 +42,34 @@ export function SuppliesDashboard() {
|
||||
onValueChange={setActiveTab}
|
||||
className="w-full h-full flex flex-col"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<TabsList className="grid grid-cols-2 bg-white/10 backdrop-blur border-white/20 w-fit">
|
||||
<div className="flex items-center justify-between mb-1 flex-wrap gap-2">
|
||||
<TabsList className="grid grid-cols-2 bg-white/10 backdrop-blur border-white/20 w-fit text-sm">
|
||||
<TabsTrigger
|
||||
value="fulfillment"
|
||||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white/60 px-8"
|
||||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white/60 px-3 sm:px-6"
|
||||
>
|
||||
Поставки на ФФ
|
||||
<span className="hidden sm:inline">Поставки на ФФ</span>
|
||||
<span className="sm:hidden">ФФ</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="marketplace"
|
||||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white/60 px-8"
|
||||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white/60 px-3 sm:px-6"
|
||||
>
|
||||
Поставки на Маркетплейсы
|
||||
<span className="hidden sm:inline">Поставки на Маркетплейсы</span>
|
||||
<span className="sm:hidden">МП</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать поставку
|
||||
<ChevronDown className="h-4 w-4 ml-2" />
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg"
|
||||
>
|
||||
<Plus className="h-3 w-3 mr-1" />
|
||||
<span className="hidden sm:inline">Создать поставку</span>
|
||||
<span className="sm:hidden">Создать</span>
|
||||
<ChevronDown className="h-3 w-3 ml-1" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
@ -92,11 +98,23 @@ export function SuppliesDashboard() {
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<TabsContent value="fulfillment" className="mt-0 flex-1 overflow-hidden">
|
||||
<FulfillmentSuppliesTab defaultSubTab={searchParams.get('tab') === 'consumables' ? 'supplies' : undefined} />
|
||||
<TabsContent
|
||||
value="fulfillment"
|
||||
className="mt-0 flex-1 overflow-hidden"
|
||||
>
|
||||
<FulfillmentSuppliesTab
|
||||
defaultSubTab={
|
||||
searchParams.get("tab") === "consumables"
|
||||
? "supplies"
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="marketplace" className="mt-0 flex-1 overflow-hidden">
|
||||
<TabsContent
|
||||
value="marketplace"
|
||||
className="mt-0 flex-1 overflow-hidden"
|
||||
>
|
||||
<MarketplaceSuppliesTab />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
@ -32,27 +32,29 @@ export function StatsCard({
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"bg-white/10 backdrop-blur border-white/20 p-4 hover:bg-white/15 transition-all duration-300 hover:scale-105 hover:shadow-lg",
|
||||
"bg-white/10 backdrop-blur border-white/20 p-2 sm:p-3 hover:bg-white/15 transition-all duration-300",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center space-x-3 flex-1">
|
||||
<div className={cn("p-2.5 rounded-xl", iconBg)}>
|
||||
<Icon className={cn("h-5 w-5", iconColor)} />
|
||||
<div className="flex items-center space-x-2 flex-1">
|
||||
<div className={cn("p-1.5 sm:p-2 rounded-lg", iconBg)}>
|
||||
<Icon className={cn("h-3 w-3 sm:h-4 sm:w-4", iconColor)} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white/60 text-xs font-medium truncate">
|
||||
{title}
|
||||
</p>
|
||||
<p
|
||||
className="text-xl font-bold text-white mt-1 truncate"
|
||||
className="text-sm sm:text-lg font-bold text-white mt-0.5 truncate"
|
||||
title={value.toString()}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
{subtitle && (
|
||||
<p className="text-white/40 text-xs mt-1 truncate">{subtitle}</p>
|
||||
<p className="text-white/40 text-xs mt-0.5 truncate hidden sm:block">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -60,7 +62,7 @@ export function StatsCard({
|
||||
{trend && (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium",
|
||||
"flex items-center space-x-1 px-1.5 py-0.5 rounded-full text-xs font-medium hidden sm:flex",
|
||||
trend.isPositive
|
||||
? "bg-green-500/20 text-green-300"
|
||||
: "bg-red-500/20 text-red-300"
|
||||
|
||||
@ -15,13 +15,13 @@ export function StatsGrid({
|
||||
className,
|
||||
}: StatsGridProps) {
|
||||
const gridCols = {
|
||||
2: "grid-cols-1 md:grid-cols-2",
|
||||
3: "grid-cols-1 md:grid-cols-3",
|
||||
4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
|
||||
2: "grid-cols-2",
|
||||
3: "grid-cols-1 sm:grid-cols-3",
|
||||
4: "grid-cols-2 lg:grid-cols-4",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("grid gap-4 mb-6", gridCols[columns], className)}>
|
||||
<div className={cn("grid gap-2 mb-4", gridCols[columns], className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user