diff --git a/src/components/admin/ui-kit-section.tsx b/src/components/admin/ui-kit-section.tsx index ae74a29..2f75fd4 100644 --- a/src/components/admin/ui-kit-section.tsx +++ b/src/components/admin/ui-kit-section.tsx @@ -8,6 +8,13 @@ import { CardsDemo } from './ui-kit/cards-demo' import { TypographyDemo } from './ui-kit/typography-demo' import { ColorsDemo } from './ui-kit/colors-demo' import { IconsDemo } from './ui-kit/icons-demo' +import { LayoutsDemo } from './ui-kit/layouts-demo' +import { NavigationDemo } from './ui-kit/navigation-demo' +import { SpecializedDemo } from './ui-kit/specialized-demo' +import { AnimationsDemo } from './ui-kit/animations-demo' +import { StatesDemo } from './ui-kit/states-demo' +import { MediaDemo } from './ui-kit/media-demo' +import { InteractiveDemo } from './ui-kit/interactive-demo' export function UIKitSection() { return ( @@ -18,44 +25,47 @@ export function UIKitSection() { - - +
+ Кнопки - + Формы - + Карточки - + Типографика - + Цвета - + Иконки - + + Макеты + + + Навигация + + + Специальные + + + Анимации + + + Состояния + + + Медиа + + + Интерактив + +
@@ -80,6 +90,34 @@ export function UIKitSection() { + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) diff --git a/src/components/admin/ui-kit/animations-demo.tsx b/src/components/admin/ui-kit/animations-demo.tsx new file mode 100644 index 0000000..9d0abb4 --- /dev/null +++ b/src/components/admin/ui-kit/animations-demo.tsx @@ -0,0 +1,555 @@ +"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 { Progress } from '@/components/ui/progress' +import { + Play, + Pause, + RotateCcw, + Zap, + Sparkles, + Loader, + RefreshCw, + Heart, + Star, + ArrowRight, + ChevronDown, + Bell, + Settings, + CheckCircle, + AlertTriangle, + Package, + Truck, + ShoppingCart +} from 'lucide-react' + +export function AnimationsDemo() { + const [isAnimating, setIsAnimating] = useState(false) + const [hoveredCard, setHoveredCard] = useState(null) + const [progress, setProgress] = useState(0) + const [isLoading, setIsLoading] = useState(false) + const [showNotification, setShowNotification] = useState(false) + + const startProgress = () => { + setProgress(0) + const interval = setInterval(() => { + setProgress((prev) => { + if (prev >= 100) { + clearInterval(interval) + return 100 + } + return prev + 10 + }) + }, 200) + } + + const showLoadingDemo = () => { + setIsLoading(true) + setTimeout(() => setIsLoading(false), 3000) + } + + const triggerNotification = () => { + setShowNotification(true) + setTimeout(() => setShowNotification(false), 3000) + } + + return ( +
+ {/* CSS Анимации */} + + + CSS Анимации + + + {/* Spin Animations */} +
+

Вращение и загрузка

+
+
+
+

animate-spin

+
+ +
+ +

icon spin

+
+ +
+ +

loader

+
+ +
+
+
+
+
+
+

dots bounce

+
+
+
+ + {/* Pulse Animations */} +
+

Пульсация

+
+
+
+

pulse circle

+
+ +
+ +

notification

+
+ +
+ +

heartbeat

+
+ +
+
+
+
+
+

ping

+
+
+
+ + {/* Bounce Animations */} +
+

Подпрыгивание

+
+
+ +

bounce arrow

+
+ +
+ +

bounce down

+
+ +
+ +

bounce button

+
+
+
+ + + + {/* Hover эффекты */} + + + Hover эффекты + + + {/* Scale Hover */} +
+

Масштабирование при наведении

+
+
+ +

scale-105

+
+ +
+ +

scale-110

+
+ +
+ +

scale-95

+
+ +
+ +

translate-y

+
+
+
+ + {/* Color Hover */} +
+

Изменение цвета

+
+ + + + + +
+
+ + {/* Shadow Hover */} +
+

Тени при наведении

+
+ {[1, 2, 3].map((card) => ( +
setHoveredCard(card)} + onMouseLeave={() => setHoveredCard(null)} + > +
+
+ +
+

Карточка {card}

+

Наведите для эффекта

+
+
+ ))} +
+
+ + + + {/* Transition эффекты */} + + + Переходы (Transitions) + + + {/* Duration Examples */} +
+

Продолжительность переходов

+
+ + + + + + + +
+
+ + {/* Easing Examples */} +
+

Типы анимации

+
+ + + + + +
+
+ + + + {/* Интерактивные анимации */} + + + Интерактивные анимации + + + {/* Loading Progress */} +
+

Прогресс загрузки

+
+
+ Прогресс: {progress}% + +
+ +
+ {progress === 0 && "Нажмите 'Запустить' для начала"} + {progress > 0 && progress < 100 && "Загрузка..."} + {progress === 100 && "Загрузка завершена!"} +
+
+
+ + {/* Loading States */} +
+

Состояния загрузки

+
+
+ Демо загрузки (3 сек) + +
+ + {isLoading && ( +
+
+
+ Подключение к серверу... +
+
+
+ Загрузка данных... +
+
+
+ Обработка результата... +
+
+ )} +
+
+ + {/* Notification Animation */} +
+

Анимация уведомлений

+
+
+ Всплывающее уведомление + +
+ + {showNotification && ( +
+
+
+ +
+
Успешно!
+
Операция выполнена успешно
+
+
+
+
+ )} +
+
+ + {/* Animation Toggle */} +
+

Переключение анимации

+
+
+ Управление анимацией + +
+ +
+
+
+

Pulse

+
+ +
+
+

Bounce

+
+ +
+
+

Spin

+
+ +
+
+

Transform

+
+
+
+
+ + + + {/* Сложные анимации */} + + + Сложные анимации + + + {/* Staggered Animation */} +
+

Поэтапная анимация

+
+
+ {[1, 2, 3, 4, 5].map((item) => ( +
+
+ {item} +
+
+ ))} +
+
+
+ + {/* Chain Animation */} +
+

Цепочка анимаций

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {/* Card Flip Animation */} +
+

Переворот карточки

+
+
+ {[1, 2, 3].map((card) => ( +
+
+ {/* Front */} +
+
+
+

Карточка {card}

+
+
+ + {/* Back */} +
+
+ +

Настройки

+
+
+
+
+ ))} +
+
+
+ + +
+ ) +} \ No newline at end of file diff --git a/src/components/admin/ui-kit/interactive-demo.tsx b/src/components/admin/ui-kit/interactive-demo.tsx new file mode 100644 index 0000000..e899cfe --- /dev/null +++ b/src/components/admin/ui-kit/interactive-demo.tsx @@ -0,0 +1,733 @@ +"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 { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import { Slider } from '@/components/ui/slider' +import { Switch } from '@/components/ui/switch' +import { Checkbox } from '@/components/ui/checkbox' +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' +import { Progress } from '@/components/ui/progress' +import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog' +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog' +import { + ChevronDown, + ChevronUp, + Plus, + Minus, + Star, + Heart, + ThumbsUp, + Share, + Bookmark, + Flag, + MoreHorizontal, + Settings, + Filter, + Search, + Calendar, + Clock, + User, + Bell, + MessageCircle, + Mail, + Phone, + MapPin, + Globe, + Zap, + Shield, + Eye, + EyeOff, + Lock, + Unlock, + Copy, + Check, + X, + AlertTriangle, + Info, + HelpCircle, + ExternalLink, + Download, + Upload, + Trash2, + Edit3, + Save, + RefreshCw +} from 'lucide-react' + +export function InteractiveDemo() { + const [rating, setRating] = useState(3) + const [liked, setLiked] = useState(false) + const [bookmarked, setBookmarked] = useState(false) + const [sliderValue, setSliderValue] = useState([50]) + const [switchValue, setSwitchValue] = useState(false) + const [checkboxValue, setCheckboxValue] = useState(false) + const [counter, setCounter] = useState(5) + const [showPassword, setShowPassword] = useState(false) + const [notifications, setNotifications] = useState(true) + const [expandedCard, setExpandedCard] = useState(null) + const [selectedItems, setSelectedItems] = useState([]) + const [copied, setCopied] = useState(false) + + const handleCopy = () => { + setCopied(true) + setTimeout(() => setCopied(false), 2000) + } + + const toggleItemSelection = (id: number) => { + setSelectedItems(prev => + prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id] + ) + } + + return ( +
+ {/* Интерактивные кнопки */} + + + Интерактивные кнопки + + + {/* Action Buttons */} +
+

