Обновлены компоненты управления поставками: улучшены стили и логика отображения для вкладок и карточек товаров. Добавлены проверки на наличие идентификаторов для улучшения обработки данных. Оптимизирован интерфейс с использованием новых компонентов и улучшена читаемость кода.

This commit is contained in:
Veronika Smirnova
2025-07-26 21:07:35 +03:00
parent 25fead48e9
commit f198994400
15 changed files with 989 additions and 852 deletions

View File

@ -23,9 +23,9 @@ export function SuppliesDashboard() {
// Автоматически открываем нужную вкладку при загрузке
useEffect(() => {
const tab = searchParams.get('tab');
if (tab === 'consumables') {
setActiveTab('fulfillment'); // Устанавливаем основную вкладку "Поставки на ФФ"
const tab = searchParams.get("tab");
if (tab === "consumables") {
setActiveTab("fulfillment"); // Устанавливаем основную вкладку "Поставки на ФФ"
}
}, [searchParams]);
@ -33,7 +33,7 @@ export function SuppliesDashboard() {
<div className="h-screen flex overflow-hidden">
<Sidebar />
<main
className={`flex-1 ${getSidebarMargin()} px-4 py-4 overflow-hidden transition-all duration-300`}
className={`flex-1 ${getSidebarMargin()} px-2 py-2 overflow-hidden transition-all duration-300`}
>
<div className="h-full">
{/* Главные вкладки с кнопкой создания */}
@ -42,28 +42,34 @@ export function SuppliesDashboard() {
onValueChange={setActiveTab}
className="w-full h-full flex flex-col"
>
<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">
<div className="flex items-center justify-between mb-1 flex-wrap gap-2">
<TabsList className="grid grid-cols-2 bg-white/10 backdrop-blur border-white/20 w-fit text-sm">
<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"
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-3 sm:px-6"
>
Поставки на ФФ
<span className="hidden sm:inline">Поставки на ФФ</span>
<span className="sm:hidden">ФФ</span>
</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"
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-3 sm:px-6"
>
Поставки на Маркетплейсы
<span className="hidden sm:inline">Поставки на Маркетплейсы</span>
<span className="sm:hidden">МП</span>
</TabsTrigger>
</TabsList>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<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" />
Создать поставку
<ChevronDown className="h-4 w-4 ml-2" />
<Button
size="sm"
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-3 w-3 mr-1" />
<span className="hidden sm:inline">Создать поставку</span>
<span className="sm:hidden">Создать</span>
<ChevronDown className="h-3 w-3 ml-1" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
@ -92,11 +98,23 @@ export function SuppliesDashboard() {
</DropdownMenu>
</div>
<TabsContent value="fulfillment" className="mt-0 flex-1 overflow-hidden">
<FulfillmentSuppliesTab defaultSubTab={searchParams.get('tab') === 'consumables' ? 'supplies' : undefined} />
<TabsContent
value="fulfillment"
className="mt-0 flex-1 overflow-hidden"
>
<FulfillmentSuppliesTab
defaultSubTab={
searchParams.get("tab") === "consumables"
? "supplies"
: undefined
}
/>
</TabsContent>
<TabsContent value="marketplace" className="mt-0 flex-1 overflow-hidden">
<TabsContent
value="marketplace"
className="mt-0 flex-1 overflow-hidden"
>
<MarketplaceSuppliesTab />
</TabsContent>
</Tabs>