210 lines
7.7 KiB
TypeScript
210 lines
7.7 KiB
TypeScript
"use client"
|
||
|
||
import React, { useState } from 'react'
|
||
import { Card } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Package, Plus, Search, Warehouse } from 'lucide-react'
|
||
|
||
interface MyWarehouseItem {
|
||
id: string
|
||
sku: string
|
||
name: string
|
||
category: string
|
||
quantity: number
|
||
price: number
|
||
location: string
|
||
status: 'in_stock' | 'low_stock' | 'out_of_stock'
|
||
lastUpdated: string
|
||
}
|
||
|
||
export function MyWarehouseTab() {
|
||
const [searchTerm, setSearchTerm] = useState('')
|
||
const [items, setItems] = useState<MyWarehouseItem[]>([
|
||
{
|
||
id: '1',
|
||
sku: 'SKU-001',
|
||
name: 'Товар 1',
|
||
category: 'Электроника',
|
||
quantity: 25,
|
||
price: 1500,
|
||
location: 'A-01-15',
|
||
status: 'in_stock',
|
||
lastUpdated: '2024-01-15'
|
||
},
|
||
{
|
||
id: '2',
|
||
sku: 'SKU-002',
|
||
name: 'Товар 2',
|
||
category: 'Одежда',
|
||
quantity: 5,
|
||
price: 800,
|
||
location: 'B-02-08',
|
||
status: 'low_stock',
|
||
lastUpdated: '2024-01-14'
|
||
},
|
||
{
|
||
id: '3',
|
||
sku: 'SKU-003',
|
||
name: 'Товар 3',
|
||
category: 'Дом и сад',
|
||
quantity: 0,
|
||
price: 650,
|
||
location: 'C-01-22',
|
||
status: 'out_of_stock',
|
||
lastUpdated: '2024-01-13'
|
||
}
|
||
])
|
||
|
||
const filteredItems = items.filter(item => {
|
||
if (!searchTerm) return true
|
||
const search = searchTerm.toLowerCase()
|
||
return (
|
||
item.name.toLowerCase().includes(search) ||
|
||
item.sku.toLowerCase().includes(search) ||
|
||
item.category.toLowerCase().includes(search)
|
||
)
|
||
})
|
||
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case 'in_stock': return 'text-green-400'
|
||
case 'low_stock': return 'text-yellow-400'
|
||
case 'out_of_stock': return 'text-red-400'
|
||
default: return 'text-white/60'
|
||
}
|
||
}
|
||
|
||
const getStatusText = (status: string) => {
|
||
switch (status) {
|
||
case 'in_stock': return 'В наличии'
|
||
case 'low_stock': return 'Мало'
|
||
case 'out_of_stock': return 'Нет в наличии'
|
||
default: return 'Неизвестно'
|
||
}
|
||
}
|
||
|
||
const totalItems = items.length
|
||
const totalQuantity = items.reduce((sum, item) => sum + item.quantity, 0)
|
||
const totalValue = items.reduce((sum, item) => sum + (item.quantity * item.price), 0)
|
||
const lowStockItems = items.filter(item => item.status === 'low_stock' || item.status === 'out_of_stock').length
|
||
|
||
return (
|
||
<div className="h-full flex flex-col space-y-6">
|
||
{/* Статистика */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<Card className="glass-card border-white/10 p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-white/60 text-sm">Общее кол-во товаров</p>
|
||
<p className="text-2xl font-bold text-white">{totalItems}</p>
|
||
</div>
|
||
<Package className="h-8 w-8 text-blue-400" />
|
||
</div>
|
||
</Card>
|
||
|
||
<Card className="glass-card border-white/10 p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-white/60 text-sm">Общее количество</p>
|
||
<p className="text-2xl font-bold text-white">{totalQuantity}</p>
|
||
</div>
|
||
<Warehouse className="h-8 w-8 text-green-400" />
|
||
</div>
|
||
</Card>
|
||
|
||
<Card className="glass-card border-white/10 p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-white/60 text-sm">Общая стоимость</p>
|
||
<p className="text-2xl font-bold text-white">{totalValue.toLocaleString()} ₽</p>
|
||
</div>
|
||
<div className="h-8 w-8 bg-purple-500 rounded-lg flex items-center justify-center text-white font-bold">₽</div>
|
||
</div>
|
||
</Card>
|
||
|
||
<Card className="glass-card border-white/10 p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-white/60 text-sm">Требует внимания</p>
|
||
<p className="text-2xl font-bold text-yellow-400">{lowStockItems}</p>
|
||
</div>
|
||
<div className="h-8 w-8 bg-yellow-500 rounded-lg flex items-center justify-center">
|
||
<span className="text-white text-lg">⚠</span>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Панель управления */}
|
||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
|
||
<div className="relative flex-1 max-w-md">
|
||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
|
||
<Input
|
||
placeholder="Поиск товаров..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="pl-10 bg-white/5 border-white/10 text-white placeholder:text-white/40"
|
||
/>
|
||
</div>
|
||
<Button className="bg-blue-600 hover:bg-blue-700">
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
Добавить товар
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Список товаров */}
|
||
<div className="flex-1 overflow-hidden">
|
||
{filteredItems.length === 0 ? (
|
||
<Card className="glass-card border-white/10 p-8 text-center">
|
||
<Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
|
||
<h3 className="text-lg font-medium text-white mb-2">
|
||
{searchTerm ? 'Товары не найдены' : 'Ваш склад пуст'}
|
||
</h3>
|
||
<p className="text-white/60 mb-4">
|
||
{searchTerm ? 'Попробуйте изменить параметры поиска' : 'Добавьте первый товар на склад'}
|
||
</p>
|
||
{!searchTerm && (
|
||
<Button className="bg-blue-600 hover:bg-blue-700">
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
Добавить товар
|
||
</Button>
|
||
)}
|
||
</Card>
|
||
) : (
|
||
<div className="overflow-y-auto pr-2 max-h-full">
|
||
{/* Заголовок таблицы */}
|
||
<div className="grid grid-cols-7 gap-4 p-4 border-b border-white/10 text-white/60 text-sm font-medium">
|
||
<div>SKU</div>
|
||
<div>Название</div>
|
||
<div>Категория</div>
|
||
<div>Количество</div>
|
||
<div>Цена</div>
|
||
<div>Локация</div>
|
||
<div>Статус</div>
|
||
</div>
|
||
|
||
{/* Строки товаров */}
|
||
<div className="space-y-1">
|
||
{filteredItems.map((item) => (
|
||
<Card key={item.id} className="glass-card border-white/10 p-4 hover:bg-white/5 transition-colors">
|
||
<div className="grid grid-cols-7 gap-4 items-center">
|
||
<div className="text-white font-mono text-sm">{item.sku}</div>
|
||
<div className="text-white font-medium">{item.name}</div>
|
||
<div className="text-white/60 text-sm">{item.category}</div>
|
||
<div className="text-white font-bold">{item.quantity}</div>
|
||
<div className="text-white">{item.price.toLocaleString()} ₽</div>
|
||
<div className="text-white/60 text-sm font-mono">{item.location}</div>
|
||
<div className={`text-sm font-medium ${getStatusColor(item.status)}`}>
|
||
{getStatusText(item.status)}
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|