Sfera/sfera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bivekich
2025-07-19 14:53:45 +03:00
parent f24c015021
commit 6287449521
26 changed files with 3931 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

13
prisma/schema.prisma
View File

@ -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

43
scripts/create-admin.mjs Normal file
View File

@ -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()

10
src/app/admin/dashboard/page.tsx Normal file
View File

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

14
src/app/admin/page.tsx Normal file
View File

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

29
src/app/api/graphql/route.ts
View File

@ -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
phone: string
userId?: 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 }
}
}
})

9
src/app/globals.css
View File

@ -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;

44
src/components/admin/admin-dashboard.tsx Normal file
View File

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

65
src/components/admin/admin-guard.tsx Normal file
View File

@ -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}</>
}

117
src/components/admin/admin-login.tsx Normal file
View File

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

118
src/components/admin/admin-sidebar.tsx Normal file
View File

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

86
src/components/admin/ui-kit-section.tsx Normal file
View File

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

288
src/components/admin/ui-kit/buttons-demo.tsx Normal file
View File

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

413
src/components/admin/ui-kit/cards-demo.tsx Normal file
View File

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

367
src/components/admin/ui-kit/colors-demo.tsx Normal file
View File

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

527
src/components/admin/ui-kit/forms-demo.tsx Normal file
View File

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

543
src/components/admin/ui-kit/icons-demo.tsx Normal file
View File

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

390
src/components/admin/ui-kit/typography-demo.tsx Normal file
View File

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

286
src/components/admin/users-section.tsx Normal file
View File

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

26
src/graphql/mutations.ts
View File

@ -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
}
`

41
src/graphql/queries.ts
View File

@ -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
}
}
`

168
src/graphql/resolvers.ts
View File

@ -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
}

32
src/graphql/typedefs.ts
View File

@ -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!
}
`

255
src/hooks/useAdminAuth.ts Normal file
View File

@ -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
}
}

29
src/lib/apollo-client.ts
View File

@ -9,10 +9,19 @@ const httpLink = createHttpLink({
// Auth Link для добавления JWT токена в заголовки
const authLink = setContext((operation, { headers }) => {
// Получаем токен из localStorage каждый раз
const token = typeof window !== 'undefined' ? localStorage.getItem('authToken') : null
if (typeof window === 'undefined') {
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 = '/'
}
}
}
}
})
}