From b1f78a34e232805fa5ed78dd79faf79aaad162e4 Mon Sep 17 00:00:00 2001
From: Veronika Smirnova <veronika.smirnova@example.com>
Date: Thu, 24 Jul 2025 12:48:02 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=20CreateConsumablesSupplyPage:=20=D1=83=D0=BB=D1=83=D1=87?=
 =?UTF-8?q?=D1=88=D0=B5=D0=BD=D0=B0=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D0=BE=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D1=81=D1=82=D0=B0=D0=B2=D1=89=D0=B8=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=B2=20=D0=B8=20=D1=80=D0=B0=D1=81=D1=85=D0=BE=D0=B4=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=BE=D0=B2,=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B5=20?=
 =?UTF-8?q?=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D1=8B=20=D0=B8=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B5=D1=80=D1=84=D0=B5=D0=B9=D1=81=D0=B0=20=D0=B4=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=B2=D1=8B=D0=B1=D0=BE=D1=80=D0=B0=20=D0=B8=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B8=D1=81=D0=BA=D0=B0.=20=D0=9E=D0=BF=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BC=D0=B8=D0=B7=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D1=81=D1=82=D1=80=D1=83=D0=BA=D1=82=D1=83=D1=80=D0=B0=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=B0=20=D0=B8=20=D1=83=D0=BB=D1=83=D1=87=D1=88?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=BF=D0=BE=D0=B2=D1=8B=D1=88=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D1=83=D0=B4=D0=BE=D0=B1=D1=81=D1=82=D0=B2=D0=B0=20?=
 =?UTF-8?q?=D0=B8=D1=81=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F.=20=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=81=D0=BE=D0=BE=D0=B1=D1=89=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=BE=D0=B1=20=D0=BE=D1=88=D0=B8=D0=B1?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=85=20=D0=B8=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BF=D1=80=D0=BE=D0=B2=D0=B5=D1=80?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=BE=D0=B1=D1=8F=D0=B7=D0=B0=D1=82=D0=B5=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=BD=D1=8B=D1=85=20=D0=BF=D0=BE=D0=BB=D0=B5=D0=B9.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-consumables-supply-page.tsx        | 716 +++++++++---------
 1 file changed, 347 insertions(+), 369 deletions(-)

