101 lines
3.7 KiB
TypeScript
101 lines
3.7 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { useSearchParams, useRouter } from "next/navigation";
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import { Package, Wrench, RotateCcw, Building2 } from "lucide-react";
|
||
|
||
// Импорты компонентов подкатегорий
|
||
import { FulfillmentGoodsTab } from "./fulfillment-goods-tab";
|
||
import { PvzReturnsTab } from "./pvz-returns-tab";
|
||
import { FulfillmentConsumablesOrdersTab } from "./fulfillment-consumables-orders-tab";
|
||
|
||
// Новые компоненты для детального просмотра (копия из supplies модуля)
|
||
import { FulfillmentDetailedSuppliesTab } from "./fulfillment-detailed-supplies-tab";
|
||
|
||
export function FulfillmentSuppliesTab() {
|
||
const router = useRouter();
|
||
const searchParams = useSearchParams();
|
||
const [activeTab, setActiveTab] = useState("goods");
|
||
|
||
// Проверяем URL параметр при загрузке
|
||
useEffect(() => {
|
||
const tabParam = searchParams.get("tab");
|
||
if (tabParam && ["goods", "detailed-supplies", "consumables", "returns"].includes(tabParam)) {
|
||
setActiveTab(tabParam);
|
||
}
|
||
}, [searchParams]);
|
||
|
||
// Обновляем URL при смене вкладки
|
||
const handleTabChange = (newTab: string) => {
|
||
setActiveTab(newTab);
|
||
const currentPath = window.location.pathname;
|
||
const newUrl = `${currentPath}?tab=${newTab}`;
|
||
router.replace(newUrl);
|
||
};
|
||
|
||
return (
|
||
<div className="h-full flex flex-col">
|
||
<Tabs
|
||
value={activeTab}
|
||
onValueChange={handleTabChange}
|
||
className="h-full flex flex-col"
|
||
>
|
||
<TabsList className="grid w-full grid-cols-4 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-10 mb-3 mx-4 mt-4">
|
||
<TabsTrigger
|
||
value="goods"
|
||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
|
||
>
|
||
<Package className="h-3 w-3" />
|
||
Товар
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="detailed-supplies"
|
||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
|
||
>
|
||
<Building2 className="h-3 w-3" />
|
||
Наши расходники
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="consumables"
|
||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
|
||
>
|
||
<Wrench className="h-3 w-3" />
|
||
Расходники селлеров
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="returns"
|
||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
|
||
>
|
||
<RotateCcw className="h-3 w-3" />
|
||
Возвраты с ПВЗ
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="goods" className="flex-1 overflow-hidden">
|
||
<FulfillmentGoodsTab />
|
||
</TabsContent>
|
||
|
||
<TabsContent
|
||
value="detailed-supplies"
|
||
className="flex-1 overflow-hidden"
|
||
>
|
||
<div className="h-full p-4 overflow-y-auto">
|
||
<FulfillmentDetailedSuppliesTab />
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="consumables" className="flex-1 overflow-hidden">
|
||
<div className="h-full p-4 overflow-y-auto">
|
||
<FulfillmentConsumablesOrdersTab />
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="returns" className="flex-1 overflow-hidden">
|
||
<PvzReturnsTab />
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
);
|
||
}
|