Добавлены новые зависимости для компонента dropdown-menu и обновлены соответствующие импорты. Изменены заголовки и логика отображения статистики в компонентах FulfillmentDetailedSuppliesTab и FulfillmentSuppliesTab для улучшения восприятия данных. Упрощена логика расчета эффективности в компоненте SuppliesConsumablesTab, удалены неиспользуемые поля.

package-lock.json

@@ -18,6 +18,7 @@
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.2",
         "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-popover": "^1.1.14",
         "@radix-ui/react-progress": "^1.1.7",
@@ -3033,6 +3034,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz",
+      "integrity": "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
@@ -3114,6 +3144,46 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.15.tgz",
+      "integrity": "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.14",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz",

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-progress": "^1.1.7",

src/app/supplies/create-consumables/page.tsx

@@ -0,0 +1,10 @@
+import { AuthGuard } from "@/components/auth-guard";
+import { CreateConsumablesSupplyPage } from "@/components/supplies/create-consumables-supply-page";
+
+export default function CreateConsumablesSupplyPageRoute() {
+  return (
+    <AuthGuard>
+      <CreateConsumablesSupplyPage />
+    </AuthGuard>
+  );
+}

src/components/fulfillment-supplies/fulfillment-supplies/fulfillment-detailed-supplies-tab.tsx

