diff --git a/package-lock.json b/package-lock.json
index 2567347..91bc00f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,7 @@
         "next-themes": "^0.4.6",
         "prisma": "^6.12.0",
         "react": "19.1.0",
+        "react-datepicker": "^8.4.0",
         "react-day-picker": "^9.8.0",
         "react-dom": "19.1.0",
         "react-imask": "^7.6.1",
@@ -1813,6 +1814,21 @@
         "@floating-ui/utils": "^0.2.10"
       }
     },
+    "node_modules/@floating-ui/react": {
+      "version": "0.27.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.13.tgz",
+      "integrity": "sha512-Qmj6t9TjgWAvbygNEu1hj4dbHI9CY0ziCMIJrmYoDIn9TUAH5lRmiIeZmRd4c6QEZkzdoH7jNnoNyoY1AIESiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.4",
+        "@floating-ui/utils": "^0.2.10",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
     "node_modules/@floating-ui/react-dom": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.4.tgz",
@@ -9855,6 +9871,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.4.0.tgz",
+      "integrity": "sha512-6nPDnj8vektWCIOy9ArS3avus9Ndsyz5XgFCJ7nBxXASSpBdSL6lG9jzNNmViPOAOPh6T5oJyGaXuMirBLECag==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.27.3",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-day-picker": {
       "version": "9.8.0",
       "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.8.0.tgz",
@@ -10834,6 +10865,12 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
diff --git a/package.json b/package.json
index b16f320..adc998e 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "next-themes": "^0.4.6",
     "prisma": "^6.12.0",
     "react": "19.1.0",
+    "react-datepicker": "^8.4.0",
     "react-day-picker": "^9.8.0",
     "react-dom": "19.1.0",
     "react-imask": "^7.6.1",
diff --git a/src/components/admin/ui-kit-section.tsx b/src/components/admin/ui-kit-section.tsx
index b16beb5..35e3c54 100644
--- a/src/components/admin/ui-kit-section.tsx
+++ b/src/components/admin/ui-kit-section.tsx
@@ -17,6 +17,7 @@ import { InteractiveDemo } from "./ui-kit/interactive-demo";
 import { BusinessDemo } from "./ui-kit/business-demo";
 import { TimesheetDemo } from "./ui-kit/timesheet-demo";
 import { FulfillmentWarehouseDemo } from "./ui-kit/fulfillment-warehouse-demo";
+import { SuppliesDemo } from "./ui-kit/supplies-demo";
 
 export function UIKitSection() {
   return (
@@ -126,6 +127,12 @@ export function UIKitSection() {
           >
             Склад фулфилмент
           </TabsTrigger>
+          <TabsTrigger
+            value="supplies"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
+            Поставки
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="buttons" className="space-y-6">
@@ -191,6 +198,10 @@ export function UIKitSection() {
         <TabsContent value="fulfillment-warehouse" className="space-y-6">
           <FulfillmentWarehouseDemo />
         </TabsContent>
+
+        <TabsContent value="supplies" className="space-y-6">
+          <SuppliesDemo />
+        </TabsContent>
       </Tabs>
     </div>
   );
diff --git a/src/components/admin/ui-kit/supplies-demo.tsx b/src/components/admin/ui-kit/supplies-demo.tsx
new file mode 100644
index 0000000..ce31326
--- /dev/null
+++ b/src/components/admin/ui-kit/supplies-demo.tsx
@@ -0,0 +1,634 @@
+"use client";
+
+import React, { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { 
+  ShoppingCart, 
+  Plus, 
+  Minus, 
+  Eye, 
+  Heart, 
+  Package,
+  Building2,
+  Calendar,
+  Users,
+  Search,
+  Star,
+  Truck
+} from "lucide-react";
+
+export function SuppliesDemo() {
+  const [selectedQuantity, setSelectedQuantity] = useState(1);
+  const [cartItems, setCartItems] = useState(3);
+  const [cartTotal, setCartTotal] = useState(15750);
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('ru-RU', {
+      style: 'currency',
+      currency: 'RUB',
+      minimumFractionDigits: 0
+    }).format(amount);
+  };
+
+  const mockProduct = {
+    id: "1",
+    name: "Футболка мужская базовая хлопок 100%",
+    brand: "BASIC",
+    price: 1299,
+    discount: 15,
+    quantity: 47,
+    color: "Черный",
+    size: "L",
+    mainImage: "/api/placeholder/300/300",
+    isNew: true,
+    isBestseller: false
+  };
+
+  const mockWholesaler = {
+    id: "w1",
+    name: "ТекстильПром ООО",
+    rating: 4.8,
+    reviewsCount: 1247,
+    location: "Москва",
+    specialization: "Текстиль и одежда",
+    verified: true
+  };
+
+  const discountedPrice = mockProduct.discount 
+    ? mockProduct.price * (1 - mockProduct.discount / 100)
+    : mockProduct.price;
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold text-white mb-4">Поставки - Компоненты</h2>
+        <p className="text-white/70 mb-6">
+          Демонстрация компонентов системы управления поставками
+        </p>
+      </div>
+
+      <Tabs defaultValue="product-cards" className="w-full">
+        <TabsList className="grid grid-cols-4 bg-white/5 backdrop-blur border-white/10 mb-6">
+          <TabsTrigger value="product-cards">Карточки товаров</TabsTrigger>
+          <TabsTrigger value="wholesaler-cards">Карточки оптовиков</TabsTrigger>
+          <TabsTrigger value="floating-cart">Плавающая корзина</TabsTrigger>
+          <TabsTrigger value="supply-types">Типы поставок</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="product-cards" className="space-y-6">
+          <div>
+            <h3 className="text-xl font-semibold text-white mb-4">Карточки товаров</h3>
+            <p className="text-white/60 mb-6">
+              Интерактивные карточки товаров с возможностью управления количеством
+            </p>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {/* Обычная карточка товара */}
+              <Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden group hover:bg-white/15 hover:border-white/30 transition-all duration-300 hover:scale-105 hover:shadow-2xl">
+                <div className="aspect-square relative bg-white/5 overflow-hidden">
+                  <div className="w-full h-full bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center">
+                    <Package className="h-16 w-16 text-white/40" />
+                  </div>
+                  
+                  {/* Количество в наличии */}
+                  <div className="absolute top-2 right-2">
+                    <Badge className={`${
+                      mockProduct.quantity > 50 
+                        ? 'bg-green-500/80' 
+                        : mockProduct.quantity > 10 
+                          ? 'bg-yellow-500/80' 
+                          : 'bg-red-500/80'
+                    } text-white border-0 backdrop-blur text-xs`}>
+                      {mockProduct.quantity}
+                    </Badge>
+                  </div>
+
+                  {/* Скидка */}
+                  {mockProduct.discount && (
+                    <div className="absolute top-2 left-2">
+                      <Badge className="bg-red-500/80 text-white border-0 backdrop-blur text-xs">
+                        -{mockProduct.discount}%
+                      </Badge>
+                    </div>
+                  )}
+
+                  {/* Overlay с кнопками */}
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                    <div className="flex space-x-2">
+                      <Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
+                        <Eye className="h-4 w-4" />
+                      </Button>
+                      <Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
+                        <Heart className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="p-3 space-y-3">
+                  {/* Заголовок и бренд */}
+                  <div>
+                    <div className="flex items-center justify-between mb-1">
+                      {mockProduct.brand && (
+                        <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
+                          {mockProduct.brand}
+                        </Badge>
+                      )}
+                      <div className="flex items-center space-x-1">
+                        {mockProduct.isNew && (
+                          <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                            NEW
+                          </Badge>
+                        )}
+                        {mockProduct.isBestseller && (
+                          <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
+                            HIT
+                          </Badge>
+                        )}
+                      </div>
+                    </div>
+                    <h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight">
+                      {mockProduct.name}
+                    </h3>
+                  </div>
+
+                  {/* Основная характеристика */}
+                  <div className="text-white/60 text-xs">
+                    {mockProduct.color && <span className="text-white">{mockProduct.color}</span>}
+                    {mockProduct.size && <span className="text-white ml-2">{mockProduct.size}</span>}
+                  </div>
+
+                  {/* Цена */}
+                  <div className="pt-2 border-t border-white/10">
+                    <div className="flex items-center space-x-2">
+                      <div className="text-white font-bold text-lg">
+                        {formatCurrency(discountedPrice)}
+                      </div>
+                      {mockProduct.discount && (
+                        <div className="text-white/40 text-sm line-through">
+                          {formatCurrency(mockProduct.price)}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Управление количеством */}
+                  <div className="flex items-center space-x-2">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSelectedQuantity(Math.max(0, selectedQuantity - 1))}
+                      disabled={selectedQuantity === 0}
+                      className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
+                    >
+                      <Minus className="h-3 w-3" />
+                    </Button>
+                    <Input
+                      type="text"
+                      value={selectedQuantity}
+                      onChange={(e) => {
+                        const value = e.target.value.replace(/[^0-9]/g, '');
+                        const numValue = parseInt(value) || 0;
+                        setSelectedQuantity(Math.min(mockProduct.quantity, numValue));
+                      }}
+                      className="h-8 w-12 text-center bg-white/10 border-white/20 text-white text-sm"
+                    />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSelectedQuantity(Math.min(mockProduct.quantity, selectedQuantity + 1))}
+                      disabled={selectedQuantity >= mockProduct.quantity}
+                      className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
+                    >
+                      <Plus className="h-3 w-3" />
+                    </Button>
+                    
+                    {selectedQuantity > 0 && (
+                      <Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
+                        <ShoppingCart className="h-3 w-3 mr-1" />
+                        {selectedQuantity}
+                      </Badge>
+                    )}
+                  </div>
+
+                  {/* Сумма для выбранного товара */}
+                  {selectedQuantity > 0 && (
+                    <div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-2">
+                      <div className="text-green-300 text-xs font-medium text-center">
+                        {formatCurrency(discountedPrice * selectedQuantity)}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </Card>
+
+              {/* Компактная карточка товара */}
+              <Card className="bg-white/10 backdrop-blur border-white/20 p-4 hover:bg-white/15 transition-colors">
+                <div className="flex items-center space-x-3">
+                  <div className="w-16 h-16 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded flex items-center justify-center">
+                    <Package className="h-8 w-8 text-white/40" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h4 className="text-white font-medium text-sm truncate">Товар компактно</h4>
+                    <p className="text-white/60 text-xs">Краткое описание</p>
+                    <div className="flex items-center justify-between mt-2">
+                      <span className="text-white font-bold text-sm">{formatCurrency(1599)}</span>
+                      <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                        В наличии
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
+              </Card>
+
+              {/* Карточка товара со статусом */}
+              <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
+                      Ожидается
+                    </Badge>
+                    <span className="text-white/60 text-xs">Арт: TB-001</span>
+                  </div>
+                  <h4 className="text-white font-medium text-sm">Товар с уведомлением</h4>
+                  <div className="text-white/60 text-xs">
+                    <p>Поступление: 15 марта</p>
+                    <p>Количество: ~200 шт</p>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-white font-bold">{formatCurrency(899)}</span>
+                    <Button size="sm" variant="outline" className="border-white/20 text-white text-xs">
+                      Уведомить
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="wholesaler-cards" className="space-y-6">
+          <div>
+            <h3 className="text-xl font-semibold text-white mb-4">Карточки оптовиков</h3>
+            <p className="text-white/60 mb-6">
+              Информационные карточки поставщиков и оптовиков
+            </p>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {/* Главная карточка оптовика */}
+              <Card className="bg-white/10 backdrop-blur border-white/20 p-6 hover:bg-white/15 hover:border-white/30 transition-all duration-300 hover:scale-105">
+                <div className="space-y-4">
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-center space-x-3">
+                      <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
+                        <Building2 className="h-6 w-6 text-white" />
+                      </div>
+                      <div>
+                        <h3 className="text-white font-semibold text-lg">
+                          {mockWholesaler.name}
+                        </h3>
+                        <p className="text-white/60 text-sm">
+                          {mockWholesaler.specialization}
+                        </p>
+                      </div>
+                    </div>
+                    {mockWholesaler.verified && (
+                      <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
+                        Верифицирован
+                      </Badge>
+                    )}
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-white/60 text-sm">Рейтинг:</span>
+                      <div className="flex items-center space-x-1">
+                        <div className="flex">
+                          {Array.from({ length: 5 }, (_, i) => (
+                            <Star 
+                              key={i} 
+                              className={`h-4 w-4 ${
+                                i < Math.floor(mockWholesaler.rating) 
+                                  ? 'text-yellow-400 fill-current' 
+                                  : 'text-gray-400'
+                              }`} 
+                            />
+                          ))}
+                        </div>
+                        <span className="text-white text-sm font-medium">
+                          {mockWholesaler.rating}
+                        </span>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center justify-between">
+                      <span className="text-white/60 text-sm">Отзывы:</span>
+                      <span className="text-white text-sm">
+                        {mockWholesaler.reviewsCount.toLocaleString('ru-RU')}
+                      </span>
+                    </div>
+                    
+                    <div className="flex items-center justify-between">
+                      <span className="text-white/60 text-sm">Местоположение:</span>
+                      <span className="text-white text-sm">{mockWholesaler.location}</span>
+                    </div>
+                  </div>
+
+                  <div className="flex space-x-2">
+                    <Button 
+                      size="sm" 
+                      className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
+                    >
+                      <Package className="h-4 w-4 mr-2" />
+                      Товары
+                    </Button>
+                    <Button 
+                      size="sm" 
+                      variant="outline" 
+                      className="border-white/20 text-white hover:bg-white/10"
+                    >
+                      <Eye className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+
+              {/* Компактная карточка поставщика */}
+              <Card className="bg-white/10 backdrop-blur border-white/20 p-4 hover:bg-white/15 transition-colors">
+                <div className="flex items-center space-x-3">
+                  <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center">
+                    <Truck className="h-5 w-5 text-white" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h4 className="text-white font-medium text-sm">Логистический партнер</h4>
+                    <p className="text-white/60 text-xs">Быстрая доставка</p>
+                    <div className="flex items-center mt-1">
+                      <div className="flex">
+                        {Array.from({ length: 5 }, (_, i) => (
+                          <Star key={i} className="h-3 w-3 text-yellow-400 fill-current" />
+                        ))}
+                      </div>
+                      <span className="text-white/60 text-xs ml-1">(4.9)</span>
+                    </div>
+                  </div>
+                </div>
+              </Card>
+
+              {/* Карточка нового поставщика */}
+              <Card className="bg-gradient-to-br from-blue-500/10 to-cyan-500/10 backdrop-blur border-blue-500/30 p-4">
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
+                      Новый партнер
+                    </Badge>
+                    <Users className="h-5 w-5 text-blue-400" />
+                  </div>
+                  <h4 className="text-white font-medium">ТехноТрейд ООО</h4>
+                  <p className="text-white/60 text-sm">
+                    Электроника и техника
+                  </p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-white/60 text-xs">Заявка на партнерство</span>
+                    <Button size="sm" variant="outline" className="border-blue-500/30 text-blue-300 text-xs">
+                      Рассмотреть
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="floating-cart" className="space-y-6">
+          <div>
+            <h3 className="text-xl font-semibold text-white mb-4">Плавающая корзина</h3>
+            <p className="text-white/60 mb-6">
+              Плавающий элемент для быстрого доступа к корзине
+            </p>
+            
+            <div className="space-y-6">
+              {/* Демонстрация плавающей корзины */}
+              <div className="relative bg-gray-900/50 border border-white/10 rounded-lg p-8 min-h-[300px]">
+                <p className="text-white/60 text-center">
+                  Область контента страницы
+                  <br />
+                  <span className="text-xs">Плавающая корзина появляется в правом нижнем углу</span>
+                </p>
+                
+                {/* Демо плавающей корзины */}
+                <div className="absolute bottom-4 right-4">
+                  <Button 
+                    size="lg"
+                    className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-2xl"
+                    onClick={() => {
+                      setCartItems(cartItems + 1);
+                      setCartTotal(cartTotal + 1299);
+                    }}
+                  >
+                    <ShoppingCart className="h-5 w-5 mr-2" />
+                    {cartItems} • {formatCurrency(cartTotal)}
+                  </Button>
+                </div>
+              </div>
+
+              {/* Различные варианты плавающих кнопок */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
+                  <h4 className="text-white font-medium mb-3">Стандартная корзина</h4>
+                  <Button 
+                    className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
+                  >
+                    <ShoppingCart className="h-4 w-4 mr-2" />
+                    3 • {formatCurrency(cartTotal)}
+                  </Button>
+                </Card>
+
+                <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
+                  <h4 className="text-white font-medium mb-3">Компактная</h4>
+                  <Button size="sm" className="w-full bg-gradient-to-r from-green-500 to-emerald-500 text-white">
+                    <ShoppingCart className="h-4 w-4 mr-1" />
+                    {formatCurrency(cartTotal)}
+                  </Button>
+                </Card>
+
+                <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
+                  <h4 className="text-white font-medium mb-3">С индикатором</h4>
+                  <div className="relative">
+                    <Button className="w-full bg-gradient-to-r from-orange-500 to-red-500 text-white">
+                      <ShoppingCart className="h-4 w-4 mr-2" />
+                      Корзина
+                    </Button>
+                    <Badge className="absolute -top-2 -right-2 bg-red-500 text-white text-xs">
+                      {cartItems}
+                    </Badge>
+                  </div>
+                </Card>
+              </div>
+
+              {/* Кнопки управления демо */}
+              <div className="flex justify-center space-x-4">
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  className="border-white/20 text-white"
+                  onClick={() => {
+                    setCartItems(Math.max(0, cartItems - 1));
+                    setCartTotal(Math.max(0, cartTotal - 1299));
+                  }}
+                >
+                  <Minus className="h-4 w-4 mr-1" />
+                  Убрать товар
+                </Button>
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  className="border-white/20 text-white"
+                  onClick={() => {
+                    setCartItems(cartItems + 1);
+                    setCartTotal(cartTotal + 1299);
+                  }}
+                >
+                  <Plus className="h-4 w-4 mr-1" />
+                  Добавить товар
+                </Button>
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  className="border-red-500/30 text-red-300"
+                  onClick={() => {
+                    setCartItems(0);
+                    setCartTotal(0);
+                  }}
+                >
+                  Очистить корзину
+                </Button>
+              </div>
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="supply-types" className="space-y-6">
+          <div>
+            <h3 className="text-xl font-semibold text-white mb-4">Типы поставок</h3>
+            <p className="text-white/60 mb-6">
+              Различные варианты выбора типа поставки
+            </p>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {/* Вариант 1: Карточки */}
+              <Card 
+                className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30"
+              >
+                <div className="text-center space-y-4">
+                  <div className="p-4 bg-blue-500/20 rounded-lg w-fit mx-auto">
+                    <ShoppingCart className="h-8 w-8 text-blue-400" />
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-semibold text-white mb-2">Карточки</h3>
+                    <p className="text-white/60 text-sm">
+                      Создание поставки через выбор товаров по карточкам
+                    </p>
+                  </div>
+                  <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
+                    Доступно
+                  </Badge>
+                </div>
+              </Card>
+
+              {/* Вариант 2: Оптовик */}
+              <Card 
+                className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30"
+              >
+                <div className="text-center space-y-4">
+                  <div className="p-4 bg-green-500/20 rounded-lg w-fit mx-auto">
+                    <Users className="h-8 w-8 text-green-400" />
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-semibold text-white mb-2">Оптовик</h3>
+                    <p className="text-white/60 text-sm">
+                      Создание поставки через выбор товаров у оптовиков
+                    </p>
+                  </div>
+                  <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
+                    Доступно
+                  </Badge>
+                </div>
+              </Card>
+
+              {/* Дополнительные типы */}
+              <Card className="bg-white/10 backdrop-blur border-white/20 p-6 opacity-60">
+                <div className="text-center space-y-4">
+                  <div className="p-4 bg-gray-500/20 rounded-lg w-fit mx-auto">
+                    <Package className="h-8 w-8 text-gray-400" />
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-semibold text-white mb-2">Импорт</h3>
+                    <p className="text-white/60 text-sm">
+                      Массовый импорт товаров из файла
+                    </p>
+                  </div>
+                  <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30">
+                    Скоро
+                  </Badge>
+                </div>
+              </Card>
+
+              <Card className="bg-white/10 backdrop-blur border-white/20 p-6 opacity-60">
+                <div className="text-center space-y-4">
+                  <div className="p-4 bg-purple-500/20 rounded-lg w-fit mx-auto">
+                    <Calendar className="h-8 w-8 text-purple-400" />
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-semibold text-white mb-2">Регулярные</h3>
+                    <p className="text-white/60 text-sm">
+                      Автоматические поставки по расписанию
+                    </p>
+                  </div>
+                  <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30">
+                    В разработке
+                  </Badge>
+                </div>
+              </Card>
+            </div>
+
+            {/* Статусы поставок */}
+            <div className="mt-8">
+              <h4 className="text-lg font-semibold text-white mb-4">Статусы поставок</h4>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div className="text-center space-y-2">
+                  <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30">
+                    Подготовка
+                  </Badge>
+                  <p className="text-white/60 text-xs">Сбор товаров</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                    В пути
+                  </Badge>
+                  <p className="text-white/60 text-xs">Доставка</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
+                    Доставлено
+                  </Badge>
+                  <p className="text-white/60 text-xs">Успешно</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <Badge className="bg-red-500/20 text-red-300 border-red-500/30">
+                    Ошибка
+                  </Badge>
+                  <p className="text-white/60 text-xs">Требует внимания</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/supplies/cart-summary.tsx b/src/components/supplies/cart-summary.tsx
new file mode 100644
index 0000000..cfe6700
--- /dev/null
+++ b/src/components/supplies/cart-summary.tsx
@@ -0,0 +1,207 @@
+"use client"
+
+import React from 'react'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { 
+  ShoppingCart,
+  Building2,
+  Plus,
+  Minus,
+  Eye
+} from 'lucide-react'
+import { SelectedProduct } from './types'
+
+interface CartSummaryProps {
+  selectedProducts: SelectedProduct[]
+  onQuantityChange: (productId: string, wholesalerId: string, quantity: number) => void
+  onRemoveProduct: (productId: string, wholesalerId: string) => void
+  onCreateSupply: () => void
+  onToggleVisibility: () => void
+  formatCurrency: (amount: number) => string
+  visible: boolean
+}
+
+export function CartSummary({
+  selectedProducts,
+  onQuantityChange,
+  onRemoveProduct,
+  onCreateSupply,
+  onToggleVisibility,
+  formatCurrency,
+  visible
+}: CartSummaryProps) {
+  if (!visible || selectedProducts.length === 0) {
+    return null
+  }
+
+  // Группируем товары по оптовикам
+  const groupedProducts = selectedProducts.reduce((acc, product) => {
+    if (!acc[product.wholesalerId]) {
+      acc[product.wholesalerId] = {
+        wholesaler: product.wholesalerName,
+        products: []
+      }
+    }
+    acc[product.wholesalerId].products.push(product)
+    return acc
+  }, {} as Record<string, { wholesaler: string; products: SelectedProduct[] }>)
+
+  const getTotalAmount = () => {
+    return selectedProducts.reduce((sum, product) => {
+      const discountedPrice = product.discount 
+        ? product.price * (1 - product.discount / 100)
+        : product.price
+      return sum + (discountedPrice * product.selectedQuantity)
+    }, 0)
+  }
+
+  const getTotalItems = () => {
+    return selectedProducts.reduce((sum, product) => sum + product.selectedQuantity, 0)
+  }
+
+  return (
+    <Card className="bg-gradient-to-br from-purple-500/10 to-pink-500/10 backdrop-blur-xl border border-purple-500/20 mb-6 shadow-2xl">
+      <div className="p-4">
+        <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-purple-500 to-pink-500 rounded-lg">
+              <ShoppingCart className="h-5 w-5 text-white" />
+            </div>
+            <div>
+              <h3 className="text-white font-bold text-lg">Корзина</h3>
+              <p className="text-purple-200 text-xs">
+                {selectedProducts.length} товаров от {Object.keys(groupedProducts).length} поставщиков
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onToggleVisibility}
+            className="text-white/60 hover:text-white hover:bg-white/10 rounded-xl"
+          >
+            <Eye className="h-4 w-4" />
+          </Button>
+        </div>
+        
+        {/* Группировка по оптовикам */}
+        {Object.entries(groupedProducts).map(([wholesalerId, group]) => (
+          <div key={wholesalerId} className="mb-4 last:mb-0">
+            <div className="flex items-center mb-2 pb-1 border-b border-white/10">
+              <Building2 className="h-4 w-4 text-blue-400 mr-2" />
+              <span className="text-white font-medium">{group.wholesaler}</span>
+              <Badge className="ml-2 bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
+                {group.products.length} товар(ов)
+              </Badge>
+            </div>
+            
+            <div className="space-y-2">
+              {group.products.map((product) => {
+                const discountedPrice = product.discount 
+                  ? product.price * (1 - product.discount / 100)
+                  : product.price
+                const totalPrice = discountedPrice * product.selectedQuantity
+                
+                return (
+                  <div key={`${product.wholesalerId}-${product.id}`} className="flex items-center space-x-3 bg-white/5 rounded-lg p-3">
+                    <img
+                      src={product.mainImage || '/api/placeholder/50/50'}
+                      alt={product.name}
+                      className="w-12 h-12 rounded-lg object-cover"
+                    />
+                    <div className="flex-1 min-w-0">
+                      <h4 className="text-white font-medium text-xs mb-1 truncate">{product.name}</h4>
+                      <p className="text-white/60 text-xs mb-1">{product.article}</p>
+                      <div className="flex items-center space-x-2">
+                        <div className="flex items-center space-x-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              const newQuantity = Math.max(0, product.selectedQuantity - 1)
+                              if (newQuantity === 0) {
+                                onRemoveProduct(product.id, product.wholesalerId)
+                              } else {
+                                onQuantityChange(product.id, product.wholesalerId, newQuantity)
+                              }
+                            }}
+                            className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
+                          >
+                            <Minus className="h-3 w-3" />
+                          </Button>
+                          <span className="text-white text-xs w-6 text-center">{product.selectedQuantity}</span>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              onQuantityChange(
+                                product.id, 
+                                product.wholesalerId, 
+                                Math.min(product.quantity, product.selectedQuantity + 1)
+                              )
+                            }}
+                            disabled={product.selectedQuantity >= product.quantity}
+                            className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
+                          >
+                            <Plus className="h-3 w-3" />
+                          </Button>
+                        </div>
+                        <div className="text-right">
+                          <div className="text-white font-semibold text-xs">{formatCurrency(totalPrice)}</div>
+                          {product.discount && (
+                            <div className="text-white/40 text-xs line-through">
+                              {formatCurrency(product.price * product.selectedQuantity)}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onRemoveProduct(product.id, product.wholesalerId)}
+                      className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                    >
+                      ✕
+                    </Button>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        ))}
+        
+        {/* Итого */}
+        <div className="border-t border-white/20 pt-3 mt-4">
+          <div className="flex justify-between items-center">
+            <span className="text-white font-semibold text-sm">
+              Итого: {getTotalItems()} товаров
+            </span>
+            <span className="text-white font-bold text-lg">
+              {formatCurrency(getTotalAmount())}
+            </span>
+          </div>
+          <div className="flex space-x-2 mt-3">
+            <Button 
+              variant="outline"
+              className="flex-1 border-purple-300/30 text-white hover:bg-white/10"
+              onClick={onToggleVisibility}
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Добавить еще
+            </Button>
+            <Button 
+              className="flex-1 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
+              onClick={onCreateSupply}
+            >
+              <ShoppingCart className="h-4 w-4 mr-2" />
+              Оформить поставку
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/supplies/create-supply-page.tsx b/src/components/supplies/create-supply-page.tsx
index bd6973f..3ec2d8a 100644
--- a/src/components/supplies/create-supply-page.tsx
+++ b/src/components/supplies/create-supply-page.tsx
@@ -2,255 +2,23 @@
 
 import React, { useState, useEffect } from 'react'
 import { useQuery } from '@apollo/client'
-import { Card } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Input } from '@/components/ui/input'
 import { Sidebar } from '@/components/dashboard/sidebar'
 import { useSidebar } from '@/hooks/useSidebar'
 import { GET_MY_COUNTERPARTIES, GET_ALL_PRODUCTS } from '@/graphql/queries'
-import { 
-  ArrowLeft,
-  ShoppingCart,
-  Users,
-  Building2,
-  MapPin,
-  Phone,
-  Mail,
-  Star,
-  Plus,
-  Minus,
-  Info,
-  Package,
-  Zap,
-  Heart,
-  Eye,
-  ShoppingBag,
-  Search
-} from 'lucide-react'
 import { useRouter } from 'next/navigation'
-import Image from 'next/image'
 import { WBProductCards } from './wb-product-cards'
-
-interface WholesalerForCreation {
-  id: string
-  inn: string
-  name: string
-  fullName: string
-  address: string
-  phone?: string
-  email?: string
-  rating: number
-  productCount: number
-  avatar?: string
-  specialization: string[]
-}
-
-interface WholesalerProduct {
-  id: string
-  name: string
-  article: string
-  description: string
-  price: number
-  quantity: number
-  category: string
-  brand?: string
-  color?: string
-  size?: string
-  weight?: number
-  dimensions?: string
-  material?: string
-  images: string[]
-  mainImage?: string
-  discount?: number
-  isNew?: boolean
-  isBestseller?: boolean
-}
-
-interface SelectedProduct extends WholesalerProduct {
-  selectedQuantity: number
-  wholesalerId: string
-  wholesalerName: string
-}
-
-interface WildberriesCard {
-  nmID: number
-  vendorCode: string
-  title: string
-  description: string
-  brand: string
-  mediaFiles: string[]
-  sizes: Array<{
-    chrtID: number
-    techSize: string
-    wbSize: string
-    price: number
-    discountedPrice: number
-    quantity: number
-  }>
-}
-
-interface SelectedCard {
-  card: WildberriesCard
-  selectedQuantity: number
-  selectedMarket: string
-  selectedPlace: string
-  sellerName: string
-  sellerPhone: string
-  deliveryDate: string
-  selectedServices: string[]
-}
-
-// Моковые данные оптовиков
-const mockWholesalers: WholesalerForCreation[] = [
-  {
-    id: '1',
-    inn: '7707083893',
-    name: 'ОПТ-Электроника',
-    fullName: 'ООО "ОПТ-Электроника"',
-    address: 'г. Москва, ул. Садовая, д. 15',
-    phone: '+7 (495) 123-45-67',
-    email: 'opt@electronics.ru',
-    rating: 4.8,
-    productCount: 1250,
-    specialization: ['Электроника', 'Бытовая техника']
-  },
-  {
-    id: '2',
-    inn: '7707083894',
-    name: 'ТекстильМастер',
-    fullName: 'ООО "ТекстильМастер"',
-    address: 'г. Иваново, пр. Ленина, д. 42',
-    phone: '+7 (4932) 55-66-77',
-    email: 'sales@textilmaster.ru',
-    rating: 4.6,
-    productCount: 850,
-    specialization: ['Текстиль', 'Одежда', 'Домашний текстиль']
-  },
-  {
-    id: '3',
-    inn: '7707083895',
-    name: 'МетизКомплект',
-    fullName: 'ООО "МетизКомплект"',
-    address: 'г. Тула, ул. Металлургов, д. 8',
-    phone: '+7 (4872) 33-44-55',
-    email: 'info@metiz.ru',
-    rating: 4.9,
-    productCount: 2100,
-    specialization: ['Крепеж', 'Метизы', 'Инструменты']
-  }
-]
-
-// Улучшенные моковые данные товаров
-const mockProducts: WholesalerProduct[] = [
-  {
-    id: '1',
-    name: 'iPhone 15 Pro Max',
-    article: 'APL-15PM-256',
-    description: 'Флагманский смартфон Apple с титановым корпусом, камерой 48 МП и чипом A17 Pro',
-    price: 124900,
-    quantity: 45,
-    category: 'Смартфоны',
-    brand: 'Apple',
-    color: 'Натуральный титан',
-    size: '6.7"',
-    weight: 221,
-    dimensions: '159.9 x 76.7 x 8.25 мм',
-    material: 'Титан, стекло',
-    images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-15-pro-max-naturaltitanium-select?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1692845705224'],
-    mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-15-pro-max-naturaltitanium-select?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1692845705224',
-    isNew: true,
-    isBestseller: true
-  },
-  {
-    id: '2',
-    name: 'Sony WH-1000XM5',
-    article: 'SNY-WH1000XM5',
-    description: 'Беспроводные наушники премиум-класса с лучшим в отрасли шумоподавлением',
-    price: 34900,
-    quantity: 128,
-    category: 'Наушники',
-    brand: 'Sony',
-    color: 'Черный',
-    weight: 250,
-    material: 'Пластик, эко-кожа',
-    images: ['https://www.sony.ru/image/5d02da5df552836db894cead8a68f5f3?fmt=pjpeg&wid=330&bgcolor=FFFFFF&bgc=FFFFFF'],
-    mainImage: 'https://www.sony.ru/image/5d02da5df552836db894cead8a68f5f3?fmt=pjpeg&wid=330&bgcolor=FFFFFF&bgc=FFFFFF',
-    discount: 15,
-    isBestseller: true
-  },
-  {
-    id: '3',
-    name: 'iPad Pro 12.9" M2',
-    article: 'APL-IPADPRO-M2',
-    description: 'Самый мощный iPad с чипом M2, дисплеем Liquid Retina XDR и поддержкой Apple Pencil',
-    price: 109900,
-    quantity: 32,
-    category: 'Планшеты',
-    brand: 'Apple',
-    color: 'Серый космос',
-    size: '12.9"',
-    weight: 682,
-    dimensions: '280.6 x 214.9 x 6.4 мм',
-    material: 'Алюминий',
-    images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/ipad-pro-12-select-wifi-spacegray-202210?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1664411207213'],
-    mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/ipad-pro-12-select-wifi-spacegray-202210?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1664411207213',
-    isNew: true
-  },
-  {
-    id: '4',
-    name: 'MacBook Pro 16" M3 Max',
-    article: 'APL-MBP16-M3MAX',
-    description: 'Профессиональный ноутбук с чипом M3 Max, 36 ГБ памяти и дисплеем Liquid Retina XDR',
-    price: 329900,
-    quantity: 18,
-    category: 'Ноутбуки',
-    brand: 'Apple',
-    color: 'Серый космос',
-    size: '16"',
-    weight: 2160,
-    dimensions: '355.7 x 248.1 x 16.8 мм',
-    material: 'Алюминий',
-    images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/mbp16-spacegray-select-202310?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1697230830200'],
-    mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/mbp16-spacegray-select-202310?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1697230830200',
-    isNew: true,
-    isBestseller: true
-  },
-  {
-    id: '5',
-    name: 'Apple Watch Ultra 2',
-    article: 'APL-AWU2-49',
-    description: 'Самые прочные и функциональные умные часы Apple для экстремальных приключений',
-    price: 89900,
-    quantity: 67,
-    category: 'Умные часы',
-    brand: 'Apple',
-    color: 'Натуральный титан',
-    size: '49 мм',
-    weight: 61,
-    dimensions: '49 x 44 x 14.4 мм',
-    material: 'Титан',
-    images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/watch-ultra2-select-202309?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1693967875133'],
-    mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/watch-ultra2-select-202309?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1693967875133',
-    isNew: true
-  },
-  {
-    id: '6',
-    name: 'Magic Keyboard для iPad Pro',
-    article: 'APL-MK-IPADPRO',
-    description: 'Клавиатура с трекпадом и подсветкой клавиш для iPad Pro 12.9"',
-    price: 36900,
-    quantity: 89,
-    category: 'Аксессуары',
-    brand: 'Apple',
-    color: 'Черный',
-    weight: 710,
-    dimensions: '280.9 x 214.3 x 25 мм',
-    material: 'Алюминий, пластик',
-    images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MJQJ3?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1639066901000'],
-    mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MJQJ3?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1639066901000'
-  }
-]
+import { SelectedCard as WBSelectedCard } from '@/types/supplies'
+import { TabsHeader } from './tabs-header'
+import { WholesalerGrid } from './wholesaler-grid'
+import { CartSummary } from './cart-summary'
+import { FloatingCart } from './floating-cart'
+import { WholesalerProductsPage } from './wholesaler-products-page'
+import { 
+  WholesalerForCreation, 
+  WholesalerProduct, 
+  SelectedProduct,
+  CounterpartyWholesaler
+} from './types'
 
 export function CreateSupplyPage() {
   const router = useRouter()
@@ -258,7 +26,7 @@ export function CreateSupplyPage() {
   const [activeTab, setActiveTab] = useState<'cards' | 'wholesaler'>('cards')
   const [selectedWholesaler, setSelectedWholesaler] = useState<WholesalerForCreation | null>(null)
   const [selectedProducts, setSelectedProducts] = useState<SelectedProduct[]>([])
-  const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([])
+  const [selectedCards, setSelectedCards] = useState<WBSelectedCard[]>([])
   const [showSummary, setShowSummary] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
 
@@ -272,17 +40,11 @@ export function CreateSupplyPage() {
   })
   
   // Фильтруем только оптовиков
-  const wholesalers = (counterpartiesData?.myCounterparties || []).filter((org: { type: string }) => org.type === 'WHOLESALE')
-
-  // Фильтруем оптовиков по поисковому запросу
-  const filteredWholesalers = wholesalers.filter((wholesaler: { name?: string; fullName?: string; inn?: string }) => 
-    wholesaler.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    wholesaler.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    wholesaler.inn?.toLowerCase().includes(searchQuery.toLowerCase())
-  )
+  const wholesalers: CounterpartyWholesaler[] = (counterpartiesData?.myCounterparties || [])
+    .filter((org: { type: string }) => org.type === 'WHOLESALE')
 
   // Фильтруем товары по выбранному оптовику
-  const wholesalerProducts = selectedWholesaler 
+  const wholesalerProducts: WholesalerProduct[] = selectedWholesaler 
     ? (productsData?.allProducts || []).filter((product: { organization: { id: string } }) => 
         product.organization.id === selectedWholesaler.id
       )
@@ -303,17 +65,8 @@ export function CreateSupplyPage() {
     }).format(amount)
   }
 
-  const renderStars = (rating: number) => {
-    return Array.from({ length: 5 }, (_, i) => (
-      <Star 
-        key={i} 
-        className={`h-4 w-4 ${i < Math.floor(rating) ? 'text-yellow-400 fill-current' : 'text-gray-400'}`} 
-      />
-    ))
-  }
-
   const updateProductQuantity = (productId: string, quantity: number) => {
-    const product = wholesalerProducts.find((p: { id: string }) => p.id === productId)
+    const product = wholesalerProducts.find((p) => p.id === productId)
     if (!product || !selectedWholesaler) return
 
     setSelectedProducts(prev => {
@@ -340,12 +93,6 @@ export function CreateSupplyPage() {
     })
   }
 
-  const getSelectedQuantity = (productId: string): number => {
-    if (!selectedWholesaler) return 0
-    const selected = selectedProducts.find(p => p.id === productId && p.wholesalerId === selectedWholesaler.id)
-    return selected ? selected.selectedQuantity : 0
-  }
-
   const getTotalAmount = () => {
     return selectedProducts.reduce((sum, product) => {
       const discountedPrice = product.discount 
@@ -359,20 +106,17 @@ export function CreateSupplyPage() {
     return selectedProducts.reduce((sum, product) => sum + product.selectedQuantity, 0)
   }
 
-  const handleCardsComplete = (cards: SelectedCard[]) => {
+  const handleCardsComplete = (cards: WBSelectedCard[]) => {
     setSelectedCards(cards)
     console.log('Карточки товаров выбраны:', cards)
-    // TODO: Здесь будет создание поставки с данными карточек
     router.push('/supplies')
   }
 
   const handleCreateSupply = () => {
     if (activeTab === 'cards') {
       console.log('Создание поставки с карточками Wildberries')
-      // TODO: Здесь будет создание поставки с данными карточек
     } else {
       console.log('Создание поставки с товарами:', selectedProducts)
-      // TODO: Здесь будет реальное создание поставки
     }
     router.push('/supplies')
   }
@@ -380,366 +124,45 @@ export function CreateSupplyPage() {
   const handleGoBack = () => {
     if (selectedWholesaler) {
       setSelectedWholesaler(null)
-      // НЕ очищаем корзину! setSelectedProducts([])
       setShowSummary(false)
     } else {
       router.push('/supplies')
     }
   }
 
-  // Рендер товаров оптовика
-  if (selectedWholesaler && activeTab === 'wholesaler') {
-    return (
-      <div className="h-screen flex overflow-hidden">
-        <Sidebar />
-        <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
-          <div className="p-8">
-            <div className="flex items-center justify-between mb-8">
-              <div className="flex items-center space-x-4">
-                <Button 
-                  variant="ghost" 
-                  size="sm"
-                  onClick={handleGoBack}
-                  className="text-white/60 hover:text-white hover:bg-white/10"
-                >
-                  <ArrowLeft className="h-4 w-4 mr-2" />
-                  Назад
-                </Button>
-                <div>
-                  <h1 className="text-3xl font-bold text-white mb-2">Товары оптовика</h1>
-                  <p className="text-white/60">{selectedWholesaler.name} • {wholesalerProducts.length} товаров</p>
-                </div>
-              </div>
-              <div className="flex items-center space-x-3">
-                <Button 
-                  variant="ghost" 
-                  size="sm"
-                  onClick={() => setShowSummary(!showSummary)}
-                  className="text-white/60 hover:text-white hover:bg-white/10"
-                >
-                  <Info className="h-4 w-4 mr-2" />
-                  Резюме ({selectedProducts.length})
-                </Button>
-              </div>
-            </div>
-
-            {showSummary && selectedProducts.length > 0 && (
-              <Card className="bg-white/5 backdrop-blur border-white/10 mb-8">
-                <div className="p-6">
-                  <div className="flex items-center justify-between mb-6">
-                    <h3 className="text-white font-semibold text-xl flex items-center">
-                      <ShoppingCart className="h-5 w-5 mr-2" />
-                      Корзина ({selectedProducts.length})
-                    </h3>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => setShowSummary(false)}
-                      className="text-white/60 hover:text-white"
-                    >
-                      ✕
-                    </Button>
-                  </div>
-                  
-                  {/* Текущий оптовик */}
-                  <div className="mb-6">
-                    <div className="flex items-center mb-3 pb-2 border-b border-white/10">
-                      <Building2 className="h-4 w-4 text-blue-400 mr-2" />
-                      <span className="text-white font-medium">{selectedWholesaler?.name}</span>
-                      <Badge className="ml-2 bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
-                        {selectedProducts.filter(p => p.wholesalerId === selectedWholesaler?.id).length} товар(ов)
-                      </Badge>
-                    </div>
-                    
-                    <div className="space-y-3">
-                      {selectedProducts.filter(p => p.wholesalerId === selectedWholesaler?.id).map((product) => {
-                        const discountedPrice = product.discount 
-                          ? product.price * (1 - product.discount / 100)
-                          : product.price
-                        const totalPrice = discountedPrice * product.selectedQuantity
-                        
-                        return (
-                          <div key={product.id} className="flex items-center space-x-4 bg-white/5 rounded-lg p-4">
-                            <img
-                              src={product.mainImage || '/api/placeholder/60/60'}
-                              alt={product.name}
-                              className="w-16 h-16 rounded-lg object-cover"
-                            />
-                            <div className="flex-1 min-w-0">
-                              <h4 className="text-white font-medium text-sm mb-1 truncate">{product.name}</h4>
-                              <p className="text-white/60 text-xs mb-2">{product.article}</p>
-                              <div className="flex items-center space-x-3">
-                                <span className="text-white/60 text-sm">× {product.selectedQuantity}</span>
-                                <div className="text-right">
-                                  <div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
-                                  {product.discount && (
-                                    <div className="text-white/40 text-xs line-through">
-                                      {formatCurrency(product.price * product.selectedQuantity)}
-                                    </div>
-                                  )}
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        )
-                      })}
-                    </div>
-                  </div>
-                  
-                  {/* Другие оптовики в корзине */}
-                  {Object.entries(
-                    selectedProducts.filter(p => p.wholesalerId !== selectedWholesaler?.id).reduce((acc, product) => {
-                      if (!acc[product.wholesalerId]) {
-                        acc[product.wholesalerId] = {
-                          wholesaler: product.wholesalerName,
-                          products: []
-                        }
-                      }
-                      acc[product.wholesalerId].products.push(product)
-                      return acc
-                    }, {} as Record<string, { wholesaler: string; products: SelectedProduct[] }>)
-                  ).map(([wholesalerId, group]) => (
-                    <div key={wholesalerId} className="mb-6 last:mb-0">
-                      <div className="flex items-center mb-3 pb-2 border-b border-white/10">
-                        <Building2 className="h-4 w-4 text-purple-400 mr-2" />
-                        <span className="text-white font-medium">{group.wholesaler}</span>
-                        <Badge className="ml-2 bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs">
-                          {group.products.length} товар(ов)
-                        </Badge>
-                      </div>
-                      
-                      <div className="space-y-3">
-                        {group.products.map((product) => {
-                          const discountedPrice = product.discount 
-                            ? product.price * (1 - product.discount / 100)
-                            : product.price
-                          const totalPrice = discountedPrice * product.selectedQuantity
-                          
-                          return (
-                            <div key={`${product.wholesalerId}-${product.id}`} className="flex items-center space-x-4 bg-white/5 rounded-lg p-4">
-                              <img
-                                src={product.mainImage || '/api/placeholder/60/60'}
-                                alt={product.name}
-                                className="w-16 h-16 rounded-lg object-cover"
-                              />
-                              <div className="flex-1 min-w-0">
-                                <h4 className="text-white font-medium text-sm mb-1 truncate">{product.name}</h4>
-                                <p className="text-white/60 text-xs mb-2">{product.article}</p>
-                                <div className="flex items-center space-x-3">
-                                  <span className="text-white/60 text-sm">× {product.selectedQuantity}</span>
-                                  <div className="text-right">
-                                    <div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
-                                    {product.discount && (
-                                      <div className="text-white/40 text-xs line-through">
-                                        {formatCurrency(product.price * product.selectedQuantity)}
-                                      </div>
-                                    )}
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          )
-                        })}
-                      </div>
-                    </div>
-                  ))}
-                  
-                  {/* Итого */}
-                  <div className="border-t border-white/20 pt-4 mt-6">
-                    <div className="flex justify-between items-center">
-                      <span className="text-white font-semibold text-lg">
-                        Итого: {getTotalItems()} товаров
-                      </span>
-                      <span className="text-white font-bold text-2xl">
-                        {formatCurrency(getTotalAmount())}
-                      </span>
-                    </div>
-                    <Button 
-                      className="w-full mt-4 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
-                      onClick={handleCreateSupply}
-                    >
-                      <ShoppingCart className="h-4 w-4 mr-2" />
-                      Создать поставку
-                    </Button>
-                  </div>
-                </div>
-              </Card>
-            )}
-
-            {productsLoading ? (
-              <div className="flex items-center justify-center p-8 col-span-full">
-                <div className="text-center">
-                  <div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mx-auto mb-4"></div>
-                  <p className="text-white/60">Загружаем товары...</p>
-                </div>
-              </div>
-            ) : wholesalerProducts.length === 0 ? (
-              <div className="flex items-center justify-center p-8 col-span-full">
-                <div className="text-center">
-                  <Package className="h-12 w-12 text-white/20 mx-auto mb-4" />
-                  <p className="text-white/60">У этого оптовика нет товаров</p>
-                  <p className="text-white/40 text-sm mt-2">Выберите другого оптовика</p>
-                </div>
-              </div>
-            ) : (
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
-                {wholesalerProducts.map((product: { 
-                  id: string; 
-                  name: string; 
-                  article: string; 
-                  description?: string; 
-                  price: number; 
-                  quantity: number; 
-                  category?: { name: string }; 
-                  brand?: string; 
-                  color?: string; 
-                  size?: string; 
-                  mainImage?: string; 
-                  images?: string[] 
-                }) => {
-                const selectedQuantity = getSelectedQuantity(product.id)
-                const discountedPrice = product.price // Убираем discount так как его нет в схеме
-                
-                return (
-                  <Card key={product.id} className="bg-white/10 backdrop-blur border-white/20 overflow-hidden group hover:bg-white/15 hover:border-white/30 transition-all duration-300 hover:scale-105 hover:shadow-2xl">
-                    <div className="aspect-square relative bg-white/5 overflow-hidden">
-                      <img
-                        src={product.mainImage || '/api/placeholder/400/400'}
-                        alt={product.name}
-                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
-                      />
-                      
-                      {/* Количество в наличии */}
-                      <div className="absolute top-2 right-2">
-                        <Badge className={`${product.quantity > 50 ? 'bg-green-500/80' : product.quantity > 10 ? 'bg-yellow-500/80' : 'bg-red-500/80'} text-white border-0 backdrop-blur text-xs`}>
-                          {product.quantity}
-                        </Badge>
-                      </div>
-
-                      {/* Убираем discount badge так как поля нет в схеме */}
-
-                      {/* Overlay с кнопками */}
-                      <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
-                        <div className="flex space-x-2">
-                          <Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
-                            <Eye className="h-4 w-4" />
-                          </Button>
-                          <Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
-                            <Heart className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div className="p-3 space-y-3">
-                      {/* Заголовок и бренд */}
-                      <div>
-                        <div className="flex items-center justify-between mb-1">
-                          {product.brand && (
-                            <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
-                              {product.brand}
-                            </Badge>
-                          )}
-                          {/* Убираем isNew и isBestseller так как этих полей нет в схеме */}
-                        </div>
-                        <h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight">
-                          {product.name}
-                        </h3>
-                      </div>
-
-                      {/* Основная характеристика */}
-                      <div className="text-white/60 text-xs">
-                        {product.color && <span className="text-white">{product.color}</span>}
-                        {product.size && <span className="text-white ml-2">{product.size}</span>}
-                      </div>
-
-                      {/* Цена */}
-                      <div className="pt-2 border-t border-white/10">
-                        <div className="flex items-center space-x-2">
-                          <div className="text-white font-bold text-lg">
-                            {formatCurrency(discountedPrice)}
-                          </div>
-                          {/* Убираем отображение оригинальной цены так как discount нет */}
-                        </div>
-                      </div>
-
-                      {/* Управление количеством */}
-                      <div className="flex items-center space-x-2">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => updateProductQuantity(product.id, Math.max(0, selectedQuantity - 1))}
-                          disabled={selectedQuantity === 0}
-                          className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
-                        >
-                          <Minus className="h-3 w-3" />
-                        </Button>
-                        <input
-                          type="text"
-                          inputMode="numeric"
-                          pattern="[0-9]*"
-                          value={selectedQuantity}
-                          onChange={(e) => {
-                            const value = e.target.value.replace(/[^0-9]/g, '')
-                            const numValue = Math.max(0, Math.min(product.quantity, parseInt(value) || 0))
-                            updateProductQuantity(product.id, numValue)
-                          }}
-                          onFocus={(e) => e.target.select()}
-                          className="h-8 w-12 text-center bg-white/10 border border-white/20 text-white text-sm rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                        />
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => updateProductQuantity(product.id, Math.min(product.quantity, selectedQuantity + 1))}
-                          disabled={selectedQuantity >= product.quantity}
-                          className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
-                        >
-                          <Plus className="h-3 w-3" />
-                        </Button>
-                        
-                        {selectedQuantity > 0 && (
-                          <Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
-                            <ShoppingCart className="h-3 w-3 mr-1" />
-                            {selectedQuantity}
-                          </Badge>
-                        )}
-                      </div>
-
-                      {/* Сумма для выбранного товара */}
-                      {selectedQuantity > 0 && (
-                        <div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-2">
-                          <div className="text-green-300 text-xs font-medium text-center">
-                            {formatCurrency(discountedPrice * selectedQuantity)}
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  </Card>
-                )
-              })}
-            </div>
-            )}
-
-            {/* Floating корзина */}
-            {selectedProducts.length > 0 && (
-              <div className="fixed bottom-6 right-6 z-50">
-                <Button 
-                  size="lg"
-                  className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-2xl text-lg px-8 py-4"
-                  onClick={() => setShowSummary(!showSummary)}
-                >
-                  <ShoppingCart className="h-5 w-5 mr-3" />
-                  Корзина ({selectedProducts.length}) • {formatCurrency(getTotalAmount())}
-                </Button>
-              </div>
-            )}
-          </div>
-        </main>
-      </div>
+  const handleRemoveProduct = (productId: string, wholesalerId: string) => {
+    setSelectedProducts(prev => 
+      prev.filter(p => !(p.id === productId && p.wholesalerId === wholesalerId))
     )
   }
 
+  const handleCartQuantityChange = (productId: string, wholesalerId: string, quantity: number) => {
+    setSelectedProducts(prev => 
+      prev.map(p => 
+        p.id === productId && p.wholesalerId === wholesalerId
+          ? { ...p, selectedQuantity: quantity }
+          : p
+      )
+    )
+  }
 
+  // Рендер страницы товаров оптовика
+  if (selectedWholesaler && activeTab === 'wholesaler') {
+    return (
+      <WholesalerProductsPage
+        selectedWholesaler={selectedWholesaler}
+        products={wholesalerProducts}
+        selectedProducts={selectedProducts}
+        onQuantityChange={updateProductQuantity}
+        onBack={handleGoBack}
+        onCreateSupply={handleCreateSupply}
+        formatCurrency={formatCurrency}
+        showSummary={showSummary}
+        setShowSummary={setShowSummary}
+        loading={productsLoading}
+      />
+    )
+  }
 
   // Главная страница с табами
   return (
@@ -747,360 +170,68 @@ export function CreateSupplyPage() {
       <Sidebar />
       <main className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}>
         <div className="p-4">
-          {/* Верхняя строка: Назад + Заголовок + Табы */}
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center space-x-4">
-              <Button 
-                variant="ghost" 
-                size="sm"
-                onClick={() => router.push('/supplies')}
-                className="text-white/60 hover:text-white hover:bg-white/10"
-              >
-                <ArrowLeft className="h-4 w-4 mr-2" />
-                Назад
-              </Button>
-              <h1 className="text-2xl font-bold text-white">Создание поставки</h1>
-            </div>
-            
-            <div>
-              <div className="grid grid-cols-2 bg-white/10 backdrop-blur border border-white/20 rounded-lg p-1">
-                <button
-                  onClick={() => setActiveTab('cards')}
-                  className={`px-4 py-2 text-sm rounded transition-all ${
-                    activeTab === 'cards' 
-                      ? 'bg-white/20 text-white' 
-                      : 'text-white/60 hover:text-white hover:bg-white/10'
-                  }`}
-                >
-                  <ShoppingCart className="h-4 w-4 mr-1 inline" />
-                  Карточки
-                </button>
-                <button
-                  onClick={() => setActiveTab('wholesaler')}
-                  className={`px-4 py-2 text-sm rounded transition-all ${
-                    activeTab === 'wholesaler' 
-                      ? 'bg-white/20 text-white' 
-                      : 'text-white/60 hover:text-white hover:bg-white/10'
-                  }`}
-                >
-                  <Users className="h-4 w-4 mr-1 inline" />
-                  Оптовики
-                </button>
-              </div>
-            </div>
-          </div>
+          <TabsHeader
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+            onBack={() => router.push('/supplies')}
+            cartInfo={
+              activeTab === 'cards' && selectedCards.length > 0
+                ? {
+                    itemCount: selectedCards.reduce((sum, sc) => sum + sc.selectedQuantity, 0),
+                    totalAmount: 0,
+                    formatCurrency
+                  }
+                : activeTab === 'wholesaler' && selectedProducts.length > 0
+                ? {
+                    itemCount: selectedProducts.length,
+                    totalAmount: getTotalAmount(),
+                    formatCurrency
+                  }
+                : undefined
+            }
+            onCartClick={() => setShowSummary(true)}
+          />
 
           {/* Контент карточек */}
           {activeTab === 'cards' && (
             <WBProductCards 
               onBack={() => router.push('/supplies')}
               onComplete={handleCardsComplete}
+              showSummary={showSummary}
+              setShowSummary={setShowSummary}
+              selectedCards={selectedCards}
+              setSelectedCards={setSelectedCards}
             />
           )}
 
           {/* Контент оптовиков */}
           {activeTab === 'wholesaler' && (
             <div>
-              {/* Поиск */}
-              <div className="mb-4">
-                <div className="relative max-w-md">
-                  <Search className="absolute left-3 top-3 h-4 w-4 text-white/40" />
-                  <Input
-                    placeholder="Поиск оптовиков..."
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="pl-10 glass-input text-white placeholder:text-white/40 h-10"
-                  />
-                </div>
-              </div>
+              <CartSummary
+                selectedProducts={selectedProducts}
+                onQuantityChange={handleCartQuantityChange}
+                onRemoveProduct={handleRemoveProduct}
+                onCreateSupply={handleCreateSupply}
+                onToggleVisibility={() => setShowSummary(false)}
+                formatCurrency={formatCurrency}
+                visible={showSummary && selectedProducts.length > 0}
+              />
 
-              {/* Корзина */}
-              {showSummary && selectedProducts.length > 0 && (
-                <Card className="bg-gradient-to-br from-purple-500/10 to-pink-500/10 backdrop-blur-xl border border-purple-500/20 mb-6 shadow-2xl">
-                  <div className="p-4">
-                    <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-purple-500 to-pink-500 rounded-lg">
-                          <ShoppingCart className="h-5 w-5 text-white" />
-                        </div>
-                        <div>
-                          <h3 className="text-white font-bold text-lg">Корзина</h3>
-                          <p className="text-purple-200 text-xs">{selectedProducts.length} товаров от {Object.keys(selectedProducts.reduce((acc, p) => ({ ...acc, [p.wholesalerId]: true }), {})).length} поставщиков</p>
-                        </div>
-                      </div>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setShowSummary(false)}
-                        className="text-white/60 hover:text-white hover:bg-white/10 rounded-xl"
-                      >
-                        <Eye className="h-4 w-4" />
-                      </Button>
-                    </div>
-                    
-                    {/* Группировка по оптовикам */}
-                    {Object.entries(
-                      selectedProducts.reduce((acc, product) => {
-                        if (!acc[product.wholesalerId]) {
-                          acc[product.wholesalerId] = {
-                            wholesaler: product.wholesalerName,
-                            products: []
-                          }
-                        }
-                        acc[product.wholesalerId].products.push(product)
-                        return acc
-                      }, {} as Record<string, { wholesaler: string; products: SelectedProduct[] }>)
-                    ).map(([wholesalerId, group]) => (
-                      <div key={wholesalerId} className="mb-4 last:mb-0">
-                        <div className="flex items-center mb-2 pb-1 border-b border-white/10">
-                          <Building2 className="h-4 w-4 text-blue-400 mr-2" />
-                          <span className="text-white font-medium">{group.wholesaler}</span>
-                          <Badge className="ml-2 bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
-                            {group.products.length} товар(ов)
-                          </Badge>
-                        </div>
-                        
-                        <div className="space-y-2">
-                          {group.products.map((product) => {
-                            const discountedPrice = product.discount 
-                              ? product.price * (1 - product.discount / 100)
-                              : product.price
-                            const totalPrice = discountedPrice * product.selectedQuantity
-                            
-                            return (
-                              <div key={`${product.wholesalerId}-${product.id}`} className="flex items-center space-x-3 bg-white/5 rounded-lg p-3">
-                                <img
-                                  src={product.mainImage || '/api/placeholder/50/50'}
-                                  alt={product.name}
-                                  className="w-12 h-12 rounded-lg object-cover"
-                                />
-                                <div className="flex-1 min-w-0">
-                                  <h4 className="text-white font-medium text-xs mb-1 truncate">{product.name}</h4>
-                                  <p className="text-white/60 text-xs mb-1">{product.article}</p>
-                                  <div className="flex items-center space-x-2">
-                                    <div className="flex items-center space-x-1">
-                                      <Button
-                                        variant="ghost"
-                                        size="sm"
-                                        onClick={() => {
-                                          const newQuantity = Math.max(0, product.selectedQuantity - 1)
-                                          if (newQuantity === 0) {
-                                            setSelectedProducts(prev => 
-                                              prev.filter(p => !(p.id === product.id && p.wholesalerId === product.wholesalerId))
-                                            )
-                                          } else {
-                                            setSelectedProducts(prev => 
-                                              prev.map(p => 
-                                                p.id === product.id && p.wholesalerId === product.wholesalerId
-                                                  ? { ...p, selectedQuantity: newQuantity }
-                                                  : p
-                                              )
-                                            )
-                                          }
-                                        }}
-                                        className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
-                                      >
-                                        <Minus className="h-3 w-3" />
-                                      </Button>
-                                      <span className="text-white text-xs w-6 text-center">{product.selectedQuantity}</span>
-                                      <Button
-                                        variant="ghost"
-                                        size="sm"
-                                        onClick={() => {
-                                          setSelectedProducts(prev => 
-                                            prev.map(p => 
-                                              p.id === product.id && p.wholesalerId === product.wholesalerId
-                                                ? { ...p, selectedQuantity: Math.min(product.quantity, p.selectedQuantity + 1) }
-                                                : p
-                                            )
-                                          )
-                                        }}
-                                        disabled={product.selectedQuantity >= product.quantity}
-                                        className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
-                                      >
-                                        <Plus className="h-3 w-3" />
-                                      </Button>
-                                    </div>
-                                    <div className="text-right">
-                                      <div className="text-white font-semibold text-xs">{formatCurrency(totalPrice)}</div>
-                                      {product.discount && (
-                                        <div className="text-white/40 text-xs line-through">
-                                          {formatCurrency(product.price * product.selectedQuantity)}
-                                        </div>
-                                      )}
-                                    </div>
-                                  </div>
-                                </div>
-                                <Button
-                                  variant="ghost"
-                                  size="sm"
-                                  onClick={() => {
-                                    setSelectedProducts(prev => 
-                                      prev.filter(p => !(p.id === product.id && p.wholesalerId === product.wholesalerId))
-                                    )
-                                  }}
-                                  className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
-                                >
-                                  ✕
-                                </Button>
-                              </div>
-                            )
-                          })}
-                        </div>
-                      </div>
-                    ))}
-                    
-                    {/* Итого */}
-                    <div className="border-t border-white/20 pt-3 mt-4">
-                      <div className="flex justify-between items-center">
-                        <span className="text-white font-semibold text-sm">
-                          Итого: {getTotalItems()} товаров
-                        </span>
-                        <span className="text-white font-bold text-lg">
-                          {formatCurrency(getTotalAmount())}
-                        </span>
-                      </div>
-                      <div className="flex space-x-2 mt-3">
-                        <Button 
-                          variant="outline"
-                          className="flex-1 border-purple-300/30 text-white hover:bg-white/10"
-                          onClick={() => setShowSummary(false)}
-                        >
-                          <Plus className="h-4 w-4 mr-2" />
-                          Добавить еще
-                        </Button>
-                        <Button 
-                          className="flex-1 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
-                          onClick={handleCreateSupply}
-                        >
-                          <ShoppingCart className="h-4 w-4 mr-2" />
-                          Оформить поставку
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                </Card>
-              )}
+              <WholesalerGrid
+                wholesalers={wholesalers}
+                onWholesalerSelect={setSelectedWholesaler}
+                searchQuery={searchQuery}
+                onSearchChange={setSearchQuery}
+                loading={counterpartiesLoading}
+              />
 
-              {counterpartiesLoading ? (
-                <div className="flex items-center justify-center p-8">
-                  <div className="text-center">
-                    <div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mx-auto mb-4"></div>
-                    <p className="text-white/60">Загружаем оптовиков...</p>
-                  </div>
-                </div>
-              ) : filteredWholesalers.length === 0 ? (
-                <div className="text-center p-8">
-                  <Users className="h-12 w-12 text-white/20 mx-auto mb-4" />
-                  <p className="text-white/60">
-                    {searchQuery ? 'Оптовики не найдены' : 'У вас нет контрагентов-оптовиков'}
-                  </p>
-                  <p className="text-white/40 text-sm mt-2">
-                    {searchQuery ? 'Попробуйте изменить условия поиска' : 'Добавьте оптовиков в разделе "Партнеры"'}
-                  </p>
-                </div>
-              ) : (
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-                  {filteredWholesalers.map((wholesaler: { 
-                    id: string; 
-                    name?: string; 
-                    fullName?: string; 
-                    inn?: string; 
-                    address?: string; 
-                    phones?: { value: string }[]; 
-                    emails?: { value: string }[] 
-                  }) => (
-                  <Card 
-                    key={wholesaler.id}
-                    className="bg-white/10 backdrop-blur border-white/20 p-4 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-[1.02]"
-                    onClick={() => {
-                      // Адаптируем данные под существующий интерфейс
-                      const adaptedWholesaler = {
-                        id: wholesaler.id,
-                        inn: wholesaler.inn || '',
-                        name: wholesaler.name || 'Неизвестная организация',
-                        fullName: wholesaler.fullName || wholesaler.name || 'Неизвестная организация',
-                        address: wholesaler.address || 'Адрес не указан',
-                        phone: wholesaler.phones?.[0]?.value,
-                        email: wholesaler.emails?.[0]?.value,
-                        rating: 4.5, // Временное значение
-                        productCount: 0, // Временное значение
-                        specialization: ['Оптовая торговля'] // Временное значение
-                      }
-                      setSelectedWholesaler(adaptedWholesaler)
-                    }}
-                  >
-                    <div className="space-y-3">
-                      <div className="flex items-start space-x-2">
-                        <div className="p-2 bg-blue-500/20 rounded-lg">
-                          <Building2 className="h-4 w-4 text-blue-400" />
-                        </div>
-                        <div className="flex-1 min-w-0">
-                          <h3 className="text-white font-semibold text-sm mb-1 truncate">
-                            {wholesaler.name || 'Неизвестная организация'}
-                          </h3>
-                          <p className="text-white/60 text-xs mb-1 truncate">
-                            {wholesaler.fullName || wholesaler.name}
-                          </p>
-                          {wholesaler.inn && (
-                            <p className="text-white/40 text-xs">
-                              ИНН: {wholesaler.inn}
-                            </p>
-                          )}
-                        </div>
-                      </div>
-
-                      <div className="space-y-1">
-                        {wholesaler.address && (
-                          <div className="flex items-center space-x-1">
-                            <MapPin className="h-3 w-3 text-gray-400" />
-                            <span className="text-white/80 text-xs truncate">{wholesaler.address}</span>
-                          </div>
-                        )}
-                        
-                        {wholesaler.phones?.[0]?.value && (
-                          <div className="flex items-center space-x-1">
-                            <Phone className="h-3 w-3 text-gray-400" />
-                            <span className="text-white/80 text-xs">{wholesaler.phones[0].value}</span>
-                          </div>
-                        )}
-
-                        {wholesaler.emails?.[0]?.value && (
-                          <div className="flex items-center space-x-1">
-                            <Mail className="h-3 w-3 text-gray-400" />
-                            <span className="text-white/80 text-xs truncate">{wholesaler.emails[0].value}</span>
-                          </div>
-                        )}
-                      </div>
-
-                      <div className="mt-2">
-                        <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs px-2 py-1">
-                          Контрагент
-                        </Badge>
-                      </div>
-
-                      <div className="pt-2 border-t border-white/10">
-                        <p className="text-white/60 text-xs">ИНН: {wholesaler.inn}</p>
-                      </div>
-                    </div>
-                  </Card>
-                ))}
-              </div>
-              )}
-
-              {/* Floating корзина */}
-              {selectedProducts.length > 0 && !showSummary && (
-                <div className="fixed bottom-6 right-6 z-50">
-                  <Button 
-                    size="lg"
-                    className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-2xl"
+              <FloatingCart
+                itemCount={selectedProducts.length}
+                totalAmount={getTotalAmount()}
+                formatCurrency={formatCurrency}
                     onClick={() => setShowSummary(true)}
-                  >
-                    <ShoppingCart className="h-5 w-5 mr-2" />
-                    {selectedProducts.length} • {formatCurrency(getTotalAmount())}
-                  </Button>
-                </div>
-              )}
+                visible={selectedProducts.length > 0 && !showSummary}
+              />
             </div>
           )}
         </div>
diff --git a/src/components/supplies/floating-cart.tsx b/src/components/supplies/floating-cart.tsx
new file mode 100644
index 0000000..917ac41
--- /dev/null
+++ b/src/components/supplies/floating-cart.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import React from 'react'
+import { Button } from '@/components/ui/button'
+import { ShoppingCart } from 'lucide-react'
+
+interface FloatingCartProps {
+  itemCount: number
+  totalAmount: number
+  formatCurrency: (amount: number) => string
+  onClick: () => void
+  visible: boolean
+}
+
+export function FloatingCart({ 
+  itemCount, 
+  totalAmount, 
+  formatCurrency, 
+  onClick, 
+  visible 
+}: FloatingCartProps) {
+  if (!visible || itemCount === 0) {
+    return null
+  }
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50">
+      <Button 
+        size="lg"
+        className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-2xl"
+        onClick={onClick}
+      >
+        <ShoppingCart className="h-5 w-5 mr-2" />
+        {itemCount} • {formatCurrency(totalAmount)}
+      </Button>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/supplies/product-card.tsx b/src/components/supplies/product-card.tsx
new file mode 100644
index 0000000..fd1072d
--- /dev/null
+++ b/src/components/supplies/product-card.tsx
@@ -0,0 +1,183 @@
+"use client"
+
+import React from 'react'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { 
+  Plus,
+  Minus,
+  Eye,
+  Heart,
+  ShoppingCart
+} from 'lucide-react'
+
+import { WholesalerProduct } from './types'
+
+interface ProductCardProps {
+  product: WholesalerProduct
+  selectedQuantity: number
+  onQuantityChange: (quantity: number) => void
+  formatCurrency: (amount: number) => string
+}
+
+export function ProductCard({ 
+  product, 
+  selectedQuantity, 
+  onQuantityChange, 
+  formatCurrency 
+}: ProductCardProps) {
+  const discountedPrice = product.discount 
+    ? product.price * (1 - product.discount / 100)
+    : product.price
+
+  const handleQuantityChange = (newQuantity: number) => {
+    const clampedQuantity = Math.max(0, Math.min(product.quantity, newQuantity))
+    onQuantityChange(clampedQuantity)
+  }
+
+  return (
+    <Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden group hover:bg-white/15 hover:border-white/30 transition-all duration-300 hover:scale-105 hover:shadow-2xl">
+      <div className="aspect-square relative bg-white/5 overflow-hidden">
+        <img
+          src={product.mainImage || '/api/placeholder/400/400'}
+          alt={product.name}
+          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+        />
+        
+        {/* Количество в наличии */}
+        <div className="absolute top-2 right-2">
+          <Badge className={`${
+            product.quantity > 50 
+              ? 'bg-green-500/80' 
+              : product.quantity > 10 
+                ? 'bg-yellow-500/80' 
+                : 'bg-red-500/80'
+          } text-white border-0 backdrop-blur text-xs`}>
+            {product.quantity}
+          </Badge>
+        </div>
+
+        {/* Скидка */}
+        {product.discount && (
+          <div className="absolute top-2 left-2">
+            <Badge className="bg-red-500/80 text-white border-0 backdrop-blur text-xs">
+              -{product.discount}%
+            </Badge>
+          </div>
+        )}
+
+        {/* Overlay с кнопками */}
+        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+          <div className="flex space-x-2">
+            <Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
+              <Eye className="h-4 w-4" />
+            </Button>
+            <Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
+              <Heart className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+      
+      <div className="p-3 space-y-3">
+        {/* Заголовок и бренд */}
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            {product.brand && (
+              <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
+                {product.brand}
+              </Badge>
+            )}
+            <div className="flex items-center space-x-1">
+              {product.isNew && (
+                <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                  NEW
+                </Badge>
+              )}
+              {product.isBestseller && (
+                <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
+                  HIT
+                </Badge>
+              )}
+            </div>
+          </div>
+          <h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight">
+            {product.name}
+          </h3>
+        </div>
+
+        {/* Основная характеристика */}
+        <div className="text-white/60 text-xs">
+          {product.color && <span className="text-white">{product.color}</span>}
+          {product.size && <span className="text-white ml-2">{product.size}</span>}
+        </div>
+
+        {/* Цена */}
+        <div className="pt-2 border-t border-white/10">
+          <div className="flex items-center space-x-2">
+            <div className="text-white font-bold text-lg">
+              {formatCurrency(discountedPrice)}
+            </div>
+            {product.discount && (
+              <div className="text-white/40 text-sm line-through">
+                {formatCurrency(product.price)}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Управление количеством */}
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleQuantityChange(selectedQuantity - 1)}
+            disabled={selectedQuantity === 0}
+            className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
+          >
+            <Minus className="h-3 w-3" />
+          </Button>
+          <input
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]*"
+            value={selectedQuantity}
+            onChange={(e) => {
+              const value = e.target.value.replace(/[^0-9]/g, '')
+              const numValue = parseInt(value) || 0
+              handleQuantityChange(numValue)
+            }}
+            onFocus={(e) => e.target.select()}
+            className="h-8 w-12 text-center bg-white/10 border border-white/20 text-white text-sm rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+          />
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleQuantityChange(selectedQuantity + 1)}
+            disabled={selectedQuantity >= product.quantity}
+            className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
+          >
+            <Plus className="h-3 w-3" />
+          </Button>
+          
+          {selectedQuantity > 0 && (
+            <Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
+              <ShoppingCart className="h-3 w-3 mr-1" />
+              {selectedQuantity}
+            </Badge>
+          )}
+        </div>
+
+        {/* Сумма для выбранного товара */}
+        {selectedQuantity > 0 && (
+          <div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-2">
+            <div className="text-green-300 text-xs font-medium text-center">
+              {formatCurrency(discountedPrice * selectedQuantity)}
+            </div>
+          </div>
+        )}
+      </div>
+    </Card>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/supplies/product-grid.tsx b/src/components/supplies/product-grid.tsx
new file mode 100644
index 0000000..c0fc6e2
--- /dev/null
+++ b/src/components/supplies/product-grid.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import React from 'react'
+import { ProductCard } from './product-card'
+import { Package } from 'lucide-react'
+import { WholesalerProduct } from './types'
+
+interface ProductGridProps {
+  products: WholesalerProduct[]
+  selectedProducts: Record<string, number>
+  onQuantityChange: (productId: string, quantity: number) => void
+  formatCurrency: (amount: number) => string
+  loading?: boolean
+}
+
+export function ProductGrid({ 
+  products, 
+  selectedProducts, 
+  onQuantityChange, 
+  formatCurrency,
+  loading = false
+}: ProductGridProps) {
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mx-auto mb-4"></div>
+          <p className="text-white/60">Загружаем товары...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (products.length === 0) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="text-center">
+          <Package className="h-12 w-12 text-white/20 mx-auto mb-4" />
+          <p className="text-white/60">У этого оптовика нет товаров</p>
+          <p className="text-white/40 text-sm mt-2">Выберите другого оптовика</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
+      {products.map((product) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          selectedQuantity={selectedProducts[product.id] || 0}
+          onQuantityChange={(quantity) => onQuantityChange(product.id, quantity)}
+          formatCurrency={formatCurrency}
+        />
+      ))}
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/supplies/tabs-header.tsx b/src/components/supplies/tabs-header.tsx
new file mode 100644
index 0000000..eaad07d
--- /dev/null
+++ b/src/components/supplies/tabs-header.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import React from 'react'
+import { Button } from '@/components/ui/button'
+import { 
+  ArrowLeft,
+  ShoppingCart,
+  Users
+} from 'lucide-react'
+
+interface TabsHeaderProps {
+  activeTab: 'cards' | 'wholesaler'
+  onTabChange: (tab: 'cards' | 'wholesaler') => void
+  onBack: () => void
+  cartInfo?: {
+    itemCount: number
+    totalAmount: number
+    formatCurrency: (amount: number) => string
+  }
+  onCartClick?: () => void
+}
+
+export function TabsHeader({ 
+  activeTab, 
+  onTabChange, 
+  onBack, 
+  cartInfo,
+  onCartClick 
+}: TabsHeaderProps) {
+  return (
+    <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center space-x-4">
+        <Button 
+          variant="ghost" 
+          size="sm"
+          onClick={onBack}
+          className="text-white/60 hover:text-white hover:bg-white/10"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Назад
+        </Button>
+        <h1 className="text-2xl font-bold text-white">Создание поставки</h1>
+        
+        {/* Кнопка корзины */}
+        {cartInfo && cartInfo.itemCount > 0 && onCartClick && (
+          <Button 
+            onClick={onCartClick}
+            className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
+          >
+            <ShoppingCart className="h-4 w-4 mr-2" />
+            Корзина ({cartInfo.itemCount})
+            {activeTab === 'wholesaler' && ` • ${cartInfo.formatCurrency(cartInfo.totalAmount)}`}
+          </Button>
+        )}
+      </div>
+      
+      <div>
+        <div className="grid grid-cols-2 bg-white/10 backdrop-blur border border-white/20 rounded-lg p-1">
+          <button
+            onClick={() => onTabChange('cards')}
+            className={`px-4 py-2 text-sm rounded transition-all ${
+              activeTab === 'cards' 
+                ? 'bg-white/20 text-white' 
+                : 'text-white/60 hover:text-white hover:bg-white/10'
+            }`}
+          >
+            <ShoppingCart className="h-4 w-4 mr-1 inline" />
+            Карточки
+          </button>
+          <button
+            onClick={() => onTabChange('wholesaler')}
+            className={`px-4 py-2 text-sm rounded transition-all ${
+              activeTab === 'wholesaler' 
+                ? 'bg-white/20 text-white' 
+                : 'text-white/60 hover:text-white hover:bg-white/10'
+            }`}
+          >
+            <Users className="h-4 w-4 mr-1 inline" />
+            Оптовики
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/supplies/types.ts b/src/components/supplies/types.ts
new file mode 100644
index 0000000..c862f3f
--- /dev/null
+++ b/src/components/supplies/types.ts
@@ -0,0 +1,50 @@
+export interface WholesalerForCreation {
+  id: string
+  inn: string
+  name: string
+  fullName: string
+  address: string
+  phone?: string
+  email?: string
+  rating: number
+  productCount: number
+  avatar?: string
+  specialization: string[]
+}
+
+export interface WholesalerProduct {
+  id: string
+  name: string
+  article: string
+  description: string
+  price: number
+  quantity: number
+  category: string
+  brand?: string
+  color?: string
+  size?: string
+  weight?: number
+  dimensions?: string
+  material?: string
+  images: string[]
+  mainImage?: string
+  discount?: number
+  isNew?: boolean
+  isBestseller?: boolean
+}
+
+export interface SelectedProduct extends WholesalerProduct {
+  selectedQuantity: number
+  wholesalerId: string
+  wholesalerName: string
+}
+
+export interface CounterpartyWholesaler {
+  id: string
+  inn?: string
+  name?: string
+  fullName?: string
+  address?: string
+  phones?: { value: string }[]
+  emails?: { value: string }[]
+} 
\ No newline at end of file
diff --git a/src/components/supplies/wb-product-cards.tsx b/src/components/supplies/wb-product-cards.tsx
index 3bf2bcb..8596658 100644
--- a/src/components/supplies/wb-product-cards.tsx
+++ b/src/components/supplies/wb-product-cards.tsx
@@ -8,8 +8,10 @@ import { Badge } from '@/components/ui/badge'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { Calendar as CalendarComponent } from '@/components/ui/calendar'
+
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import DatePicker from "react-datepicker"
+import "react-datepicker/dist/react-datepicker.css"
 import { Sidebar } from '@/components/dashboard/sidebar'
 import { useSidebar } from '@/hooks/useSidebar'
 import { 
@@ -17,7 +19,7 @@ import {
   Plus, 
   Minus, 
   ShoppingCart, 
-  Calendar,
+  Calendar as CalendarIcon,
   Phone,
   User,
   MapPin,
@@ -42,6 +44,8 @@ import { SelectedCard, FulfillmentService, ConsumableService, WildberriesCard }
 
 
 
+
+
 interface Organization {
   id: string
   name?: string
@@ -52,17 +56,29 @@ interface Organization {
 interface WBProductCardsProps {
   onBack: () => void
   onComplete: (selectedCards: SelectedCard[]) => void
+  showSummary?: boolean
+  setShowSummary?: (show: boolean) => void
+  selectedCards?: SelectedCard[]
+  setSelectedCards?: (cards: SelectedCard[]) => void
 }
 
-export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
+export function WBProductCards({ onBack, onComplete, showSummary: externalShowSummary, setShowSummary: externalSetShowSummary, selectedCards: externalSelectedCards, setSelectedCards: externalSetSelectedCards }: WBProductCardsProps) {
   const { user } = useAuth()
   const { getSidebarMargin } = useSidebar()
   const [searchTerm, setSearchTerm] = useState('')
   const [loading, setLoading] = useState(false)
   const [wbCards, setWbCards] = useState<WildberriesCard[]>([])
   const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([]) // Товары в корзине
+  
+  // Используем внешнее состояние если передано
+  const actualSelectedCards = externalSelectedCards !== undefined ? externalSelectedCards : selectedCards
+  const actualSetSelectedCards = externalSetSelectedCards || setSelectedCards
   const [preparingCards, setPreparingCards] = useState<SelectedCard[]>([]) // Товары, готовящиеся к добавлению
   const [showSummary, setShowSummary] = useState(false)
+  
+  // Используем внешнее состояние если передано
+  const actualShowSummary = externalShowSummary !== undefined ? externalShowSummary : showSummary
+  const actualSetShowSummary = externalSetShowSummary || setShowSummary
   const [globalDeliveryDate, setGlobalDeliveryDate] = useState<Date | undefined>(undefined)
   const [fulfillmentServices, setFulfillmentServices] = useState<FulfillmentService[]>([])
   const [organizationServices, setOrganizationServices] = useState<{[orgId: string]: Array<{id: string, name: string, description?: string, price: number}>}>({})
@@ -243,7 +259,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
 
   // Автоматически загружаем услуги и расходники для уже выбранных организаций
   useEffect(() => {
-    selectedCards.forEach(sc => {
+    actualSelectedCards.forEach(sc => {
       if (sc.selectedFulfillmentOrg && !organizationServices[sc.selectedFulfillmentOrg]) {
         loadOrganizationServices(sc.selectedFulfillmentOrg)
       }
@@ -541,24 +557,22 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
       return
     }
 
-    setSelectedCards(prev => {
-      const newCards = [...prev]
-      validCards.forEach(prepCard => {
-        const cardWithDate = {
-          ...prepCard,
-          deliveryDate: globalDeliveryDate.toISOString().split('T')[0]
-        }
-        const existingIndex = newCards.findIndex(sc => sc.card.nmID === prepCard.card.nmID)
-        if (existingIndex >= 0) {
-          // Обновляем существующий товар
-          newCards[existingIndex] = cardWithDate
-        } else {
-          // Добавляем новый товар
-          newCards.push(cardWithDate)
-        }
-      })
-      return newCards
+    const newCards = [...actualSelectedCards]
+    validCards.forEach(prepCard => {
+      const cardWithDate = {
+        ...prepCard,
+        deliveryDate: globalDeliveryDate.toISOString().split('T')[0]
+      }
+      const existingIndex = newCards.findIndex(sc => sc.card.nmID === prepCard.card.nmID)
+      if (existingIndex >= 0) {
+        // Обновляем существующий товар
+        newCards[existingIndex] = cardWithDate
+      } else {
+        // Добавляем новый товар
+        newCards.push(cardWithDate)
+      }
     })
+    actualSetSelectedCards(newCards)
 
     // Очищаем подготовленные товары
     setPreparingCards([])
@@ -621,7 +635,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
   }
 
   const getTotalAmount = () => {
-    return selectedCards.reduce((sum, sc) => {
+    return actualSelectedCards.reduce((sum, sc) => {
       const additionalCostPerUnit = calculateAdditionalCostPerUnit(sc)
       const totalCostPerUnit = (sc.customPrice / sc.selectedQuantity) + additionalCostPerUnit
       const totalCostForAllItems = totalCostPerUnit * sc.selectedQuantity
@@ -630,7 +644,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
   }
 
   const getTotalItems = () => {
-    return selectedCards.reduce((sum, sc) => sum + sc.selectedQuantity, 0)
+    return actualSelectedCards.reduce((sum, sc) => sum + sc.selectedQuantity, 0)
   }
 
   // Функция больше не нужна, так как услуги выбираются индивидуально
@@ -667,7 +681,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
     try {
       const supplyInput = {
         deliveryDate: selectedCards[0]?.deliveryDate || null,
-        cards: selectedCards.map(sc => ({
+        cards: actualSelectedCards.map(sc => ({
           nmId: sc.card.nmID.toString(),
           vendorCode: sc.card.vendorCode,
           title: sc.card.title,
@@ -689,7 +703,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
     }
   }
 
-  if (showSummary) {
+  if (actualShowSummary) {
     return (
       <div className="h-screen flex overflow-hidden">
         <Sidebar />
@@ -700,30 +714,115 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
                 <Button 
                   variant="ghost" 
                   size="sm"
-                  onClick={() => setShowSummary(false)}
+                  onClick={() => actualSetShowSummary(false)}
                   className="text-white/60 hover:text-white hover:bg-white/10"
                 >
                   <ArrowLeft className="h-4 w-4 mr-2" />
-                  Назад к товарам
+                  Назад
                 </Button>
                 <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Сводка заказа</h2>
-                  <p className="text-white/60">Проверьте данные перед созданием поставки</p>
+                  <h2 className="text-2xl font-bold text-white mb-1">Корзина</h2>
+                  <p className="text-white/60">{actualSelectedCards.length} карточек товаров</p>
                 </div>
               </div>
-              <Button 
-                variant="ghost" 
-                size="sm"
-                onClick={onBack}
-                className="text-white/60 hover:text-white hover:bg-white/10"
-              >
-                Отмена
-              </Button>
             </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <div className="lg:col-span-2 space-y-4">
-            {selectedCards.map((sc) => {
+        {/* Массовое назначение поставщиков */}
+        <Card className="bg-blue-500/10 backdrop-blur border-blue-500/20 p-4 mb-6">
+          <h3 className="text-white font-semibold mb-4">Быстрое назначение</h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div>
+              <label className="text-white/60 text-sm mb-2 block">Поставщик услуг для всех товаров:</label>
+              <Select onValueChange={(value) => {
+                if (value && value !== 'none') {
+                  // Загружаем услуги для выбранной организации
+                  loadOrganizationServices(value)
+                  
+                  actualSelectedCards.forEach(sc => {
+                    updateCardSelection(sc.card, 'selectedFulfillmentOrg', value)
+                    // Сбрасываем выбранные услуги при смене организации
+                    updateCardSelection(sc.card, 'selectedFulfillmentServices', [])
+                  })
+                }
+              }}>
+                <SelectTrigger className="bg-white/5 border-white/20 text-white">
+                  <SelectValue placeholder="Выберите поставщика" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">Не выбран</SelectItem>
+                  {((counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')).map((org: Organization) => (
+                    <SelectItem key={org.id} value={org.id}>
+                      {org.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            
+            <div>
+              <label className="text-white/60 text-sm mb-2 block">Поставщик расходников для всех:</label>
+              <Select onValueChange={(value) => {
+                if (value && value !== 'none') {
+                  // Загружаем расходники для выбранной организации
+                  loadOrganizationSupplies(value)
+                  
+                  actualSelectedCards.forEach(sc => {
+                    updateCardSelection(sc.card, 'selectedConsumableOrg', value)
+                    // Сбрасываем выбранные расходники при смене организации
+                    updateCardSelection(sc.card, 'selectedConsumableServices', [])
+                  })
+                }
+              }}>
+                <SelectTrigger className="bg-white/5 border-white/20 text-white">
+                  <SelectValue placeholder="Выберите поставщика" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">Не выбран</SelectItem>
+                  {((counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')).map((org: Organization) => (
+                    <SelectItem key={org.id} value={org.id}>
+                      {org.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            
+            <div>
+              <label className="text-white/60 text-sm mb-2 block">Дата поставки для всех:</label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <button
+                    className="w-full bg-white/5 border border-white/20 text-white hover:bg-white/10 justify-start text-left font-normal h-10 px-3 py-2 rounded-md flex items-center transition-colors"
+                  >
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {globalDeliveryDate ? format(globalDeliveryDate, "dd.MM.yyyy") : "Выберите дату"}
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0">
+                  <DatePicker
+                    selected={globalDeliveryDate}
+                    onChange={(date: Date | null) => {
+                      setGlobalDeliveryDate(date || undefined)
+                      if (date) {
+                        const dateString = date.toISOString().split('T')[0]
+                        actualSelectedCards.forEach(sc => {
+                          updateCardSelection(sc.card, 'deliveryDate', dateString)
+                        })
+                      }
+                    }}
+                    minDate={new Date()}
+                    inline
+                    locale="ru"
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        </Card>
+
+        <div className="grid grid-cols-1 xl:grid-cols-4 gap-6">
+          <div className="xl:col-span-3 space-y-4">
+            {actualSelectedCards.map((sc) => {
               const fulfillmentOrgs = (counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')
               const consumableOrgs = (counterpartiesData?.myCounterparties || []).filter((org: Organization) => org.type === 'FULFILLMENT')
 
@@ -962,21 +1061,21 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
             })}
           </div>
 
-          <div className="lg:col-span-1">
-            <Card className="bg-white/10 backdrop-blur border-white/20 p-6 sticky top-4">
+          <div className="xl:col-span-1">
+            <Card className="bg-white/10 backdrop-blur border-white/20 p-4 sticky top-4">
               <h3 className="text-white font-semibold text-lg mb-4">Итого</h3>
               <div className="space-y-3">
-                <div className="flex justify-between">
+                <div className="flex justify-between text-sm">
                   <span className="text-white/60">Товаров:</span>
                   <span className="text-white">{getTotalItems()}</span>
                 </div>
-                <div className="flex justify-between">
+                <div className="flex justify-between text-sm">
                   <span className="text-white/60">Карточек:</span>
-                  <span className="text-white">{selectedCards.length}</span>
+                  <span className="text-white">{actualSelectedCards.length}</span>
                 </div>
                 <div className="border-t border-white/20 pt-3 flex justify-between">
                   <span className="text-white font-semibold">Общая сумма:</span>
-                  <span className="text-white font-bold text-xl">{formatCurrency(getTotalAmount())}</span>
+                  <span className="text-white font-bold text-lg">{formatCurrency(getTotalAmount())}</span>
                 </div>
                 <Button 
                   className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
@@ -998,18 +1097,6 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-end">
-        
-        {selectedCards.length > 0 && (
-          <Button 
-            onClick={() => setShowSummary(true)}
-            className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
-          >
-            <ShoppingCart className="h-4 w-4 mr-2" />
-            Корзина ({getTotalItems()})
-          </Button>
-        )}
-      </div>
 
       {/* Поиск */}
       {/* Поиск товаров и выбор даты поставки */}
@@ -1030,62 +1117,26 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
           <div className="w-44">
             <Popover>
               <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="w-full justify-start text-left font-normal bg-white/5 border-white/20 text-white hover:bg-white/10 hover:text-white h-9 text-xs"
+                <button
+                  className="w-full justify-start text-left font-normal bg-white/5 border border-white/20 text-white hover:bg-white/10 h-9 text-xs px-3 py-2 rounded-md flex items-center transition-colors"
                 >
-                  <Calendar className="mr-1 h-3 w-3" />
+                  <CalendarIcon className="mr-1 h-3 w-3" />
                   {globalDeliveryDate ? (
                     format(globalDeliveryDate, "dd.MM.yy", { locale: ru })
                   ) : (
                     <span className="text-white/50">Дата поставки</span>
                   )}
-                </Button>
+                </button>
               </PopoverTrigger>
-              <PopoverContent className="w-72 p-0 glass-card" align="end">
-                <div className="p-4 border-b border-white/10">
-                  <p className="text-white font-medium text-sm">Дата поставки</p>
-                  <p className="text-white/60 text-xs">Выберите дату для всех товаров</p>
-                </div>
-                <CalendarComponent
-                  mode="single"
-                  selected={globalDeliveryDate}
-                  onSelect={setGlobalDeliveryDate}
-                  disabled={(date) => date < new Date()}
-                  initialFocus
-                  locale={ru}
-                  className="glass-card border-0 p-3"
-                  classNames={{
-                    months: "flex flex-col space-y-3",
-                    month: "space-y-3",
-                    caption: "flex justify-center pt-2 relative items-center",
-                    caption_label: "text-sm font-medium text-white",
-                    nav: "space-x-1 flex items-center",
-                    nav_button: "h-7 w-7 glass-secondary text-white hover:bg-white/20 hover:text-white rounded-md border-white/20",
-                    nav_button_previous: "absolute left-1",
-                    nav_button_next: "absolute right-1",
-                    table: "w-full border-collapse space-y-1",
-                    head_row: "flex",
-                    head_cell: "text-white/70 rounded-md w-9 font-normal text-xs",
-                    row: "flex w-full mt-2",
-                    cell: "h-9 w-9 text-center text-xs p-0 relative focus-within:relative focus-within:z-20",
-                    day: "h-9 w-9 p-0 font-normal text-white hover:bg-white/15 hover:text-white rounded-md transition-colors",
-                    day_selected: "glass-button text-white hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500",
-                    day_today: "bg-white/15 text-white font-semibold border border-white/30",
-                    day_outside: "text-white/30 opacity-50",
-                    day_disabled: "text-white/20 opacity-30",
-                  }}
-                />
-                {globalDeliveryDate && (
-                  <div className="p-4 border-t border-white/10">
-                    <Badge className="glass-secondary text-white border-white/20 text-xs">
-                      <Calendar className="h-3 w-3 mr-1" />
-                      {format(globalDeliveryDate, "dd MMMM yyyy", { locale: ru })}
-                    </Badge>
-                  </div>
-                )}
-              </PopoverContent>
+                                            <PopoverContent className="w-auto p-0" align="end">
+                 <DatePicker
+                   selected={globalDeliveryDate}
+                   onChange={(date: Date | null) => setGlobalDeliveryDate(date || undefined)}
+                   minDate={new Date()}
+                   inline
+                   locale="ru"
+                 />
+               </PopoverContent>
             </Popover>
           </div>
           
@@ -1127,7 +1178,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
           {wbCards.map((card) => {
             const selectedQuantity = getSelectedQuantity(card)
             const isSelected = selectedQuantity > 0
-            const selectedCard = selectedCards.find(sc => sc.card.nmID === card.nmID)
+            const selectedCard = actualSelectedCards.find(sc => sc.card.nmID === card.nmID)
 
             return (
               <Card key={card.nmID} className={`bg-white/10 backdrop-blur border-white/20 transition-all hover:scale-105 hover:shadow-2xl group ${isSelected ? 'ring-2 ring-purple-500/50 bg-purple-500/10' : ''} relative overflow-hidden`}>
@@ -1210,9 +1261,9 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
                           updateCardSelection(card, 'selectedQuantity', newQuantity)
                         }}
                         disabled={selectedQuantity <= 0}
-                        className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20 disabled:opacity-50"
+                        className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20 disabled:opacity-50 flex-shrink-0"
                       >
-                        <Minus className="h-3 w-3" />
+                        <Minus className="h-2.5 w-2.5" />
                       </Button>
                       <input
                         type="text"
@@ -1225,8 +1276,8 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
                           updateCardSelection(card, 'selectedQuantity', numValue)
                         }}
                         onFocus={(e) => e.target.select()}
-                        className="flex-1 h-7 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                        placeholder="Кол-во"
+                        className="flex-1 h-6 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none min-w-0"
+                        placeholder="0"
                       />
                       <Button
                         variant="ghost"
@@ -1235,9 +1286,9 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
                           const newQuantity = selectedQuantity + 1
                           updateCardSelection(card, 'selectedQuantity', newQuantity)
                         }}
-                        className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
+                        className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20 flex-shrink-0"
                       >
-                        <Plus className="h-3 w-3" />
+                        <Plus className="h-2.5 w-2.5" />
                       </Button>
                     </div>
 
@@ -1253,8 +1304,8 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
                           updateCardSelection(card, 'customPrice', totalPrice)
                         }}
                         onFocus={(e) => e.target.select()}
-                        className="w-full h-7 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-green-500 focus:border-transparent"
-                        placeholder={`Общая цена за ${selectedQuantity} шт`}
+                        className="w-full h-6 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-green-500 focus:border-transparent"
+                        placeholder={`Цена за ${selectedQuantity} шт`}
                       />
                     )}
 
diff --git a/src/components/supplies/wholesaler-card.tsx b/src/components/supplies/wholesaler-card.tsx
new file mode 100644
index 0000000..d79aa26
--- /dev/null
+++ b/src/components/supplies/wholesaler-card.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import React from 'react'
+import { Card } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { 
+  Building2,
+  MapPin,
+  Phone,
+  Mail
+} from 'lucide-react'
+import { WholesalerForCreation } from './types'
+
+interface WholesalerCardProps {
+  wholesaler: WholesalerForCreation
+  onClick: () => void
+}
+
+export function WholesalerCard({ wholesaler, onClick }: WholesalerCardProps) {
+  return (
+    <Card 
+      className="bg-white/10 backdrop-blur border-white/20 p-4 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-[1.02]"
+      onClick={onClick}
+    >
+      <div className="space-y-3">
+        <div className="flex items-start space-x-2">
+          <div className="p-2 bg-blue-500/20 rounded-lg">
+            <Building2 className="h-4 w-4 text-blue-400" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <h3 className="text-white font-semibold text-sm mb-1 truncate">
+              {wholesaler.name}
+            </h3>
+            <p className="text-white/60 text-xs mb-1 truncate">
+              {wholesaler.fullName}
+            </p>
+            <p className="text-white/40 text-xs">
+              ИНН: {wholesaler.inn}
+            </p>
+          </div>
+        </div>
+
+        <div className="space-y-1">
+          <div className="flex items-center space-x-1">
+            <MapPin className="h-3 w-3 text-gray-400" />
+            <span className="text-white/80 text-xs truncate">{wholesaler.address}</span>
+          </div>
+          
+          {wholesaler.phone && (
+            <div className="flex items-center space-x-1">
+              <Phone className="h-3 w-3 text-gray-400" />
+              <span className="text-white/80 text-xs">{wholesaler.phone}</span>
+            </div>
+          )}
+
+          {wholesaler.email && (
+            <div className="flex items-center space-x-1">
+              <Mail className="h-3 w-3 text-gray-400" />
+              <span className="text-white/80 text-xs truncate">{wholesaler.email}</span>
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-wrap gap-1">
+          {wholesaler.specialization.map((spec, index) => (
+            <Badge key={index} className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs">
+              {spec}
+            </Badge>
+          ))}
+        </div>
+
+        <div className="pt-2 border-t border-white/10 flex items-center justify-between">
+          <div>
+            <p className="text-white/60 text-xs">Товаров: {wholesaler.productCount}</p>
+            <p className="text-white/60 text-xs">Рейтинг: {wholesaler.rating}/5</p>
+          </div>
+          <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+            Контрагент
+          </Badge>
+        </div>
+      </div>
+    </Card>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/supplies/wholesaler-grid.tsx b/src/components/supplies/wholesaler-grid.tsx
new file mode 100644
index 0000000..9d5a44d
--- /dev/null
+++ b/src/components/supplies/wholesaler-grid.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import React from 'react'
+import { WholesalerCard } from './wholesaler-card'
+import { Input } from '@/components/ui/input'
+import { Users, Search } from 'lucide-react'
+import { WholesalerForCreation, CounterpartyWholesaler } from './types'
+
+interface WholesalerGridProps {
+  wholesalers: CounterpartyWholesaler[]
+  onWholesalerSelect: (wholesaler: WholesalerForCreation) => void
+  searchQuery: string
+  onSearchChange: (query: string) => void
+  loading?: boolean
+}
+
+export function WholesalerGrid({ 
+  wholesalers, 
+  onWholesalerSelect, 
+  searchQuery, 
+  onSearchChange,
+  loading = false 
+}: WholesalerGridProps) {
+  // Фильтруем оптовиков по поисковому запросу
+  const filteredWholesalers = wholesalers.filter((wholesaler) => 
+    wholesaler.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    wholesaler.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    wholesaler.inn?.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  const handleWholesalerClick = (wholesaler: CounterpartyWholesaler) => {
+    // Адаптируем данные под существующий интерфейс
+    const adaptedWholesaler: WholesalerForCreation = {
+      id: wholesaler.id,
+      inn: wholesaler.inn || '',
+      name: wholesaler.name || 'Неизвестная организация',
+      fullName: wholesaler.fullName || wholesaler.name || 'Неизвестная организация',
+      address: wholesaler.address || 'Адрес не указан',
+      phone: wholesaler.phones?.[0]?.value,
+      email: wholesaler.emails?.[0]?.value,
+      rating: 4.5, // Временное значение
+      productCount: 0, // Временное значение
+      specialization: ['Оптовая торговля'] // Временное значение
+    }
+    onWholesalerSelect(adaptedWholesaler)
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mx-auto mb-4"></div>
+          <p className="text-white/60">Загружаем оптовиков...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {/* Поиск */}
+      <div className="mb-4">
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-3 h-4 w-4 text-white/40" />
+          <Input
+            placeholder="Поиск оптовиков..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-10 glass-input text-white placeholder:text-white/40 h-10"
+          />
+        </div>
+      </div>
+
+      {filteredWholesalers.length === 0 ? (
+        <div className="text-center p-8">
+          <Users className="h-12 w-12 text-white/20 mx-auto mb-4" />
+          <p className="text-white/60">
+            {searchQuery ? 'Оптовики не найдены' : 'У вас нет контрагентов-оптовиков'}
+          </p>
+          <p className="text-white/40 text-sm mt-2">
+            {searchQuery ? 'Попробуйте изменить условия поиска' : 'Добавьте оптовиков в разделе "Партнеры"'}
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {filteredWholesalers.map((wholesaler) => {
+            const adaptedWholesaler: WholesalerForCreation = {
+              id: wholesaler.id,
+              inn: wholesaler.inn || '',
+              name: wholesaler.name || 'Неизвестная организация',
+              fullName: wholesaler.fullName || wholesaler.name || 'Неизвестная организация',
+              address: wholesaler.address || 'Адрес не указан',
+              phone: wholesaler.phones?.[0]?.value,
+              email: wholesaler.emails?.[0]?.value,
+              rating: 4.5,
+              productCount: 0,
+              specialization: ['Оптовая торговля']
+            }
+
+            return (
+              <WholesalerCard
+                key={wholesaler.id}
+                wholesaler={adaptedWholesaler}
+                onClick={() => handleWholesalerClick(wholesaler)}
+              />
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/supplies/wholesaler-products-page.tsx b/src/components/supplies/wholesaler-products-page.tsx
new file mode 100644
index 0000000..c1e61ce
--- /dev/null
+++ b/src/components/supplies/wholesaler-products-page.tsx
@@ -0,0 +1,134 @@
+"use client"
+
+import React from 'react'
+import { Button } from '@/components/ui/button'
+import { ProductGrid } from './product-grid'
+import { CartSummary } from './cart-summary'
+import { FloatingCart } from './floating-cart'
+import { Sidebar } from '@/components/dashboard/sidebar'
+import { useSidebar } from '@/hooks/useSidebar'
+import { ArrowLeft, Info } from 'lucide-react'
+import { WholesalerForCreation, WholesalerProduct, SelectedProduct } from './types'
+
+interface WholesalerProductsPageProps {
+  selectedWholesaler: WholesalerForCreation
+  products: WholesalerProduct[]
+  selectedProducts: SelectedProduct[]
+  onQuantityChange: (productId: string, quantity: number) => void
+  onBack: () => void
+  onCreateSupply: () => void
+  formatCurrency: (amount: number) => string
+  showSummary: boolean
+  setShowSummary: (show: boolean) => void
+  loading: boolean
+}
+
+export function WholesalerProductsPage({
+  selectedWholesaler,
+  products,
+  selectedProducts,
+  onQuantityChange,
+  onBack,
+  onCreateSupply,
+  formatCurrency,
+  showSummary,
+  setShowSummary,
+  loading
+}: WholesalerProductsPageProps) {
+  const { getSidebarMargin } = useSidebar()
+
+  const getSelectedQuantity = (productId: string): number => {
+    const selected = selectedProducts.find(p => p.id === productId && p.wholesalerId === selectedWholesaler.id)
+    return selected ? selected.selectedQuantity : 0
+  }
+
+  const selectedProductsMap = products.reduce((acc, product) => {
+    acc[product.id] = getSelectedQuantity(product.id)
+    return acc
+  }, {} as Record<string, number>)
+
+  const getTotalAmount = () => {
+    return selectedProducts.reduce((sum, product) => {
+      const discountedPrice = product.discount 
+        ? product.price * (1 - product.discount / 100)
+        : product.price
+      return sum + (discountedPrice * product.selectedQuantity)
+    }, 0)
+  }
+
+  const getTotalItems = () => {
+    return selectedProducts.reduce((sum, product) => sum + product.selectedQuantity, 0)
+  }
+
+  const handleRemoveProduct = (productId: string, wholesalerId: string) => {
+    onQuantityChange(productId, 0)
+  }
+
+  const handleCartQuantityChange = (productId: string, wholesalerId: string, quantity: number) => {
+    onQuantityChange(productId, quantity)
+  }
+
+  return (
+    <div className="h-screen flex overflow-hidden">
+      <Sidebar />
+      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
+        <div className="p-8">
+          <div className="flex items-center justify-between mb-8">
+            <div className="flex items-center space-x-4">
+              <Button 
+                variant="ghost" 
+                size="sm"
+                onClick={onBack}
+                className="text-white/60 hover:text-white hover:bg-white/10"
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                Назад
+              </Button>
+              <div>
+                <h1 className="text-3xl font-bold text-white mb-2">Товары оптовика</h1>
+                <p className="text-white/60">{selectedWholesaler.name} • {products.length} товаров</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-3">
+              <Button 
+                variant="ghost" 
+                size="sm"
+                onClick={() => setShowSummary(!showSummary)}
+                className="text-white/60 hover:text-white hover:bg-white/10"
+              >
+                <Info className="h-4 w-4 mr-2" />
+                Резюме ({selectedProducts.length})
+              </Button>
+            </div>
+          </div>
+
+          <CartSummary
+            selectedProducts={selectedProducts}
+            onQuantityChange={handleCartQuantityChange}
+            onRemoveProduct={handleRemoveProduct}
+            onCreateSupply={onCreateSupply}
+            onToggleVisibility={() => setShowSummary(false)}
+            formatCurrency={formatCurrency}
+            visible={showSummary && selectedProducts.length > 0}
+          />
+
+          <ProductGrid
+            products={products}
+            selectedProducts={selectedProductsMap}
+            onQuantityChange={onQuantityChange}
+            formatCurrency={formatCurrency}
+            loading={loading}
+          />
+
+          <FloatingCart
+            itemCount={selectedProducts.length}
+            totalAmount={getTotalAmount()}
+            formatCurrency={formatCurrency}
+            onClick={() => setShowSummary(!showSummary)}
+            visible={selectedProducts.length > 0 && !showSummary}
+          />
+        </div>
+      </main>
+    </div>
+  )
+} 
\ No newline at end of file