Оптимизирована производительность React компонентов с помощью мемоизации

КРИТИЧНЫЕ КОМПОНЕНТЫ ОПТИМИЗИРОВАНЫ:
• AdminDashboard (346 kB) - добавлены React.memo, useCallback, useMemo
• SellerStatisticsDashboard (329 kB) - мемоизация кэша и callback функций
• CreateSupplyPage (276 kB) - оптимизированы вычисления и обработчики
• EmployeesDashboard (268 kB) - мемоизация списков и функций
• SalesTab + AdvertisingTab - React.memo обертка

ТЕХНИЧЕСКИЕ УЛУЧШЕНИЯ:
✅ React.memo() для предотвращения лишних рендеров
✅ useMemo() для тяжелых вычислений
✅ useCallback() для стабильных ссылок на функции
✅ Мемоизация фильтрации и сортировки списков
✅ Оптимизация пропсов в компонентах-контейнерах

РЕЗУЛЬТАТЫ:
• Все компоненты успешно компилируются
• Линтер проходит без критических ошибок
• Сохранена вся функциональность
• Улучшена производительность рендеринга
• Снижена нагрузка на React дерево

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/economics/economics-page-wrapper.tsx

@@ -1,13 +1,14 @@
-"use client";
+'use client'
 
-import { useAuth } from "@/hooks/useAuth";
-import { SellerEconomicsPage } from "./seller-economics-page";
-import { FulfillmentEconomicsPage } from "./fulfillment-economics-page";
-import { WholesaleEconomicsPage } from "./wholesale-economics-page";
-import { LogistEconomicsPage } from "./logist-economics-page";
+import { useAuth } from '@/hooks/useAuth'
+
+import { FulfillmentEconomicsPage } from './fulfillment-economics-page'
+import { LogistEconomicsPage } from './logist-economics-page'
+import { SellerEconomicsPage } from './seller-economics-page'
+import { WholesaleEconomicsPage } from './wholesale-economics-page'
 
 export function EconomicsPageWrapper() {
-  const { user } = useAuth();
+  const { user } = useAuth()
 
   // Проверка доступа - только авторизованные пользователи с организацией
   if (!user?.organization?.type) {
@@ -15,26 +16,24 @@ export function EconomicsPageWrapper() {
       <div className="min-h-screen bg-gradient-smooth flex items-center justify-center">
         <div className="text-white">Ошибка: тип организации не определен</div>
       </div>
-    );
+    )
   }
 
   // Роутинг по типу организации
   switch (user.organization.type) {
-    case "SELLER":
-      return <SellerEconomicsPage />;
-    case "FULFILLMENT":
-      return <FulfillmentEconomicsPage />;
-    case "WHOLESALE":
-      return <WholesaleEconomicsPage />;
-    case "LOGIST":
-      return <LogistEconomicsPage />;
+    case 'SELLER':
+      return <SellerEconomicsPage />
+    case 'FULFILLMENT':
+      return <FulfillmentEconomicsPage />
+    case 'WHOLESALE':
+      return <WholesaleEconomicsPage />
+    case 'LOGIST':
+      return <LogistEconomicsPage />
     default:
       return (
         <div className="min-h-screen bg-gradient-smooth flex items-center justify-center">
-          <div className="text-white">
-            Неподдерживаемый тип кабинета: {user.organization.type}
-          </div>
+          <div className="text-white">Неподдерживаемый тип кабинета: {user.organization.type}</div>
         </div>
-      );
+      )
   }
 }

src/components/economics/fulfillment-economics-page.tsx

@@ -1,59 +1,50 @@
-"use client";
+'use client'
 
-import { useAuth } from "@/hooks/useAuth";
-import { Sidebar } from "@/components/dashboard/sidebar";
-import { useSidebar } from "@/hooks/useSidebar";
-import { Card } from "@/components/ui/card";
-import { TrendingUp } from "lucide-react";
+import { TrendingUp } from 'lucide-react'
+
+import { Sidebar } from '@/components/dashboard/sidebar'
+import { Card } from '@/components/ui/card'
+import { useAuth } from '@/hooks/useAuth'
+import { useSidebar } from '@/hooks/useSidebar'
 
 export function FulfillmentEconomicsPage() {
-  const { user } = useAuth();
-  const { getSidebarMargin } = useSidebar();
+  const { user } = useAuth()
+  const { getSidebarMargin } = useSidebar()
 
   const getOrganizationName = () => {
     if (user?.organization?.name) {
-      return user.organization.name;
+      return user.organization.name
     }
     if (user?.organization?.fullName) {
-      return user.organization.fullName;
+      return user.organization.fullName
     }
-    return "Вашей организации";
-  };
+    return 'Вашей организации'
+  }
 
   return (
     <div className="h-screen flex overflow-hidden">
       <Sidebar />
-      <main
-        className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}
-      >
+      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
         <div className="p-8">
           {/* Заголовок страницы */}
           <div className="mb-8">
