Добавлены новые поля organizationId и fulfillmentCenterId в модель SupplyOrder для улучшения обработки заказов. Обновлены компоненты CreateFulfillmentConsumablesSupplyPage и FulfillmentDetailedSuppliesTab для интеграции нового функционала. Реализована фильтрация заказов по текущей организации и улучшен интерфейс отображения данных о расходниках.

This commit is contained in:
Bivekich
2025-07-24 16:04:03 +03:00
parent 1784dc87dd
commit c6bffd1d9b
5 changed files with 298 additions and 747 deletions

View File

@ -33,6 +33,7 @@ import { CREATE_SUPPLY_ORDER } from "@/graphql/mutations";
import { OrganizationAvatar } from "@/components/market/organization-avatar";
import { toast } from "sonner";
import Image from "next/image";
import { useAuth } from "@/hooks/useAuth";
interface FulfillmentConsumableSupplier {
id: string;
@ -77,6 +78,7 @@ interface SelectedFulfillmentConsumable {
export function CreateFulfillmentConsumablesSupplyPage() {
const router = useRouter();
const { getSidebarMargin } = useSidebar();
const { user } = useAuth();
const [selectedSupplier, setSelectedSupplier] =
useState<FulfillmentConsumableSupplier | null>(null);
const [selectedConsumables, setSelectedConsumables] = useState<
@ -222,7 +224,8 @@ export function CreateFulfillmentConsumablesSupplyPage() {
input: {
partnerId: selectedSupplier.id,
deliveryDate: deliveryDate,
// Для фулфилмента не требуется выбор фулфилмент-центра, поставка идет на свой склад
// Для фулфилмента указываем себя как получателя (поставка на свой склад)
fulfillmentCenterId: user?.organization?.id,
items: selectedConsumables.map((consumable) => ({
productId: consumable.id,
quantity: consumable.selectedQuantity,

View File

@ -39,6 +39,7 @@ interface SupplyOrderItem {
interface SupplyOrder {
id: string;
organizationId: string;
deliveryDate: string;
status: string;
totalAmount: number;
@ -74,16 +75,21 @@ export function FulfillmentConsumablesOrdersTab() {
const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
const { user } = useAuth();
const { data, loading, error } = useQuery(GET_SUPPLY_ORDERS);
const { data, loading, error } = useQuery(GET_SUPPLY_ORDERS, {
fetchPolicy: 'cache-and-network', // Принудительно проверяем сервер
notifyOnNetworkStatusChange: true
});
// Получаем ID текущей организации (фулфилмент-центра)
const currentOrganizationId = user?.organization?.id;
// Фильтруем заказы где текущая организация является получателем
// Фильтруем заказы где текущая организация является получателем (заказы ОТ селлеров)
const incomingSupplyOrders: SupplyOrder[] = (data?.supplyOrders || []).filter(
(order: SupplyOrder) => {
// Показываем заказы где текущий фулфилмент-центр указан как получатель
return order.fulfillmentCenterId === currentOrganizationId;
// Показываем заказы где текущий фулфилмент-центр указан как получатель
// И заказчик НЕ является самим фулфилмент-центром (исключаем наши собственные заказы)
return order.fulfillmentCenterId === currentOrganizationId &&
order.organizationId !== currentOrganizationId;
}
);

View File

@ -7,335 +7,128 @@ import { Badge } from "@/components/ui/badge";
import { StatsCard } from "../../supplies/ui/stats-card";
import { StatsGrid } from "../../supplies/ui/stats-grid";
import { useRouter } from "next/navigation";
import { useQuery } from "@apollo/client";
import { GET_SUPPLY_ORDERS } from "@/graphql/queries";
import { useAuth } from "@/hooks/useAuth";
import {
Calendar,
MapPin,
Building2,
TrendingUp,
AlertTriangle,
DollarSign,
Wrench,
Box,
Package2,
Tags,
Plus,
ChevronDown,
ChevronRight,
} from "lucide-react";
// Типы данных для расходников ФФ детально
interface ConsumableParameter {
// Интерфейс для заказа
interface SupplyOrder {
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 FulfillmentConsumableSupply {
id: string;
number: number;
organizationId: string;
deliveryDate: string;
createdDate: string;
routes: ConsumableRoute[];
plannedTotal: number;
actualTotal: number;
defectTotal: number;
totalConsumablesPrice: number;
totalLogisticsPrice: number;
grandTotal: number;
status: "planned" | "in-transit" | "delivered" | "completed";
createdAt: string;
totalItems: number;
totalAmount: number;
status: string;
items: {
id: string;
quantity: number;
price: number;
totalPrice: number;
product: {
name: string;
article: string;
category?: {
name: string;
};
};
}[];
}
// Моковые данные для расходников ФФ детально
const mockFulfillmentConsumablesDetailed: FulfillmentConsumableSupply[] = [
{
id: "ffcd1",
number: 2001,
deliveryDate: "2024-01-18",
createdDate: "2024-01-14",
status: "delivered",
plannedTotal: 5000,
actualTotal: 4950,
defectTotal: 50,
totalConsumablesPrice: 125000,
totalLogisticsPrice: 8000,
grandTotal: 133000,
routes: [
{
id: "ffcdr1",
from: "Склад расходников ФФ",
fromAddress: "Москва, ул. Промышленная, 12",
to: "SFERAV Logistics ФФ",
toAddress: "Москва, ул. Складская, 15",
totalConsumablesPrice: 125000,
logisticsPrice: 8000,
totalAmount: 133000,
suppliers: [
{
id: "ffcds1",
name: 'ООО "УпакСервис ФФ Детально"',
inn: "7703456789",
contact: "+7 (495) 777-88-99",
address: "Москва, ул. Упаковочная, 5",
totalAmount: 75000,
consumables: [
{
id: "ffcdcons1",
name: "Коробки для ФФ детально 40x30x15",
sku: "BOX-FFD-403015",
category: "Упаковка ФФ детально",
type: "packaging",
plannedQty: 2000,
actualQty: 1980,
defectQty: 20,
unitPrice: 45,
parameters: [
{
id: "ffcdp1",
name: "Размер",
value: "40x30x15",
unit: "см",
},
{
id: "ffcdp2",
name: "Материал",
value: "Гофрокартон усиленный ФФ",
},
{
id: "ffcdp3",
name: "Плотность",
value: "5",
unit: "слоев",
},
{ id: "ffcdp4", name: "Сертификация ФФ", value: "Пройдена" },
],
},
],
},
],
},
],
},
{
id: "ffcd2",
number: 2002,
deliveryDate: "2024-01-22",
createdDate: "2024-01-16",
status: "in-transit",
plannedTotal: 3000,
actualTotal: 3000,
defectTotal: 0,
totalConsumablesPrice: 85000,
totalLogisticsPrice: 5500,
grandTotal: 90500,
routes: [
{
id: "ffcdr2",
from: "Склад расходников ФФ",
fromAddress: "Москва, ул. Промышленная, 12",
to: "WB Подольск ФФ",
toAddress: "Подольск, ул. Складская, 25",
totalConsumablesPrice: 85000,
logisticsPrice: 5500,
totalAmount: 90500,
suppliers: [
{
id: "ffcds2",
name: 'ООО "ЭтикеткаПро ФФ"',
inn: "7704567890",
contact: "+7 (495) 888-99-00",
address: "Москва, ул. Этикеточная, 3",
totalAmount: 85000,
consumables: [
{
id: "ffcdcons2",
name: "Этикетки самоклеящиеся ФФ 10x5",
sku: "LBL-FFD-105",
category: "Этикетки ФФ детально",
type: "labels",
plannedQty: 3000,
actualQty: 3000,
defectQty: 0,
unitPrice: 28,
parameters: [
{
id: "ffcdp5",
name: "Размер",
value: "10x5",
unit: "см",
},
{
id: "ffcdp6",
name: "Материал",
value: "Бумага самоклеящаяся ФФ",
},
{ id: "ffcdp7", name: "Клей", value: "Акриловый" },
{ id: "ffcdp8", name: "Качество ФФ", value: "Премиум" },
],
},
],
},
],
},
],
},
];
// Функция для форматирования валюты
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");
};
// Функция для отображения статуса
const getStatusBadge = (status: string) => {
const statusConfig = {
PENDING: { label: "Ожидает", color: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30" },
CONFIRMED: { label: "Подтверждён", color: "bg-blue-500/20 text-blue-300 border-blue-500/30" },
IN_PROGRESS: { label: "В работе", color: "bg-purple-500/20 text-purple-300 border-purple-500/30" },
SHIPPED: { label: "Отправлен", color: "bg-orange-500/20 text-orange-300 border-orange-500/30" },
DELIVERED: { label: "Доставлен", color: "bg-green-500/20 text-green-300 border-green-500/30" },
CANCELLED: { label: "Отменён", color: "bg-red-500/20 text-red-300 border-red-500/30" },
};
const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.PENDING;
return (
<Badge className={config.color}>
{config.label}
</Badge>
);
};
export function FulfillmentDetailedSuppliesTab() {
const router = useRouter();
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 { user } = useAuth();
const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
// Загружаем реальные данные заказов расходников
const { data, loading, error } = useQuery(GET_SUPPLY_ORDERS, {
fetchPolicy: 'cache-and-network', // Принудительно проверяем сервер
notifyOnNetworkStatusChange: true
});
// Получаем ID текущей организации (фулфилмент-центра)
const currentOrganizationId = user?.organization?.id;
// Фильтруем заказы созданные текущей организацией (наши расходники)
const ourSupplyOrders: SupplyOrder[] = (data?.supplyOrders || []).filter(
(order: SupplyOrder) => order.organizationId === currentOrganizationId
);
const toggleSupplyExpansion = (supplyId: string) => {
const newExpanded = new Set(expandedSupplies);
if (newExpanded.has(supplyId)) {
newExpanded.delete(supplyId);
const toggleOrderExpansion = (orderId: string) => {
const newExpanded = new Set(expandedOrders);
if (newExpanded.has(orderId)) {
newExpanded.delete(orderId);
} else {
newExpanded.add(supplyId);
newExpanded.add(orderId);
}
setExpandedSupplies(newExpanded);
setExpandedOrders(newExpanded);
};
const toggleRouteExpansion = (routeId: string) => {
const newExpanded = new Set(expandedRoutes);
if (newExpanded.has(routeId)) {
newExpanded.delete(routeId);
} else {
newExpanded.add(routeId);
}
setExpandedRoutes(newExpanded);
};
if (loading) {
return (
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent"></div>
<span className="ml-3 text-white/60">Загрузка наших расходников...</span>
</div>
);
}
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: FulfillmentConsumableSupply["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;
};
if (error) {
return (
<div className="flex items-center justify-center h-64">
<div className="text-center">
<Wrench className="h-12 w-12 text-red-400 mx-auto mb-4" />
<p className="text-red-400 font-medium">Ошибка загрузки расходников</p>
<p className="text-white/60 text-sm mt-2">{error.message}</p>
</div>
</div>
);
}
return (
<div className="space-y-6">
@ -358,477 +151,224 @@ export function FulfillmentDetailedSuppliesTab() {
</Button>
</div>
{/* Статистика расходников ФФ детально */}
{/* Статистика наших расходников */}
<StatsGrid>
<StatsCard
title="Расходники ФФ детально"
value={mockFulfillmentConsumablesDetailed.length}
title="Наши расходники"
value={ourSupplyOrders.length}
icon={Package2}
iconColor="text-orange-400"
iconBg="bg-orange-500/20"
trend={{ value: 5, isPositive: true }}
subtitle="Поставки материалов ФФ"
subtitle="Поставки расходников"
/>
<StatsCard
title="Сумма расходников ФФ детально"
title="Общая сумма"
value={formatCurrency(
mockFulfillmentConsumablesDetailed.reduce(
(sum, supply) => sum + supply.grandTotal,
ourSupplyOrders.reduce(
(sum: number, order: SupplyOrder) => sum + order.totalAmount,
0
)
)}
icon={TrendingUp}
iconColor="text-green-400"
iconBg="bg-green-500/20"
trend={{ value: 15, isPositive: true }}
subtitle="Общая стоимость ФФ"
subtitle="Стоимость заказов"
/>
<StatsCard
title="В пути"
value={
mockFulfillmentConsumablesDetailed.filter(
(supply) => supply.status === "in-transit"
).length
}
icon={Calendar}
iconColor="text-yellow-400"
iconBg="bg-yellow-500/20"
subtitle="Активные поставки ФФ"
/>
<StatsCard
title="Активные поставки"
value={
mockFulfillmentConsumablesDetailed.filter(
(supply) => supply.status === "delivered"
).length
}
icon={Calendar}
title="Всего единиц"
value={ourSupplyOrders.reduce((sum: number, order: SupplyOrder) => sum + order.totalItems, 0)}
icon={Wrench}
iconColor="text-blue-400"
iconBg="bg-blue-500/20"
trend={{ value: 3, isPositive: true }}
subtitle="Завершенные поставки"
subtitle="Количество расходников"
/>
<StatsCard
title="Завершено"
value={
ourSupplyOrders.filter(
(order: SupplyOrder) => order.status === "DELIVERED"
).length
}
icon={Calendar}
iconColor="text-purple-400"
iconBg="bg-purple-500/20"
subtitle="Доставленные заказы"
/>
</StatsGrid>
{/* Таблица поставок расходников ФФ детально */}
<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>
</tr>
</thead>
<tbody>
{mockFulfillmentConsumablesDetailed.map((supply) => {
const isSupplyExpanded = expandedSupplies.has(supply.id);
{/* Таблица наших расходников */}
{ourSupplyOrders.length === 0 ? (
<Card className="bg-white/10 backdrop-blur border-white/20 p-8">
<div className="text-center">
<Wrench className="h-16 w-16 text-white/20 mx-auto mb-4" />
<h3 className="text-lg font-semibold text-white mb-2">
Пока нет заказов расходников
</h3>
<p className="text-white/60">
Создайте первый заказ расходников через кнопку &quot;Создать поставку&quot;
</p>
</div>
</Card>
) : (
<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>
</tr>
</thead>
<tbody>
{ourSupplyOrders.map((order: SupplyOrder) => {
const isOrderExpanded = expandedOrders.has(order.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-bold text-lg">
#{supply.number}
return (
<React.Fragment key={order.id}>
{/* Основная строка заказа расходников */}
<tr
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-orange-500/10 cursor-pointer"
onClick={() => toggleOrderExpansion(order.id)}
>
<td className="p-4">
<div className="flex items-center space-x-2">
{isOrderExpanded ? (
<ChevronDown className="h-4 w-4 text-white/60" />
) : (
<ChevronRight className="h-4 w-4 text-white/60" />
)}
<span className="text-white font-bold text-lg">
#{order.id.slice(-8)}
</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(order.deliveryDate)}
</span>
</div>
</td>
<td className="p-4">
<span className="text-white/80">
{formatDate(order.createdAt)}
</span>
</div>
</td>
<td className="p-4">
<div className="flex items-center space-x-2">
<Calendar className="h-4 w-4 text-white/40" />
</td>
<td className="p-4">
<span className="text-white font-semibold">
{formatDate(supply.deliveryDate)}
{order.totalItems}
</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="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)}
</td>
<td className="p-4">
<span className="text-white font-semibold">
{order.totalItems}
</span>
</div>
</td>
<td className="p-4">{getStatusBadge(supply.status)}</td>
</tr>
</td>
<td className="p-4">
<span className="text-green-400 font-semibold">
{formatCurrency(order.totalAmount)}
</span>
</td>
<td className="p-4">
<span className="text-purple-400 font-semibold">
-
</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(order.totalAmount)}
</span>
</div>
</td>
<td className="p-4">{getStatusBadge(order.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 cursor-pointer"
onClick={() => toggleRouteExpansion(route.id)}
>
<td className="p-4 pl-12">
<div className="flex items-center space-x-2">
<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 cursor-pointer"
onClick={() =>
toggleSupplierExpansion(supplier.id)
}
{/* Развернутая информация о заказе */}
{isOrderExpanded && (
<tr>
<td colSpan={9} className="p-0">
<div className="bg-white/5 border-t border-white/10">
<div className="p-6">
<h4 className="text-white font-semibold mb-4">
Состав заказа:
</h4>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{order.items.map((item) => (
<Card
key={item.id}
className="bg-white/10 backdrop-blur border-white/20 p-4"
>
<td className="p-4 pl-20">
<div className="flex items-center space-x-2">
<Building2 className="h-4 w-4 text-green-400" />
<span className="text-white font-medium">
Поставщик ФФ
</span>
<div className="space-y-3">
<div>
<h5 className="text-white font-medium mb-1">
{item.product.name}
</h5>
<p className="text-white/60 text-sm">
Артикул: {item.product.article}
</p>
{item.product.category && (
<Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs mt-2">
{item.product.category.name}
</Badge>
)}
</div>
</td>
<td className="p-4" colSpan={2}>
<div className="text-white">
<div className="font-medium mb-1">
{supplier.name}
<div className="flex items-center justify-between">
<div className="text-sm">
<p className="text-white/60">
Количество: {item.quantity} шт
</p>
<p className="text-white/60">
Цена: {formatCurrency(item.price)}
</p>
</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 className="text-right">
<p className="text-green-400 font-semibold">
{formatCurrency(item.totalPrice)}
</p>
</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" colSpan={1}></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 cursor-pointer"
onClick={() =>
toggleConsumableExpansion(
consumable.id
)
}
>
<td className="p-4 pl-28">
<div className="flex items-center space-x-2">
<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 items-center space-x-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"
colSpan={1}
></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>
</Card>
))}
</div>
</div>
</div>
</td>
</tr>
)}
</React.Fragment>
);
})}
</tbody>
</table>
</div>
</Card>
)}
</div>
);
}