Добавлен новый функционал для обработки заказов поставок расходников в компоненте CreateConsumablesSupplyPage. Реализован выбор фулфилмент-центра, улучшена логика создания заказа с учетом нового поля fulfillmentCenterId. Обновлен компонент SuppliesConsumablesTab для отображения заказов поставок с новыми данными. Оптимизированы стили и структура кода для повышения удобства использования.

This commit is contained in:
Veronika Smirnova
2025-07-24 14:12:20 +03:00
parent 441d2daefb
commit 41228f4c17
6 changed files with 1036 additions and 1170 deletions

View File

@ -1,356 +1,116 @@
"use client";
import React, { useState } from "react";
import { useQuery } from "@apollo/client";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
ChevronDown,
ChevronRight,
Calendar,
Package,
MapPin,
Building2,
TrendingUp,
AlertTriangle,
DollarSign,
Wrench,
Box,
} from "lucide-react";
import { GET_SUPPLY_ORDERS } from "@/graphql/queries";
// Типы данных для расходников
interface ConsumableParameter {
// Типы данных для заказов поставок расходников
interface SupplyOrderItem {
id: string;
quantity: number;
price: number;
totalPrice: number;
product: {
id: string;
name: string;
value: string;
unit?: string;
}
interface Consumable {
article?: string;
description?: string;
category?: {
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 {
interface SupplyOrder {
id: string;
name: string;
inn: string;
contact: string;
address: string;
consumables: Consumable[];
totalAmount: number;
}
interface ConsumableRoute {
id: string;
from: string;
fromAddress: string;
to: string;
toAddress: string;
suppliers: ConsumableSupplier[];
totalConsumablesPrice: number;
logisticsPrice: number;
totalAmount: number;
}
interface ConsumableSupply {
id: string;
number: number;
deliveryDate: string;
createdDate: string;
routes: ConsumableRoute[];
plannedTotal: number;
actualTotal: number;
defectTotal: number;
totalConsumablesPrice: number;
totalLogisticsPrice: number;
grandTotal: number;
status: "planned" | "in-transit" | "delivered" | "completed";
status: "PENDING" | "CONFIRMED" | "IN_TRANSIT" | "DELIVERED" | "CANCELLED";
totalAmount: number;
totalItems: number;
createdAt: string;
updatedAt: string;
partner: {
id: string;
name?: string;
fullName?: string;
inn?: string;
address?: string;
phones?: string[];
emails?: string[];
};
organization: {
id: string;
name?: string;
fullName?: string;
type: string;
};
items: SupplyOrderItem[];
}
// Моковые данные для расходников
const mockConsumableSupplies: ConsumableSupply[] = [
{
id: "c1",
number: 101,
deliveryDate: "2024-01-18",
createdDate: "2024-01-14",
status: "delivered",
plannedTotal: 5000,
actualTotal: 4950,
defectTotal: 50,
totalConsumablesPrice: 125000,
totalLogisticsPrice: 8000,
grandTotal: 133000,
routes: [
{
id: "cr1",
from: "Склад расходников",
fromAddress: "Москва, ул. Промышленная, 12",
to: "SFERAV Logistics",
toAddress: "Москва, ул. Складская, 15",
totalConsumablesPrice: 125000,
logisticsPrice: 8000,
totalAmount: 133000,
suppliers: [
{
id: "cs1",
name: 'ООО "УпакСервис"',
inn: "7703456789",
contact: "+7 (495) 777-88-99",
address: "Москва, ул. Упаковочная, 5",
totalAmount: 75000,
consumables: [
{
id: "cons1",
name: "Коробки картонные 30x20x10",
sku: "BOX-302010",
category: "Упаковка",
type: "packaging",
plannedQty: 2000,
actualQty: 1980,
defectQty: 20,
unitPrice: 35,
parameters: [
{ id: "cp1", name: "Размер", value: "30x20x10", unit: "см" },
{ id: "cp2", name: "Материал", value: "Гофрокартон" },
{ id: "cp3", name: "Плотность", value: "3", unit: "слоя" },
],
},
{
id: "cons2",
name: "Пузырчатая пленка",
sku: "BUBBLE-100",
category: "Защитная упаковка",
type: "protective",
plannedQty: 1000,
actualQty: 1000,
defectQty: 0,
unitPrice: 25,
parameters: [
{ id: "cp4", name: "Ширина", value: "100", unit: "см" },
{ id: "cp5", name: "Толщина", value: "0.1", unit: "мм" },
{ id: "cp6", name: "Длина рулона", value: "50", unit: "м" },
],
},
],
},
{
id: "cs2",
name: "ИП Маркин С.А.",
inn: "123456789013",
contact: "+7 (499) 111-22-33",
address: "Москва, пр-т Маркировочный, 8",
totalAmount: 50000,
consumables: [
{
id: "cons3",
name: "Этикетки самоклеящиеся",
sku: "LABEL-5030",
category: "Маркировка",
type: "labels",
plannedQty: 2000,
actualQty: 1970,
defectQty: 30,
unitPrice: 15,
parameters: [
{ id: "cp7", name: "Размер", value: "50x30", unit: "мм" },
{ id: "cp8", name: "Материал", value: "Полипропилен" },
{ id: "cp9", name: "Клей", value: "Акриловый" },
],
},
],
},
],
},
],
},
{
id: "c2",
number: 102,
deliveryDate: "2024-01-22",
createdDate: "2024-01-16",
status: "in-transit",
plannedTotal: 1500,
actualTotal: 1500,
defectTotal: 0,
totalConsumablesPrice: 45000,
totalLogisticsPrice: 3000,
grandTotal: 48000,
routes: [
{
id: "cr2",
from: "Инструментальный склад",
fromAddress: "Подольск, ул. Индустриальная, 25",
to: "WB Подольск",
toAddress: "Подольск, ул. Складская, 25",
totalConsumablesPrice: 45000,
logisticsPrice: 3000,
totalAmount: 48000,
suppliers: [
{
id: "cs3",
name: 'ООО "ИнструментПро"',
inn: "5001234567",
contact: "+7 (4967) 55-66-77",
address: "Подольск, ул. Инструментальная, 15",
totalAmount: 45000,
consumables: [
{
id: "cons4",
name: "Сканер штрих-кодов",
sku: "SCANNER-2D",
category: "Оборудование",
type: "tools",
plannedQty: 5,
actualQty: 5,
defectQty: 0,
unitPrice: 8000,
parameters: [
{ id: "cp10", name: "Тип", value: "2D сканер" },
{ id: "cp11", name: "Интерфейс", value: "USB" },
{ id: "cp12", name: "Дальность", value: "30", unit: "см" },
],
},
{
id: "cons5",
name: "Термопринтер этикеток",
sku: "PRINTER-THERMAL",
category: "Оборудование",
type: "tools",
plannedQty: 2,
actualQty: 2,
defectQty: 0,
unitPrice: 2500,
parameters: [
{
id: "cp13",
name: "Ширина печати",
value: "108",
unit: "мм",
},
{ id: "cp14", name: "Разрешение", value: "203", unit: "dpi" },
{ id: "cp15", name: "Скорость", value: "102", unit: "мм/с" },
],
},
],
},
],
},
],
},
];
export function SuppliesConsumablesTab() {
const [expandedSupplies, setExpandedSupplies] = useState<Set<string>>(
new Set()
);
const [expandedRoutes, setExpandedRoutes] = useState<Set<string>>(new Set());
const [expandedSuppliers, setExpandedSuppliers] = useState<Set<string>>(
new Set()
);
const [expandedConsumables, setExpandedConsumables] = useState<Set<string>>(
new Set()
);
const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
const toggleSupplyExpansion = (supplyId: string) => {
const newExpanded = new Set(expandedSupplies);
if (newExpanded.has(supplyId)) {
newExpanded.delete(supplyId);
// Загружаем заказы поставок
const { data, loading, error } = useQuery(GET_SUPPLY_ORDERS);
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);
};
// Получаем данные заказов поставок
const supplyOrders: SupplyOrder[] = data?.supplyOrders || [];
const toggleSupplierExpansion = (supplierId: string) => {
const newExpanded = new Set(expandedSuppliers);
if (newExpanded.has(supplierId)) {
newExpanded.delete(supplierId);
} else {
newExpanded.add(supplierId);
}
setExpandedSuppliers(newExpanded);
};
// Генерируем порядковые номера для заказов
const ordersWithNumbers = supplyOrders.map((order, index) => ({
...order,
number: supplyOrders.length - index, // Обратный порядок для новых заказов сверху
}));
const toggleConsumableExpansion = (consumableId: string) => {
const newExpanded = new Set(expandedConsumables);
if (newExpanded.has(consumableId)) {
newExpanded.delete(consumableId);
} else {
newExpanded.add(consumableId);
}
setExpandedConsumables(newExpanded);
};
const getStatusBadge = (status: ConsumableSupply["status"]) => {
const getStatusBadge = (status: SupplyOrder["status"]) => {
const statusMap = {
planned: {
label: "Запланирована",
PENDING: {
label: "Ожидание",
color: "bg-blue-500/20 text-blue-300 border-blue-500/30",
},
"in-transit": {
CONFIRMED: {
label: "Подтверждена",
color: "bg-green-500/20 text-green-300 border-green-500/30",
},
IN_TRANSIT: {
label: "В пути",
color: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
},
delivered: {
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",
},
CANCELLED: {
label: "Отменена",
color: "bg-red-500/20 text-red-300 border-red-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",
@ -367,36 +127,26 @@ export function SuppliesConsumablesTab() {
});
};
const calculateConsumableTotal = (consumable: Consumable) => {
return consumable.actualQty * consumable.unitPrice;
};
const getEfficiencyBadge = (planned: number, actual: number) => {
const efficiency = (actual / planned) * 100;
if (efficiency >= 95) {
if (loading) {
return (
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 border">
Отлично
</Badge>
);
} else if (efficiency >= 90) {
return (
<Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30 border">
Хорошо
</Badge>
);
} else {
return (
<Badge className="bg-red-500/20 text-red-300 border-red-500/30 border">
Проблемы
</Badge>
<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">Загрузка заказов поставок...</span>
</div>
);
}
if (error) {
return (
<div className="text-center py-8">
<p className="text-red-400">Ошибка загрузки: {error.message}</p>
</div>
);
}
};
return (
<div className="space-y-6">
{/* Статистика расходников */}
{/* Статистика заказов поставок */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
<div className="flex items-center space-x-3">
@ -404,9 +154,9 @@ export function SuppliesConsumablesTab() {
<Box className="h-5 w-5 text-orange-400" />
</div>
<div>
<p className="text-white/60 text-xs">Поставок расходников</p>
<p className="text-white/60 text-xs">Заказов поставок</p>
<p className="text-xl font-bold text-white">
{mockConsumableSupplies.length}
{supplyOrders.length}
</p>
</div>
</div>
@ -418,11 +168,11 @@ export function SuppliesConsumablesTab() {
<TrendingUp className="h-5 w-5 text-green-400" />
</div>
<div>
<p className="text-white/60 text-xs">Сумма расходников</p>
<p className="text-white/60 text-xs">Общая сумма</p>
<p className="text-xl font-bold text-white">
{formatCurrency(
mockConsumableSupplies.reduce(
(sum, supply) => sum + supply.grandTotal,
supplyOrders.reduce(
(sum, order) => sum + Number(order.totalAmount),
0
)
)}
@ -440,9 +190,8 @@ export function SuppliesConsumablesTab() {
<p className="text-white/60 text-xs">В пути</p>
<p className="text-xl font-bold text-white">
{
mockConsumableSupplies.filter(
(supply) => supply.status === "in-transit"
).length
supplyOrders.filter((order) => order.status === "IN_TRANSIT")
.length
}
</p>
</div>
@ -455,12 +204,11 @@ export function SuppliesConsumablesTab() {
<Calendar className="h-5 w-5 text-blue-400" />
</div>
<div>
<p className="text-white/60 text-xs">Завершено</p>
<p className="text-white/60 text-xs">Доставлено</p>
<p className="text-xl font-bold text-white">
{
mockConsumableSupplies.filter(
(supply) => supply.status === "completed"
).length
supplyOrders.filter((order) => order.status === "DELIVERED")
.length
}
</p>
</div>
@ -468,29 +216,27 @@ export function SuppliesConsumablesTab() {
</Card>
</div>
{/* Таблица поставок расходников */}
{/* Таблица заказов поставок */}
<Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-white/20">
<th className="text-left p-4 text-white font-semibold"></th>
<th className="text-left p-4 text-white font-semibold">
Поставщик
</th>
<th className="text-left p-4 text-white font-semibold">
Дата поставки
</th>
<th className="text-left p-4 text-white font-semibold">
Дата создания
</th>
<th className="text-left p-4 text-white font-semibold">План</th>
<th className="text-left p-4 text-white font-semibold">Факт</th>
<th className="text-left p-4 text-white font-semibold">
Цена расходников
Товаров
</th>
<th className="text-left p-4 text-white font-semibold">
Логистика
</th>
<th className="text-left p-4 text-white font-semibold">
Итого сумма
Сумма
</th>
<th className="text-left p-4 text-white font-semibold">
Статус
@ -498,389 +244,145 @@ export function SuppliesConsumablesTab() {
</tr>
</thead>
<tbody>
{mockConsumableSupplies.map((supply) => {
const isSupplyExpanded = expandedSupplies.has(supply.id);
{ordersWithNumbers.length === 0 ? (
<tr>
<td colSpan={7} className="text-center py-8">
<div className="text-white/60">
<Box className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p>Заказов поставок пока нет</p>
</div>
</td>
</tr>
) : (
ordersWithNumbers.map((order) => {
const isOrderExpanded = expandedOrders.has(order.id);
return (
<React.Fragment key={supply.id}>
{/* Основная строка поставки расходников */}
<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={() => toggleSupplyExpansion(supply.id)}
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-normal text-lg">
{supply.number}
{order.number}
</span>
</div>
</td>
<td className="p-4">
<div className="text-white">
<div className="font-medium">
{order.partner.name ||
order.partner.fullName ||
"Поставщик"}
</div>
{order.partner.inn && (
<div className="text-xs text-white/60">
ИНН: {order.partner.inn}
</div>
)}
</div>
</td>
<td className="p-4">
<div className="flex items-center space-x-2">
<Calendar className="h-4 w-4 text-white/40" />
<span className="text-white font-semibold">
{formatDate(supply.deliveryDate)}
{formatDate(order.deliveryDate)}
</span>
</div>
</td>
<td className="p-4">
<span className="text-white/80">
{formatDate(supply.createdDate)}
{formatDate(order.createdAt)}
</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)}
{order.totalItems}
</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)}
{formatCurrency(Number(order.totalAmount))}
</span>
</div>
</td>
<td className="p-4">{getStatusBadge(supply.status)}</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">
{/* Развернутые детали заказа - товары */}
{isOrderExpanded &&
order.items.map((item) => (
<tr
key={item.id}
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10"
>
<td className="p-4 pl-12">
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
onClick={() =>
toggleRouteExpansion(route.id)
}
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
>
{isRouteExpanded ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</Button>
<MapPin className="h-4 w-4 text-blue-400" />
<span className="text-white font-medium">
Маршрут
</span>
</div>
</td>
<td className="p-4" colSpan={2}>
<div className="text-white">
<div className="flex items-center space-x-2 mb-1">
<span className="font-medium">
{route.from}
</span>
<span className="text-white/60"></span>
<span className="font-medium">
{route.to}
</span>
</div>
<div className="text-xs text-white/60">
{route.fromAddress} {route.toAddress}
</div>
</div>
</td>
<td className="p-4">
<span className="text-white/80">
{route.suppliers.reduce(
(sum, s) =>
sum +
s.consumables.reduce(
(cSum, c) => cSum + c.plannedQty,
0
),
0
)}
</span>
</td>
<td className="p-4">
<span className="text-white/80">
{route.suppliers.reduce(
(sum, s) =>
sum +
s.consumables.reduce(
(cSum, c) => cSum + c.actualQty,
0
),
0
)}
</span>
</td>
<td className="p-4">
<span className="text-green-400 font-medium">
{formatCurrency(route.totalConsumablesPrice)}
</span>
</td>
<td className="p-4">
<span className="text-purple-400 font-medium">
{formatCurrency(route.logisticsPrice)}
</span>
</td>
<td className="p-4">
<span className="text-white font-semibold">
{formatCurrency(route.totalAmount)}
</span>
</td>
<td className="p-4"></td>
</tr>
{/* Поставщики */}
{isRouteExpanded &&
route.suppliers.map((supplier) => {
const isSupplierExpanded =
expandedSuppliers.has(supplier.id);
return (
<React.Fragment key={supplier.id}>
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-green-500/10">
<td className="p-4 pl-20">
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
onClick={() =>
toggleSupplierExpansion(
supplier.id
)
}
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
>
{isSupplierExpanded ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</Button>
<Building2 className="h-4 w-4 text-green-400" />
<span className="text-white font-medium">
Поставщик
<Package className="h-4 w-4 text-blue-400" />
<span className="text-white font-medium text-sm">
Товар
</span>
</div>
</td>
<td className="p-4" colSpan={2}>
<div className="text-white">
<div className="font-medium mb-1">
{supplier.name}
{item.product.name}
</div>
{item.product.article && (
<div className="text-xs text-white/60 mb-1">
ИНН: {supplier.inn}
Артикул: {item.product.article}
</div>
<div className="text-xs text-white/60 mb-1">
{supplier.address}
</div>
<div className="text-xs text-white/60">
{supplier.contact}
</div>
</div>
</td>
<td className="p-4">
<span className="text-white/80">
{supplier.consumables.reduce(
(sum, c) => sum + c.plannedQty,
0
)}
</span>
</td>
<td className="p-4">
<span className="text-white/80">
{supplier.consumables.reduce(
(sum, c) => sum + c.actualQty,
0
)}
</span>
</td>
<td className="p-4">
<span className="text-green-400 font-medium">
{formatCurrency(
supplier.consumables.reduce(
(sum, c) =>
sum +
calculateConsumableTotal(c),
0
)
)}
</span>
</td>
<td className="p-4"></td>
<td className="p-4">
<span className="text-white font-semibold">
{formatCurrency(supplier.totalAmount)}
</span>
</td>
<td className="p-4"></td>
</tr>
{/* Расходники */}
{isSupplierExpanded &&
supplier.consumables.map((consumable) => {
const isConsumableExpanded =
expandedConsumables.has(
consumable.id
);
return (
<React.Fragment key={consumable.id}>
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-yellow-500/10">
<td className="p-4 pl-28">
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
onClick={() =>
toggleConsumableExpansion(
consumable.id
)
}
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
>
{isConsumableExpanded ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</Button>
<Wrench className="h-4 w-4 text-yellow-400" />
<span className="text-white font-medium">
Расходник
</span>
</div>
</td>
<td className="p-4" colSpan={2}>
<div className="text-white">
<div className="font-medium mb-1">
{consumable.name}
</div>
<div className="text-xs text-white/60 mb-1">
Артикул: {consumable.sku}
</div>
<div className="flex gap-2">
{item.product.category && (
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs">
{consumable.category}
{item.product.category.name}
</Badge>
{getTypeBadge(
consumable.type
)}
{item.product.description && (
<div className="text-xs text-white/60 mt-1">
{item.product.description}
</div>
)}
</div>
</td>
<td className="p-4">
<span className="text-white font-semibold">
{consumable.plannedQty}
<span className="text-white/80 text-sm">
{formatDate(order.createdAt)}
</span>
</td>
<td className="p-4">
<span className="text-white font-semibold">
{consumable.actualQty}
{item.quantity}
</span>
</td>
<td className="p-4">
<div className="text-white">
<div className="font-medium">
{formatCurrency(
calculateConsumableTotal(
consumable
)
)}
{formatCurrency(Number(item.totalPrice))}
</div>
<div className="text-xs text-white/60">
{formatCurrency(
consumable.unitPrice
)}{" "}
за шт.
{formatCurrency(Number(item.price))} за шт.
</div>
</div>
</td>
<td className="p-4">
{getEfficiencyBadge(
consumable.plannedQty,
consumable.actualQty
)}
</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={9}
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>
)
))}
</React.Fragment>
);
})
)}
</div>
</div>
</div>
</td>
</tr>
)}
</React.Fragment>
);
})}
</React.Fragment>
);
})}
</React.Fragment>
);
})}
</React.Fragment>
);
})}
</tbody>
</table>
</div>

View File

@ -24,7 +24,11 @@ import {
Wrench,
Box,
} from "lucide-react";
import { GET_MY_COUNTERPARTIES, GET_ALL_PRODUCTS } from "@/graphql/queries";
import {
GET_MY_COUNTERPARTIES,
GET_ALL_PRODUCTS,
GET_SUPPLY_ORDERS,
} from "@/graphql/queries";
import { CREATE_SUPPLY_ORDER } from "@/graphql/mutations";
import { OrganizationAvatar } from "@/components/market/organization-avatar";
import { toast } from "sonner";
@ -81,6 +85,8 @@ export function CreateConsumablesSupplyPage() {
const [searchQuery, setSearchQuery] = useState("");
const [productSearchQuery, setProductSearchQuery] = useState("");
const [deliveryDate, setDeliveryDate] = useState("");
const [selectedFulfillmentCenter, setSelectedFulfillmentCenter] =
useState<ConsumableSupplier | null>(null);
const [isCreatingSupply, setIsCreatingSupply] = useState(false);
// Загружаем контрагентов-поставщиков расходников
@ -105,6 +111,11 @@ export function CreateConsumablesSupplyPage() {
counterpartiesData?.myCounterparties || []
).filter((org: ConsumableSupplier) => org.type === "WHOLESALE");
// Фильтруем фулфилмент-центры
const fulfillmentCenters = (
counterpartiesData?.myCounterparties || []
).filter((org: ConsumableSupplier) => org.type === "FULFILLMENT");
// Фильтруем поставщиков по поисковому запросу
const filteredSuppliers = consumableSuppliers.filter(
(supplier: ConsumableSupplier) =>
@ -210,6 +221,13 @@ export function CreateConsumablesSupplyPage() {
return;
}
// Для селлеров требуется выбор фулфилмент-центра
// TODO: Добавить проверку типа текущей организации
if (!selectedFulfillmentCenter) {
toast.error("Выберите фулфилмент-центр для доставки");
return;
}
setIsCreatingSupply(true);
try {
@ -218,21 +236,32 @@ export function CreateConsumablesSupplyPage() {
input: {
partnerId: selectedSupplier.id,
deliveryDate: deliveryDate,
fulfillmentCenterId: selectedFulfillmentCenter.id,
items: selectedConsumables.map((consumable) => ({
productId: consumable.id,
quantity: consumable.selectedQuantity,
})),
},
},
refetchQueries: [{ query: GET_SUPPLY_ORDERS }],
});
if (result.data?.createSupplyOrder?.success) {
toast.success("Поставка расходников создана успешно!");
router.push("/supplies");
toast.success("Заказ поставки расходников создан успешно!");
// Очищаем форму
setSelectedSupplier(null);
setSelectedFulfillmentCenter(null);
setSelectedConsumables([]);
setDeliveryDate("");
setProductSearchQuery("");
setSearchQuery("");
// Перенаправляем на страницу поставок фулфилмента
router.push("/fulfillment-supplies");
} else {
toast.error(
result.data?.createSupplyOrder?.message ||
"Ошибка при создании поставки"
"Ошибка при создании заказа поставки"
);
}
} catch (error) {
@ -247,16 +276,16 @@ export function CreateConsumablesSupplyPage() {
<div className="h-screen flex overflow-hidden">
<Sidebar />
<main
className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}
className={`flex-1 ${getSidebarMargin()} overflow-auto transition-all duration-300`}
>
<div className="h-full w-full flex flex-col">
<div className="min-h-full w-full flex flex-col px-3 py-2">
{/* Заголовок */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center justify-between mb-3 flex-shrink-0">
<div>
<h1 className="text-2xl font-bold text-white mb-2">
<h1 className="text-xl font-bold text-white mb-1">
Создание поставки расходников
</h1>
<p className="text-white/60">
<p className="text-white/60 text-sm">
Выберите поставщика и добавьте расходники в заказ
</p>
</div>
@ -264,75 +293,86 @@ export function CreateConsumablesSupplyPage() {
variant="ghost"
size="sm"
onClick={() => router.push("/supplies")}
className="text-white/60 hover:text-white hover:bg-white/10"
className="text-white/60 hover:text-white hover:bg-white/10 text-sm"
>
<ArrowLeft className="h-4 w-4 mr-2" />
Назад к поставкам
<ArrowLeft className="h-4 w-4 mr-1" />
Назад
</Button>
</div>
{/* Основной контент с двумя блоками */}
<div className="flex-1 overflow-hidden flex gap-4">
<div className="flex-1 flex gap-3 min-h-0">
{/* Левая колонка - Поставщики и Расходники */}
<div className="flex-1 flex flex-col gap-4 overflow-hidden">
<div className="flex-1 flex flex-col gap-3 min-h-0">
{/* Блок "Поставщики" */}
<Card className="bg-white/10 backdrop-blur border-white/20 flex-shrink-0">
<div className="p-4 border-b border-white/10">
<div className="flex items-center justify-between mb-3">
<h2 className="text-lg font-semibold text-white flex items-center">
<Building2 className="h-5 w-5 mr-2" />
<Card className="bg-gradient-to-r from-white/15 via-white/10 to-white/15 backdrop-blur-xl border border-white/30 shadow-2xl flex-shrink-0 sticky top-0 z-10 rounded-xl overflow-hidden">
<div className="p-3 bg-gradient-to-r from-purple-500/10 to-pink-500/10">
<div className="flex items-center justify-between gap-4">
<h2 className="text-lg font-bold text-white flex items-center flex-shrink-0 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
<Building2 className="h-5 w-5 mr-3 text-purple-400" />
Поставщики
</h2>
<div className="relative flex-1 max-w-sm">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-300 h-4 w-4 z-10" />
<Input
placeholder="Найти поставщика..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white/20 backdrop-blur border-white/30 text-white placeholder-white/50 pl-10 h-8 text-sm rounded-full shadow-inner focus:ring-2 focus:ring-purple-400/50 focus:border-purple-400/50 transition-all duration-300"
/>
</div>
{selectedSupplier && (
<Button
variant="ghost"
size="sm"
onClick={() => setSelectedSupplier(null)}
className="text-white/60 hover:text-white hover:bg-white/10"
className="text-white/70 hover:text-white hover:bg-white/20 text-sm h-8 px-3 flex-shrink-0 rounded-full transition-all duration-300 hover:scale-105"
>
Сбросить выбор
Сбросить
</Button>
)}
</div>
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
<Input
placeholder="Поиск поставщиков по названию, ИНН..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
/>
</div>
</div>
<div className="p-4 max-h-60 overflow-y-auto">
<div className="px-3 pb-3 h-24 overflow-hidden">
{counterpartiesLoading ? (
<div className="text-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent mx-auto mb-3"></div>
<p className="text-white/60">Загрузка поставщиков...</p>
<div className="text-center py-4">
<div className="animate-spin rounded-full h-6 w-6 border-2 border-purple-400 border-t-transparent mx-auto mb-2"></div>
<p className="text-white/70 text-sm font-medium">
Загружаем поставщиков...
</p>
</div>
) : filteredSuppliers.length === 0 ? (
<div className="text-center py-8">
<Building2 className="h-8 w-8 text-white/40 mx-auto mb-2" />
<p className="text-white/60 text-sm">
<div className="text-center py-4">
<div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full p-3 w-fit mx-auto mb-2">
<Building2 className="h-6 w-6 text-purple-300" />
</div>
<p className="text-white/70 text-sm font-medium">
{searchQuery
? "Поставщики не найдены"
: "У вас пока нет партнеров-поставщиков расходников"}
: "Добавьте поставщиков"}
</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
{filteredSuppliers.map((supplier: ConsumableSupplier) => (
<div className="flex gap-2 h-full pt-1">
{filteredSuppliers
.slice(0, 7)
.map((supplier: ConsumableSupplier, index) => (
<Card
key={supplier.id}
className={`p-3 cursor-pointer transition-all border ${
className={`relative cursor-pointer transition-all duration-300 border flex-shrink-0 rounded-xl overflow-hidden group hover:scale-105 hover:shadow-xl ${
selectedSupplier?.id === supplier.id
? "bg-orange-500/20 border-orange-500/50"
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"
? "bg-gradient-to-br from-orange-500/30 via-orange-400/20 to-orange-500/30 border-orange-400/60 shadow-lg shadow-orange-500/25"
: "bg-gradient-to-br from-white/10 via-white/5 to-white/10 border-white/20 hover:from-white/20 hover:via-white/10 hover:to-white/20 hover:border-white/40"
}`}
style={{
width: "calc((100% - 48px) / 7)", // 48px = 6 gaps * 8px each
animationDelay: `${index * 100}ms`,
}}
onClick={() => setSelectedSupplier(supplier)}
>
<div className="flex items-center space-x-3">
<div className="flex flex-col items-center justify-center h-full p-2 space-y-1">
<div className="relative">
<OrganizationAvatar
organization={{
id: supplier.id,
@ -341,53 +381,77 @@ export function CreateConsumablesSupplyPage() {
supplier.fullName ||
"Поставщик",
fullName: supplier.fullName,
users: (supplier.users || []).map((user) => ({
users: (supplier.users || []).map(
(user) => ({
id: user.id,
avatar: user.avatar,
})),
})
),
}}
size="sm"
/>
<div className="flex-1 min-w-0">
<h3 className="text-white font-medium text-sm truncate">
{supplier.name ||
supplier.fullName ||
"Поставщик"}
</h3>
<div className="flex items-center space-x-1 mb-1">
{renderStars(4.5)}
<span className="text-white/60 text-xs ml-1">
4.5
</span>
</div>
<p className="text-white/60 text-xs truncate">
ИНН: {supplier.inn}
</p>
</div>
{selectedSupplier?.id === supplier.id && (
<div className="flex-shrink-0">
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
Выбран
</Badge>
<div className="absolute -top-1 -right-1 bg-gradient-to-r from-orange-400 to-orange-500 rounded-full w-4 h-4 flex items-center justify-center shadow-lg animate-pulse">
<span className="text-white text-xs font-bold">
</span>
</div>
)}
</div>
<div className="text-center w-full space-y-0.5">
<h3 className="text-white font-semibold text-xs truncate leading-tight group-hover:text-purple-200 transition-colors duration-300">
{(
supplier.name ||
supplier.fullName ||
"Поставщик"
).slice(0, 10)}
</h3>
<div className="flex items-center justify-center space-x-1">
<span className="text-yellow-400 text-sm animate-pulse">
</span>
<span className="text-white/80 text-xs font-medium">
4.5
</span>
</div>
<div className="w-full bg-white/10 rounded-full h-1 overflow-hidden">
<div
className="bg-gradient-to-r from-purple-400 to-pink-400 h-full rounded-full animate-pulse"
style={{ width: "90%" }}
></div>
</div>
</div>
</div>
{/* Hover эффект */}
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/0 to-pink-500/0 group-hover:from-purple-500/10 group-hover:to-pink-500/10 transition-all duration-300 pointer-events-none"></div>
</Card>
))}
{filteredSuppliers.length > 7 && (
<div
className="flex-shrink-0 flex flex-col items-center justify-center bg-gradient-to-br from-white/10 to-white/5 rounded-xl border border-white/20 text-white/70 hover:text-white transition-all duration-300 hover:scale-105"
style={{ width: "calc((100% - 48px) / 7)" }}
>
<div className="text-lg font-bold text-purple-300">
+{filteredSuppliers.length - 7}
</div>
<div className="text-xs">ещё</div>
</div>
)}
</div>
)}
</div>
</Card>
{/* Блок "Расходники" */}
<Card className="bg-white/10 backdrop-blur border-white/20 flex-1 overflow-hidden">
<div className="p-4 border-b border-white/10">
<div className="flex items-center justify-between mb-3">
<Card className="bg-white/10 backdrop-blur border-white/20 flex-1 min-h-0 flex flex-col">
<div className="p-3 border-b border-white/10 flex-shrink-0">
<div className="flex items-center justify-between mb-2">
<h2 className="text-lg font-semibold text-white flex items-center">
<Wrench className="h-5 w-5 mr-2" />
<Wrench className="h-4 w-4 mr-2" />
Расходники
{selectedSupplier && (
<span className="text-white/60 text-sm font-normal ml-2">
<span className="text-white/60 text-xs font-normal ml-2 truncate">
- {selectedSupplier.name || selectedSupplier.fullName}
</span>
)}
@ -395,107 +459,119 @@ export function CreateConsumablesSupplyPage() {
</div>
{selectedSupplier && (
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-white/40 h-3 w-3" />
<Input
placeholder="Поиск расходников..."
value={productSearchQuery}
onChange={(e) => setProductSearchQuery(e.target.value)}
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-7 h-8 text-sm"
/>
</div>
)}
</div>
<div className="p-4 flex-1 overflow-y-auto">
<div className="p-3 flex-1 overflow-y-auto">
{!selectedSupplier ? (
<div className="text-center py-12">
<Wrench className="h-12 w-12 text-white/40 mx-auto mb-4" />
<p className="text-white/60">
<div className="text-center py-8">
<Wrench className="h-8 w-8 text-white/40 mx-auto mb-3" />
<p className="text-white/60 text-sm">
Выберите поставщика для просмотра расходников
</p>
</div>
) : productsLoading ? (
<div className="text-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent mx-auto mb-3"></div>
<p className="text-white/60">Загрузка расходников...</p>
<div className="text-center py-8">
<div className="animate-spin rounded-full h-6 w-6 border-2 border-white border-t-transparent mx-auto mb-2"></div>
<p className="text-white/60 text-sm">Загрузка...</p>
</div>
) : supplierProducts.length === 0 ? (
<div className="text-center py-12">
<Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
<p className="text-white/60">
У данного поставщика нет доступных расходников
<div className="text-center py-8">
<Package className="h-8 w-8 text-white/40 mx-auto mb-3" />
<p className="text-white/60 text-sm">
Нет доступных расходников
</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{supplierProducts.map((product: ConsumableProduct) => {
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-3">
{supplierProducts.map(
(product: ConsumableProduct, index) => {
const selectedQuantity = getSelectedQuantity(
product.id
);
return (
<Card
key={product.id}
className="bg-white/10 backdrop-blur border-white/20 p-4"
className={`relative bg-gradient-to-br from-white/10 via-white/5 to-white/10 backdrop-blur border border-white/20 p-3 rounded-xl overflow-hidden group hover:shadow-xl transition-all duration-300 ${
selectedQuantity > 0
? "ring-2 ring-green-400/50 bg-gradient-to-br from-green-500/20 via-green-400/10 to-green-500/20"
: "hover:from-white/20 hover:via-white/10 hover:to-white/20 hover:border-white/40"
}`}
style={{
animationDelay: `${index * 50}ms`,
minHeight: "200px",
width: "100%",
}}
>
<div className="space-y-3">
<div className="space-y-2 h-full flex flex-col">
{/* Изображение товара */}
<div className="aspect-square bg-white/5 rounded-lg overflow-hidden">
{product.images && product.images.length > 0 && product.images[0] ? (
<div className="aspect-square bg-white/5 rounded-lg overflow-hidden relative flex-shrink-0">
{product.images &&
product.images.length > 0 &&
product.images[0] ? (
<Image
src={product.images[0]}
alt={product.name}
width={200}
height={200}
className="w-full h-full object-cover"
width={100}
height={100}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
) : product.mainImage ? (
<Image
src={product.mainImage}
alt={product.name}
width={200}
height={200}
className="w-full h-full object-cover"
width={100}
height={100}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<Wrench className="h-12 w-12 text-white/40" />
<Wrench className="h-8 w-8 text-white/40" />
</div>
)}
{selectedQuantity > 0 && (
<div className="absolute top-2 right-2 bg-gradient-to-r from-green-400 to-green-500 rounded-full w-6 h-6 flex items-center justify-center shadow-lg animate-pulse">
<span className="text-white text-xs font-bold">
{selectedQuantity > 999
? "999+"
: selectedQuantity}
</span>
</div>
)}
</div>
{/* Информация о товаре */}
<div>
<h3 className="text-white font-medium mb-1 line-clamp-2">
<div className="space-y-1 flex-grow">
<h3 className="text-white font-medium text-sm leading-tight line-clamp-2 group-hover:text-purple-200 transition-colors duration-300">
{product.name}
</h3>
{product.category && (
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs mb-2">
{product.category.name}
<Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs px-2 py-1">
{product.category.name.slice(0, 10)}
</Badge>
)}
<p className="text-white/60 text-sm mb-2 line-clamp-2">
{product.description ||
"Описание отсутствует"}
</p>
<div className="flex items-center justify-between">
<span className="text-green-400 font-semibold">
<span className="text-green-400 font-semibold text-sm">
{formatCurrency(product.price)}
{product.unit && (
<span className="text-white/60 text-sm ml-1">
/ {product.unit}
</span>
)}
</span>
{product.stock && (
<span className="text-white/60 text-sm">
В наличии: {product.stock}
<span className="text-white/60 text-xs">
{product.stock}
</span>
)}
</div>
</div>
{/* Управление количеством */}
<div className="flex items-center justify-between">
<div className="flex flex-col items-center space-y-2 mt-auto">
<div className="flex items-center space-x-2">
<Button
variant="ghost"
@ -506,40 +582,97 @@ export function CreateConsumablesSupplyPage() {
Math.max(0, selectedQuantity - 1)
)
}
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/20 rounded-full transition-all duration-300"
disabled={selectedQuantity === 0}
>
<Minus className="h-4 w-4" />
<Minus className="h-3 w-3" />
</Button>
<span className="text-white font-medium w-8 text-center">
{selectedQuantity}
</span>
<Input
type="text"
inputMode="numeric"
pattern="[0-9]*"
value={
selectedQuantity === 0
? ""
: selectedQuantity.toString()
}
onChange={(e) => {
let inputValue = e.target.value;
// Удаляем все нецифровые символы
inputValue = inputValue.replace(
/[^0-9]/g,
""
);
// Удаляем ведущие нули
inputValue = inputValue.replace(
/^0+/,
""
);
// Если строка пустая после удаления нулей, устанавливаем 0
const numericValue =
inputValue === ""
? 0
: parseInt(inputValue);
// Ограничиваем значение максимумом 99999
const clampedValue = Math.min(
numericValue,
99999
);
updateConsumableQuantity(
product.id,
clampedValue
);
}}
onBlur={(e) => {
// При потере фокуса, если поле пустое, устанавливаем 0
if (e.target.value === "") {
updateConsumableQuantity(
product.id,
0
);
}
}}
className="w-16 h-7 text-center text-sm bg-white/10 border-white/20 text-white rounded px-1 focus:ring-2 focus:ring-purple-400/50 focus:border-purple-400/50"
placeholder="0"
/>
<Button
variant="ghost"
size="sm"
onClick={() =>
updateConsumableQuantity(
product.id,
selectedQuantity + 1
Math.min(selectedQuantity + 1, 99999)
)
}
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/20 rounded-full transition-all duration-300"
>
<Plus className="h-4 w-4" />
<Plus className="h-3 w-3" />
</Button>
</div>
{selectedQuantity > 0 && (
<span className="text-green-400 font-medium text-sm">
<div className="text-center">
<span className="text-green-400 font-bold text-sm bg-green-500/10 px-3 py-1 rounded-full">
{formatCurrency(
product.price * selectedQuantity
)}
</span>
</div>
)}
</div>
</div>
{/* Hover эффект */}
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/0 to-pink-500/0 group-hover:from-purple-500/5 group-hover:to-pink-500/5 transition-all duration-300 pointer-events-none rounded-xl"></div>
</Card>
);
})}
}
)}
</div>
)}
</div>
@ -547,22 +680,43 @@ export function CreateConsumablesSupplyPage() {
</div>
{/* Правая колонка - Корзина */}
{selectedConsumables.length > 0 && (
<div className="w-80 flex-shrink-0">
<Card className="bg-white/10 backdrop-blur border-white/20 p-4 sticky top-0">
<h3 className="text-white font-semibold mb-4 flex items-center">
<div className="w-72 flex-shrink-0">
<Card className="bg-white/10 backdrop-blur border-white/20 p-3 sticky top-0">
<h3 className="text-white font-semibold mb-3 flex items-center text-sm">
<ShoppingCart className="h-4 w-4 mr-2" />
Корзина ({getTotalItems()} шт)
</h3>
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
{selectedConsumables.length === 0 ? (
<div className="text-center py-6">
<div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full p-4 w-fit mx-auto mb-3">
<ShoppingCart className="h-8 w-8 text-purple-300" />
</div>
<p className="text-white/60 text-sm font-medium mb-2">
Корзина пуста
</p>
<p className="text-white/40 text-xs mb-3">
Добавьте расходники для создания поставки
</p>
{selectedFulfillmentCenter && (
<div className="bg-white/5 rounded-lg p-2 mb-2">
<p className="text-white/60 text-xs">Доставка в:</p>
<p className="text-white text-xs font-medium">
{selectedFulfillmentCenter.name ||
selectedFulfillmentCenter.fullName}
</p>
</div>
)}
</div>
) : (
<div className="space-y-2 mb-3 max-h-48 overflow-y-auto">
{selectedConsumables.map((consumable) => (
<div
key={consumable.id}
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
>
<div className="flex-1 min-w-0">
<p className="text-white text-sm font-medium truncate">
<p className="text-white text-xs font-medium truncate">
{consumable.name}
</p>
<p className="text-white/60 text-xs">
@ -571,7 +725,7 @@ export function CreateConsumablesSupplyPage() {
</p>
</div>
<div className="flex items-center space-x-2">
<span className="text-green-400 font-medium text-sm">
<span className="text-green-400 font-medium text-xs">
{formatCurrency(
consumable.price * consumable.selectedQuantity
)}
@ -582,7 +736,7 @@ export function CreateConsumablesSupplyPage() {
onClick={() =>
updateConsumableQuantity(consumable.id, 0)
}
className="h-6 w-6 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
className="h-5 w-5 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
>
×
</Button>
@ -590,40 +744,78 @@ export function CreateConsumablesSupplyPage() {
</div>
))}
</div>
)}
<div className="border-t border-white/20 pt-4">
<div className="mb-4">
<label className="text-white/60 text-sm mb-2 block">
<div className="border-t border-white/20 pt-3">
<div className="mb-3">
<label className="text-white/60 text-xs mb-1 block">
Фулфилмент-центр:
</label>
<div className="relative">
<select
value={selectedFulfillmentCenter?.id || ""}
onChange={(e) => {
const center = fulfillmentCenters.find(
(fc) => fc.id === e.target.value
);
setSelectedFulfillmentCenter(center || null);
}}
className="w-full bg-white/10 border border-white/20 text-white h-8 text-sm rounded px-2 focus:ring-2 focus:ring-purple-400/50 focus:border-purple-400/50"
required
>
<option value="" className="bg-gray-800 text-white">
Выберите фулфилмент-центр
</option>
{fulfillmentCenters.map((center) => (
<option
key={center.id}
value={center.id}
className="bg-gray-800 text-white"
>
{center.name ||
center.fullName ||
"Фулфилмент-центр"}
</option>
))}
</select>
</div>
</div>
<div className="mb-3">
<label className="text-white/60 text-xs mb-1 block">
Дата поставки:
</label>
<Input
type="date"
value={deliveryDate}
onChange={(e) => setDeliveryDate(e.target.value)}
className="bg-white/10 border-white/20 text-white"
className="bg-white/10 border-white/20 text-white h-8 text-sm"
min={new Date().toISOString().split("T")[0]}
required
/>
</div>
<div className="flex items-center justify-between mb-4">
<span className="text-white font-semibold">Итого:</span>
<div className="flex items-center justify-between mb-3">
<span className="text-white font-semibold text-sm">
Итого:
</span>
<span className="text-green-400 font-bold text-lg">
{formatCurrency(getTotalAmount())}
</span>
</div>
<Button
onClick={handleCreateSupply}
disabled={isCreatingSupply || !deliveryDate}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50"
disabled={
isCreatingSupply ||
!deliveryDate ||
!selectedFulfillmentCenter ||
selectedConsumables.length === 0
}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50 h-8 text-sm"
>
{isCreatingSupply
? "Создание..."
: "Создать поставку расходников"}
{isCreatingSupply ? "Создание..." : "Создать поставку"}
</Button>
</div>
</Card>
</div>
)}
</div>
</div>
</main>

View File

@ -754,3 +754,48 @@ export const ALL_USERS = gql`
}
}
`
export const GET_SUPPLY_ORDERS = gql`
query GetSupplyOrders {
supplyOrders {
id
deliveryDate
status
totalAmount
totalItems
createdAt
updatedAt
partner {
id
name
fullName
inn
address
phones
emails
}
organization {
id
name
fullName
type
}
items {
id
quantity
price
totalPrice
product {
id
name
article
description
category {
id
name
}
}
}
}
}
`

View File

@ -608,7 +608,10 @@ export const resolvers = {
// Фильтруем null значения и сортируем по времени последнего сообщения
return conversations
.filter((conv) => conv !== null)
.sort((a, b) => new Date(b!.updatedAt).getTime() - new Date(a!.updatedAt).getTime());
.sort(
(a, b) =>
new Date(b!.updatedAt).getTime() - new Date(a!.updatedAt).getTime()
);
},
// Мои услуги
@ -664,6 +667,57 @@ export const resolvers = {
});
},
// Заказы поставок расходников
supplyOrders: async (_: unknown, __: unknown, context: Context) => {
if (!context.user) {
throw new GraphQLError("Требуется авторизация", {
extensions: { code: "UNAUTHENTICATED" },
});
}
const currentUser = await prisma.user.findUnique({
where: { id: context.user.id },
include: { organization: true },
});
if (!currentUser?.organization) {
throw new GraphQLError("У пользователя нет организации");
}
// Возвращаем заказы где текущая организация является заказчиком или поставщиком
return await prisma.supplyOrder.findMany({
where: {
OR: [
{ organizationId: currentUser.organization.id }, // Заказы созданные организацией
{ partnerId: currentUser.organization.id }, // Заказы где организация - поставщик
],
},
include: {
partner: {
include: {
users: true,
},
},
organization: {
include: {
users: true,
},
},
items: {
include: {
product: {
include: {
category: true,
organization: true,
},
},
},
},
},
orderBy: { createdAt: "desc" },
});
},
// Логистика организации
myLogistics: async (_: unknown, __: unknown, context: Context) => {
if (!context.user) {
@ -899,7 +953,9 @@ export const resolvers = {
});
if (!targetOrganization || targetOrganization.type !== "FULFILLMENT") {
throw new GraphQLError("Расходники доступны только у фулфилмент центров");
throw new GraphQLError(
"Расходники доступны только у фулфилмент центров"
);
}
return await prisma.supply.findMany({
@ -2591,7 +2647,7 @@ export const resolvers = {
}
// conversationId имеет формат "currentOrgId-counterpartyId"
const [, counterpartyId] = args.conversationId.split('-');
const [, counterpartyId] = args.conversationId.split("-");
if (!counterpartyId) {
throw new GraphQLError("Неверный ID беседы");
@ -2989,13 +3045,22 @@ export const resolvers = {
},
// Создать заказ поставки расходников
// Процесс: Селлер → Поставщик → Логистика → Фулфилмент
// 1. Селлер создает заказ у поставщика расходников
// 2. Поставщик получает заказ и готовит товары
// 3. Логистика транспортирует товары на склад фулфилмента
// 4. Фулфилмент принимает товары на склад
// 5. Все участники видят информацию о поставке в своих кабинетах
createSupplyOrder: async (
_: unknown,
args: {
input: {
partnerId: string;
deliveryDate: string;
fulfillmentCenterId?: string; // ID фулфилмент-центра для доставки
logisticsPartnerId?: string; // ID логистической компании
items: Array<{ productId: string; quantity: number }>;
notes?: string; // Дополнительные заметки к заказу
};
},
context: Context
@ -3015,13 +3080,40 @@ export const resolvers = {
throw new GraphQLError("У пользователя нет организации");
}
// Проверяем, что это фулфилмент центр
if (currentUser.organization.type !== "FULFILLMENT") {
// Проверяем тип организации и определяем роль в процессе поставки
const allowedTypes = ["FULFILLMENT", "SELLER", "LOGIST"];
if (!allowedTypes.includes(currentUser.organization.type)) {
throw new GraphQLError(
"Заказы поставок доступны только для фулфилмент центров"
"Заказы поставок недоступны для данного типа организации"
);
}
// Определяем роль организации в процессе поставки
const organizationRole = currentUser.organization.type;
let fulfillmentCenterId = args.input.fulfillmentCenterId;
// Если заказ создает фулфилмент-центр, он сам является получателем
if (organizationRole === "FULFILLMENT") {
fulfillmentCenterId = currentUser.organization.id;
}
// Если указан фулфилмент-центр, проверяем его существование
if (fulfillmentCenterId) {
const fulfillmentCenter = await prisma.organization.findFirst({
where: {
id: fulfillmentCenterId,
type: "FULFILLMENT",
},
});
if (!fulfillmentCenter) {
return {
success: false,
message: "Указанный фулфилмент-центр не найден",
};
}
}
// Проверяем, что партнер существует и является оптовиком
const partner = await prisma.organization.findFirst({
where: {
@ -3104,6 +3196,16 @@ export const resolvers = {
});
try {
// Определяем начальный статус в зависимости от роли организации
let initialStatus = "PENDING";
if (organizationRole === "SELLER") {
initialStatus = "PENDING"; // Селлер создает заказ, ждет подтверждения поставщика
} else if (organizationRole === "FULFILLMENT") {
initialStatus = "PENDING"; // Фулфилмент заказывает для своего склада
} else if (organizationRole === "LOGIST") {
initialStatus = "CONFIRMED"; // Логист может сразу подтверждать заказы
}
const supplyOrder = await prisma.supplyOrder.create({
data: {
partnerId: args.input.partnerId,
@ -3111,6 +3213,7 @@ export const resolvers = {
totalAmount: new Prisma.Decimal(totalAmount),
totalItems: totalItems,
organizationId: currentUser.organization.id,
status: initialStatus as any,
items: {
create: orderItems,
},
@ -3167,10 +3270,31 @@ export const resolvers = {
data: suppliesData,
});
// Формируем сообщение в зависимости от роли организации
let successMessage = "";
if (organizationRole === "SELLER") {
successMessage = `Заказ поставки расходников создан! Расходники будут доставлены ${
fulfillmentCenterId
? "на указанный фулфилмент-склад"
: "согласно настройкам"
}. Ожидайте подтверждения от поставщика.`;
} else if (organizationRole === "FULFILLMENT") {
successMessage = `Заказ поставки расходников создан для вашего склада! Ожидайте подтверждения от поставщика и координации с логистикой.`;
} else if (organizationRole === "LOGIST") {
successMessage = `Заказ поставки создан и подтвержден! Координируйте доставку расходников от поставщика на фулфилмент-склад.`;
}
return {
success: true,
message: `Заказ поставки создан успешно! Добавлено ${suppliesData.length} расходников в каталог.`,
message: successMessage,
order: supplyOrder,
processInfo: {
role: organizationRole,
supplier: partner.name || partner.fullName,
fulfillmentCenter: fulfillmentCenterId,
logistics: args.input.logisticsPartnerId,
status: initialStatus,
},
};
} catch (error) {
console.error("Error creating supply order:", error);
@ -3366,7 +3490,9 @@ export const resolvers = {
weight: args.input.weight,
dimensions: args.input.dimensions,
material: args.input.material,
images: args.input.images ? JSON.stringify(args.input.images) : undefined,
images: args.input.images
? JSON.stringify(args.input.images)
: undefined,
mainImage: args.input.mainImage,
isActive: args.input.isActive ?? true,
},
@ -4497,7 +4623,7 @@ export const resolvers = {
Product: {
images: (parent: { images: unknown }) => {
// Если images это строка JSON, парсим её в массив
if (typeof parent.images === 'string') {
if (typeof parent.images === "string") {
try {
return JSON.parse(parent.images);
} catch {
@ -4963,17 +5089,17 @@ const wildberriesQueries = {
organization: {
include: {
apiKeys: true,
}
},
},
},
});
if (!user?.organization || user.organization.type !== 'SELLER') {
if (!user?.organization || user.organization.type !== "SELLER") {
throw new GraphQLError("Доступно только для продавцов");
}
const wbApiKeyRecord = user.organization.apiKeys?.find(
key => key.marketplace === 'WILDBERRIES' && key.isActive
(key) => key.marketplace === "WILDBERRIES" && key.isActive
);
if (!wbApiKeyRecord) {
@ -4986,7 +5112,7 @@ const wildberriesQueries = {
const [active, completed, paused] = await Promise.all([
wbService.getAdverts(9).catch(() => []), // активные
wbService.getAdverts(7).catch(() => []), // завершенные
wbService.getAdverts(11).catch(() => []) // на паузе
wbService.getAdverts(11).catch(() => []), // на паузе
]);
const allCampaigns = [...active, ...completed, ...paused];
@ -4995,30 +5121,34 @@ const wildberriesQueries = {
success: true,
message: `Found ${active.length} active, ${completed.length} completed, ${paused.length} paused campaigns`,
campaignsCount: allCampaigns.length,
campaigns: allCampaigns.map(c => ({
campaigns: allCampaigns.map((c) => ({
id: c.advertId,
name: c.name,
status: c.status,
type: c.type
}))
type: c.type,
})),
};
} catch (error) {
console.error('Error debugging WB adverts:', error);
console.error("Error debugging WB adverts:", error);
return {
success: false,
message: error instanceof Error ? error.message : 'Unknown error',
message: error instanceof Error ? error.message : "Unknown error",
campaignsCount: 0,
campaigns: []
campaigns: [],
};
}
},
getWildberriesStatistics: async (
_: unknown,
{ period, startDate, endDate }: {
period?: 'week' | 'month' | 'quarter'
startDate?: string
endDate?: string
{
period,
startDate,
endDate,
}: {
period?: "week" | "month" | "quarter";
startDate?: string;
endDate?: string;
},
context: Context
) => {
@ -5036,7 +5166,7 @@ const wildberriesQueries = {
organization: {
include: {
apiKeys: true,
}
},
},
},
});
@ -5045,12 +5175,12 @@ const wildberriesQueries = {
throw new GraphQLError("Организация не найдена");
}
if (user.organization.type !== 'SELLER') {
if (user.organization.type !== "SELLER") {
throw new GraphQLError("Доступно только для продавцов");
}
const wbApiKeyRecord = user.organization.apiKeys?.find(
key => key.marketplace === 'WILDBERRIES' && key.isActive
(key) => key.marketplace === "WILDBERRIES" && key.isActive
);
if (!wbApiKeyRecord) {
@ -5073,7 +5203,9 @@ const wildberriesQueries = {
dateFrom = WildberriesService.getDatePeriodAgo(period);
dateTo = WildberriesService.formatDate(new Date());
} else {
throw new GraphQLError("Необходимо указать либо period, либо startDate и endDate");
throw new GraphQLError(
"Необходимо указать либо period, либо startDate и endDate"
);
}
// Получаем статистику
@ -5082,13 +5214,16 @@ const wildberriesQueries = {
return {
success: true,
data: statistics,
message: null
message: null,
};
} catch (error) {
console.error('Error fetching WB statistics:', error);
console.error("Error fetching WB statistics:", error);
return {
success: false,
message: error instanceof Error ? error.message : 'Ошибка получения статистики',
message:
error instanceof Error
? error.message
: "Ошибка получения статистики",
data: [],
};
}
@ -5096,17 +5231,19 @@ const wildberriesQueries = {
getWildberriesCampaignStats: async (
_: unknown,
{ input }: {
{
input,
}: {
input: {
campaigns: Array<{
id: number
dates?: string[]
id: number;
dates?: string[];
interval?: {
begin: string
end: string
}
}>
}
begin: string;
end: string;
};
}>;
};
},
context: Context
) => {
@ -5124,7 +5261,7 @@ const wildberriesQueries = {
organization: {
include: {
apiKeys: true,
}
},
},
},
});
@ -5133,12 +5270,12 @@ const wildberriesQueries = {
throw new GraphQLError("Организация не найдена");
}
if (user.organization.type !== 'SELLER') {
if (user.organization.type !== "SELLER") {
throw new GraphQLError("Доступно только для продавцов");
}
const wbApiKeyRecord = user.organization.apiKeys?.find(
key => key.marketplace === 'WILDBERRIES' && key.isActive
(key) => key.marketplace === "WILDBERRIES" && key.isActive
);
if (!wbApiKeyRecord) {
@ -5149,21 +5286,21 @@ const wildberriesQueries = {
const wbService = new WildberriesService(wbApiKeyRecord.apiKey);
// Преобразуем запросы в нужный формат
const requests = input.campaigns.map(campaign => {
const requests = input.campaigns.map((campaign) => {
if (campaign.dates && campaign.dates.length > 0) {
return {
id: campaign.id,
dates: campaign.dates
dates: campaign.dates,
};
} else if (campaign.interval) {
return {
id: campaign.id,
interval: campaign.interval
interval: campaign.interval,
};
} else {
// Если не указаны ни даты, ни интервал, возвращаем данные только за последние сутки
return {
id: campaign.id
id: campaign.id,
};
}
});
@ -5174,13 +5311,16 @@ const wildberriesQueries = {
return {
success: true,
data: campaignStats,
message: null
message: null,
};
} catch (error) {
console.error('Error fetching WB campaign stats:', error);
console.error("Error fetching WB campaign stats:", error);
return {
success: false,
message: error instanceof Error ? error.message : 'Ошибка получения статистики кампаний',
message:
error instanceof Error
? error.message
: "Ошибка получения статистики кампаний",
data: [],
};
}

View File

@ -34,6 +34,9 @@ export const typeDefs = gql`
# Расходники организации
mySupplies: [Supply!]!
# Заказы поставок расходников
supplyOrders: [SupplyOrder!]!
# Логистика организации
myLogistics: [Logistics!]!
@ -205,8 +208,13 @@ export const typeDefs = gql`
updateEmployeeSchedule(input: UpdateScheduleInput!): Boolean!
# Работа с поставками Wildberries
createWildberriesSupply(input: CreateWildberriesSupplyInput!): WildberriesSupplyResponse!
updateWildberriesSupply(id: ID!, input: UpdateWildberriesSupplyInput!): WildberriesSupplyResponse!
createWildberriesSupply(
input: CreateWildberriesSupplyInput!
): WildberriesSupplyResponse!
updateWildberriesSupply(
id: ID!
input: UpdateWildberriesSupplyInput!
): WildberriesSupplyResponse!
deleteWildberriesSupply(id: ID!): Boolean!
# Админ мутации
@ -537,7 +545,10 @@ export const typeDefs = gql`
input SupplyOrderInput {
partnerId: ID!
deliveryDate: DateTime!
fulfillmentCenterId: ID # ID фулфилмент-центра для доставки
logisticsPartnerId: ID # ID логистической компании
items: [SupplyOrderItemInput!]!
notes: String # Дополнительные заметки к заказу
}
input SupplyOrderItemInput {
@ -545,10 +556,19 @@ export const typeDefs = gql`
quantity: Int!
}
type SupplyOrderProcessInfo {
role: String! # Роль организации в процессе (SELLER, FULFILLMENT, LOGIST)
supplier: String! # Название поставщика
fulfillmentCenter: ID # ID фулфилмент-центра
logistics: ID # ID логистической компании
status: String! # Текущий статус заказа
}
type SupplyOrderResponse {
success: Boolean!
message: String!
order: SupplyOrder
processInfo: SupplyOrderProcessInfo # Информация о процессе поставки
}
# Типы для логистики

View File

@ -35,48 +35,15 @@ const authLink = setContext((operation, { headers }) => {
}
})
// Error Link для обработки ошибок
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.forEach(({ message, locations, path, extensions }) => {
console.error(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
)
// Если токен недействителен, очищаем localStorage и перенаправляем на авторизацию
if (extensions?.code === 'UNAUTHENTICATED') {
if (typeof window !== 'undefined') {
const isAdminPath = window.location.pathname.startsWith('/admin')
if (isAdminPath) {
// Для админских страниц очищаем админские токены
localStorage.removeItem('adminAuthToken')
localStorage.removeItem('adminData')
if (window.location.pathname !== '/admin') {
window.location.href = '/admin'
}
} else {
// Для пользовательских страниц очищаем пользовательские токены
localStorage.removeItem('authToken')
localStorage.removeItem('userData')
if (window.location.pathname !== '/') {
window.location.href = '/'
}
}
}
}
})
}
if (networkError) {
console.error(`[Network error]: ${networkError}`)
}
// Error Link для обработки ошибок - минимальная версия
const errorLink = onError(() => {
// Пустой обработчик - не делаем ничего
// Это предотвращает любые ошибки в error handler
})
// Создаем Apollo Client
export const apolloClient = new ApolloClient({
link: from([
errorLink,
authLink,
httpLink,
]),