-            <h1 className="text-3xl font-bold text-white mb-2">
-              Экономика фулфилмента
-            </h1>
-            <p className="text-white/60">
-              Финансовые показатели {getOrganizationName()}
-            </p>
+            <h1 className="text-3xl font-bold text-white mb-2">Экономика фулфилмента</h1>
+            <p className="text-white/60">Финансовые показатели {getOrganizationName()}</p>
           </div>
 
           {/* Карточка-заглушка */}
           <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
             <div className="flex items-center space-x-3 mb-4">
               <TrendingUp className="h-8 w-8 text-purple-400" />
-              <h3 className="text-xl font-semibold text-white">
-                Экономические показатели
-              </h3>
+              <h3 className="text-xl font-semibold text-white">Экономические показатели</h3>
             </div>
             <div className="space-y-2">
-              <p className="text-white font-medium">
-                Раздел находится в разработке
-              </p>
+              <p className="text-white font-medium">Раздел находится в разработке</p>
               <p className="text-white/60 text-sm">Будет добавлен позже</p>
             </div>
           </Card>
         </div>
       </main>
     </div>
-  );
+  )
 }

src/components/economics/logist-economics-page.tsx

@@ -1,59 +1,50 @@
-"use client";
+'use client'
 
-import { useAuth } from "@/hooks/useAuth";
-import { Sidebar } from "@/components/dashboard/sidebar";
-import { useSidebar } from "@/hooks/useSidebar";
-import { Card } from "@/components/ui/card";
-import { Calculator } from "lucide-react";
+import { Calculator } from 'lucide-react'
+
+import { Sidebar } from '@/components/dashboard/sidebar'
+import { Card } from '@/components/ui/card'
+import { useAuth } from '@/hooks/useAuth'
+import { useSidebar } from '@/hooks/useSidebar'
 
 export function LogistEconomicsPage() {
-  const { user } = useAuth();
-  const { getSidebarMargin } = useSidebar();
+  const { user } = useAuth()
+  const { getSidebarMargin } = useSidebar()
 
   const getOrganizationName = () => {
     if (user?.organization?.name) {
-      return user.organization.name;
+      return user.organization.name
     }
     if (user?.organization?.fullName) {
-      return user.organization.fullName;
+      return user.organization.fullName
     }
-    return "Вашей организации";
-  };
+    return 'Вашей организации'
+  }
 
   return (
     <div className="h-screen flex overflow-hidden">
       <Sidebar />
-      <main
-        className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}
-      >
+      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
         <div className="p-8">
           {/* Заголовок страницы */}
           <div className="mb-8">
-            <h1 className="text-3xl font-bold text-white mb-2">
-              Экономика логистики
-            </h1>
-            <p className="text-white/60">
-              Финансовые показатели {getOrganizationName()}
-            </p>
+            <h1 className="text-3xl font-bold text-white mb-2">Экономика логистики</h1>
+            <p className="text-white/60">Финансовые показатели {getOrganizationName()}</p>
           </div>
 
           {/* Карточка-заглушка */}
           <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
             <div className="flex items-center space-x-3 mb-4">
               <Calculator className="h-8 w-8 text-orange-400" />
-              <h3 className="text-xl font-semibold text-white">
-                Экономические показатели
-              </h3>
+              <h3 className="text-xl font-semibold text-white">Экономические показатели</h3>
             </div>
             <div className="space-y-2">
-              <p className="text-white font-medium">
-                Раздел находится в разработке
-              </p>
+              <p className="text-white font-medium">Раздел находится в разработке</p>
               <p className="text-white/60 text-sm">Будет добавлен позже</p>
             </div>
           </Card>
         </div>
       </main>
     </div>
-  );
+  )
 }

src/components/economics/seller-economics-page.tsx

@@ -1,59 +1,50 @@
-"use client";
+'use client'
 
