Добавлены новые поля organizationId и fulfillmentCenterId в модель SupplyOrder для улучшения обработки заказов. Обновлены компоненты CreateFulfillmentConsumablesSupplyPage и FulfillmentDetailedSuppliesTab для интеграции нового функционала. Реализована фильтрация заказов по текущей организации и улучшен интерфейс отображения данных о расходниках.
This commit is contained in:
@ -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,
|
||||
|
@ -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;
|
||||
}
|
||||
);
|
||||
|
||||
|
@ -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">
|
||||
Создайте первый заказ расходников через кнопку "Создать поставку"
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user