Кнопки действий

+
+ + + + + + + +
+
+ + {/* Rating Stars */} +
+

Рейтинг звездами

+
+
+ Оцените товар: +
+ {[1, 2, 3, 4, 5].map((star) => ( + + ))} +
+ ({rating} из 5) +
+
+
+ + {/* Counter */} +
+

Счетчик

+
+
+ Количество: +
+ + +
+ setCounter(parseInt(e.target.value) || 0)} + className="text-center glass-input" + /> +
+ + +
+
+
+
+ + {/* Toggle Buttons */} +
+

Переключатели

+
+
+
+ + +
+
+ +
+
+ setCheckboxValue(!!checked)} + /> + +
+
+ +
+
+ + +
{sliderValue[0]}%
+
+
+
+
+ + + + {/* Формы и инпуты */} + + + Интерактивные формы + + + {/* Search Input */} +
+

Поиск с фильтрами

+
+
+
+ + +
+ + +
+
+
+ + {/* Password Input */} +
+

Ввод пароля

+
+
+ +
+ + +
+
+
+
+ + {/* Select Dropdown */} +
+

Выпадающие списки

+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + {/* Copy to Clipboard */} +
+

Копирование в буфер

+
+
+
+ +
+ +
+
+
+ + + + {/* Диалоги и модальные окна */} + + + Диалоги и модальные окна + + + {/* Alert Dialog */} +
+

Диалоги подтверждения

+
+ + + + + + + Подтвердите удаление + + Это действие нельзя отменить. Товар будет окончательно удален из системы. + + + + Отмена + Удалить + + + + + + + + + + + Сохранить изменения? + + Все внесенные изменения будут сохранены в системе. + + + + Отмена + Сохранить + + + + + + + + + + + + + Внимание! + + + Эта операция может повлиять на работу системы. Продолжить? + + + + Отмена + Продолжить + + + +
+
+ + {/* Regular Dialog */} +
+

Информационные диалоги

+
+ + + + + + + Настройки системы + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+ + + + + + + + + + О системе SferaV + +
+
+

+ SferaV - современная система управления бизнесом для фулфилмент-центров, + селлеров, логистических компаний и оптовиков. +

+ +
+
+ Версия: + 1.0.0 +
+
+ Сборка: + 2024.01.15 +
+
+ Лицензия: + MIT +
+
+
+
+
+ + +
+ + + + + + + + + + Справка + + + + FAQ + Контакты + Документация + + +
+
+
Как добавить товар?
+

Перейдите в раздел "Склад" и нажмите кнопку "Добавить товар".

+
+
+
Как связаться с поддержкой?
+

Используйте вкладку "Контакты" в этом окне.

