940 lines
41 KiB
TypeScript
940 lines
41 KiB
TypeScript
"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 cursor-pointer"
|
||
onClick={() => toggleSupplyExpansion(supply.id)}
|
||
>
|
||
<td className="p-4">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-white font-normal 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>
|
||
);
|
||
}
|