-import { useAuth } from "@/hooks/useAuth";
-import { Sidebar } from "@/components/dashboard/sidebar";
-import { useSidebar } from "@/hooks/useSidebar";
-import { Card } from "@/components/ui/card";
-import { DollarSign } from "lucide-react";
+import { DollarSign } from 'lucide-react'
+
+import { Sidebar } from '@/components/dashboard/sidebar'
+import { Card } from '@/components/ui/card'
+import { useAuth } from '@/hooks/useAuth'
+import { useSidebar } from '@/hooks/useSidebar'
 
 export function SellerEconomicsPage() {
-  const { user } = useAuth();
-  const { getSidebarMargin } = useSidebar();
+  const { user } = useAuth()
+  const { getSidebarMargin } = useSidebar()
 
   const getOrganizationName = () => {
     if (user?.organization?.name) {
-      return user.organization.name;
+      return user.organization.name
     }
     if (user?.organization?.fullName) {
-      return user.organization.fullName;
+      return user.organization.fullName
     }
-    return "Вашей организации";
-  };
+    return 'Вашей организации'
+  }
 
   return (
     <div className="h-screen flex overflow-hidden">
       <Sidebar />
-      <main
-        className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}
-      >
+      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
         <div className="p-8">
           {/* Заголовок страницы */}
           <div className="mb-8">
-            <h1 className="text-3xl font-bold text-white mb-2">
-              Экономика селлера
-            </h1>
-            <p className="text-white/60">
-              Финансовые показатели {getOrganizationName()}
-            </p>
+            <h1 className="text-3xl font-bold text-white mb-2">Экономика селлера</h1>
+            <p className="text-white/60">Финансовые показатели {getOrganizationName()}</p>
           </div>
 
           {/* Карточка-заглушка */}
           <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
             <div className="flex items-center space-x-3 mb-4">
               <DollarSign className="h-8 w-8 text-green-400" />
-              <h3 className="text-xl font-semibold text-white">
-                Экономические показатели
-              </h3>
+              <h3 className="text-xl font-semibold text-white">Экономические показатели</h3>
             </div>
             <div className="space-y-2">
-              <p className="text-white font-medium">
-                Раздел находится в разработке
-              </p>
+              <p className="text-white font-medium">Раздел находится в разработке</p>
               <p className="text-white/60 text-sm">Будет добавлен позже</p>
             </div>
           </Card>
         </div>
       </main>
     </div>
-  );
+  )
 }

src/components/economics/wholesale-economics-page.tsx

@@ -1,59 +1,50 @@
-"use client";
+'use client'
 
-import { useAuth } from "@/hooks/useAuth";
-import { Sidebar } from "@/components/dashboard/sidebar";
-import { useSidebar } from "@/hooks/useSidebar";
-import { Card } from "@/components/ui/card";
-import { BarChart3 } from "lucide-react";
+import { BarChart3 } from 'lucide-react'
+
+import { Sidebar } from '@/components/dashboard/sidebar'
+import { Card } from '@/components/ui/card'
+import { useAuth } from '@/hooks/useAuth'
+import { useSidebar } from '@/hooks/useSidebar'
 
 export function WholesaleEconomicsPage() {
-  const { user } = useAuth();
-  const { getSidebarMargin } = useSidebar();
+  const { user } = useAuth()
+  const { getSidebarMargin } = useSidebar()
 
   const getOrganizationName = () => {
     if (user?.organization?.name) {
-      return user.organization.name;
+      return user.organization.name
     }
     if (user?.organization?.fullName) {
-      return user.organization.fullName;
+      return user.organization.fullName
     }
-    return "Вашей организации";
-  };
+    return 'Вашей организации'
+  }
 
   return (
     <div className="h-screen flex overflow-hidden">
       <Sidebar />
-      <main
-        className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}
-      >
+      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
         <div className="p-8">
           {/* Заголовок страницы */}
           <div className="mb-8">
-            <h1 className="text-3xl font-bold text-white mb-2">
-              Экономика поставщика
-            </h1>
-            <p className="text-white/60">
-              Финансовые показатели {getOrganizationName()}
-            </p>
+            <h1 className="text-3xl font-bold text-white mb-2">Экономика поставщика</h1>
+            <p className="text-white/60">Финансовые показатели {getOrganizationName()}</p>
           </div>
 
           {/* Карточка-заглушка */}
           <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
             <div className="flex items-center space-x-3 mb-4">
               <BarChart3 className="h-8 w-8 text-blue-400" />
-              <h3 className="text-xl font-semibold text-white">
-                Экономические показатели
-              </h3>
+              <h3 className="text-xl font-semibold text-white">Экономические показатели</h3>
             </div>
             <div className="space-y-2">
-              <p className="text-white font-medium">
-                Раздел находится в разработке
-              </p>
+              <p className="text-white font-medium">Раздел находится в разработке</p>
               <p className="text-white/60 text-sm">Будет добавлен позже</p>
             </div>
           </Card>
         </div>
       </main>
     </div>
-  );
+  )
 }