+
+
+ + +
+
+ + support@sferav.com +
+
+ + +7 (495) 123-45-67 +
+
+ + Telegram: @sferav_support +
+
+ + +
+ + + +
+ + + + +
+
+ + + + {/* Расширяемые элементы */} + + + Расширяемые элементы + + + {/* Expandable Cards */} +
+

Расширяемые карточки

+
+ {[1, 2, 3].map((card) => ( +
+
setExpandedCard(expandedCard === card ? null : card)} + > +
+
+ +
+
+
Настройка {card}
+
Описание настройки {card}
+
+
+ + {expandedCard === card ? ( + + ) : ( + + )} +
+ + {expandedCard === card && ( +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ )} +
+ ))} +
+
+ + {/* Selectable List */} +
+

Выбираемый список

+
+
+ + Выбрано: {selectedItems.length} из 5 + +
+ + +
+
+ +
+ {[1, 2, 3, 4, 5].map((item) => ( +
toggleItemSelection(item)} + > +
+ toggleItemSelection(item)} + /> +
+
Элемент {item}
+
Описание элемента {item}
+
+ {selectedItems.includes(item) && ( + + )} +
+
+ ))} +
+ + {selectedItems.length > 0 && ( +
+ + +
+ )} +
+
+ + +
+ ) +} \ No newline at end of file diff --git a/src/components/admin/ui-kit/layouts-demo.tsx b/src/components/admin/ui-kit/layouts-demo.tsx new file mode 100644 index 0000000..e3337aa --- /dev/null +++ b/src/components/admin/ui-kit/layouts-demo.tsx @@ -0,0 +1,427 @@ +"use client" + +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 { + Layout, + Sidebar as SidebarIcon, + Monitor, + Smartphone, + Menu, + ChevronRight, + Home, + Settings, + Users, + MessageCircle, + Building, + Plus +} from 'lucide-react' + +export function LayoutsDemo() { + return ( +
+ {/* Основные Layout паттерны */} + + + Основные Layout паттерны + + + {/* Sidebar Layout */} +
+

Sidebar Layout

+
+
+ {/* Sidebar */} +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ {/* Main Content */} +
+
+
+
+
+
+
+
+
+
+ Sidebar + Main Content +
+
+
+ + {/* Full Sidebar Layout */} +
+

Full Sidebar Layout

+
+
+ {/* Full Sidebar */} +
+ {/* Profile */} +
+
+
+
+
+
+
+ {/* Menu Items */} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Main Content */} +
+
+
+
+
+
+
+
+
+
+ Full Sidebar с профилем и навигацией +
+
+
+ + {/* Grid Layout */} +
+

Grid Layout

+
+
+
+
+
+
+
+
+
+
+
+
+ Grid 3x2 layout +
+
+
+ + {/* Split Layout */} +
+

Split Layout (Мессенджер)

+
+
+ {/* Left Panel */} +
+
+
+ {[1, 2, 3, 4].map((item) => ( +
+
+
+
+
+
+
+ ))} +
+
+ {/* Right Panel */} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Split layout для чатов +
+
+
+ + + + {/* AuthLayout */} + + + Auth Layout + + +
+
+ {/* Left Side - Branding */} +
+
+
SferaV
+
Управление бизнесом
+
+
+ 🚚 Фулфилмент +
+
+ 📦 Логистика +
+
+ 🛒 Селлер +
+
+
+
+ {/* Right Side - Form */} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Двухколоночный layout для авторизации +
+
+ + + + {/* Adaptive Layouts */} + + + Адаптивные Layout + + + {/* Desktop */} +
+

+ + Desktop +

+
+
+
+
Sidebar
+
+
+
Main Content
+
+
+
+
+
+
+
+
+ lg:grid-cols-3 lg:gap-6 +
+
+
+ + {/* Mobile */} +
+

+ + Mobile +

+
+
+
+ {/* Mobile Header */} +
+ +
SferaV
+
+
+ {/* Mobile Content */} +
+
+
+
+
+
+
+
+
+
+ grid-cols-1 gap-3 +
+
+
+ + + + {/* Sidebar Examples */} + + + Компоненты Sidebar + + + {/* Mini Sidebar */} +
+

Mini Sidebar

+
+
+
+ + SF + +
+
+ + + + +
+
+
+ Компактный sidebar (w-16) +
+
+
+ + {/* Full Sidebar */} +
+

Full Sidebar

+
+
+ {/* Profile */} +
+ + SF + +
+
SferaV Inc
+ + Фулфилмент + +
+
+ + {/* Navigation */} +
+ + + + + +
+
+
+ Полный sidebar с профилем (w-56) +
+
+
+ + + + {/* Spacing and Structure */} + + + Структура и отступы + + + {/* Container */} +
+

Container Patterns

+
+
+
p-6 (24px padding)
+
+
p-4 (16px padding)
+
+
p-2 (8px padding)
+
+
+
+
+
+ + {/* Spacing */} +
+

Space Patterns

+
+
+
space-y-6
+
+
+
+
+
+
+
+
space-y-3
+
+
+
+
+
+
+
+
+ + +
+ ) +} \ No newline at end of file diff --git a/src/components/admin/ui-kit/media-demo.tsx b/src/components/admin/ui-kit/media-demo.tsx new file mode 100644 index 0000000..c2e918a --- /dev/null +++ b/src/components/admin/ui-kit/media-demo.tsx @@ -0,0 +1,591 @@ +"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 { Progress } from '@/components/ui/progress' +import { + Play, + Pause, + Volume2, + VolumeX, + SkipBack, + SkipForward, + Download, + Share, + MoreVertical, + Maximize2, + Minimize2, + Image as ImageIcon, + FileText, + File, + Archive, + Video, + Music, + Mic, + Camera, + Upload, + X, + Eye, + ZoomIn, + ZoomOut, + RotateCcw, + Crop, + Edit3, + Trash2, + Copy, + ExternalLink, + Paperclip, + Folder, + Search +} from 'lucide-react' + +export function MediaDemo() { + const [isPlaying, setIsPlaying] = useState(false) + const [isMuted, setIsMuted] = useState(false) + const [volume, setVolume] = useState(75) + const [progress, setProgress] = useState(30) + const [isFullscreen, setIsFullscreen] = useState(false) + const [selectedFile, setSelectedFile] = useState(null) + + return ( +
+ {/* Аудио компоненты */} + + + Аудио компоненты + + + {/* Audio Player */} +
+

