102 lines
4.1 KiB
TypeScript
102 lines
4.1 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { useQuery } from "@apollo/client";
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import { Card } from "@/components/ui/card";
|
||
import { Sidebar } from "@/components/dashboard/sidebar";
|
||
import { useSidebar } from "@/hooks/useSidebar";
|
||
import { GET_PENDING_SUPPLIES_COUNT } from "@/graphql/queries";
|
||
import { Building2, ShoppingCart } from "lucide-react";
|
||
|
||
// Импорты компонентов подразделов
|
||
import { FulfillmentSuppliesTab } from "./fulfillment-supplies/fulfillment-supplies-tab";
|
||
import { MarketplaceSuppliesTab } from "./marketplace-supplies/marketplace-supplies-tab";
|
||
|
||
// Компонент для отображения бейджа с уведомлениями
|
||
function NotificationBadge({ count }: { count: number }) {
|
||
if (count === 0) return null;
|
||
|
||
return (
|
||
<div className="ml-1 bg-red-500 text-white text-xs font-bold rounded-full min-w-[16px] h-4 flex items-center justify-center px-1">
|
||
{count > 99 ? "99+" : count}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function FulfillmentSuppliesDashboard() {
|
||
const { getSidebarMargin } = useSidebar();
|
||
const [activeTab, setActiveTab] = useState("fulfillment");
|
||
|
||
// Загружаем данные о непринятых поставках
|
||
const { data: pendingData } = useQuery(GET_PENDING_SUPPLIES_COUNT, {
|
||
pollInterval: 30000, // Обновляем каждые 30 секунд
|
||
fetchPolicy: "cache-first",
|
||
errorPolicy: "ignore",
|
||
});
|
||
|
||
const pendingCount = pendingData?.pendingSuppliesCount?.total || 0;
|
||
|
||
return (
|
||
<div className="h-screen flex overflow-hidden">
|
||
<Sidebar />
|
||
<main
|
||
className={`flex-1 ${getSidebarMargin()} px-2 xl:px-4 py-2 xl:py-3 overflow-hidden transition-all duration-300`}
|
||
>
|
||
<div className="h-full w-full flex flex-col">
|
||
{/* Основной контент с табами */}
|
||
<div className="flex-1 overflow-hidden">
|
||
<Tabs
|
||
value={activeTab}
|
||
onValueChange={setActiveTab}
|
||
className="h-full flex flex-col"
|
||
>
|
||
<TabsList className="grid w-full grid-cols-2 bg-white/5 backdrop-blur border-white/10 flex-shrink-0 h-8 xl:h-10">
|
||
<TabsTrigger
|
||
value="fulfillment"
|
||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs xl:text-sm relative"
|
||
>
|
||
<Building2 className="h-3 w-3" />
|
||
<span className="hidden sm:inline">
|
||
Поставки на фулфилмент
|
||
</span>
|
||
<span className="sm:hidden">Фулфилмент</span>
|
||
<NotificationBadge count={pendingCount} />
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="marketplace"
|
||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs xl:text-sm"
|
||
>
|
||
<ShoppingCart className="h-3 w-3" />
|
||
<span className="hidden sm:inline">
|
||
Поставки на маркетплейсы
|
||
</span>
|
||
<span className="sm:hidden">Маркетплейсы</span>
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent
|
||
value="fulfillment"
|
||
className="flex-1 overflow-hidden mt-2 xl:mt-3"
|
||
>
|
||
<Card className="glass-card h-full overflow-hidden p-0">
|
||
<FulfillmentSuppliesTab />
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
<TabsContent
|
||
value="marketplace"
|
||
className="flex-1 overflow-hidden mt-2 xl:mt-3"
|
||
>
|
||
<Card className="glass-card h-full overflow-hidden p-0">
|
||
<MarketplaceSuppliesTab />
|
||
</Card>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|