From 2d5514856cbd6b6159148ecbc7df8c3771b723a4 Mon Sep 17 00:00:00 2001
From: Veronika Smirnova <veronika.smirnova@example.com>
Date: Tue, 22 Jul 2025 15:51:16 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=BF=D1=82=D0=B8=D0=BC=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=20"=D0=A2=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D1=80=D1=8B"=20=D0=B2=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8?=
 =?UTF-8?q?=20=D1=83=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?=
 =?UTF-8?q?=20=D1=84=D1=83=D0=BB=D1=84=D0=B8=D0=BB=D0=BC=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B0:=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D1=8B=20?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8=D0=BB=D0=B8,=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B5?=
 =?UTF-8?q?=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B8=20?=
 =?UTF-8?q?=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B0=20=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0.=20?=
 =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=B8?=
 =?UTF-8?q?=D0=BD=D0=B4=D0=B8=D0=BA=D0=B0=D1=82=D0=BE=D1=80=D1=8B=20=D1=81?=
 =?UTF-8?q?=D1=82=D0=B0=D1=82=D1=83=D1=81=D0=B0=20=D0=B8=20=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8=20=D1=82=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B0=D1=80=D0=BE=D0=B2=20=D0=B4=D0=BB=D1=8F=20=D0=B1=D0=BE?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=B5=20=D0=BD=D0=B0=D0=B3=D0=BB=D1=8F=D0=B4=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B3=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85?=
 =?UTF-8?q?.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fulfillment-warehouse-dashboard.tsx       | 210 ++++++++----------
 1 file changed, 92 insertions(+), 118 deletions(-)

diff --git a/src/components/fulfillment-warehouse/fulfillment-warehouse-dashboard.tsx b/src/components/fulfillment-warehouse/fulfillment-warehouse-dashboard.tsx
index c15ac0e..f2174c8 100644
--- a/src/components/fulfillment-warehouse/fulfillment-warehouse-dashboard.tsx
+++ b/src/components/fulfillment-warehouse/fulfillment-warehouse-dashboard.tsx
@@ -273,147 +273,121 @@ export function FulfillmentWarehouseDashboard() {
                   </div>
                 </div>
 
-                {/* Уникальный модуль "Товары" */}
+                {/* Оптимизированный модуль "Товары" */}
                 <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">
                     
-                    {/* Анимированный фон */}
-                    <div className="absolute inset-0 opacity-10">
-                      <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>
-
-                    {/* Статус активности */}
-                    <div className="absolute -top-1 -left-1 flex items-center space-x-1">
-                      <div className="relative">
-                        <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">
+                    {/* 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="relative">
-                          <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 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 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>
+                          <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>
                       
-                      {/* Круговой прогресс эффективности */}
-                      <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>
+                      {/* 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>
                       </div>
                     </div>
 
-                    {/* Основное значение */}
-                    <div className="mb-3">
-                      <div className="flex items-baseline space-x-2">
-                        <span className="text-2xl font-black text-white tracking-tight">
+                    {/* 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">
                           {formatNumber(warehouseStats.currentGoods)}
                         </span>
-                        <div className="flex items-center space-x-1 bg-cyan-500/20 px-2 py-1 rounded-full">
-                          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-bounce"></div>
-                          <span className="text-cyan-400 text-xs font-bold">
-                            LIVE
-                          </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>
 
-                    {/* Дополнительные значения */}
-                    <div className="grid grid-cols-2 gap-2 mb-3">
-                      {/* Положительное значение */}
-                      <div className="bg-green-500/10 border border-green-400/30 rounded-lg p-2">
-                        <div className="flex items-center space-x-1 mb-1">
-                          <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
-                          <span className="text-green-400 text-[10px] font-semibold">ОБРАБОТКА</span>
-                        </div>
-                        <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>
+                    {/* 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-red-300">
-                            <div className="font-bold">-{goodsData.rejected}</div>
-                            <div className="opacity-70">Проблем</div>
-                          </div>
-                          <div className="text-cyan-300">
-                            <div className="font-bold">{goodsData.efficiency}%</div>
-                            <div className="opacity-70">Успех</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>
 
-                    {/* Декоративные частицы */}
-                    <div className="absolute top-2 right-2 w-1 h-1 bg-cyan-400 rounded-full animate-ping"></div>
-                    <div className="absolute bottom-3 left-3 w-1 h-1 bg-emerald-400 rounded-full animate-ping" style={{animationDelay: '1s'}}></div>
-                    <div className="absolute top-1/2 left-1 w-1 h-1 bg-teal-400 rounded-full animate-ping" style={{animationDelay: '2s'}}></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>
+
+                    {/* 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>