Аудио плеер

+
+
+ {/* Play/Pause Button */} + + + {/* Progress and Time */} +
+
+ +
+
+
+
+ +
+ 1:23 + Голосовое сообщение + 4:15 +
+
+ + {/* Controls */} +
+ + +
+
+
+
+ + {/* Voice Recorder */} +
+

Диктофон

+
+
+
+ + +
+
Запись голоса
+
Нажмите для начала записи
+
+
+ +
+
+
+
+
+
+
+
+ 0:05 +
+
+
+
+ + {/* Mini Audio Controls */} +
+

Мини-контролы

+
+
+
+ +
+
+
+
+
+ 0:12 + 0:38 +
+
+
+
+ +
+
+
+ + Аудио +
+ +
+
+ +
+
+
+
+ Запись +
+ 1:23 +
+
+
+
+ + + + {/* Изображения */} + + + Компоненты изображений + + + {/* Image Gallery */} +
+

Галерея изображений

+
+ {[1, 2, 3, 4].map((image) => ( +
setSelectedFile(image)} + > +
+ +
+ + {/* Overlay */} +
+
+ + + +
+
+ + {/* Badge */} +
+ + IMG {image} + +
+
+ ))} +
+
+ + {/* Image Viewer */} +
+

Просмотрщик изображений

+
+ {selectedFile ? ( +
+ {/* Header */} +
+
+ +
+
image_{selectedFile}.jpg
+
1920×1080 • 2.4 MB
+
+
+ +
+ + + + + +
+
+ + {/* Image Preview */} +
+
+ +

Предпросмотр изображения #{selectedFile}

+
+
+ + {/* Actions */} +
+
+ + +
+ +
+ + +
+
+
+ ) : ( +
+
+ +

Выберите изображение для просмотра

+
+
+ )} +
+
+ + {/* Image Upload */} +
+

Загрузка изображений

+
+
+ +
Перетащите изображения сюда
+
или нажмите для выбора файлов
+ + + +
+ Поддерживаются: JPG, PNG, GIF до 10MB +
+
+
+
+ + + + {/* Файлы */} + + + Файловые компоненты + + + {/* File List */} +
+

Список файлов

+
+ {[ + { name: 'договор.pdf', size: '2.4 MB', type: 'pdf', icon: FileText, color: 'text-red-400' }, + { name: 'презентация.pptx', size: '8.1 MB', type: 'presentation', icon: File, color: 'text-orange-400' }, + { name: 'архив.zip', size: '15.6 MB', type: 'archive', icon: Archive, color: 'text-purple-400' }, + { name: 'видео.mp4', size: '45.2 MB', type: 'video', icon: Video, color: 'text-blue-400' }, + { name: 'аудио.mp3', size: '5.8 MB', type: 'audio', icon: Music, color: 'text-green-400' } + ].map((file, index) => ( +
+
+ +
+ +
+
{file.name}
+
+ {file.size} • {file.type} +
+
+ +
+ + + +
+
+ ))} +
+
+ + {/* File Upload Progress */} +
+

Прогресс загрузки

+
+
+
+
+ +
+
+
отчет.xlsx
+
3.2 MB • Загружается...
+
+ +
+ +
+ 65% • 2.1 MB из 3.2 MB + ~30 сек +
+
+ +
+
+
+ +
+
+
документ.pdf
+
1.8 MB • Загружен
+
+ +
+
+
+
+ + {/* File Attachments */} +
+

Вложения

+
+
+ +
+
Прикрепленные файлы
+
3 файла • 12.4 MB
+
+
+ +
+ {[ + { name: 'техзадание.docx', size: '2.1 MB', icon: FileText }, + { name: 'макеты.zip', size: '8.7 MB', icon: Archive }, + { name: 'презентация.pdf', size: '1.6 MB', icon: FileText } + ].map((file, index) => ( +
+ +
+
{file.name}
+
{file.size}
+
+ +
+ ))} +
+
+
+ + + + {/* Видео компоненты */} + + + Видео компоненты + + + {/* Video Player */} +
+

Видео плеер

+
+ {/* Video Area */} +
+
+
+ + {/* Play Overlay */} +
+ +
+ + {/* Fullscreen Toggle */} +
+ +
+
+ + {/* Video Controls */} +
+ {/* Progress Bar */} +
+ 2:34 +
+
+
+ 8:15 +
+ + {/* Controls */} +
+
+ + + +
+ +
+ + +
+
+
+ + +
+
+
+
+
+ + {/* Video Thumbnails */} +
+

Превью видео

