661 lines
31 KiB
TypeScript
661 lines
31 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from 'react'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Progress } from '@/components/ui/progress'
|
||
import {
|
||
MessageCircle,
|
||
Send,
|
||
Paperclip,
|
||
Smile,
|
||
Play,
|
||
Pause,
|
||
Volume2,
|
||
Download,
|
||
ShoppingCart,
|
||
Plus,
|
||
Minus,
|
||
Trash2,
|
||
Star,
|
||
Heart,
|
||
Package,
|
||
Building,
|
||
Users,
|
||
Phone,
|
||
Mail,
|
||
MapPin,
|
||
FileText,
|
||
Image as ImageIcon,
|
||
Mic,
|
||
MoreVertical,
|
||
Search,
|
||
Filter,
|
||
Eye,
|
||
Calendar,
|
||
Clock,
|
||
CheckCircle,
|
||
AlertCircle,
|
||
XCircle
|
||
} from 'lucide-react'
|
||
|
||
export function SpecializedDemo() {
|
||
const [cartQuantity, setCartQuantity] = useState(2)
|
||
const [isFavorite, setIsFavorite] = useState(false)
|
||
const [isPlaying, setIsPlaying] = useState(false)
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Мессенджер компоненты */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Компоненты мессенджера</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Chat Interface */}
|
||
<div>
|
||
<h4 className="text-white/90 text-sm font-medium mb-3">Интерфейс чата</h4>
|
||
<div className="glass-card rounded-lg border border-white/10 h-80 flex">
|
||
{/* Chat List */}
|
||
<div className="w-80 border-r border-white/10 p-4 space-y-3">
|
||
<div className="flex items-center space-x-2 mb-4">
|
||
<Users className="h-5 w-5 text-blue-400" />
|
||
<div>
|
||
<h5 className="text-white font-medium">Контрагенты</h5>
|
||
<p className="text-white/60 text-sm">4 активных</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
|
||
<Input placeholder="Поиск..." className="pl-10 glass-input text-white" />
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="glass-card p-3 rounded-lg border border-primary/30 bg-primary/10">
|
||
<div className="flex items-center space-x-3">
|
||
<Avatar className="h-10 w-10 bg-blue-500/30">
|
||
<AvatarFallback className="bg-blue-500/30 text-white">ЛК</AvatarFallback>
|
||
</Avatar>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-white font-medium text-sm">ЛогКом ООО</span>
|
||
<Badge className="bg-orange-500/20 text-orange-300 text-xs">Логистика</Badge>
|
||
</div>
|
||
<p className="text-white/60 text-xs">Последнее сообщение...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="glass-card p-3 rounded-lg border border-white/10">
|
||
<div className="flex items-center space-x-3">
|
||
<Avatar className="h-10 w-10 bg-green-500/30">
|
||
<AvatarFallback className="bg-green-500/30 text-white">СМ</AvatarFallback>
|
||
</Avatar>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-white font-medium text-sm">СеллерМакс</span>
|
||
<Badge className="bg-green-500/20 text-green-300 text-xs">Селлер</Badge>
|
||
</div>
|
||
<p className="text-white/60 text-xs">Когда будет поставка?</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="glass-card p-3 rounded-lg border border-white/10">
|
||
<div className="flex items-center space-x-3">
|
||
<Avatar className="h-10 w-10 bg-purple-500/30">
|
||
<AvatarFallback className="bg-purple-500/30 text-white">ОТ</AvatarFallback>
|
||
</Avatar>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-white font-medium text-sm">ОптТорг</span>
|
||
<Badge className="bg-purple-500/20 text-purple-300 text-xs">Оптовик</Badge>
|
||
</div>
|
||
<p className="text-white/60 text-xs">Новый прайс готов</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Chat Window */}
|
||
<div className="flex-1 flex flex-col">
|
||
{/* Chat Header */}
|
||
<div className="p-4 border-b border-white/10">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<Avatar className="h-10 w-10 bg-blue-500/30">
|
||
<AvatarFallback className="bg-blue-500/30 text-white">ЛК</AvatarFallback>
|
||
</Avatar>
|
||
<div>
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-white font-medium">ЛогКом ООО</span>
|
||
<Badge className="bg-orange-500/20 text-orange-300 text-xs">Логистика</Badge>
|
||
</div>
|
||
<p className="text-white/60 text-sm">Логистическая компания</p>
|
||
</div>
|
||
</div>
|
||
<Button variant="ghost" size="icon">
|
||
<MoreVertical className="h-4 w-4 text-white/60" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Messages */}
|
||
<div className="flex-1 p-4 space-y-4 overflow-y-auto">
|
||
{/* Incoming Message */}
|
||
<div className="flex">
|
||
<div className="max-w-xs">
|
||
<div className="bg-white/10 border border-white/20 rounded-lg p-3">
|
||
<p className="text-white text-sm">Привет! Как дела с доставкой?</p>
|
||
</div>
|
||
<p className="text-white/50 text-xs mt-1">10:30</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Outgoing Message */}
|
||
<div className="flex justify-end">
|
||
<div className="max-w-xs">
|
||
<div className="bg-blue-500/20 border border-blue-500/30 rounded-lg p-3">
|
||
<p className="text-white text-sm">Все отлично! Груз уже в пути</p>
|
||
</div>
|
||
<p className="text-blue-300/70 text-xs mt-1 text-right">10:32</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Voice Message */}
|
||
<div className="flex">
|
||
<div className="max-w-xs">
|
||
<div className="bg-white/10 border border-white/20 rounded-lg p-3">
|
||
<div className="flex items-center space-x-3">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setIsPlaying(!isPlaying)}
|
||
className="text-white hover:bg-white/20"
|
||
>
|
||
{isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
|
||
</Button>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2">
|
||
<Volume2 className="h-3 w-3 text-white/60" />
|
||
<div className="flex-1 h-1 bg-white/20 rounded-full">
|
||
<div className="h-full w-1/3 bg-white/60 rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-between text-xs text-white/50 mt-1">
|
||
<span>0:08</span>
|
||
<span>0:24</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p className="text-white/50 text-xs mt-1">10:35</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* File Message */}
|
||
<div className="flex justify-end">
|
||
<div className="max-w-xs">
|
||
<div className="bg-blue-500/20 border border-blue-500/30 rounded-lg p-3">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 bg-blue-500/30 rounded-lg flex items-center justify-center">
|
||
<FileText className="h-5 w-5 text-white" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<p className="text-white font-medium text-sm">договор.pdf</p>
|
||
<p className="text-blue-300/70 text-xs">2.4 MB • PDF</p>
|
||
</div>
|
||
<Button variant="ghost" size="icon" className="text-blue-300">
|
||
<Download className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<p className="text-blue-300/70 text-xs mt-1 text-right">10:38</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Message Input */}
|
||
<div className="p-4 border-t border-white/10">
|
||
<div className="flex items-center space-x-2">
|
||
<div className="flex-1">
|
||
<Input
|
||
placeholder="Введите сообщение..."
|
||
className="glass-input text-white"
|
||
/>
|
||
</div>
|
||
<Button variant="ghost" size="icon" className="text-white/60">
|
||
<Smile className="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="text-white/60">
|
||
<Paperclip className="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="text-white/60">
|
||
<Mic className="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="glass" size="icon">
|
||
<Send className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Корзина и товары */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Компоненты корзины и товаров</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Product Card */}
|
||
<div>
|
||
<h4 className="text-white/90 text-sm font-medium mb-3">Карточка товара</h4>
|
||
<div className="w-64 glass-card rounded-lg border border-white/10 overflow-hidden">
|
||
{/* Product Image */}
|
||
<div className="relative h-40 bg-white/5">
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<Package className="h-16 w-16 text-white/30" />
|
||
</div>
|
||
<div className="absolute top-2 left-2">
|
||
<Badge className="bg-green-500/20 text-green-300 text-xs">В наличии</Badge>
|
||
</div>
|
||
<div className="absolute top-2 right-2">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setIsFavorite(!isFavorite)}
|
||
className="w-8 h-8 bg-black/50 hover:bg-black/70"
|
||
>
|
||
<Heart className={`h-4 w-4 ${isFavorite ? 'text-red-400 fill-current' : 'text-white/60'}`} />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Product Info */}
|
||
<div className="p-4 space-y-3">
|
||
<div>
|
||
<h5 className="text-white font-medium text-sm mb-1">iPhone 15 Pro Max</h5>
|
||
<p className="text-white/60 text-xs">Артикул: IP15PM-256-BLU</p>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<div className="text-white font-semibold">89 990 ₽</div>
|
||
<div className="text-white/60 text-xs">В наличии: 15 шт</div>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Star className="h-3 w-3 text-yellow-400 fill-current" />
|
||
<Star className="h-3 w-3 text-yellow-400 fill-current" />
|
||
<Star className="h-3 w-3 text-yellow-400 fill-current" />
|
||
<Star className="h-3 w-3 text-yellow-400 fill-current" />
|
||
<Star className="h-3 w-3 text-white/30" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<div className="flex items-center space-x-1 glass-input rounded px-2 py-1">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setCartQuantity(Math.max(1, cartQuantity - 1))}
|
||
className="w-6 h-6 p-0"
|
||
>
|
||
<Minus className="h-3 w-3" />
|
||
</Button>
|
||
<span className="text-white text-sm w-8 text-center">{cartQuantity}</span>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setCartQuantity(cartQuantity + 1)}
|
||
className="w-6 h-6 p-0"
|
||
>
|
||
<Plus className="h-3 w-3" />
|
||
</Button>
|
||
</div>
|
||
<Button variant="glass" className="flex-1 h-8 text-xs">
|
||
<ShoppingCart className="h-3 w-3 mr-2" />
|
||
В корзину
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Organization */}
|
||
<div className="flex items-center space-x-2 pt-2 border-t border-white/10">
|
||
<Avatar className="h-6 w-6 bg-purple-500/30">
|
||
<AvatarFallback className="bg-purple-500/30 text-white text-xs">ОТ</AvatarFallback>
|
||
</Avatar>
|
||
<div className="flex-1">
|
||
<div className="text-white text-xs font-medium">ОптТорг</div>
|
||
<Badge className="bg-purple-500/20 text-purple-300 text-xs">Оптовик</Badge>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Cart Summary */}
|
||
<div>
|
||
<h4 className="text-white/90 text-sm font-medium mb-3">Корзина (сводка)</h4>
|
||
<div className="w-80 glass-card rounded-lg border border-white/10 p-4 space-y-4">
|
||
<div className="flex items-center space-x-3">
|
||
<ShoppingCart className="h-5 w-5 text-purple-400" />
|
||
<div>
|
||
<h5 className="text-white font-medium">Корзина</h5>
|
||
<p className="text-white/60 text-sm">3 товара</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Cart Items */}
|
||
<div className="space-y-3">
|
||
<div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
|
||
<div className="w-12 h-12 bg-white/5 rounded flex items-center justify-center">
|
||
<Package className="h-6 w-6 text-white/30" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-white text-sm font-medium">iPhone 15 Pro</div>
|
||
<div className="text-white/60 text-xs">2 × 89 990 ₽</div>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||
<Minus className="h-3 w-3 text-white/60" />
|
||
</Button>
|
||
<span className="text-white text-sm w-6 text-center">2</span>
|
||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||
<Plus className="h-3 w-3 text-white/60" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="w-6 h-6 text-red-400">
|
||
<Trash2 className="h-3 w-3" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
|
||
<div className="w-12 h-12 bg-white/5 rounded flex items-center justify-center">
|
||
<Package className="h-6 w-6 text-white/30" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-white text-sm font-medium">Samsung Galaxy</div>
|
||
<div className="text-white/60 text-xs">1 × 75 990 ₽</div>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||
<Minus className="h-3 w-3 text-white/60" />
|
||
</Button>
|
||
<span className="text-white text-sm w-6 text-center">1</span>
|
||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||
<Plus className="h-3 w-3 text-white/60" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="w-6 h-6 text-red-400">
|
||
<Trash2 className="h-3 w-3" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Summary */}
|
||
<div className="border-t border-white/10 pt-4 space-y-2">
|
||
<div className="flex justify-between text-white/60 text-sm">
|
||
<span>Товары (3 шт)</span>
|
||
<span>255 970 ₽</span>
|
||
</div>
|
||
<div className="flex justify-between text-white/60 text-sm">
|
||
<span>Доставка</span>
|
||
<span>Бесплатно</span>
|
||
</div>
|
||
<div className="flex justify-between text-white font-semibold">
|
||
<span>Итого</span>
|
||
<span>255 970 ₽</span>
|
||
</div>
|
||
</div>
|
||
|
||
<Button variant="glass" className="w-full">
|
||
Оформить заказ
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Компоненты организаций */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Компоненты организаций</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Organization Card */}
|
||
<div>
|
||
<h4 className="text-white/90 text-sm font-medium mb-3">Карточка организации</h4>
|
||
<div className="w-80 glass-card rounded-lg border border-white/10 p-4 space-y-4">
|
||
<div className="flex items-start space-x-3">
|
||
<Avatar className="h-12 w-12 bg-blue-500/30">
|
||
<AvatarFallback className="bg-blue-500/30 text-white">ФЦ</AvatarFallback>
|
||
</Avatar>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2 mb-1">
|
||
<h5 className="text-white font-medium">ФулфилментЦентр ООО</h5>
|
||
<Badge className="bg-blue-500/20 text-blue-300 text-xs">Фулфилмент</Badge>
|
||
</div>
|
||
<p className="text-white/60 text-sm">Полный цикл обработки заказов</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex items-center space-x-2 text-white/70">
|
||
<Building className="h-4 w-4 text-white/40" />
|
||
<span>ИНН: 7707083893</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2 text-white/70">
|
||
<MapPin className="h-4 w-4 text-white/40" />
|
||
<span>Москва, ул. Складская, 15</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2 text-white/70">
|
||
<Phone className="h-4 w-4 text-white/40" />
|
||
<span>+7 (495) 123-45-67</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2 text-white/70">
|
||
<Mail className="h-4 w-4 text-white/40" />
|
||
<span>info@fulfilment.ru</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2 pt-2 border-t border-white/10">
|
||
<Button variant="glass" className="flex-1 h-8 text-xs">
|
||
Добавить в контрагенты
|
||
</Button>
|
||
<Button variant="outline" size="icon" className="h-8 w-8">
|
||
<Eye className="h-3 w-3" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* User Profile */}
|
||
<div>
|
||
<h4 className="text-white/90 text-sm font-medium mb-3">Профиль пользователя</h4>
|
||
<div className="w-80 glass-card rounded-lg border border-white/10 p-4 space-y-4">
|
||
<div className="flex items-center space-x-4">
|
||
<Avatar className="h-16 w-16 bg-primary/30">
|
||
<AvatarFallback className="bg-primary/30 text-white text-xl">ИИ</AvatarFallback>
|
||
</Avatar>
|
||
<div className="flex-1">
|
||
<h5 className="text-white font-medium">Иван Иванов</h5>
|
||
<p className="text-white/60 text-sm">Менеджер</p>
|
||
<Badge className="bg-blue-500/20 text-blue-300 text-xs mt-1">Фулфилмент</Badge>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||
<div className="space-y-1">
|
||
<p className="text-white/60">Телефон</p>
|
||
<p className="text-white">+7 (999) 123-45-67</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="text-white/60">Email</p>
|
||
<p className="text-white">ivan@company.ru</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="text-white/60">Telegram</p>
|
||
<p className="text-white">@ivan_manager</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="text-white/60">WhatsApp</p>
|
||
<p className="text-white">+7 (999) 123-45-67</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2 pt-2 border-t border-white/10">
|
||
<Button variant="glass" className="flex-1 h-8 text-xs">
|
||
<MessageCircle className="h-3 w-3 mr-2" />
|
||
Написать
|
||
</Button>
|
||
<Button variant="outline" className="flex-1 h-8 text-xs">
|
||
<Phone className="h-3 w-3 mr-2" />
|
||
Позвонить
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Состояния и индикаторы */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Состояния и индикаторы</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Status Indicators */}
|
||
<div>
|
||
<h4 className="text-white/90 text-sm font-medium mb-3">Индикаторы состояния</h4>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="glass-card p-4 rounded-lg border border-white/10 space-y-3">
|
||
<div className="flex items-center space-x-2">
|
||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||
<div>
|
||
<div className="text-white font-medium text-sm">Успешно</div>
|
||
<div className="text-green-300/70 text-xs">Операция завершена</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<AlertCircle className="h-5 w-5 text-yellow-400" />
|
||
<div>
|
||
<div className="text-white font-medium text-sm">Предупреждение</div>
|
||
<div className="text-yellow-300/70 text-xs">Требует внимания</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<XCircle className="h-5 w-5 text-red-400" />
|
||
<div>
|
||
<div className="text-white font-medium text-sm">Ошибка</div>
|
||
<div className="text-red-300/70 text-xs">Операция не выполнена</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<Clock className="h-5 w-5 text-blue-400" />
|
||
<div>
|
||
<div className="text-white font-medium text-sm">В обработке</div>
|
||
<div className="text-blue-300/70 text-xs">Пожалуйста, подождите</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="glass-card p-4 rounded-lg border border-white/10 space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-white text-sm">Загрузка данных</span>
|
||
<div className="w-4 h-4 border-2 border-white/20 border-t-white animate-spin rounded-full"></div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex items-center justify-between text-sm mb-2">
|
||
<span className="text-white">Прогресс выполнения</span>
|
||
<span className="text-white/60">75%</span>
|
||
</div>
|
||
<Progress value={75} className="h-2" />
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||
<span className="text-white text-sm">Онлайн</span>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-2 h-2 bg-red-400 rounded-full"></div>
|
||
<span className="text-white text-sm">Оффлайн</span>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
|
||
<span className="text-white text-sm">Ожидание</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Activity Timeline */}
|
||
<div>
|
||
<h4 className="text-white/90 text-sm font-medium mb-3">Временная шкала активности</h4>
|
||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||
<div className="space-y-4">
|
||
<div className="flex items-start space-x-3">
|
||
<div className="w-2 h-2 bg-green-400 rounded-full mt-2"></div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-white text-sm font-medium">Заказ создан</span>
|
||
<Badge className="bg-green-500/20 text-green-300 text-xs">Завершено</Badge>
|
||
</div>
|
||
<p className="text-white/60 text-xs">Заказ #12345 успешно создан</p>
|
||
<p className="text-white/40 text-xs">2 минуты назад</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start space-x-3">
|
||
<div className="w-2 h-2 bg-blue-400 rounded-full mt-2 animate-pulse"></div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-white text-sm font-medium">Обработка платежа</span>
|
||
<Badge className="bg-blue-500/20 text-blue-300 text-xs">В процессе</Badge>
|
||
</div>
|
||
<p className="text-white/60 text-xs">Проверка платежных данных</p>
|
||
<p className="text-white/40 text-xs">Сейчас</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start space-x-3">
|
||
<div className="w-2 h-2 bg-white/20 rounded-full mt-2"></div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-white/60 text-sm">Отправка товара</span>
|
||
<Badge variant="outline" className="border-white/20 text-white/60 text-xs">Ожидание</Badge>
|
||
</div>
|
||
<p className="text-white/40 text-xs">Подготовка к отправке</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start space-x-3">
|
||
<div className="w-2 h-2 bg-white/20 rounded-full mt-2"></div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-white/60 text-sm">Доставка</span>
|
||
<Badge variant="outline" className="border-white/20 text-white/60 text-xs">Ожидание</Badge>
|
||
</div>
|
||
<p className="text-white/40 text-xs">Передача курьеру</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|