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

Добавлены ключевые метрики склада, умные рекомендации и быстрые действия в компонент FulfillmentStatisticsDashboard. Перенесены данные из FulfillmentWarehouse и улучшены стили для более наглядного отображения информации. Обновлены иконки и структура кода для повышения удобства использования.

Browse Source
This commit is contained in:
Veronika Smirnova
2025-07-22 16:42:40 +03:00
parent 1ede90cfa2
commit 0a790c538b
2 changed files with 280 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/components/fulfillment-statistics/fulfillment-statistics-dashboard.tsx
View File

@ -27,6 +27,9 @@ import {
DollarSign,
Users,
Truck,
Warehouse,
Eye,
EyeOff,
} from "lucide-react";
export function FulfillmentStatisticsDashboard() {
@ -38,6 +41,9 @@ export function FulfillmentStatisticsDashboard() {
marketplaces: true,
analytics: false,
performance: false,
warehouseMetrics: true,
smartRecommendations: true,
quickActions: true,
});
// Мок данные для статистики
@ -67,6 +73,13 @@ export function FulfillmentStatisticsDashboard() {
satisfactionTrend: 5,
};
// Данные склада (перенесено из fulfillment-warehouse)
const warehouseStats = {
efficiency: 94.5,
turnover: 2.3,
utilizationRate: 87,
};
const formatNumber = (num: number) => {
return num.toLocaleString("ru-RU");
};
@ -535,6 +548,135 @@ export function FulfillmentStatisticsDashboard() {
</Card>
)}
</div>
{/* Ключевые метрики склада (перенесено из fulfillment-warehouse) */}
<div>
<SectionHeader
title="Ключевые метрики склада"
section="warehouseMetrics"
color="text-blue-400"
/>
{expandedSections.warehouseMetrics && (
<Card className="bg-gradient-to-r from-slate-900/40 to-slate-800/40 border-slate-700/50">
<div className="p-6">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl border border-blue-400/20">
<Warehouse className="h-6 w-6 text-blue-400" />
</div>
<div className="grid grid-cols-2 gap-6">
<div className="flex items-center space-x-3">
<span className="text-sm text-slate-400 font-medium">Эффективность</span>
<Badge variant="secondary" className="bg-green-500/20 text-green-300 font-bold">
{warehouseStats.efficiency}%
</Badge>
</div>
<div className="flex items-center space-x-3">
<span className="text-sm text-slate-400 font-medium">Оборачиваемость</span>
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300 font-bold">
{warehouseStats.turnover}x
</Badge>
</div>
</div>
</div>
<div className="text-right">
<div className="text-sm text-slate-400 font-medium mb-1">Загрузка склада</div>
<div className="text-3xl font-bold text-white">{warehouseStats.utilizationRate}%</div>
</div>
</div>
</div>
</Card>
)}
</div>
{/* Умные рекомендации склада (перенесено из fulfillment-warehouse) */}
<div>
<SectionHeader
title="Умные рекомендации склада"
section="smartRecommendations"
color="text-green-400"
/>
{expandedSections.smartRecommendations && (
<Card className="glass-card p-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-3">
<div className="p-2 bg-gradient-to-r from-green-500/20 to-blue-500/20 rounded-xl">
<Zap className="h-5 w-5 text-green-400" />
</div>
<h3 className="text-lg font-semibold text-white">Рекомендации по складу</h3>
</div>
<Badge variant="secondary" className="bg-green-500/20 text-green-300">
AI-анализ
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="p-4 bg-white/5 rounded-xl border border-white/10">
<div className="flex items-center space-x-2 mb-2">
<Target className="h-4 w-4 text-yellow-400" />
<span className="text-sm font-medium text-yellow-400">Оптимизация</span>
</div>
<p className="text-xs text-white/70">
Рекомендуется увеличить запас расходников на 15% для покрытия пикового спроса
</p>
</div>
<div className="p-4 bg-white/5 rounded-xl border border-white/10">
<div className="flex items-center space-x-2 mb-2">
<Activity className="h-4 w-4 text-blue-400" />
<span className="text-sm font-medium text-blue-400">Прогноз</span>
</div>
<p className="text-xs text-white/70">
Ожидается рост возвратов на 12% в следующем месяце. Подготовьте дополнительные места
</p>
</div>
<div className="p-4 bg-white/5 rounded-xl border border-white/10">
<div className="flex items-center space-x-2 mb-2">
<BarChart3 className="h-4 w-4 text-purple-400" />
<span className="text-sm font-medium text-purple-400">Тренд</span>
</div>
<p className="text-xs text-white/70">
Эффективность обработки товаров выросла на 8% за последний месяц
</p>
</div>
</div>
</Card>
)}
</div>
{/* Быстрые действия (перенесено из fulfillment-warehouse) */}
<div>
<SectionHeader
title="Быстрые действия"
section="quickActions"
color="text-orange-400"
/>
{expandedSections.quickActions && (
<Card className="glass-card p-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-white">Управление складом</h3>
<div className="flex space-x-2">
<Button size="sm" variant="outline" className="border-white/20 text-white/70 hover:bg-white/10">
<Eye className="h-4 w-4 mr-2" />
Обзор
</Button>
<Button size="sm" variant="outline" className="border-white/20 text-white/70 hover:bg-white/10">
<Activity className="h-4 w-4 mr-2" />
Отчеты
</Button>
</div>
</div>
<div className="text-center py-8">
<Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
<p className="text-white/60 text-sm">
Основная функциональность склада будет добавлена на следующем этапе
</p>
</div>
</Card>
)}
</div>
</div>
</div>
</main>