+
+ {[1, 2, 3].map((video) => ( +
+
+
+ +
+
Видео презентация {video}
+
1080p • 12.5 MB
+
+
+ ))} +
+
+ + +
+ ) +} \ No newline at end of file diff --git a/src/components/admin/ui-kit/navigation-demo.tsx b/src/components/admin/ui-kit/navigation-demo.tsx new file mode 100644 index 0000000..9fe1416 --- /dev/null +++ b/src/components/admin/ui-kit/navigation-demo.tsx @@ -0,0 +1,548 @@ +"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 { Progress } from '@/components/ui/progress' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' +import { + Home, + Users, + MessageCircle, + Settings, + Building, + Package, + Truck, + Store, + ChevronRight, + ChevronLeft, + Menu, + X, + Search, + Bell, + ArrowLeft, + ArrowRight, + MoreHorizontal, + Check +} from 'lucide-react' + +export function NavigationDemo() { + const [activeTab, setActiveTab] = useState('nav') + const [currentStep, setCurrentStep] = useState(2) + + return ( +
+ {/* Навигационное меню */} + + + Навигационное меню + + + {/* Horizontal Navigation */} +
+

Горизонтальная навигация

+
+ +
+
+ + {/* Vertical Sidebar Navigation */} +
+

Вертикальная навигация (Sidebar)

+
+ {/* Compact Sidebar */} +
+
Mini
+ + + + + +
+ + {/* Full Sidebar */} +
+
Full Sidebar
+
+ + + + + + +
+
+
+
+ + {/* Mobile Navigation */} +
+

Мобильная навигация

+
+ {/* Mobile Header */} +
+
+ + SferaV + +
+
+ {/* Mobile Bottom Navigation */} +
+
+ + + + + +
+
+
+
+ + + + {/* Табы */} + + + Табы и вкладки + + + {/* Basic Tabs */} +
+

Базовые табы

+ + + + Навигация + + + Формы + + + Данные + + + Настройки + + + +
+

Содержимое вкладки "Навигация"

+
+ + +
+

Содержимое вкладки "Формы"

+
+ + +
+

Содержимое вкладки "Данные"

+
+ + +
+

Содержимое вкладки "Настройки"

+
+ + +
+ + {/* Icon Tabs */} +
+

Табы с иконками

+
+ + + +
+
+ + {/* Vertical Tabs */} +
+

Вертикальные табы

+
+
+ + + +
+
+
Главная панель
+

Содержимое выбранной вкладки отображается здесь

+
+
+
+ + + + {/* Breadcrumbs */} + + + Breadcrumbs (Хлебные крошки) + + + {/* Standard Breadcrumbs */} +
+

Стандартные breadcrumbs

+
+ +
+
+ + {/* Breadcrumbs with Back */} +
+

Breadcrumbs с кнопкой назад

+
+
+ + +
+
+
+ + + + {/* Pagination */} + + + Пагинация + + + {/* Standard Pagination */} +
+

Стандартная пагинация

+
+
+
+ Показано 1-10 из 234 записей +
+
+ + + + + + + +
+
+
+
+ + {/* Simple Pagination */} +
+

Простая пагинация

+
+
+ +
+ Страница 1 из 24 +
+ +
+
+
+ + + + {/* Progress Navigation */} + + + Навигация по шагам + + + {/* Step Progress */} +
+

Прогресс выполнения шагов

+
+
+ + Шаг {currentStep} из 5 + + + Регистрация + +
+ +
+ +
+ {[1, 2, 3, 4, 5].map((step) => ( +
+
+ {step < currentStep ? : step} +
+ {step < 5 && ( +
+ )} +
+ ))} +
+ +
+
+
+ + {/* Step Labels */} +
+

Шаги с подписями

+
+
+ {[ + { number: 1, label: 'Телефон', completed: true }, + { number: 2, label: 'SMS', completed: true }, + { number: 3, label: 'Тип кабинета', completed: false }, + { number: 4, label: 'Данные', completed: false }, + { number: 5, label: 'Подтверждение', completed: false } + ].map((step, index) => ( +
+
+ {step.completed ? : step.number} +
+ + {step.label} + + {index < 4 && ( +
+ )} +
+ ))} +
+
+
+ + + + {/* Contextual Navigation */} + + + Контекстная навигация + + + {/* Action Bar */} +
+

Панель действий

+
+
+
+ + + +
+
+ + +
+
+
+
+ + {/* Filter Navigation */} +
+

Фильтры

+
+
+ + + + +
+ + +
+
+
+ + +
+ ) +} \ No newline at end of file diff --git a/src/components/admin/ui-kit/specialized-demo.tsx b/src/components/admin/ui-kit/specialized-demo.tsx new file mode 100644 index 0000000..2e174f6 --- /dev/null +++ b/src/components/admin/ui-kit/specialized-demo.tsx @@ -0,0 +1,661 @@ +"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 ( +
+ {/* Мессенджер компоненты */} + + + Компоненты мессенджера + + + {/* Chat Interface */} +
+

Интерфейс чата

+
+ {/* Chat List */} +
+
+ +
+
Контрагенты
+

4 активных

+
+
+ +
+ + +
+ +
+
+
+ + ЛК + +
+
+ ЛогКом ООО + Логистика +
+

Последнее сообщение...

+
+
+
+ +
+
+ + СМ + +
+
+ СеллерМакс + Селлер +
+

Когда будет поставка?

+
+
+
+ +
+
+ + ОТ + +
+
+ ОптТорг + Оптовик +
+

Новый прайс готов

+
+
+
+
+
+ + {/* Chat Window */} +
+ {/* Chat Header */} +
+
+
+ + ЛК + +
+
+ ЛогКом ООО + Логистика +
+

Логистическая компания

+
+
+ +
+
+ + {/* Messages */} +
+ {/* Incoming Message */} +
+
+
+

Привет! Как дела с доставкой?

+
+

10:30

+
+
+ + {/* Outgoing Message */} +
+
+
+

Все отлично! Груз уже в пути

+
+

10:32