@@ -379,17 +379,17 @@ export function FulfillmentDetailedSuppliesTab() {
         />
 
         <StatsCard
-          title="С браком"
+          title="Активные поставки"
           value={
             mockFulfillmentConsumablesDetailed.filter(
-              (supply) => supply.defectTotal > 0
+              (supply) => supply.status === "delivered"
             ).length
           }
-          icon={AlertTriangle}
+          icon={Calendar}
-          iconColor="text-red-400"
+          iconColor="text-blue-400"
-          iconBg="bg-red-500/20"
+          iconBg="bg-blue-500/20"
-          trend={{ value: 2, isPositive: false }}
+          trend={{ value: 3, isPositive: true }}
-          subtitle="Дефектные материалы ФФ"
+          subtitle="Завершенные поставки"
         />
       </StatsGrid>
 
@@ -408,7 +408,6 @@ export function FulfillmentDetailedSuppliesTab() {
                 </th>
                 <th className="text-left p-4 text-white font-semibold">План</th>
                 <th className="text-left p-4 text-white font-semibold">Факт</th>
-                <th className="text-left p-4 text-white font-semibold">Брак</th>
                 <th className="text-left p-4 text-white font-semibold">
                   Цена расходников
                 </th>
@@ -473,17 +472,6 @@ export function FulfillmentDetailedSuppliesTab() {
                           {supply.actualTotal}
                         </span>
                       </td>
-                      <td className="p-4">
-                        <span
-                          className={`font-semibold ${
-                            supply.defectTotal > 0
-                              ? "text-red-400"
-                              : "text-white"
-                          }`}
-                        >
-                          {supply.defectTotal}
-                        </span>
-                      </td>
                       <td className="p-4">
                         <span className="text-green-400 font-semibold">
                           {formatCurrency(supply.totalConsumablesPrice)}

src/components/supplies/consumables-supplies/consumables-supplies-tab.tsx

@@ -371,12 +371,8 @@ export function SuppliesConsumablesTab() {
     return consumable.actualQty * consumable.unitPrice;
   };
 
-  const getEfficiencyBadge = (
+  const getEfficiencyBadge = (planned: number, actual: number) => {
-    planned: number,
+    const efficiency = (actual / planned) * 100;
-    actual: number,
-    defect: number
-  ) => {
-    const efficiency = ((actual - defect) / planned) * 100;
     if (efficiency >= 95) {
       return (
         <Badge className="bg-green-500/20 text-green-300 border-green-500/30 border">
@@ -455,15 +451,15 @@ export function SuppliesConsumablesTab() {
 
         <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
           <div className="flex items-center space-x-3">
-            <div className="p-2 bg-red-500/20 rounded-lg">
+            <div className="p-2 bg-blue-500/20 rounded-lg">
-              <AlertTriangle className="h-5 w-5 text-red-400" />
+              <Calendar className="h-5 w-5 text-blue-400" />
             </div>
             <div>
-              <p className="text-white/60 text-xs">С браком</p>
+              <p className="text-white/60 text-xs">Завершено</p>
               <p className="text-xl font-bold text-white">
                 {
                   mockConsumableSupplies.filter(
-                    (supply) => supply.defectTotal > 0
+                    (supply) => supply.status === "completed"
                   ).length
                 }
               </p>
@@ -487,7 +483,6 @@ export function SuppliesConsumablesTab() {
                 </th>
                 <th className="text-left p-4 text-white font-semibold">План</th>
                 <th className="text-left p-4 text-white font-semibold">Факт</th>
-                <th className="text-left p-4 text-white font-semibold">Брак</th>
                 <th className="text-left p-4 text-white font-semibold">
                   Цена расходников
                 </th>
@@ -543,17 +538,6 @@ export function SuppliesConsumablesTab() {
                           {supply.actualTotal}
                         </span>
                       </td>
-                      <td className="p-4">
-                        <span
-                          className={`font-semibold ${
-                            supply.defectTotal > 0
-                              ? "text-red-400"
-                              : "text-white"
-                          }`}
-                        >
-                          {supply.defectTotal}
-                        </span>
-                      </td>
                       <td className="p-4">
                         <span className="text-green-400 font-semibold">
                           {formatCurrency(supply.totalConsumablesPrice)}
@@ -646,19 +630,6 @@ export function SuppliesConsumablesTab() {
                                   )}
                                 </span>
                               </td>
-                              <td className="p-4">
-                                <span className="text-white/80">
-                                  {route.suppliers.reduce(
-                                    (sum, s) =>
-                                      sum +
-                                      s.consumables.reduce(
-                                        (cSum, c) => cSum + c.defectQty,
-                                        0
-                                      ),
-                                    0
-                                  )}
-                                </span>
-                              </td>
                               <td className="p-4">
                                 <span className="text-green-400 font-medium">
                                   {formatCurrency(route.totalConsumablesPrice)}
@@ -741,14 +712,6 @@ export function SuppliesConsumablesTab() {
                                           )}
                                         </span>
                                       </td>
-                                      <td className="p-4">
-                                        <span className="text-white/80">
-                                          {supplier.consumables.reduce(
-                                            (sum, c) => sum + c.defectQty,
-                                            0
-                                          )}
-                                        </span>
-                                      </td>
                                       <td className="p-4">
                                         <span className="text-green-400 font-medium">
                                           {formatCurrency(
@@ -832,17 +795,6 @@ export function SuppliesConsumablesTab() {
                                                   {consumable.actualQty}
                                                 </span>
                                               </td>
-                                              <td className="p-4">
-                                                <span
-                                                  className={`font-semibold ${
-                                                    consumable.defectQty > 0
-                                                      ? "text-red-400"
-                                                      : "text-white"
-                                                  }`}
-                                                >
-                                                  {consumable.defectQty}
-                                                </span>
-                                              </td>
                                               <td className="p-4">
                                                 <div className="text-white">
                                                   <div className="font-medium">
@@ -863,8 +815,7 @@ export function SuppliesConsumablesTab() {
                                               <td className="p-4">
                                                 {getEfficiencyBadge(
                                                   consumable.plannedQty,
-                                                  consumable.actualQty,
+                                                  consumable.actualQty
-                                                  consumable.defectQty
                                                 )}
                                               </td>
                                               <td className="p-4">
@@ -883,7 +834,7 @@ export function SuppliesConsumablesTab() {
                                             {isConsumableExpanded && (
                                               <tr>
                                                 <td
-                                                  colSpan={10}
+                                                  colSpan={9}
                                                   className="p-0"
                                                 >
                                                   <div className="bg-white/5 border-t border-white/10">

src/components/supplies/create-consumables-supply-page.tsx

@@ -0,0 +1,645 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useQuery, useMutation } from "@apollo/client";
+import { Sidebar } from "@/components/dashboard/sidebar";
+import { useSidebar } from "@/hooks/useSidebar";
+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 {
+  ArrowLeft,
+  Building2,
+  MapPin,
+  Phone,
+  Mail,
+  Star,
+  Search,
+  Package,
+  Plus,
+  Minus,
+  ShoppingCart,
+  Wrench,
+  Box,
+} from "lucide-react";
+import { GET_MY_COUNTERPARTIES, GET_ALL_PRODUCTS } from "@/graphql/queries";
+import { CREATE_SUPPLY_ORDER } from "@/graphql/mutations";
+import { OrganizationAvatar } from "@/components/market/organization-avatar";
+import { toast } from "sonner";
+import Image from "next/image";
+
+interface ConsumableSupplier {
+  id: string;
+  inn: string;
+  name?: string;
+  fullName?: string;
+  type: "FULFILLMENT" | "SELLER" | "LOGIST" | "WHOLESALE";
+  address?: string;
+  phones?: Array<{ value: string }>;
+  emails?: Array<{ value: string }>;
+  users?: Array<{ id: string; avatar?: string; managerName?: string }>;
+  createdAt: string;
+}
+
+interface ConsumableProduct {
+  id: string;
+  name: string;
+  description?: string;
+  price: number;
+  category?: { name: string };
+  images?: Array<{ url: string }>;
+  organization: {
+    id: string;
+    name: string;
+  };
+  stock?: number;
+  unit?: string;
+}
+
+interface SelectedConsumable {
+  id: string;
+  name: string;
+  price: number;
+  selectedQuantity: number;
+  unit?: string;
+  category?: string;
+  supplierId: string;
+  supplierName: string;
+}
+
+export function CreateConsumablesSupplyPage() {
+  const router = useRouter();
+  const { getSidebarMargin } = useSidebar();
+  const [selectedSupplier, setSelectedSupplier] =
+    useState<ConsumableSupplier | null>(null);
+  const [selectedConsumables, setSelectedConsumables] = useState<
+    SelectedConsumable[]
+  >([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [productSearchQuery, setProductSearchQuery] = useState("");
+  const [deliveryDate, setDeliveryDate] = useState("");
+  const [isCreatingSupply, setIsCreatingSupply] = useState(false);
+
+  // Загружаем контрагентов-поставщиков расходников
+  const { data: counterpartiesData, loading: counterpartiesLoading } = useQuery(
+    GET_MY_COUNTERPARTIES
+  );
+
+  // Загружаем товары для выбранного поставщика
+  const { data: productsData, loading: productsLoading } = useQuery(
+    GET_ALL_PRODUCTS,
+    {
+      skip: !selectedSupplier,
+      variables: { search: productSearchQuery || null, category: null },
+    }
+  );
+
+  // Мутация для создания заказа поставки расходников
+  const [createSupplyOrder] = useMutation(CREATE_SUPPLY_ORDER);
+
+  // Фильтруем только поставщиков расходников (оптовиков)
+  const consumableSuppliers = (
+    counterpartiesData?.myCounterparties || []
+  ).filter((org: ConsumableSupplier) => org.type === "WHOLESALE");
+
+  // Фильтруем поставщиков по поисковому запросу
+  const filteredSuppliers = consumableSuppliers.filter(
+    (supplier: ConsumableSupplier) =>
+      supplier.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      supplier.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      supplier.inn?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Фильтруем товары по выбранному поставщику
+  const supplierProducts = selectedSupplier
+    ? (productsData?.allProducts || []).filter(
+        (product: ConsumableProduct) =>
+          product.organization.id === selectedSupplier.id
+      )
+    : [];
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat("ru-RU", {
+      style: "currency",
+      currency: "RUB",
+      minimumFractionDigits: 0,
+    }).format(amount);
+  };
+
+  const renderStars = (rating: number = 4.5) => {
+    return Array.from({ length: 5 }, (_, i) => (
+      <Star
+        key={i}
+        className={`h-3 w-3 ${
+          i < Math.floor(rating)
+            ? "text-yellow-400 fill-current"
+            : "text-gray-400"
+        }`}
+      />
+    ));
+  };
+
+  const updateConsumableQuantity = (productId: string, quantity: number) => {
+    const product = supplierProducts.find(
+      (p: ConsumableProduct) => p.id === productId
+    );
+    if (!product || !selectedSupplier) return;
+
+    setSelectedConsumables((prev) => {
+      const existing = prev.find((p) => p.id === productId);
+
+      if (quantity === 0) {
+        // Удаляем расходник если количество 0
+        return prev.filter((p) => p.id !== productId);
+      }
+
+      if (existing) {
+        // Обновляем количество существующего расходника
+        return prev.map((p) =>
+          p.id === productId ? { ...p, selectedQuantity: quantity } : p
+        );
+      } else {
+        // Добавляем новый расходник
+        return [
+          ...prev,
+          {
+            id: product.id,
+            name: product.name,
+            price: product.price,
+            selectedQuantity: quantity,
+            unit: product.unit || "шт",
+            category: product.category?.name || "Расходники",
+            supplierId: selectedSupplier.id,
+            supplierName:
+              selectedSupplier.name || selectedSupplier.fullName || "Поставщик",
+          },
+        ];
+      }
+    });
+  };
+
+  const getSelectedQuantity = (productId: string): number => {
+    const selected = selectedConsumables.find((p) => p.id === productId);
+    return selected ? selected.selectedQuantity : 0;
+  };
+
+  const getTotalAmount = () => {
+    return selectedConsumables.reduce(
+      (sum, consumable) => sum + consumable.price * consumable.selectedQuantity,
+      0
+    );
+  };
+
+  const getTotalItems = () => {
+    return selectedConsumables.reduce(
+      (sum, consumable) => sum + consumable.selectedQuantity,
+      0
+    );
+  };
+
+  const handleCreateSupply = async () => {
+    if (!selectedSupplier || selectedConsumables.length === 0 || !deliveryDate) {
+      toast.error("Заполните все обязательные поля");
+      return;
+    }
+
+    setIsCreatingSupply(true);
+
+    try {
+      const result = await createSupplyOrder({
+        variables: {
+          input: {
+            partnerId: selectedSupplier.id,
+            deliveryDate: deliveryDate,
+            items: selectedConsumables.map((consumable) => ({
+              productId: consumable.id,
+              quantity: consumable.selectedQuantity,
+            })),
+          },
+        },
+      });
+
+      if (result.data?.createSupplyOrder?.success) {
+        toast.success("Поставка расходников создана успешно!");
+        router.push("/supplies");
+      } else {
+        toast.error(
+          result.data?.createSupplyOrder?.message || "Ошибка при создании поставки"
+        );
+      }
+    } catch (error) {
+      console.error("Error creating consumables supply:", error);
+      toast.error("Ошибка при создании поставки расходников");
+    } finally {
+      setIsCreatingSupply(false);
+    }
+  };
+
+  // Если выбран поставщик, показываем его товары
+  if (selectedSupplier) {
+    return (
+      <div className="h-screen flex overflow-hidden">
+        <Sidebar />
+        <main
+          className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}
+        >
+          <div className="h-full w-full flex flex-col">
+            {/* Заголовок с навигацией */}
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center space-x-3">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setSelectedSupplier(null)}
+                  className="text-white/60 hover:text-white hover:bg-white/10"
+                >
+                  <ArrowLeft className="h-4 w-4 mr-2" />
+                  Назад к поставщикам
+                </Button>
+                <div>
+                  <h1 className="text-2xl font-bold text-white mb-1">
+                    Расходники поставщика
+                  </h1>
+                  <p className="text-white/60">
+                    {selectedSupplier.name || selectedSupplier.fullName}
+                  </p>
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => router.push("/supplies")}
+                className="text-white/60 hover:text-white hover:bg-white/10"
+              >
+                Отмена
+              </Button>
+            </div>
+
+            {/* Поиск по товарам */}
+            <div className="mb-4">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
+                <Input
+                  placeholder="Поиск расходников..."
+                  value={productSearchQuery}
+                  onChange={(e) => setProductSearchQuery(e.target.value)}
+                  className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
+                />
+              </div>
+            </div>
+
+            {/* Основной контент */}
+            <div className="flex-1 overflow-hidden flex gap-4">
+              {/* Список товаров */}
+              <div className="flex-1 overflow-y-auto">
+                {productsLoading ? (
+                  <div className="text-center py-12">
+                    <p className="text-white/60">Загрузка расходников...</p>
+                  </div>
+                ) : supplierProducts.length === 0 ? (
+                  <div className="text-center py-12">
+                    <Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
+                    <p className="text-white/60">
+                      У данного поставщика нет доступных расходников
+                    </p>
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {supplierProducts.map((product: ConsumableProduct) => {
+                      const selectedQuantity = getSelectedQuantity(product.id);
+                      return (
+                        <Card
+                          key={product.id}
+                          className="bg-white/10 backdrop-blur border-white/20 p-4"
+                        >
+                          <div className="space-y-3">
+                            {/* Изображение товара */}
+                            <div className="aspect-square bg-white/5 rounded-lg overflow-hidden">
+                              {product.images && product.images.length > 0 ? (
+                                <Image
+                                  src={product.images[0].url}
+                                  alt={product.name}
+                                  width={200}
+                                  height={200}
+                                  className="w-full h-full object-cover"
+                                />
+                              ) : (
+                                <div className="w-full h-full flex items-center justify-center">
+                                  <Wrench className="h-12 w-12 text-white/40" />
+                                </div>
+                              )}
+                            </div>
+
+                            {/* Информация о товаре */}
+                            <div>
+                              <h3 className="text-white font-medium mb-1 line-clamp-2">
+                                {product.name}
+                              </h3>
+                              {product.category && (
+                                <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs mb-2">
+                                  {product.category.name}
+                                </Badge>
+                              )}
+                              <p className="text-white/60 text-sm mb-2 line-clamp-2">
+                                {product.description || "Описание отсутствует"}
+                              </p>
+                              <div className="flex items-center justify-between">
+                                <span className="text-green-400 font-semibold">
+                                  {formatCurrency(product.price)}
+                                  {product.unit && (
+                                    <span className="text-white/60 text-sm ml-1">
+                                      / {product.unit}
+                                    </span>
+                                  )}
+                                </span>
+                                {product.stock && (
+                                  <span className="text-white/60 text-sm">
+                                    В наличии: {product.stock}
+                                  </span>
+                                )}
+                              </div>
+                            </div>
+
+                            {/* Управление количеством */}
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center space-x-2">
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() =>
+                                    updateConsumableQuantity(
+                                      product.id,
+                                      Math.max(0, selectedQuantity - 1)
+                                    )
+                                  }
+                                  className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
+                                  disabled={selectedQuantity === 0}
+                                >
+                                  <Minus className="h-4 w-4" />
+                                </Button>
+                                <span className="text-white font-medium w-8 text-center">
+                                  {selectedQuantity}
+                                </span>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() =>
+                                    updateConsumableQuantity(
+                                      product.id,
+                                      selectedQuantity + 1
+                                    )
+                                  }
+                                  className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
+                                >
+                                  <Plus className="h-4 w-4" />
+                                </Button>
+                              </div>
+                              {selectedQuantity > 0 && (
+                                <span className="text-green-400 font-medium text-sm">
+                                  {formatCurrency(
+                                    product.price * selectedQuantity
+                                  )}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </Card>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {/* Корзина */}
+              {selectedConsumables.length > 0 && (
+                <div className="w-80 flex-shrink-0">
+                  <Card className="bg-white/10 backdrop-blur border-white/20 p-4 sticky top-0">
+                    <h3 className="text-white font-semibold mb-4 flex items-center">
+                      <ShoppingCart className="h-4 w-4 mr-2" />
+                      Корзина ({getTotalItems()} шт)
+                    </h3>
+
+                    <div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
+                      {selectedConsumables.map((consumable) => (
+                        <div
+                          key={consumable.id}
+                          className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
+                        >
+                          <div className="flex-1 min-w-0">
+                            <p className="text-white text-sm font-medium truncate">
+                              {consumable.name}
+                            </p>
+                            <p className="text-white/60 text-xs">
+                              {formatCurrency(consumable.price)} ×{" "}
+                              {consumable.selectedQuantity}
+                            </p>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <span className="text-green-400 font-medium text-sm">
+                              {formatCurrency(
+                                consumable.price * consumable.selectedQuantity
+                              )}
+                            </span>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() =>
+                                updateConsumableQuantity(consumable.id, 0)
+                              }
+                              className="h-6 w-6 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                            >
+                              ×
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div className="border-t border-white/20 pt-4">
+                      <div className="mb-4">
+                        <label className="text-white/60 text-sm mb-2 block">
+                          Дата поставки:
+                        </label>
+                        <Input
+                          type="date"
+                          value={deliveryDate}
+                          onChange={(e) => setDeliveryDate(e.target.value)}
+                          className="bg-white/10 border-white/20 text-white"
+                          min={new Date().toISOString().split('T')[0]}
+                          required
+                        />
+                      </div>
+                      <div className="flex items-center justify-between mb-4">
+                        <span className="text-white font-semibold">Итого:</span>
+                        <span className="text-green-400 font-bold text-lg">
+                          {formatCurrency(getTotalAmount())}
+                        </span>
+                      </div>
+                      <Button
+                        onClick={handleCreateSupply}
+                        disabled={isCreatingSupply || !deliveryDate}
+                        className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50"
+                      >
+                        {isCreatingSupply ? "Создание..." : "Создать поставку расходников"}
+                      </Button>
+                    </div>
+                  </Card>
+                </div>
+              )}
+            </div>
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  // Показываем список поставщиков
+  return (
+    <div className="h-screen flex overflow-hidden">
+      <Sidebar />
+      <main
+        className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}
+      >
+        <div className="h-full w-full flex flex-col">
+          {/* Заголовок */}
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <h1 className="text-2xl font-bold text-white mb-2">
+                Создание поставки расходников
+              </h1>
+              <p className="text-white/60">
+                Выберите поставщика расходников для создания поставки
+              </p>
+            </div>
+            <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>
+          </div>
+
+          {/* Поиск */}
+          <div className="mb-6">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
+              <Input
+                placeholder="Поиск поставщиков по названию, ИНН..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10 max-w-md"
+              />
+            </div>
+          </div>
+
+          {/* Список поставщиков */}
+          <div className="flex-1 overflow-y-auto">
+            {counterpartiesLoading ? (
+              <div className="text-center py-12">
+                <p className="text-white/60">Загрузка поставщиков...</p>
+              </div>
+            ) : filteredSuppliers.length === 0 ? (
+              <div className="text-center py-12">
+                <Building2 className="h-12 w-12 text-white/40 mx-auto mb-4" />
+                <p className="text-white/60">
+                  {searchQuery
+                    ? "Поставщики не найдены"
+                    : "У вас пока нет партнеров-поставщиков расходников"}
+                </p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {filteredSuppliers.map((supplier: ConsumableSupplier) => (
+                  <Card
+                    key={supplier.id}
+                    className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30"
+                    onClick={() => setSelectedSupplier(supplier)}
+                  >
+                    <div className="space-y-4">
+                      {/* Аватар и основная информация */}
+                      <div className="flex items-start space-x-3">
+                        <OrganizationAvatar
+                          organization={{
+                            id: supplier.id,
+                            name:
+                              supplier.name || supplier.fullName || "Поставщик",
+                            users: supplier.users || [],
+                          }}
+                          size="md"
+                        />
+                        <div className="flex-1 min-w-0">
+                          <h3 className="text-white font-semibold text-lg mb-1 truncate">
+                            {supplier.name || supplier.fullName || "Поставщик"}
+                          </h3>
+                          <div className="flex items-center space-x-1 mb-2">
+                            {renderStars()}
+                            <span className="text-white/60 text-sm ml-2">
+                              4.5
+                            </span>
+                          </div>
+                          <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30">
+                            <Wrench className="h-3 w-3 mr-1" />
+                            Поставщик расходников
+                          </Badge>
+                        </div>
+                      </div>
+
+                      {/* Контактная информация */}
+                      <div className="space-y-2">
+                        {supplier.address && (
+                          <div className="flex items-center space-x-2 text-white/60 text-sm">
+                            <MapPin className="h-4 w-4" />
+                            <span className="truncate">{supplier.address}</span>
+                          </div>
+                        )}
+                        {supplier.phones && supplier.phones.length > 0 && (
+                          <div className="flex items-center space-x-2 text-white/60 text-sm">
+                            <Phone className="h-4 w-4" />
+                            <span>{supplier.phones[0].value}</span>
+                          </div>
+                        )}
+                        {supplier.emails && supplier.emails.length > 0 && (
+                          <div className="flex items-center space-x-2 text-white/60 text-sm">
+                            <Mail className="h-4 w-4" />
+                            <span className="truncate">
+                              {supplier.emails[0].value}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Дополнительная информация */}
+                      <div className="pt-2 border-t border-white/10">
+                        <div className="flex items-center justify-between text-sm">
+                          <span className="text-white/60">ИНН:</span>
+                          <span className="text-white">{supplier.inn}</span>
+                        </div>
+                      </div>
+
+                      {/* Кнопка выбора */}
+                      <Button
+                        className="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSelectedSupplier(supplier);
+                        }}
+                      >
+                        <Box className="h-4 w-4 mr-2" />
+                        Выбрать поставщика
+                      </Button>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

src/components/supplies/fulfillment-supplies/fulfillment-supplies-sub-tab.tsx

@@ -310,17 +310,17 @@ export function FulfillmentSuppliesTab() {
         />
 
         <StatsCard
-          title="С браком"
+          title="Активные поставки"
           value={
             mockFulfillmentConsumables.filter(
-              (supply) => supply.defectTotal > 0
+              (supply) => supply.status === "delivered"
             ).length
           }
-          icon={AlertTriangle}
+          icon={Calendar}
-          iconColor="text-red-400"
+          iconColor="text-blue-400"
-          iconBg="bg-red-500/20"
+          iconBg="bg-blue-500/20"
-          trend={{ value: 2, isPositive: false }}
+          trend={{ value: 3, isPositive: true }}
-          subtitle="Дефектные материалы"
+          subtitle="Завершенные поставки"
         />
       </StatsGrid>
 
@@ -339,7 +339,6 @@ export function FulfillmentSuppliesTab() {
                 </th>
                 <th className="text-left p-4 text-white font-semibold">План</th>
                 <th className="text-left p-4 text-white font-semibold">Факт</th>
-                <th className="text-left p-4 text-white font-semibold">Брак</th>
                 <th className="text-left p-4 text-white font-semibold">
                   Цена расходников
                 </th>
@@ -395,17 +394,6 @@ export function FulfillmentSuppliesTab() {
                           {supply.actualTotal}
                         </span>
                       </td>
-                      <td className="p-4">
-                        <span
-                          className={`font-semibold ${
-                            supply.defectTotal > 0
-                              ? "text-red-400"
-                              : "text-white"
-                          }`}
-                        >
-                          {supply.defectTotal}
-                        </span>
-                      </td>
                       <td className="p-4">
                         <span className="text-green-400 font-semibold">
                           {formatCurrency(supply.totalConsumablesPrice)}

src/components/supplies/supplies-dashboard.tsx

@@ -5,9 +5,15 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { Sidebar } from "@/components/dashboard/sidebar";
 import { useSidebar } from "@/hooks/useSidebar";
-import { Plus } from "lucide-react";
+import { Plus, Package, Wrench, ChevronDown } from "lucide-react";
 import { FulfillmentSuppliesTab } from "./fulfillment-supplies/fulfillment-supplies-tab";
 import { MarketplaceSuppliesTab } from "./marketplace-supplies/marketplace-supplies-tab";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 export function SuppliesDashboard() {
   const { getSidebarMargin } = useSidebar();
@@ -42,15 +48,38 @@ export function SuppliesDashboard() {
                 </TabsTrigger>
               </TabsList>
 
-              <Button
+              <DropdownMenu>
-                className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg"
+                <DropdownMenuTrigger asChild>
-                onClick={() => {
+                  <Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg">
-                  window.location.href = "/supplies/create";
+                    <Plus className="h-4 w-4 mr-2" />
-                }}
+                    Создать поставку
-              >
+                    <ChevronDown className="h-4 w-4 ml-2" />
-                <Plus className="h-4 w-4 mr-2" />
+                  </Button>
-                Создать поставку
+                </DropdownMenuTrigger>
-              </Button>
+                <DropdownMenuContent
+                  align="end"
+                  className="bg-white/10 backdrop-blur border-white/20"
+                >
+                  <DropdownMenuItem
+                    onClick={() => {
+                      window.location.href = "/supplies/create";
+                    }}
+                    className="text-white hover:bg-white/10 cursor-pointer"
+                  >
+                    <Package className="h-4 w-4 mr-2" />
+                    Поставка товаров
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => {
+                      window.location.href = "/supplies/create-consumables";
+                    }}
+                    className="text-white hover:bg-white/10 cursor-pointer"
+                  >
+                    <Wrench className="h-4 w-4 mr-2" />
+                    Поставка расходников
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
 
             <TabsContent value="fulfillment" className="mt-0 flex-1">

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};