Resolve merge conflict: Add both WB Warehouse and Supplies Navigation to UI Kit
This commit is contained in:
Bivekich
@ -19,6 +19,7 @@ import { TimesheetDemo } from "./ui-kit/timesheet-demo";
|
||||
import { FulfillmentWarehouseDemo } from "./ui-kit/fulfillment-warehouse-demo";
|
||||
import { SuppliesDemo } from "./ui-kit/supplies-demo";
|
||||
import { WBWarehouseDemo } from "./ui-kit/wb-warehouse-demo";
|
||||
import { SuppliesNavigationDemo } from "./ui-kit/supplies-navigation-demo";
|
||||
|
||||
export function UIKitSection() {
|
||||
return (
|
||||
@ -140,6 +141,12 @@ export function UIKitSection() {
|
||||
>
|
||||
Склад WB
|
||||
</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">
|
||||
@ -213,6 +220,10 @@ export function UIKitSection() {
|
||||
<TabsContent value="wb-warehouse" className="space-y-6">
|
||||
<WBWarehouseDemo />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="supplies-navigation" className="space-y-6">
|
||||
<SuppliesNavigationDemo />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
|
||||
188
src/components/admin/ui-kit/supplies-navigation-demo.tsx
Normal file
188
src/components/admin/ui-kit/supplies-navigation-demo.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
Reference in New Issue
Block a user