+
+
+ + {/* Voice Message */} +
+
+
+
+ +
+
+ +
+
+
+
+
+ 0:08 + 0:24 +
+
+
+
+

10:35

+
+
+ + {/* File Message */} +
+
+
+
+
+ +
+
+

договор.pdf

+

2.4 MB • PDF

+
+ +
+
+

10:38

+
+
+
+ + {/* Message Input */} +
+
+
+ +
+ + + + +
+
+
+
+
+ + + + {/* Корзина и товары */} + + + Компоненты корзины и товаров + + + {/* Product Card */} +
+

Карточка товара

+
+ {/* Product Image */} +
+
+ +
+
+ В наличии +
+
+ +
+
+ + {/* Product Info */} +
+
+
iPhone 15 Pro Max
+

Артикул: IP15PM-256-BLU

+
+ +
+
+
89 990 ₽
+
В наличии: 15 шт
+
+
+ + + + + +
+
+ +
+
+ + {cartQuantity} + +
+ +
+ + {/* Organization */} +
+ + ОТ + +
+
ОптТорг
+ Оптовик +
+
+
+
+
+ + {/* Cart Summary */} +
+

Корзина (сводка)

+
+
+ +
+
Корзина
+

3 товара

+
+
+ + {/* Cart Items */} +
+
+
+ +
+
+
iPhone 15 Pro
+
2 × 89 990 ₽
+
+
+ + 2 + + +
+
+ +
+
+ +
+
+
Samsung Galaxy
+
1 × 75 990 ₽
+
+
+ + 1 + + +
+
+
+ + {/* Summary */} +
+
+ Товары (3 шт) + 255 970 ₽ +
+
+ Доставка + Бесплатно +
+
+ Итого + 255 970 ₽ +
+
+ + +
+
+ + + + {/* Компоненты организаций */} + + + Компоненты организаций + + + {/* Organization Card */} +
+

Карточка организации

+
+
+ + ФЦ + +
+
+
ФулфилментЦентр ООО
+ Фулфилмент +
+

Полный цикл обработки заказов

+
+
+ +
+
+ + ИНН: 7707083893 +
+
+ + Москва, ул. Складская, 15 +
+
+ + +7 (495) 123-45-67 +
+
+ + info@fulfilment.ru +
+
+ +
+ + +
+
+
+ + {/* User Profile */} +
+

Профиль пользователя

+
+
+ + ИИ + +
+
Иван Иванов
+

Менеджер

+ Фулфилмент +
+
+ +
+
+

Телефон

+

+7 (999) 123-45-67

+
+
+

Email

+

ivan@company.ru

+
+
+

Telegram

+

@ivan_manager

+
+
+

WhatsApp

+

+7 (999) 123-45-67

+
+
+ +
+ + +
+
+
+ + + + {/* Состояния и индикаторы */} + + + Состояния и индикаторы + + + {/* Status Indicators */} +
+

Индикаторы состояния

+
+
+
+ +
+
Успешно
+
Операция завершена
+
+
+ +
+ +
+
Предупреждение
+
Требует внимания
+
+
+ +
+ +
+
Ошибка
+
Операция не выполнена
+
+
+ +
+ +
+
В обработке
+
Пожалуйста, подождите
+
+
+
+ +
+
+ Загрузка данных +
+
+ +
+
+ Прогресс выполнения + 75% +
+ +
+ +
+
+ Онлайн +
+ +
+
+ Оффлайн +
+ +
+
+ Ожидание +
+
+
+
+ + {/* Activity Timeline */} +
+

Временная шкала активности

+
+
+
+
+
+
+ Заказ создан + Завершено +
+

Заказ #12345 успешно создан

+

2 минуты назад

+
+
+ +
+
+
+
+ Обработка платежа + В процессе +
+

Проверка платежных данных

+

Сейчас

+
+
+ +
+
+
+
+ Отправка товара + Ожидание +
+

Подготовка к отправке

+
+
+ +
+
+
+
+ Доставка + Ожидание +
+

Передача курьеру

+
+
+
+
+
+ + +
+ ) +} \ No newline at end of file diff --git a/src/components/admin/ui-kit/states-demo.tsx b/src/components/admin/ui-kit/states-demo.tsx new file mode 100644 index 0000000..ffa461e --- /dev/null +++ b/src/components/admin/ui-kit/states-demo.tsx @@ -0,0 +1,633 @@ +"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 { Progress } from '@/components/ui/progress' +import { Alert, AlertDescription } from '@/components/ui/alert' +import { + CheckCircle, + AlertTriangle, + XCircle, + Info, + Clock, + Loader, + Zap, + Wifi, + WifiOff, + Battery, + BatteryLow, + Signal, + SignalLow, + SignalZero, + Circle, + Play, + Pause, + Square, + ArrowUp, + ArrowDown, + Minus, + TrendingUp, + TrendingDown, + Activity, + Users, + Package, + DollarSign, + Star, + Bookmark, + Heart, + Eye, + Download, + Upload, + Trash2 +} from 'lucide-react' + +export function StatesDemo() { + const [connectionStatus, setConnectionStatus] = useState<'online' | 'offline' | 'connecting'>('online') + const [taskStatus, setTaskStatus] = useState<'pending' | 'running' | 'completed' | 'failed'>('pending') + const [batteryLevel, setBatteryLevel] = useState(75) + + return ( +
+ {/* Статусы и состояния */} + + + Статусы и состояния + + + {/* Success States */} +
+

Состояния успеха

+
+ + + + Операция выполнена успешно + + + +
+
+ +
+
Заказ создан
+
#12345 успешно обработан
+
+
+
+
+ +
+ Завершено + Активно + Подтверждено + Проверено +
+
+ + {/* Warning States */} +
+

