Обновлен интерфейс панели поставок: добавлены вкладки для товаров и расходников, улучшена навигация и функциональность. Удалены устаревшие данные и функции, оптимизирован код для лучшей читаемости и поддержки новых компонентов.
This commit is contained in:
Veronika Smirnova
@ -0,0 +1,948 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Calendar,
|
||||
Package,
|
||||
MapPin,
|
||||
Building2,
|
||||
TrendingUp,
|
||||
AlertTriangle,
|
||||
DollarSign,
|
||||
Wrench,
|
||||
Box,
|
||||
} from "lucide-react";
|
||||
|
||||
// Типы данных для расходников
|
||||
interface ConsumableParameter {
|
||||
id: string;
|
||||
name: string;
|
||||
value: string;
|
||||
unit?: string;
|
||||
}
|
||||
|
||||
interface Consumable {
|
||||
id: string;
|
||||
name: string;
|
||||
sku: string;
|
||||
category: string;
|
||||
type: "packaging" | "labels" | "protective" | "tools" | "other";
|
||||
plannedQty: number;
|
||||
actualQty: number;
|
||||
defectQty: number;
|
||||
unitPrice: number;
|
||||
parameters: ConsumableParameter[];
|
||||
}
|
||||
|
||||
interface ConsumableSupplier {
|
||||
id: string;
|
||||
name: string;
|
||||
inn: string;
|
||||
contact: string;
|
||||
address: string;
|
||||
consumables: Consumable[];
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
interface ConsumableRoute {
|
||||
id: string;
|
||||
from: string;
|
||||
fromAddress: string;
|
||||
to: string;
|
||||
toAddress: string;
|
||||
suppliers: ConsumableSupplier[];
|
||||
totalConsumablesPrice: number;
|
||||
logisticsPrice: number;
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
interface ConsumableSupply {
|
||||
id: string;
|
||||
number: number;
|
||||
deliveryDate: string;
|
||||
createdDate: string;
|
||||
routes: ConsumableRoute[];
|
||||
plannedTotal: number;
|
||||
actualTotal: number;
|
||||
defectTotal: number;
|
||||
totalConsumablesPrice: number;
|
||||
totalLogisticsPrice: number;
|
||||
grandTotal: number;
|
||||
status: "planned" | "in-transit" | "delivered" | "completed";
|
||||
}
|
||||
|
||||
// Моковые данные для расходников
|
||||
const mockConsumableSupplies: ConsumableSupply[] = [
|
||||
{
|
||||
id: "c1",
|
||||
number: 101,
|
||||
deliveryDate: "2024-01-18",
|
||||
createdDate: "2024-01-14",
|
||||
status: "delivered",
|
||||
plannedTotal: 5000,
|
||||
actualTotal: 4950,
|
||||
defectTotal: 50,
|
||||
totalConsumablesPrice: 125000,
|
||||
totalLogisticsPrice: 8000,
|
||||
grandTotal: 133000,
|
||||
routes: [
|
||||
{
|
||||
id: "cr1",
|
||||
from: "Склад расходников",
|
||||
fromAddress: "Москва, ул. Промышленная, 12",
|
||||
to: "SFERAV Logistics",
|
||||
toAddress: "Москва, ул. Складская, 15",
|
||||
totalConsumablesPrice: 125000,
|
||||
logisticsPrice: 8000,
|
||||
totalAmount: 133000,
|
||||
suppliers: [
|
||||
{
|
||||
id: "cs1",
|
||||
name: 'ООО "УпакСервис"',
|
||||
inn: "7703456789",
|
||||
contact: "+7 (495) 777-88-99",
|
||||
address: "Москва, ул. Упаковочная, 5",
|
||||
totalAmount: 75000,
|
||||
consumables: [
|
||||
{
|
||||
id: "cons1",
|
||||
name: "Коробки картонные 30x20x10",
|
||||
sku: "BOX-302010",
|
||||
category: "Упаковка",
|
||||
type: "packaging",
|
||||
plannedQty: 2000,
|
||||
actualQty: 1980,
|
||||
defectQty: 20,
|
||||
unitPrice: 35,
|
||||
parameters: [
|
||||
{ id: "cp1", name: "Размер", value: "30x20x10", unit: "см" },
|
||||
{ id: "cp2", name: "Материал", value: "Гофрокартон" },
|
||||
{ id: "cp3", name: "Плотность", value: "3", unit: "слоя" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "cons2",
|
||||
name: "Пузырчатая пленка",
|
||||
sku: "BUBBLE-100",
|
||||
category: "Защитная упаковка",
|
||||
type: "protective",
|
||||
plannedQty: 1000,
|
||||
actualQty: 1000,
|
||||
defectQty: 0,
|
||||
unitPrice: 25,
|
||||
parameters: [
|
||||
{ id: "cp4", name: "Ширина", value: "100", unit: "см" },
|
||||
{ id: "cp5", name: "Толщина", value: "0.1", unit: "мм" },
|
||||
{ id: "cp6", name: "Длина рулона", value: "50", unit: "м" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "cs2",
|
||||
name: "ИП Маркин С.А.",
|
||||
inn: "123456789013",
|
||||
contact: "+7 (499) 111-22-33",
|
||||
address: "Москва, пр-т Маркировочный, 8",
|
||||
totalAmount: 50000,
|
||||
consumables: [
|
||||
{
|
||||
id: "cons3",
|
||||
name: "Этикетки самоклеящиеся",
|
||||
sku: "LABEL-5030",
|
||||
category: "Маркировка",
|
||||
type: "labels",
|
||||
plannedQty: 2000,
|
||||
actualQty: 1970,
|
||||
defectQty: 30,
|
||||
unitPrice: 15,
|
||||
parameters: [
|
||||
{ id: "cp7", name: "Размер", value: "50x30", unit: "мм" },
|
||||
{ id: "cp8", name: "Материал", value: "Полипропилен" },
|
||||
{ id: "cp9", name: "Клей", value: "Акриловый" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "c2",
|
||||
number: 102,
|
||||
deliveryDate: "2024-01-22",
|
||||
createdDate: "2024-01-16",
|
||||
status: "in-transit",
|
||||
plannedTotal: 1500,
|
||||
actualTotal: 1500,
|
||||
defectTotal: 0,
|
||||
totalConsumablesPrice: 45000,
|
||||
totalLogisticsPrice: 3000,
|
||||
grandTotal: 48000,
|
||||
routes: [
|
||||
{
|
||||
id: "cr2",
|
||||
from: "Инструментальный склад",
|
||||
fromAddress: "Подольск, ул. Индустриальная, 25",
|
||||
to: "WB Подольск",
|
||||
toAddress: "Подольск, ул. Складская, 25",
|
||||
totalConsumablesPrice: 45000,
|
||||
logisticsPrice: 3000,
|
||||
totalAmount: 48000,
|
||||
suppliers: [
|
||||
{
|
||||
id: "cs3",
|
||||
name: 'ООО "ИнструментПро"',
|
||||
inn: "5001234567",
|
||||
contact: "+7 (4967) 55-66-77",
|
||||
address: "Подольск, ул. Инструментальная, 15",
|
||||
totalAmount: 45000,
|
||||
consumables: [
|
||||
{
|
||||
id: "cons4",
|
||||
name: "Сканер штрих-кодов",
|
||||
sku: "SCANNER-2D",
|
||||
category: "Оборудование",
|
||||
type: "tools",
|
||||
plannedQty: 5,
|
||||
actualQty: 5,
|
||||
defectQty: 0,
|
||||
unitPrice: 8000,
|
||||
parameters: [
|
||||
{ id: "cp10", name: "Тип", value: "2D сканер" },
|
||||
{ id: "cp11", name: "Интерфейс", value: "USB" },
|
||||
{ id: "cp12", name: "Дальность", value: "30", unit: "см" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "cons5",
|
||||
name: "Термопринтер этикеток",
|
||||
sku: "PRINTER-THERMAL",
|
||||
category: "Оборудование",
|
||||
type: "tools",
|
||||
plannedQty: 2,
|
||||
actualQty: 2,
|
||||
defectQty: 0,
|
||||
unitPrice: 2500,
|
||||
parameters: [
|
||||
{
|
||||
id: "cp13",
|
||||
name: "Ширина печати",
|
||||
value: "108",
|
||||
unit: "мм",
|
||||
},
|
||||
{ id: "cp14", name: "Разрешение", value: "203", unit: "dpi" },
|
||||
{ id: "cp15", name: "Скорость", value: "102", unit: "мм/с" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export function SuppliesConsumablesTab() {
|
||||
const [expandedSupplies, setExpandedSupplies] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
const [expandedRoutes, setExpandedRoutes] = useState<Set<string>>(new Set());
|
||||
const [expandedSuppliers, setExpandedSuppliers] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
const [expandedConsumables, setExpandedConsumables] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
|
||||
const toggleSupplyExpansion = (supplyId: string) => {
|
||||
const newExpanded = new Set(expandedSupplies);
|
||||
if (newExpanded.has(supplyId)) {
|
||||
newExpanded.delete(supplyId);
|
||||
} else {
|
||||
newExpanded.add(supplyId);
|
||||
}
|
||||
setExpandedSupplies(newExpanded);
|
||||
};
|
||||
|
||||
const toggleRouteExpansion = (routeId: string) => {
|
||||
const newExpanded = new Set(expandedRoutes);
|
||||
if (newExpanded.has(routeId)) {
|
||||
newExpanded.delete(routeId);
|
||||
} else {
|
||||
newExpanded.add(routeId);
|
||||
}
|
||||
setExpandedRoutes(newExpanded);
|
||||
};
|
||||
|
||||
const toggleSupplierExpansion = (supplierId: string) => {
|
||||
const newExpanded = new Set(expandedSuppliers);
|
||||
if (newExpanded.has(supplierId)) {
|
||||
newExpanded.delete(supplierId);
|
||||
} else {
|
||||
newExpanded.add(supplierId);
|
||||
}
|
||||
setExpandedSuppliers(newExpanded);
|
||||
};
|
||||
|
||||
const toggleConsumableExpansion = (consumableId: string) => {
|
||||
const newExpanded = new Set(expandedConsumables);
|
||||
if (newExpanded.has(consumableId)) {
|
||||
newExpanded.delete(consumableId);
|
||||
} else {
|
||||
newExpanded.add(consumableId);
|
||||
}
|
||||
setExpandedConsumables(newExpanded);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: ConsumableSupply["status"]) => {
|
||||
const statusMap = {
|
||||
planned: {
|
||||
label: "Запланирована",
|
||||
color: "bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
},
|
||||
"in-transit": {
|
||||
label: "В пути",
|
||||
color: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
|
||||
},
|
||||
delivered: {
|
||||
label: "Доставлена",
|
||||
color: "bg-green-500/20 text-green-300 border-green-500/30",
|
||||
},
|
||||
completed: {
|
||||
label: "Завершена",
|
||||
color: "bg-purple-500/20 text-purple-300 border-purple-500/30",
|
||||
},
|
||||
};
|
||||
const { label, color } = statusMap[status];
|
||||
return <Badge className={`${color} border`}>{label}</Badge>;
|
||||
};
|
||||
|
||||
const getTypeBadge = (type: Consumable["type"]) => {
|
||||
const typeMap = {
|
||||
packaging: {
|
||||
label: "Упаковка",
|
||||
color: "bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
},
|
||||
labels: {
|
||||
label: "Этикетки",
|
||||
color: "bg-green-500/20 text-green-300 border-green-500/30",
|
||||
},
|
||||
protective: {
|
||||
label: "Защитная",
|
||||
color: "bg-orange-500/20 text-orange-300 border-orange-500/30",
|
||||
},
|
||||
tools: {
|
||||
label: "Инструменты",
|
||||
color: "bg-purple-500/20 text-purple-300 border-purple-500/30",
|
||||
},
|
||||
other: {
|
||||
label: "Прочее",
|
||||
color: "bg-gray-500/20 text-gray-300 border-gray-500/30",
|
||||
},
|
||||
};
|
||||
const { label, color } = typeMap[type];
|
||||
return <Badge className={`${color} border text-xs`}>{label}</Badge>;
|
||||
};
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const calculateConsumableTotal = (consumable: Consumable) => {
|
||||
return consumable.actualQty * consumable.unitPrice;
|
||||
};
|
||||
|
||||
const getEfficiencyBadge = (
|
||||
planned: number,
|
||||
actual: number,
|
||||
defect: number
|
||||
) => {
|
||||
const efficiency = ((actual - defect) / planned) * 100;
|
||||
if (efficiency >= 95) {
|
||||
return (
|
||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 border">
|
||||
Отлично
|
||||
</Badge>
|
||||
);
|
||||
} else if (efficiency >= 90) {
|
||||
return (
|
||||
<Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30 border">
|
||||
Хорошо
|
||||
</Badge>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Badge className="bg-red-500/20 text-red-300 border-red-500/30 border">
|
||||
Проблемы
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Статистика расходников */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-orange-500/20 rounded-lg">
|
||||
<Box className="h-5 w-5 text-orange-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-xs">Поставок расходников</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
{mockConsumableSupplies.length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-green-500/20 rounded-lg">
|
||||
<TrendingUp className="h-5 w-5 text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-xs">Сумма расходников</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
{formatCurrency(
|
||||
mockConsumableSupplies.reduce(
|
||||
(sum, supply) => sum + supply.grandTotal,
|
||||
0
|
||||
)
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-yellow-500/20 rounded-lg">
|
||||
<Calendar className="h-5 w-5 text-yellow-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-xs">В пути</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
{
|
||||
mockConsumableSupplies.filter(
|
||||
(supply) => supply.status === "in-transit"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-red-500/20 rounded-lg">
|
||||
<AlertTriangle className="h-5 w-5 text-red-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-xs">С браком</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
{
|
||||
mockConsumableSupplies.filter(
|
||||
(supply) => supply.defectTotal > 0
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Таблица поставок расходников */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-white/20">
|
||||
<th className="text-left p-4 text-white font-semibold">№</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Дата поставки
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Дата создания
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">План</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Брак</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Цена расходников
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Логистика
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Итого сумма
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Статус
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mockConsumableSupplies.map((supply) => {
|
||||
const isSupplyExpanded = expandedSupplies.has(supply.id);
|
||||
|
||||
return (
|
||||
<React.Fragment key={supply.id}>
|
||||
{/* Основная строка поставки расходников */}
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-orange-500/10">
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-semibold">
|
||||
{formatDate(supply.deliveryDate)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{formatDate(supply.createdDate)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{supply.plannedTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{supply.actualTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span
|
||||
className={`font-semibold ${
|
||||
supply.defectTotal > 0
|
||||
? "text-red-400"
|
||||
: "text-white"
|
||||
}`}
|
||||
>
|
||||
{supply.defectTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-semibold">
|
||||
{formatCurrency(supply.totalConsumablesPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-purple-400 font-semibold">
|
||||
{formatCurrency(supply.totalLogisticsPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<DollarSign className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-bold text-lg">
|
||||
{formatCurrency(supply.grandTotal)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">{getStatusBadge(supply.status)}</td>
|
||||
</tr>
|
||||
|
||||
{/* Развернутые уровни */}
|
||||
{isSupplyExpanded &&
|
||||
supply.routes.map((route) => {
|
||||
const isRouteExpanded = expandedRoutes.has(route.id);
|
||||
return (
|
||||
<React.Fragment key={route.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10">
|
||||
<td className="p-4 pl-12">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleRouteExpansion(route.id)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isRouteExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<MapPin className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-white font-medium">
|
||||
Маршрут
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<span className="font-medium">
|
||||
{route.from}
|
||||
</span>
|
||||
<span className="text-white/60">→</span>
|
||||
<span className="font-medium">
|
||||
{route.to}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
{route.fromAddress} → {route.toAddress}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.suppliers.reduce(
|
||||
(sum, s) =>
|
||||
sum +
|
||||
s.consumables.reduce(
|
||||
(cSum, c) => cSum + c.plannedQty,
|
||||
0
|
||||
),
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.suppliers.reduce(
|
||||
(sum, s) =>
|
||||
sum +
|
||||
s.consumables.reduce(
|
||||
(cSum, c) => cSum + c.actualQty,
|
||||
0
|
||||
),
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.suppliers.reduce(
|
||||
(sum, s) =>
|
||||
sum +
|
||||
s.consumables.reduce(
|
||||
(cSum, c) => cSum + c.defectQty,
|
||||
0
|
||||
),
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">
|
||||
{formatCurrency(route.totalConsumablesPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-purple-400 font-medium">
|
||||
{formatCurrency(route.logisticsPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{formatCurrency(route.totalAmount)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Поставщики */}
|
||||
{isRouteExpanded &&
|
||||
route.suppliers.map((supplier) => {
|
||||
const isSupplierExpanded =
|
||||
expandedSuppliers.has(supplier.id);
|
||||
return (
|
||||
<React.Fragment key={supplier.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-green-500/10">
|
||||
<td className="p-4 pl-20">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleSupplierExpansion(
|
||||
supplier.id
|
||||
)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isSupplierExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Building2 className="h-4 w-4 text-green-400" />
|
||||
<span className="text-white font-medium">
|
||||
Поставщик
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">
|
||||
{supplier.name}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
ИНН: {supplier.inn}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
{supplier.address}
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
{supplier.contact}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{supplier.consumables.reduce(
|
||||
(sum, c) => sum + c.plannedQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{supplier.consumables.reduce(
|
||||
(sum, c) => sum + c.actualQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{supplier.consumables.reduce(
|
||||
(sum, c) => sum + c.defectQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">
|
||||
{formatCurrency(
|
||||
supplier.consumables.reduce(
|
||||
(sum, c) =>
|
||||
sum +
|
||||
calculateConsumableTotal(c),
|
||||
0
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{formatCurrency(supplier.totalAmount)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Расходники */}
|
||||
{isSupplierExpanded &&
|
||||
supplier.consumables.map((consumable) => {
|
||||
const isConsumableExpanded =
|
||||
expandedConsumables.has(
|
||||
consumable.id
|
||||
);
|
||||
return (
|
||||
<React.Fragment key={consumable.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-yellow-500/10">
|
||||
<td className="p-4 pl-28">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleConsumableExpansion(
|
||||
consumable.id
|
||||
)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isConsumableExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Wrench className="h-4 w-4 text-yellow-400" />
|
||||
<span className="text-white font-medium">
|
||||
Расходник
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">
|
||||
{consumable.name}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
Артикул: {consumable.sku}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs">
|
||||
{consumable.category}
|
||||
</Badge>
|
||||
{getTypeBadge(
|
||||
consumable.type
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{consumable.plannedQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{consumable.actualQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span
|
||||
className={`font-semibold ${
|
||||
consumable.defectQty > 0
|
||||
? "text-red-400"
|
||||
: "text-white"
|
||||
}`}
|
||||
>
|
||||
{consumable.defectQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-white">
|
||||
<div className="font-medium">
|
||||
{formatCurrency(
|
||||
calculateConsumableTotal(
|
||||
consumable
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
{formatCurrency(
|
||||
consumable.unitPrice
|
||||
)}{" "}
|
||||
за шт.
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
{getEfficiencyBadge(
|
||||
consumable.plannedQty,
|
||||
consumable.actualQty,
|
||||
consumable.defectQty
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{formatCurrency(
|
||||
calculateConsumableTotal(
|
||||
consumable
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Параметры расходника */}
|
||||
{isConsumableExpanded && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={10}
|
||||
className="p-0"
|
||||
>
|
||||
<div className="bg-white/5 border-t border-white/10">
|
||||
<div className="p-4 pl-36">
|
||||
<h4 className="text-white font-medium mb-3 flex items-center space-x-2">
|
||||
<span className="text-xs text-white/60">
|
||||
📋 Параметры
|
||||
расходника:
|
||||
</span>
|
||||
</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{consumable.parameters.map(
|
||||
(param) => (
|
||||
<div
|
||||
key={param.id}
|
||||
className="bg-white/5 rounded-lg p-3"
|
||||
>
|
||||
<div className="text-white/80 text-xs font-medium mb-1">
|
||||
{param.name}
|
||||
</div>
|
||||
<div className="text-white text-sm">
|
||||
{param.value}{" "}
|
||||
{param.unit ||
|
||||
""}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
866
src/components/supplies/goods-supplies/goods-supplies-tab.tsx
Normal file
866
src/components/supplies/goods-supplies/goods-supplies-tab.tsx
Normal file
@ -0,0 +1,866 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Calendar,
|
||||
Package,
|
||||
MapPin,
|
||||
Building2,
|
||||
TrendingUp,
|
||||
AlertTriangle,
|
||||
DollarSign,
|
||||
} from "lucide-react";
|
||||
|
||||
// Типы данных для товаров
|
||||
interface ProductParameter {
|
||||
id: string;
|
||||
name: string;
|
||||
value: string;
|
||||
unit?: string;
|
||||
}
|
||||
|
||||
interface Product {
|
||||
id: string;
|
||||
name: string;
|
||||
sku: string;
|
||||
category: string;
|
||||
plannedQty: number;
|
||||
actualQty: number;
|
||||
defectQty: number;
|
||||
productPrice: number;
|
||||
parameters: ProductParameter[];
|
||||
}
|
||||
|
||||
interface Wholesaler {
|
||||
id: string;
|
||||
name: string;
|
||||
inn: string;
|
||||
contact: string;
|
||||
address: string;
|
||||
products: Product[];
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
interface Route {
|
||||
id: string;
|
||||
from: string;
|
||||
fromAddress: string;
|
||||
to: string;
|
||||
toAddress: string;
|
||||
wholesalers: Wholesaler[];
|
||||
totalProductPrice: number;
|
||||
fulfillmentServicePrice: number;
|
||||
logisticsPrice: number;
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
interface Supply {
|
||||
id: string;
|
||||
number: number;
|
||||
deliveryDate: string;
|
||||
createdDate: string;
|
||||
routes: Route[];
|
||||
plannedTotal: number;
|
||||
actualTotal: number;
|
||||
defectTotal: number;
|
||||
totalProductPrice: number;
|
||||
totalFulfillmentPrice: number;
|
||||
totalLogisticsPrice: number;
|
||||
grandTotal: number;
|
||||
status: "planned" | "in-transit" | "delivered" | "completed";
|
||||
}
|
||||
|
||||
// Моковые данные для товаров
|
||||
const mockGoodsSupplies: Supply[] = [
|
||||
{
|
||||
id: "1",
|
||||
number: 1,
|
||||
deliveryDate: "2024-01-15",
|
||||
createdDate: "2024-01-10",
|
||||
status: "delivered",
|
||||
plannedTotal: 180,
|
||||
actualTotal: 173,
|
||||
defectTotal: 2,
|
||||
totalProductPrice: 3750000,
|
||||
totalFulfillmentPrice: 43000,
|
||||
totalLogisticsPrice: 27000,
|
||||
grandTotal: 3820000,
|
||||
routes: [
|
||||
{
|
||||
id: "r1",
|
||||
from: "Садовод",
|
||||
fromAddress: "Москва, 14-й км МКАД",
|
||||
to: "SFERAV Logistics",
|
||||
toAddress: "Москва, ул. Складская, 15",
|
||||
totalProductPrice: 3600000,
|
||||
fulfillmentServicePrice: 25000,
|
||||
logisticsPrice: 15000,
|
||||
totalAmount: 3640000,
|
||||
wholesalers: [
|
||||
{
|
||||
id: "w1",
|
||||
name: 'ООО "ТехноСнаб"',
|
||||
inn: "7701234567",
|
||||
contact: "+7 (495) 123-45-67",
|
||||
address: "Москва, ул. Торговая, 1",
|
||||
totalAmount: 3600000,
|
||||
products: [
|
||||
{
|
||||
id: "p1",
|
||||
name: "Смартфон iPhone 15",
|
||||
sku: "APL-IP15-128",
|
||||
category: "Электроника",
|
||||
plannedQty: 50,
|
||||
actualQty: 48,
|
||||
defectQty: 2,
|
||||
productPrice: 75000,
|
||||
parameters: [
|
||||
{ id: "param1", name: "Цвет", value: "Черный" },
|
||||
{ id: "param2", name: "Память", value: "128", unit: "ГБ" },
|
||||
{ id: "param3", name: "Гарантия", value: "12", unit: "мес" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
number: 2,
|
||||
deliveryDate: "2024-01-20",
|
||||
createdDate: "2024-01-12",
|
||||
status: "in-transit",
|
||||
plannedTotal: 30,
|
||||
actualTotal: 30,
|
||||
defectTotal: 0,
|
||||
totalProductPrice: 750000,
|
||||
totalFulfillmentPrice: 18000,
|
||||
totalLogisticsPrice: 12000,
|
||||
grandTotal: 780000,
|
||||
routes: [
|
||||
{
|
||||
id: "r3",
|
||||
from: "Садовод",
|
||||
fromAddress: "Москва, 14-й км МКАД",
|
||||
to: "WB Подольск",
|
||||
toAddress: "Подольск, ул. Складская, 25",
|
||||
totalProductPrice: 750000,
|
||||
fulfillmentServicePrice: 18000,
|
||||
logisticsPrice: 12000,
|
||||
totalAmount: 780000,
|
||||
wholesalers: [
|
||||
{
|
||||
id: "w3",
|
||||
name: 'ООО "АудиоТех"',
|
||||
inn: "7702345678",
|
||||
contact: "+7 (495) 555-12-34",
|
||||
address: "Москва, ул. Звуковая, 8",
|
||||
totalAmount: 750000,
|
||||
products: [
|
||||
{
|
||||
id: "p3",
|
||||
name: "Наушники AirPods Pro",
|
||||
sku: "APL-AP-PRO2",
|
||||
category: "Аудио",
|
||||
plannedQty: 30,
|
||||
actualQty: 30,
|
||||
defectQty: 0,
|
||||
productPrice: 25000,
|
||||
parameters: [
|
||||
{ id: "param6", name: "Тип", value: "Беспроводные" },
|
||||
{ id: "param7", name: "Шумоподавление", value: "Активное" },
|
||||
{ id: "param8", name: "Время работы", value: "6", unit: "ч" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export function SuppliesGoodsTab() {
|
||||
const [expandedSupplies, setExpandedSupplies] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
const [expandedRoutes, setExpandedRoutes] = useState<Set<string>>(new Set());
|
||||
const [expandedWholesalers, setExpandedWholesalers] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
const [expandedProducts, setExpandedProducts] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
|
||||
const toggleSupplyExpansion = (supplyId: string) => {
|
||||
const newExpanded = new Set(expandedSupplies);
|
||||
if (newExpanded.has(supplyId)) {
|
||||
newExpanded.delete(supplyId);
|
||||
} else {
|
||||
newExpanded.add(supplyId);
|
||||
}
|
||||
setExpandedSupplies(newExpanded);
|
||||
};
|
||||
|
||||
const toggleRouteExpansion = (routeId: string) => {
|
||||
const newExpanded = new Set(expandedRoutes);
|
||||
if (newExpanded.has(routeId)) {
|
||||
newExpanded.delete(routeId);
|
||||
} else {
|
||||
newExpanded.add(routeId);
|
||||
}
|
||||
setExpandedRoutes(newExpanded);
|
||||
};
|
||||
|
||||
const toggleWholesalerExpansion = (wholesalerId: string) => {
|
||||
const newExpanded = new Set(expandedWholesalers);
|
||||
if (newExpanded.has(wholesalerId)) {
|
||||
newExpanded.delete(wholesalerId);
|
||||
} else {
|
||||
newExpanded.add(wholesalerId);
|
||||
}
|
||||
setExpandedWholesalers(newExpanded);
|
||||
};
|
||||
|
||||
const toggleProductExpansion = (productId: string) => {
|
||||
const newExpanded = new Set(expandedProducts);
|
||||
if (newExpanded.has(productId)) {
|
||||
newExpanded.delete(productId);
|
||||
} else {
|
||||
newExpanded.add(productId);
|
||||
}
|
||||
setExpandedProducts(newExpanded);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: Supply["status"]) => {
|
||||
const statusMap = {
|
||||
planned: {
|
||||
label: "Запланирована",
|
||||
color: "bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
},
|
||||
"in-transit": {
|
||||
label: "В пути",
|
||||
color: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
|
||||
},
|
||||
delivered: {
|
||||
label: "Доставлена",
|
||||
color: "bg-green-500/20 text-green-300 border-green-500/30",
|
||||
},
|
||||
completed: {
|
||||
label: "Завершена",
|
||||
color: "bg-purple-500/20 text-purple-300 border-purple-500/30",
|
||||
},
|
||||
};
|
||||
const { label, color } = statusMap[status];
|
||||
return <Badge className={`${color} border`}>{label}</Badge>;
|
||||
};
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
currency: "RUB",
|
||||
minimumFractionDigits: 0,
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const calculateProductTotal = (product: Product) => {
|
||||
return product.actualQty * product.productPrice;
|
||||
};
|
||||
|
||||
const getEfficiencyBadge = (
|
||||
planned: number,
|
||||
actual: number,
|
||||
defect: number
|
||||
) => {
|
||||
const efficiency = ((actual - defect) / planned) * 100;
|
||||
if (efficiency >= 95) {
|
||||
return (
|
||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 border">
|
||||
Отлично
|
||||
</Badge>
|
||||
);
|
||||
} else if (efficiency >= 90) {
|
||||
return (
|
||||
<Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30 border">
|
||||
Хорошо
|
||||
</Badge>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Badge className="bg-red-500/20 text-red-300 border-red-500/30 border">
|
||||
Проблемы
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Статистика товаров */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-blue-500/20 rounded-lg">
|
||||
<Package className="h-5 w-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-xs">Поставок товаров</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
{mockGoodsSupplies.length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-green-500/20 rounded-lg">
|
||||
<TrendingUp className="h-5 w-5 text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-xs">Сумма товаров</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
{formatCurrency(
|
||||
mockGoodsSupplies.reduce(
|
||||
(sum, supply) => sum + supply.grandTotal,
|
||||
0
|
||||
)
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-yellow-500/20 rounded-lg">
|
||||
<Calendar className="h-5 w-5 text-yellow-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-xs">В пути</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
{
|
||||
mockGoodsSupplies.filter(
|
||||
(supply) => supply.status === "in-transit"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-red-500/20 rounded-lg">
|
||||
<AlertTriangle className="h-5 w-5 text-red-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-xs">С браком</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
{
|
||||
mockGoodsSupplies.filter((supply) => supply.defectTotal > 0)
|
||||
.length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Таблица поставок товаров */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-white/20">
|
||||
<th className="text-left p-4 text-white font-semibold">№</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Дата поставки
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Дата создания
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">План</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Брак</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Цена товаров
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Услуги ФФ
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Логистика до ФФ
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Итого сумма
|
||||
</th>
|
||||
<th className="text-left p-4 text-white font-semibold">
|
||||
Статус
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mockGoodsSupplies.map((supply) => {
|
||||
const isSupplyExpanded = expandedSupplies.has(supply.id);
|
||||
|
||||
return (
|
||||
<React.Fragment key={supply.id}>
|
||||
{/* Уровень 1: Основная строка поставки */}
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10">
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-semibold">
|
||||
{formatDate(supply.deliveryDate)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{formatDate(supply.createdDate)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{supply.plannedTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{supply.actualTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span
|
||||
className={`font-semibold ${
|
||||
supply.defectTotal > 0
|
||||
? "text-red-400"
|
||||
: "text-white"
|
||||
}`}
|
||||
>
|
||||
{supply.defectTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-semibold">
|
||||
{formatCurrency(supply.totalProductPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-blue-400 font-semibold">
|
||||
{formatCurrency(supply.totalFulfillmentPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-purple-400 font-semibold">
|
||||
{formatCurrency(supply.totalLogisticsPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<DollarSign className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-bold text-lg">
|
||||
{formatCurrency(supply.grandTotal)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">{getStatusBadge(supply.status)}</td>
|
||||
</tr>
|
||||
|
||||
{/* Развернутые уровни */}
|
||||
{isSupplyExpanded &&
|
||||
supply.routes.map((route) => {
|
||||
const isRouteExpanded = expandedRoutes.has(route.id);
|
||||
return (
|
||||
<React.Fragment key={route.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10">
|
||||
<td className="p-4 pl-12">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleRouteExpansion(route.id)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isRouteExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<MapPin className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-white font-medium">
|
||||
Маршрут
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<span className="font-medium">
|
||||
{route.from}
|
||||
</span>
|
||||
<span className="text-white/60">→</span>
|
||||
<span className="font-medium">
|
||||
{route.to}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
{route.fromAddress} → {route.toAddress}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.wholesalers.reduce(
|
||||
(sum, w) =>
|
||||
sum +
|
||||
w.products.reduce(
|
||||
(pSum, p) => pSum + p.plannedQty,
|
||||
0
|
||||
),
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.wholesalers.reduce(
|
||||
(sum, w) =>
|
||||
sum +
|
||||
w.products.reduce(
|
||||
(pSum, p) => pSum + p.actualQty,
|
||||
0
|
||||
),
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.wholesalers.reduce(
|
||||
(sum, w) =>
|
||||
sum +
|
||||
w.products.reduce(
|
||||
(pSum, p) => pSum + p.defectQty,
|
||||
0
|
||||
),
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">
|
||||
{formatCurrency(route.totalProductPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-blue-400 font-medium">
|
||||
{formatCurrency(
|
||||
route.fulfillmentServicePrice
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-purple-400 font-medium">
|
||||
{formatCurrency(route.logisticsPrice)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{formatCurrency(route.totalAmount)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Дальнейшие уровни развертывания */}
|
||||
{isRouteExpanded &&
|
||||
route.wholesalers.map((wholesaler) => {
|
||||
const isWholesalerExpanded =
|
||||
expandedWholesalers.has(wholesaler.id);
|
||||
return (
|
||||
<React.Fragment key={wholesaler.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-green-500/10">
|
||||
<td className="p-4 pl-20">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleWholesalerExpansion(
|
||||
wholesaler.id
|
||||
)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isWholesalerExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Building2 className="h-4 w-4 text-green-400" />
|
||||
<span className="text-white font-medium">
|
||||
Оптовик
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">
|
||||
{wholesaler.name}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
ИНН: {wholesaler.inn}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
{wholesaler.address}
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
{wholesaler.contact}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{wholesaler.products.reduce(
|
||||
(sum, p) => sum + p.plannedQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{wholesaler.products.reduce(
|
||||
(sum, p) => sum + p.actualQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{wholesaler.products.reduce(
|
||||
(sum, p) => sum + p.defectQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">
|
||||
{formatCurrency(
|
||||
wholesaler.products.reduce(
|
||||
(sum, p) =>
|
||||
sum + calculateProductTotal(p),
|
||||
0
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}></td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{formatCurrency(
|
||||
wholesaler.totalAmount
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Товары */}
|
||||
{isWholesalerExpanded &&
|
||||
wholesaler.products.map((product) => {
|
||||
const isProductExpanded =
|
||||
expandedProducts.has(product.id);
|
||||
return (
|
||||
<React.Fragment key={product.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-yellow-500/10">
|
||||
<td className="p-4 pl-28">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleProductExpansion(
|
||||
product.id
|
||||
)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isProductExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Package className="h-4 w-4 text-yellow-400" />
|
||||
<span className="text-white font-medium">
|
||||
Товар
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">
|
||||
{product.name}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
Артикул: {product.sku}
|
||||
</div>
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs">
|
||||
{product.category}
|
||||
</Badge>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{product.plannedQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{product.actualQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span
|
||||
className={`font-semibold ${
|
||||
product.defectQty > 0
|
||||
? "text-red-400"
|
||||
: "text-white"
|
||||
}`}
|
||||
>
|
||||
{product.defectQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-white">
|
||||
<div className="font-medium">
|
||||
{formatCurrency(
|
||||
calculateProductTotal(
|
||||
product
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
{formatCurrency(
|
||||
product.productPrice
|
||||
)}{" "}
|
||||
за шт.
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
{getEfficiencyBadge(
|
||||
product.plannedQty,
|
||||
product.actualQty,
|
||||
product.defectQty
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{formatCurrency(
|
||||
calculateProductTotal(
|
||||
product
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Параметры товара */}
|
||||
{isProductExpanded && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={11}
|
||||
className="p-0"
|
||||
>
|
||||
<div className="bg-white/5 border-t border-white/10">
|
||||
<div className="p-4 pl-36">
|
||||
<h4 className="text-white font-medium mb-3 flex items-center space-x-2">
|
||||
<span className="text-xs text-white/60">
|
||||
📋 Параметры товара:
|
||||
</span>
|
||||
</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{product.parameters.map(
|
||||
(param) => (
|
||||
<div
|
||||
key={param.id}
|
||||
className="bg-white/5 rounded-lg p-3"
|
||||
>
|
||||
<div className="text-white/80 text-xs font-medium mb-1">
|
||||
{param.name}
|
||||
</div>
|
||||
<div className="text-white text-sm">
|
||||
{param.value}{" "}
|
||||
{param.unit ||
|
||||
""}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,726 +1,68 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||
import { useSidebar } from '@/hooks/useSidebar'
|
||||
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
Calendar,
|
||||
Package,
|
||||
MapPin,
|
||||
Building2,
|
||||
TrendingUp,
|
||||
AlertTriangle,
|
||||
DollarSign
|
||||
} from 'lucide-react'
|
||||
|
||||
|
||||
// Типы данных для 5-уровневой структуры
|
||||
|
||||
|
||||
|
||||
interface ProductParameter {
|
||||
id: string
|
||||
name: string
|
||||
value: string
|
||||
unit?: string
|
||||
}
|
||||
|
||||
interface Product {
|
||||
id: string
|
||||
name: string
|
||||
sku: string
|
||||
category: string
|
||||
plannedQty: number
|
||||
actualQty: number
|
||||
defectQty: number
|
||||
productPrice: number
|
||||
parameters: ProductParameter[]
|
||||
}
|
||||
|
||||
interface Wholesaler {
|
||||
id: string
|
||||
name: string
|
||||
inn: string
|
||||
contact: string
|
||||
address: string
|
||||
products: Product[]
|
||||
totalAmount: number
|
||||
}
|
||||
|
||||
interface Route {
|
||||
id: string
|
||||
from: string
|
||||
fromAddress: string
|
||||
to: string
|
||||
toAddress: string
|
||||
wholesalers: Wholesaler[]
|
||||
totalProductPrice: number
|
||||
fulfillmentServicePrice: number
|
||||
logisticsPrice: number
|
||||
totalAmount: number
|
||||
}
|
||||
|
||||
interface Supply {
|
||||
id: string
|
||||
number: number
|
||||
deliveryDate: string
|
||||
createdDate: string
|
||||
routes: Route[]
|
||||
plannedTotal: number
|
||||
actualTotal: number
|
||||
defectTotal: number
|
||||
totalProductPrice: number
|
||||
totalFulfillmentPrice: number
|
||||
totalLogisticsPrice: number
|
||||
grandTotal: number
|
||||
status: 'planned' | 'in-transit' | 'delivered' | 'completed'
|
||||
}
|
||||
|
||||
// Моковые данные для 5-уровневой структуры
|
||||
const mockSupplies: Supply[] = [
|
||||
{
|
||||
id: '1',
|
||||
number: 1,
|
||||
deliveryDate: '2024-01-15',
|
||||
createdDate: '2024-01-10',
|
||||
status: 'delivered',
|
||||
plannedTotal: 180,
|
||||
actualTotal: 173,
|
||||
defectTotal: 2,
|
||||
totalProductPrice: 3750000,
|
||||
totalFulfillmentPrice: 43000,
|
||||
totalLogisticsPrice: 27000,
|
||||
grandTotal: 3820000,
|
||||
routes: [
|
||||
{
|
||||
id: 'r1',
|
||||
from: 'Садовод',
|
||||
fromAddress: 'Москва, 14-й км МКАД',
|
||||
to: 'SFERAV Logistics',
|
||||
toAddress: 'Москва, ул. Складская, 15',
|
||||
totalProductPrice: 3600000,
|
||||
fulfillmentServicePrice: 25000,
|
||||
logisticsPrice: 15000,
|
||||
totalAmount: 3640000,
|
||||
wholesalers: [
|
||||
{
|
||||
id: 'w1',
|
||||
name: 'ООО "ТехноСнаб"',
|
||||
inn: '7701234567',
|
||||
contact: '+7 (495) 123-45-67',
|
||||
address: 'Москва, ул. Торговая, 1',
|
||||
totalAmount: 3600000,
|
||||
products: [
|
||||
{
|
||||
id: 'p1',
|
||||
name: 'Смартфон iPhone 15',
|
||||
sku: 'APL-IP15-128',
|
||||
category: 'Электроника',
|
||||
plannedQty: 50,
|
||||
actualQty: 48,
|
||||
defectQty: 2,
|
||||
productPrice: 75000,
|
||||
parameters: [
|
||||
{ id: 'param1', name: 'Цвет', value: 'Черный' },
|
||||
{ id: 'param2', name: 'Память', value: '128', unit: 'ГБ' },
|
||||
{ id: 'param3', name: 'Гарантия', value: '12', unit: 'мес' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'r2',
|
||||
from: 'ТЯК Москва',
|
||||
fromAddress: 'Москва, Алтуфьевское шоссе, 27',
|
||||
to: 'MegaFulfillment',
|
||||
toAddress: 'Подольск, ул. Индустриальная, 42',
|
||||
totalProductPrice: 150000,
|
||||
fulfillmentServicePrice: 18000,
|
||||
logisticsPrice: 12000,
|
||||
totalAmount: 180000,
|
||||
wholesalers: [
|
||||
{
|
||||
id: 'w2',
|
||||
name: 'ИП Петров А.В.',
|
||||
inn: '123456789012',
|
||||
contact: '+7 (499) 987-65-43',
|
||||
address: 'Москва, пр-т Мира, 45',
|
||||
totalAmount: 150000,
|
||||
products: [
|
||||
{
|
||||
id: 'p2',
|
||||
name: 'Чехол для iPhone 15',
|
||||
sku: 'ACC-IP15-CASE',
|
||||
category: 'Аксессуары',
|
||||
plannedQty: 100,
|
||||
actualQty: 95,
|
||||
defectQty: 0,
|
||||
productPrice: 1500,
|
||||
parameters: [
|
||||
{ id: 'param4', name: 'Материал', value: 'Силикон' },
|
||||
{ id: 'param5', name: 'Цвет', value: 'Прозрачный' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
number: 2,
|
||||
deliveryDate: '2024-01-20',
|
||||
createdDate: '2024-01-12',
|
||||
status: 'in-transit',
|
||||
plannedTotal: 30,
|
||||
actualTotal: 30,
|
||||
defectTotal: 0,
|
||||
totalProductPrice: 750000,
|
||||
totalFulfillmentPrice: 18000,
|
||||
totalLogisticsPrice: 12000,
|
||||
grandTotal: 780000,
|
||||
routes: [
|
||||
{
|
||||
id: 'r3',
|
||||
from: 'Садовод',
|
||||
fromAddress: 'Москва, 14-й км МКАД',
|
||||
to: 'WB Подольск',
|
||||
toAddress: 'Подольск, ул. Складская, 25',
|
||||
totalProductPrice: 750000,
|
||||
fulfillmentServicePrice: 18000,
|
||||
logisticsPrice: 12000,
|
||||
totalAmount: 780000,
|
||||
wholesalers: [
|
||||
{
|
||||
id: 'w3',
|
||||
name: 'ООО "АудиоТех"',
|
||||
inn: '7702345678',
|
||||
contact: '+7 (495) 555-12-34',
|
||||
address: 'Москва, ул. Звуковая, 8',
|
||||
totalAmount: 750000,
|
||||
products: [
|
||||
{
|
||||
id: 'p3',
|
||||
name: 'Наушники AirPods Pro',
|
||||
sku: 'APL-AP-PRO2',
|
||||
category: 'Аудио',
|
||||
plannedQty: 30,
|
||||
actualQty: 30,
|
||||
defectQty: 0,
|
||||
productPrice: 25000,
|
||||
parameters: [
|
||||
{ id: 'param6', name: 'Тип', value: 'Беспроводные' },
|
||||
{ id: 'param7', name: 'Шумоподавление', value: 'Активное' },
|
||||
{ id: 'param8', name: 'Время работы', value: '6', unit: 'ч' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
import React, { useState } from "react";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Sidebar } from "@/components/dashboard/sidebar";
|
||||
import { useSidebar } from "@/hooks/useSidebar";
|
||||
import { Plus } from "lucide-react";
|
||||
import { SuppliesGoodsTab } from "./goods-supplies/goods-supplies-tab";
|
||||
import { SuppliesConsumablesTab } from "./consumables-supplies/consumables-supplies-tab";
|
||||
|
||||
export function SuppliesDashboard() {
|
||||
const { getSidebarMargin } = useSidebar()
|
||||
const [expandedSupplies, setExpandedSupplies] = useState<Set<string>>(new Set())
|
||||
const [expandedRoutes, setExpandedRoutes] = useState<Set<string>>(new Set())
|
||||
const [expandedWholesalers, setExpandedWholesalers] = useState<Set<string>>(new Set())
|
||||
const [expandedProducts, setExpandedProducts] = useState<Set<string>>(new Set())
|
||||
|
||||
|
||||
const toggleSupplyExpansion = (supplyId: string) => {
|
||||
const newExpanded = new Set(expandedSupplies)
|
||||
if (newExpanded.has(supplyId)) {
|
||||
newExpanded.delete(supplyId)
|
||||
} else {
|
||||
newExpanded.add(supplyId)
|
||||
}
|
||||
setExpandedSupplies(newExpanded)
|
||||
}
|
||||
|
||||
const toggleRouteExpansion = (routeId: string) => {
|
||||
const newExpanded = new Set(expandedRoutes)
|
||||
if (newExpanded.has(routeId)) {
|
||||
newExpanded.delete(routeId)
|
||||
} else {
|
||||
newExpanded.add(routeId)
|
||||
}
|
||||
setExpandedRoutes(newExpanded)
|
||||
}
|
||||
|
||||
const toggleWholesalerExpansion = (wholesalerId: string) => {
|
||||
const newExpanded = new Set(expandedWholesalers)
|
||||
if (newExpanded.has(wholesalerId)) {
|
||||
newExpanded.delete(wholesalerId)
|
||||
} else {
|
||||
newExpanded.add(wholesalerId)
|
||||
}
|
||||
setExpandedWholesalers(newExpanded)
|
||||
}
|
||||
|
||||
const toggleProductExpansion = (productId: string) => {
|
||||
const newExpanded = new Set(expandedProducts)
|
||||
if (newExpanded.has(productId)) {
|
||||
newExpanded.delete(productId)
|
||||
} else {
|
||||
newExpanded.add(productId)
|
||||
}
|
||||
setExpandedProducts(newExpanded)
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: Supply['status']) => {
|
||||
const statusMap = {
|
||||
planned: { label: 'Запланирована', color: 'bg-blue-500/20 text-blue-300 border-blue-500/30' },
|
||||
'in-transit': { label: 'В пути', color: 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30' },
|
||||
delivered: { label: 'Доставлена', color: 'bg-green-500/20 text-green-300 border-green-500/30' },
|
||||
completed: { label: 'Завершена', color: 'bg-purple-500/20 text-purple-300 border-purple-500/30' }
|
||||
}
|
||||
const { label, color } = statusMap[status]
|
||||
return <Badge className={`${color} border`}>{label}</Badge>
|
||||
}
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('ru-RU', {
|
||||
style: 'currency',
|
||||
currency: 'RUB',
|
||||
minimumFractionDigits: 0
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const calculateProductTotal = (product: Product) => {
|
||||
return product.actualQty * product.productPrice
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const getEfficiencyBadge = (planned: number, actual: number, defect: number) => {
|
||||
const efficiency = ((actual - defect) / planned) * 100
|
||||
if (efficiency >= 95) {
|
||||
return <Badge className="bg-green-500/20 text-green-300 border-green-500/30 border">Отлично</Badge>
|
||||
} else if (efficiency >= 90) {
|
||||
return <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30 border">Хорошо</Badge>
|
||||
} else {
|
||||
return <Badge className="bg-red-500/20 text-red-300 border-red-500/30 border">Проблемы</Badge>
|
||||
}
|
||||
}
|
||||
const { getSidebarMargin } = useSidebar();
|
||||
const [activeTab, setActiveTab] = useState("goods");
|
||||
|
||||
return (
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
|
||||
<div className="p-8">
|
||||
{/* Заголовок */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Поставки</h1>
|
||||
<p className="text-white/60">Управление поставками товаров</p>
|
||||
<main
|
||||
className={`flex-1 ${getSidebarMargin()} px-4 py-4 overflow-hidden transition-all duration-300`}
|
||||
>
|
||||
<div className="h-full">
|
||||
{/* Вкладки с кнопкой создания */}
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={setActiveTab}
|
||||
className="w-full h-full flex flex-col"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<TabsList className="grid grid-cols-2 bg-white/10 backdrop-blur border-white/20 w-fit">
|
||||
<TabsTrigger
|
||||
value="goods"
|
||||
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"
|
||||
>
|
||||
Товар
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="consumables"
|
||||
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"
|
||||
>
|
||||
Расходники
|
||||
</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"
|
||||
onClick={() => {
|
||||
window.location.href = "/supplies/create";
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать поставку
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg"
|
||||
onClick={() => {
|
||||
window.location.href = '/supplies/create'
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать поставку
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Статистика */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-3 bg-blue-500/20 rounded-lg">
|
||||
<Package className="h-6 w-6 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">Всего поставок</p>
|
||||
<p className="text-2xl font-bold text-white">{mockSupplies.length}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<TabsContent value="goods" className="mt-0 flex-1">
|
||||
<SuppliesGoodsTab />
|
||||
</TabsContent>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-3 bg-green-500/20 rounded-lg">
|
||||
<TrendingUp className="h-6 w-6 text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">Общая сумма</p>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{formatCurrency(mockSupplies.reduce((sum, supply) => sum + supply.grandTotal, 0))}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-3 bg-yellow-500/20 rounded-lg">
|
||||
<Calendar className="h-6 w-6 text-yellow-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">В пути</p>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{mockSupplies.filter(supply => supply.status === 'in-transit').length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-3 bg-red-500/20 rounded-lg">
|
||||
<AlertTriangle className="h-6 w-6 text-red-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">С браком</p>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{mockSupplies.filter(supply => supply.defectTotal > 0).length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Многоуровневая таблица поставок */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-white/20">
|
||||
<th className="text-left p-4 text-white font-semibold">№</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Дата поставки</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Дата создания</th>
|
||||
<th className="text-left p-4 text-white font-semibold">План</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Брак</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Цена товаров</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Услуги ФФ</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Логистика до ФФ</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Итого сумма</th>
|
||||
<th className="text-left p-4 text-white font-semibold">Статус</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mockSupplies.map((supply) => {
|
||||
const isSupplyExpanded = expandedSupplies.has(supply.id)
|
||||
|
||||
return (
|
||||
<React.Fragment key={supply.id}>
|
||||
{/* Уровень 1: Основная строка поставки */}
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10">
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-semibold">{formatDate(supply.deliveryDate)}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">{formatDate(supply.createdDate)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{supply.plannedTotal}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{supply.actualTotal}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className={`font-semibold ${supply.defectTotal > 0 ? 'text-red-400' : 'text-white'}`}>
|
||||
{supply.defectTotal}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-semibold">{formatCurrency(supply.totalProductPrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-blue-400 font-semibold">{formatCurrency(supply.totalFulfillmentPrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-purple-400 font-semibold">{formatCurrency(supply.totalLogisticsPrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<DollarSign className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-bold text-lg">{formatCurrency(supply.grandTotal)}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
{getStatusBadge(supply.status)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Уровень 2: Маршруты */}
|
||||
{isSupplyExpanded && supply.routes.map((route) => {
|
||||
const isRouteExpanded = expandedRoutes.has(route.id)
|
||||
return (
|
||||
<React.Fragment key={route.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10">
|
||||
<td className="p-4 pl-12">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleRouteExpansion(route.id)}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isRouteExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<MapPin className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-white font-medium">Маршрут</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<span className="font-medium">{route.from}</span>
|
||||
<span className="text-white/60">→</span>
|
||||
<span className="font-medium">{route.to}</span>
|
||||
</div>
|
||||
<div className="text-xs text-white/60">{route.fromAddress} → {route.toAddress}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.wholesalers.reduce((sum, w) =>
|
||||
sum + w.products.reduce((pSum, p) => pSum + p.plannedQty, 0), 0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.wholesalers.reduce((sum, w) =>
|
||||
sum + w.products.reduce((pSum, p) => pSum + p.actualQty, 0), 0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{route.wholesalers.reduce((sum, w) =>
|
||||
sum + w.products.reduce((pSum, p) => pSum + p.defectQty, 0), 0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">{formatCurrency(route.totalProductPrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-blue-400 font-medium">{formatCurrency(route.fulfillmentServicePrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-purple-400 font-medium">{formatCurrency(route.logisticsPrice)}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{formatCurrency(route.totalAmount)}</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Уровень 3: Оптовики */}
|
||||
{isRouteExpanded && route.wholesalers.map((wholesaler) => {
|
||||
const isWholesalerExpanded = expandedWholesalers.has(wholesaler.id)
|
||||
return (
|
||||
<React.Fragment key={wholesaler.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-green-500/10">
|
||||
<td className="p-4 pl-20">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleWholesalerExpansion(wholesaler.id)}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isWholesalerExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Building2 className="h-4 w-4 text-green-400" />
|
||||
<span className="text-white font-medium">Оптовик</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">{wholesaler.name}</div>
|
||||
<div className="text-xs text-white/60 mb-1">ИНН: {wholesaler.inn}</div>
|
||||
<div className="text-xs text-white/60 mb-1">{wholesaler.address}</div>
|
||||
<div className="text-xs text-white/60">{wholesaler.contact}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{wholesaler.products.reduce((sum, p) => sum + p.plannedQty, 0)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{wholesaler.products.reduce((sum, p) => sum + p.actualQty, 0)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{wholesaler.products.reduce((sum, p) => sum + p.defectQty, 0)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">
|
||||
{formatCurrency(wholesaler.products.reduce((sum, p) => sum + calculateProductTotal(p), 0))}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}></td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{formatCurrency(wholesaler.totalAmount)}</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Уровень 4: Товары */}
|
||||
{isWholesalerExpanded && wholesaler.products.map((product) => {
|
||||
const isProductExpanded = expandedProducts.has(product.id)
|
||||
return (
|
||||
<React.Fragment key={product.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-yellow-500/10">
|
||||
<td className="p-4 pl-28">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleProductExpansion(product.id)}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isProductExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Package className="h-4 w-4 text-yellow-400" />
|
||||
<span className="text-white font-medium">Товар</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">{product.name}</div>
|
||||
<div className="text-xs text-white/60 mb-1">Артикул: {product.sku}</div>
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs">
|
||||
{product.category}
|
||||
</Badge>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{product.plannedQty}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{product.actualQty}</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className={`font-semibold ${product.defectQty > 0 ? 'text-red-400' : 'text-white'}`}>
|
||||
{product.defectQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-white">
|
||||
<div className="font-medium">{formatCurrency(calculateProductTotal(product))}</div>
|
||||
<div className="text-xs text-white/60">{formatCurrency(product.productPrice)} за шт.</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
{getEfficiencyBadge(product.plannedQty, product.actualQty, product.defectQty)}
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">{formatCurrency(calculateProductTotal(product))}</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Уровень 5: Параметры товара */}
|
||||
{isProductExpanded && (
|
||||
<tr>
|
||||
<td colSpan={11} className="p-0">
|
||||
<div className="bg-white/5 border-t border-white/10">
|
||||
<div className="p-4 pl-36">
|
||||
<h4 className="text-white font-medium mb-3 flex items-center space-x-2">
|
||||
<span className="text-xs text-white/60">📋 Параметры товара:</span>
|
||||
</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{product.parameters.map((param) => (
|
||||
<div key={param.id} className="bg-white/5 rounded-lg p-3">
|
||||
<div className="text-white/80 text-xs font-medium mb-1">{param.name}</div>
|
||||
<div className="text-white text-sm">
|
||||
{param.value} {param.unit || ''}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
<TabsContent value="consumables" className="mt-0 flex-1">
|
||||
<SuppliesConsumablesTab />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user