Оптимизирован компонент "Товары" в панели управления фулфилмента: улучшены стили, добавлены новые анимации и улучшена типографика. Обновлены индикаторы статуса и обработки товаров для более наглядного отображения данных.
This commit is contained in:
Veronika Smirnova
@ -273,147 +273,121 @@ export function FulfillmentWarehouseDashboard() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Уникальный модуль "Товары" */}
|
{/* Оптимизированный модуль "Товары" */}
|
||||||
<div className="min-w-0 relative group">
|
<div className="min-w-0 relative group">
|
||||||
<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-700 hover:scale-[1.03] hover:shadow-2xl hover:shadow-cyan-500/20 relative overflow-hidden">
|
<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">
|
||||||
|
|
||||||
{/* Анимированный фон */}
|
{/* Subtle animated background */}
|
||||||
<div className="absolute inset-0 opacity-10">
|
<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>
|
||||||
<div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent transform transition-transform duration-2000 ${
|
|
||||||
goodsData.pulse % 2 === 0 ? 'translate-x-full' : '-translate-x-full'
|
|
||||||
}`}></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Статус активности */}
|
{/* Header with improved spacing and typography */}
|
||||||
<div className="absolute -top-1 -left-1 flex items-center space-x-1">
|
<div className="flex items-center justify-between mb-6">
|
||||||
<div className="relative">
|
<div className="flex items-center space-x-3">
|
||||||
<div className="w-4 h-4 bg-cyan-500 rounded-full animate-spin shadow-lg shadow-cyan-500/50" style={{
|
|
||||||
animation: 'spin 2s linear infinite'
|
|
||||||
}}></div>
|
|
||||||
<div className="absolute inset-1 w-2 h-2 bg-white rounded-full"></div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-cyan-500/90 backdrop-blur text-white text-[9px] font-bold px-2 py-0.5 rounded-full">
|
|
||||||
ACTIVE
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Заголовок с двойной иконкой */}
|
|
||||||
<div className="flex items-center justify-between mb-3">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="p-2 bg-cyan-500/20 rounded-xl border border-cyan-400/30 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-4 w-4 text-cyan-400" />
|
<Package className="h-5 w-5 text-cyan-300" />
|
||||||
{/* Мини-индикатор обработки */}
|
|
||||||
<div className="absolute -bottom-1 -right-1 w-3 h-3 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center">
|
|
||||||
<div className="w-1 h-1 bg-white rounded-full animate-pulse"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<span className="text-cyan-100 text-sm font-semibold tracking-wide">ТОВАРЫ</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Круговой прогресс эффективности */}
|
{/* Enhanced efficiency indicator */}
|
||||||
<div className="relative w-8 h-8">
|
<div className="relative">
|
||||||
<svg className="w-8 h-8 transform -rotate-90" viewBox="0 0 32 32">
|
<div className="flex items-center space-x-2 bg-slate-700/50 rounded-full px-3 py-1.5 border border-slate-600/30">
|
||||||
<circle cx="16" cy="16" r="14" stroke="currentColor" strokeWidth="2" fill="none" className="text-cyan-900/30" />
|
<div className="w-2 h-2 bg-emerald-400 rounded-full"></div>
|
||||||
<circle
|
<span className="text-emerald-300 text-sm font-semibold">{goodsData.efficiency}%</span>
|
||||||
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Основное значение */}
|
{/* Main value with improved typography */}
|
||||||
<div className="mb-3">
|
<div className="mb-6">
|
||||||
<div className="flex items-baseline space-x-2">
|
<div className="flex items-end space-x-3">
|
||||||
<span className="text-2xl font-black text-white tracking-tight">
|
<span className="text-4xl font-black text-white tracking-tight leading-none">
|
||||||
{formatNumber(warehouseStats.currentGoods)}
|
{formatNumber(warehouseStats.currentGoods)}
|
||||||
</span>
|
</span>
|
||||||
<div className="flex items-center space-x-1 bg-cyan-500/20 px-2 py-1 rounded-full">
|
<div className="pb-1">
|
||||||
<div className="w-2 h-2 bg-cyan-400 rounded-full animate-bounce"></div>
|
<span className="text-slate-400 text-sm font-medium">единиц</span>
|
||||||
<span className="text-cyan-400 text-xs font-bold">
|
|
||||||
LIVE
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mt-1">
|
||||||
|
<span className="text-slate-400 text-sm">Всего в процессе</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Дополнительные значения */}
|
{/* Enhanced status cards */}
|
||||||
<div className="grid grid-cols-2 gap-2 mb-3">
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||||
{/* Положительное значение */}
|
{/* Delivered status */}
|
||||||
<div className="bg-green-500/10 border border-green-400/30 rounded-lg p-2">
|
<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 space-x-1 mb-1">
|
<div className="flex items-center justify-between mb-2">
|
||||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
<div className="flex items-center space-x-2">
|
||||||
<span className="text-green-400 text-[10px] font-semibold">ОБРАБОТКА</span>
|
<div className="w-2 h-2 bg-emerald-400 rounded-full"></div>
|
||||||
</div>
|
<span className="text-emerald-300 text-xs font-semibold uppercase tracking-wide">Поставлено</span>
|
||||||
<div className="text-green-300 text-sm font-bold">
|
|
||||||
+{formatNumber(goodsData.processing)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Отрицательное значение */}
|
|
||||||
<div className="bg-red-500/10 border border-red-400/30 rounded-lg p-2">
|
|
||||||
<div className="flex items-center space-x-1 mb-1">
|
|
||||||
<div className="w-2 h-2 bg-red-400 rounded-full animate-pulse"></div>
|
|
||||||
<span className="text-red-400 text-[10px] font-semibold">ОТКЛОНЕНО</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-red-300 text-sm font-bold">
|
|
||||||
-{formatNumber(goodsData.rejected)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Подпись */}
|
|
||||||
<div className="text-cyan-200/70 text-xs mb-2">
|
|
||||||
В обработке
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Волновой прогресс */}
|
|
||||||
<div className="relative h-2 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 className="absolute inset-0 opacity-50">
|
|
||||||
<div className={`h-full w-full bg-gradient-to-r from-transparent via-white/30 to-transparent transform transition-transform duration-2000 ${
|
|
||||||
goodsData.pulse % 3 === 0 ? 'translate-x-full' : goodsData.pulse % 3 === 1 ? 'translate-x-0' : '-translate-x-full'
|
|
||||||
}`}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Hover эффект с детальной информацией */}
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/20 to-emerald-500/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-white text-xs font-bold mb-1">ДЕТАЛИ</div>
|
|
||||||
<div className="flex space-x-4 text-[10px]">
|
|
||||||
<div className="text-green-300">
|
|
||||||
<div className="font-bold">+{goodsData.processing}</div>
|
|
||||||
<div className="opacity-70">Активных</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-red-300">
|
<div className="text-emerald-400/60 text-xs">
|
||||||
<div className="font-bold">-{goodsData.rejected}</div>
|
{((goodsData.processing / (goodsData.processing + goodsData.rejected)) * 100).toFixed(1)}%
|
||||||
<div className="opacity-70">Проблем</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-cyan-300">
|
|
||||||
<div className="font-bold">{goodsData.efficiency}%</div>
|
|
||||||
<div className="opacity-70">Успех</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Декоративные частицы */}
|
{/* Processing summary */}
|
||||||
<div className="absolute top-2 right-2 w-1 h-1 bg-cyan-400 rounded-full animate-ping"></div>
|
<div className="mb-4">
|
||||||
<div className="absolute bottom-3 left-3 w-1 h-1 bg-emerald-400 rounded-full animate-ping" style={{animationDelay: '1s'}}></div>
|
<div className="flex items-center justify-between mb-2">
|
||||||
<div className="absolute top-1/2 left-1 w-1 h-1 bg-teal-400 rounded-full animate-ping" style={{animationDelay: '2s'}}></div>
|
<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>
|
||||||
|
|
||||||
|
{/* 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user