Предупреждения

+
+ + + + Требуется внимание пользователя + + + +
+
+ +
+
Низкий остаток
+
Товар заканчивается на складе
+
+
+
+
+ +
+ Предупреждение + Внимание + Ожидание + Черновик +
+
+ + {/* Error States */} +
+

Ошибки

+
+ + + + Произошла критическая ошибка + + + +
+
+ +
+
Ошибка платежа
+
Недостаточно средств на счету
+
+
+
+
+ +
+ Ошибка + Отклонено + Неактивно + Заблокировано +
+
+ + {/* Info States */} +
+

Информационные состояния

+
+ + + + Дополнительная информация для пользователя + + + +
+
+ +
+
Новая версия
+
Доступно обновление системы
+
+
+
+
+ +
+ Информация + Новое + Обновлено + Синхронизировано +
+
+ + + + {/* Индикаторы загрузки */} + + + Индикаторы загрузки + + + {/* Progress Bars */} +
+

Прогресс-бары

+
+
+
+ Загрузка файлов + 75% +
+ +
+ +
+
+ Обработка данных + 100% +
+ +
+ +
+
+ Синхронизация + 45% +
+ +
+ +
+
+ Ошибка загрузки + 35% +
+ +
+
+
+ + {/* Loading Spinners */} +
+

Спиннеры загрузки

+
+
+
+

Загрузка

+
+ +
+ +

Обработка

+
+ +
+
+
+
+
+
+

Ожидание

+
+ +
+
+
+
+
+

Прогресс

+
+
+
+ + {/* Loading States */} +
+

Состояния загрузки

+
+
+ +
+
Подготовка к загрузке
+
Инициализация процесса...
+
+ Ожидание +
+ +
+ +
+
Загрузка данных
+
Получение информации с сервера...
+
+ В процессе +
+ +
+ +
+
Загрузка завершена
+
Все данные успешно получены
+
+ Готово +
+
+
+ + + + {/* Интерактивные состояния */} + + + Интерактивные состояния + + + {/* Connection Status */} +
+

Статус подключения

+
+
+ Статус сети +
+ + + +
+
+ +
+ {connectionStatus === 'online' && ( + <> + +
+
Подключено
+
Стабильное соединение
+
+
+
+
+ + )} + + {connectionStatus === 'connecting' && ( + <> +
+ +
+
+
+
+
+
Подключение
+
Установка соединения...
+
+
+
+
+ + )} + + {connectionStatus === 'offline' && ( + <> + +
+
Отключено
+
Нет подключения к сети
+
+
+
+
+ + )} +
+
+
+ + {/* Task Status */} +
+

Статус задач

+
+
+ Выполнение задачи +
+ + + + +
+
+ +
+
+ {taskStatus === 'pending' && } + {taskStatus === 'running' && } + {taskStatus === 'completed' && } + {taskStatus === 'failed' && } + +
+
+ Обработка заказа #12345 +
+
+ {taskStatus === 'pending' && 'Ожидает выполнения'} + {taskStatus === 'running' && 'Выполняется...'} + {taskStatus === 'completed' && 'Успешно завершено'} + {taskStatus === 'failed' && 'Ошибка выполнения'} +
+
+ + + {taskStatus === 'pending' && 'Ожидание'} + {taskStatus === 'running' && 'Выполняется'} + {taskStatus === 'completed' && 'Завершено'} + {taskStatus === 'failed' && 'Ошибка'} + +
+ + {taskStatus === 'running' && ( + + )} +
+
+
+ + {/* Battery Level */} +
+

Уровень заряда

