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

View File

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

View File

@ -759,6 +759,7 @@ export const GET_SUPPLY_ORDERS = gql`
query GetSupplyOrders { query GetSupplyOrders {
supplyOrders { supplyOrders {
id id
organizationId
deliveryDate deliveryDate
status status
totalAmount totalAmount

View File

@ -513,6 +513,7 @@ export const typeDefs = gql`
# Типы для заказов поставок расходников # Типы для заказов поставок расходников
type SupplyOrder { type SupplyOrder {
id: ID! id: ID!
organizationId: ID!
partnerId: ID! partnerId: ID!
partner: Organization! partner: Organization!
deliveryDate: DateTime! deliveryDate: DateTime!