Добавлен новый функционал для обработки заказов поставок расходников в компоненте CreateConsumablesSupplyPage. Реализован выбор фулфилмент-центра, улучшена логика создания заказа с учетом нового поля fulfillmentCenterId. Обновлен компонент SuppliesConsumablesTab для отображения заказов поставок с новыми данными. Оптимизированы стили и структура кода для повышения удобства использования.
This commit is contained in:
Veronika Smirnova
@ -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;
|
||||
name: string;
|
||||
value: string;
|
||||
unit?: string;
|
||||
quantity: number;
|
||||
price: number;
|
||||
totalPrice: number;
|
||||
product: {
|
||||
id: string;
|
||||
name: string;
|
||||
article?: string;
|
||||
description?: string;
|
||||
category?: {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
interface Consumable {
|
||||
interface SupplyOrder {
|
||||
id: string;
|
||||
name: string;
|
||||
sku: string;
|
||||
category: string;
|
||||
type: "packaging" | "labels" | "protective" | "tools" | "other";
|
||||
plannedQty: number;
|
||||
actualQty: number;
|
||||
defectQty: number;
|
||||
unitPrice: number;
|
||||
parameters: ConsumableParameter[];
|
||||
}
|
||||
|
||||
interface ConsumableSupplier {
|
||||
id: string;
|
||||
name: string;
|
||||
inn: string;
|
||||
contact: string;
|
||||
address: string;
|
||||
consumables: Consumable[];
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
interface ConsumableRoute {
|
||||
id: string;
|
||||
from: string;
|
||||
fromAddress: string;
|
||||
to: string;
|
||||
toAddress: string;
|
||||
suppliers: ConsumableSupplier[];
|
||||
totalConsumablesPrice: number;
|
||||
logisticsPrice: number;
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
interface ConsumableSupply {
|
||||
id: string;
|
||||
number: number;
|
||||
deliveryDate: string;
|
||||
createdDate: string;
|
||||
routes: ConsumableRoute[];
|
||||
plannedTotal: number;
|
||||
actualTotal: number;
|
||||
defectTotal: number;
|
||||
totalConsumablesPrice: number;
|
||||
totalLogisticsPrice: number;
|
||||
grandTotal: number;
|
||||
status: "planned" | "in-transit" | "delivered" | "completed";
|
||||
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;
|
||||
};
|
||||
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">Загрузка заказов поставок...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getEfficiencyBadge = (planned: number, actual: number) => {
|
||||
const efficiency = (actual / planned) * 100;
|
||||
if (efficiency >= 95) {
|
||||
return (
|
||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 border">
|
||||
Отлично
|
||||
</Badge>
|
||||
);
|
||||
} else if (efficiency >= 90) {
|
||||
return (
|
||||
<Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30 border">
|
||||
Хорошо
|
||||
</Badge>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Badge className="bg-red-500/20 text-red-300 border-red-500/30 border">
|
||||
Проблемы
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
};
|
||||
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}>
|
||||
{/* Основная строка поставки расходников */}
|
||||
<tr
|
||||
className="border-b border-white/10 hover:bg-white/5 transition-colors bg-orange-500/10 cursor-pointer"
|
||||
onClick={() => toggleSupplyExpansion(supply.id)}
|
||||
>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-white font-normal text-lg">
|
||||
{supply.number}
|
||||
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-normal text-lg">
|
||||
{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(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)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">{getStatusBadge(supply.status)}</td>
|
||||
</tr>
|
||||
</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(Number(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">
|
||||
<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>
|
||||
{/* Развернутые детали заказа - товары */}
|
||||
{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">
|
||||
<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">
|
||||
{item.product.name}
|
||||
</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>
|
||||
{item.product.article && (
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
Артикул: {item.product.article}
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
{route.fromAddress} → {route.toAddress}
|
||||
)}
|
||||
{item.product.category && (
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs">
|
||||
{item.product.category.name}
|
||||
</Badge>
|
||||
)}
|
||||
{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/80 text-sm">
|
||||
{formatDate(order.createdAt)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{item.quantity}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-white">
|
||||
<div className="font-medium">
|
||||
{formatCurrency(Number(item.totalPrice))}
|
||||
</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">
|
||||
Поставщик
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">
|
||||
{supplier.name}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
ИНН: {supplier.inn}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
{supplier.address}
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
{supplier.contact}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{supplier.consumables.reduce(
|
||||
(sum, c) => sum + c.plannedQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white/80">
|
||||
{supplier.consumables.reduce(
|
||||
(sum, c) => sum + c.actualQty,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-green-400 font-medium">
|
||||
{formatCurrency(
|
||||
supplier.consumables.reduce(
|
||||
(sum, c) =>
|
||||
sum +
|
||||
calculateConsumableTotal(c),
|
||||
0
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{formatCurrency(supplier.totalAmount)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
|
||||
{/* Расходники */}
|
||||
{isSupplierExpanded &&
|
||||
supplier.consumables.map((consumable) => {
|
||||
const isConsumableExpanded =
|
||||
expandedConsumables.has(
|
||||
consumable.id
|
||||
);
|
||||
return (
|
||||
<React.Fragment key={consumable.id}>
|
||||
<tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-yellow-500/10">
|
||||
<td className="p-4 pl-28">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleConsumableExpansion(
|
||||
consumable.id
|
||||
)
|
||||
}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isConsumableExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Wrench className="h-4 w-4 text-yellow-400" />
|
||||
<span className="text-white font-medium">
|
||||
Расходник
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4" colSpan={2}>
|
||||
<div className="text-white">
|
||||
<div className="font-medium mb-1">
|
||||
{consumable.name}
|
||||
</div>
|
||||
<div className="text-xs text-white/60 mb-1">
|
||||
Артикул: {consumable.sku}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs">
|
||||
{consumable.category}
|
||||
</Badge>
|
||||
{getTypeBadge(
|
||||
consumable.type
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{consumable.plannedQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="text-white font-semibold">
|
||||
{consumable.actualQty}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-white">
|
||||
<div className="font-medium">
|
||||
{formatCurrency(
|
||||
calculateConsumableTotal(
|
||||
consumable
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-white/60">
|
||||
{formatCurrency(
|
||||
consumable.unitPrice
|
||||
)}{" "}
|
||||
за шт.
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
{getEfficiencyBadge(
|
||||
consumable.plannedQty,
|
||||
consumable.actualQty
|
||||
)}
|
||||
</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>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
<div className="text-xs text-white/60">
|
||||
{formatCurrency(Number(item.price))} за шт.
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4"></td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -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,130 +293,165 @@ 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) => (
|
||||
<Card
|
||||
key={supplier.id}
|
||||
className={`p-3 cursor-pointer transition-all border ${
|
||||
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"
|
||||
}`}
|
||||
onClick={() => setSelectedSupplier(supplier)}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<OrganizationAvatar
|
||||
organization={{
|
||||
id: supplier.id,
|
||||
name:
|
||||
supplier.name ||
|
||||
supplier.fullName ||
|
||||
"Поставщик",
|
||||
fullName: supplier.fullName,
|
||||
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 className="flex gap-2 h-full pt-1">
|
||||
{filteredSuppliers
|
||||
.slice(0, 7)
|
||||
.map((supplier: ConsumableSupplier, index) => (
|
||||
<Card
|
||||
key={supplier.id}
|
||||
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-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 flex-col items-center justify-center h-full p-2 space-y-1">
|
||||
<div className="relative">
|
||||
<OrganizationAvatar
|
||||
organization={{
|
||||
id: supplier.id,
|
||||
name:
|
||||
supplier.name ||
|
||||
supplier.fullName ||
|
||||
"Поставщик",
|
||||
fullName: supplier.fullName,
|
||||
users: (supplier.users || []).map(
|
||||
(user) => ({
|
||||
id: user.id,
|
||||
avatar: user.avatar,
|
||||
})
|
||||
),
|
||||
}}
|
||||
size="sm"
|
||||
/>
|
||||
{selectedSupplier?.id === supplier.id && (
|
||||
<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>
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
</Card>
|
||||
))}
|
||||
<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,151 +459,220 @@ 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) => {
|
||||
const selectedQuantity = getSelectedQuantity(
|
||||
product.id
|
||||
);
|
||||
return (
|
||||
<Card
|
||||
key={product.id}
|
||||
className="bg-white/10 backdrop-blur border-white/20 p-4"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{/* Изображение товара */}
|
||||
<div className="aspect-square bg-white/5 rounded-lg overflow-hidden">
|
||||
{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"
|
||||
/>
|
||||
) : product.mainImage ? (
|
||||
<Image
|
||||
src={product.mainImage}
|
||||
alt={product.name}
|
||||
width={200}
|
||||
height={200}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<Wrench className="h-12 w-12 text-white/40" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<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={`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-2 h-full flex flex-col">
|
||||
{/* Изображение товара */}
|
||||
<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={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={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-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">
|
||||
{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>
|
||||
)}
|
||||
<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">
|
||||
{formatCurrency(product.price)}
|
||||
{product.unit && (
|
||||
<span className="text-white/60 text-sm ml-1">
|
||||
/ {product.unit}
|
||||
{/* Информация о товаре */}
|
||||
<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-purple-500/20 text-purple-300 border-purple-500/30 text-xs px-2 py-1">
|
||||
{product.category.name.slice(0, 10)}
|
||||
</Badge>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-green-400 font-semibold text-sm">
|
||||
{formatCurrency(product.price)}
|
||||
</span>
|
||||
{product.stock && (
|
||||
<span className="text-white/60 text-xs">
|
||||
{product.stock}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{product.stock && (
|
||||
<span className="text-white/60 text-sm">
|
||||
В наличии: {product.stock}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Управление количеством */}
|
||||
<div className="flex flex-col items-center space-y-2 mt-auto">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
updateConsumableQuantity(
|
||||
product.id,
|
||||
Math.max(0, selectedQuantity - 1)
|
||||
)
|
||||
}
|
||||
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-3 w-3" />
|
||||
</Button>
|
||||
<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,
|
||||
Math.min(selectedQuantity + 1, 99999)
|
||||
)
|
||||
}
|
||||
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-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{selectedQuantity > 0 && (
|
||||
<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>
|
||||
|
||||
{/* Управление количеством */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
updateConsumableQuantity(
|
||||
product.id,
|
||||
Math.max(0, selectedQuantity - 1)
|
||||
)
|
||||
}
|
||||
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
disabled={selectedQuantity === 0}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-white font-medium w-8 text-center">
|
||||
{selectedQuantity}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
updateConsumableQuantity(
|
||||
product.id,
|
||||
selectedQuantity + 1
|
||||
)
|
||||
}
|
||||
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{selectedQuantity > 0 && (
|
||||
<span className="text-green-400 font-medium text-sm">
|
||||
{formatCurrency(
|
||||
product.price * selectedQuantity
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
{/* 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">
|
||||
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||
Корзина ({getTotalItems()} шт)
|
||||
</h3>
|
||||
<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">
|
||||
Дата поставки:
|
||||
</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={deliveryDate}
|
||||
onChange={(e) => setDeliveryDate(e.target.value)}
|
||||
className="bg-white/10 border-white/20 text-white"
|
||||
min={new Date().toISOString().split("T")[0]}
|
||||
<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 className="flex items-center justify-between mb-4">
|
||||
<span className="text-white font-semibold">Итого:</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"
|
||||
>
|
||||
{isCreatingSupply
|
||||
? "Создание..."
|
||||
: "Создать поставку расходников"}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</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 h-8 text-sm"
|
||||
min={new Date().toISOString().split("T")[0]}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<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 ||
|
||||
!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 ? "Создание..." : "Создать поставку"}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user