diff --git a/src/components/supplies/create-consumables-supply-page.tsx b/src/components/supplies/create-consumables-supply-page.tsx
index 9b61ae4..9ce164d 100644
--- a/src/components/supplies/create-consumables-supply-page.tsx
+++ b/src/components/supplies/create-consumables-supply-page.tsx
@@ -200,7 +200,11 @@ export function CreateConsumablesSupplyPage() {
   };
 
   const handleCreateSupply = async () => {
-    if (!selectedSupplier || selectedConsumables.length === 0 || !deliveryDate) {
+    if (
+      !selectedSupplier ||
+      selectedConsumables.length === 0 ||
+      !deliveryDate
+    ) {
       toast.error("Заполните все обязательные поля");
       return;
     }
@@ -226,7 +230,8 @@ export function CreateConsumablesSupplyPage() {
         router.push("/supplies");
       } else {
         toast.error(
-          result.data?.createSupplyOrder?.message || "Ошибка при создании поставки"
+          result.data?.createSupplyOrder?.message ||
+            "Ошибка при создании поставки"
         );
       }
     } catch (error) {
@@ -237,265 +242,6 @@ export function CreateConsumablesSupplyPage() {
     }
   };
 
-  // Если выбран поставщик, показываем его товары
-  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 />
@@ -510,7 +256,7 @@ export function CreateConsumablesSupplyPage() {
                 Создание поставки расходников
               </h1>
               <p className="text-white/60">
-                Выберите поставщика расходников для создания поставки
+                Выберите поставщика и добавьте расходники в заказ
               </p>
             </div>
             <Button
@@ -524,117 +270,349 @@ export function CreateConsumablesSupplyPage() {
             </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>
-
-                      {/* Кнопка выбора */}
+          {/* Основной контент с двумя блоками */}
+          <div className="flex-1 overflow-hidden flex gap-4">
+            {/* Левая колонка - Поставщики и Расходники */}
+            <div className="flex-1 flex flex-col gap-4 overflow-hidden">
+              {/* Блок "Поставщики" */}
+              <Card className="bg-white/10 backdrop-blur border-white/20 flex-shrink-0">
+                <div className="p-4 border-b border-white/10">
+                  <div className="flex items-center justify-between mb-3">
+                    <h2 className="text-lg font-semibold text-white flex items-center">
+                      <Building2 className="h-5 w-5 mr-2" />
+                      Поставщики
+                    </h2>
+                    {selectedSupplier && (
                       <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);
-                        }}
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setSelectedSupplier(null)}
+                        className="text-white/60 hover:text-white hover:bg-white/10"
                       >
-                        <Box className="h-4 w-4 mr-2" />
-                        Выбрать поставщика
+                        Сбросить выбор
                       </Button>
+                    )}
+                  </div>
+                  <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"
+                    />
+                  </div>
+                </div>
+
+                <div className="p-4 max-h-60 overflow-y-auto">
+                  {counterpartiesLoading ? (
+                    <div className="text-center py-8">
+                      <div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent mx-auto mb-3"></div>
+                      <p className="text-white/60">Загрузка поставщиков...</p>
                     </div>
-                  </Card>
-                ))}
+                  ) : filteredSuppliers.length === 0 ? (
+                    <div className="text-center py-8">
+                      <Building2 className="h-8 w-8 text-white/40 mx-auto mb-2" />
+                      <p className="text-white/60 text-sm">
+                        {searchQuery
+                          ? "Поставщики не найдены"
+                          : "У вас пока нет партнеров-поставщиков расходников"}
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+                      {filteredSuppliers.map((supplier: ConsumableSupplier) => (
+                        <Card
+                          key={supplier.id}
+                          className={`p-3 cursor-pointer transition-all border ${
+                            selectedSupplier?.id === supplier.id
+                              ? "bg-orange-500/20 border-orange-500/50"
+                              : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"
+                          }`}
+                          onClick={() => setSelectedSupplier(supplier)}
+                        >
+                          <div className="flex items-center space-x-3">
+                            <OrganizationAvatar
+                              organization={{
+                                id: supplier.id,
+                                name:
+                                  supplier.name ||
+                                  supplier.fullName ||
+                                  "Поставщик",
+                                fullName: supplier.fullName,
+                                users: (supplier.users || []).map((user) => ({
+                                  id: user.id,
+                                  avatar: user.avatar,
+                                })),
+                              }}
+                              size="sm"
+                            />
+                            <div className="flex-1 min-w-0">
+                              <h3 className="text-white font-medium text-sm truncate">
+                                {supplier.name ||
+                                  supplier.fullName ||
+                                  "Поставщик"}
+                              </h3>
+                              <div className="flex items-center space-x-1 mb-1">
+                                {renderStars(4.5)}
+                                <span className="text-white/60 text-xs ml-1">
+                                  4.5
+                                </span>
+                              </div>
+                              <p className="text-white/60 text-xs truncate">
+                                ИНН: {supplier.inn}
+                              </p>
+                            </div>
+                            {selectedSupplier?.id === supplier.id && (
+                              <div className="flex-shrink-0">
+                                <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
+                                  Выбран
+                                </Badge>
+                              </div>
+                            )}
+                          </div>
+                        </Card>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </Card>
+
+              {/* Блок "Расходники" */}
+              <Card className="bg-white/10 backdrop-blur border-white/20 flex-1 overflow-hidden">
+                <div className="p-4 border-b border-white/10">
+                  <div className="flex items-center justify-between mb-3">
+                    <h2 className="text-lg font-semibold text-white flex items-center">
+                      <Wrench className="h-5 w-5 mr-2" />
+                      Расходники
+                      {selectedSupplier && (
+                        <span className="text-white/60 text-sm font-normal ml-2">
+                          - {selectedSupplier.name || selectedSupplier.fullName}
+                        </span>
+                      )}
+                    </h2>
+                  </div>
+                  {selectedSupplier && (
+                    <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="p-4 flex-1 overflow-y-auto">
+                  {!selectedSupplier ? (
+                    <div className="text-center py-12">
+                      <Wrench className="h-12 w-12 text-white/40 mx-auto mb-4" />
+                      <p className="text-white/60">
+                        Выберите поставщика для просмотра расходников
+                      </p>
+                    </div>
+                  ) : productsLoading ? (
+                    <div className="text-center py-12">
+                      <div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent mx-auto mb-3"></div>
+                      <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>
+              </Card>
+            </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>