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

package-lock.json

@@ -26,10 +26,12 @@
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.5",
         "@radix-ui/react-tabs": "^1.1.12",
+        "@types/bcryptjs": "^2.4.6",
         "@types/cors": "^2.8.19",
         "@types/express": "^5.0.3",
         "@types/jsonwebtoken": "^9.0.10",
         "axios": "^1.10.0",
+        "bcryptjs": "^3.0.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cors": "^2.8.5",
@@ -4622,6 +4624,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/bcryptjs": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
+      "integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.6",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
@@ -5781,6 +5789,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bcryptjs": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.2.tgz",
+      "integrity": "sha512-k38b3XOZKv60C4E2hVsXTolJWfkGRMbILBIe2IBITXciy5bOsTKot5kDrf3ZfufQtQOUN5mXceUEpU1rTl9Uog==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "bcrypt": "bin/bcrypt"
+      }
+    },
     "node_modules/body-parser": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",

package.json

@@ -27,10 +27,12 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
+    "@types/bcryptjs": "^2.4.6",
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.3",
     "@types/jsonwebtoken": "^9.0.10",
     "axios": "^1.10.0",
+    "bcryptjs": "^3.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cors": "^2.8.5",

prisma/schema.prisma

@@ -22,6 +22,19 @@ model User {
   @@map("users")
 }
 
+model Admin {
+  id        String   @id @default(cuid())
+  username  String   @unique
+  password  String   // Хеш пароля
+  email     String?  @unique
+  isActive  Boolean  @default(true)
+  lastLogin DateTime?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@map("admins")
+}
+
 model SmsCode {
   id          String   @id @default(cuid())
   code        String

scripts/create-admin.mjs

@@ -0,0 +1,43 @@
+import { PrismaClient } from '@prisma/client'
+import bcrypt from 'bcryptjs'
+
+const prisma = new PrismaClient()
+
+async function createAdmin() {
+  try {
+    console.log('🔐 Создание администратора...')
+
+    // Генерируем хеш пароля
+    const password = 'admin123' // Временный пароль
+    const hashedPassword = await bcrypt.hash(password, 12)
+
+    // Создаем администратора
+    const admin = await prisma.admin.create({
+      data: {
+        username: 'admin',
+        password: hashedPassword,
+        email: 'admin@sferav.com',
+        isActive: true
+      }
+    })
+
+    console.log('✅ Администратор создан:')
+    console.log(`   Логин: ${admin.username}`)
+    console.log(`   Пароль: ${password}`)
+    console.log(`   Email: ${admin.email}`)
+    console.log(`   ID: ${admin.id}`)
+    
+    console.log('\n⚠️  Обязательно смените пароль после первого входа!')
+
+  } catch (error) {
+    if (error.code === 'P2002') {
+      console.log('❌ Администратор с таким логином уже существует')
+    } else {
+      console.error('❌ Ошибка создания администратора:', error)
+    }
+  } finally {
+    await prisma.$disconnect()
+  }
+}
+
+createAdmin() 

src/app/admin/dashboard/page.tsx

@@ -0,0 +1,10 @@
+import { AdminGuard } from "@/components/admin/admin-guard"
+import { AdminDashboard } from "@/components/admin/admin-dashboard"
+
+export default function AdminDashboardPage() {
+  return (
+    <AdminGuard>
+      <AdminDashboard />
+    </AdminGuard>
+  )
+} 

src/app/admin/page.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { AdminLogin } from "@/components/admin/admin-login"
+import { AdminGuard } from "@/components/admin/admin-guard"
+import { redirect } from "next/navigation"
+
+export default function AdminPage() {
+  return (
+    <AdminGuard fallback={<AdminLogin />}>
+      {/* Если администратор авторизован, перенаправляем в админ-дашборд */}
+      {redirect('/admin/dashboard')}
+    </AdminGuard>
+  )
+} 

src/app/api/graphql/route.ts

@@ -11,6 +11,10 @@ interface Context {
     id: string
     phone: string
   }
+  admin?: {
+    id: string
+    username: string
+  }
 }
 
 // Создаем Apollo Server
@@ -31,27 +35,42 @@ const handler = startServerAndCreateNextHandler<NextRequest>(server, {
 
     if (!token) {
       console.log('GraphQL Context - No token provided')
-      return { user: undefined }
+      return { user: undefined, admin: undefined }
     }
 
     try {
       // Верифицируем JWT токен
       const decoded = jwt.verify(token, process.env.JWT_SECRET!) as {
-        userId: string
+        userId?: string
-        phone: string
+        phone?: string
+        adminId?: string
+        username?: string
+        type?: string
       }
 
+      // Проверяем тип токена
+      if (decoded.type === 'admin' && decoded.adminId && decoded.username) {
+        console.log('GraphQL Context - Decoded admin:', { id: decoded.adminId, username: decoded.username })
+        return {
+          admin: {
+            id: decoded.adminId,
+            username: decoded.username
+          }
+        }
+      } else if (decoded.userId && decoded.phone) {
         console.log('GraphQL Context - Decoded user:', { id: decoded.userId, phone: decoded.phone })
-
         return {
           user: {
             id: decoded.userId,
             phone: decoded.phone
           }
         }
+      }
+
+      return { user: undefined, admin: undefined }
     } catch (error) {
       console.error('GraphQL Context - Invalid token:', error)
-      return { user: undefined }
+      return { user: undefined, admin: undefined }
     }
   }
 })

src/app/globals.css

@@ -270,6 +270,15 @@
     box-shadow: 0 8px 24px rgba(139, 69, 199, 0.15);
   }
 
