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

---
 src/components/admin/ui-kit-section.tsx       |  11 +
 .../admin/ui-kit/supplies-navigation-demo.tsx | 188 ++++++++++++++++++
 .../consumables-supplies-tab.tsx              |  21 +-
 .../fulfillment-goods-tab.tsx                 |  21 +-
 .../fulfillment-supplies-sub-tab.tsx          |  21 +-
 .../fulfillment-supplies/pvz-returns-tab.tsx  |  21 +-
 .../goods-supplies/goods-supplies-tab.tsx     |  21 +-
 .../ozon-supplies-tab.tsx                     |  21 +-
 .../wildberries-supplies-tab.tsx              |  21 +-
 .../supplies/supplies-dashboard.tsx           |   2 +-
 10 files changed, 242 insertions(+), 106 deletions(-)
 create mode 100644 src/components/admin/ui-kit/supplies-navigation-demo.tsx

diff --git a/src/components/admin/ui-kit-section.tsx b/src/components/admin/ui-kit-section.tsx
index 35e3c54..b28c666 100644
--- a/src/components/admin/ui-kit-section.tsx
+++ b/src/components/admin/ui-kit-section.tsx
@@ -18,6 +18,7 @@ import { BusinessDemo } from "./ui-kit/business-demo";
 import { TimesheetDemo } from "./ui-kit/timesheet-demo";
 import { FulfillmentWarehouseDemo } from "./ui-kit/fulfillment-warehouse-demo";
 import { SuppliesDemo } from "./ui-kit/supplies-demo";
