Добавлены модели и функциональность для управления администраторами, включая авторизацию через JWT, запросы и мутации для получения информации об администраторах и управления пользователями. Обновлены стили и логика работы с токенами в Apollo Client. Улучшен интерфейс взаимодействия с пользователем.

src/components/admin/ui-kit/icons-demo.tsx

@@ -0,0 +1,543 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { 
+  // Основные иконки
+  Home, Settings, User, Search, Bell, Heart, Share2, Download, Upload, 
+  Edit, Trash2, Plus, Minus, X, Check, ChevronDown, ChevronUp, ChevronLeft, 
+  ChevronRight, ArrowLeft, ArrowRight, ArrowUp, ArrowDown,
+  
+  // Бизнес иконки
+  Building, Package, Truck, Users, Phone, Mail, Calendar, Clock, MapPin,
+  TrendingUp, TrendingDown, BarChart, PieChart, DollarSign, CreditCard,
+  
+  // Интерфейс
+  Menu, MoreHorizontal, MoreVertical, Eye, EyeOff, Lock, Unlock, Key,
+  Shield, AlertCircle, AlertTriangle, Info, CheckCircle, XCircle,
+  
+  // Файлы и медиа
+  File, FileText, Image, Video, Music, Camera, Paperclip, Link2,
+  
+  // Действия
+  Play, Pause, Square, SkipForward, SkipBack, Volume2, VolumeX,
+  
+  // Социальные
+  MessageCircle, Send, ThumbsUp, ThumbsDown, Star, Bookmark,
+  
+  // Статус
+  Wifi, WifiOff, Battery, Zap, Globe, Monitor, Smartphone, Tablet
+} from 'lucide-react'
+
+const iconSections = [
+  {
+    title: 'Основные иконки',
+    icons: [
+      { icon: Home, name: 'Home' },
+      { icon: Settings, name: 'Settings' },
+      { icon: User, name: 'User' },
+      { icon: Search, name: 'Search' },
+      { icon: Bell, name: 'Bell' },
+      { icon: Heart, name: 'Heart' },
+      { icon: Share2, name: 'Share2' },
+      { icon: Download, name: 'Download' },
+      { icon: Upload, name: 'Upload' },
+      { icon: Edit, name: 'Edit' },
+      { icon: Trash2, name: 'Trash2' },
+      { icon: Plus, name: 'Plus' },
+      { icon: Minus, name: 'Minus' },
+      { icon: X, name: 'X' },
+      { icon: Check, name: 'Check' },
+    ]
+  },
+  {
+    title: 'Навигация',
+    icons: [
+      { icon: ChevronDown, name: 'ChevronDown' },
+      { icon: ChevronUp, name: 'ChevronUp' },
+      { icon: ChevronLeft, name: 'ChevronLeft' },
+      { icon: ChevronRight, name: 'ChevronRight' },
+      { icon: ArrowLeft, name: 'ArrowLeft' },
+      { icon: ArrowRight, name: 'ArrowRight' },
+      { icon: ArrowUp, name: 'ArrowUp' },
+      { icon: ArrowDown, name: 'ArrowDown' },
+      { icon: Menu, name: 'Menu' },
+      { icon: MoreHorizontal, name: 'MoreHorizontal' },
+      { icon: MoreVertical, name: 'MoreVertical' },
+    ]
+  },
+  {
+    title: 'Бизнес и коммерция',
+    icons: [
+      { icon: Building, name: 'Building' },
+      { icon: Package, name: 'Package' },
+      { icon: Truck, name: 'Truck' },
+      { icon: Users, name: 'Users' },
+      { icon: Phone, name: 'Phone' },
+      { icon: Mail, name: 'Mail' },
+      { icon: Calendar, name: 'Calendar' },
+      { icon: Clock, name: 'Clock' },
+      { icon: MapPin, name: 'MapPin' },
+      { icon: TrendingUp, name: 'TrendingUp' },
+      { icon: TrendingDown, name: 'TrendingDown' },
+      { icon: BarChart, name: 'BarChart' },
+      { icon: PieChart, name: 'PieChart' },
+      { icon: DollarSign, name: 'DollarSign' },
+      { icon: CreditCard, name: 'CreditCard' },
+    ]
+  },
+  {
+    title: 'Безопасность и статус',
+    icons: [
+      { icon: Eye, name: 'Eye' },
+      { icon: EyeOff, name: 'EyeOff' },
+      { icon: Lock, name: 'Lock' },
+      { icon: Unlock, name: 'Unlock' },
+      { icon: Key, name: 'Key' },
+      { icon: Shield, name: 'Shield' },
+      { icon: AlertCircle, name: 'AlertCircle' },
+      { icon: AlertTriangle, name: 'AlertTriangle' },
+      { icon: Info, name: 'Info' },
+      { icon: CheckCircle, name: 'CheckCircle' },
+      { icon: XCircle, name: 'XCircle' },
+    ]
+  },
+  {
+    title: 'Файлы и медиа',
+    icons: [
+      { icon: File, name: 'File' },
+      { icon: FileText, name: 'FileText' },
+      { icon: Image, name: 'Image' },
+      { icon: Video, name: 'Video' },
+      { icon: Music, name: 'Music' },
+      { icon: Camera, name: 'Camera' },
+      { icon: Paperclip, name: 'Paperclip' },
+      { icon: Link2, name: 'Link2' },
+    ]
+  },
+  {
+    title: 'Медиа контролы',
+    icons: [
+      { icon: Play, name: 'Play' },
+      { icon: Pause, name: 'Pause' },
+      { icon: Square, name: 'Square' },
+      { icon: SkipForward, name: 'SkipForward' },
+      { icon: SkipBack, name: 'SkipBack' },
+      { icon: Volume2, name: 'Volume2' },
+      { icon: VolumeX, name: 'VolumeX' },
+    ]
+  },
+  {
+    title: 'Коммуникации',
+    icons: [
+      { icon: MessageCircle, name: 'MessageCircle' },
+      { icon: Send, name: 'Send' },
+      { icon: ThumbsUp, name: 'ThumbsUp' },
+      { icon: ThumbsDown, name: 'ThumbsDown' },
+      { icon: Star, name: 'Star' },
+      { icon: Bookmark, name: 'Bookmark' },
+    ]
+  },
+  {
+    title: 'Устройства и подключения',
+    icons: [
+      { icon: Wifi, name: 'Wifi' },
+      { icon: WifiOff, name: 'WifiOff' },
+      { icon: Battery, name: 'Battery' },
+      { icon: Zap, name: 'Zap' },
+      { icon: Globe, name: 'Globe' },
+      { icon: Monitor, name: 'Monitor' },
+      { icon: Smartphone, name: 'Smartphone' },
+      { icon: Tablet, name: 'Tablet' },
+    ]
+  }
+]
+
+export function IconsDemo() {
+  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">
+          <div className="flex items-center gap-8">
+            <div className="text-center space-y-2">
+              <Settings className="h-3 w-3 text-white mx-auto" />
+              <div className="text-white/70 text-xs">h-3 w-3</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Settings className="h-4 w-4 text-white mx-auto" />
+              <div className="text-white/70 text-xs">h-4 w-4</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Settings className="h-5 w-5 text-white mx-auto" />
+              <div className="text-white/70 text-xs">h-5 w-5</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Settings className="h-6 w-6 text-white mx-auto" />
+              <div className="text-white/70 text-xs">h-6 w-6</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Settings className="h-8 w-8 text-white mx-auto" />
+              <div className="text-white/70 text-xs">h-8 w-8</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Settings className="h-10 w-10 text-white mx-auto" />
+              <div className="text-white/70 text-xs">h-10 w-10</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Settings className="h-12 w-12 text-white mx-auto" />
+              <div className="text-white/70 text-xs">h-12 w-12</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Цвета иконок */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Цвета иконок</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-3 md:grid-cols-5 gap-4">
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-white mx-auto" />
+              <div className="text-white/70 text-xs">text-white</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-white/80 mx-auto" />
+              <div className="text-white/70 text-xs">text-white/80</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-white/60 mx-auto" />
+              <div className="text-white/70 text-xs">text-white/60</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-primary mx-auto" />
+              <div className="text-white/70 text-xs">text-primary</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-red-400 mx-auto" />
+              <div className="text-white/70 text-xs">text-red-400</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-green-400 mx-auto" />
+              <div className="text-white/70 text-xs">text-green-400</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-blue-400 mx-auto" />
+              <div className="text-white/70 text-xs">text-blue-400</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-yellow-400 mx-auto" />
+              <div className="text-white/70 text-xs">text-yellow-400</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-purple-400 mx-auto" />
+              <div className="text-white/70 text-xs">text-purple-400</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-pink-400 mx-auto" />
+              <div className="text-white/70 text-xs">text-pink-400</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Заполненные иконки */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Заполненные иконки</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center gap-8">
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-red-400 mx-auto" />
+              <div className="text-white/70 text-xs">Обычная</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Heart className="h-8 w-8 text-red-400 mx-auto fill-red-400" />
+              <div className="text-white/70 text-xs">Заполненная</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Star className="h-8 w-8 text-yellow-400 mx-auto" />
+              <div className="text-white/70 text-xs">Обычная</div>
+            </div>
+            <div className="text-center space-y-2">
+              <Star className="h-8 w-8 text-yellow-400 mx-auto fill-yellow-400" />
+              <div className="text-white/70 text-xs">Заполненная</div>
+            </div>
+          </div>
+          <div className="text-white/60 text-sm">
+            Добавьте класс <code className="bg-white/10 px-1 py-0.5 rounded text-xs font-mono">fill-[color]</code> для заливки иконки
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Аватары */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Аватары</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Размеры аватаров */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Размеры</h4>
+            <div className="flex items-center gap-6">
+              <div className="text-center space-y-2">
+                <Avatar className="h-6 w-6 bg-white/20">
+                  <AvatarFallback className="bg-white/20 text-white text-xs">XS</AvatarFallback>
+                </Avatar>
+                <div className="text-white/70 text-xs">h-6 w-6</div>
+              </div>
+              <div className="text-center space-y-2">
+                <Avatar className="h-8 w-8 bg-white/20">
+                  <AvatarFallback className="bg-white/20 text-white text-xs">SM</AvatarFallback>
+                </Avatar>
+                <div className="text-white/70 text-xs">h-8 w-8</div>
+              </div>
+              <div className="text-center space-y-2">
+                <Avatar className="h-10 w-10 bg-white/20">
+                  <AvatarFallback className="bg-white/20 text-white text-sm">MD</AvatarFallback>
+                </Avatar>
+                <div className="text-white/70 text-xs">h-10 w-10</div>
+              </div>
+              <div className="text-center space-y-2">
+                <Avatar className="h-12 w-12 bg-white/20">
+                  <AvatarFallback className="bg-white/20 text-white text-sm">LG</AvatarFallback>
+                </Avatar>
+                <div className="text-white/70 text-xs">h-12 w-12</div>
+              </div>
+              <div className="text-center space-y-2">
+                <Avatar className="h-16 w-16 bg-white/20">
+                  <AvatarFallback className="bg-white/20 text-white">XL</AvatarFallback>
+                </Avatar>
+                <div className="text-white/70 text-xs">h-16 w-16</div>
+              </div>
+              <div className="text-center space-y-2">
+                <Avatar className="h-20 w-20 bg-white/20">
+                  <AvatarFallback className="bg-white/20 text-white text-lg">2XL</AvatarFallback>
+                </Avatar>
+                <div className="text-white/70 text-xs">h-20 w-20</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Типы аватаров */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Типы</h4>
+            <div className="flex items-center gap-6">
+              <div className="text-center space-y-2">
+                <Avatar className="h-12 w-12 bg-white/20">
+                  <AvatarFallback className="bg-white/20 text-white font-semibold">ИП</AvatarFallback>
+                </Avatar>
+                <div className="text-white/70 text-xs">Инициалы</div>
+              </div>
+              <div className="text-center space-y-2">
+                <Avatar className="h-12 w-12 bg-primary/20">
+                  <AvatarFallback className="bg-primary/20 text-white font-semibold">AB</AvatarFallback>
+                </Avatar>
+                <div className="text-white/70 text-xs">Цветной фон</div>
+              </div>
+              <div className="text-center space-y-2">
+                <Avatar className="h-12 w-12 bg-white/20">
+                  <User className="h-6 w-6 text-white/70" />
+                </Avatar>
+                <div className="text-white/70 text-xs">С иконкой</div>
+              </div>
+              <div className="text-center space-y-2">
+                <Avatar className="h-12 w-12">
+                  <div className="w-full h-full bg-gradient-to-br from-primary/60 to-blue-500/60 flex items-center justify-center">
+                    <span className="text-white font-semibold">GR</span>
+                  </div>
+                </Avatar>
+                <div className="text-white/70 text-xs">Градиент</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Статусы */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Со статусом</h4>
+            <div className="flex items-center gap-6">
+              <div className="text-center space-y-2">
+                <div className="relative">
+                  <Avatar className="h-12 w-12 bg-white/20">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">ON</AvatarFallback>
+                  </Avatar>
+                  <div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-400 rounded-full border-2 border-background"></div>
+                </div>
+                <div className="text-white/70 text-xs">Онлайн</div>
+              </div>
+              <div className="text-center space-y-2">
+                <div className="relative">
+                  <Avatar className="h-12 w-12 bg-white/20">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">AW</AvatarFallback>
+                  </Avatar>
+                  <div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-yellow-400 rounded-full border-2 border-background"></div>
+                </div>
+                <div className="text-white/70 text-xs">Отошел</div>
+              </div>
+              <div className="text-center space-y-2">
+                <div className="relative">
+                  <Avatar className="h-12 w-12 bg-white/20">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">OF</AvatarFallback>
+                  </Avatar>
+                  <div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-gray-400 rounded-full border-2 border-background"></div>
+                </div>
+                <div className="text-white/70 text-xs">Не в сети</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">
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Варианты</h4>
+            <div className="flex flex-wrap gap-3">
+              <Badge variant="default">Default</Badge>
+              <Badge variant="secondary">Secondary</Badge>
+              <Badge variant="outline">Outline</Badge>
+              <Badge variant="destructive">Destructive</Badge>
+            </div>
+          </div>
+
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">С иконками</h4>
+            <div className="flex flex-wrap gap-3">
+              <Badge variant="default" className="gap-1">
+                <CheckCircle className="h-3 w-3" />
+                Активно
+              </Badge>
+              <Badge variant="secondary" className="gap-1">
+                <Clock className="h-3 w-3" />
+                Ожидание
+              </Badge>
+              <Badge variant="outline" className="gap-1">
+                <AlertTriangle className="h-3 w-3" />
+                Предупреждение
+              </Badge>
+              <Badge variant="destructive" className="gap-1">
+                <XCircle className="h-3 w-3" />
+                Ошибка
+              </Badge>
+            </div>
+          </div>
+
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Статусы организаций</h4>
+            <div className="flex flex-wrap gap-3">
+              <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/50">
+                Фулфилмент
+              </Badge>
+              <Badge className="bg-green-500/20 text-green-400 border-green-500/50">
+                Селлер
+              </Badge>
+              <Badge className="bg-purple-500/20 text-purple-400 border-purple-500/50">
+                Логистика
+              </Badge>
+              <Badge className="bg-orange-500/20 text-orange-400 border-orange-500/50">
+                Оптовик
+              </Badge>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Коллекция иконок */}
+      {iconSections.map((section) => (
+        <Card key={section.title} className="glass-card border-white/10">
+          <CardHeader>
+            <CardTitle className="text-white">{section.title}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
+              {section.icons.map((iconData) => {
+                const IconComponent = iconData.icon
+                return (
+                  <div key={iconData.name} className="text-center space-y-2 p-2 rounded-lg hover:bg-white/5 transition-colors">
+                    <IconComponent className="h-6 w-6 text-white/80 mx-auto" />
+                    <div className="text-white/60 text-xs font-mono">{iconData.name}</div>
+                  </div>
+                )
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+
+      {/* Примеры использования */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Примеры использования в интерфейсе</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Кнопки с иконками */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Кнопки с иконками</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="glass" size="sm">
+                <Plus className="h-4 w-4 mr-2" />
+                Создать
+              </Button>
+              <Button variant="outline" size="sm">
+                <Edit className="h-4 w-4 mr-2" />
+                Редактировать
+              </Button>
+              <Button variant="destructive" size="sm">
+                <Trash2 className="h-4 w-4 mr-2" />
+                Удалить
+              </Button>
+              <Button variant="ghost" size="icon">
+                <Heart className="h-4 w-4" />
+              </Button>
+              <Button variant="ghost" size="icon">
+                <Share2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Элементы интерфейса */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Элементы интерфейса</h4>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between glass-card p-4 rounded-lg">
+                <div className="flex items-center space-x-3">
+                  <Avatar className="h-10 w-10 bg-white/20">
+                    <AvatarFallback className="bg-white/20 text-white text-sm">ИП</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <div className="text-white font-medium">Иван Петров</div>
+                    <div className="text-white/70 text-sm flex items-center">
+                      <Building className="h-3 w-3 mr-1" />
+                      ООО &quot;Логистик&quot;
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Badge variant="secondary" className="gap-1">
+                    <CheckCircle className="h-3 w-3" />
+                    Активен
+                  </Badge>
+                  <Button variant="ghost" size="icon">
+                    <MoreHorizontal className="h-4 w-4 text-white/70" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}