+  .glass-sidebar {
+    background: rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    box-shadow: 
+      0 8px 32px rgba(168, 85, 247, 0.15),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  }
+
   /* Обеспечиваем курсор pointer для всех кликабельных элементов */
   button, [role="button"], [data-state] {
     cursor: pointer;

src/components/admin/admin-dashboard.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { useState } from 'react'
+import { AdminSidebar } from './admin-sidebar'
+import { UsersSection } from './users-section'
+import { UIKitSection } from './ui-kit-section'
+
+type AdminSection = 'users' | 'ui-kit' | 'settings'
+
+export function AdminDashboard() {
+  const [activeSection, setActiveSection] = useState<AdminSection>('users')
+
+  const renderContent = () => {
+    switch (activeSection) {
+      case 'users':
+        return <UsersSection />
+      case 'ui-kit':
+        return <UIKitSection />
+      case 'settings':
+        return (
+          <div className="p-8">
+            <h1 className="text-3xl font-bold text-white mb-6">Настройки</h1>
+            <div className="glass-card p-6">
+              <p className="text-white/70">Раздел настроек в разработке</p>
+            </div>
+          </div>
+        )
+      default:
+        return <UsersSection />
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-smooth flex">
+      <AdminSidebar 
+        activeSection={activeSection} 
+        onSectionChange={setActiveSection} 
+      />
+      <main className="flex-1 ml-64">
+        {renderContent()}
+      </main>
+    </div>
+  )
+} 

src/components/admin/admin-guard.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { useState, useEffect, useRef } from 'react'
+import { useAdminAuth } from '@/hooks/useAdminAuth'
+import { AdminLogin } from './admin-login'
+
+interface AdminGuardProps {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}
+
+export function AdminGuard({ children, fallback }: AdminGuardProps) {
+  const { isAuthenticated, isLoading, checkAuth, admin } = useAdminAuth()
+  const [isChecking, setIsChecking] = useState(true)
+  const initRef = useRef(false) // Защита от повторных инициализаций
+
+  useEffect(() => {
+    const initAuth = async () => {
+      if (initRef.current) {
+        console.log('AdminGuard - Already initialized, skipping')
+        return
+      }
+      
+      initRef.current = true
+      console.log('AdminGuard - Initializing admin auth check')
+      await checkAuth()
+      setIsChecking(false)
+      console.log('AdminGuard - Admin auth check completed, authenticated:', isAuthenticated, 'admin:', !!admin)
+    }
+    
+    initAuth()
+  }, [checkAuth, isAuthenticated, admin])
+
+  // Дополнительное логирование состояний
+  useEffect(() => {
+    console.log('AdminGuard - State update:', {
+      isChecking,
+      isLoading,
+      isAuthenticated,
+      hasAdmin: !!admin
+    })
+  }, [isChecking, isLoading, isAuthenticated, admin])
+
+  // Показываем лоадер пока проверяем авторизацию
+  if (isChecking || isLoading) {
+    return (
+      <div className="min-h-screen bg-gradient-smooth flex items-center justify-center">
+        <div className="text-center text-white">
+          <div className="animate-spin rounded-full h-16 w-16 border-4 border-white border-t-transparent mx-auto mb-4"></div>
+          <p className="text-white/80">Проверяем авторизацию администратора...</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Если не авторизован, показываем форму авторизации
+  if (!isAuthenticated) {
+    console.log('AdminGuard - Admin not authenticated, showing admin login')
+    return fallback || <AdminLogin />
+  }
+
+  // Если авторизован, показываем защищенный контент
+  console.log('AdminGuard - Admin authenticated, showing admin panel')
+  return <>{children}</>
+} 

src/components/admin/admin-login.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { useAdminAuth } from '@/hooks/useAdminAuth'
+import { Eye, EyeOff, Shield, Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+
+export function AdminLogin() {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const { login, isLoading } = useAdminAuth()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!username.trim() || !password.trim()) {
+      toast.error('Заполните все поля')
+      return
+    }
+
+    const result = await login(username.trim(), password)
+    
+    if (!result.success) {
+      toast.error(result.message)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-smooth flex items-center justify-center px-4">
+      <Card className="w-full max-w-md glass-card border-white/10">
+        <CardHeader className="text-center pb-4">
+          <div className="mx-auto w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mb-4">
+            <Shield className="w-8 h-8 text-white" />
+          </div>
+          <CardTitle className="text-2xl font-bold text-white">
+            Админ-панель
+          </CardTitle>
+          <CardDescription className="text-white/70">
+            Вход в систему администрирования
+          </CardDescription>
+        </CardHeader>
+        
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="username" className="text-white/90 text-sm font-medium">
+                Логин
+              </Label>
+              <Input
+                id="username"
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="Введите логин"
+                className="glass-input text-white placeholder:text-white/50"
+                disabled={isLoading}
+                autoComplete="username"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="password" className="text-white/90 text-sm font-medium">
+                Пароль
+              </Label>
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Введите пароль"
+                  className="glass-input text-white placeholder:text-white/50 pr-10"
+                  disabled={isLoading}
+                  autoComplete="current-password"
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 text-white/70 hover:text-white hover:bg-white/10"
+                  onClick={() => setShowPassword(!showPassword)}
+                  disabled={isLoading}
+                >
+                  {showPassword ? (
+                    <EyeOff className="h-4 w-4" />
+                  ) : (
+                    <Eye className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+            
+            <Button
+              type="submit"
+              className="w-full glass-button text-white font-semibold py-3 mt-6"
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Вход...
+                </>
+              ) : (
+                'Войти'
+              )}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+} 

src/components/admin/admin-sidebar.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import { useAdminAuth } from '@/hooks/useAdminAuth'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { 
+  Settings, 
+  LogOut,
+  Users,
+  Shield,
+  Palette
+} from 'lucide-react'
+
+interface AdminSidebarProps {
+  activeSection: string
+  onSectionChange: (section: 'users' | 'ui-kit' | 'settings') => void
+}
+
+export function AdminSidebar({ activeSection, onSectionChange }: AdminSidebarProps) {
+  const { admin, logout } = useAdminAuth()
+
+  const getInitials = () => {
+    if (admin?.username) {
+      return admin.username.charAt(0).toUpperCase()
+    }
+    return 'A'
+  }
+
+  const handleLogout = () => {
+    logout()
+  }
+
+  return (
+    <div className="fixed left-0 top-0 h-full w-56 glass-sidebar border-r border-white/10 p-4 flex flex-col z-50">
+      {/* Профиль администратора */}
+      <Card className="glass-card border-white/10 p-4 mb-6">
+        <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 font-semibold">
+              {getInitials()}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex-1 min-w-0">
+            <p className="text-white text-sm font-medium truncate">
+              {admin?.username || 'Администратор'}
+            </p>
+            <p className="text-white/60 text-xs">
+              Админ-панель
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      {/* Навигация */}
+      <nav className="flex-1 space-y-2">
+        <Button
+          variant={activeSection === 'users' ? "secondary" : "ghost"}
+          className={`w-full justify-start text-left transition-all duration-200 h-10 ${
+            activeSection === 'users'
+              ? 'bg-white/20 text-white hover:bg-white/30' 
+              : 'text-white/80 hover:bg-white/10 hover:text-white'
+          } cursor-pointer`}
+          onClick={() => onSectionChange('users')}
+        >
+          <Users className="h-4 w-4 mr-3" />
+          Пользователи
+        </Button>
+
+        <Button
+          variant={activeSection === 'ui-kit' ? "secondary" : "ghost"}
+          className={`w-full justify-start text-left transition-all duration-200 h-10 ${
+            activeSection === 'ui-kit'
+              ? 'bg-white/20 text-white hover:bg-white/30' 
+              : 'text-white/80 hover:bg-white/10 hover:text-white'
+          } cursor-pointer`}
+          onClick={() => onSectionChange('ui-kit')}
+        >
+          <Palette className="h-4 w-4 mr-3" />
+          UI Kit
+        </Button>
+
+        <Button
+          variant={activeSection === 'settings' ? "secondary" : "ghost"}
+          className={`w-full justify-start text-left transition-all duration-200 h-10 ${
+            activeSection === 'settings'
+              ? 'bg-white/20 text-white hover:bg-white/30' 
+              : 'text-white/80 hover:bg-white/10 hover:text-white'
+          } cursor-pointer`}
+          onClick={() => onSectionChange('settings')}
+        >
+          <Settings className="h-4 w-4 mr-3" />
+          Настройки
+        </Button>
+      </nav>
+
+      {/* Управление */}
+      <div className="space-y-2 border-t border-white/10 pt-4">
+        <Button
+          variant="ghost"
+          className="w-full justify-start text-left text-white/80 hover:bg-white/10 hover:text-white transition-all duration-200 h-10"
+          onClick={handleLogout}
+        >
+          <LogOut className="h-4 w-4 mr-3" />
+          Выйти
+        </Button>
+      </div>
+
+      {/* Логотип внизу */}
+      <div className="flex items-center justify-center mt-4 pt-4 border-t border-white/10">
+        <div className="flex items-center space-x-2">
+          <Shield className="h-5 w-5 text-white/60" />
+          <span className="text-white/60 text-sm font-medium">SferaV Admin</span>
+        </div>
+      </div>
+    </div>
+  )
+} 

src/components/admin/ui-kit-section.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import { useState } from 'react'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { ButtonsDemo } from './ui-kit/buttons-demo'
+import { FormsDemo } from './ui-kit/forms-demo'
+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'
+
+export function UIKitSection() {
+  return (
+    <div className="p-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-white mb-2">UI Kit</h1>
+        <p className="text-white/70">Полная коллекция компонентов дизайн-системы SferaV</p>
+      </div>
+
+      <Tabs defaultValue="buttons" className="w-full">
+        <TabsList className="grid w-full grid-cols-6 bg-white/5 backdrop-blur border-white/10 mb-8">
+          <TabsTrigger 
+            value="buttons" 
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
+          >
+            Кнопки
+          </TabsTrigger>
+          <TabsTrigger 
+            value="forms" 
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
+          >
+            Формы
+          </TabsTrigger>
+          <TabsTrigger 
+            value="cards" 
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
+          >
+            Карточки
+          </TabsTrigger>
+          <TabsTrigger 
+            value="typography" 
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
+          >
+            Типографика
+          </TabsTrigger>
+          <TabsTrigger 
+            value="colors" 
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
+          >
+            Цвета
+          </TabsTrigger>
+          <TabsTrigger 
+            value="icons" 
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
+          >
+            Иконки
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="buttons" className="space-y-6">
+          <ButtonsDemo />
+        </TabsContent>
+
+        <TabsContent value="forms" className="space-y-6">
+          <FormsDemo />
+        </TabsContent>
+
+        <TabsContent value="cards" className="space-y-6">
+          <CardsDemo />
+        </TabsContent>
+
+        <TabsContent value="typography" className="space-y-6">
+          <TypographyDemo />
+        </TabsContent>
+
+        <TabsContent value="colors" className="space-y-6">
+          <ColorsDemo />
+        </TabsContent>
+
+        <TabsContent value="icons" className="space-y-6">
+          <IconsDemo />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+} 

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

@@ -0,0 +1,288 @@
+"use client"
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { 
+  Play, 
+  Download, 
+  Heart, 
+  Settings, 
+  Trash2, 
+  Plus,
+  Search,
+  Filter,
+  Loader2
+} from 'lucide-react'
+
+export function ButtonsDemo() {
+  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">
+          {/* Default */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Default</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="default">Обычная кнопка</Button>
+              <Button variant="default" size="sm">Маленькая</Button>
+              <Button variant="default" size="lg">Большая</Button>
+              <Button variant="default" disabled>Отключена</Button>
+            </div>
+            <div className="mt-2 text-xs text-white/60 font-mono">
+              variant=&quot;default&quot;
+            </div>
+          </div>
+
+          {/* Glass */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Glass (Основная)</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="glass">Glass кнопка</Button>
+              <Button variant="glass" size="sm">Маленькая</Button>
+              <Button variant="glass" size="lg">Большая</Button>
+              <Button variant="glass" disabled>Отключена</Button>
+            </div>
+            <div className="mt-2 text-xs text-white/60 font-mono">
+              variant=&quot;glass&quot;
+            </div>
+          </div>
+
+          {/* Glass Secondary */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Glass Secondary</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="glass-secondary">Вторичная glass</Button>
+              <Button variant="glass-secondary" size="sm">Маленькая</Button>
+              <Button variant="glass-secondary" size="lg">Большая</Button>
+              <Button variant="glass-secondary" disabled>Отключена</Button>
+            </div>
+            <div className="mt-2 text-xs text-white/60 font-mono">
+              variant=&quot;glass-secondary&quot;
+            </div>
+          </div>
+
+          {/* Secondary */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Secondary</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="secondary">Вторичная</Button>
+              <Button variant="secondary" size="sm">Маленькая</Button>
+              <Button variant="secondary" size="lg">Большая</Button>
+              <Button variant="secondary" disabled>Отключена</Button>
+            </div>
+            <div className="mt-2 text-xs text-white/60 font-mono">
+              variant=&quot;secondary&quot;
+            </div>
+          </div>
+
+          {/* Outline */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Outline</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="outline">Обводка</Button>
+              <Button variant="outline" size="sm">Маленькая</Button>
+              <Button variant="outline" size="lg">Большая</Button>
+              <Button variant="outline" disabled>Отключена</Button>
+            </div>
+            <div className="mt-2 text-xs text-white/60 font-mono">
+              variant=&quot;outline&quot;
+            </div>
+          </div>
+
+          {/* Ghost */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Ghost</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="ghost">Призрачная</Button>
+              <Button variant="ghost" size="sm">Маленькая</Button>
+              <Button variant="ghost" size="lg">Большая</Button>
+              <Button variant="ghost" disabled>Отключена</Button>
+            </div>
+            <div className="mt-2 text-xs text-white/60 font-mono">
+              variant=&quot;ghost&quot;
+            </div>
+          </div>
+
+          {/* Destructive */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Destructive</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="destructive">Удалить</Button>
+              <Button variant="destructive" size="sm">Маленькая</Button>
+              <Button variant="destructive" size="lg">Большая</Button>
+              <Button variant="destructive" disabled>Отключена</Button>
+            </div>
+            <div className="mt-2 text-xs text-white/60 font-mono">
+              variant=&quot;destructive&quot;
+            </div>
+          </div>
+
+          {/* Link */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Link</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="link">Ссылка</Button>
+              <Button variant="link" size="sm">Маленькая</Button>
+              <Button variant="link" size="lg">Большая</Button>
+              <Button variant="link" disabled>Отключена</Button>
+            </div>
+            <div className="mt-2 text-xs text-white/60 font-mono">
+              variant=&quot;link&quot;
+            </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-3">Иконка слева</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="glass">
+                <Play className="h-4 w-4 mr-2" />
+                Воспроизвести
+              </Button>
+              <Button variant="glass-secondary">
+                <Download className="h-4 w-4 mr-2" />
+                Скачать
+              </Button>
+              <Button variant="outline">
+                <Search className="h-4 w-4 mr-2" />
+                Поиск
+              </Button>
+              <Button variant="destructive">
+                <Trash2 className="h-4 w-4 mr-2" />
+                Удалить
+              </Button>
+            </div>
+          </div>
+
+          {/* Иконка справа */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Иконка справа</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="glass">
+                Настройки
+                <Settings className="h-4 w-4 ml-2" />
+              </Button>
+              <Button variant="secondary">
+                Фильтры
+                <Filter className="h-4 w-4 ml-2" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Только иконка */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Только иконка</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="glass" size="icon">
+                <Plus className="h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="icon">
+                <Heart className="h-4 w-4" />
+              </Button>
+              <Button variant="ghost" size="icon">
+                <Settings className="h-4 w-4" />
+              </Button>
+              <Button variant="destructive" size="icon">
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Загрузка */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Состояние загрузки</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="glass" disabled>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Загрузка...
+              </Button>
+              <Button variant="outline" disabled>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Сохранение...
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Размеры */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Размеры</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap items-center gap-3">
+            <Button variant="glass" size="sm">
+              Маленькая (sm)
+            </Button>
+            <Button variant="glass" size="default">
+              Обычная (default)
+            </Button>
+            <Button variant="glass" size="lg">
+              Большая (lg)
+            </Button>
+          </div>
+          <div className="text-xs text-white/60 font-mono">
+            size=&quot;sm&quot; | &quot;default&quot; | &quot;lg&quot; | &quot;icon&quot;
+          </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-3">Группа действий</h4>
+            <div className="flex gap-2">
+              <Button variant="glass">
+                <Plus className="h-4 w-4 mr-2" />
+                Создать
+              </Button>
+              <Button variant="outline">
+                Редактировать
+              </Button>
+              <Button variant="destructive">
+                <Trash2 className="h-4 w-4 mr-2" />
+                Удалить
+              </Button>
+            </div>
+          </div>
+
+          {/* Навигация */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Навигация</h4>
+            <div className="flex gap-2">
+              <Button variant="ghost">Назад</Button>
+              <Button variant="glass">Продолжить</Button>
+            </div>
+          </div>
+
+          {/* Формы */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Формы</h4>
+            <div className="flex gap-2">
+              <Button variant="outline">Отмена</Button>
+              <Button variant="glass">Сохранить</Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+} 

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

@@ -0,0 +1,413 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Progress } from '@/components/ui/progress'
+import { 
+  Heart, 
+  Share2, 
+  MoreHorizontal,
+  Star,
+  Clock,
+  MapPin,
+  Users,
+  TrendingUp,
+  Package,
+  Building,
+  Phone,
+  Calendar
+} from 'lucide-react'
+
+export function CardsDemo() {
+  return (
+    <div className="space-y-6">
+      {/* Базовые карточки */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Базовые карточки</CardTitle>
+          <CardDescription className="text-white/70">
+            Основные варианты карточек с Glass Morphism эффектом
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Простая карточка */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Простая карточка</h4>
+            <Card className="glass-card border-white/10 max-w-sm">
+              <CardHeader>
+                <CardTitle className="text-white">Заголовок карточки</CardTitle>
+                <CardDescription className="text-white/70">
+                  Описание содержимого карточки
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-white/80 text-sm">
+                  Основное содержимое карточки. Здесь может быть любая информация.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Карточка с действиями */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Карточка с действиями</h4>
+            <Card className="glass-card border-white/10 max-w-sm">
+              <CardHeader>
+                <CardTitle className="text-white">Карточка с кнопками</CardTitle>
+                <CardDescription className="text-white/70">
+                  Пример карточки с различными действиями
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-white/80 text-sm">
+                  Содержимое карточки с возможностями взаимодействия.
+                </p>
+                <div className="flex gap-2">
+                  <Button variant="glass" size="sm">
+                    Основное действие
+                  </Button>
+                  <Button variant="outline" size="sm">
+                    Вторичное
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Интерактивная карточка */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Интерактивная карточка</h4>
+            <Card className="glass-card border-white/10 max-w-sm hover:border-white/20 transition-all cursor-pointer group">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-white group-hover:text-primary transition-colors">
+                    Кликабельная карточка
+                  </CardTitle>
+                  <Button variant="ghost" size="icon" className="text-white/70 hover:text-white">
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </div>
+                <CardDescription className="text-white/70">
+                  Карточка с hover эффектами
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-white/80 text-sm">
+                  При наведении карточка меняет внешний вид и становится более яркой.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Карточки продуктов */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Карточки продуктов</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {/* Карточка товара */}
+            <Card className="glass-card border-white/10 hover:border-white/20 transition-all group">
+              <div className="aspect-square bg-white/5 rounded-t-lg relative overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-blue-500/20"></div>
+                <div className="absolute top-3 right-3 flex gap-2">
+                  <Button variant="ghost" size="icon" className="h-8 w-8 bg-white/10 backdrop-blur">
+                    <Heart className="h-4 w-4 text-white" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 bg-white/10 backdrop-blur">
+                    <Share2 className="h-4 w-4 text-white" />
+                  </Button>
+                </div>
+                <div className="absolute bottom-3 left-3">
+                  <Badge variant="secondary" className="bg-white/20 text-white border-white/30">
+                    Новинка
+                  </Badge>
+                </div>
+              </div>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-white text-base group-hover:text-primary transition-colors">
+                  Название товара
+                </CardTitle>
+                <div className="flex items-center gap-2">
+                  <div className="flex items-center">
+                    {[1, 2, 3, 4, 5].map((star) => (
+                      <Star 
+                        key={star} 
+                        className="h-3 w-3 fill-yellow-400 text-yellow-400" 
+                      />
+                    ))}
+                  </div>
+                  <span className="text-white/70 text-xs">(24 отзыва)</span>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-xl font-bold text-white">1 299 ₽</span>
+                  <span className="text-white/60 line-through text-sm">1 599 ₽</span>
+                </div>
+                <Button variant="glass" className="w-full" size="sm">
+                  <Package className="h-4 w-4 mr-2" />
+                  В корзину
+                </Button>
+              </CardContent>
+            </Card>
+
+            {/* Карточка услуги */}
+            <Card className="glass-card border-white/10 hover:border-white/20 transition-all group">
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div className="space-y-1">
+                    <CardTitle className="text-white text-base group-hover:text-primary transition-colors">
+                      Фулфилмент услуги
+                    </CardTitle>
+                    <CardDescription className="text-white/70 text-sm">
+                      Полный цикл обработки заказов
+                    </CardDescription>
+                  </div>
+                  <Badge variant="outline" className="border-green-500 text-green-400">
+                    Активно
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <div className="flex items-center text-white/80 text-sm">
+                    <MapPin className="h-4 w-4 mr-2 text-white/60" />
+                    Москва, складской комплекс
+                  </div>
+                  <div className="flex items-center text-white/80 text-sm">
+                    <Clock className="h-4 w-4 mr-2 text-white/60" />
+                    24/7 обработка заказов
+                  </div>
+                  <div className="flex items-center text-white/80 text-sm">
+                    <Users className="h-4 w-4 mr-2 text-white/60" />
+                    до 1000 заказов/день
+                  </div>
+                </div>
+                <div className="pt-2">
+                  <div className="flex items-center justify-between text-sm text-white/70 mb-1">
+                    <span>Загрузка склада</span>
+                    <span>75%</span>
+                  </div>
+                  <Progress value={75} className="h-2" />
+                </div>
+                <Button variant="outline" className="w-full" size="sm">
+                  Подробнее
+                </Button>
+              </CardContent>
+            </Card>
+
+            {/* Карточка статистики */}
+            <Card className="glass-card border-white/10">
+              <CardHeader className="pb-2">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-white text-base">
+                    Продажи за месяц
+                  </CardTitle>
+                  <TrendingUp className="h-5 w-5 text-green-400" />
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-1">
+                  <div className="text-2xl font-bold text-white">
+                    ₽2,847,532
+                  </div>
+                  <div className="flex items-center text-sm">
+                    <TrendingUp className="h-3 w-3 text-green-400 mr-1" />
+                    <span className="text-green-400">+12.5%</span>
+                    <span className="text-white/60 ml-1">от прошлого месяца</span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-white/70">Заказов</span>
+                    <span className="text-white">1,247</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-white/70">Средний чек</span>
+                    <span className="text-white">₽2,284</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-white/70">Конверсия</span>
+                    <span className="text-white">3.2%</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Карточки пользователей */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Карточки пользователей</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Профиль пользователя */}
+            <Card className="glass-card border-white/10">
+              <CardHeader>
+                <div className="flex items-center space-x-4">
+                  <Avatar className="h-12 w-12 bg-white/20">
+                    <AvatarFallback className="bg-white/20 text-white font-semibold">
+                      ИП
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="space-y-1">
+                    <CardTitle className="text-white text-base">
+                      Иван Петров
+                    </CardTitle>
+                    <CardDescription className="text-white/70 text-sm">
+                      Менеджер фулфилмент центра
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="space-y-2">
+                  <div className="flex items-center text-white/80 text-sm">
+                    <Phone className="h-4 w-4 mr-2 text-white/60" />
+                    +7 (999) 123-45-67
+                  </div>
+                  <div className="flex items-center text-white/80 text-sm">
+                    <Building className="h-4 w-4 mr-2 text-white/60" />
+                    ООО &quot;Логистик Центр&quot;
+                  </div>
+                  <div className="flex items-center text-white/80 text-sm">
+                    <Calendar className="h-4 w-4 mr-2 text-white/60" />
+                    Регистрация: 15.03.2024
+                  </div>
+                </div>
+                <div className="flex gap-2 pt-2">
+                  <Button variant="glass" size="sm" className="flex-1">
+                    Связаться
+                  </Button>
+                  <Button variant="outline" size="sm" className="flex-1">
+                    Профиль
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Компактная карточка организации */}
+            <Card className="glass-card border-white/10 hover:border-white/20 transition-all cursor-pointer">
+              <CardContent className="p-4">
+                <div className="flex items-start space-x-3">
+                  <Avatar className="h-10 w-10 bg-white/20">
+                    <AvatarFallback className="bg-white/20 text-white text-xs">
+                      ООО
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between mb-1">
+                      <h3 className="text-white font-medium text-sm truncate">
+                        Торговая компания &quot;Альфа&quot;
+                      </h3>
+                      <Badge variant="default" className="ml-2 text-xs">
+                        Селлер
+                      </Badge>
+                    </div>
+                    <p className="text-white/70 text-xs mb-2">
+                      ИНН: 7708123456789
+                    </p>
+                    <div className="flex items-center justify-between">
+                      <span className="text-white/60 text-xs">
+                        Последний вход: 2 часа назад
+                      </span>
+                      <div className="w-2 h-2 rounded-full bg-green-400"></div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Специальные контейнеры */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Специальные контейнеры</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Alert карточка */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Уведомления</h4>
+            <div className="space-y-3">
+              <Card className="glass-card border-green-500/50 bg-green-500/10">
+                <CardContent className="p-4">
+                  <div className="flex items-start space-x-3">
+                    <div className="w-2 h-2 rounded-full bg-green-400 mt-2"></div>
+                    <div>
+                      <h4 className="text-white font-medium text-sm">Успешно</h4>
+                      <p className="text-white/80 text-sm">Данные сохранены успешно</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="glass-card border-yellow-500/50 bg-yellow-500/10">
+                <CardContent className="p-4">
+                  <div className="flex items-start space-x-3">
+                    <div className="w-2 h-2 rounded-full bg-yellow-400 mt-2"></div>
+                    <div>
+                      <h4 className="text-white font-medium text-sm">Предупреждение</h4>
+                      <p className="text-white/80 text-sm">Проверьте корректность введенных данных</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="glass-card border-red-500/50 bg-red-500/10">
+                <CardContent className="p-4">
+                  <div className="flex items-start space-x-3">
+                    <div className="w-2 h-2 rounded-full bg-red-400 mt-2"></div>
+                    <div>
+                      <h4 className="text-white font-medium text-sm">Ошибка</h4>
+                      <p className="text-white/80 text-sm">Не удалось выполнить операцию</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+
+          {/* Карточка с навигацией */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Навигационная карточка</h4>
+            <Card className="glass-card border-white/10">
+              <CardHeader>
+                <CardTitle className="text-white">Быстрые действия</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 gap-3">
+                  <Button variant="glass-secondary" className="h-16 flex-col space-y-1">
+                    <Package className="h-6 w-6" />
+                    <span className="text-xs">Товары</span>
+                  </Button>
+                  <Button variant="glass-secondary" className="h-16 flex-col space-y-1">
+                    <Users className="h-6 w-6" />
+                    <span className="text-xs">Клиенты</span>
+                  </Button>
+                  <Button variant="glass-secondary" className="h-16 flex-col space-y-1">
+                    <TrendingUp className="h-6 w-6" />
+                    <span className="text-xs">Аналитика</span>
+                  </Button>
+                  <Button variant="glass-secondary" className="h-16 flex-col space-y-1">
+                    <Building className="h-6 w-6" />
+                    <span className="text-xs">Склады</span>
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+} 

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

@@ -0,0 +1,367 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+export function ColorsDemo() {
+  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">
+          {/* Primary цвета */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Primary (Основной)</h4>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="space-y-2">
+                <div className="h-16 w-full rounded-lg" style={{background: 'oklch(0.65 0.28 315)'}}></div>
+                <div className="text-white text-xs font-mono">primary</div>
+                <div className="text-white/60 text-xs">oklch(0.65 0.28 315)</div>
+              </div>
+              <div className="space-y-2">
+                <div className="h-16 w-full bg-primary-foreground rounded-lg"></div>
+                <div className="text-white text-xs font-mono">primary-foreground</div>
+                <div className="text-white/60 text-xs">oklch(0.985 0 0)</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Secondary цвета */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Secondary (Вторичный)</h4>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="space-y-2">
+                <div className="h-16 w-full bg-secondary rounded-lg"></div>
+                <div className="text-white text-xs font-mono">secondary</div>
+                <div className="text-white/60 text-xs">oklch(0.94 0.08 315)</div>
+              </div>
+              <div className="space-y-2">
+                <div className="h-16 w-full bg-secondary-foreground rounded-lg"></div>
+                <div className="text-white text-xs font-mono">secondary-foreground</div>
+                <div className="text-white/60 text-xs">oklch(0.205 0 0)</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Accent цвета */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Accent (Акцентный)</h4>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="space-y-2">
+                <div className="h-16 w-full bg-accent rounded-lg"></div>
+                <div className="text-white text-xs font-mono">accent</div>
+                <div className="text-white/60 text-xs">oklch(0.90 0.12 315)</div>
+              </div>
+              <div className="space-y-2">
+                <div className="h-16 w-full bg-accent-foreground rounded-lg"></div>
+                <div className="text-white text-xs font-mono">accent-foreground</div>
+                <div className="text-white/60 text-xs">oklch(0.205 0 0)</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Destructive цвета */}
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-4">Destructive (Деструктивный)</h4>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="space-y-2">
+                <div className="h-16 w-full bg-destructive rounded-lg"></div>
+                <div className="text-white text-xs font-mono">destructive</div>
+                <div className="text-white/60 text-xs">oklch(0.577 0.245 27.325)</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 className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Background цвета */}
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Background</h4>
+              <div className="space-y-3">
+                <div className="flex items-center space-x-3">
+                  <div className="h-12 w-12 bg-background rounded-lg border border-white/20"></div>
+                  <div>
+                    <div className="text-white text-xs font-mono">background</div>
+                    <div className="text-white/60 text-xs">oklch(0.98 0.02 320)</div>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <div className="h-12 w-12 bg-foreground rounded-lg"></div>
+                  <div>
+                    <div className="text-white text-xs font-mono">foreground</div>
+                    <div className="text-white/60 text-xs">oklch(0.145 0 0)</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Muted цвета */}
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Muted</h4>
+              <div className="space-y-3">
+                <div className="flex items-center space-x-3">
+                  <div className="h-12 w-12 bg-muted rounded-lg"></div>
+                  <div>
+                    <div className="text-white text-xs font-mono">muted</div>
+                    <div className="text-white/60 text-xs">oklch(0.94 0.05 315)</div>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <div className="h-12 w-12 bg-muted-foreground rounded-lg"></div>
+                  <div>
+                    <div className="text-white text-xs font-mono">muted-foreground</div>
+                    <div className="text-white/60 text-xs">oklch(0.556 0 0)</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Border и input цвета */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Border & Input</h4>
+              <div className="space-y-3">
+                <div className="flex items-center space-x-3">
+                  <div className="h-12 w-12 bg-border rounded-lg"></div>
+                  <div>
+                    <div className="text-white text-xs font-mono">border</div>
+                    <div className="text-white/60 text-xs">oklch(0.90 0.08 315)</div>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <div className="h-12 w-12 bg-input rounded-lg"></div>
+                  <div>
+                    <div className="text-white text-xs font-mono">input</div>
+                    <div className="text-white/60 text-xs">oklch(0.96 0.05 315)</div>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <div className="h-12 w-12 bg-ring rounded-lg"></div>
+                  <div>
+                    <div className="text-white text-xs font-mono">ring</div>
+                    <div className="text-white/60 text-xs">oklch(0.65 0.28 315)</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Card & Popover</h4>
+              <div className="space-y-3">
+                <div className="flex items-center space-x-3">
+                  <div className="h-12 w-12 bg-card rounded-lg border border-white/20"></div>
+                  <div>
+                    <div className="text-white text-xs font-mono">card</div>
+                    <div className="text-white/60 text-xs">oklch(1 0 0)</div>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <div className="h-12 w-12 bg-popover rounded-lg border border-white/20"></div>
+                  <div>
+                    <div className="text-white text-xs font-mono">popover</div>
+                    <div className="text-white/60 text-xs">oklch(1 0 0)</div>
+                  </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">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Основные градиенты */}
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Основные градиенты</h4>
+              <div className="space-y-4">
+                <div>
+                  <div className="h-16 w-full gradient-purple rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-purple</div>
+                  <div className="text-white/60 text-xs">Основной фиолетовый градиент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full gradient-purple-light rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">gradient-purple-light</div>
+                  <div className="text-white/60 text-xs">Светлый фиолетовый градиент</div>
+                </div>
+                
+                <div>
+                  <div className="h-16 w-full bg-gradient-smooth rounded-lg mb-2"></div>
+                  <div className="text-white text-xs font-mono">bg-gradient-smooth</div>
+                  <div className="text-white/60 text-xs">Темный градиент для фона</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Текстовые градиенты */}
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Текстовые градиенты</h4>
+              <div className="space-y-4">
+                <div>
+                  <div className="text-2xl font-bold text-gradient-bright mb-2">
+                    Текст с ярким градиентом
+                  </div>
+                  <div className="text-white text-xs font-mono">text-gradient-bright</div>
+                </div>
+                
+                <div>
+                  <div className="text-2xl font-bold text-gradient mb-2">
+                    Текст с обычным градиентом
+                  </div>
+                  <div className="text-white text-xs font-mono">text-gradient</div>
+                </div>
+                
+                <div>
+                  <div className="text-2xl font-bold glow-text mb-2">
+                    Текст с свечением
+                  </div>
+                  <div className="text-white text-xs font-mono">glow-text</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Прозрачности белого */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Прозрачности белого цвета</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            {[
+              { opacity: '100', class: 'text-white', bg: 'bg-white' },
+              { opacity: '90', class: 'text-white/90', bg: 'bg-white/90' },
+              { opacity: '80', class: 'text-white/80', bg: 'bg-white/80' },
+              { opacity: '70', class: 'text-white/70', bg: 'bg-white/70' },
+              { opacity: '60', class: 'text-white/60', bg: 'bg-white/60' },
+              { opacity: '50', class: 'text-white/50', bg: 'bg-white/50' },
+              { opacity: '40', class: 'text-white/40', bg: 'bg-white/40' },
+              { opacity: '30', class: 'text-white/30', bg: 'bg-white/30' },
+              { opacity: '20', class: 'text-white/20', bg: 'bg-white/20' },
+              { opacity: '10', class: 'text-white/10', bg: 'bg-white/10' },
+            ].map((item) => (
+              <div key={item.opacity} className="space-y-2">
+                <div className={`h-12 w-full ${item.bg} rounded-lg border border-white/20`}></div>
+                <div className="text-white text-xs text-center">
+                  {item.opacity}%
+                </div>
+                <div className="text-white/60 text-xs font-mono text-center">
+                  {item.class}
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Статусные цвета */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Статусные цвета</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="space-y-3">
+              <h4 className="text-white/90 text-sm font-medium">Успех</h4>
+              <div className="space-y-2">
+                <div className="h-12 w-full bg-green-500 rounded-lg"></div>
+                <div className="text-white text-xs font-mono">green-500</div>
+                <div className="text-green-400 text-sm">Успешная операция</div>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <h4 className="text-white/90 text-sm font-medium">Предупреждение</h4>
+              <div className="space-y-2">
+                <div className="h-12 w-full bg-yellow-500 rounded-lg"></div>
+                <div className="text-white text-xs font-mono">yellow-500</div>
+                <div className="text-yellow-400 text-sm">Требует внимания</div>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <h4 className="text-white/90 text-sm font-medium">Ошибка</h4>
+              <div className="space-y-2">
+                <div className="h-12 w-full bg-red-500 rounded-lg"></div>
+                <div className="text-white text-xs font-mono">red-500</div>
+                <div className="text-red-400 text-sm">Ошибка или проблема</div>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <h4 className="text-white/90 text-sm font-medium">Информация</h4>
+              <div className="space-y-2">
+                <div className="h-12 w-full bg-blue-500 rounded-lg"></div>
+                <div className="text-white text-xs font-mono">blue-500</div>
+                <div className="text-blue-400 text-sm">Информационное сообщение</div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Glass эффекты */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Glass Morphism эффекты</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Основные Glass эффекты</h4>
+              <div className="space-y-4">
+                <div className="glass-card p-4 rounded-lg">
+                  <div className="text-white text-sm font-mono mb-1">glass-card</div>
+                  <div className="text-white/70 text-xs">Основная стеклянная карточка</div>
+                </div>
+                
+                <div className="glass-input p-3 rounded-lg">
+                  <div className="text-white text-sm font-mono mb-1">glass-input</div>
+                  <div className="text-white/70 text-xs">Стеклянное поле ввода</div>
+                </div>
+                
+                <div className="glass-sidebar p-4 rounded-lg">
+                  <div className="text-white text-sm font-mono mb-1">glass-sidebar</div>
+                  <div className="text-white/70 text-xs">Стеклянный сайдбар</div>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="text-white/90 text-sm font-medium mb-4">Glass кнопки</h4>
+              <div className="space-y-4">
+                <div className="glass-button p-4 rounded-lg text-center cursor-pointer">
+                  <div className="text-white text-sm font-mono mb-1">glass-button</div>
+                  <div className="text-white/70 text-xs">Основная стеклянная кнопка</div>
+                </div>
+                
+                <div className="glass-secondary p-4 rounded-lg text-center cursor-pointer">
+                  <div className="text-white text-sm font-mono mb-1">glass-secondary</div>
+                  <div className="text-white/70 text-xs">Вторичная стеклянная кнопка</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+} 

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

@@ -0,0 +1,527 @@
+"use client"
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Switch } from '@/components/ui/switch'
+import { Slider } from '@/components/ui/slider'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { PhoneInput } from '@/components/ui/phone-input'
+import { 
+  Eye, 
+  EyeOff, 
+  Search,
+  Calendar,
+  Mail,
+  User,
+  Lock
+} from 'lucide-react'
+
+export function FormsDemo() {
+  const [showPassword, setShowPassword] = useState(false)
+  const [switchValue, setSwitchValue] = useState(false)
+  const [sliderValue, setSliderValue] = useState([50])
+  const [checkboxValue, setCheckboxValue] = 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">
+          {/* Обычный инпут */}
+          <div className="space-y-2">
+            <Label htmlFor="basic-input" className="text-white/90">
+              Обычное поле
+            </Label>
+            <Input
+              id="basic-input"
+              type="text"
+              placeholder="Введите текст..."
+              className="glass-input text-white placeholder:text-white/50"
+            />
+          </div>
+
+          {/* Инпут с иконкой */}
+          <div className="space-y-2">
+            <Label htmlFor="icon-input" className="text-white/90">
+              Поле с иконкой
+            </Label>
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
+              <Input
+                id="icon-input"
+                type="text"
+                placeholder="Поиск..."
+                className="pl-10 glass-input text-white placeholder:text-white/50"
+              />
+            </div>
+          </div>
+
+          {/* Пароль */}
+          <div className="space-y-2">
+            <Label htmlFor="password-input" className="text-white/90">
+              Пароль
+            </Label>
+            <div className="relative">
+              <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
+              <Input
+                id="password-input"
+                type={showPassword ? "text" : "password"}
+                placeholder="Введите пароль"
+                className="pl-10 pr-10 glass-input text-white placeholder:text-white/50"
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 text-white/70 hover:text-white hover:bg-white/10"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {/* Email */}
+          <div className="space-y-2">
+            <Label htmlFor="email-input" className="text-white/90">
+              Email
+            </Label>
+            <div className="relative">
+              <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
+              <Input
+                id="email-input"
+                type="email"
+                placeholder="example@domain.com"
+                className="pl-10 glass-input text-white placeholder:text-white/50"
+              />
+            </div>
+          </div>
+
+          {/* Телефон */}
+          <div className="space-y-2">
+            <Label htmlFor="phone-input" className="text-white/90">
+              Телефон
+            </Label>
+            <PhoneInput
+              id="phone-input"
+              placeholder="+7 (999) 999-99-99"
+              className="glass-input text-white placeholder:text-white/50"
+            />
+          </div>
+
+          {/* Дата */}
+          <div className="space-y-2">
+            <Label htmlFor="date-input" className="text-white/90">
+              Дата
+            </Label>
+            <div className="relative">
+              <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
+              <Input
+                id="date-input"
+                type="date"
+                className="pl-10 glass-input text-white placeholder:text-white/50"
+              />
+            </div>
+          </div>
+
+          {/* Число */}
+          <div className="space-y-2">
+            <Label htmlFor="number-input" className="text-white/90">
+              Число
+            </Label>
+            <Input
+              id="number-input"
+              type="number"
+              placeholder="0"
+              min="0"
+              max="100"
+              className="glass-input text-white placeholder:text-white/50"
+            />
+          </div>
+
+          {/* Отключенное поле */}
+          <div className="space-y-2">
+            <Label htmlFor="disabled-input" className="text-white/90">
+              Отключенное поле
+            </Label>
+            <Input
+              id="disabled-input"
+              type="text"
+              placeholder="Недоступно для редактирования"
+              disabled
+              className="glass-input text-white placeholder:text-white/50"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Селекты и выпадающие списки */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Селекты и выпадающие списки</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-2">
+            <Label className="text-white/90">
+              Выберите опцию
+            </Label>
+            <Select>
+              <SelectTrigger className="glass-input text-white">
+                <SelectValue placeholder="Выберите..." />
+              </SelectTrigger>
+              <SelectContent className="glass-card border-white/10">
+                <SelectItem value="option1">Опция 1</SelectItem>
+                <SelectItem value="option2">Опция 2</SelectItem>
+                <SelectItem value="option3">Опция 3</SelectItem>
+                <SelectItem value="option4">Опция 4</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label className="text-white/90">
+              Тип организации
+            </Label>
+            <Select>
+              <SelectTrigger className="glass-input text-white">
+                <SelectValue placeholder="Выберите тип..." />
+              </SelectTrigger>
+              <SelectContent className="glass-card border-white/10">
+                <SelectItem value="fulfillment">Фулфилмент</SelectItem>
+                <SelectItem value="seller">Селлер</SelectItem>
+                <SelectItem value="logist">Логистика</SelectItem>
+                <SelectItem value="wholesale">Оптовик</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Чекбоксы и переключатели */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Чекбоксы и переключатели</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Чекбоксы */}
+          <div className="space-y-4">
+            <h4 className="text-white/90 text-sm font-medium">Чекбоксы</h4>
+            <div className="space-y-3">
+              <div className="flex items-center space-x-2">
+                <Checkbox 
+                  id="checkbox1" 
+                  checked={checkboxValue}
+                  onCheckedChange={setCheckboxValue}
+                />
+                <Label 
+                  htmlFor="checkbox1" 
+                  className="text-white/90 text-sm cursor-pointer"
+                >
+                  Согласие с условиями
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Checkbox id="checkbox2" />
+                <Label 
+                  htmlFor="checkbox2" 
+                  className="text-white/90 text-sm cursor-pointer"
+                >
+                  Получать уведомления
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Checkbox id="checkbox3" disabled />
+                <Label 
+                  htmlFor="checkbox3" 
+                  className="text-white/60 text-sm"
+                >
+                  Отключенный чекбокс
+                </Label>
+              </div>
+            </div>
+          </div>
+
+          {/* Переключатели */}
+          <div className="space-y-4">
+            <h4 className="text-white/90 text-sm font-medium">Переключатели (Switch)</h4>
+            <div className="space-y-3">
+              <div className="flex items-center space-x-2">
+                <Switch 
+                  id="switch1"
+                  checked={switchValue}
+                  onCheckedChange={setSwitchValue}
+                />
+                <Label 
+                  htmlFor="switch1" 
+                  className="text-white/90 text-sm cursor-pointer"
+                >
+                  Включить уведомления
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Switch id="switch2" />
+                <Label 
+                  htmlFor="switch2" 
+                  className="text-white/90 text-sm cursor-pointer"
+                >
+                  Темная тема
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Switch id="switch3" disabled />
+                <Label 
+                  htmlFor="switch3" 
+                  className="text-white/60 text-sm"
+                >
+                  Отключенный переключатель
+                </Label>
+              </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="space-y-4">
+            <Label className="text-white/90 text-sm font-medium">
+              Значение: {sliderValue[0]}
+            </Label>
+            <Slider
+              value={sliderValue}
+              onValueChange={setSliderValue}
+              max={100}
+              min={0}
+              step={1}
+              className="w-full"
+            />
+          </div>
+
+          <div className="space-y-4">
+            <Label className="text-white/90 text-sm font-medium">
+              Диапазон цен: 1000 - 5000 ₽
+            </Label>
+            <Slider
+              defaultValue={[1000, 5000]}
+              max={10000}
+              min={0}
+              step={100}
+              className="w-full"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Состояния полей */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Состояния полей</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Обычное состояние */}
+          <div className="space-y-2">
+            <Label htmlFor="normal-state" className="text-white/90">
+              Обычное состояние
+            </Label>
+            <Input
+              id="normal-state"
+              type="text"
+              placeholder="Введите текст..."
+              className="glass-input text-white placeholder:text-white/50"
+            />
+          </div>
+
+          {/* Фокус */}
+          <div className="space-y-2">
+            <Label htmlFor="focus-state" className="text-white/90">
+              Состояние фокуса
+            </Label>
+            <Input
+              id="focus-state"
+              type="text"
+              placeholder="Кликните для фокуса"
+              className="glass-input text-white placeholder:text-white/50 focus:border-primary focus:ring-2 focus:ring-primary/20"
+              autoFocus
+            />
+          </div>
+
+          {/* Ошибка */}
+          <div className="space-y-2">
+            <Label htmlFor="error-state" className="text-white/90">
+              Состояние ошибки
+            </Label>
+            <Input
+              id="error-state"
+              type="text"
+              placeholder="Неверные данные"
+              className="glass-input text-white placeholder:text-white/50 border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-500/20"
+            />
+            <p className="text-red-400 text-xs">Это поле обязательно для заполнения</p>
+          </div>
+
+          {/* Успех */}
+          <div className="space-y-2">
+            <Label htmlFor="success-state" className="text-white/90">
+              Состояние успеха
+            </Label>
+            <Input
+              id="success-state"
+              type="text"
+              value="Правильно заполнено"
+              className="glass-input text-white placeholder:text-white/50 border-green-500 focus:border-green-500 focus:ring-2 focus:ring-green-500/20"
+              readOnly
+            />
+            <p className="text-green-400 text-xs">Данные сохранены успешно</p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Примеры форм */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Примеры форм</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-8">
+          {/* Форма входа */}
+          <div className="space-y-4">
+            <h4 className="text-white/90 text-sm font-medium">Форма входа</h4>
+            <div className="space-y-4 max-w-sm">
+              <div className="space-y-2">
+                <Label htmlFor="login-email" className="text-white/90">
+                  Email
+                </Label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
+                  <Input
+                    id="login-email"
+                    type="email"
+                    placeholder="example@domain.com"
+                    className="pl-10 glass-input text-white placeholder:text-white/50"
+                  />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="login-password" className="text-white/90">
+                  Пароль
+                </Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
+                  <Input
+                    id="login-password"
+                    type="password"
+                    placeholder="Введите пароль"
+                    className="pl-10 glass-input text-white placeholder:text-white/50"
+                  />
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Checkbox id="remember" />
+                <Label htmlFor="remember" className="text-white/90 text-sm cursor-pointer">
+                  Запомнить меня
+                </Label>
+              </div>
+              <Button variant="glass" className="w-full">
+                Войти
+              </Button>
+            </div>
+          </div>
+
+          {/* Форма регистрации */}
+          <div className="space-y-4">
+            <h4 className="text-white/90 text-sm font-medium">Форма регистрации</h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl">
+              <div className="space-y-2">
+                <Label htmlFor="reg-name" className="text-white/90">
+                  Имя
+                </Label>
+                <Input
+                  id="reg-name"
+                  type="text"
+                  placeholder="Ваше имя"
+                  className="glass-input text-white placeholder:text-white/50"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="reg-surname" className="text-white/90">
+                  Фамилия
+                </Label>
+                <Input
+                  id="reg-surname"
+                  type="text"
+                  placeholder="Ваша фамилия"
+                  className="glass-input text-white placeholder:text-white/50"
+                />
+              </div>
+              <div className="space-y-2 md:col-span-2">
+                <Label htmlFor="reg-email" className="text-white/90">
+                  Email
+                </Label>
+                <Input
+                  id="reg-email"
+                  type="email"
+                  placeholder="example@domain.com"
+                  className="glass-input text-white placeholder:text-white/50"
+                />
+              </div>
+              <div className="space-y-2 md:col-span-2">
+                <Label htmlFor="reg-phone" className="text-white/90">
+                  Телефон
+                </Label>
+                <PhoneInput
+                  id="reg-phone"
+                  placeholder="+7 (999) 999-99-99"
+                  className="glass-input text-white placeholder:text-white/50"
+                />
+              </div>
+              <div className="space-y-2 md:col-span-2">
+                <Label className="text-white/90">
+                  Тип организации
+                </Label>
+                <Select>
+                  <SelectTrigger className="glass-input text-white">
+                    <SelectValue placeholder="Выберите тип..." />
+                  </SelectTrigger>
+                  <SelectContent className="glass-card border-white/10">
+                    <SelectItem value="fulfillment">Фулфилмент</SelectItem>
+                    <SelectItem value="seller">Селлер</SelectItem>
+                    <SelectItem value="logist">Логистика</SelectItem>
+                    <SelectItem value="wholesale">Оптовик</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex items-center space-x-2 md:col-span-2">
+                <Checkbox id="reg-terms" />
+                <Label htmlFor="reg-terms" className="text-white/90 text-sm cursor-pointer">
+                  Согласен с условиями использования
+                </Label>
+              </div>
+              <div className="flex gap-2 md:col-span-2">
+                <Button variant="outline" className="flex-1">
+                  Отмена
+                </Button>
+                <Button variant="glass" className="flex-1">
+                  Зарегистрироваться
+                </Button>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+} 

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>
+  )
+} 

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

@@ -0,0 +1,390 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+export function TypographyDemo() {
+  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="space-y-4">
+            <div>
+              <h1 className="text-4xl font-bold text-white mb-2">
+                Заголовок H1
+              </h1>
+              <p className="text-xs text-white/60 font-mono">
+                text-4xl font-bold
+              </p>
+            </div>
+            
+            <div>
+              <h2 className="text-3xl font-bold text-white mb-2">
+                Заголовок H2
+              </h2>
+              <p className="text-xs text-white/60 font-mono">
+                text-3xl font-bold
+              </p>
+            </div>
+            
+            <div>
+              <h3 className="text-2xl font-semibold text-white mb-2">
+                Заголовок H3
+              </h3>
+              <p className="text-xs text-white/60 font-mono">
+                text-2xl font-semibold
+              </p>
+            </div>
+            
+            <div>
+              <h4 className="text-xl font-semibold text-white mb-2">
+                Заголовок H4
+              </h4>
+              <p className="text-xs text-white/60 font-mono">
+                text-xl font-semibold
+              </p>
+            </div>
+            
+            <div>
+              <h5 className="text-lg font-medium text-white mb-2">
+                Заголовок H5
+              </h5>
+              <p className="text-xs text-white/60 font-mono">
+                text-lg font-medium
+              </p>
+            </div>
+            
+            <div>
+              <h6 className="text-base font-medium text-white mb-2">
+                Заголовок H6
+              </h6>
+              <p className="text-xs text-white/60 font-mono">
+                text-base font-medium
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Градиентные заголовки */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Градиентные заголовки</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div>
+            <h1 className="text-4xl font-bold text-gradient-bright mb-2">
+              Яркий градиентный заголовок
+            </h1>
+            <p className="text-xs text-white/60 font-mono">
+              text-gradient-bright
+            </p>
+          </div>
+          
+          <div>
+            <h2 className="text-3xl font-bold text-gradient mb-2">
+              Обычный градиентный заголовок
+            </h2>
+            <p className="text-xs text-white/60 font-mono">
+              text-gradient
+            </p>
+          </div>
+          
+          <div>
+            <h3 className="text-2xl font-semibold glow-text mb-2">
+              Заголовок с свечением
+            </h3>
+            <p className="text-xs text-white/60 font-mono">
+              glow-text
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Основной текст */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Основной текст</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div>
+            <p className="text-white text-base mb-2">
+              Обычный текст. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+              Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+              Ut enim ad minim veniam, quis nostrud exercitation.
+            </p>
+            <p className="text-xs text-white/60 font-mono">
+              text-white text-base
+            </p>
+          </div>
+          
+          <div>
+            <p className="text-white/90 text-base mb-2">
+              Текст с прозрачностью 90%. Lorem ipsum dolor sit amet, consectetur 
+              adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <p className="text-xs text-white/60 font-mono">
+              text-white/90
+            </p>
+          </div>
+          
+          <div>
+            <p className="text-white/70 text-base mb-2">
+              Текст с прозрачностью 70%. Lorem ipsum dolor sit amet, consectetur 
+              adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <p className="text-xs text-white/60 font-mono">
+              text-white/70
+            </p>
+          </div>
+          
+          <div>
+            <p className="text-white/60 text-base mb-2">
+              Вторичный текст с прозрачностью 60%. Lorem ipsum dolor sit amet, consectetur 
+              adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <p className="text-xs text-white/60 font-mono">
+              text-white/60
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Размеры текста */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Размеры текста</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <p className="text-xs text-white mb-1">Очень мелкий текст</p>
+            <p className="text-xs text-white/60 font-mono">text-xs</p>
+          </div>
+          
+          <div>
+            <p className="text-sm text-white mb-1">Мелкий текст</p>
+            <p className="text-xs text-white/60 font-mono">text-sm</p>
+          </div>
+          
+          <div>
+            <p className="text-base text-white mb-1">Базовый текст</p>
+            <p className="text-xs text-white/60 font-mono">text-base</p>
+          </div>
+          
+          <div>
+            <p className="text-lg text-white mb-1">Большой текст</p>
+            <p className="text-xs text-white/60 font-mono">text-lg</p>
+          </div>
+          
+          <div>
+            <p className="text-xl text-white mb-1">Очень большой текст</p>
+            <p className="text-xs text-white/60 font-mono">text-xl</p>
+          </div>
+          
+          <div>
+            <p className="text-2xl text-white mb-1">Огромный текст</p>
+            <p className="text-xs text-white/60 font-mono">text-2xl</p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Насыщенность шрифта */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Насыщенность шрифта</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <p className="text-white font-light text-lg mb-1">Легкий шрифт</p>
+            <p className="text-xs text-white/60 font-mono">font-light</p>
+          </div>
+          
+          <div>
+            <p className="text-white font-normal text-lg mb-1">Обычный шрифт</p>
+            <p className="text-xs text-white/60 font-mono">font-normal</p>
+          </div>
+          
+          <div>
+            <p className="text-white font-medium text-lg mb-1">Средний шрифт</p>
+            <p className="text-xs text-white/60 font-mono">font-medium</p>
+          </div>
+          
+          <div>
+            <p className="text-white font-semibold text-lg mb-1">Полужирный шрифт</p>
+            <p className="text-xs text-white/60 font-mono">font-semibold</p>
+          </div>
+          
+          <div>
+            <p className="text-white font-bold text-lg mb-1">Жирный шрифт</p>
+            <p className="text-xs text-white/60 font-mono">font-bold</p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Специальные стили */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Специальные стили текста</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div>
+            <p className="text-white font-mono text-sm mb-1">
+              Моноширинный шрифт для кода
+            </p>
+            <p className="text-xs text-white/60 font-mono">font-mono</p>
+          </div>
+          
+          <div>
+            <p className="text-white italic text-base mb-1">
+              Курсивный текст
+            </p>
+            <p className="text-xs text-white/60 font-mono">italic</p>
+          </div>
+          
+          <div>
+            <p className="text-white underline text-base mb-1">
+              Подчеркнутый текст
+            </p>
+            <p className="text-xs text-white/60 font-mono">underline</p>
+          </div>
+          
+          <div>
+            <p className="text-white line-through text-base mb-1">
+              Зачеркнутый текст
+            </p>
+            <p className="text-xs text-white/60 font-mono">line-through</p>
+          </div>
+          
+          <div>
+            <p className="text-white uppercase text-base mb-1">
+              Заглавные буквы
+            </p>
+            <p className="text-xs text-white/60 font-mono">uppercase</p>
+          </div>
+          
+          <div>
+            <p className="text-white lowercase text-base mb-1">
+              СТРОЧНЫЕ БУКВЫ
+            </p>
+            <p className="text-xs text-white/60 font-mono">lowercase</p>
+          </div>
+          
+          <div>
+            <p className="text-white capitalize text-base mb-1">
+              первая буква заглавная
+            </p>
+            <p className="text-xs text-white/60 font-mono">capitalize</p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Выравнивание текста */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <CardTitle className="text-white">Выравнивание текста</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div>
+            <p className="text-white text-left text-base mb-1">
+              Выравнивание по левому краю. Lorem ipsum dolor sit amet consectetur.
+            </p>
+            <p className="text-xs text-white/60 font-mono">text-left</p>
+          </div>
+          
+          <div>
+            <p className="text-white text-center text-base mb-1">
+              Выравнивание по центру. Lorem ipsum dolor sit amet consectetur.
+            </p>
+            <p className="text-xs text-white/60 font-mono">text-center</p>
+          </div>
+          
+          <div>
+            <p className="text-white text-right text-base mb-1">
+              Выравнивание по правому краю. Lorem ipsum dolor sit amet consectetur.
+            </p>
+            <p className="text-xs text-white/60 font-mono">text-right</p>
+          </div>
+          
+          <div>
+            <p className="text-white text-justify text-base mb-1">
+              Выравнивание по ширине. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation.
+            </p>
+            <p className="text-xs text-white/60 font-mono">text-justify</p>
+          </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-3">Маркированный список</h4>
+            <ul className="text-white space-y-1 list-disc list-inside">
+              <li>Первый пункт списка</li>
+              <li>Второй пункт списка</li>
+              <li>Третий пункт списка с длинным текстом, который может переноситься на несколько строк</li>
+              <li>Четвертый пункт</li>
+            </ul>
+          </div>
+          
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Нумерованный список</h4>
+            <ol className="text-white space-y-1 list-decimal list-inside">
+              <li>Первый шаг процесса</li>
+              <li>Второй шаг процесса</li>
+              <li>Третий шаг с подробным описанием того, что нужно сделать</li>
+              <li>Завершающий шаг</li>
+            </ol>
+          </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-3">Цитата</h4>
+            <blockquote className="text-white/80 text-lg italic border-l-4 border-primary pl-4 py-2">
+              &quot;Дизайн - это не то, как вещь выглядит. Дизайн - это то, как вещь работает.&quot;
+              <footer className="text-white/60 text-sm mt-2 not-italic">
+                — Стив Джобс
+              </footer>
+            </blockquote>
+          </div>
+          
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Инлайн код</h4>
+            <p className="text-white text-base">
+              Используйте класс <code className="bg-white/10 text-white px-1.5 py-0.5 rounded text-sm font-mono">glass-card</code> для создания карточек с эффектом стекла.
+            </p>
+          </div>
+          
+          <div>
+            <h4 className="text-white/90 text-sm font-medium mb-3">Блок кода</h4>
+            <pre className="bg-white/5 text-white p-4 rounded-lg text-sm font-mono overflow-x-auto">
+{`<Card className="glass-card border-white/10">
+  <CardHeader>
+    <CardTitle className="text-white">
+      Заголовок карточки
+    </CardTitle>
+  </CardHeader>
+  <CardContent>
+    Содержимое карточки
+  </CardContent>
+</Card>`}
+            </pre>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+} 

src/components/admin/users-section.tsx

@@ -0,0 +1,286 @@
+"use client"
+
+import { useState, useEffect } from 'react'
+import { useQuery } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import { Search, Phone, Building, Calendar, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react'
+
+// GraphQL запрос для получения пользователей
+const ALL_USERS = gql`
+  query AllUsers($search: String, $limit: Int, $offset: Int) {
+    allUsers(search: $search, limit: $limit, offset: $offset) {
+      users {
+        id
+        phone
+        managerName
+        avatar
+        createdAt
+        updatedAt
+        organization {
+          id
+          inn
+          name
+          fullName
+          type
+          status
+          createdAt
+        }
+      }
+      total
+      hasMore
+    }
+  }
+`
+
+interface User {
+  id: string
+  phone: string
+  managerName?: string
+  avatar?: string
+  createdAt: string
+  updatedAt: string
+  organization?: {
+    id: string
+    inn: string
+    name?: string
+    fullName?: string
+    type: string
+    status?: string
+    createdAt: string
+  }
+}
+
+export function UsersSection() {
+  const [search, setSearch] = useState('')
+  const [currentPage, setCurrentPage] = useState(1)
+  const [searchQuery, setSearchQuery] = useState('')
+  const limit = 20
+
+  const { data, loading, error, refetch } = useQuery(ALL_USERS, {
+    variables: {
+      search: searchQuery || undefined,
+      limit,
+      offset: (currentPage - 1) * limit
+    },
+    fetchPolicy: 'cache-and-network'
+  })
+
+  // Обновляем запрос при изменении поиска с дебаунсом
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSearchQuery(search)
+      setCurrentPage(1) // Сбрасываем на первую страницу при поиске
+    }, 500)
+
+    return () => clearTimeout(timer)
+  }, [search])
+
+  const users = data?.allUsers?.users || []
+  const total = data?.allUsers?.total || 0
+  const hasMore = data?.allUsers?.hasMore || false
+  const totalPages = Math.ceil(total / limit)
+
+  const getOrganizationTypeBadge = (type: string) => {
+    const typeMap = {
+      FULFILLMENT: { label: 'Фулфилмент', variant: 'default' as const },
+      SELLER: { label: 'Селлер', variant: 'secondary' as const },
+      LOGIST: { label: 'Логистика', variant: 'outline' as const },
+      WHOLESALE: { label: 'Оптовик', variant: 'destructive' as const }
+    }
+    return typeMap[type as keyof typeof typeMap] || { label: type, variant: 'outline' as const }
+  }
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('ru-RU', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  const getInitials = (name?: string, phone?: string) => {
+    if (name) {
+      return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
+    }
+    if (phone) {
+      return phone.slice(-2)
+    }
+    return 'У'
+  }
+
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1)
+    }
+  }
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1)
+    }
+  }
+
+  if (error) {
+    return (
+      <div className="p-8">
+        <div className="glass-card p-6 text-center">
+          <p className="text-red-400">Ошибка загрузки пользователей: {error.message}</p>
+          <Button 
+            onClick={() => refetch()} 
+            className="mt-4 glass-button"
+          >
+            Попробовать снова
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-white mb-2">Пользователи</h1>
+        <p className="text-white/70">Управление пользователями системы</p>
+      </div>
+
+      {/* Поиск и статистика */}
+      <div className="flex flex-col sm:flex-row gap-4 mb-6">
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
+          <Input
+            type="text"
+            placeholder="Поиск по телефону, имени, ИНН организации..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-10 glass-input text-white placeholder:text-white/50"
+          />
+        </div>
+        <div className="flex items-center space-x-4 text-white/70 text-sm">
+          <span>Всего: {total}</span>
+          {searchQuery && <span>Найдено: {users.length}</span>}
+        </div>
+      </div>
+
+      {/* Список пользователей */}
+      {loading ? (
+        <div className="glass-card p-8 text-center">
+          <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4 text-white/70" />
+          <p className="text-white/70">Загрузка пользователей...</p>
+        </div>
+      ) : users.length === 0 ? (
+        <div className="glass-card p-8 text-center">
+          <p className="text-white/70">
+            {searchQuery ? 'Пользователи не найдены' : 'Пользователи отсутствуют'}
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {users.map((user: User) => (
+            <Card key={user.id} className="glass-card border-white/10 hover:border-white/20 transition-all">
+              <CardContent className="p-6">
+                <div className="flex items-start space-x-4">
+                  {/* Аватар */}
+                  <Avatar className="h-12 w-12 bg-white/20">
+                    <AvatarImage src={user.avatar} />
+                    <AvatarFallback className="bg-white/20 text-white text-sm font-semibold">
+                      {getInitials(user.managerName, user.phone)}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  {/* Основная информация */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between mb-2">
+                      <div>
+                        <h3 className="text-white font-medium">
+                          {user.managerName || 'Без имени'}
+                        </h3>
+                        <div className="flex items-center text-white/70 text-sm mt-1">
+                          <Phone className="h-3 w-3 mr-1" />
+                          {user.phone}
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div className="flex items-center text-white/70 text-sm">
+                          <Calendar className="h-3 w-3 mr-1" />
+                          {formatDate(user.createdAt)}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Организация */}
+                    {user.organization && (
+                      <div className="bg-white/5 rounded-lg p-3 mt-3">
+                        <div className="flex items-start justify-between">
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center space-x-2 mb-1">
+                              <Building className="h-4 w-4 text-white/70" />
+                              <span className="text-white font-medium truncate">
+                                {user.organization.name || user.organization.fullName || 'Без названия'}
+                              </span>
+                              <Badge {...getOrganizationTypeBadge(user.organization.type)}>
+                                {getOrganizationTypeBadge(user.organization.type).label}
+                              </Badge>
+                            </div>
+                            <p className="text-white/70 text-sm">
+                              ИНН: {user.organization.inn}
+                            </p>
+                            {user.organization.status && (
+                              <p className="text-white/60 text-xs">
+                                Статус: {user.organization.status}
+                              </p>
+                            )}
+                          </div>
+                          <div className="text-right">
+                            <p className="text-white/60 text-xs">
+                              Зарегистрировано: {formatDate(user.organization.createdAt)}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Пагинация */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between mt-8 pt-6 border-t border-white/10">
+          <div className="text-white/70 text-sm">
+            Страница {currentPage} из {totalPages}
+          </div>
+          <div className="flex space-x-2">
+            <Button
+              onClick={handlePrevPage}
+              disabled={currentPage === 1}
+              variant="ghost"
+              className="glass-button text-white disabled:opacity-50"
+            >
+              <ChevronLeft className="h-4 w-4 mr-1" />
+              Назад
+            </Button>
+            <Button
+              onClick={handleNextPage}
+              disabled={currentPage === totalPages}
+              variant="ghost"
+              className="glass-button text-white disabled:opacity-50"
+            >
+              Вперед
+              <ChevronRight className="h-4 w-4 ml-1" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+} 

src/graphql/mutations.ts

@@ -992,3 +992,29 @@ export const UPDATE_EMPLOYEE_SCHEDULE = gql`
     updateEmployeeSchedule(input: $input)
   }
 `
+
+// Админ мутации
+export const ADMIN_LOGIN = gql`
+  mutation AdminLogin($username: String!, $password: String!) {
+    adminLogin(username: $username, password: $password) {
+      success
+      message
+      token
+      admin {
+        id
+        username
+        email
+        isActive
+        lastLogin
+        createdAt
+        updatedAt
+      }
+    }
+  }
+`
+
+export const ADMIN_LOGOUT = gql`
+  mutation AdminLogout {
+    adminLogout
+  }
+`

src/graphql/queries.ts

@@ -568,3 +568,44 @@ export const GET_EMPLOYEE_SCHEDULE = gql`
     }
   }
 `
+
+// Админ запросы
+export const ADMIN_ME = gql`
+  query AdminMe {
+    adminMe {
+      id
+      username
+      email
+      isActive
+      lastLogin
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+export const ALL_USERS = gql`
+  query AllUsers($search: String, $limit: Int, $offset: Int) {
+    allUsers(search: $search, limit: $limit, offset: $offset) {
+      users {
+        id
+        phone
+        managerName
+        avatar
+        createdAt
+        updatedAt
+        organization {
+          id
+          inn
+          name
+          fullName
+          type
+          status
+          createdAt
+        }
+      }
+      total
+      hasMore
+    }
+  }
+` 

src/graphql/resolvers.ts

@@ -1,4 +1,5 @@
 import jwt from 'jsonwebtoken'
+import bcrypt from 'bcryptjs'
 import { GraphQLError } from 'graphql'
 import { GraphQLScalarType, Kind } from 'graphql'
 import { prisma } from '@/lib/prisma'
@@ -18,6 +19,10 @@ interface Context {
     id: string
     phone: string
   }
+  admin?: {
+    id: string
+    username: string
+  }
 }
 
 interface CreateEmployeeInput {
@@ -3737,3 +3742,166 @@ resolvers.Mutation = {
   ...resolvers.Mutation,
   ...logisticsMutations
 }
+
+// Админ резолверы
+const adminQueries = {
+  adminMe: async (_: unknown, __: unknown, context: Context) => {
+    if (!context.admin) {
+      throw new GraphQLError('Требуется авторизация администратора', {
+        extensions: { code: 'UNAUTHENTICATED' }
+      })
+    }
+
+    const admin = await prisma.admin.findUnique({
+      where: { id: context.admin.id }
+    })
+
+    if (!admin) {
+      throw new GraphQLError('Администратор не найден')
+    }
+
+    return admin
+  },
+
+  allUsers: async (_: unknown, args: { search?: string; limit?: number; offset?: number }, context: Context) => {
+    if (!context.admin) {
+      throw new GraphQLError('Требуется авторизация администратора', {
+        extensions: { code: 'UNAUTHENTICATED' }
+      })
+    }
+
+    const limit = args.limit || 50
+    const offset = args.offset || 0
+    
+    // Строим условие поиска
+    const whereCondition: Prisma.UserWhereInput = args.search
+      ? {
+          OR: [
+            { phone: { contains: args.search, mode: 'insensitive' } },
+            { managerName: { contains: args.search, mode: 'insensitive' } },
+            { 
+              organization: {
+                OR: [
+                  { name: { contains: args.search, mode: 'insensitive' } },
+                  { fullName: { contains: args.search, mode: 'insensitive' } },
+                  { inn: { contains: args.search, mode: 'insensitive' } }
+                ]
+              }
+            }
+          ]
+        }
+      : {}
+
+    // Получаем пользователей с пагинацией
+    const [users, total] = await Promise.all([
+      prisma.user.findMany({
+        where: whereCondition,
+        include: {
+          organization: true
+        },
+        take: limit,
+        skip: offset,
+        orderBy: { createdAt: 'desc' }
+      }),
+      prisma.user.count({
+        where: whereCondition
+      })
+    ])
+
+    return {
+      users,
+      total,
+      hasMore: offset + limit < total
+    }
+  }
+}
+
+const adminMutations = {
+  adminLogin: async (_: unknown, args: { username: string; password: string }) => {
+    try {
+      // Найти администратора
+      const admin = await prisma.admin.findUnique({
+        where: { username: args.username }
+      })
+
+      if (!admin) {
+        return {
+          success: false,
+          message: 'Неверные учетные данные'
+        }
+      }
+
+      // Проверить активность
+      if (!admin.isActive) {
+        return {
+          success: false,
+          message: 'Аккаунт заблокирован'
+        }
+      }
+
+      // Проверить пароль
+      const isPasswordValid = await bcrypt.compare(args.password, admin.password)
+      
+      if (!isPasswordValid) {
+        return {
+          success: false,
+          message: 'Неверные учетные данные'
+        }
+      }
+
+      // Обновить время последнего входа
+      await prisma.admin.update({
+        where: { id: admin.id },
+        data: { lastLogin: new Date() }
+      })
+
+      // Создать токен
+      const token = jwt.sign(
+        { 
+          adminId: admin.id,
+          username: admin.username,
+          type: 'admin'
+        },
+        process.env.JWT_SECRET!,
+        { expiresIn: '24h' }
+      )
+
+      return {
+        success: true,
+        message: 'Успешная авторизация',
+        token,
+        admin: {
+          ...admin,
+          password: undefined // Не возвращаем пароль
+        }
+      }
+    } catch (error) {
+      console.error('Admin login error:', error)
+      return {
+        success: false,
+        message: 'Ошибка авторизации'
+      }
+    }
+  },
+
+  adminLogout: async (_: unknown, __: unknown, context: Context) => {
+    if (!context.admin) {
+      throw new GraphQLError('Требуется авторизация администратора', {
+        extensions: { code: 'UNAUTHENTICATED' }
+      })
+    }
+    
+    return true
+  }
+}
+
+// Добавляем админ запросы и мутации к основным резолверам
+resolvers.Query = {
+  ...resolvers.Query,
+  ...adminQueries
+}
+
+resolvers.Mutation = {
+  ...resolvers.Mutation,
+  ...adminMutations
+} 

src/graphql/typedefs.ts

@@ -53,6 +53,10 @@ export const typeDefs = gql`
     
     # Табель сотрудника за месяц
     employeeSchedule(employeeId: ID!, year: Int!, month: Int!): [EmployeeSchedule!]!
+    
+    # Админ запросы
+    adminMe: Admin
+    allUsers(search: String, limit: Int, offset: Int): UsersResponse!
   }
 
   type Mutation {
@@ -128,6 +132,10 @@ export const typeDefs = gql`
     updateEmployee(id: ID!, input: UpdateEmployeeInput!): EmployeeResponse!
     deleteEmployee(id: ID!): Boolean!
     updateEmployeeSchedule(input: UpdateScheduleInput!): Boolean!
+    
+    # Админ мутации
+    adminLogin(username: String!, password: String!): AdminAuthResponse!
+    adminLogout: Boolean!
   }
 
   # Типы данных
@@ -644,4 +652,28 @@ export const typeDefs = gql`
 
   # JSON скаляр
   scalar JSON
+
+  # Админ типы
+  type Admin {
+    id: ID!
+    username: String!
+    email: String
+    isActive: Boolean!
+    lastLogin: String
+    createdAt: String!
+    updatedAt: String!
+  }
+
+  type AdminAuthResponse {
+    success: Boolean!
+    message: String!
+    token: String
+    admin: Admin
+  }
+
+  type UsersResponse {
+    users: [User!]!
+    total: Int!
+    hasMore: Boolean!
+  }
 ` 

src/hooks/useAdminAuth.ts

@@ -0,0 +1,255 @@
+import { useMutation, useQuery } from '@apollo/client'
+import { useState, useEffect } from 'react'
+import { gql } from '@apollo/client'
+import { apolloClient } from '@/lib/apollo-client'
+
+// GraphQL мутации и запросы
+const ADMIN_LOGIN = gql`
+  mutation AdminLogin($username: String!, $password: String!) {
+    adminLogin(username: $username, password: $password) {
+      success
+      message
+      token
+      admin {
+        id
+        username
+        email
+        isActive
+        lastLogin
+        createdAt
+        updatedAt
+      }
+    }
+  }
+`
+
+const ADMIN_ME = gql`
+  query AdminMe {
+    adminMe {
+      id
+      username
+      email
+      isActive
+      lastLogin
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+const ADMIN_LOGOUT = gql`
+  mutation AdminLogout {
+    adminLogout
+  }
+`
+
+interface Admin {
+  id: string
+  username: string
+  email?: string
+  isActive: boolean
+  lastLogin?: string
+  createdAt: string
+  updatedAt: string
+}
+
+interface UseAdminAuthReturn {
+  login: (username: string, password: string) => Promise<{ success: boolean; message: string; admin?: Admin }>
+  logout: () => void
+  admin: Admin | null
+  isAuthenticated: boolean
+  isLoading: boolean
+  checkAuth: () => Promise<void>
+}
+
+// Утилиты для работы с токенами администратора
+const ADMIN_TOKEN_KEY = 'adminAuthToken'
+const ADMIN_DATA_KEY = 'adminData'
+
+const setAdminToken = (token: string) => {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(ADMIN_TOKEN_KEY, token)
+  }
+}
+
+const getAdminToken = (): string | null => {
+  if (typeof window !== 'undefined') {
+    return localStorage.getItem(ADMIN_TOKEN_KEY)
+  }
+  return null
+}
+
+const removeAdminToken = () => {
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem(ADMIN_TOKEN_KEY)
+    localStorage.removeItem(ADMIN_DATA_KEY)
+  }
+}
+
+const setAdminData = (admin: Admin) => {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(ADMIN_DATA_KEY, JSON.stringify(admin))
+  }
+}
+
+export const useAdminAuth = (): UseAdminAuthReturn => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [admin, setAdmin] = useState<Admin | null>(null)
+  const [isAuthenticated, setIsAuthenticated] = useState(() => {
+    return !!getAdminToken()
+  })
+  const [isCheckingAuth, setIsCheckingAuth] = useState(false)
+
+  const [adminLoginMutation] = useMutation(ADMIN_LOGIN)
+  const [adminLogoutMutation] = useMutation(ADMIN_LOGOUT)
+
+  // Проверка авторизации администратора
+  const checkAuth = async () => {
+    if (isCheckingAuth) {
+      return
+    }
+
+    const token = getAdminToken()
+    console.log('useAdminAuth - checkAuth called, token exists:', !!token)
+    
+    if (!token) {
+      setIsAuthenticated(false)
+      setAdmin(null)
+      setIsCheckingAuth(false)
+      return
+    }
+
+    setIsCheckingAuth(true)
+    
+    try {
+      console.log('useAdminAuth - Making ADMIN_ME query')
+      const { data } = await apolloClient.query({
+        query: ADMIN_ME,
+        errorPolicy: 'all',
+        fetchPolicy: 'network-only',
+        context: {
+          headers: {
+            authorization: `Bearer ${token}`
+          }
+        }
+      })
+      
+      console.log('useAdminAuth - ADMIN_ME response:', !!data?.adminMe)
+      if (data?.adminMe) {
+        setAdmin(data.adminMe)
+        setIsAuthenticated(true)
+        setAdminData(data.adminMe)
+        console.log('useAdminAuth - Admin authenticated:', data.adminMe.username)
+      } else {
+        setIsAuthenticated(false)
+        setAdmin(null)
+      }
+    } catch (error: unknown) {
+      console.log('useAdminAuth - ADMIN_ME error:', error)
+      if ((error as { graphQLErrors?: Array<{ extensions?: { code?: string } }> })?.graphQLErrors?.some((e) => e.extensions?.code === 'UNAUTHENTICATED')) {
+        logout()
+      } else {
+        setIsAuthenticated(false)
+        setAdmin(null)
+      }
+    } finally {
+      setIsCheckingAuth(false)
+    }
+  }
+
+  // Проверяем авторизацию при загрузке компонента
+  useEffect(() => {
+    const token = getAdminToken()
+    console.log('useAdminAuth - useEffect init, token exists:', !!token, 'admin exists:', !!admin, 'isChecking:', isCheckingAuth)
+    
+    if (token && !admin && !isCheckingAuth) {
+      console.log('useAdminAuth - Running checkAuth because token exists but no admin data')
+      checkAuth()
+    } else if (!token) {
+      console.log('useAdminAuth - No token, setting unauthenticated state')
+      setIsAuthenticated(false)
+      setAdmin(null)
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const login = async (username: string, password: string) => {
+    try {
+      setIsLoading(true)
+      console.log('useAdminAuth - Starting adminLogin mutation')
+      
+      const { data } = await adminLoginMutation({
+        variables: { username, password }
+      })
+
+      console.log('useAdminAuth - GraphQL response data:', data)
+      const result = data.adminLogin
+      console.log('useAdminAuth - Admin login result:', { 
+        success: result.success,
+        hasToken: !!result.token,
+        hasAdmin: !!result.admin,
+        message: result.message 
+      })
+      
+      if (result.success && result.token && result.admin) {
+        // Сохраняем токен и данные администратора
+        console.log('useAdminAuth - Saving admin token')
+        setAdminToken(result.token)
+        setAdminData(result.admin)
+        
+        // Обновляем состояние хука
+        setAdmin(result.admin)
+        setIsAuthenticated(true)
+        console.log('useAdminAuth - State updated: admin set, isAuthenticated=true')
+        
+        // Принудительно обновляем Apollo Client
+        apolloClient.resetStore()
+        
+        // Перенаправляем в админ-дашборд
+        if (typeof window !== 'undefined') {
+          window.location.href = '/admin/dashboard'
+        }
+        
+        return {
+          success: true,
+          message: result.message,
+          admin: result.admin
+        }
+      }
+
+      return {
+        success: false,
+        message: result.message
+      }
+    } catch (error) {
+      console.error('Error during admin login:', error)
+      return {
+        success: false,
+        message: 'Ошибка при авторизации'
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const logout = () => {
+    console.log('useAdminAuth - Logging out')
+    removeAdminToken()
+    setAdmin(null)
+    setIsAuthenticated(false)
+    apolloClient.resetStore()
+    
+    // Перенаправляем на страницу входа администратора
+    if (typeof window !== 'undefined') {
+      window.location.href = '/admin'
+    }
+  }
+
+  return {
+    login,
+    logout,
+    admin,
+    isAuthenticated,
+    isLoading,
+    checkAuth
+  }
+} 

src/lib/apollo-client.ts

@@ -9,10 +9,19 @@ const httpLink = createHttpLink({
 
 // Auth Link для добавления JWT токена в заголовки
 const authLink = setContext((operation, { headers }) => {
-  // Получаем токен из localStorage каждый раз
+  if (typeof window === 'undefined') {
-  const token = typeof window !== 'undefined' ? localStorage.getItem('authToken') : null
+    return { headers }
+  }
   
-  console.log(`Apollo Client - Operation: ${operation.operationName}, Token:`, token ? `${token.substring(0, 20)}...` : 'No token')
+  // Проверяем токены администратора и пользователя
+  const adminToken = localStorage.getItem('adminAuthToken')
+  const userToken = localStorage.getItem('authToken')
+  
+  // Приоритет у админского токена
+  const token = adminToken || userToken
+  const tokenType = adminToken ? 'admin' : 'user'
+  
+  console.log(`Apollo Client - Operation: ${operation.operationName}, Token type: ${tokenType}, Token:`, token ? `${token.substring(0, 20)}...` : 'No token')
 
   const authHeaders = {
     ...headers,
@@ -35,17 +44,27 @@ const errorLink = onError(({ graphQLErrors, networkError }) => {
       )
       
       // Если токен недействителен, очищаем localStorage и перенаправляем на авторизацию
-      // Но не делаем редирект если пользователь уже на главной странице (в процессе авторизации)
       if (extensions?.code === 'UNAUTHENTICATED') {
         if (typeof window !== 'undefined') {
+          const isAdminPath = window.location.pathname.startsWith('/admin')
+          
+          if (isAdminPath) {
+            // Для админских страниц очищаем админские токены
+            localStorage.removeItem('adminAuthToken')
+            localStorage.removeItem('adminData')
+            if (window.location.pathname !== '/admin') {
+              window.location.href = '/admin'
+            }
+          } else {
+            // Для пользовательских страниц очищаем пользовательские токены
             localStorage.removeItem('authToken')
             localStorage.removeItem('userData')
-          // Перенаправляем на страницу авторизации только если не находимся на ней
             if (window.location.pathname !== '/') {
               window.location.href = '/'
             }
           }
         }
+      }
     })
   }