380
src/components/fulfillment-warehouse/fulfillment-warehouse-dashboard.tsx
View File

@ -153,16 +153,17 @@ export function FulfillmentWarehouseDashboard() {
<Sidebar />
<main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-y-auto transition-all duration-300`}>
<div className="w-full">
{/* Объединенный блок склада - ПЕРВЫЙ СВЕРХУ */}
<div className="mb-6">
<SectionHeader
title="Состояние склада"
section="warehouse"
badge={warehouseStats.currentProducts + warehouseStats.currentGoods + warehouseStats.currentFulfillmentSupplies + warehouseStats.currentSellerSupplies}
color="text-blue-400"
/>
{expandedSections.warehouse && (
<div className="grid grid-cols-6 gap-4">
{/* Блок состояния склада с shadcn/ui */}
<Card className="mb-6 bg-gradient-to-br from-slate-900/50 to-slate-800/30 border-slate-700/50">
<div className="p-6">
<SectionHeader
title="Состояние склада"
section="warehouse"
badge={warehouseStats.currentProducts + warehouseStats.currentGoods + warehouseStats.currentFulfillmentSupplies + warehouseStats.currentSellerSupplies}
color="text-blue-400"
/>
{expandedSections.warehouse && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mt-4">
{/* Уникальный модуль "Продукты" */}
<div className="min-w-0 relative group">
<div className="bg-gradient-to-br from-blue-500/10 via-blue-400/5 to-cyan-500/10 backdrop-blur border border-blue-400/30 rounded-2xl p-4 hover:from-blue-500/20 hover:to-cyan-500/20 transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl hover:shadow-blue-500/20">
@ -273,267 +274,162 @@ export function FulfillmentWarehouseDashboard() {
</div>
</div>
{/* Оптимизированный модуль "Товары" */}
{/* Компактный модуль "Товары" - той же высоты что и "Продукты" */}
<div className="min-w-0 relative group">
<div className="bg-gradient-to-br from-slate-800/60 via-slate-700/40 to-slate-800/60 backdrop-blur-xl border border-slate-600/30 rounded-3xl p-6 hover:border-cyan-400/40 transition-all duration-500 hover:shadow-2xl hover:shadow-cyan-500/10 relative overflow-hidden">
<div className="bg-gradient-to-br from-cyan-500/10 via-teal-400/5 to-emerald-500/10 backdrop-blur border border-cyan-400/30 rounded-2xl p-4 hover:from-cyan-500/20 hover:to-emerald-500/20 transition-all duration-500 hover:shadow-2xl hover:shadow-cyan-500/20 relative overflow-hidden">
{/* Subtle animated background */}
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
{/* Header with improved spacing and typography */}
<div className="flex items-center justify-between mb-6">
<div className="flex items-center space-x-3">
{/* Заголовок с иконкой */}
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
<div className="relative">
<div className="p-3 bg-gradient-to-br from-cyan-500/20 to-cyan-600/20 rounded-2xl border border-cyan-400/20 shadow-lg shadow-cyan-500/10">
<Package className="h-5 w-5 text-cyan-300" />
<div className="p-2 bg-cyan-500/20 rounded-xl border border-cyan-400/30 relative">
<Package className="h-4 w-4 text-cyan-400" />
</div>
<div className="absolute -top-1 -right-1 w-3 h-3 bg-emerald-400 rounded-full border-2 border-slate-800"></div>
</div>
<div>
<h3 className="text-cyan-100 text-lg font-bold tracking-wide">Товары</h3>
<p className="text-slate-400 text-xs">Складская обработка</p>
</div>
<span className="text-cyan-100 text-sm font-semibold tracking-wide">ТОВАРЫ</span>
</div>
{/* Enhanced efficiency indicator */}
<div className="relative">
<div className="flex items-center space-x-2 bg-slate-700/50 rounded-full px-3 py-1.5 border border-slate-600/30">
<div className="w-2 h-2 bg-emerald-400 rounded-full"></div>
<span className="text-emerald-300 text-sm font-semibold">{goodsData.efficiency}%</span>
{/* Индикатор эффективности */}
<div className="relative w-8 h-8">
<svg className="w-8 h-8 transform -rotate-90" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="14" stroke="currentColor" strokeWidth="2" fill="none" className="text-cyan-900/30" />
<circle
cx="16" cy="16" r="14"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeDasharray={`${goodsData.efficiency * 0.88} 88`}
className="text-cyan-400 transition-all duration-1000"
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-[8px] font-bold text-cyan-300">{goodsData.efficiency}%</span>
</div>
</div>
</div>
{/* Main value with improved typography */}
<div className="mb-6">
<div className="flex items-end space-x-3">
<span className="text-4xl font-black text-white tracking-tight leading-none">
{/* Основное значение */}
<div className="mb-3">
<div className="flex items-baseline space-x-2">
<span className="text-2xl font-black text-white tracking-tight">
{formatNumber(warehouseStats.currentGoods)}
</span>
<div className="pb-1">
<span className="text-slate-400 text-sm font-medium">единиц</span>
</div>
</div>
<div className="mt-1">
<span className="text-slate-400 text-sm">Всего в процессе</span>
</div>
</div>
{/* Enhanced status cards */}
<div className="grid grid-cols-2 gap-4 mb-6">
{/* Delivered status */}
<div className="bg-gradient-to-br from-emerald-500/10 to-green-500/10 border border-emerald-400/20 rounded-2xl p-4 hover:from-emerald-500/15 hover:to-green-500/15 transition-all duration-300">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-emerald-400 rounded-full"></div>
<span className="text-emerald-300 text-xs font-semibold uppercase tracking-wide">Поставлено</span>
</div>
<div className="text-emerald-400/60 text-xs">
{((goodsData.processing / (goodsData.processing + goodsData.rejected)) * 100).toFixed(1)}%
</div>
</div>
<div className="text-emerald-100 text-xl font-bold">
{formatNumber(goodsData.processing)}
</div>
</div>
{/* Shipped status */}
<div className="bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-400/20 rounded-2xl p-4 hover:from-blue-500/15 hover:to-indigo-500/15 transition-all duration-300">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
<span className="text-blue-300 text-xs font-semibold uppercase tracking-wide">Отправлено</span>
</div>
<div className="text-blue-400/60 text-xs">
{((goodsData.rejected / (goodsData.processing + goodsData.rejected)) * 100).toFixed(1)}%
</div>
</div>
<div className="text-blue-100 text-xl font-bold">
{formatNumber(goodsData.rejected)}
</div>
</div>
{/* В обработке с числовым значением */}
<div className="text-cyan-200/70 text-xs mb-2">
В обработке: <span className="text-white font-semibold">{formatNumber(goodsData.processing + goodsData.rejected)}</span>
</div>
{/* Processing summary */}
<div className="mb-4">
<div className="flex items-center justify-between mb-2">
<span className="text-slate-300 text-sm font-medium">В обработке</span>
<span className="text-white text-lg font-bold">
{formatNumber(goodsData.processing + goodsData.rejected)}
</span>
</div>
{/* Enhanced progress bar */}
<div className="relative h-2.5 bg-slate-700/50 rounded-full overflow-hidden border border-slate-600/30">
<div
className="absolute inset-0 bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-400 rounded-full transition-all duration-1000 ease-out"
style={{
width: `${(goodsData.processing / (goodsData.processing + goodsData.rejected)) * 100}%`
}}
>
<div className="absolute inset-0 bg-gradient-to-r from-white/20 via-transparent to-white/20 rounded-full"></div>
</div>
</div>
{/* Progress labels */}
<div className="flex justify-between mt-2">
<span className="text-emerald-300 text-xs font-medium">
{formatNumber(goodsData.processing)} поставлено
</span>
<span className="text-blue-300 text-xs font-medium">
{formatNumber(goodsData.rejected)} отправлено
</span>
</div>
{/* Прогресс-бар */}
<div className="relative h-1.5 bg-cyan-900/30 rounded-full overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-emerald-400 rounded-full" style={{
width: `${(goodsData.processing / (goodsData.processing + goodsData.rejected)) * 100}%`
}}></div>
</div>
<div className="flex justify-between text-[10px] text-cyan-300/60 mt-1">
<span>Поставлено: {((goodsData.processing / (goodsData.processing + goodsData.rejected)) * 100).toFixed(0)}%</span>
<span>Отправлено: {((goodsData.rejected / (goodsData.processing + goodsData.rejected)) * 100).toFixed(0)}%</span>
</div>
{/* Hover effect overlay */}
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-emerald-500/5 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
{/* Декоративные элементы */}
<div className="absolute top-1 left-1 w-8 h-8 bg-gradient-to-br from-cyan-400/10 to-transparent rounded-full"></div>
<div className="absolute bottom-1 right-1 w-6 h-6 bg-gradient-to-tl from-emerald-400/10 to-transparent rounded-full"></div>
</div>
</div>
<StatsCard
title="Брак"
value={formatNumber(warehouseStats.currentDefects)}
icon={AlertTriangle}
iconColor="text-red-400"
iconBg="bg-red-500/20"
trend={{ value: Math.abs(warehouseStats.defectsTrend), isPositive: warehouseStats.defectsTrend < 0 }}
subtitle="Требует утилизации"
className="min-w-0"
/>
<StatsCard
title="Возвраты с ПВЗ"
value={formatNumber(warehouseStats.currentReturns)}
icon={RotateCcw}
iconColor="text-yellow-400"
iconBg="bg-yellow-500/20"
trend={{ value: warehouseStats.returnsTrend, isPositive: false }}
subtitle="К обработке"
className="min-w-0"
/>
<StatsCard
title="Расходники ФФ"
value={formatNumber(warehouseStats.currentFulfillmentSupplies)}
icon={Wrench}
iconColor="text-purple-400"
iconBg="bg-purple-500/20"
subtitle="Упаковка, этикетки, пленка"
className="min-w-0"
/>
<StatsCard
title="Расходники селлеров"
value={formatNumber(warehouseStats.currentSellerSupplies)}
icon={Users}
iconColor="text-green-400"
iconBg="bg-green-500/20"
subtitle="Материалы клиентов"
className="min-w-0"
/>
</div>
)}
</div>
{/* Компактный заголовок с ключевыми метриками */}
<div className="mb-6 flex-shrink-0">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-4">
<div className="p-2 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl">
<Warehouse className="h-6 w-6 text-blue-400" />
</div>
<div>
<div className="flex items-center space-x-3">
<span className="text-sm text-white/60">Эффективность</span>
<span className="text-lg font-bold text-green-400">{warehouseStats.efficiency}%</span>
{/* Брак */}
<Card className="bg-gradient-to-br from-red-500/10 to-red-600/5 border-red-500/20 hover:border-red-400/30 transition-all duration-300">
<div className="p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
<div className="p-2 bg-red-500/20 rounded-xl">
<AlertTriangle className="h-4 w-4 text-red-400" />
</div>
<span className="text-red-100 text-sm font-semibold">Брак</span>
</div>
<Badge variant="secondary" className="bg-red-500/20 text-red-300 text-xs">
-{Math.abs(warehouseStats.defectsTrend)}%
</Badge>
</div>
<div className="text-2xl font-bold text-white mb-1">
{formatNumber(warehouseStats.currentDefects)}
</div>
<div className="text-red-200/60 text-xs">
Требует утилизации
</div>
</div>
<div className="flex items-center space-x-3">
<span className="text-sm text-white/60">Оборачиваемость</span>
<span className="text-lg font-bold text-blue-400">{warehouseStats.turnover}x</span>
</Card>
{/* Возвраты с ПВЗ */}
<Card className="bg-gradient-to-br from-yellow-500/10 to-yellow-600/5 border-yellow-500/20 hover:border-yellow-400/30 transition-all duration-300">
<div className="p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
<div className="p-2 bg-yellow-500/20 rounded-xl">
<RotateCcw className="h-4 w-4 text-yellow-400" />
</div>
<span className="text-yellow-100 text-sm font-semibold">Возвраты с ПВЗ</span>
</div>
<Badge variant="secondary" className="bg-yellow-500/20 text-yellow-300 text-xs">
+{warehouseStats.returnsTrend}%
</Badge>
</div>
<div className="text-2xl font-bold text-white mb-1">
{formatNumber(warehouseStats.currentReturns)}
</div>
<div className="text-yellow-200/60 text-xs">
К обработке
</div>
</div>
</Card>
{/* Расходники ФФ */}
<Card className="bg-gradient-to-br from-purple-500/10 to-purple-600/5 border-purple-500/20 hover:border-purple-400/30 transition-all duration-300">
<div className="p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
<div className="p-2 bg-purple-500/20 rounded-xl">
<Wrench className="h-4 w-4 text-purple-400" />
</div>
<span className="text-purple-100 text-sm font-semibold">Расходники ФФ</span>
</div>
</div>
<div className="text-2xl font-bold text-white mb-1">
{formatNumber(warehouseStats.currentFulfillmentSupplies)}
</div>
<div className="text-purple-200/60 text-xs">
Упаковка, этикетки, пленка
</div>
</div>
</Card>
{/* Расходники селлеров */}
<Card className="bg-gradient-to-br from-green-500/10 to-green-600/5 border-green-500/20 hover:border-green-400/30 transition-all duration-300">
<div className="p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
<div className="p-2 bg-green-500/20 rounded-xl">
<Users className="h-4 w-4 text-green-400" />
</div>
<span className="text-green-100 text-sm font-semibold">Расходники селлеров</span>
</div>
</div>
<div className="text-2xl font-bold text-white mb-1">
{formatNumber(warehouseStats.currentSellerSupplies)}
</div>
<div className="text-green-200/60 text-xs">
Материалы клиентов
</div>
</div>
</Card>
</div>
</div>
<div className="text-right">
<div className="text-sm text-white/60">Загрузка склада</div>
<div className="text-2xl font-bold text-white">{warehouseStats.utilizationRate}%</div>
</div>
)}
</div>
</div>
</Card>
{/* Нестандартные решения */}
<div className="mt-8 space-y-6">
{/* Интеллектуальные инсайты */}
<Card className="glass-card p-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-3">
<div className="p-2 bg-gradient-to-r from-green-500/20 to-blue-500/20 rounded-xl">
<Zap className="h-5 w-5 text-green-400" />
</div>
<h3 className="text-lg font-semibold text-white">Умные рекомендации</h3>
</div>
<Badge variant="secondary" className="bg-green-500/20 text-green-300">
AI-анализ
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="p-4 bg-white/5 rounded-xl border border-white/10">
<div className="flex items-center space-x-2 mb-2">
<Target className="h-4 w-4 text-yellow-400" />
<span className="text-sm font-medium text-yellow-400">Оптимизация</span>
</div>
<p className="text-xs text-white/70">
Рекомендуется увеличить запас расходников на 15% для покрытия пикового спроса
</p>
</div>
<div className="p-4 bg-white/5 rounded-xl border border-white/10">
<div className="flex items-center space-x-2 mb-2">
<Activity className="h-4 w-4 text-blue-400" />
<span className="text-sm font-medium text-blue-400">Прогноз</span>
</div>
<p className="text-xs text-white/70">
Ожидается рост возвратов на 12% в следующем месяце. Подготовьте дополнительные места
</p>
</div>
<div className="p-4 bg-white/5 rounded-xl border border-white/10">
<div className="flex items-center space-x-2 mb-2">
<BarChart3 className="h-4 w-4 text-purple-400" />
<span className="text-sm font-medium text-purple-400">Тренд</span>
</div>
<p className="text-xs text-white/70">
Эффективность обработки товаров выросла на 8% за последний месяц
</p>
</div>
</div>
</Card>
{/* Быстрые действия */}
<Card className="glass-card p-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-white">Быстрые действия</h3>
<div className="flex space-x-2">
<Button size="sm" variant="outline" className="border-white/20 text-white/70 hover:bg-white/10">
<Eye className="h-4 w-4 mr-2" />
Обзор
</Button>
<Button size="sm" variant="outline" className="border-white/20 text-white/70 hover:bg-white/10">
<Activity className="h-4 w-4 mr-2" />
Отчеты
</Button>
</div>
</div>
<div className="text-center py-8">
<Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
<p className="text-white/60 text-sm">
Основная функциональность склада будет добавлена на следующем этапе
</p>
</div>
</Card>
</div>
</div>
</main>
</div>