+
+
+ Батарея устройства +
+ + +
+
+ +
+ {batteryLevel > 20 ? ( + 50 ? 'text-green-400' : 'text-yellow-400'}`} /> + ) : ( + + )} + +
+
+ Заряд батареи + 50 ? 'text-green-300' : + batteryLevel > 20 ? 'text-yellow-300' : + 'text-red-300' + }`}> + {batteryLevel}% + +
+ 50 ? '[&>div]:bg-green-500' : + batteryLevel > 20 ? '[&>div]:bg-yellow-500' : + '[&>div]:bg-red-500' + }`} + /> +
+ + 50 ? 'bg-green-500/20 text-green-300' : + batteryLevel > 20 ? 'bg-yellow-500/20 text-yellow-300' : + 'bg-red-500/20 text-red-300' + }> + {batteryLevel > 50 ? 'Заряжена' : + batteryLevel > 20 ? 'Средний' : + 'Низкий'} + +
+
+
+ + + + {/* Статистические индикаторы */} + + + Статистические индикаторы + + + {/* Metric Cards */} +
+

Карточки метрик

+
+
+
+ + +
+
1,234
+
Пользователи
+
+ + +12% +
+
+ +
+
+ + +
+
856
+
Заказы
+
+ + -5% +
+
+ +
+
+ + +
+
₽45,678
+
Доход
+
+ Без изменений +
+
+ +
+
+ + +
+
98.5%
+
Uptime
+
+ + +0.2% +
+
+
+
+ + {/* Status Dots */} +
+

Точечные индикаторы

+
+
+
+
+ Сервер 1 - Онлайн +
+
+
+ Сервер 2 - Активен +
+
+
+ Сервер 3 - Обслуживание +
+
+
+ Сервер 4 - Недоступен +
+
+ +
+
+ Задача 1 + +
+
+ Задача 2 + +
+
+ Задача 3 + +
+
+ Задача 4 + +
+
+
+
+ + +
+ ) +} \ No newline at end of file diff --git a/src/components/auth-guard.tsx b/src/components/auth-guard.tsx index 4b79829..2fede79 100644 --- a/src/components/auth-guard.tsx +++ b/src/components/auth-guard.tsx @@ -44,7 +44,7 @@ export function AuthGuard({ children, fallback }: AuthGuardProps) { // Показываем лоадер пока проверяем авторизацию if (isChecking || isLoading) { return ( -
+

Проверяем авторизацию...

diff --git a/src/components/cart/cart-dashboard.tsx b/src/components/cart/cart-dashboard.tsx index 7fe5fc5..603693a 100644 --- a/src/components/cart/cart-dashboard.tsx +++ b/src/components/cart/cart-dashboard.tsx @@ -16,7 +16,7 @@ export function CartDashboard() { if (loading) { return ( -
+
@@ -32,7 +32,7 @@ export function CartDashboard() { if (error) { return ( -
+
@@ -48,7 +48,7 @@ export function CartDashboard() { } return ( -
+
diff --git a/src/components/dashboard/dashboard-home.tsx b/src/components/dashboard/dashboard-home.tsx index 47f9c50..645d9ba 100644 --- a/src/components/dashboard/dashboard-home.tsx +++ b/src/components/dashboard/dashboard-home.tsx @@ -21,7 +21,7 @@ export function DashboardHome() { return ( -
+
diff --git a/src/components/dashboard/dashboard.tsx b/src/components/dashboard/dashboard.tsx index aae316f..f8708cd 100644 --- a/src/components/dashboard/dashboard.tsx +++ b/src/components/dashboard/dashboard.tsx @@ -21,7 +21,7 @@ export function Dashboard() { } return ( -
+
{renderContent()} diff --git a/src/components/dashboard/user-settings.tsx b/src/components/dashboard/user-settings.tsx index 05d5f24..7703b47 100644 --- a/src/components/dashboard/user-settings.tsx +++ b/src/components/dashboard/user-settings.tsx @@ -550,7 +550,7 @@ export function UserSettings() { } return ( -
+
diff --git a/src/components/employees/employees-dashboard.tsx b/src/components/employees/employees-dashboard.tsx index ad3722f..162c1f2 100644 --- a/src/components/employees/employees-dashboard.tsx +++ b/src/components/employees/employees-dashboard.tsx @@ -341,7 +341,7 @@ ${employees.map((emp: Employee) => if (loading) { return ( -
+
@@ -355,7 +355,7 @@ ${employees.map((emp: Employee) => } return ( -
+
diff --git a/src/components/market/market-dashboard.tsx b/src/components/market/market-dashboard.tsx index 0834d21..d2c894b 100644 --- a/src/components/market/market-dashboard.tsx +++ b/src/components/market/market-dashboard.tsx @@ -36,7 +36,7 @@ export function MarketDashboard() { } return ( -
+
diff --git a/src/components/messenger/messenger-dashboard.tsx b/src/components/messenger/messenger-dashboard.tsx index 06375eb..4155d0d 100644 --- a/src/components/messenger/messenger-dashboard.tsx +++ b/src/components/messenger/messenger-dashboard.tsx @@ -38,7 +38,7 @@ export function MessengerDashboard() { // Если нет контрагентов, показываем заглушку if (!counterpartiesLoading && counterparties.length === 0) { return ( -
+
@@ -61,7 +61,7 @@ export function MessengerDashboard() { } return ( -
+
diff --git a/src/components/partners/partners-dashboard.tsx b/src/components/partners/partners-dashboard.tsx index adf5982..59cd4eb 100644 --- a/src/components/partners/partners-dashboard.tsx +++ b/src/components/partners/partners-dashboard.tsx @@ -11,7 +11,7 @@ import { MarketWholesale } from '../market/market-wholesale' export function PartnersDashboard() { return ( -
+
diff --git a/src/components/services/services-dashboard.tsx b/src/components/services/services-dashboard.tsx index 1da9e05..93c0dd8 100644 --- a/src/components/services/services-dashboard.tsx +++ b/src/components/services/services-dashboard.tsx @@ -8,7 +8,7 @@ import { LogisticsTab } from './logistics-tab' export function ServicesDashboard() { return ( -
+
diff --git a/src/components/supplies/create-supply-page.tsx b/src/components/supplies/create-supply-page.tsx index 905c678..9600c32 100644 --- a/src/components/supplies/create-supply-page.tsx +++ b/src/components/supplies/create-supply-page.tsx @@ -320,7 +320,7 @@ export function CreateSupplyPage() { // Рендер товаров оптовика if (selectedWholesaler && selectedVariant === 'wholesaler') { return ( -
+
@@ -669,7 +669,7 @@ export function CreateSupplyPage() { // Рендер выбора оптовиков if (selectedVariant === 'wholesaler') { return ( -
+
@@ -970,7 +970,7 @@ export function CreateSupplyPage() { // Главная страница выбора варианта return ( -
+
diff --git a/src/components/supplies/supplies-dashboard.tsx b/src/components/supplies/supplies-dashboard.tsx index c501e7c..f168d81 100644 --- a/src/components/supplies/supplies-dashboard.tsx +++ b/src/components/supplies/supplies-dashboard.tsx @@ -327,7 +327,7 @@ export function SuppliesDashboard() { } return ( -
+
diff --git a/src/components/warehouse/warehouse-dashboard.tsx b/src/components/warehouse/warehouse-dashboard.tsx index 94ffd26..47908c9 100644 --- a/src/components/warehouse/warehouse-dashboard.tsx +++ b/src/components/warehouse/warehouse-dashboard.tsx @@ -74,7 +74,7 @@ export function WarehouseDashboard() { if (error) { return ( -
+
@@ -102,7 +102,7 @@ export function WarehouseDashboard() { } return ( -
+