+import { SuppliesNavigationDemo } from "./ui-kit/supplies-navigation-demo";
 
 export function UIKitSection() {
   return (
@@ -133,6 +134,12 @@ export function UIKitSection() {
           >
             Поставки
           </TabsTrigger>
+          <TabsTrigger
+            value="supplies-navigation"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
+            Навигация поставок
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="buttons" className="space-y-6">
@@ -202,6 +209,10 @@ export function UIKitSection() {
         <TabsContent value="supplies" className="space-y-6">
           <SuppliesDemo />
         </TabsContent>
+
+        <TabsContent value="supplies-navigation" className="space-y-6">
+          <SuppliesNavigationDemo />
+        </TabsContent>
       </Tabs>
     </div>
   );
diff --git a/src/components/admin/ui-kit/supplies-navigation-demo.tsx b/src/components/admin/ui-kit/supplies-navigation-demo.tsx
new file mode 100644
index 0000000..c2535b5
--- /dev/null
+++ b/src/components/admin/ui-kit/supplies-navigation-demo.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import React, { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Plus } from "lucide-react";
+
+export function SuppliesNavigationDemo() {
+  const [activeMainTab, setActiveMainTab] = useState("fulfillment");
+  const [activeFulfillmentTab, setActiveFulfillmentTab] = useState("goods");
+  const [activeMarketplaceTab, setActiveMarketplaceTab] =
+    useState("wildberries");
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold text-white mb-4">
+          Навигация поставок
+        </h2>
+        <p className="text-white/70 mb-6">
+          Компоненты навигации, используемые в разделе "Мои поставки"
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        {/* Основная навигация поставок */}
+        <Card className="p-6 bg-white/5 border-white/10">
+          <h3 className="text-lg font-semibold text-white mb-4">
+            Основная навигация
+          </h3>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <TabsList className="grid grid-cols-2 bg-white/10 backdrop-blur border-white/20 w-fit">
+                <TabsTrigger
+                  value="fulfillment"
+                  className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white/60 px-8"
+                  onClick={() => setActiveMainTab("fulfillment")}
+                >
+                  Поставки на ФФ
+                </TabsTrigger>
+                <TabsTrigger
+                  value="marketplace"
+                  className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white/60 px-8"
+                  onClick={() => setActiveMainTab("marketplace")}
+                >
+                  Поставки на Маркетплейсы
+                </TabsTrigger>
+              </TabsList>
+
+              <Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg">
+                <Plus className="h-4 w-4 mr-2" />
+                Создать поставку
+              </Button>
+            </div>
+          </div>
+        </Card>
+
+        {/* Подвкладки для ФФ */}
+        <Card className="p-6 bg-white/5 border-white/10">
+          <h3 className="text-lg font-semibold text-white mb-4">
+            Навигация ФФ поставок
+          </h3>
+          <TabsList className="grid grid-cols-3 bg-white/5 backdrop-blur border-white/10 mb-4 w-fit">
+            <TabsTrigger
+              value="goods"
+              className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
+              onClick={() => setActiveFulfillmentTab("goods")}
+            >
+              Товар
+            </TabsTrigger>
+            <TabsTrigger
+              value="supplies"
+              className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
+              onClick={() => setActiveFulfillmentTab("supplies")}
+            >
+              Расходники
+            </TabsTrigger>
+            <TabsTrigger
+              value="returns"
+              className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
+              onClick={() => setActiveFulfillmentTab("returns")}
+            >
+              Возвраты с ПВЗ
+            </TabsTrigger>
+          </TabsList>
+          <div className="text-white/60 text-sm">
+            Активная вкладка:{" "}
+            <span className="text-white font-medium">
+              {activeFulfillmentTab}
+            </span>
+          </div>
+        </Card>
+      </div>
+
+      {/* Подвкладки для Маркетплейсов */}
+      <Card className="p-6 bg-white/5 border-white/10">
+        <h3 className="text-lg font-semibold text-white mb-4">
+          Навигация Маркетплейс поставок
+        </h3>
+        <TabsList className="grid grid-cols-2 bg-white/5 backdrop-blur border-white/10 mb-4 w-fit">
+          <TabsTrigger
+            value="wildberries"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
+            onClick={() => setActiveMarketplaceTab("wildberries")}
+          >
+            Поставки на Wildberries
+          </TabsTrigger>
+          <TabsTrigger
+            value="ozon"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
+            onClick={() => setActiveMarketplaceTab("ozon")}
+          >
+            Поставки на Ozon
+          </TabsTrigger>
+        </TabsList>
+        <div className="text-white/60 text-sm">
+          Активная вкладка:{" "}
+          <span className="text-white font-medium">{activeMarketplaceTab}</span>
+        </div>
+      </Card>
+
+      {/* Примеры использования */}
+      <Card className="p-6 bg-white/5 border-white/10">
+        <h3 className="text-lg font-semibold text-white mb-4">
+          Примеры использования
+        </h3>
+        <div className="space-y-4">
+          <div>
+            <h4 className="text-white font-medium mb-2">
+              Стили кнопок навигации:
+            </h4>
+            <div className="space-y-2 text-white/70 text-sm">
+              <p>
+                •{" "}
+                <code className="bg-white/10 px-2 py-1 rounded">
+                  bg-white/10 backdrop-blur border-white/20
+                </code>{" "}
+                - основной фон TabsList
+              </p>
+              <p>
+                •{" "}
+                <code className="bg-white/10 px-2 py-1 rounded">
+                  data-[state=active]:bg-gradient-to-r from-purple-500
+                  to-pink-500
+                </code>{" "}
+                - активное состояние основных вкладок
+              </p>
+              <p>
+                •{" "}
+                <code className="bg-white/10 px-2 py-1 rounded">
+                  data-[state=active]:bg-white/20
+                </code>{" "}
+                - активное состояние подвкладок
+              </p>
+              <p>
+                •{" "}
+                <code className="bg-white/10 px-2 py-1 rounded">
+                  text-white/60
+                </code>{" "}
+                - неактивный текст
+              </p>
+              <p>
+                •{" "}
+                <code className="bg-white/10 px-2 py-1 rounded">
+                  data-[state=active]:text-white
+                </code>{" "}
+                - активный текст
+              </p>
+            </div>
+          </div>
+
+          <div>
+            <h4 className="text-white font-medium mb-2">
+              Структура компонентов:
+            </h4>
+            <div className="space-y-2 text-white/70 text-sm">
+              <p>• Главные вкладки используют градиентный фон при активации</p>
+              <p>• Подвкладки используют полупрозрачный белый фон</p>
+              <p>• Кнопка создания поставки имеет градиент purple-to-pink</p>
+              <p>• Все элементы используют backdrop-blur эффект</p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/supplies/consumables-supplies/consumables-supplies-tab.tsx b/src/components/supplies/consumables-supplies/consumables-supplies-tab.tsx
index c7d2b24..4536406 100644
--- a/src/components/supplies/consumables-supplies/consumables-supplies-tab.tsx
+++ b/src/components/supplies/consumables-supplies/consumables-supplies-tab.tsx
@@ -509,23 +509,14 @@ export function SuppliesConsumablesTab() {
                 return (
                   <React.Fragment key={supply.id}>
                     {/* Основная строка поставки расходников */}
-                    <tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-orange-500/10">
+                    <tr
+                      className="border-b border-white/10 hover:bg-white/5 transition-colors bg-orange-500/10 cursor-pointer"
+                      onClick={() => toggleSupplyExpansion(supply.id)}
+                    >
                       <td className="p-4">
                         <div className="flex items-center space-x-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => toggleSupplyExpansion(supply.id)}
-                            className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
-                          >
-                            {isSupplyExpanded ? (
-                              <ChevronDown className="h-4 w-4" />
-                            ) : (
-                              <ChevronRight className="h-4 w-4" />
-                            )}
-                          </Button>
-                          <span className="text-white font-bold text-lg">
-                            #{supply.number}
+                          <span className="text-white font-normal text-lg">
+                            {supply.number}
                           </span>
                         </div>
                       </td>
diff --git a/src/components/supplies/fulfillment-supplies/fulfillment-goods-tab.tsx b/src/components/supplies/fulfillment-supplies/fulfillment-goods-tab.tsx
index f6bd60e..e8fc7b6 100644
--- a/src/components/supplies/fulfillment-supplies/fulfillment-goods-tab.tsx
+++ b/src/components/supplies/fulfillment-supplies/fulfillment-goods-tab.tsx
@@ -408,23 +408,14 @@ export function FulfillmentGoodsTab() {
                 return (
                   <React.Fragment key={supply.id}>
                     {/* Основная строка поставки */}
-                    <tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10">
+                    <tr 
+                      className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10 cursor-pointer"
+                      onClick={() => toggleSupplyExpansion(supply.id)}
+                    >
                       <td className="p-4">
                         <div className="flex items-center space-x-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => toggleSupplyExpansion(supply.id)}
-                            className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
-                          >
-                            {isSupplyExpanded ? (
-                              <ChevronDown className="h-4 w-4" />
-                            ) : (
-                              <ChevronRight className="h-4 w-4" />
-                            )}
-                          </Button>
-                          <span className="text-white font-bold text-lg">
-                            #{supply.number}
+                          <span className="text-white font-normal text-lg">
+                            {supply.number}
                           </span>
                         </div>
                       </td>
diff --git a/src/components/supplies/fulfillment-supplies/fulfillment-supplies-sub-tab.tsx b/src/components/supplies/fulfillment-supplies/fulfillment-supplies-sub-tab.tsx
index 2c14511..cd3c8b6 100644
--- a/src/components/supplies/fulfillment-supplies/fulfillment-supplies-sub-tab.tsx
+++ b/src/components/supplies/fulfillment-supplies/fulfillment-supplies-sub-tab.tsx
@@ -361,23 +361,14 @@ export function FulfillmentSuppliesTab() {
                 return (
                   <React.Fragment key={supply.id}>
                     {/* Основная строка поставки расходников ФФ */}
-                    <tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-orange-500/10">
+                    <tr 
+                      className="border-b border-white/10 hover:bg-white/5 transition-colors bg-orange-500/10 cursor-pointer"
+                      onClick={() => toggleSupplyExpansion(supply.id)}
+                    >
                       <td className="p-4">
                         <div className="flex items-center space-x-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => toggleSupplyExpansion(supply.id)}
-                            className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
-                          >
-                            {isSupplyExpanded ? (
-                              <ChevronDown className="h-4 w-4" />
-                            ) : (
-                              <ChevronRight className="h-4 w-4" />
-                            )}
-                          </Button>
-                          <span className="text-white font-bold text-lg">
-                            #{supply.number}
+                          <span className="text-white font-normal text-lg">
+                            {supply.number}
                           </span>
                         </div>
                       </td>
diff --git a/src/components/supplies/fulfillment-supplies/pvz-returns-tab.tsx b/src/components/supplies/fulfillment-supplies/pvz-returns-tab.tsx
index fcd0508..0e63a5e 100644
--- a/src/components/supplies/fulfillment-supplies/pvz-returns-tab.tsx
+++ b/src/components/supplies/fulfillment-supplies/pvz-returns-tab.tsx
@@ -408,23 +408,14 @@ export function PvzReturnsTab() {
                 return (
                   <React.Fragment key={supply.id}>
                     {/* Основная строка возврата */}
-                    <tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-red-500/10">
+                    <tr
+                      className="border-b border-white/10 hover:bg-white/5 transition-colors bg-red-500/10 cursor-pointer"
+                      onClick={() => toggleSupplyExpansion(supply.id)}
+                    >
                       <td className="p-4">
                         <div className="flex items-center space-x-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => toggleSupplyExpansion(supply.id)}
-                            className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
-                          >
-                            {isSupplyExpanded ? (
-                              <ChevronDown className="h-4 w-4" />
-                            ) : (
-                              <ChevronRight className="h-4 w-4" />
-                            )}
-                          </Button>
-                          <span className="text-white font-bold text-lg">
-                            #{supply.number}
+                          <span className="text-white font-normal text-lg">
+                            {supply.number}
                           </span>
                         </div>
                       </td>
diff --git a/src/components/supplies/goods-supplies/goods-supplies-tab.tsx b/src/components/supplies/goods-supplies/goods-supplies-tab.tsx
index 0165009..fe25f6c 100644
--- a/src/components/supplies/goods-supplies/goods-supplies-tab.tsx
+++ b/src/components/supplies/goods-supplies/goods-supplies-tab.tsx
@@ -422,23 +422,14 @@ export function SuppliesGoodsTab() {
                 return (
                   <React.Fragment key={supply.id}>
                     {/* Уровень 1: Основная строка поставки */}
-                    <tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10">
+                    <tr
+                      className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10 cursor-pointer"
+                      onClick={() => toggleSupplyExpansion(supply.id)}
+                    >
                       <td className="p-4">
                         <div className="flex items-center space-x-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => toggleSupplyExpansion(supply.id)}
-                            className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
-                          >
-                            {isSupplyExpanded ? (
-                              <ChevronDown className="h-4 w-4" />
-                            ) : (
-                              <ChevronRight className="h-4 w-4" />
-                            )}
-                          </Button>
-                          <span className="text-white font-bold text-lg">
-                            #{supply.number}
+                          <span className="text-white font-normal text-lg">
+                            {supply.number}
                           </span>
                         </div>
                       </td>
diff --git a/src/components/supplies/marketplace-supplies/ozon-supplies-tab.tsx b/src/components/supplies/marketplace-supplies/ozon-supplies-tab.tsx
index 51e393c..25c2349 100644
--- a/src/components/supplies/marketplace-supplies/ozon-supplies-tab.tsx
+++ b/src/components/supplies/marketplace-supplies/ozon-supplies-tab.tsx
@@ -404,23 +404,14 @@ export function OzonSuppliesTab() {
                 return (
                   <React.Fragment key={supply.id}>
                     {/* Основная строка поставки на Ozon */}
-                    <tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10">
+                    <tr
+                      className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10 cursor-pointer"
+                      onClick={() => toggleSupplyExpansion(supply.id)}
+                    >
                       <td className="p-4">
                         <div className="flex items-center space-x-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => toggleSupplyExpansion(supply.id)}
-                            className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
-                          >
-                            {isSupplyExpanded ? (
-                              <ChevronDown className="h-4 w-4" />
-                            ) : (
-                              <ChevronRight className="h-4 w-4" />
-                            )}
-                          </Button>
-                          <span className="text-white font-bold text-lg">
-                            #{supply.number}
+                          <span className="text-white font-normal text-lg">
+                            {supply.number}
                           </span>
                         </div>
                       </td>
diff --git a/src/components/supplies/marketplace-supplies/wildberries-supplies-tab.tsx b/src/components/supplies/marketplace-supplies/wildberries-supplies-tab.tsx
index 8c882fb..6868f7f 100644
--- a/src/components/supplies/marketplace-supplies/wildberries-supplies-tab.tsx
+++ b/src/components/supplies/marketplace-supplies/wildberries-supplies-tab.tsx
@@ -404,23 +404,14 @@ export function WildberriesSuppliesTab() {
                 return (
                   <React.Fragment key={supply.id}>
                     {/* Основная строка поставки на WB */}
-                    <tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10">
+                    <tr
+                      className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10 cursor-pointer"
+                      onClick={() => toggleSupplyExpansion(supply.id)}
+                    >
                       <td className="p-4">
                         <div className="flex items-center space-x-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => toggleSupplyExpansion(supply.id)}
-                            className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
-                          >
-                            {isSupplyExpanded ? (
-                              <ChevronDown className="h-4 w-4" />
-                            ) : (
-                              <ChevronRight className="h-4 w-4" />
-                            )}
-                          </Button>
-                          <span className="text-white font-bold text-lg">
-                            #{supply.number}
+                          <span className="text-white font-normal text-lg">
+                            {supply.number}
                           </span>
                         </div>
                       </td>
diff --git a/src/components/supplies/supplies-dashboard.tsx b/src/components/supplies/supplies-dashboard.tsx
index 361bbef..d899a38 100644
--- a/src/components/supplies/supplies-dashboard.tsx
+++ b/src/components/supplies/supplies-dashboard.tsx
@@ -26,7 +26,7 @@ export function SuppliesDashboard() {
             onValueChange={setActiveTab}
             className="w-full h-full flex flex-col"
           >
-            <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center justify-between mb-2">
               <TabsList className="grid grid-cols-2 bg-white/10 backdrop-blur border-white/20 w-fit">
                 <TabsTrigger
                   value="fulfillment"