Sfera/sfera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Обновлен компонент CreateConsumablesSupplyPage: улучшена логика обработки поставщиков и расходников, добавлены новые элементы интерфейса для выбора и поиска. Оптимизирована структура кода и улучшены стили для повышения удобства использования. Исправлены сообщения об ошибках и добавлены проверки обязательных полей.

Browse Source
This commit is contained in:
Veronika Smirnova
2025-07-24 12:48:02 +03:00
parent 106c1fd8bb
commit b1f78a34e2
1 changed files with 347 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

716
src/components/supplies/create-consumables-supply-page.tsx
View File

@ -200,7 +200,11 @@ export function CreateConsumablesSupplyPage() {
};
const handleCreateSupply = async () => {
if (!selectedSupplier || selectedConsumables.length === 0 || !deliveryDate) {
if (
!selectedSupplier ||
selectedConsumables.length === 0 ||
!deliveryDate
) {
toast.error("Заполните все обязательные поля");
return;
}
@ -226,7 +230,8 @@ export function CreateConsumablesSupplyPage() {
router.push("/supplies");
} else {
toast.error(
result.data?.createSupplyOrder?.message || "Ошибка при создании поставки"
result.data?.createSupplyOrder?.message ||
"Ошибка при создании поставки"
);
}
} catch (error) {
@ -237,265 +242,6 @@ export function CreateConsumablesSupplyPage() {
}
};
// Если выбран поставщик, показываем его товары
if (selectedSupplier) {
return (
<div className="h-screen flex overflow-hidden">
<Sidebar />
<main
className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}
>
<div className="h-full w-full flex flex-col">
{/* Заголовок с навигацией */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-3">
<Button
variant="ghost"
size="sm"
onClick={() => setSelectedSupplier(null)}
className="text-white/60 hover:text-white hover:bg-white/10"
>
<ArrowLeft className="h-4 w-4 mr-2" />
Назад к поставщикам
</Button>
<div>
<h1 className="text-2xl font-bold text-white mb-1">
Расходники поставщика
</h1>
<p className="text-white/60">
{selectedSupplier.name || selectedSupplier.fullName}
</p>
</div>
</div>
<Button
variant="ghost"
size="sm"
onClick={() => router.push("/supplies")}
className="text-white/60 hover:text-white hover:bg-white/10"
>
Отмена
</Button>
</div>
{/* Поиск по товарам */}
<div className="mb-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
<Input
placeholder="Поиск расходников..."
value={productSearchQuery}
onChange={(e) => setProductSearchQuery(e.target.value)}
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
/>
</div>
</div>
{/* Основной контент */}
<div className="flex-1 overflow-hidden flex gap-4">
{/* Список товаров */}
<div className="flex-1 overflow-y-auto">
{productsLoading ? (
<div className="text-center py-12">
<p className="text-white/60">Загрузка расходников...</p>
</div>
) : supplierProducts.length === 0 ? (
<div className="text-center py-12">
<Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
<p className="text-white/60">
У данного поставщика нет доступных расходников
</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{supplierProducts.map((product: ConsumableProduct) => {
const selectedQuantity = getSelectedQuantity(product.id);
return (
<Card
key={product.id}
className="bg-white/10 backdrop-blur border-white/20 p-4"
>
<div className="space-y-3">
{/* Изображение товара */}
<div className="aspect-square bg-white/5 rounded-lg overflow-hidden">
{product.images && product.images.length > 0 ? (
<Image
src={product.images[0].url}
alt={product.name}
width={200}
height={200}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<Wrench className="h-12 w-12 text-white/40" />
</div>
)}
</div>
{/* Информация о товаре */}
<div>
<h3 className="text-white font-medium mb-1 line-clamp-2">
{product.name}
</h3>
{product.category && (
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs mb-2">
{product.category.name}
</Badge>
)}
<p className="text-white/60 text-sm mb-2 line-clamp-2">
{product.description || "Описание отсутствует"}
</p>
<div className="flex items-center justify-between">
<span className="text-green-400 font-semibold">
{formatCurrency(product.price)}
{product.unit && (
<span className="text-white/60 text-sm ml-1">
/ {product.unit}
</span>
)}
</span>
{product.stock && (
<span className="text-white/60 text-sm">
В наличии: {product.stock}
</span>
)}
</div>
</div>
{/* Управление количеством */}
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
onClick={() =>
updateConsumableQuantity(
product.id,
Math.max(0, selectedQuantity - 1)
)
}
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
disabled={selectedQuantity === 0}
>
<Minus className="h-4 w-4" />
</Button>
<span className="text-white font-medium w-8 text-center">
{selectedQuantity}
</span>
<Button
variant="ghost"
size="sm"
onClick={() =>
updateConsumableQuantity(
product.id,
selectedQuantity + 1
)
}
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
>
<Plus className="h-4 w-4" />
</Button>
</div>
{selectedQuantity > 0 && (
<span className="text-green-400 font-medium text-sm">
{formatCurrency(
product.price * selectedQuantity
)}
</span>
)}
</div>
</div>
</Card>
);
})}
</div>
)}
</div>
{/* Корзина */}
{selectedConsumables.length > 0 && (
<div className="w-80 flex-shrink-0">
<Card className="bg-white/10 backdrop-blur border-white/20 p-4 sticky top-0">
<h3 className="text-white font-semibold mb-4 flex items-center">
<ShoppingCart className="h-4 w-4 mr-2" />
Корзина ({getTotalItems()} шт)
</h3>
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
{selectedConsumables.map((consumable) => (
<div
key={consumable.id}
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
>
<div className="flex-1 min-w-0">
<p className="text-white text-sm font-medium truncate">
{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-sm">
{formatCurrency(
consumable.price * consumable.selectedQuantity
)}
</span>
<Button
variant="ghost"
size="sm"
onClick={() =>
updateConsumableQuantity(consumable.id, 0)
}
className="h-6 w-6 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-4">
<div className="mb-4">
<label className="text-white/60 text-sm mb-2 block">
Дата поставки:
</label>
<Input
type="date"
value={deliveryDate}
onChange={(e) => setDeliveryDate(e.target.value)}
className="bg-white/10 border-white/20 text-white"
min={new Date().toISOString().split('T')[0]}
required
/>
</div>
<div className="flex items-center justify-between mb-4">
<span className="text-white font-semibold">Итого:</span>
<span className="text-green-400 font-bold text-lg">
{formatCurrency(getTotalAmount())}
</span>
</div>
<Button
onClick={handleCreateSupply}
disabled={isCreatingSupply || !deliveryDate}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50"
>
{isCreatingSupply ? "Создание..." : "Создать поставку расходников"}
</Button>
</div>
</Card>
</div>
)}
</div>
</div>
</main>
</div>
);
}
// Показываем список поставщиков
return (
<div className="h-screen flex overflow-hidden">
<Sidebar />
@ -510,7 +256,7 @@ export function CreateConsumablesSupplyPage() {
Создание поставки расходников
</h1>
<p className="text-white/60">
Выберите поставщика расходников для создания поставки
Выберите поставщика и добавьте расходники в заказ
</p>
</div>
<Button
@ -524,117 +270,349 @@ export function CreateConsumablesSupplyPage() {
</Button>
</div>
{/* Поиск */}
<div className="mb-6">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
<Input
placeholder="Поиск поставщиков по названию, ИНН..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10 max-w-md"
/>
</div>
</div>
{/* Список поставщиков */}
<div className="flex-1 overflow-y-auto">
{counterpartiesLoading ? (
<div className="text-center py-12">
<p className="text-white/60">Загрузка поставщиков...</p>
</div>
) : filteredSuppliers.length === 0 ? (
<div className="text-center py-12">
<Building2 className="h-12 w-12 text-white/40 mx-auto mb-4" />
<p className="text-white/60">
{searchQuery
? "Поставщики не найдены"
: "У вас пока нет партнеров-поставщиков расходников"}
</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredSuppliers.map((supplier: ConsumableSupplier) => (
<Card
key={supplier.id}
className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30"
onClick={() => setSelectedSupplier(supplier)}
>
<div className="space-y-4">
{/* Аватар и основная информация */}
<div className="flex items-start space-x-3">
<OrganizationAvatar
organization={{
id: supplier.id,
name:
supplier.name || supplier.fullName || "Поставщик",
users: supplier.users || [],
}}
size="md"
/>
<div className="flex-1 min-w-0">
<h3 className="text-white font-semibold text-lg mb-1 truncate">
{supplier.name || supplier.fullName || "Поставщик"}
</h3>
<div className="flex items-center space-x-1 mb-2">
{renderStars()}
<span className="text-white/60 text-sm ml-2">
4.5
</span>
</div>
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30">
<Wrench className="h-3 w-3 mr-1" />
Поставщик расходников
</Badge>
</div>
</div>
{/* Контактная информация */}
<div className="space-y-2">
{supplier.address && (
<div className="flex items-center space-x-2 text-white/60 text-sm">
<MapPin className="h-4 w-4" />
<span className="truncate">{supplier.address}</span>
</div>
)}
{supplier.phones && supplier.phones.length > 0 && (
<div className="flex items-center space-x-2 text-white/60 text-sm">
<Phone className="h-4 w-4" />
<span>{supplier.phones[0].value}</span>
</div>
)}
{supplier.emails && supplier.emails.length > 0 && (
<div className="flex items-center space-x-2 text-white/60 text-sm">
<Mail className="h-4 w-4" />
<span className="truncate">
{supplier.emails[0].value}
</span>
</div>
)}
</div>
{/* Дополнительная информация */}
<div className="pt-2 border-t border-white/10">
<div className="flex items-center justify-between text-sm">
<span className="text-white/60">ИНН:</span>
<span className="text-white">{supplier.inn}</span>
</div>
</div>
{/* Кнопка выбора */}
{/* Основной контент с двумя блоками */}
<div className="flex-1 overflow-hidden flex gap-4">
{/* Левая колонка - Поставщики и Расходники */}
<div className="flex-1 flex flex-col gap-4 overflow-hidden">
{/* Блок "Поставщики" */}
<Card className="bg-white/10 backdrop-blur border-white/20 flex-shrink-0">
<div className="p-4 border-b border-white/10">
<div className="flex items-center justify-between mb-3">
<h2 className="text-lg font-semibold text-white flex items-center">
<Building2 className="h-5 w-5 mr-2" />
Поставщики
</h2>
{selectedSupplier && (
<Button
className="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white"
onClick={(e) => {
e.stopPropagation();
setSelectedSupplier(supplier);
}}
variant="ghost"
size="sm"
onClick={() => setSelectedSupplier(null)}
className="text-white/60 hover:text-white hover:bg-white/10"
>
<Box className="h-4 w-4 mr-2" />
Выбрать поставщика
Сбросить выбор
</Button>
)}
</div>
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
<Input
placeholder="Поиск поставщиков по названию, ИНН..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
/>
</div>
</div>
<div className="p-4 max-h-60 overflow-y-auto">
{counterpartiesLoading ? (
<div className="text-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent mx-auto mb-3"></div>
<p className="text-white/60">Загрузка поставщиков...</p>
</div>
</Card>
))}
) : filteredSuppliers.length === 0 ? (
<div className="text-center py-8">
<Building2 className="h-8 w-8 text-white/40 mx-auto mb-2" />
<p className="text-white/60 text-sm">
{searchQuery
? "Поставщики не найдены"
: "У вас пока нет партнеров-поставщиков расходников"}
</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
{filteredSuppliers.map((supplier: ConsumableSupplier) => (
<Card
key={supplier.id}
className={`p-3 cursor-pointer transition-all border ${
selectedSupplier?.id === supplier.id
? "bg-orange-500/20 border-orange-500/50"
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"
}`}
onClick={() => setSelectedSupplier(supplier)}
>
<div className="flex items-center space-x-3">
<OrganizationAvatar
organization={{
id: supplier.id,
name:
supplier.name ||
supplier.fullName ||
"Поставщик",
fullName: supplier.fullName,
users: (supplier.users || []).map((user) => ({
id: user.id,
avatar: user.avatar,
})),
}}
size="sm"
/>
<div className="flex-1 min-w-0">
<h3 className="text-white font-medium text-sm truncate">
{supplier.name ||
supplier.fullName ||
"Поставщик"}
</h3>
<div className="flex items-center space-x-1 mb-1">
{renderStars(4.5)}
<span className="text-white/60 text-xs ml-1">
4.5
</span>
</div>
<p className="text-white/60 text-xs truncate">
ИНН: {supplier.inn}
</p>
</div>
{selectedSupplier?.id === supplier.id && (
<div className="flex-shrink-0">
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
Выбран
</Badge>
</div>
)}
</div>
</Card>
))}
</div>
)}
</div>
</Card>
{/* Блок "Расходники" */}
<Card className="bg-white/10 backdrop-blur border-white/20 flex-1 overflow-hidden">
<div className="p-4 border-b border-white/10">
<div className="flex items-center justify-between mb-3">
<h2 className="text-lg font-semibold text-white flex items-center">
<Wrench className="h-5 w-5 mr-2" />
Расходники
{selectedSupplier && (
<span className="text-white/60 text-sm font-normal ml-2">
- {selectedSupplier.name || selectedSupplier.fullName}
</span>
)}
</h2>
</div>
{selectedSupplier && (
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
<Input
placeholder="Поиск расходников..."
value={productSearchQuery}
onChange={(e) => setProductSearchQuery(e.target.value)}
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
/>
</div>
)}
</div>
<div className="p-4 flex-1 overflow-y-auto">
{!selectedSupplier ? (
<div className="text-center py-12">
<Wrench className="h-12 w-12 text-white/40 mx-auto mb-4" />
<p className="text-white/60">
Выберите поставщика для просмотра расходников
</p>
</div>
) : productsLoading ? (
<div className="text-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent mx-auto mb-3"></div>
<p className="text-white/60">Загрузка расходников...</p>
</div>
) : supplierProducts.length === 0 ? (
<div className="text-center py-12">
<Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
<p className="text-white/60">
У данного поставщика нет доступных расходников
</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{supplierProducts.map((product: ConsumableProduct) => {
const selectedQuantity = getSelectedQuantity(
product.id
);
return (
<Card
key={product.id}
className="bg-white/10 backdrop-blur border-white/20 p-4"
>
<div className="space-y-3">
{/* Изображение товара */}
<div className="aspect-square bg-white/5 rounded-lg overflow-hidden">
{product.images && product.images.length > 0 ? (
<Image
src={product.images[0].url}
alt={product.name}
width={200}
height={200}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<Wrench className="h-12 w-12 text-white/40" />
</div>
)}
</div>
{/* Информация о товаре */}
<div>
<h3 className="text-white font-medium mb-1 line-clamp-2">
{product.name}
</h3>
{product.category && (
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs mb-2">
{product.category.name}
</Badge>
)}
<p className="text-white/60 text-sm mb-2 line-clamp-2">
{product.description ||
"Описание отсутствует"}
</p>
<div className="flex items-center justify-between">
<span className="text-green-400 font-semibold">
{formatCurrency(product.price)}
{product.unit && (
<span className="text-white/60 text-sm ml-1">
/ {product.unit}
</span>
)}
</span>
{product.stock && (
<span className="text-white/60 text-sm">
В наличии: {product.stock}
</span>
)}
</div>
</div>
{/* Управление количеством */}
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
onClick={() =>
updateConsumableQuantity(
product.id,
Math.max(0, selectedQuantity - 1)
)
}
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
disabled={selectedQuantity === 0}
>
<Minus className="h-4 w-4" />
</Button>
<span className="text-white font-medium w-8 text-center">
{selectedQuantity}
</span>
<Button
variant="ghost"
size="sm"
onClick={() =>
updateConsumableQuantity(
product.id,
selectedQuantity + 1
)
}
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
>
<Plus className="h-4 w-4" />
</Button>
</div>
{selectedQuantity > 0 && (
<span className="text-green-400 font-medium text-sm">
{formatCurrency(
product.price * selectedQuantity
)}
</span>
)}
</div>
</div>
</Card>
);
})}
</div>
)}
</div>
</Card>
</div>
{/* Правая колонка - Корзина */}
{selectedConsumables.length > 0 && (
<div className="w-80 flex-shrink-0">
<Card className="bg-white/10 backdrop-blur border-white/20 p-4 sticky top-0">
<h3 className="text-white font-semibold mb-4 flex items-center">
<ShoppingCart className="h-4 w-4 mr-2" />
Корзина ({getTotalItems()} шт)
</h3>
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
{selectedConsumables.map((consumable) => (
<div
key={consumable.id}
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
>
<div className="flex-1 min-w-0">
<p className="text-white text-sm font-medium truncate">
{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-sm">
{formatCurrency(
consumable.price * consumable.selectedQuantity
)}
</span>
<Button
variant="ghost"
size="sm"
onClick={() =>
updateConsumableQuantity(consumable.id, 0)
}
className="h-6 w-6 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-4">
<div className="mb-4">
<label className="text-white/60 text-sm mb-2 block">
Дата поставки:
</label>
<Input
type="date"
value={deliveryDate}
onChange={(e) => setDeliveryDate(e.target.value)}
className="bg-white/10 border-white/20 text-white"
min={new Date().toISOString().split("T")[0]}
required
/>
</div>
<div className="flex items-center justify-between mb-4">
<span className="text-white font-semibold">Итого:</span>
<span className="text-green-400 font-bold text-lg">
{formatCurrency(getTotalAmount())}
</span>
</div>
<Button
onClick={handleCreateSupply}
disabled={isCreatingSupply || !deliveryDate}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50"
>
{isCreatingSupply
? "Создание..."
: "Создать поставку расходников"}
</Button>
</div>
</Card>
</div>
)}
</div>