feat(components): добавить модульную V2 систему создания поставок расходников
Создана новая модульная архитектура компонентов для создания поставок расходников фулфилмента с улучшенной организацией кода и разделением ответственности. ESLint warnings исправим в отдельном коммите для cleaner history. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Veronika Smirnova
@ -0,0 +1,307 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 📦 БЛОК РАСХОДНИКОВ
|
||||||
|
// =============================================================================
|
||||||
|
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в монолитной версии!
|
||||||
|
// Все gradients, glassmorphism, анимации, индикаторы остатков сохранены
|
||||||
|
|
||||||
|
import { Search, Wrench, Package, Plus, Minus } from 'lucide-react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
|
||||||
|
import type { FulfillmentConsumableProduct } from '../types'
|
||||||
|
|
||||||
|
import type { ConsumablesBlockProps } from './types'
|
||||||
|
|
||||||
|
export function ConsumablesBlock({
|
||||||
|
selectedSupplier,
|
||||||
|
products,
|
||||||
|
productsLoading,
|
||||||
|
productSearchQuery,
|
||||||
|
getSelectedQuantity,
|
||||||
|
onProductSearchChange,
|
||||||
|
onUpdateQuantity,
|
||||||
|
formatCurrency,
|
||||||
|
}: ConsumablesBlockProps) {
|
||||||
|
return (
|
||||||
|
<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-4 w-4 mr-2" />
|
||||||
|
Расходники для фулфилмента
|
||||||
|
{selectedSupplier && (
|
||||||
|
<span className="text-white/60 text-xs font-normal ml-2 truncate">
|
||||||
|
- {selectedSupplier.name || selectedSupplier.fullName}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
{selectedSupplier && (
|
||||||
|
<div className="relative">
|
||||||
|
<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) => onProductSearchChange(e.target.value)}
|
||||||
|
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-7 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 flex-1 overflow-y-auto">
|
||||||
|
{!selectedSupplier ? (
|
||||||
|
<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-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>
|
||||||
|
) : products.length === 0 ? (
|
||||||
|
<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-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-3">
|
||||||
|
{products.map((product: FulfillmentConsumableProduct, index: number) => {
|
||||||
|
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">
|
||||||
|
{/* 🚫 ОВЕРЛЕЙ НЕДОСТУПНОСТИ */}
|
||||||
|
{(() => {
|
||||||
|
const totalStock = product.stock || (product as any).quantity || 0
|
||||||
|
const orderedStock = (product as any).ordered || 0
|
||||||
|
const availableStock = totalStock - orderedStock
|
||||||
|
|
||||||
|
if (availableStock <= 0) {
|
||||||
|
return (
|
||||||
|
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-10">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-red-400 font-bold text-xs">НЕТ В НАЛИЧИИ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
})()}
|
||||||
|
{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 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>
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
{/* 🚨 ИНДИКАТОР НИЗКИХ ОСТАТКОВ согласно правилам (раздел 6.3) */}
|
||||||
|
{(() => {
|
||||||
|
const totalStock = product.stock || product.quantity || 0
|
||||||
|
const orderedStock = product.ordered || 0
|
||||||
|
const availableStock = totalStock - orderedStock
|
||||||
|
|
||||||
|
if (availableStock <= 0) {
|
||||||
|
return (
|
||||||
|
<Badge className="bg-red-500/30 text-red-300 border-red-500/50 text-xs px-2 py-1 animate-pulse">
|
||||||
|
Нет в наличии
|
||||||
|
</Badge>
|
||||||
|
)
|
||||||
|
} else if (availableStock <= 10) {
|
||||||
|
return (
|
||||||
|
<Badge className="bg-yellow-500/30 text-yellow-300 border-yellow-500/50 text-xs px-2 py-1">
|
||||||
|
Мало остатков
|
||||||
|
</Badge>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-green-400 font-semibold text-sm">
|
||||||
|
{formatCurrency(product.price)}
|
||||||
|
</span>
|
||||||
|
{/* 📊 АКТУАЛЬНЫЙ ОСТАТОК согласно правилам (раздел 6.4.2) */}
|
||||||
|
<div className="text-right">
|
||||||
|
{(() => {
|
||||||
|
const totalStock = product.stock || product.quantity || 0
|
||||||
|
const orderedStock = product.ordered || 0
|
||||||
|
const availableStock = totalStock - orderedStock
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-end">
|
||||||
|
<span
|
||||||
|
className={`text-xs font-medium ${
|
||||||
|
availableStock <= 0
|
||||||
|
? 'text-red-400'
|
||||||
|
: availableStock <= 10
|
||||||
|
? 'text-yellow-400'
|
||||||
|
: 'text-white/80'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Доступно: {availableStock}
|
||||||
|
</span>
|
||||||
|
{orderedStock > 0 && (
|
||||||
|
<span className="text-white/40 text-xs">Заказано: {orderedStock}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Управление количеством */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 mt-auto">
|
||||||
|
{(() => {
|
||||||
|
const totalStock = product.stock || (product as any).quantity || 0
|
||||||
|
const orderedStock = (product as any).ordered || 0
|
||||||
|
const availableStock = totalStock - orderedStock
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() =>
|
||||||
|
onUpdateQuantity(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)
|
||||||
|
|
||||||
|
// Ограничиваем значение максимумом доступного остатка
|
||||||
|
const clampedValue = Math.min(numericValue, availableStock, 99999)
|
||||||
|
|
||||||
|
onUpdateQuantity(product.id, clampedValue)
|
||||||
|
}}
|
||||||
|
onBlur={(e) => {
|
||||||
|
// При потере фокуса, если поле пустое, устанавливаем 0
|
||||||
|
if (e.target.value === '') {
|
||||||
|
onUpdateQuantity(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={() =>
|
||||||
|
onUpdateQuantity(
|
||||||
|
product.id,
|
||||||
|
Math.min(selectedQuantity + 1, availableStock, 99999),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className={`h-6 w-6 p-0 rounded-full transition-all duration-300 ${
|
||||||
|
selectedQuantity >= availableStock || availableStock <= 0
|
||||||
|
? 'text-white/30 cursor-not-allowed'
|
||||||
|
: 'text-white/60 hover:text-white hover:bg-white/20'
|
||||||
|
}`}
|
||||||
|
disabled={selectedQuantity >= availableStock || availableStock <= 0}
|
||||||
|
title={
|
||||||
|
availableStock <= 0
|
||||||
|
? 'Товар отсутствует на складе'
|
||||||
|
: selectedQuantity >= availableStock
|
||||||
|
? `Максимум доступно: ${availableStock}`
|
||||||
|
: 'Увеличить количество'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 📄 БЛОК ЗАГОЛОВКА СТРАНИЦЫ
|
||||||
|
// =============================================================================
|
||||||
|
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в монолитной версии!
|
||||||
|
|
||||||
|
import { ArrowLeft } from 'lucide-react'
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
||||||
|
import type { PageHeaderProps } from './types'
|
||||||
|
|
||||||
|
export function PageHeader({ onBack }: PageHeaderProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between mb-3 flex-shrink-0">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-bold text-white mb-1">Создание поставки расходников фулфилмента</h1>
|
||||||
|
<p className="text-white/60 text-sm">
|
||||||
|
Выберите поставщика и добавьте расходники в заказ для вашего фулфилмент-центра
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={onBack}
|
||||||
|
className="text-white/60 hover:text-white hover:bg-white/10 text-sm"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||||
|
Назад
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,143 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🛒 БЛОК КОРЗИНЫ
|
||||||
|
// =============================================================================
|
||||||
|
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в монолитной версии!
|
||||||
|
// Все gradients, glassmorphism, анимации сохранены
|
||||||
|
|
||||||
|
import { ShoppingCart } from 'lucide-react'
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
|
||||||
|
import type { ShoppingCartBlockProps } from './types'
|
||||||
|
|
||||||
|
export function ShoppingCartBlock({
|
||||||
|
selectedConsumables,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
selectedLogistics,
|
||||||
|
logisticsPartners,
|
||||||
|
isCreatingSupply,
|
||||||
|
getTotalAmount,
|
||||||
|
getTotalItems,
|
||||||
|
formatCurrency,
|
||||||
|
onUpdateQuantity,
|
||||||
|
onSetDeliveryDate,
|
||||||
|
onSetNotes,
|
||||||
|
onSetLogistics,
|
||||||
|
onCreateSupply,
|
||||||
|
}: ShoppingCartBlockProps) {
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{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>
|
||||||
|
</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-xs font-medium truncate">{consumable.name}</p>
|
||||||
|
<p className="text-white/60 text-xs">
|
||||||
|
{formatCurrency(consumable.price)} × {consumable.selectedQuantity}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-green-400 font-medium text-xs">
|
||||||
|
{formatCurrency(consumable.price * consumable.selectedQuantity)}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onUpdateQuantity(consumable.id, 0)}
|
||||||
|
className="h-5 w-5 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="border-t border-white/20 pt-3">
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="text-white/60 text-xs mb-1 block">Дата поставки:</label>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
value={deliveryDate}
|
||||||
|
onChange={(e) => onSetDeliveryDate(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="mb-3">
|
||||||
|
<label className="text-white/60 text-xs mb-1 block">Логистика (опционально):</label>
|
||||||
|
<div className="relative">
|
||||||
|
<select
|
||||||
|
value={selectedLogistics?.id || ''}
|
||||||
|
onChange={(e) => {
|
||||||
|
const logisticsId = e.target.value
|
||||||
|
const logistics = logisticsPartners.find((p: any) => p.id === logisticsId)
|
||||||
|
onSetLogistics(logistics || null)
|
||||||
|
}}
|
||||||
|
className="w-full bg-white/10 border border-white/20 rounded-md px-3 py-2 text-white text-sm focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent appearance-none"
|
||||||
|
>
|
||||||
|
<option value="" className="bg-gray-800 text-white">
|
||||||
|
Выберите логистику
|
||||||
|
</option>
|
||||||
|
{logisticsPartners.map((partner: any) => (
|
||||||
|
<option key={partner.id} value={partner.id} className="bg-gray-800 text-white">
|
||||||
|
{partner.name || partner.fullName || partner.inn}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
|
||||||
|
<svg className="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Заметки */}
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="text-white/60 text-xs mb-1 block">Заметки (необязательно):</label>
|
||||||
|
<textarea
|
||||||
|
value={notes}
|
||||||
|
onChange={(e) => onSetNotes(e.target.value)}
|
||||||
|
placeholder="Дополнительная информация о поставке"
|
||||||
|
rows={3}
|
||||||
|
className="w-full bg-white/10 border border-white/20 rounded-md px-3 py-2 text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent resize-none"
|
||||||
|
/>
|
||||||
|
</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={onCreateSupply}
|
||||||
|
disabled={isCreatingSupply || !deliveryDate || 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,143 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🏢 БЛОК ПОСТАВЩИКОВ
|
||||||
|
// =============================================================================
|
||||||
|
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в монолитной версии!
|
||||||
|
// Все gradients, glassmorphism, анимации сохранены
|
||||||
|
|
||||||
|
import { Building2, Search } from 'lucide-react'
|
||||||
|
|
||||||
|
import { OrganizationAvatar } from '@/components/market/organization-avatar'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
|
||||||
|
import type { FulfillmentConsumableSupplier } from '../types'
|
||||||
|
|
||||||
|
import type { SuppliersBlockProps } from './types'
|
||||||
|
|
||||||
|
export function SuppliersBlock({
|
||||||
|
suppliers,
|
||||||
|
filteredSuppliers,
|
||||||
|
selectedSupplier,
|
||||||
|
searchQuery,
|
||||||
|
loading,
|
||||||
|
onSelectSupplier,
|
||||||
|
onSearchChange,
|
||||||
|
}: SuppliersBlockProps) {
|
||||||
|
return (
|
||||||
|
<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 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) => onSearchChange(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={() => onSelectSupplier(null)}
|
||||||
|
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>
|
||||||
|
|
||||||
|
<div className="px-3 pb-3 h-24 overflow-hidden">
|
||||||
|
{loading ? (
|
||||||
|
<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-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="flex gap-2 h-full pt-1">
|
||||||
|
{filteredSuppliers.slice(0, 7).map((supplier: FulfillmentConsumableSupplier, index: number) => (
|
||||||
|
<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={() => onSelectSupplier(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>
|
||||||
|
</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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🧩 UI BLOCKS ДЛЯ СИСТЕМЫ СОЗДАНИЯ ПОСТАВОК РАСХОДНИКОВ ФУЛФИЛМЕНТА V2
|
||||||
|
// =============================================================================
|
||||||
|
// Эти блоки содержат весь UI, экстрагированный из монолитного компонента
|
||||||
|
// с сохранением ТОЧНО ТАКОГО ЖЕ визуала в соответствии с модульной архитектурой
|
||||||
|
|
||||||
|
export { PageHeader } from './PageHeader'
|
||||||
|
export { SuppliersBlock } from './SuppliersBlock'
|
||||||
|
export { ConsumablesBlock } from './ConsumablesBlock'
|
||||||
|
export { ShoppingCartBlock } from './ShoppingCartBlock'
|
||||||
|
|
||||||
|
// 🎯 Экспорт типов для блоков
|
||||||
|
export type {
|
||||||
|
PageHeaderProps,
|
||||||
|
SuppliersBlockProps,
|
||||||
|
ConsumablesBlockProps,
|
||||||
|
ShoppingCartBlockProps,
|
||||||
|
} from './types'
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🛒 БЛОК КОРЗИНЫ ДЛЯ СЕЛЛЕРА
|
||||||
|
// =============================================================================
|
||||||
|
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в оригинале!
|
||||||
|
// Отличие - показываем выбранный фулфилмент-центр и другие лейблы
|
||||||
|
|
||||||
|
import { ShoppingCart, Building2 } from 'lucide-react'
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
|
||||||
|
import type { SellerShoppingCartBlockProps } from '../types/seller-types'
|
||||||
|
|
||||||
|
export function SellerShoppingCartBlock({
|
||||||
|
selectedConsumables,
|
||||||
|
selectedFulfillment,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
selectedLogistics,
|
||||||
|
logisticsPartners,
|
||||||
|
isCreatingSupply,
|
||||||
|
getTotalAmount,
|
||||||
|
getTotalItems,
|
||||||
|
formatCurrency,
|
||||||
|
onUpdateQuantity,
|
||||||
|
onSetDeliveryDate,
|
||||||
|
onSetNotes,
|
||||||
|
onSetLogistics,
|
||||||
|
onCreateSupply,
|
||||||
|
}: SellerShoppingCartBlockProps) {
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 🏢 ИНФОРМАЦИЯ О ВЫБРАННОМ ФУЛФИЛМЕНТ-ЦЕНТРЕ */}
|
||||||
|
{selectedFulfillment && (
|
||||||
|
<div className="mb-3 p-2 bg-white/5 rounded-lg border border-green-400/20">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Building2 className="h-4 w-4 text-green-400" />
|
||||||
|
<div>
|
||||||
|
<p className="text-green-400 text-xs font-medium">Доставка в:</p>
|
||||||
|
<p className="text-white text-xs">
|
||||||
|
{selectedFulfillment.name || selectedFulfillment.fullName}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{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-1">Выберите поставщика и</p>
|
||||||
|
<p className="text-white/40 text-xs">добавьте расходники для заказа</p>
|
||||||
|
</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-xs font-medium truncate">{consumable.name}</p>
|
||||||
|
<p className="text-white/60 text-xs">
|
||||||
|
{formatCurrency(consumable.price)} × {consumable.selectedQuantity}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-green-400 font-medium text-xs">
|
||||||
|
{formatCurrency(consumable.price * consumable.selectedQuantity)}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onUpdateQuantity(consumable.id, 0)}
|
||||||
|
className="h-5 w-5 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="border-t border-white/20 pt-3">
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="text-white/60 text-xs mb-1 block">Дата доставки в фулфилмент:</label>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
value={deliveryDate}
|
||||||
|
onChange={(e) => onSetDeliveryDate(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="mb-3">
|
||||||
|
<label className="text-white/60 text-xs mb-1 block">Логистика (опционально):</label>
|
||||||
|
<div className="relative">
|
||||||
|
<select
|
||||||
|
value={selectedLogistics?.id || ''}
|
||||||
|
onChange={(e) => {
|
||||||
|
const logisticsId = e.target.value
|
||||||
|
const logistics = logisticsPartners.find((p: any) => p.id === logisticsId)
|
||||||
|
onSetLogistics(logistics || null)
|
||||||
|
}}
|
||||||
|
className="w-full bg-white/10 border border-white/20 rounded-md px-3 py-2 text-white text-sm focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent appearance-none"
|
||||||
|
>
|
||||||
|
<option value="" className="bg-gray-800 text-white">
|
||||||
|
Выберите логистику
|
||||||
|
</option>
|
||||||
|
{logisticsPartners.map((partner: any) => (
|
||||||
|
<option key={partner.id} value={partner.id} className="bg-gray-800 text-white">
|
||||||
|
{partner.name || partner.fullName || partner.inn}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
|
||||||
|
<svg className="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Заметки */}
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="text-white/60 text-xs mb-1 block">Заметки для поставки (необязательно):</label>
|
||||||
|
<textarea
|
||||||
|
value={notes}
|
||||||
|
onChange={(e) => onSetNotes(e.target.value)}
|
||||||
|
placeholder="Дополнительная информация о заказе для поставщика и фулфилмента"
|
||||||
|
rows={3}
|
||||||
|
className="w-full bg-white/10 border border-white/20 rounded-md px-3 py-2 text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent resize-none"
|
||||||
|
/>
|
||||||
|
</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={onCreateSupply}
|
||||||
|
disabled={isCreatingSupply || !deliveryDate || selectedConsumables.length === 0 || !selectedFulfillment}
|
||||||
|
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>
|
||||||
|
|
||||||
|
{/* Подсказка для селлера */}
|
||||||
|
{selectedConsumables.length > 0 && !selectedFulfillment && (
|
||||||
|
<p className="text-amber-400 text-xs mt-2 text-center">
|
||||||
|
Выберите фулфилмент-центр для доставки
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🏪 БЛОК ВЫБОРА ПОСТАВЩИКОВ И ФУЛФИЛМЕНТ-ЦЕНТРОВ ДЛЯ СЕЛЛЕРА
|
||||||
|
// =============================================================================
|
||||||
|
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в оригинале!
|
||||||
|
// Отличие только в логике - селлер выбирает и поставщика, и фулфилмент-центр
|
||||||
|
|
||||||
|
import { Building2, Search } from 'lucide-react'
|
||||||
|
|
||||||
|
import { OrganizationAvatar } from '@/components/market/organization-avatar'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
|
||||||
|
import type { SellerSuppliersBlockProps } from '../types/seller-types'
|
||||||
|
|
||||||
|
export function SellerSuppliersBlock({
|
||||||
|
suppliers,
|
||||||
|
fulfillmentCenters,
|
||||||
|
filteredSuppliers,
|
||||||
|
filteredFulfillmentCenters,
|
||||||
|
selectedSupplier,
|
||||||
|
selectedFulfillment,
|
||||||
|
searchQuery,
|
||||||
|
loading,
|
||||||
|
onSelectSupplier,
|
||||||
|
onSelectFulfillment,
|
||||||
|
onSearchChange,
|
||||||
|
}: SellerSuppliersBlockProps) {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-3 flex-shrink-0">
|
||||||
|
<h3 className="text-white font-semibold mb-3 flex items-center text-sm">
|
||||||
|
<Building2 className="h-4 w-4 mr-2" />
|
||||||
|
Партнеры ({suppliers.length + fulfillmentCenters.length})
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* 🔍 Поиск партнеров */}
|
||||||
|
<div className="relative mb-3">
|
||||||
|
<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) => onSearchChange(e.target.value)}
|
||||||
|
className="pl-10 bg-white/10 border-white/20 text-white placeholder-white/40 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex justify-center py-4">
|
||||||
|
<div className="animate-pulse text-white/60 text-sm">Загрузка партнеров...</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
|
||||||
|
{/* 🏪 СЕКЦИЯ ПОСТАВЩИКОВ */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/80 font-medium text-xs mb-2 uppercase tracking-wide">
|
||||||
|
Поставщики расходников ({filteredSuppliers.length})
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid gap-2 max-h-48 overflow-y-auto">
|
||||||
|
{filteredSuppliers.length === 0 ? (
|
||||||
|
<div className="text-center py-4">
|
||||||
|
<Building2 className="h-8 w-8 text-white/20 mx-auto mb-2" />
|
||||||
|
<p className="text-white/40 text-xs">
|
||||||
|
{searchQuery ? 'Поставщики не найдены' : 'Нет поставщиков'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
filteredSuppliers.map((supplier, index) => (
|
||||||
|
<div
|
||||||
|
key={supplier.id}
|
||||||
|
onClick={() => onSelectSupplier(supplier)}
|
||||||
|
className={`
|
||||||
|
p-3 rounded-lg cursor-pointer transition-all duration-200 border
|
||||||
|
${
|
||||||
|
selectedSupplier?.id === supplier.id
|
||||||
|
? 'bg-gradient-to-br from-blue-500/30 to-purple-500/30 border-blue-400/50 shadow-lg'
|
||||||
|
: 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
style={{
|
||||||
|
animationDelay: `${index * 50}ms`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<OrganizationAvatar
|
||||||
|
organization={supplier}
|
||||||
|
size="sm"
|
||||||
|
className={
|
||||||
|
selectedSupplier?.id === supplier.id
|
||||||
|
? 'ring-2 ring-blue-400/50'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-white font-medium text-sm truncate">
|
||||||
|
{supplier.name || supplier.fullName || supplier.inn}
|
||||||
|
</p>
|
||||||
|
<p className="text-white/60 text-xs">ИНН: {supplier.inn}</p>
|
||||||
|
{supplier.address && (
|
||||||
|
<p className="text-white/40 text-xs truncate">{supplier.address}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{selectedSupplier?.id === supplier.id && (
|
||||||
|
<div className="bg-blue-500/20 rounded-full p-1">
|
||||||
|
<div className="h-2 w-2 bg-blue-400 rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 🏢 СЕКЦИЯ ФУЛФИЛМЕНТ-ЦЕНТРОВ */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/80 font-medium text-xs mb-2 uppercase tracking-wide">
|
||||||
|
Фулфилмент-центры ({filteredFulfillmentCenters.length})
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid gap-2 max-h-48 overflow-y-auto">
|
||||||
|
{filteredFulfillmentCenters.length === 0 ? (
|
||||||
|
<div className="text-center py-4">
|
||||||
|
<Building2 className="h-8 w-8 text-white/20 mx-auto mb-2" />
|
||||||
|
<p className="text-white/40 text-xs">
|
||||||
|
{searchQuery ? 'Фулфилмент-центры не найдены' : 'Нет фулфилмент-центров'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
filteredFulfillmentCenters.map((fulfillment, index) => (
|
||||||
|
<div
|
||||||
|
key={fulfillment.id}
|
||||||
|
onClick={() => onSelectFulfillment(fulfillment)}
|
||||||
|
className={`
|
||||||
|
p-3 rounded-lg cursor-pointer transition-all duration-200 border
|
||||||
|
${
|
||||||
|
selectedFulfillment?.id === fulfillment.id
|
||||||
|
? 'bg-gradient-to-br from-green-500/30 to-emerald-500/30 border-green-400/50 shadow-lg'
|
||||||
|
: 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
style={{
|
||||||
|
animationDelay: `${(index + filteredSuppliers.length) * 50}ms`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<OrganizationAvatar
|
||||||
|
organization={fulfillment}
|
||||||
|
size="sm"
|
||||||
|
className={
|
||||||
|
selectedFulfillment?.id === fulfillment.id
|
||||||
|
? 'ring-2 ring-green-400/50'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-white font-medium text-sm truncate">
|
||||||
|
{fulfillment.name || fulfillment.fullName || fulfillment.inn}
|
||||||
|
</p>
|
||||||
|
<p className="text-white/60 text-xs">ИНН: {fulfillment.inn}</p>
|
||||||
|
{fulfillment.address && (
|
||||||
|
<p className="text-white/40 text-xs truncate">{fulfillment.address}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{selectedFulfillment?.id === fulfillment.id && (
|
||||||
|
<div className="bg-green-500/20 rounded-full p-1">
|
||||||
|
<div className="h-2 w-2 bg-green-400 rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 📦 ЭКСПОРТ СЕЛЛЕРСКИХ UI БЛОКОВ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export { SellerSuppliersBlock } from './SellerSuppliersBlock'
|
||||||
|
export { SellerShoppingCartBlock } from './SellerShoppingCartBlock'
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🧩 ТИПЫ ДЛЯ UI BLOCKS
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FulfillmentConsumableSupplier,
|
||||||
|
FulfillmentConsumableProduct,
|
||||||
|
SelectedFulfillmentConsumable,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
// 📄 ТИПЫ ДЛЯ ЗАГОЛОВКА СТРАНИЦЫ
|
||||||
|
export interface PageHeaderProps {
|
||||||
|
onBack: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🏢 ТИПЫ ДЛЯ БЛОКА ПОСТАВЩИКОВ
|
||||||
|
export interface SuppliersBlockProps {
|
||||||
|
suppliers: FulfillmentConsumableSupplier[]
|
||||||
|
filteredSuppliers: FulfillmentConsumableSupplier[]
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier | null
|
||||||
|
searchQuery: string
|
||||||
|
loading: boolean
|
||||||
|
onSelectSupplier: (supplier: FulfillmentConsumableSupplier | null) => void
|
||||||
|
onSearchChange: (query: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
// 📦 ТИПЫ ДЛЯ БЛОКА РАСХОДНИКОВ
|
||||||
|
export interface ConsumablesBlockProps {
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier | null
|
||||||
|
products: FulfillmentConsumableProduct[]
|
||||||
|
productsLoading: boolean
|
||||||
|
productSearchQuery: string
|
||||||
|
getSelectedQuantity: (productId: string) => number
|
||||||
|
onProductSearchChange: (query: string) => void
|
||||||
|
onUpdateQuantity: (productId: string, quantity: number) => void
|
||||||
|
formatCurrency: (amount: number) => string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🛒 ТИПЫ ДЛЯ БЛОКА КОРЗИНЫ
|
||||||
|
export interface ShoppingCartBlockProps {
|
||||||
|
selectedConsumables: SelectedFulfillmentConsumable[]
|
||||||
|
deliveryDate: string
|
||||||
|
notes: string
|
||||||
|
selectedLogistics: FulfillmentConsumableSupplier | null
|
||||||
|
logisticsPartners: FulfillmentConsumableSupplier[]
|
||||||
|
isCreatingSupply: boolean
|
||||||
|
getTotalAmount: () => number
|
||||||
|
getTotalItems: () => number
|
||||||
|
formatCurrency: (amount: number) => string
|
||||||
|
onUpdateQuantity: (productId: string, quantity: number) => void
|
||||||
|
onSetDeliveryDate: (date: string) => void
|
||||||
|
onSetNotes: (notes: string) => void
|
||||||
|
onSetLogistics: (logistics: FulfillmentConsumableSupplier | null) => void
|
||||||
|
onCreateSupply: () => void
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🔧 BUSINESS HOOKS ДЛЯ СИСТЕМЫ СОЗДАНИЯ ПОСТАВОК РАСХОДНИКОВ ФУЛФИЛМЕНТА V2
|
||||||
|
// =============================================================================
|
||||||
|
// Эти хуки содержат всю бизнес-логику, экстрагированную из монолитного компонента
|
||||||
|
// в соответствии с правилами модульной архитектуры MODULAR_ARCHITECTURE_PATTERN.md
|
||||||
|
|
||||||
|
export { useSupplierData } from './useSupplierData'
|
||||||
|
export { useProductData } from './useProductData'
|
||||||
|
export { useSupplyForm } from './useSupplyForm'
|
||||||
|
export { useQuantityManagement } from './useQuantityManagement'
|
||||||
|
export { useSupplyCreation } from './useSupplyCreation'
|
||||||
|
export { useCurrencyFormatting } from './useCurrencyFormatting'
|
||||||
|
export { useStockValidation } from './useStockValidation'
|
||||||
|
|
||||||
|
// 🎯 Экспорт типов для хуков
|
||||||
|
export type {
|
||||||
|
UseSupplierDataReturn,
|
||||||
|
UseProductDataReturn,
|
||||||
|
UseSupplyFormReturn,
|
||||||
|
UseQuantityManagementReturn,
|
||||||
|
UseSupplyCreationReturn,
|
||||||
|
} from './types'
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 📦 ЭКСПОРТ СЕЛЛЕРСКИХ БИЗНЕС ХУКОВ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export { useSellerSupplyCreation } from './useSellerSupplyCreation'
|
||||||
|
export { useSellerSupplyForm } from './useSellerSupplyForm'
|
||||||
|
export { useSellerSupplierData } from './useSellerSupplierData'
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🏢 ХУК ДЛЯ ПОЛУЧЕНИЯ ДАННЫХ ПОСТАВЩИКОВ И ФУЛФИЛМЕНТ-ЦЕНТРОВ (ДЛЯ СЕЛЛЕРА)
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useQuery } from '@apollo/client'
|
||||||
|
import { useMemo } from 'react'
|
||||||
|
|
||||||
|
import { GET_MY_COUNTERPARTIES } from '@/graphql/queries'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
CounterpartiesData,
|
||||||
|
SellerConsumableSupplier,
|
||||||
|
UseSupplierDataReturn,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
interface UseSellerSupplierDataProps {
|
||||||
|
searchQuery: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UseSellerSupplierDataReturn {
|
||||||
|
// Поставщики (WHOLESALE)
|
||||||
|
suppliers: SellerConsumableSupplier[]
|
||||||
|
filteredSuppliers: SellerConsumableSupplier[]
|
||||||
|
|
||||||
|
// Фулфилмент-центры (FULFILLMENT)
|
||||||
|
fulfillmentCenters: SellerConsumableSupplier[]
|
||||||
|
filteredFulfillmentCenters: SellerConsumableSupplier[]
|
||||||
|
|
||||||
|
// Логистические партнеры (LOGIST)
|
||||||
|
logisticsPartners: SellerConsumableSupplier[]
|
||||||
|
|
||||||
|
// Состояние загрузки и ошибки
|
||||||
|
loading: boolean
|
||||||
|
error: Error | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSellerSupplierData({
|
||||||
|
searchQuery,
|
||||||
|
}: UseSellerSupplierDataProps): UseSellerSupplierDataReturn {
|
||||||
|
|
||||||
|
// 🔄 ЗАГРУЗКА КОНТРАГЕНТОВ
|
||||||
|
const { data, loading, error } = useQuery<CounterpartiesData>(GET_MY_COUNTERPARTIES)
|
||||||
|
|
||||||
|
// 📊 МЕМОИЗИРОВАННАЯ ОБРАБОТКА ДАННЫХ
|
||||||
|
const processedData = useMemo(() => {
|
||||||
|
const allPartners = data?.myCounterparties || []
|
||||||
|
|
||||||
|
// 🏪 ПОСТАВЩИКИ (где селлер заказывает товары)
|
||||||
|
const suppliers = allPartners.filter(partner => partner.type === 'WHOLESALE')
|
||||||
|
|
||||||
|
// 🏢 ФУЛФИЛМЕНТ-ЦЕНТРЫ (куда селлер доставляет товары)
|
||||||
|
const fulfillmentCenters = allPartners.filter(partner => partner.type === 'FULFILLMENT')
|
||||||
|
|
||||||
|
// 🚚 ЛОГИСТИЧЕСКИЕ ПАРТНЕРЫ (кто доставляет)
|
||||||
|
const logisticsPartners = allPartners.filter(partner => partner.type === 'LOGIST')
|
||||||
|
|
||||||
|
// 🔍 ФИЛЬТРАЦИЯ ПО ПОИСКУ
|
||||||
|
const searchLower = searchQuery.toLowerCase().trim()
|
||||||
|
|
||||||
|
const filteredSuppliers = searchLower
|
||||||
|
? suppliers.filter(supplier =>
|
||||||
|
supplier.name?.toLowerCase().includes(searchLower) ||
|
||||||
|
supplier.fullName?.toLowerCase().includes(searchLower) ||
|
||||||
|
supplier.inn.includes(searchLower),
|
||||||
|
)
|
||||||
|
: suppliers
|
||||||
|
|
||||||
|
const filteredFulfillmentCenters = searchLower
|
||||||
|
? fulfillmentCenters.filter(ff =>
|
||||||
|
ff.name?.toLowerCase().includes(searchLower) ||
|
||||||
|
ff.fullName?.toLowerCase().includes(searchLower) ||
|
||||||
|
ff.inn.includes(searchLower),
|
||||||
|
)
|
||||||
|
: fulfillmentCenters
|
||||||
|
|
||||||
|
return {
|
||||||
|
suppliers,
|
||||||
|
fulfillmentCenters,
|
||||||
|
logisticsPartners,
|
||||||
|
filteredSuppliers,
|
||||||
|
filteredFulfillmentCenters,
|
||||||
|
}
|
||||||
|
}, [data?.myCounterparties, searchQuery])
|
||||||
|
|
||||||
|
return {
|
||||||
|
...processedData,
|
||||||
|
loading,
|
||||||
|
error: error || null,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🚀 ХУК ДЛЯ СОЗДАНИЯ ПОСТАВКИ СЕЛЛЕРА
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useMutation } from '@apollo/client'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { useState, useCallback } from 'react'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
|
||||||
|
import {
|
||||||
|
CREATE_SELLER_CONSUMABLE_SUPPLY,
|
||||||
|
GET_MY_SELLER_CONSUMABLE_SUPPLIES,
|
||||||
|
} from '@/graphql/queries/seller-consumables-v2'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
SellerConsumableSupplier,
|
||||||
|
SelectedSellerConsumable,
|
||||||
|
SellerSupplyCreationInput,
|
||||||
|
CreateSellerSupplyMutationResponse,
|
||||||
|
UseSellerSupplyCreationReturn,
|
||||||
|
UseSellerSupplyCreationProps,
|
||||||
|
} from '../types/seller-types'
|
||||||
|
|
||||||
|
export function useSellerSupplyCreation({
|
||||||
|
selectedSupplier,
|
||||||
|
selectedFulfillment,
|
||||||
|
selectedConsumables,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
resetForm,
|
||||||
|
}: UseSellerSupplyCreationProps): UseSellerSupplyCreationReturn {
|
||||||
|
const router = useRouter()
|
||||||
|
const [isCreating, setIsCreating] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
// Мутация для создания заказа поставки расходников селлера
|
||||||
|
const [createSupplyMutation] = useMutation<CreateSellerSupplyMutationResponse>(CREATE_SELLER_CONSUMABLE_SUPPLY)
|
||||||
|
|
||||||
|
// Функция создания поставки
|
||||||
|
const createSupply = useCallback(async () => {
|
||||||
|
// 🔍 ВАЛИДАЦИЯ ОБЯЗАТЕЛЬНЫХ ПОЛЕЙ ДЛЯ СЕЛЛЕРА
|
||||||
|
if (!selectedSupplier || !selectedFulfillment || selectedConsumables.length === 0 || !deliveryDate) {
|
||||||
|
const errorMessage = 'Заполните все обязательные поля: поставщик, фулфилмент-центр, расходники и дата доставки'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsCreating(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 📊 ПОДГОТОВКА ДАННЫХ ДЛЯ СОЗДАНИЯ ПОСТАВКИ
|
||||||
|
const input: SellerSupplyCreationInput = {
|
||||||
|
fulfillmentCenterId: selectedFulfillment.id, // 🏢 Куда доставлять
|
||||||
|
supplierId: selectedSupplier.id, // 🏪 От кого заказывать
|
||||||
|
requestedDeliveryDate: deliveryDate, // 📅 Когда нужно
|
||||||
|
items: selectedConsumables.map((consumable) => ({
|
||||||
|
productId: consumable.id,
|
||||||
|
requestedQuantity: consumable.selectedQuantity,
|
||||||
|
})),
|
||||||
|
notes: notes || undefined,
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('🚀 Создание поставки селлера с данными:', input)
|
||||||
|
|
||||||
|
// 🔄 ВЫПОЛНЕНИЕ МУТАЦИИ
|
||||||
|
const result = await createSupplyMutation({
|
||||||
|
variables: { input },
|
||||||
|
refetchQueries: [
|
||||||
|
{
|
||||||
|
query: GET_MY_SELLER_CONSUMABLE_SUPPLIES,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
awaitRefetchQueries: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
const response = result.data?.createSellerConsumableSupply
|
||||||
|
|
||||||
|
if (response?.success) {
|
||||||
|
// ✅ УСПЕШНОЕ СОЗДАНИЕ
|
||||||
|
toast.success(response.message || 'Поставка успешно создана')
|
||||||
|
|
||||||
|
// Очищаем форму
|
||||||
|
resetForm()
|
||||||
|
|
||||||
|
// Переходим к списку поставок селлера
|
||||||
|
// TODO: Создать маршрут для списка поставок селлера
|
||||||
|
// router.push('/seller-supplies')
|
||||||
|
|
||||||
|
console.log('✅ Поставка селлера создана:', response.supplyOrder)
|
||||||
|
} else {
|
||||||
|
// ❌ ОШИБКА ИЗ СЕРВЕРА
|
||||||
|
const errorMessage = response?.message || 'Ошибка создания поставки'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
// ❌ ОШИБКА ВЫПОЛНЕНИЯ
|
||||||
|
console.error('❌ Ошибка создания поставки селлера:', err)
|
||||||
|
|
||||||
|
const errorMessage = err?.message || err?.graphQLErrors?.[0]?.message || 'Неизвестная ошибка при создании поставки'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
} finally {
|
||||||
|
setIsCreating(false)
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
selectedSupplier,
|
||||||
|
selectedFulfillment,
|
||||||
|
selectedConsumables,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
createSupplyMutation,
|
||||||
|
resetForm,
|
||||||
|
router,
|
||||||
|
])
|
||||||
|
|
||||||
|
return {
|
||||||
|
createSupply,
|
||||||
|
isCreating,
|
||||||
|
error,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 📋 ХУК ДЛЯ УПРАВЛЕНИЯ ФОРМОЙ ПОСТАВКИ СЕЛЛЕРА
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useState, useCallback } from 'react'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
SellerConsumableSupplier,
|
||||||
|
SelectedSellerConsumable,
|
||||||
|
UseSellerSupplyFormReturn,
|
||||||
|
} from '../types/seller-types'
|
||||||
|
|
||||||
|
export function useSellerSupplyForm(): UseSellerSupplyFormReturn {
|
||||||
|
// 🏪 СОСТОЯНИЕ ПОСТАВЩИКА
|
||||||
|
const [selectedSupplier, setSelectedSupplier] = useState<SellerConsumableSupplier | null>(null)
|
||||||
|
|
||||||
|
// 🏢 СОСТОЯНИЕ ФУЛФИЛМЕНТ-ЦЕНТРА (специфично для селлера)
|
||||||
|
const [selectedFulfillment, setSelectedFulfillment] = useState<SellerConsumableSupplier | null>(null)
|
||||||
|
|
||||||
|
// 🚚 СОСТОЯНИЕ ЛОГИСТИКИ
|
||||||
|
const [selectedLogistics, setSelectedLogistics] = useState<SellerConsumableSupplier | null>(null)
|
||||||
|
|
||||||
|
// 📦 СОСТОЯНИЕ ВЫБРАННЫХ РАСХОДНИКОВ
|
||||||
|
const [selectedConsumables, setSelectedConsumables] = useState<SelectedSellerConsumable[]>([])
|
||||||
|
|
||||||
|
// 🔍 СОСТОЯНИЕ ПОИСКА
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
const [productSearchQuery, setProductSearchQuery] = useState('')
|
||||||
|
|
||||||
|
// 📅 СОСТОЯНИЕ ДАТЫ ДОСТАВКИ
|
||||||
|
const [deliveryDate, setDeliveryDate] = useState('')
|
||||||
|
|
||||||
|
// 📝 СОСТОЯНИЕ ЗАМЕТОК
|
||||||
|
const [notes, setNotes] = useState('')
|
||||||
|
|
||||||
|
// 🔄 ФУНКЦИЯ СБРОСА ФОРМЫ
|
||||||
|
const resetForm = useCallback(() => {
|
||||||
|
setSelectedSupplier(null)
|
||||||
|
setSelectedFulfillment(null)
|
||||||
|
setSelectedLogistics(null)
|
||||||
|
setSelectedConsumables([])
|
||||||
|
setSearchQuery('')
|
||||||
|
setProductSearchQuery('')
|
||||||
|
setDeliveryDate('')
|
||||||
|
setNotes('')
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// 🔧 СПЕЦИАЛЬНЫЕ СЕТТЕРЫ С ОЧИСТКОЙ ЗАВИСИМЫХ ПОЛЕЙ
|
||||||
|
|
||||||
|
const handleSetSelectedSupplier = useCallback((supplier: SellerConsumableSupplier | null) => {
|
||||||
|
setSelectedSupplier(supplier)
|
||||||
|
|
||||||
|
// При смене поставщика очищаем выбранные товары
|
||||||
|
setSelectedConsumables([])
|
||||||
|
setProductSearchQuery('')
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleSetSelectedFulfillment = useCallback((fulfillment: SellerConsumableSupplier | null) => {
|
||||||
|
setSelectedFulfillment(fulfillment)
|
||||||
|
|
||||||
|
// При смене фулфилмента можем очистить логистику если нужно
|
||||||
|
// setSelectedLogistics(null)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleSetSelectedLogistics = useCallback((logistics: SellerConsumableSupplier | null) => {
|
||||||
|
setSelectedLogistics(logistics)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Состояние
|
||||||
|
selectedSupplier,
|
||||||
|
selectedFulfillment,
|
||||||
|
selectedLogistics,
|
||||||
|
selectedConsumables,
|
||||||
|
searchQuery,
|
||||||
|
productSearchQuery,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
|
||||||
|
// Сеттеры
|
||||||
|
setSelectedSupplier: handleSetSelectedSupplier,
|
||||||
|
setSelectedFulfillment: handleSetSelectedFulfillment,
|
||||||
|
setSelectedLogistics: handleSetSelectedLogistics,
|
||||||
|
setSelectedConsumables,
|
||||||
|
setSearchQuery,
|
||||||
|
setProductSearchQuery,
|
||||||
|
setDeliveryDate,
|
||||||
|
setNotes,
|
||||||
|
|
||||||
|
// Утилиты
|
||||||
|
resetForm,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🔧 ТИПЫ ДЛЯ BUSINESS HOOKS
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FulfillmentConsumableSupplier,
|
||||||
|
FulfillmentConsumableProduct,
|
||||||
|
SelectedFulfillmentConsumable,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
// 🏢 ТИПЫ ДЛЯ ХУКА ПОСТАВЩИКОВ
|
||||||
|
export interface UseSupplierDataReturn {
|
||||||
|
suppliers: FulfillmentConsumableSupplier[]
|
||||||
|
logisticsPartners: FulfillmentConsumableSupplier[]
|
||||||
|
filteredSuppliers: FulfillmentConsumableSupplier[]
|
||||||
|
loading: boolean
|
||||||
|
error: Error | null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 📦 ТИПЫ ДЛЯ ХУКА ТОВАРОВ
|
||||||
|
export interface UseProductDataReturn {
|
||||||
|
products: FulfillmentConsumableProduct[]
|
||||||
|
loading: boolean
|
||||||
|
error: Error | null
|
||||||
|
refetch: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
// 📋 ТИПЫ ДЛЯ ХУКА ФОРМЫ
|
||||||
|
export interface UseSupplyFormReturn {
|
||||||
|
// Состояние формы
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier | null
|
||||||
|
selectedLogistics: FulfillmentConsumableSupplier | null
|
||||||
|
selectedConsumables: SelectedFulfillmentConsumable[]
|
||||||
|
searchQuery: string
|
||||||
|
productSearchQuery: string
|
||||||
|
deliveryDate: string
|
||||||
|
notes: string
|
||||||
|
|
||||||
|
// Действия формы
|
||||||
|
setSelectedSupplier: (supplier: FulfillmentConsumableSupplier | null) => void
|
||||||
|
setSelectedLogistics: (logistics: FulfillmentConsumableSupplier | null) => void
|
||||||
|
setSelectedConsumables: (consumables: SelectedFulfillmentConsumable[]) => void
|
||||||
|
setSearchQuery: (query: string) => void
|
||||||
|
setProductSearchQuery: (query: string) => void
|
||||||
|
setDeliveryDate: (date: string) => void
|
||||||
|
setNotes: (notes: string) => void
|
||||||
|
|
||||||
|
// Сброс формы
|
||||||
|
resetForm: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
// 📊 ТИПЫ ДЛЯ ХУКА УПРАВЛЕНИЯ КОЛИЧЕСТВОМ
|
||||||
|
export interface UseQuantityManagementReturn {
|
||||||
|
updateConsumableQuantity: (productId: string, quantity: number) => void
|
||||||
|
getSelectedQuantity: (productId: string) => number
|
||||||
|
getTotalAmount: () => number
|
||||||
|
getTotalItems: () => number
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🚀 ТИПЫ ДЛЯ ХУКА СОЗДАНИЯ ПОСТАВКИ
|
||||||
|
export interface UseSupplyCreationReturn {
|
||||||
|
createSupply: () => Promise<void>
|
||||||
|
isCreating: boolean
|
||||||
|
error: string | null
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 💰 ХУК ДЛЯ ФОРМАТИРОВАНИЯ ВАЛЮТЫ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useCallback } from 'react'
|
||||||
|
|
||||||
|
export function useCurrencyFormatting() {
|
||||||
|
// Форматирование валюты в рублях
|
||||||
|
const formatCurrency = useCallback((amount: number): string => {
|
||||||
|
return new Intl.NumberFormat('ru-RU', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'RUB',
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
}).format(amount)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return {
|
||||||
|
formatCurrency,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 📦 ХУК ДЛЯ УПРАВЛЕНИЯ ДАННЫМИ ТОВАРОВ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useQuery } from '@apollo/client'
|
||||||
|
import { useMemo } from 'react'
|
||||||
|
|
||||||
|
import { GET_ORGANIZATION_PRODUCTS } from '@/graphql/queries'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FulfillmentConsumableSupplier,
|
||||||
|
ProductsData,
|
||||||
|
UseProductDataReturn,
|
||||||
|
GraphQLQueryVariables,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
interface UseProductDataProps {
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier | null
|
||||||
|
productSearchQuery: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useProductData({
|
||||||
|
selectedSupplier,
|
||||||
|
productSearchQuery,
|
||||||
|
}: UseProductDataProps): UseProductDataReturn {
|
||||||
|
// Стабилизируем переменные для useQuery
|
||||||
|
const queryVariables = useMemo((): GraphQLQueryVariables => {
|
||||||
|
return {
|
||||||
|
organizationId: selectedSupplier?.id || '',
|
||||||
|
search: productSearchQuery || null,
|
||||||
|
category: null,
|
||||||
|
type: 'CONSUMABLE' as const, // Фильтруем только расходники согласно GraphQL правилам
|
||||||
|
}
|
||||||
|
}, [selectedSupplier?.id, productSearchQuery])
|
||||||
|
|
||||||
|
// Загружаем товары для выбранного поставщика с фильтрацией по типу CONSUMABLE
|
||||||
|
const {
|
||||||
|
data,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
refetch,
|
||||||
|
} = useQuery<ProductsData>(GET_ORGANIZATION_PRODUCTS, {
|
||||||
|
skip: !selectedSupplier?.id, // Не запрашиваем без выбранного поставщика
|
||||||
|
variables: queryVariables,
|
||||||
|
onCompleted: (data) => {
|
||||||
|
// Логируем только количество загруженных товаров
|
||||||
|
console.warn(`📦 Загружено товаров: ${data?.organizationProducts?.length || 0}`)
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
console.error('❌ GET_ORGANIZATION_PRODUCTS ERROR:', error)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Получаем товары поставщика (уже отфильтрованы в GraphQL запросе по типу CONSUMABLE)
|
||||||
|
const products = useMemo(() => {
|
||||||
|
return data?.organizationProducts || []
|
||||||
|
}, [data?.organizationProducts])
|
||||||
|
|
||||||
|
return {
|
||||||
|
products,
|
||||||
|
loading,
|
||||||
|
error: error || null,
|
||||||
|
refetch,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 📊 ХУК ДЛЯ УПРАВЛЕНИЯ КОЛИЧЕСТВОМ ТОВАРОВ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useCallback } from 'react'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FulfillmentConsumableSupplier,
|
||||||
|
FulfillmentConsumableProduct,
|
||||||
|
SelectedFulfillmentConsumable,
|
||||||
|
UseQuantityManagementReturn,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
interface UseQuantityManagementProps {
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier | null
|
||||||
|
selectedConsumables: SelectedFulfillmentConsumable[]
|
||||||
|
products: FulfillmentConsumableProduct[]
|
||||||
|
setSelectedConsumables: (updater: SelectedFulfillmentConsumable[] | ((prev: SelectedFulfillmentConsumable[]) => SelectedFulfillmentConsumable[])) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useQuantityManagement({
|
||||||
|
selectedSupplier,
|
||||||
|
selectedConsumables,
|
||||||
|
products,
|
||||||
|
setSelectedConsumables,
|
||||||
|
}: UseQuantityManagementProps): UseQuantityManagementReturn {
|
||||||
|
|
||||||
|
// Обновление количества выбранного расходника
|
||||||
|
const updateConsumableQuantity = useCallback((productId: string, quantity: number) => {
|
||||||
|
const product = products.find((p: FulfillmentConsumableProduct) => p.id === productId)
|
||||||
|
if (!product || !selectedSupplier) return
|
||||||
|
|
||||||
|
// 🔒 ВАЛИДАЦИЯ ОСТАТКОВ согласно бизнес-правилам (раздел 6.2)
|
||||||
|
if (quantity > 0) {
|
||||||
|
const availableStock = (product.stock || product.quantity || 0) - (product.ordered || 0)
|
||||||
|
|
||||||
|
if (quantity > availableStock) {
|
||||||
|
toast.error(`❌ Недостаточно остатков!\nДоступно: ${availableStock} шт.\nЗапрашивается: ${quantity} шт.`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedConsumables((prev: SelectedFulfillmentConsumable[]) => {
|
||||||
|
const existing = prev.find((p: SelectedFulfillmentConsumable) => p.id === productId)
|
||||||
|
|
||||||
|
if (quantity === 0) {
|
||||||
|
// Удаляем расходник если количество 0
|
||||||
|
return prev.filter((p: SelectedFulfillmentConsumable) => p.id !== productId)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
// Обновляем количество существующего расходника
|
||||||
|
return prev.map((p: SelectedFulfillmentConsumable) => (p.id === productId ? { ...p, selectedQuantity: quantity } : p))
|
||||||
|
} else {
|
||||||
|
// Добавляем новый расходник
|
||||||
|
return [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
id: product.id,
|
||||||
|
name: product.name,
|
||||||
|
price: product.price,
|
||||||
|
selectedQuantity: quantity,
|
||||||
|
unit: product.unit || 'шт',
|
||||||
|
category: product.category?.name || 'Расходники',
|
||||||
|
supplierId: selectedSupplier.id,
|
||||||
|
supplierName: selectedSupplier.name || selectedSupplier.fullName || 'Поставщик',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, [products, selectedSupplier, setSelectedConsumables])
|
||||||
|
|
||||||
|
// Получение выбранного количества для товара
|
||||||
|
const getSelectedQuantity = useCallback((productId: string): number => {
|
||||||
|
const selected = selectedConsumables.find((p) => p.id === productId)
|
||||||
|
return selected ? selected.selectedQuantity : 0
|
||||||
|
}, [selectedConsumables])
|
||||||
|
|
||||||
|
// Расчет общей стоимости
|
||||||
|
const getTotalAmount = useCallback(() => {
|
||||||
|
return selectedConsumables.reduce((sum, consumable) => sum + consumable.price * consumable.selectedQuantity, 0)
|
||||||
|
}, [selectedConsumables])
|
||||||
|
|
||||||
|
// Расчет общего количества товаров
|
||||||
|
const getTotalItems = useCallback(() => {
|
||||||
|
return selectedConsumables.reduce((sum, consumable) => sum + consumable.selectedQuantity, 0)
|
||||||
|
}, [selectedConsumables])
|
||||||
|
|
||||||
|
return {
|
||||||
|
updateConsumableQuantity,
|
||||||
|
getSelectedQuantity,
|
||||||
|
getTotalAmount,
|
||||||
|
getTotalItems,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 📊 ХУК ДЛЯ ВАЛИДАЦИИ ОСТАТКОВ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useCallback } from 'react'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FulfillmentConsumableProduct,
|
||||||
|
StockCalculation,
|
||||||
|
StockValidationResult,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
export function useStockValidation() {
|
||||||
|
// Расчет остатков товара
|
||||||
|
const calculateStock = useCallback((product: FulfillmentConsumableProduct): StockCalculation => {
|
||||||
|
const totalStock = product.stock || product.quantity || 0
|
||||||
|
const orderedStock = product.ordered || 0
|
||||||
|
const availableStock = totalStock - orderedStock
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalStock,
|
||||||
|
orderedStock,
|
||||||
|
availableStock,
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Валидация запрашиваемого количества
|
||||||
|
const validateQuantity = useCallback((
|
||||||
|
product: FulfillmentConsumableProduct,
|
||||||
|
requestedQuantity: number,
|
||||||
|
): StockValidationResult => {
|
||||||
|
const { availableStock } = calculateStock(product)
|
||||||
|
|
||||||
|
if (requestedQuantity <= 0) {
|
||||||
|
return {
|
||||||
|
isValid: true,
|
||||||
|
availableStock,
|
||||||
|
requestedQuantity,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (requestedQuantity > availableStock) {
|
||||||
|
return {
|
||||||
|
isValid: false,
|
||||||
|
availableStock,
|
||||||
|
requestedQuantity,
|
||||||
|
error: `❌ Недостаточно остатков!\nДоступно: ${availableStock} шт.\nЗапрашивается: ${requestedQuantity} шт.`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
isValid: true,
|
||||||
|
availableStock,
|
||||||
|
requestedQuantity,
|
||||||
|
}
|
||||||
|
}, [calculateStock])
|
||||||
|
|
||||||
|
// Определение статуса остатков для UI
|
||||||
|
const getStockStatus = useCallback((product: FulfillmentConsumableProduct): 'out_of_stock' | 'low_stock' | 'in_stock' => {
|
||||||
|
const { availableStock } = calculateStock(product)
|
||||||
|
|
||||||
|
if (availableStock <= 0) {
|
||||||
|
return 'out_of_stock'
|
||||||
|
} else if (availableStock <= 10) {
|
||||||
|
return 'low_stock'
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'in_stock'
|
||||||
|
}, [calculateStock])
|
||||||
|
|
||||||
|
return {
|
||||||
|
calculateStock,
|
||||||
|
validateQuantity,
|
||||||
|
getStockStatus,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🏢 ХУК ДЛЯ УПРАВЛЕНИЯ ДАННЫМИ ПОСТАВЩИКОВ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useQuery } from '@apollo/client'
|
||||||
|
import { useMemo } from 'react'
|
||||||
|
|
||||||
|
import { GET_MY_COUNTERPARTIES } from '@/graphql/queries'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FulfillmentConsumableSupplier,
|
||||||
|
CounterpartiesData,
|
||||||
|
UseSupplierDataReturn,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
interface UseSupplierDataProps {
|
||||||
|
searchQuery: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSupplierData({ searchQuery }: UseSupplierDataProps): UseSupplierDataReturn {
|
||||||
|
// Загружаем контрагентов-поставщиков расходников
|
||||||
|
const { data, loading, error } = useQuery<CounterpartiesData>(GET_MY_COUNTERPARTIES)
|
||||||
|
|
||||||
|
// Фильтруем только поставщиков расходников (WHOLESALE)
|
||||||
|
const suppliers = useMemo(() => {
|
||||||
|
return (data?.myCounterparties || []).filter(
|
||||||
|
(org: FulfillmentConsumableSupplier) => org.type === 'WHOLESALE',
|
||||||
|
)
|
||||||
|
}, [data?.myCounterparties])
|
||||||
|
|
||||||
|
// Фильтруем только логистические компании (LOGIST)
|
||||||
|
const logisticsPartners = useMemo(() => {
|
||||||
|
return (data?.myCounterparties || []).filter(
|
||||||
|
(org: FulfillmentConsumableSupplier) => org.type === 'LOGIST',
|
||||||
|
)
|
||||||
|
}, [data?.myCounterparties])
|
||||||
|
|
||||||
|
// Фильтруем поставщиков по поисковому запросу
|
||||||
|
const filteredSuppliers = useMemo(() => {
|
||||||
|
if (!searchQuery.trim()) {
|
||||||
|
return suppliers
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = searchQuery.toLowerCase()
|
||||||
|
return suppliers.filter((supplier: FulfillmentConsumableSupplier) =>
|
||||||
|
supplier.name?.toLowerCase().includes(query) ||
|
||||||
|
supplier.fullName?.toLowerCase().includes(query) ||
|
||||||
|
supplier.inn?.toLowerCase().includes(query),
|
||||||
|
)
|
||||||
|
}, [suppliers, searchQuery])
|
||||||
|
|
||||||
|
return {
|
||||||
|
suppliers,
|
||||||
|
logisticsPartners,
|
||||||
|
filteredSuppliers,
|
||||||
|
loading,
|
||||||
|
error: error || null,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🚀 ХУК ДЛЯ СОЗДАНИЯ ПОСТАВКИ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useMutation } from '@apollo/client'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { useState, useCallback } from 'react'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
|
||||||
|
import {
|
||||||
|
CREATE_FULFILLMENT_CONSUMABLE_SUPPLY,
|
||||||
|
GET_MY_FULFILLMENT_CONSUMABLE_SUPPLIES,
|
||||||
|
} from '@/graphql/queries/fulfillment-consumables-v2'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FulfillmentConsumableSupplier,
|
||||||
|
SelectedFulfillmentConsumable,
|
||||||
|
SupplyCreationInput,
|
||||||
|
CreateSupplyMutationResponse,
|
||||||
|
UseSupplyCreationReturn,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
interface UseSupplyCreationProps {
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier | null
|
||||||
|
selectedConsumables: SelectedFulfillmentConsumable[]
|
||||||
|
selectedLogistics: any | null // Добавляем логистику
|
||||||
|
deliveryDate: string
|
||||||
|
notes: string
|
||||||
|
resetForm: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSupplyCreation({
|
||||||
|
selectedSupplier,
|
||||||
|
selectedConsumables,
|
||||||
|
selectedLogistics,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
resetForm,
|
||||||
|
}: UseSupplyCreationProps): UseSupplyCreationReturn {
|
||||||
|
const router = useRouter()
|
||||||
|
const [isCreating, setIsCreating] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
// Мутация для создания заказа поставки расходников v2
|
||||||
|
const [createSupplyMutation] = useMutation<CreateSupplyMutationResponse>(CREATE_FULFILLMENT_CONSUMABLE_SUPPLY)
|
||||||
|
|
||||||
|
// Функция создания поставки
|
||||||
|
const createSupply = useCallback(async () => {
|
||||||
|
// Валидация обязательных полей
|
||||||
|
if (!selectedSupplier || selectedConsumables.length === 0 || !deliveryDate) {
|
||||||
|
const errorMessage = 'Заполните все обязательные поля: поставщик, расходники и дата доставки'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsCreating(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Формируем input для системы v2
|
||||||
|
const input: SupplyCreationInput = {
|
||||||
|
supplierId: selectedSupplier.id,
|
||||||
|
logisticsPartnerId: selectedLogistics?.id || undefined, // Добавляем логистику
|
||||||
|
requestedDeliveryDate: deliveryDate,
|
||||||
|
items: selectedConsumables.map((consumable) => ({
|
||||||
|
productId: consumable.id,
|
||||||
|
requestedQuantity: consumable.selectedQuantity,
|
||||||
|
})),
|
||||||
|
notes: notes || undefined,
|
||||||
|
}
|
||||||
|
|
||||||
|
console.warn('🚀 СОЗДАНИЕ ПОСТАВКИ v2 - INPUT:', input)
|
||||||
|
|
||||||
|
const result = await createSupplyMutation({
|
||||||
|
variables: { input },
|
||||||
|
refetchQueries: [
|
||||||
|
{ query: GET_MY_FULFILLMENT_CONSUMABLE_SUPPLIES }, // Обновляем новый v2 запрос
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
console.warn('🎯 РЕЗУЛЬТАТ СОЗДАНИЯ ПОСТАВКИ v2:', result)
|
||||||
|
|
||||||
|
if (result.data?.createFulfillmentConsumableSupply?.success) {
|
||||||
|
toast.success('Поставка расходников создана успешно!')
|
||||||
|
|
||||||
|
// Очищаем форму
|
||||||
|
resetForm()
|
||||||
|
|
||||||
|
// Перенаправляем на страницу детальных поставок
|
||||||
|
router.push('/fulfillment-supplies/detailed-supplies')
|
||||||
|
} else {
|
||||||
|
const errorMessage = result.data?.createFulfillmentConsumableSupply?.message || 'Ошибка при создании поставки'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
const errorMessage = 'Ошибка при создании поставки расходников'
|
||||||
|
console.error('Error creating fulfillment consumables supply v2:', error)
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
} finally {
|
||||||
|
setIsCreating(false)
|
||||||
|
}
|
||||||
|
}, [selectedSupplier, selectedConsumables, selectedLogistics, deliveryDate, notes, resetForm, router, createSupplyMutation])
|
||||||
|
|
||||||
|
return {
|
||||||
|
createSupply,
|
||||||
|
isCreating,
|
||||||
|
error,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 📋 ХУК ДЛЯ УПРАВЛЕНИЯ ФОРМОЙ СОЗДАНИЯ ПОСТАВКИ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useState, useCallback } from 'react'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FulfillmentConsumableSupplier,
|
||||||
|
SelectedFulfillmentConsumable,
|
||||||
|
UseSupplyFormReturn,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
export function useSupplyForm(): UseSupplyFormReturn {
|
||||||
|
// Состояние формы
|
||||||
|
const [selectedSupplier, setSelectedSupplier] = useState<FulfillmentConsumableSupplier | null>(null)
|
||||||
|
const [selectedLogistics, setSelectedLogistics] = useState<FulfillmentConsumableSupplier | null>(null)
|
||||||
|
const [selectedConsumables, setSelectedConsumables] = useState<SelectedFulfillmentConsumable[]>([])
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
const [productSearchQuery, setProductSearchQuery] = useState('')
|
||||||
|
const [deliveryDate, setDeliveryDate] = useState('')
|
||||||
|
const [notes, setNotes] = useState('')
|
||||||
|
|
||||||
|
// Функция сброса формы
|
||||||
|
const resetForm = useCallback(() => {
|
||||||
|
setSelectedSupplier(null)
|
||||||
|
setSelectedLogistics(null)
|
||||||
|
setSelectedConsumables([])
|
||||||
|
setSearchQuery('')
|
||||||
|
setProductSearchQuery('')
|
||||||
|
setDeliveryDate('')
|
||||||
|
setNotes('')
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Состояние формы
|
||||||
|
selectedSupplier,
|
||||||
|
selectedLogistics,
|
||||||
|
selectedConsumables,
|
||||||
|
searchQuery,
|
||||||
|
productSearchQuery,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
|
||||||
|
// Действия формы
|
||||||
|
setSelectedSupplier,
|
||||||
|
setSelectedLogistics,
|
||||||
|
setSelectedConsumables,
|
||||||
|
setSearchQuery,
|
||||||
|
setProductSearchQuery,
|
||||||
|
setDeliveryDate,
|
||||||
|
setNotes,
|
||||||
|
|
||||||
|
// Сброс формы
|
||||||
|
resetForm,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// 🔄 СИСТЕМА ПЕРЕКЛЮЧЕНИЯ ПО ТИПУ ОРГАНИЗАЦИИ - УНИВЕРСАЛЬНАЯ ПОСТАВКА
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
import { useAuth } from '@/hooks/useAuth'
|
||||||
|
|
||||||
|
import { ModularVersion } from './modular-version' // Фулфилмент версия
|
||||||
|
import { MonolithicVersion } from './monolithic-version' // Фолбэк версия
|
||||||
|
import { SellerModularVersion } from './seller-modular-version' // 🆕 Селлер версия
|
||||||
|
|
||||||
|
// ⚙️ КОНФИГУРАЦИЯ ВЕРСИЙ
|
||||||
|
const USE_MODULAR_ARCHITECTURE = true // 👈 ПЕРЕКЛЮЧАТЕЛЬ: true = модульная, false = монолитная
|
||||||
|
|
||||||
|
export default function CreateConsumablesSupplyV2Page() {
|
||||||
|
const { user } = useAuth()
|
||||||
|
|
||||||
|
// 🔄 Выбор версии по типу организации
|
||||||
|
if (USE_MODULAR_ARCHITECTURE && user?.organization) {
|
||||||
|
const organizationType = user.organization.type
|
||||||
|
|
||||||
|
// 🏪 СЕЛЛЕР - заказывает расходники у поставщика для доставки в ФФ
|
||||||
|
if (organizationType === 'SELLER') {
|
||||||
|
return <SellerModularVersion />
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🏢 ФУЛФИЛМЕНТ - заказывает расходники для собственного использования
|
||||||
|
if (organizationType === 'FULFILLMENT') {
|
||||||
|
return <ModularVersion />
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🚚 ДРУГИЕ ТИПЫ - пока используют фулфилмент версию
|
||||||
|
// TODO: Добавить специальные версии для WHOLESALE и LOGIST если нужно
|
||||||
|
return <ModularVersion />
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ ФОЛБЭК НА МОНОЛИТНУЮ ВЕРСИЮ
|
||||||
|
return <MonolithicVersion />
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// 📋 ИНСТРУКЦИИ ПО ПЕРЕКЛЮЧЕНИЮ:
|
||||||
|
//
|
||||||
|
// 🔄 Переключение на модульную архитектуру:
|
||||||
|
// 1. Установить USE_MODULAR_ARCHITECTURE = true
|
||||||
|
// 2. Импорт ModularVersion уже активен
|
||||||
|
// 3. return <ModularVersion /> уже активен
|
||||||
|
//
|
||||||
|
// ⬅️ ОТКАТ к монолитной версии:
|
||||||
|
// 1. Установить USE_MODULAR_ARCHITECTURE = false
|
||||||
|
// 2. Импорт ModularVersion можно оставить
|
||||||
|
// 3. return <ModularVersion /> автоматически отключится
|
||||||
|
//
|
||||||
|
// ⚡ ГОРЯЧИЕ КЛАВИШИ ДЛЯ ПЕРЕКЛЮЧЕНИЯ:
|
||||||
|
// - Ctrl+F → "USE_MODULAR_ARCHITECTURE"
|
||||||
|
// - Изменить true/false
|
||||||
|
// - Сохранить файл
|
||||||
|
// =============================================================================
|
||||||
@ -0,0 +1,169 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🧩 МОДУЛЬНАЯ ВЕРСИЯ - СОЗДАНИЕ ПОСТАВОК РАСХОДНИКОВ ФУЛФИЛМЕНТА V2
|
||||||
|
// =============================================================================
|
||||||
|
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в монолитной версии!
|
||||||
|
// Рефакторинг касается только архитектуры - разделение на модули
|
||||||
|
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||||
|
import { useAuth } from '@/hooks/useAuth'
|
||||||
|
import { useSidebar } from '@/hooks/useSidebar'
|
||||||
|
|
||||||
|
// 📦 Импорт модульных компонентов
|
||||||
|
import {
|
||||||
|
PageHeader,
|
||||||
|
SuppliersBlock,
|
||||||
|
ConsumablesBlock,
|
||||||
|
ShoppingCartBlock,
|
||||||
|
} from './blocks'
|
||||||
|
|
||||||
|
// 🔧 Импорт бизнес-хуков
|
||||||
|
import {
|
||||||
|
useSupplierData,
|
||||||
|
useProductData,
|
||||||
|
useSupplyForm,
|
||||||
|
useQuantityManagement,
|
||||||
|
useSupplyCreation,
|
||||||
|
useCurrencyFormatting,
|
||||||
|
} from './hooks'
|
||||||
|
|
||||||
|
export function ModularVersion() {
|
||||||
|
const router = useRouter()
|
||||||
|
const { getSidebarMargin } = useSidebar()
|
||||||
|
const { user: _user } = useAuth()
|
||||||
|
|
||||||
|
// 📋 Управление состоянием формы
|
||||||
|
const {
|
||||||
|
selectedSupplier,
|
||||||
|
selectedLogistics,
|
||||||
|
selectedConsumables,
|
||||||
|
searchQuery,
|
||||||
|
productSearchQuery,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
setSelectedSupplier,
|
||||||
|
setSelectedLogistics,
|
||||||
|
setSelectedConsumables,
|
||||||
|
setSearchQuery,
|
||||||
|
setProductSearchQuery,
|
||||||
|
setDeliveryDate,
|
||||||
|
setNotes,
|
||||||
|
resetForm,
|
||||||
|
} = useSupplyForm()
|
||||||
|
|
||||||
|
// 🏢 Данные поставщиков
|
||||||
|
const {
|
||||||
|
suppliers,
|
||||||
|
logisticsPartners,
|
||||||
|
filteredSuppliers,
|
||||||
|
loading: suppliersLoading,
|
||||||
|
} = useSupplierData({ searchQuery })
|
||||||
|
|
||||||
|
// 📦 Данные товаров
|
||||||
|
const {
|
||||||
|
products,
|
||||||
|
loading: productsLoading,
|
||||||
|
} = useProductData({
|
||||||
|
selectedSupplier,
|
||||||
|
productSearchQuery,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 📊 Управление количеством
|
||||||
|
const {
|
||||||
|
updateConsumableQuantity,
|
||||||
|
getSelectedQuantity,
|
||||||
|
getTotalAmount,
|
||||||
|
getTotalItems,
|
||||||
|
} = useQuantityManagement({
|
||||||
|
selectedSupplier,
|
||||||
|
selectedConsumables,
|
||||||
|
products,
|
||||||
|
setSelectedConsumables,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 🚀 Создание поставки
|
||||||
|
const {
|
||||||
|
createSupply,
|
||||||
|
isCreating: isCreatingSupply,
|
||||||
|
} = useSupplyCreation({
|
||||||
|
selectedSupplier,
|
||||||
|
selectedConsumables,
|
||||||
|
selectedLogistics,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
resetForm,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 💰 Форматирование валюты
|
||||||
|
const { formatCurrency } = useCurrencyFormatting()
|
||||||
|
|
||||||
|
// 🔄 Обработчики событий
|
||||||
|
const handleBack = () => {
|
||||||
|
router.push('/fulfillment-supplies/detailed-supplies')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-screen flex overflow-hidden">
|
||||||
|
<Sidebar />
|
||||||
|
<main className={`flex-1 ${getSidebarMargin()} overflow-auto transition-all duration-300`}>
|
||||||
|
<div className="min-h-full w-full flex flex-col px-3 py-2">
|
||||||
|
{/* 📄 Заголовок страницы */}
|
||||||
|
<PageHeader onBack={handleBack} />
|
||||||
|
|
||||||
|
{/* 🧩 Основной контент с двумя блоками */}
|
||||||
|
<div className="flex-1 flex gap-3 min-h-0">
|
||||||
|
{/* 📦 Левая колонка - Поставщики и Расходники */}
|
||||||
|
<div className="flex-1 flex flex-col gap-3 min-h-0">
|
||||||
|
{/* 🏢 Блок поставщиков */}
|
||||||
|
<SuppliersBlock
|
||||||
|
suppliers={suppliers}
|
||||||
|
filteredSuppliers={filteredSuppliers}
|
||||||
|
selectedSupplier={selectedSupplier}
|
||||||
|
searchQuery={searchQuery}
|
||||||
|
loading={suppliersLoading}
|
||||||
|
onSelectSupplier={setSelectedSupplier}
|
||||||
|
onSearchChange={setSearchQuery}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 📦 Блок расходников */}
|
||||||
|
<ConsumablesBlock
|
||||||
|
selectedSupplier={selectedSupplier}
|
||||||
|
products={products}
|
||||||
|
productsLoading={productsLoading}
|
||||||
|
productSearchQuery={productSearchQuery}
|
||||||
|
getSelectedQuantity={getSelectedQuantity}
|
||||||
|
onProductSearchChange={setProductSearchQuery}
|
||||||
|
onUpdateQuantity={updateConsumableQuantity}
|
||||||
|
formatCurrency={formatCurrency}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 🛒 Правая колонка - Корзина */}
|
||||||
|
<div className="w-72 flex-shrink-0">
|
||||||
|
<ShoppingCartBlock
|
||||||
|
selectedConsumables={selectedConsumables}
|
||||||
|
deliveryDate={deliveryDate}
|
||||||
|
notes={notes}
|
||||||
|
selectedLogistics={selectedLogistics}
|
||||||
|
logisticsPartners={logisticsPartners}
|
||||||
|
isCreatingSupply={isCreatingSupply}
|
||||||
|
getTotalAmount={getTotalAmount}
|
||||||
|
getTotalItems={getTotalItems}
|
||||||
|
formatCurrency={formatCurrency}
|
||||||
|
onUpdateQuantity={updateConsumableQuantity}
|
||||||
|
onSetDeliveryDate={setDeliveryDate}
|
||||||
|
onSetNotes={setNotes}
|
||||||
|
onSetLogistics={setSelectedLogistics}
|
||||||
|
onCreateSupply={createSupply}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,820 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useQuery, useMutation } from '@apollo/client'
|
||||||
|
import { ArrowLeft, Building2, Search, Package, Plus, Minus, ShoppingCart, Wrench } from 'lucide-react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import React, { useState, useMemo } from 'react'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
|
||||||
|
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||||
|
import { OrganizationAvatar } from '@/components/market/organization-avatar'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { GET_MY_COUNTERPARTIES, GET_ORGANIZATION_PRODUCTS } from '@/graphql/queries'
|
||||||
|
import {
|
||||||
|
CREATE_FULFILLMENT_CONSUMABLE_SUPPLY,
|
||||||
|
GET_MY_FULFILLMENT_CONSUMABLE_SUPPLIES,
|
||||||
|
} from '@/graphql/queries/fulfillment-consumables-v2'
|
||||||
|
import { useAuth } from '@/hooks/useAuth'
|
||||||
|
import { useSidebar } from '@/hooks/useSidebar'
|
||||||
|
|
||||||
|
interface FulfillmentConsumableSupplier {
|
||||||
|
id: string
|
||||||
|
inn: string
|
||||||
|
name?: string
|
||||||
|
fullName?: string
|
||||||
|
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||||
|
address?: string
|
||||||
|
phones?: Array<{ value: string }>
|
||||||
|
emails?: Array<{ value: string }>
|
||||||
|
users?: Array<{ id: string; avatar?: string; managerName?: string }>
|
||||||
|
createdAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FulfillmentConsumableProduct {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
description?: string
|
||||||
|
price: number
|
||||||
|
type?: 'PRODUCT' | 'CONSUMABLE'
|
||||||
|
category?: { name: string }
|
||||||
|
images: string[]
|
||||||
|
mainImage?: string
|
||||||
|
organization: {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
}
|
||||||
|
stock?: number
|
||||||
|
unit?: string
|
||||||
|
quantity?: number
|
||||||
|
ordered?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SelectedFulfillmentConsumable {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
price: number
|
||||||
|
selectedQuantity: number
|
||||||
|
unit?: string
|
||||||
|
category?: string
|
||||||
|
supplierId: string
|
||||||
|
supplierName: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MonolithicVersion() {
|
||||||
|
const router = useRouter()
|
||||||
|
const { getSidebarMargin } = useSidebar()
|
||||||
|
const { user: _user } = useAuth()
|
||||||
|
const [selectedSupplier, setSelectedSupplier] = useState<FulfillmentConsumableSupplier | null>(null)
|
||||||
|
const [selectedLogistics, setSelectedLogistics] = useState<FulfillmentConsumableSupplier | null>(null)
|
||||||
|
const [selectedConsumables, setSelectedConsumables] = useState<SelectedFulfillmentConsumable[]>([])
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
const [productSearchQuery, setProductSearchQuery] = useState('')
|
||||||
|
const [deliveryDate, setDeliveryDate] = useState('')
|
||||||
|
const [notes, setNotes] = useState('')
|
||||||
|
const [isCreatingSupply, setIsCreatingSupply] = useState(false)
|
||||||
|
|
||||||
|
// Загружаем контрагентов-поставщиков расходников
|
||||||
|
const { data: counterpartiesData, loading: counterpartiesLoading } = useQuery(GET_MY_COUNTERPARTIES)
|
||||||
|
|
||||||
|
// Убираем избыточное логирование для предотвращения визуального "бесконечного цикла"
|
||||||
|
|
||||||
|
// Стабилизируем переменные для useQuery
|
||||||
|
const queryVariables = useMemo(() => {
|
||||||
|
return {
|
||||||
|
organizationId: selectedSupplier?.id || '', // Всегда возвращаем объект, но с пустым ID если нет поставщика
|
||||||
|
search: productSearchQuery || null,
|
||||||
|
category: null,
|
||||||
|
type: 'CONSUMABLE' as const, // Фильтруем только расходники согласно rules2.md
|
||||||
|
}
|
||||||
|
}, [selectedSupplier?.id, productSearchQuery])
|
||||||
|
|
||||||
|
// Загружаем товары для выбранного поставщика с фильтрацией по типу CONSUMABLE
|
||||||
|
const {
|
||||||
|
data: productsData,
|
||||||
|
loading: productsLoading,
|
||||||
|
error: _productsError,
|
||||||
|
} = useQuery(GET_ORGANIZATION_PRODUCTS, {
|
||||||
|
skip: !selectedSupplier?.id, // Используем стабильное условие вместо !queryVariables
|
||||||
|
variables: queryVariables,
|
||||||
|
onCompleted: (data) => {
|
||||||
|
// Логируем только количество загруженных товаров
|
||||||
|
console.warn(`📦 Загружено товаров: ${data?.organizationProducts?.length || 0}`)
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
console.error('❌ GET_ORGANIZATION_PRODUCTS ERROR:', error)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Мутация для создания заказа поставки расходников v2
|
||||||
|
const [createSupply] = useMutation(CREATE_FULFILLMENT_CONSUMABLE_SUPPLY)
|
||||||
|
|
||||||
|
// Фильтруем только поставщиков расходников (поставщиков)
|
||||||
|
const consumableSuppliers = (counterpartiesData?.myCounterparties || []).filter(
|
||||||
|
(org: FulfillmentConsumableSupplier) => org.type === 'WHOLESALE',
|
||||||
|
)
|
||||||
|
|
||||||
|
// Фильтруем только логистические компании
|
||||||
|
const logisticsPartners = (counterpartiesData?.myCounterparties || []).filter(
|
||||||
|
(org: FulfillmentConsumableSupplier) => org.type === 'LOGIST',
|
||||||
|
)
|
||||||
|
|
||||||
|
// Фильтруем поставщиков по поисковому запросу
|
||||||
|
const filteredSuppliers = consumableSuppliers.filter(
|
||||||
|
(supplier: FulfillmentConsumableSupplier) =>
|
||||||
|
supplier.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
supplier.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
supplier.inn?.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||||
|
)
|
||||||
|
|
||||||
|
// Фильтруем товары по выбранному поставщику
|
||||||
|
// 📦 Получаем товары поставщика (уже отфильтрованы в GraphQL запросе по типу CONSUMABLE)
|
||||||
|
const supplierProducts = productsData?.organizationProducts || []
|
||||||
|
|
||||||
|
// Отладочное логирование только при смене поставщика
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (selectedSupplier) {
|
||||||
|
console.warn('🔄 ПОСТАВЩИК ВЫБРАН:', {
|
||||||
|
id: selectedSupplier.id,
|
||||||
|
name: selectedSupplier.name || selectedSupplier.fullName,
|
||||||
|
type: selectedSupplier.type,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [selectedSupplier]) // Включаем весь объект поставщика для корректной работы
|
||||||
|
|
||||||
|
// Логируем результат загрузки товаров только при получении данных
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (productsData && !productsLoading) {
|
||||||
|
console.warn('📦 ТОВАРЫ ЗАГРУЖЕНЫ:', {
|
||||||
|
organizationProductsCount: productsData?.organizationProducts?.length || 0,
|
||||||
|
supplierProductsCount: supplierProducts.length,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [productsData, productsLoading, supplierProducts.length]) // Включаем все зависимости для корректной работы
|
||||||
|
|
||||||
|
const formatCurrency = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat('ru-RU', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'RUB',
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
}).format(amount)
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateConsumableQuantity = (productId: string, quantity: number) => {
|
||||||
|
const product = supplierProducts.find((p: FulfillmentConsumableProduct) => p.id === productId)
|
||||||
|
if (!product || !selectedSupplier) return
|
||||||
|
|
||||||
|
// 🔒 ВАЛИДАЦИЯ ОСТАТКОВ согласно правилам (раздел 6.2)
|
||||||
|
if (quantity > 0) {
|
||||||
|
const availableStock = (product.stock || product.quantity || 0) - (product.ordered || 0)
|
||||||
|
|
||||||
|
if (quantity > availableStock) {
|
||||||
|
toast.error(`❌ Недостаточно остатков!\nДоступно: ${availableStock} шт.\nЗапрашивается: ${quantity} шт.`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedConsumables((prev) => {
|
||||||
|
const existing = prev.find((p) => p.id === productId)
|
||||||
|
|
||||||
|
if (quantity === 0) {
|
||||||
|
// Удаляем расходник если количество 0
|
||||||
|
return prev.filter((p) => p.id !== productId)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
// Обновляем количество существующего расходника
|
||||||
|
return prev.map((p) => (p.id === productId ? { ...p, selectedQuantity: quantity } : p))
|
||||||
|
} else {
|
||||||
|
// Добавляем новый расходник
|
||||||
|
return [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
id: product.id,
|
||||||
|
name: product.name,
|
||||||
|
price: product.price,
|
||||||
|
selectedQuantity: quantity,
|
||||||
|
unit: product.unit || 'шт',
|
||||||
|
category: product.category?.name || 'Расходники',
|
||||||
|
supplierId: selectedSupplier.id,
|
||||||
|
supplierName: selectedSupplier.name || selectedSupplier.fullName || 'Поставщик',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getSelectedQuantity = (productId: string): number => {
|
||||||
|
const selected = selectedConsumables.find((p) => p.id === productId)
|
||||||
|
return selected ? selected.selectedQuantity : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const getTotalAmount = () => {
|
||||||
|
return selectedConsumables.reduce((sum, consumable) => sum + consumable.price * consumable.selectedQuantity, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getTotalItems = () => {
|
||||||
|
return selectedConsumables.reduce((sum, consumable) => sum + consumable.selectedQuantity, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCreateSupply = async () => {
|
||||||
|
if (!selectedSupplier || selectedConsumables.length === 0 || !deliveryDate) {
|
||||||
|
toast.error('Заполните все обязательные поля: поставщик, расходники и дата доставки')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsCreatingSupply(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Новый формат для системы v2
|
||||||
|
const input = {
|
||||||
|
supplierId: selectedSupplier.id,
|
||||||
|
logisticsPartnerId: selectedLogistics?.id || undefined, // Добавляем логистического партнера
|
||||||
|
requestedDeliveryDate: deliveryDate,
|
||||||
|
items: selectedConsumables.map((consumable) => ({
|
||||||
|
productId: consumable.id,
|
||||||
|
requestedQuantity: consumable.selectedQuantity,
|
||||||
|
})),
|
||||||
|
notes: notes || undefined,
|
||||||
|
}
|
||||||
|
|
||||||
|
console.warn('🚀 СОЗДАНИЕ ПОСТАВКИ v2 - INPUT:', input)
|
||||||
|
|
||||||
|
const result = await createSupply({
|
||||||
|
variables: { input },
|
||||||
|
refetchQueries: [
|
||||||
|
{ query: GET_MY_FULFILLMENT_CONSUMABLE_SUPPLIES }, // Обновляем новый v2 запрос
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
console.warn('🎯 РЕЗУЛЬТАТ СОЗДАНИЯ ПОСТАВКИ v2:', result)
|
||||||
|
|
||||||
|
if (result.data?.createFulfillmentConsumableSupply?.success) {
|
||||||
|
toast.success('Поставка расходников создана успешно!')
|
||||||
|
// Очищаем форму
|
||||||
|
setSelectedSupplier(null)
|
||||||
|
setSelectedLogistics(null)
|
||||||
|
setSelectedConsumables([])
|
||||||
|
setDeliveryDate('')
|
||||||
|
setProductSearchQuery('')
|
||||||
|
setSearchQuery('')
|
||||||
|
setNotes('')
|
||||||
|
|
||||||
|
// Перенаправляем на страницу детальных поставок
|
||||||
|
router.push('/fulfillment-supplies/detailed-supplies')
|
||||||
|
} else {
|
||||||
|
toast.error(result.data?.createFulfillmentConsumableSupply?.message || 'Ошибка при создании поставки')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating fulfillment consumables supply v2:', error)
|
||||||
|
toast.error('Ошибка при создании поставки расходников')
|
||||||
|
} finally {
|
||||||
|
setIsCreatingSupply(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-screen flex overflow-hidden">
|
||||||
|
<Sidebar />
|
||||||
|
<main className={`flex-1 ${getSidebarMargin()} overflow-auto transition-all duration-300`}>
|
||||||
|
<div className="min-h-full w-full flex flex-col px-3 py-2">
|
||||||
|
{/* Заголовок */}
|
||||||
|
<div className="flex items-center justify-between mb-3 flex-shrink-0">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-bold text-white mb-1">Создание поставки расходников фулфилмента</h1>
|
||||||
|
<p className="text-white/60 text-sm">
|
||||||
|
Выберите поставщика и добавьте расходники в заказ для вашего фулфилмент-центра
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => router.push('/fulfillment-supplies/detailed-supplies')}
|
||||||
|
className="text-white/60 hover:text-white hover:bg-white/10 text-sm"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||||
|
Назад
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Основной контент с двумя блоками */}
|
||||||
|
<div className="flex-1 flex gap-3 min-h-0">
|
||||||
|
{/* Левая колонка - Поставщики и Расходники */}
|
||||||
|
<div className="flex-1 flex flex-col gap-3 min-h-0">
|
||||||
|
{/* Блок "Поставщики" */}
|
||||||
|
<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 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/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>
|
||||||
|
|
||||||
|
<div className="px-3 pb-3 h-24 overflow-hidden">
|
||||||
|
{counterpartiesLoading ? (
|
||||||
|
<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-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="flex gap-2 h-full pt-1">
|
||||||
|
{filteredSuppliers.slice(0, 7).map((supplier: FulfillmentConsumableSupplier, index: number) => (
|
||||||
|
<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>
|
||||||
|
</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 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-4 w-4 mr-2" />
|
||||||
|
Расходники для фулфилмента
|
||||||
|
{selectedSupplier && (
|
||||||
|
<span className="text-white/60 text-xs font-normal ml-2 truncate">
|
||||||
|
- {selectedSupplier.name || selectedSupplier.fullName}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
{selectedSupplier && (
|
||||||
|
<div className="relative">
|
||||||
|
<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-7 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 flex-1 overflow-y-auto">
|
||||||
|
{!selectedSupplier ? (
|
||||||
|
<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-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-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-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-3">
|
||||||
|
{supplierProducts.map((product: FulfillmentConsumableProduct, index: number) => {
|
||||||
|
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">
|
||||||
|
{/* 🚫 ОВЕРЛЕЙ НЕДОСТУПНОСТИ */}
|
||||||
|
{(() => {
|
||||||
|
const totalStock = product.stock || (product as any).quantity || 0
|
||||||
|
const orderedStock = (product as any).ordered || 0
|
||||||
|
const availableStock = totalStock - orderedStock
|
||||||
|
|
||||||
|
if (availableStock <= 0) {
|
||||||
|
return (
|
||||||
|
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-10">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-red-400 font-bold text-xs">НЕТ В НАЛИЧИИ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
})()}
|
||||||
|
{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 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>
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
{/* 🚨 ИНДИКАТОР НИЗКИХ ОСТАТКОВ согласно правилам (раздел 6.3) */}
|
||||||
|
{(() => {
|
||||||
|
const totalStock = product.stock || product.quantity || 0
|
||||||
|
const orderedStock = product.ordered || 0
|
||||||
|
const availableStock = totalStock - orderedStock
|
||||||
|
|
||||||
|
if (availableStock <= 0) {
|
||||||
|
return (
|
||||||
|
<Badge className="bg-red-500/30 text-red-300 border-red-500/50 text-xs px-2 py-1 animate-pulse">
|
||||||
|
Нет в наличии
|
||||||
|
</Badge>
|
||||||
|
)
|
||||||
|
} else if (availableStock <= 10) {
|
||||||
|
return (
|
||||||
|
<Badge className="bg-yellow-500/30 text-yellow-300 border-yellow-500/50 text-xs px-2 py-1">
|
||||||
|
Мало остатков
|
||||||
|
</Badge>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-green-400 font-semibold text-sm">
|
||||||
|
{formatCurrency(product.price)}
|
||||||
|
</span>
|
||||||
|
{/* 📊 АКТУАЛЬНЫЙ ОСТАТОК согласно правилам (раздел 6.4.2) */}
|
||||||
|
<div className="text-right">
|
||||||
|
{(() => {
|
||||||
|
const totalStock = product.stock || product.quantity || 0
|
||||||
|
const orderedStock = product.ordered || 0
|
||||||
|
const availableStock = totalStock - orderedStock
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-end">
|
||||||
|
<span
|
||||||
|
className={`text-xs font-medium ${
|
||||||
|
availableStock <= 0
|
||||||
|
? 'text-red-400'
|
||||||
|
: availableStock <= 10
|
||||||
|
? 'text-yellow-400'
|
||||||
|
: 'text-white/80'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Доступно: {availableStock}
|
||||||
|
</span>
|
||||||
|
{orderedStock > 0 && (
|
||||||
|
<span className="text-white/40 text-xs">Заказано: {orderedStock}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Управление количеством */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 mt-auto">
|
||||||
|
{(() => {
|
||||||
|
const totalStock = product.stock || (product as any).quantity || 0
|
||||||
|
const orderedStock = (product as any).ordered || 0
|
||||||
|
const availableStock = totalStock - orderedStock
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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)
|
||||||
|
|
||||||
|
// Ограничиваем значение максимумом доступного остатка
|
||||||
|
const clampedValue = Math.min(numericValue, availableStock, 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, availableStock, 99999),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className={`h-6 w-6 p-0 rounded-full transition-all duration-300 ${
|
||||||
|
selectedQuantity >= availableStock || availableStock <= 0
|
||||||
|
? 'text-white/30 cursor-not-allowed'
|
||||||
|
: 'text-white/60 hover:text-white hover:bg-white/20'
|
||||||
|
}`}
|
||||||
|
disabled={selectedQuantity >= availableStock || availableStock <= 0}
|
||||||
|
title={
|
||||||
|
availableStock <= 0
|
||||||
|
? 'Товар отсутствует на складе'
|
||||||
|
: selectedQuantity >= availableStock
|
||||||
|
? `Максимум доступно: ${availableStock}`
|
||||||
|
: 'Увеличить количество'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Правая колонка - Корзина */}
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{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>
|
||||||
|
</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-xs font-medium truncate">{consumable.name}</p>
|
||||||
|
<p className="text-white/60 text-xs">
|
||||||
|
{formatCurrency(consumable.price)} × {consumable.selectedQuantity}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-green-400 font-medium text-xs">
|
||||||
|
{formatCurrency(consumable.price * consumable.selectedQuantity)}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => updateConsumableQuantity(consumable.id, 0)}
|
||||||
|
className="h-5 w-5 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="border-t border-white/20 pt-3">
|
||||||
|
<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="mb-3">
|
||||||
|
<label className="text-white/60 text-xs mb-1 block">Логистика (опционально):</label>
|
||||||
|
<div className="relative">
|
||||||
|
<select
|
||||||
|
value={selectedLogistics?.id || ''}
|
||||||
|
onChange={(e) => {
|
||||||
|
const logisticsId = e.target.value
|
||||||
|
const logistics = logisticsPartners.find((p: any) => p.id === logisticsId)
|
||||||
|
setSelectedLogistics(logistics || null)
|
||||||
|
}}
|
||||||
|
className="w-full bg-white/10 border border-white/20 rounded-md px-3 py-2 text-white text-sm focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent appearance-none"
|
||||||
|
>
|
||||||
|
<option value="" className="bg-gray-800 text-white">
|
||||||
|
Выберите логистику
|
||||||
|
</option>
|
||||||
|
{logisticsPartners.map((partner: any) => (
|
||||||
|
<option key={partner.id} value={partner.id} className="bg-gray-800 text-white">
|
||||||
|
{partner.name || partner.fullName || partner.inn}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
|
||||||
|
<svg className="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Заметки */}
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="text-white/60 text-xs mb-1 block">Заметки (необязательно):</label>
|
||||||
|
<textarea
|
||||||
|
value={notes}
|
||||||
|
onChange={(e) => setNotes(e.target.value)}
|
||||||
|
placeholder="Дополнительная информация о поставке"
|
||||||
|
rows={3}
|
||||||
|
className="w-full bg-white/10 border border-white/20 rounded-md px-3 py-2 text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent resize-none"
|
||||||
|
/>
|
||||||
|
</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 || 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>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,183 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🧩 МОДУЛЬНАЯ ВЕРСИЯ ДЛЯ СЕЛЛЕРА - СОЗДАНИЕ ПОСТАВОК РАСХОДНИКОВ V2
|
||||||
|
// =============================================================================
|
||||||
|
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в фулфилмент версии!
|
||||||
|
// Отличия только в бизнес-логике и данных
|
||||||
|
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||||
|
import { useAuth } from '@/hooks/useAuth'
|
||||||
|
import { useSidebar } from '@/hooks/useSidebar'
|
||||||
|
|
||||||
|
// 📦 Импорт селлерских компонентов
|
||||||
|
import {
|
||||||
|
PageHeader,
|
||||||
|
ConsumablesBlock, // Используем тот же компонент расходников
|
||||||
|
} from './blocks'
|
||||||
|
import {
|
||||||
|
SellerSuppliersBlock,
|
||||||
|
SellerShoppingCartBlock,
|
||||||
|
} from './blocks/seller-blocks'
|
||||||
|
|
||||||
|
// 🔧 Импорт селлерских хуков
|
||||||
|
import {
|
||||||
|
useProductData, // Используем тот же hook для товаров
|
||||||
|
useQuantityManagement, // Используем тот же hook для количества
|
||||||
|
useCurrencyFormatting, // Используем тот же hook для валюты
|
||||||
|
} from './hooks'
|
||||||
|
import {
|
||||||
|
useSellerSupplyForm,
|
||||||
|
useSellerSupplyCreation,
|
||||||
|
useSellerSupplierData,
|
||||||
|
} from './hooks/seller-hooks'
|
||||||
|
|
||||||
|
export function SellerModularVersion() {
|
||||||
|
const router = useRouter()
|
||||||
|
const { getSidebarMargin } = useSidebar()
|
||||||
|
const { user: _user } = useAuth()
|
||||||
|
|
||||||
|
// 📋 Управление состоянием формы СЕЛЛЕРА
|
||||||
|
const {
|
||||||
|
selectedSupplier,
|
||||||
|
selectedFulfillment, // 🆕 Дополнительное поле для селлера
|
||||||
|
selectedLogistics,
|
||||||
|
selectedConsumables,
|
||||||
|
searchQuery,
|
||||||
|
productSearchQuery,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
setSelectedSupplier,
|
||||||
|
setSelectedFulfillment, // 🆕 Дополнительный сеттер
|
||||||
|
setSelectedLogistics,
|
||||||
|
setSelectedConsumables,
|
||||||
|
setSearchQuery,
|
||||||
|
setProductSearchQuery,
|
||||||
|
setDeliveryDate,
|
||||||
|
setNotes,
|
||||||
|
resetForm,
|
||||||
|
} = useSellerSupplyForm()
|
||||||
|
|
||||||
|
// 🏢 Данные партнеров для селлера (поставщики + фулфилмент-центры)
|
||||||
|
const {
|
||||||
|
suppliers,
|
||||||
|
fulfillmentCenters, // 🆕 Фулфилмент-центры для селлера
|
||||||
|
filteredSuppliers,
|
||||||
|
filteredFulfillmentCenters, // 🆕 Фильтрованные ФФ
|
||||||
|
logisticsPartners,
|
||||||
|
loading: suppliersLoading,
|
||||||
|
} = useSellerSupplierData({ searchQuery })
|
||||||
|
|
||||||
|
// 📦 Данные товаров (используем тот же hook что и для фулфилмента)
|
||||||
|
const {
|
||||||
|
products,
|
||||||
|
loading: productsLoading,
|
||||||
|
} = useProductData({
|
||||||
|
selectedSupplier, // 🔄 Товары от выбранного поставщика
|
||||||
|
productSearchQuery,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 📊 Управление количеством (используем тот же hook)
|
||||||
|
const {
|
||||||
|
updateConsumableQuantity,
|
||||||
|
getSelectedQuantity,
|
||||||
|
getTotalAmount,
|
||||||
|
getTotalItems,
|
||||||
|
} = useQuantityManagement({
|
||||||
|
selectedSupplier,
|
||||||
|
selectedConsumables,
|
||||||
|
products,
|
||||||
|
setSelectedConsumables,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 🚀 Создание поставки СЕЛЛЕРА
|
||||||
|
const {
|
||||||
|
createSupply,
|
||||||
|
isCreating: isCreatingSupply,
|
||||||
|
} = useSellerSupplyCreation({
|
||||||
|
selectedSupplier,
|
||||||
|
selectedFulfillment, // 🆕 Передаем фулфилмент-центр
|
||||||
|
selectedConsumables,
|
||||||
|
deliveryDate,
|
||||||
|
notes,
|
||||||
|
resetForm,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 💰 Форматирование валюты (используем тот же hook)
|
||||||
|
const { formatCurrency } = useCurrencyFormatting()
|
||||||
|
|
||||||
|
// 🔄 Обработчики событий
|
||||||
|
const handleBack = () => {
|
||||||
|
// TODO: Создать маршрут для списка поставок селлера
|
||||||
|
router.push('/seller-supplies') // или другой подходящий маршрут
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-screen flex overflow-hidden">
|
||||||
|
<Sidebar />
|
||||||
|
<main className={`flex-1 ${getSidebarMargin()} overflow-auto transition-all duration-300`}>
|
||||||
|
<div className="min-h-full w-full flex flex-col px-3 py-2">
|
||||||
|
{/* 📄 Заголовок страницы */}
|
||||||
|
<PageHeader onBack={handleBack} />
|
||||||
|
|
||||||
|
{/* 🧩 Основной контент с двумя блоками */}
|
||||||
|
<div className="flex-1 flex gap-3 min-h-0">
|
||||||
|
{/* 📦 Левая колонка - Партнеры и Расходники */}
|
||||||
|
<div className="flex-1 flex flex-col gap-3 min-h-0">
|
||||||
|
{/* 🏪 Блок партнеров (поставщики + фулфилмент-центры) */}
|
||||||
|
<SellerSuppliersBlock
|
||||||
|
suppliers={suppliers}
|
||||||
|
fulfillmentCenters={fulfillmentCenters}
|
||||||
|
filteredSuppliers={filteredSuppliers}
|
||||||
|
filteredFulfillmentCenters={filteredFulfillmentCenters}
|
||||||
|
selectedSupplier={selectedSupplier}
|
||||||
|
selectedFulfillment={selectedFulfillment}
|
||||||
|
searchQuery={searchQuery}
|
||||||
|
loading={suppliersLoading}
|
||||||
|
onSelectSupplier={setSelectedSupplier}
|
||||||
|
onSelectFulfillment={setSelectedFulfillment}
|
||||||
|
onSearchChange={setSearchQuery}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 📦 Блок расходников (тот же что у фулфилмента) */}
|
||||||
|
<ConsumablesBlock
|
||||||
|
selectedSupplier={selectedSupplier}
|
||||||
|
products={products}
|
||||||
|
productsLoading={productsLoading}
|
||||||
|
productSearchQuery={productSearchQuery}
|
||||||
|
getSelectedQuantity={getSelectedQuantity}
|
||||||
|
onProductSearchChange={setProductSearchQuery}
|
||||||
|
onUpdateQuantity={updateConsumableQuantity}
|
||||||
|
formatCurrency={formatCurrency}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 🛒 Правая колонка - Корзина СЕЛЛЕРА */}
|
||||||
|
<div className="w-72 flex-shrink-0">
|
||||||
|
<SellerShoppingCartBlock
|
||||||
|
selectedConsumables={selectedConsumables}
|
||||||
|
selectedFulfillment={selectedFulfillment} // 🆕 Показываем выбранный ФФ
|
||||||
|
deliveryDate={deliveryDate}
|
||||||
|
notes={notes}
|
||||||
|
selectedLogistics={selectedLogistics}
|
||||||
|
logisticsPartners={logisticsPartners}
|
||||||
|
isCreatingSupply={isCreatingSupply}
|
||||||
|
getTotalAmount={getTotalAmount}
|
||||||
|
getTotalItems={getTotalItems}
|
||||||
|
formatCurrency={formatCurrency}
|
||||||
|
onUpdateQuantity={updateConsumableQuantity}
|
||||||
|
onSetDeliveryDate={setDeliveryDate}
|
||||||
|
onSetNotes={setNotes}
|
||||||
|
onSetLogistics={setSelectedLogistics}
|
||||||
|
onCreateSupply={createSupply}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,252 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🔧 ТИПЫ ДЛЯ СИСТЕМЫ СОЗДАНИЯ ПОСТАВОК РАСХОДНИКОВ ФУЛФИЛМЕНТА V2
|
||||||
|
// =============================================================================
|
||||||
|
// Эти типы экстрагированы из монолитного компонента в соответствии с правилами
|
||||||
|
// модульной архитектуры MODULAR_ARCHITECTURE_PATTERN.md
|
||||||
|
|
||||||
|
// 🏢 ТИПЫ ПОСТАВЩИКОВ И ОРГАНИЗАЦИЙ
|
||||||
|
export interface FulfillmentConsumableSupplier {
|
||||||
|
id: string
|
||||||
|
inn: string
|
||||||
|
name?: string
|
||||||
|
fullName?: string
|
||||||
|
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||||
|
address?: string
|
||||||
|
phones?: Array<{ value: string }>
|
||||||
|
emails?: Array<{ value: string }>
|
||||||
|
users?: Array<{ id: string; avatar?: string; managerName?: string }>
|
||||||
|
createdAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 📦 ТИПЫ ТОВАРОВ И РАСХОДНИКОВ
|
||||||
|
export interface FulfillmentConsumableProduct {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
description?: string
|
||||||
|
price: number
|
||||||
|
type?: 'PRODUCT' | 'CONSUMABLE'
|
||||||
|
category?: { name: string }
|
||||||
|
images: string[]
|
||||||
|
mainImage?: string
|
||||||
|
organization: {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
}
|
||||||
|
stock?: number
|
||||||
|
unit?: string
|
||||||
|
quantity?: number
|
||||||
|
ordered?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🛒 ТИПЫ КОРЗИНЫ И ВЫБРАННЫХ ТОВАРОВ
|
||||||
|
export interface SelectedFulfillmentConsumable {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
price: number
|
||||||
|
selectedQuantity: number
|
||||||
|
unit?: string
|
||||||
|
category?: string
|
||||||
|
supplierId: string
|
||||||
|
supplierName: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 📋 ТИПЫ ФОРМЫ СОЗДАНИЯ ПОСТАВКИ
|
||||||
|
export interface CreateSupplyFormData {
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier | null
|
||||||
|
selectedLogistics: FulfillmentConsumableSupplier | null
|
||||||
|
selectedConsumables: SelectedFulfillmentConsumable[]
|
||||||
|
searchQuery: string
|
||||||
|
productSearchQuery: string
|
||||||
|
deliveryDate: string
|
||||||
|
notes: string
|
||||||
|
isCreatingSupply: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🔍 ТИПЫ ПОИСКОВЫХ ПАРАМЕТРОВ
|
||||||
|
export interface SupplierSearchParams {
|
||||||
|
searchQuery: string
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductSearchParams {
|
||||||
|
productSearchQuery: string
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier | null
|
||||||
|
type: 'CONSUMABLE'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 📊 ТИПЫ ДАННЫХ ЗАПРОСОВ
|
||||||
|
export interface CounterpartiesData {
|
||||||
|
myCounterparties: FulfillmentConsumableSupplier[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductsData {
|
||||||
|
organizationProducts: FulfillmentConsumableProduct[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🎯 ТИПЫ ДЕЙСТВИЙ И ОПЕРАЦИЙ
|
||||||
|
export interface QuantityUpdateParams {
|
||||||
|
productId: string
|
||||||
|
quantity: number
|
||||||
|
product: FulfillmentConsumableProduct
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SupplyCreationInput {
|
||||||
|
supplierId: string
|
||||||
|
logisticsPartnerId?: string // Добавляем логистического партнера
|
||||||
|
requestedDeliveryDate: string
|
||||||
|
items: Array<{
|
||||||
|
productId: string
|
||||||
|
requestedQuantity: number
|
||||||
|
}>
|
||||||
|
notes?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🔧 ТИПЫ УТИЛИТ И ХЕЛПЕРОВ
|
||||||
|
export interface StockCalculation {
|
||||||
|
totalStock: number
|
||||||
|
orderedStock: number
|
||||||
|
availableStock: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CurrencyFormatOptions {
|
||||||
|
style: 'currency'
|
||||||
|
currency: 'RUB'
|
||||||
|
minimumFractionDigits: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🚦 ТИПЫ СОСТОЯНИЙ ЗАГРУЗКИ
|
||||||
|
export interface LoadingStates {
|
||||||
|
counterpartiesLoading: boolean
|
||||||
|
productsLoading: boolean
|
||||||
|
isCreatingSupply: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
// ⚠️ ТИПЫ ОШИБОК И ВАЛИДАЦИИ
|
||||||
|
export interface ValidationError {
|
||||||
|
field: string
|
||||||
|
message: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StockValidationResult {
|
||||||
|
isValid: boolean
|
||||||
|
availableStock: number
|
||||||
|
requestedQuantity: number
|
||||||
|
error?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🎨 ТИПЫ UI КОМПОНЕНТОВ
|
||||||
|
export interface SupplierCardProps {
|
||||||
|
supplier: FulfillmentConsumableSupplier
|
||||||
|
isSelected: boolean
|
||||||
|
onSelect: (supplier: FulfillmentConsumableSupplier) => void
|
||||||
|
index: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductCardProps {
|
||||||
|
product: FulfillmentConsumableProduct
|
||||||
|
selectedQuantity: number
|
||||||
|
onUpdateQuantity: (productId: string, quantity: number) => void
|
||||||
|
index: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ShoppingCartProps {
|
||||||
|
selectedConsumables: SelectedFulfillmentConsumable[]
|
||||||
|
deliveryDate: string
|
||||||
|
notes: string
|
||||||
|
selectedLogistics: FulfillmentConsumableSupplier | null
|
||||||
|
logisticsPartners: FulfillmentConsumableSupplier[]
|
||||||
|
isCreatingSupply: boolean
|
||||||
|
onUpdateQuantity: (productId: string, quantity: number) => void
|
||||||
|
onSetDeliveryDate: (date: string) => void
|
||||||
|
onSetNotes: (notes: string) => void
|
||||||
|
onSetLogistics: (logistics: FulfillmentConsumableSupplier | null) => void
|
||||||
|
onCreateSupply: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
// 📈 ТИПЫ ВЫЧИСЛЕНИЙ И АНАЛИТИКИ
|
||||||
|
export interface SupplyTotals {
|
||||||
|
totalAmount: number
|
||||||
|
totalItems: number
|
||||||
|
itemsCount: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🎯 ТИПЫ СОБЫТИЙ И КОЛБЭКОВ
|
||||||
|
export type SupplierSelectHandler = (supplier: FulfillmentConsumableSupplier) => void
|
||||||
|
export type QuantityUpdateHandler = (productId: string, quantity: number) => void
|
||||||
|
export type SupplyCreateHandler = () => Promise<void>
|
||||||
|
export type SearchUpdateHandler = (query: string) => void
|
||||||
|
|
||||||
|
// 💾 ТИПЫ СТОРЕЙДЖА И КЕША
|
||||||
|
export interface CachedSupplierData {
|
||||||
|
suppliers: FulfillmentConsumableSupplier[]
|
||||||
|
lastFetch: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CachedProductData {
|
||||||
|
products: FulfillmentConsumableProduct[]
|
||||||
|
supplierId: string
|
||||||
|
lastFetch: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🌐 ТИПЫ ГРАФК ЗАПРОСОВ
|
||||||
|
export interface GraphQLQueryVariables {
|
||||||
|
organizationId?: string
|
||||||
|
search?: string | null
|
||||||
|
category?: string | null
|
||||||
|
type?: 'CONSUMABLE'
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateSupplyMutationResponse {
|
||||||
|
createFulfillmentConsumableSupply: {
|
||||||
|
success: boolean
|
||||||
|
message?: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🔄 ЭКСПОРТ ТИПОВ ДЛЯ ХУКОВ
|
||||||
|
export interface UseSupplierDataReturn {
|
||||||
|
suppliers: FulfillmentConsumableSupplier[]
|
||||||
|
logisticsPartners: FulfillmentConsumableSupplier[]
|
||||||
|
filteredSuppliers: FulfillmentConsumableSupplier[]
|
||||||
|
loading: boolean
|
||||||
|
error: Error | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseProductDataReturn {
|
||||||
|
products: FulfillmentConsumableProduct[]
|
||||||
|
loading: boolean
|
||||||
|
error: Error | null
|
||||||
|
refetch: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseSupplyFormReturn {
|
||||||
|
selectedSupplier: FulfillmentConsumableSupplier | null
|
||||||
|
selectedLogistics: FulfillmentConsumableSupplier | null
|
||||||
|
selectedConsumables: SelectedFulfillmentConsumable[]
|
||||||
|
searchQuery: string
|
||||||
|
productSearchQuery: string
|
||||||
|
deliveryDate: string
|
||||||
|
notes: string
|
||||||
|
setSelectedSupplier: (supplier: FulfillmentConsumableSupplier | null) => void
|
||||||
|
setSelectedLogistics: (logistics: FulfillmentConsumableSupplier | null) => void
|
||||||
|
setSelectedConsumables: (consumables: SelectedFulfillmentConsumable[]) => void
|
||||||
|
setSearchQuery: (query: string) => void
|
||||||
|
setProductSearchQuery: (query: string) => void
|
||||||
|
setDeliveryDate: (date: string) => void
|
||||||
|
setNotes: (notes: string) => void
|
||||||
|
resetForm: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseQuantityManagementReturn {
|
||||||
|
updateConsumableQuantity: (productId: string, quantity: number) => void
|
||||||
|
getSelectedQuantity: (productId: string) => number
|
||||||
|
getTotalAmount: () => number
|
||||||
|
getTotalItems: () => number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseSupplyCreationReturn {
|
||||||
|
createSupply: () => Promise<void>
|
||||||
|
isCreating: boolean
|
||||||
|
error: string | null
|
||||||
|
}
|
||||||
@ -0,0 +1,193 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// 🔧 ТИПЫ ДЛЯ СИСТЕМЫ СОЗДАНИЯ ПОСТАВОК РАСХОДНИКОВ СЕЛЛЕРА V2
|
||||||
|
// =============================================================================
|
||||||
|
// Адаптированные типы из основных типов для селлерской системы
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FulfillmentConsumableSupplier,
|
||||||
|
FulfillmentConsumableProduct,
|
||||||
|
SelectedFulfillmentConsumable,
|
||||||
|
SupplyCreationInput as BaseSupplyCreationInput,
|
||||||
|
CreateSupplyMutationResponse as BaseCreateSupplyMutationResponse,
|
||||||
|
} from './index'
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// 📦 СЕЛЛЕРСКИЕ ТИПЫ (АДАПТАЦИЯ)
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
// Селлер использует те же типы поставщиков что и фулфилмент
|
||||||
|
export type SellerConsumableSupplier = FulfillmentConsumableSupplier
|
||||||
|
export type SellerConsumableProduct = FulfillmentConsumableProduct
|
||||||
|
export type SelectedSellerConsumable = SelectedFulfillmentConsumable
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// 🆕 СПЕЦИФИЧНЫЕ ТИПЫ ДЛЯ СЕЛЛЕРА
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
// Статусы поставок селлера (5-статусная система)
|
||||||
|
export type SellerSupplyOrderStatus =
|
||||||
|
| 'PENDING' // Ожидает одобрения поставщика
|
||||||
|
| 'APPROVED' // Одобрено поставщиком
|
||||||
|
| 'SHIPPED' // Отгружено
|
||||||
|
| 'DELIVERED' // Доставлено
|
||||||
|
| 'COMPLETED' // Завершено
|
||||||
|
| 'CANCELLED' // Отменено
|
||||||
|
|
||||||
|
// Данные для создания поставки селлера
|
||||||
|
export interface SellerSupplyCreationInput {
|
||||||
|
fulfillmentCenterId: string // куда доставлять (FULFILLMENT партнер)
|
||||||
|
supplierId: string // от кого заказывать (WHOLESALE партнер)
|
||||||
|
logisticsPartnerId?: string // кто везет (LOGIST партнер, опционально)
|
||||||
|
requestedDeliveryDate: string // когда нужно
|
||||||
|
items: Array<{
|
||||||
|
productId: string
|
||||||
|
requestedQuantity: number
|
||||||
|
}>
|
||||||
|
notes?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Response для создания поставки селлера
|
||||||
|
export interface CreateSellerSupplyMutationResponse {
|
||||||
|
createSellerConsumableSupply: {
|
||||||
|
success: boolean
|
||||||
|
message: string
|
||||||
|
supplyOrder?: {
|
||||||
|
id: string
|
||||||
|
status: SellerSupplyOrderStatus
|
||||||
|
createdAt: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// 🎯 ТИПЫ ДЛЯ ХУКОВ (АДАПТАЦИЯ)
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export interface UseSellerSupplyCreationProps {
|
||||||
|
selectedSupplier: SellerConsumableSupplier | null
|
||||||
|
selectedFulfillment: SellerConsumableSupplier | null // 🆕 Выбор фулфилмента
|
||||||
|
selectedConsumables: SelectedSellerConsumable[]
|
||||||
|
deliveryDate: string
|
||||||
|
notes: string
|
||||||
|
resetForm: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseSellerSupplyCreationReturn {
|
||||||
|
createSupply: () => Promise<void>
|
||||||
|
isCreating: boolean
|
||||||
|
error: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseSellerSupplyFormReturn {
|
||||||
|
selectedSupplier: SellerConsumableSupplier | null
|
||||||
|
selectedFulfillment: SellerConsumableSupplier | null // 🆕 Дополнительное поле
|
||||||
|
selectedLogistics: SellerConsumableSupplier | null
|
||||||
|
selectedConsumables: SelectedSellerConsumable[]
|
||||||
|
searchQuery: string
|
||||||
|
productSearchQuery: string
|
||||||
|
deliveryDate: string
|
||||||
|
notes: string
|
||||||
|
setSelectedSupplier: (supplier: SellerConsumableSupplier | null) => void
|
||||||
|
setSelectedFulfillment: (fulfillment: SellerConsumableSupplier | null) => void // 🆕 Новый сеттер
|
||||||
|
setSelectedLogistics: (logistics: SellerConsumableSupplier | null) => void
|
||||||
|
setSelectedConsumables: (consumables: SelectedSellerConsumable[]) => void
|
||||||
|
setSearchQuery: (query: string) => void
|
||||||
|
setProductSearchQuery: (query: string) => void
|
||||||
|
setDeliveryDate: (date: string) => void
|
||||||
|
setNotes: (notes: string) => void
|
||||||
|
resetForm: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// 🎨 ТИПЫ UI КОМПОНЕНТОВ ДЛЯ СЕЛЛЕРА
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export interface SellerSuppliersBlockProps {
|
||||||
|
suppliers: SellerConsumableSupplier[]
|
||||||
|
fulfillmentCenters: SellerConsumableSupplier[] // 🆕 Список фулфилмент-центров
|
||||||
|
filteredSuppliers: SellerConsumableSupplier[]
|
||||||
|
filteredFulfillmentCenters: SellerConsumableSupplier[] // 🆕 Фильтрованные ФФ
|
||||||
|
selectedSupplier: SellerConsumableSupplier | null
|
||||||
|
selectedFulfillment: SellerConsumableSupplier | null // 🆕 Выбранный фулфилмент
|
||||||
|
searchQuery: string
|
||||||
|
loading: boolean
|
||||||
|
onSelectSupplier: (supplier: SellerConsumableSupplier | null) => void
|
||||||
|
onSelectFulfillment: (fulfillment: SellerConsumableSupplier | null) => void // 🆕
|
||||||
|
onSearchChange: (query: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SellerShoppingCartBlockProps {
|
||||||
|
selectedConsumables: SelectedSellerConsumable[]
|
||||||
|
selectedFulfillment: SellerConsumableSupplier | null // 🆕 Показ выбранного ФФ
|
||||||
|
deliveryDate: string
|
||||||
|
notes: string
|
||||||
|
selectedLogistics: SellerConsumableSupplier | null
|
||||||
|
logisticsPartners: SellerConsumableSupplier[]
|
||||||
|
isCreatingSupply: boolean
|
||||||
|
getTotalAmount: () => number
|
||||||
|
getTotalItems: () => number
|
||||||
|
formatCurrency: (amount: number) => string
|
||||||
|
onUpdateQuantity: (productId: string, quantity: number) => void
|
||||||
|
onSetDeliveryDate: (date: string) => void
|
||||||
|
onSetNotes: (notes: string) => void
|
||||||
|
onSetLogistics: (logistics: SellerConsumableSupplier | null) => void
|
||||||
|
onCreateSupply: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// 🔄 ТИПЫ ДЛЯ ПЕРЕКЛЮЧЕНИЯ СИСТЕМ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export interface SupplySystemConfig {
|
||||||
|
type: 'FULFILLMENT' | 'SELLER'
|
||||||
|
queries: {
|
||||||
|
GET_MY_SUPPLIES: any
|
||||||
|
CREATE_SUPPLY: any
|
||||||
|
GET_COUNTERPARTIES: any
|
||||||
|
GET_ORGANIZATION_PRODUCTS: any
|
||||||
|
}
|
||||||
|
components: {
|
||||||
|
SuppliersBlock: React.ComponentType<any>
|
||||||
|
ShoppingCartBlock: React.ComponentType<any>
|
||||||
|
}
|
||||||
|
hooks: {
|
||||||
|
useSupplyCreation: any
|
||||||
|
useSupplyForm: any
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// 🌐 ТИПЫ ДАННЫХ ЗАПРОСОВ ДЛЯ СЕЛЛЕРА
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export interface SellerSuppliesData {
|
||||||
|
mySellerConsumableSupplies: Array<{
|
||||||
|
id: string
|
||||||
|
status: SellerSupplyOrderStatus
|
||||||
|
seller: { id: string; name: string; inn: string }
|
||||||
|
fulfillmentCenter: { id: string; name: string; inn: string }
|
||||||
|
supplier?: { id: string; name: string; inn: string }
|
||||||
|
requestedDeliveryDate: string
|
||||||
|
totalCostWithDelivery?: number
|
||||||
|
items: Array<{
|
||||||
|
id: string
|
||||||
|
product: { id: string; name: string; article: string }
|
||||||
|
requestedQuantity: number
|
||||||
|
unitPrice: number
|
||||||
|
totalPrice: number
|
||||||
|
}>
|
||||||
|
createdAt: string
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IncomingSellerSuppliesData {
|
||||||
|
incomingSellerSupplies: Array<{
|
||||||
|
id: string
|
||||||
|
status: SellerSupplyOrderStatus
|
||||||
|
seller: { id: string; name: string; inn: string }
|
||||||
|
fulfillmentCenter: { id: string; name: string; inn: string }
|
||||||
|
requestedDeliveryDate: string
|
||||||
|
totalCostWithDelivery?: number
|
||||||
|
createdAt: string
|
||||||
|
}>
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user