Добавлены новые зависимости, обновлены стили и улучшена структура проекта. Обновлен README с описанием функционала и технологий. Реализована анимация и адаптивный дизайн. Настроена авторизация с использованием Apollo Client.
This commit is contained in:
Bivekich
65
src/app/api/graphql/route.ts
Normal file
65
src/app/api/graphql/route.ts
Normal file
@ -0,0 +1,65 @@
|
||||
import { ApolloServer } from '@apollo/server'
|
||||
import { startServerAndCreateNextHandler } from '@as-integrations/next'
|
||||
import { NextRequest } from 'next/server'
|
||||
import jwt from 'jsonwebtoken'
|
||||
import { typeDefs } from '@/graphql/typedefs'
|
||||
import { resolvers } from '@/graphql/resolvers'
|
||||
|
||||
// Интерфейс для контекста
|
||||
interface Context {
|
||||
user?: {
|
||||
id: string
|
||||
phone: string
|
||||
}
|
||||
}
|
||||
|
||||
// Создаем Apollo Server
|
||||
const server = new ApolloServer<Context>({
|
||||
typeDefs,
|
||||
resolvers,
|
||||
})
|
||||
|
||||
// Создаем Next.js handler
|
||||
const handler = startServerAndCreateNextHandler<NextRequest>(server, {
|
||||
context: async (req: NextRequest) => {
|
||||
// Извлекаем токен из заголовка Authorization
|
||||
const authHeader = req.headers.get('authorization')
|
||||
const token = authHeader?.replace('Bearer ', '')
|
||||
|
||||
console.log('GraphQL Context - Auth header:', authHeader)
|
||||
console.log('GraphQL Context - Token:', token ? `${token.substring(0, 20)}...` : 'No token')
|
||||
|
||||
if (!token) {
|
||||
console.log('GraphQL Context - No token provided')
|
||||
return { user: undefined }
|
||||
}
|
||||
|
||||
try {
|
||||
// Верифицируем JWT токен
|
||||
const decoded = jwt.verify(token, process.env.JWT_SECRET!) as {
|
||||
userId: string
|
||||
phone: string
|
||||
}
|
||||
|
||||
console.log('GraphQL Context - Decoded user:', { id: decoded.userId, phone: decoded.phone })
|
||||
|
||||
return {
|
||||
user: {
|
||||
id: decoded.userId,
|
||||
phone: decoded.phone
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('GraphQL Context - Invalid token:', error)
|
||||
return { user: undefined }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
return handler(request)
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
return handler(request)
|
||||
}
|
||||
104
src/app/api/upload-avatar/route.ts
Normal file
104
src/app/api/upload-avatar/route.ts
Normal file
@ -0,0 +1,104 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'
|
||||
|
||||
const s3Client = new S3Client({
|
||||
region: 'ru-1',
|
||||
endpoint: 'https://s3.twcstorage.ru',
|
||||
credentials: {
|
||||
accessKeyId: 'I6XD2OR7YO2ZN6L6Z629',
|
||||
secretAccessKey: '9xCOoafisG0aB9lJNvdLO1UuK73fBvMcpHMdijrJ'
|
||||
},
|
||||
forcePathStyle: true
|
||||
})
|
||||
|
||||
const BUCKET_NAME = '617774af-sfera'
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const formData = await request.formData()
|
||||
const file = formData.get('file') as File
|
||||
const key = formData.get('key') as string
|
||||
|
||||
if (!file || !key) {
|
||||
return NextResponse.json(
|
||||
{ error: 'File and key are required' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
// Проверяем тип файла
|
||||
if (!file.type.startsWith('image/')) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Only image files are allowed' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
// Ограничиваем размер файла (5MB)
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
return NextResponse.json(
|
||||
{ error: 'File size must be less than 5MB' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
// Конвертируем файл в Buffer
|
||||
const buffer = Buffer.from(await file.arrayBuffer())
|
||||
|
||||
// Загружаем в S3
|
||||
const command = new PutObjectCommand({
|
||||
Bucket: BUCKET_NAME,
|
||||
Key: key,
|
||||
Body: buffer,
|
||||
ContentType: file.type,
|
||||
ACL: 'public-read'
|
||||
})
|
||||
|
||||
await s3Client.send(command)
|
||||
|
||||
// Возвращаем URL файла
|
||||
const url = `https://s3.twcstorage.ru/${BUCKET_NAME}/${key}`
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
url,
|
||||
key
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error uploading avatar:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to upload avatar' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest) {
|
||||
try {
|
||||
const { key } = await request.json()
|
||||
|
||||
if (!key) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Key is required' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
// TODO: Добавить удаление из S3
|
||||
// const command = new DeleteObjectCommand({
|
||||
// Bucket: BUCKET_NAME,
|
||||
// Key: key
|
||||
// })
|
||||
// await s3Client.send(command)
|
||||
|
||||
return NextResponse.json({ success: true })
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error deleting avatar:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to delete avatar' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
10
src/app/dashboard/page.tsx
Normal file
10
src/app/dashboard/page.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { AuthGuard } from "@/components/auth-guard"
|
||||
import { DashboardHome } from "@/components/dashboard/dashboard-home"
|
||||
|
||||
export default function DashboardPage() {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<DashboardHome />
|
||||
</AuthGuard>
|
||||
)
|
||||
}
|
||||
@ -1,26 +1,378 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(0.98 0.02 320);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.65 0.28 315);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.94 0.08 315);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.94 0.05 315);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.90 0.12 315);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.90 0.08 315);
|
||||
--input: oklch(0.96 0.05 315);
|
||||
--ring: oklch(0.65 0.28 315);
|
||||
--chart-1: oklch(0.70 0.25 315);
|
||||
--chart-2: oklch(0.65 0.22 290);
|
||||
--chart-3: oklch(0.60 0.20 340);
|
||||
--chart-4: oklch(0.75 0.18 305);
|
||||
--chart-5: oklch(0.68 0.24 325);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.65 0.28 315);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.90 0.12 315);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.90 0.08 315);
|
||||
--sidebar-ring: oklch(0.65 0.28 315);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.08 0.08 315);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.12 0.08 315);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.12 0.08 315);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.75 0.32 315);
|
||||
--primary-foreground: oklch(0.08 0.08 315);
|
||||
--secondary: oklch(0.18 0.12 315);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.18 0.10 315);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.20 0.15 315);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(0.22 0.12 315);
|
||||
--input: oklch(0.15 0.10 315);
|
||||
--ring: oklch(0.75 0.32 315);
|
||||
--chart-1: oklch(0.75 0.32 315);
|
||||
--chart-2: oklch(0.70 0.28 290);
|
||||
--chart-3: oklch(0.65 0.25 340);
|
||||
--chart-4: oklch(0.80 0.20 305);
|
||||
--chart-5: oklch(0.72 0.30 325);
|
||||
--sidebar: oklch(0.12 0.08 315);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.75 0.32 315);
|
||||
--sidebar-primary-foreground: oklch(0.08 0.08 315);
|
||||
--sidebar-accent: oklch(0.20 0.15 315);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.22 0.12 315);
|
||||
--sidebar-ring: oklch(0.75 0.32 315);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
@layer utilities {
|
||||
.gradient-purple {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.75 0.32 315) 0%,
|
||||
oklch(0.68 0.28 280) 30%,
|
||||
oklch(0.65 0.30 250) 70%,
|
||||
oklch(0.60 0.25 330) 100%);
|
||||
}
|
||||
|
||||
.gradient-purple-light {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.95 0.12 315) 0%,
|
||||
oklch(0.96 0.10 280) 50%,
|
||||
oklch(0.98 0.08 250) 100%);
|
||||
}
|
||||
|
||||
.bg-gradient-smooth {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.22 0.20 315) 0%,
|
||||
oklch(0.20 0.18 280) 30%,
|
||||
oklch(0.18 0.16 250) 60%,
|
||||
oklch(0.15 0.12 330) 100%);
|
||||
}
|
||||
|
||||
.text-gradient-bright {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.85 0.35 315) 0%,
|
||||
oklch(0.80 0.32 280) 40%,
|
||||
oklch(0.75 0.30 250) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 20px oklch(0.75 0.32 315 / 0.4);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.75 0.32 315) 0%,
|
||||
oklch(0.70 0.30 280) 50%,
|
||||
oklch(0.68 0.28 250) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Glass Morphism Effects */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(168, 85, 247, 0.18),
|
||||
0 4px 16px rgba(147, 51, 234, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 12px 40px rgba(168, 85, 247, 0.25),
|
||||
0 6px 20px rgba(147, 51, 234, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.glass-input {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-input:focus {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(168, 85, 247, 0.5);
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(168, 85, 247, 0.15),
|
||||
0 4px 16px rgba(147, 51, 234, 0.25);
|
||||
}
|
||||
|
||||
.glass-button {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(168, 85, 247, 0.9) 0%,
|
||||
rgba(120, 119, 248, 0.9) 40%,
|
||||
rgba(59, 130, 246, 0.85) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(168, 85, 247, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glass-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.25),
|
||||
transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.glass-button:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.glass-button:hover {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(168, 85, 247, 1) 0%,
|
||||
rgba(120, 119, 248, 1) 40%,
|
||||
rgba(59, 130, 246, 0.95) 100%);
|
||||
box-shadow:
|
||||
0 12px 40px rgba(168, 85, 247, 0.45),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.glass-button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(168, 85, 247, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.glass-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 8px 24px rgba(139, 69, 199, 0.15);
|
||||
}
|
||||
|
||||
/* Обеспечиваем курсор pointer для всех кликабельных элементов */
|
||||
button, [role="button"], [data-state] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Специальные стили для вкладок */
|
||||
[data-slot="tabs-list"] {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
[data-slot="tabs-trigger"] {
|
||||
cursor: pointer !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[data-slot="tabs-trigger"]:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
[data-slot="tabs-trigger"][data-state="active"] {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
color: white !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Animated Background */
|
||||
.bg-animated {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.22 0.20 315) 0%,
|
||||
oklch(0.18 0.16 300) 40%,
|
||||
oklch(0.15 0.12 330) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-animated::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.35) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(120, 119, 248, 0.35) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
|
||||
radial-gradient(circle at 60% 30%, rgba(192, 132, 252, 0.20) 0%, transparent 50%);
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { opacity: 1; transform: translateY(0px) rotate(0deg); }
|
||||
33% { opacity: 0.8; transform: translateY(-20px) rotate(2deg); }
|
||||
66% { opacity: 0.9; transform: translateY(10px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
/* Floating Particles Effect */
|
||||
.particles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
animation: particleFloat 15s linear infinite;
|
||||
}
|
||||
|
||||
.particle:nth-child(1) { width: 3px; height: 3px; left: 10%; animation-delay: 0s; }
|
||||
.particle:nth-child(2) { width: 2px; height: 2px; left: 20%; animation-delay: 2s; }
|
||||
.particle:nth-child(3) { width: 4px; height: 4px; left: 30%; animation-delay: 4s; }
|
||||
.particle:nth-child(4) { width: 2px; height: 2px; left: 40%; animation-delay: 6s; }
|
||||
.particle:nth-child(5) { width: 3px; height: 3px; left: 50%; animation-delay: 8s; }
|
||||
.particle:nth-child(6) { width: 2px; height: 2px; left: 60%; animation-delay: 10s; }
|
||||
.particle:nth-child(7) { width: 4px; height: 4px; left: 70%; animation-delay: 12s; }
|
||||
.particle:nth-child(8) { width: 2px; height: 2px; left: 80%; animation-delay: 14s; }
|
||||
.particle:nth-child(9) { width: 3px; height: 3px; left: 90%; animation-delay: 16s; }
|
||||
|
||||
@keyframes particleFloat {
|
||||
0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
|
||||
}
|
||||
|
||||
/* Enhanced Glow Effects */
|
||||
.glow-purple {
|
||||
box-shadow:
|
||||
0 0 20px rgba(168, 85, 247, 0.5),
|
||||
0 0 40px rgba(120, 119, 248, 0.35),
|
||||
0 0 60px rgba(59, 130, 246, 0.2),
|
||||
0 0 80px rgba(192, 132, 252, 0.15);
|
||||
}
|
||||
|
||||
.glow-text {
|
||||
text-shadow:
|
||||
0 0 10px rgba(168, 85, 247, 0.6),
|
||||
0 0 20px rgba(120, 119, 248, 0.45),
|
||||
0 0 30px rgba(59, 130, 246, 0.3),
|
||||
0 0 40px rgba(192, 132, 252, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,21 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
"use client"
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
import { ApolloProvider } from '@apollo/client'
|
||||
import { apolloClient } from '@/lib/apollo-client'
|
||||
import "./globals.css"
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<html lang="ru">
|
||||
<body>
|
||||
<ApolloProvider client={apolloClient}>
|
||||
{children}
|
||||
</ApolloProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
12
src/app/login/page.tsx
Normal file
12
src/app/login/page.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import { AuthGuard } from "@/components/auth-guard"
|
||||
import { AuthFlow } from "@/components/auth/auth-flow"
|
||||
import { redirect } from "next/navigation"
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<AuthGuard fallback={<AuthFlow />}>
|
||||
{/* Если пользователь авторизован, перенаправляем в дашборд */}
|
||||
{redirect('/dashboard')}
|
||||
</AuthGuard>
|
||||
)
|
||||
}
|
||||
10
src/app/market/page.tsx
Normal file
10
src/app/market/page.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { AuthGuard } from "@/components/auth-guard"
|
||||
import { MarketDashboard } from "@/components/market/market-dashboard"
|
||||
|
||||
export default function MarketPage() {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<MarketDashboard />
|
||||
</AuthGuard>
|
||||
)
|
||||
}
|
||||
117
src/app/page.tsx
117
src/app/page.tsx
@ -1,103 +1,24 @@
|
||||
import Image from "next/image";
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useAuth } from "@/hooks/useAuth"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
|
||||
<li className="mb-2 tracking-[-.01em]">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
|
||||
src/app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li className="tracking-[-.01em]">
|
||||
Save and see your changes instantly.
|
||||
</li>
|
||||
</ol>
|
||||
const router = useRouter()
|
||||
const { user } = useAuth()
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
router.replace('/dashboard')
|
||||
} else {
|
||||
router.replace('/login')
|
||||
}
|
||||
}, [router, user])
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex items-center justify-center">
|
||||
<div className="text-white">Загрузка...</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
27
src/app/register/page.tsx
Normal file
27
src/app/register/page.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
"use client"
|
||||
|
||||
import { Suspense } from 'react'
|
||||
import { AuthGuard } from "@/components/auth-guard"
|
||||
import { AuthFlow } from "@/components/auth/auth-flow"
|
||||
import { redirect } from "next/navigation"
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
|
||||
function RegisterContent() {
|
||||
const searchParams = useSearchParams()
|
||||
const partnerCode = searchParams.get('partner')
|
||||
|
||||
return (
|
||||
<AuthGuard fallback={<AuthFlow partnerCode={partnerCode} />}>
|
||||
{/* Если пользователь авторизован, перенаправляем в дашборд */}
|
||||
{redirect('/dashboard')}
|
||||
</AuthGuard>
|
||||
)
|
||||
}
|
||||
|
||||
export default function RegisterPage() {
|
||||
return (
|
||||
<Suspense fallback={<div>Загрузка...</div>}>
|
||||
<RegisterContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
10
src/app/settings/page.tsx
Normal file
10
src/app/settings/page.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { AuthGuard } from "@/components/auth-guard"
|
||||
import { UserSettings } from "@/components/dashboard/user-settings"
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<UserSettings />
|
||||
</AuthGuard>
|
||||
)
|
||||
}
|
||||
65
src/components/auth-guard.tsx
Normal file
65
src/components/auth-guard.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
"use client"
|
||||
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
import { useEffect, useState, useRef } from 'react'
|
||||
import { AuthFlow } from './auth/auth-flow'
|
||||
|
||||
interface AuthGuardProps {
|
||||
children: React.ReactNode
|
||||
fallback?: React.ReactNode
|
||||
}
|
||||
|
||||
export function AuthGuard({ children, fallback }: AuthGuardProps) {
|
||||
const { isAuthenticated, isLoading, checkAuth, user } = useAuth()
|
||||
const [isChecking, setIsChecking] = useState(true)
|
||||
const initRef = useRef(false) // Защита от повторных инициализаций
|
||||
|
||||
useEffect(() => {
|
||||
const initAuth = async () => {
|
||||
if (initRef.current) {
|
||||
console.log('AuthGuard - Already initialized, skipping')
|
||||
return
|
||||
}
|
||||
|
||||
initRef.current = true
|
||||
console.log('AuthGuard - Initializing auth check')
|
||||
await checkAuth()
|
||||
setIsChecking(false)
|
||||
console.log('AuthGuard - Auth check completed, authenticated:', isAuthenticated, 'user:', !!user)
|
||||
}
|
||||
|
||||
initAuth()
|
||||
}, []) // Убираем checkAuth из зависимостей чтобы избежать повторных вызовов
|
||||
|
||||
// Дополнительное логирование состояний
|
||||
useEffect(() => {
|
||||
console.log('AuthGuard - State update:', {
|
||||
isChecking,
|
||||
isLoading,
|
||||
isAuthenticated,
|
||||
hasUser: !!user
|
||||
})
|
||||
}, [isChecking, isLoading, isAuthenticated, user])
|
||||
|
||||
// Показываем лоадер пока проверяем авторизацию
|
||||
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('AuthGuard - User not authenticated, showing auth flow')
|
||||
return fallback || <AuthFlow />
|
||||
}
|
||||
|
||||
// Если авторизован, показываем защищенный контент
|
||||
console.log('AuthGuard - User authenticated, showing dashboard')
|
||||
return <>{children}</>
|
||||
}
|
||||
269
src/components/auth/auth-flow.tsx
Normal file
269
src/components/auth/auth-flow.tsx
Normal file
@ -0,0 +1,269 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { PhoneStep } from "./phone-step"
|
||||
import { SmsStep } from "./sms-step"
|
||||
import { CabinetSelectStep } from "./cabinet-select-step"
|
||||
import { InnStep } from "./inn-step"
|
||||
import { MarketplaceApiStep } from "./marketplace-api-step"
|
||||
import { ConfirmationStep } from "./confirmation-step"
|
||||
import { CheckCircle } from "lucide-react"
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
|
||||
type AuthStep = 'phone' | 'sms' | 'cabinet-select' | 'inn' | 'marketplace-api' | 'confirmation' | 'complete'
|
||||
type CabinetType = 'fulfillment' | 'seller' | 'logist' | 'wholesale'
|
||||
|
||||
interface OrganizationData {
|
||||
name?: string
|
||||
fullName?: string
|
||||
address?: string
|
||||
isActive?: boolean
|
||||
}
|
||||
|
||||
interface ApiKeyValidation {
|
||||
sellerId?: string
|
||||
sellerName?: string
|
||||
isValid?: boolean
|
||||
}
|
||||
|
||||
interface AuthData {
|
||||
phone: string
|
||||
smsCode: string
|
||||
cabinetType: CabinetType | null
|
||||
inn: string
|
||||
organizationData: OrganizationData | null
|
||||
wbApiKey: string
|
||||
wbApiValidation: ApiKeyValidation | null
|
||||
ozonApiKey: string
|
||||
ozonApiValidation: ApiKeyValidation | null
|
||||
isAuthenticated: boolean
|
||||
partnerCode?: string | null
|
||||
}
|
||||
|
||||
interface AuthFlowProps {
|
||||
partnerCode?: string | null
|
||||
}
|
||||
|
||||
export function AuthFlow({ partnerCode }: AuthFlowProps = {}) {
|
||||
const [step, setStep] = useState<AuthStep>('phone')
|
||||
const [authData, setAuthData] = useState<AuthData>({
|
||||
phone: '',
|
||||
smsCode: '',
|
||||
cabinetType: null,
|
||||
inn: '',
|
||||
organizationData: null,
|
||||
wbApiKey: '',
|
||||
wbApiValidation: null,
|
||||
ozonApiKey: '',
|
||||
ozonApiValidation: null,
|
||||
isAuthenticated: false,
|
||||
partnerCode: partnerCode
|
||||
})
|
||||
|
||||
const { verifySmsCode, checkAuth } = useAuth()
|
||||
|
||||
// При завершении авторизации инициируем проверку и перенаправление
|
||||
useEffect(() => {
|
||||
if (step === 'complete') {
|
||||
const timer = setTimeout(() => {
|
||||
// Принудительно перенаправляем в дашборд
|
||||
window.location.href = '/dashboard'
|
||||
}, 2000) // Задержка для показа сообщения о завершении
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [step])
|
||||
|
||||
const handlePhoneNext = (phone: string) => {
|
||||
setAuthData(prev => ({ ...prev, phone }))
|
||||
setStep('sms')
|
||||
}
|
||||
|
||||
const handleSmsNext = async (smsCode: string) => {
|
||||
setAuthData(prev => ({ ...prev, smsCode, isAuthenticated: true }))
|
||||
|
||||
// SMS код уже проверен в SmsStep компоненте
|
||||
// Просто переходим к следующему шагу
|
||||
setStep('cabinet-select')
|
||||
}
|
||||
|
||||
const handleCabinetNext = (cabinetType: CabinetType) => {
|
||||
setAuthData(prev => ({ ...prev, cabinetType }))
|
||||
if (cabinetType === 'fulfillment' || cabinetType === 'logist' || cabinetType === 'wholesale') {
|
||||
setStep('inn')
|
||||
} else {
|
||||
setStep('marketplace-api')
|
||||
}
|
||||
}
|
||||
|
||||
const handleInnNext = (inn: string, organizationData?: OrganizationData) => {
|
||||
setAuthData(prev => ({
|
||||
...prev,
|
||||
inn,
|
||||
organizationData: organizationData || null
|
||||
}))
|
||||
setStep('confirmation')
|
||||
}
|
||||
|
||||
const handleMarketplaceApiNext = (apiData: {
|
||||
wbApiKey?: string
|
||||
wbApiValidation?: ApiKeyValidation
|
||||
ozonApiKey?: string
|
||||
ozonApiValidation?: ApiKeyValidation
|
||||
}) => {
|
||||
setAuthData(prev => ({
|
||||
...prev,
|
||||
wbApiKey: apiData.wbApiKey || '',
|
||||
wbApiValidation: apiData.wbApiValidation || null,
|
||||
ozonApiKey: apiData.ozonApiKey || '',
|
||||
ozonApiValidation: apiData.ozonApiValidation || null
|
||||
}))
|
||||
setStep('confirmation')
|
||||
}
|
||||
|
||||
const handleConfirmation = () => {
|
||||
setStep('complete')
|
||||
}
|
||||
|
||||
const handlePhoneBack = () => {
|
||||
setStep('phone')
|
||||
}
|
||||
|
||||
const handleSmsBack = () => {
|
||||
setStep('phone')
|
||||
}
|
||||
|
||||
const handleCabinetBack = () => {
|
||||
setStep('sms')
|
||||
}
|
||||
|
||||
const handleInnBack = () => {
|
||||
setStep('cabinet-select')
|
||||
}
|
||||
|
||||
const handleMarketplaceApiBack = () => {
|
||||
setStep('cabinet-select')
|
||||
}
|
||||
|
||||
const handleConfirmationBack = () => {
|
||||
if (authData.cabinetType === 'fulfillment' || authData.cabinetType === 'logist' || authData.cabinetType === 'wholesale') {
|
||||
setStep('inn')
|
||||
} else {
|
||||
setStep('marketplace-api')
|
||||
}
|
||||
}
|
||||
|
||||
if (step === 'complete') {
|
||||
return (
|
||||
<div className="min-h-screen bg-animated flex items-center justify-center p-4">
|
||||
{/* Floating Particles */}
|
||||
<div className="particles">
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-white max-w-md relative z-10">
|
||||
<div className="bg-white/10 backdrop-blur rounded-2xl p-8 border border-white/20 glow-purple">
|
||||
<CheckCircle className="h-20 w-20 mx-auto mb-6 text-green-400 animate-pulse" />
|
||||
<h1 className="text-3xl font-bold text-gradient-bright mb-4">Добро пожаловать!</h1>
|
||||
<p className="text-white/80 mb-4">Регистрация успешно завершена</p>
|
||||
<div className="bg-white/5 rounded-lg p-4 mb-6">
|
||||
<p className="text-white/60 text-sm mb-2">Тип кабинета:</p>
|
||||
<p className="text-white font-medium">
|
||||
{
|
||||
authData.cabinetType === 'fulfillment' ? 'Фулфилмент' :
|
||||
authData.cabinetType === 'logist' ? 'Логистика' :
|
||||
authData.cabinetType === 'wholesale' ? 'Оптовик' :
|
||||
'Селлер'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 text-white/60 text-sm">
|
||||
<div className="animate-spin h-4 w-4 border-2 border-white/20 border-t-white/60 rounded-full"></div>
|
||||
Переход в личный кабинет...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{step === 'phone' && <PhoneStep onNext={handlePhoneNext} />}
|
||||
{step === 'sms' && (
|
||||
<SmsStep
|
||||
phone={authData.phone}
|
||||
onNext={handleSmsNext}
|
||||
onBack={handleSmsBack}
|
||||
/>
|
||||
)}
|
||||
{step === 'cabinet-select' && (
|
||||
<CabinetSelectStep
|
||||
onNext={handleCabinetNext}
|
||||
onBack={handleCabinetBack}
|
||||
/>
|
||||
)}
|
||||
{step === 'inn' && (
|
||||
<InnStep
|
||||
onNext={handleInnNext}
|
||||
onBack={handleInnBack}
|
||||
/>
|
||||
)}
|
||||
{step === 'marketplace-api' && (
|
||||
<MarketplaceApiStep
|
||||
onNext={handleMarketplaceApiNext}
|
||||
onBack={handleMarketplaceApiBack}
|
||||
/>
|
||||
)}
|
||||
{step === 'confirmation' && (
|
||||
<ConfirmationStep
|
||||
data={{
|
||||
phone: authData.phone,
|
||||
cabinetType: authData.cabinetType!,
|
||||
inn: authData.inn || undefined,
|
||||
organizationData: authData.organizationData || undefined,
|
||||
wbApiKey: authData.wbApiKey || undefined,
|
||||
wbApiValidation: authData.wbApiValidation || undefined,
|
||||
ozonApiKey: authData.ozonApiKey || undefined,
|
||||
ozonApiValidation: authData.ozonApiValidation || undefined
|
||||
}}
|
||||
onConfirm={handleConfirmation}
|
||||
onBack={handleConfirmationBack}
|
||||
/>
|
||||
)}
|
||||
{step === 'complete' && (
|
||||
<div className="space-y-6 text-center">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<CheckCircle className="w-10 h-10 text-green-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
Регистрация завершена!
|
||||
</h2>
|
||||
<p className="text-gray-600">
|
||||
Ваш {authData.cabinetType === 'fulfillment' ? 'фулфилмент кабинет' :
|
||||
authData.cabinetType === 'seller' ? 'селлер кабинет' :
|
||||
authData.cabinetType === 'logist' ? 'логистический кабинет' : 'оптовый кабинет'}
|
||||
{' '}успешно создан
|
||||
</p>
|
||||
</div>
|
||||
<div className="animate-pulse">
|
||||
<p className="text-sm text-gray-500">
|
||||
Переход в личный кабинет...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
140
src/components/auth/auth-layout.tsx
Normal file
140
src/components/auth/auth-layout.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
"use client"
|
||||
|
||||
import { ReactNode } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Truck, Package, ShoppingCart } from "lucide-react"
|
||||
|
||||
interface AuthLayoutProps {
|
||||
children: ReactNode
|
||||
title: string
|
||||
description?: string
|
||||
currentStep?: number
|
||||
totalSteps?: number
|
||||
stepName?: string
|
||||
}
|
||||
|
||||
export function AuthLayout({
|
||||
children,
|
||||
title,
|
||||
description,
|
||||
currentStep = 1,
|
||||
totalSteps = 5,
|
||||
stepName = "Авторизация"
|
||||
}: AuthLayoutProps) {
|
||||
const progressValue = (currentStep / totalSteps) * 100
|
||||
const showProgress = currentStep > 1 // Показываем прогресс только после первого шага
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-animated flex items-center justify-center p-3">
|
||||
{/* Floating Particles */}
|
||||
<div className="particles">
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
</div>
|
||||
|
||||
{/* Контейнер для выравнивания левой и правой частей */}
|
||||
<div className="w-full max-w-7xl mx-auto flex items-center justify-center relative z-10">
|
||||
{/* Левая часть - Информация о продукте */}
|
||||
<div className="hidden lg:flex lg:w-1/2 items-center justify-center px-8">
|
||||
<div className="max-w-lg text-center">
|
||||
<h1 className="text-6xl font-bold text-gradient-bright glow-text mb-4 tracking-tight">
|
||||
SferaV
|
||||
</h1>
|
||||
<p className="text-white/90 text-xl font-medium mb-8">Управление бизнесом</p>
|
||||
|
||||
<div className="space-y-6 text-left">
|
||||
<div className="bg-white/10 backdrop-blur rounded-lg p-4 border border-white/20">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Truck className="h-5 w-5 text-purple-400" />
|
||||
<h3 className="text-white font-semibold">Фулфилмент</h3>
|
||||
</div>
|
||||
<p className="text-white/70 text-sm">Полный цикл обработки заказов от получения до доставки клиенту</p>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur rounded-lg p-4 border border-white/20">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Package className="h-5 w-5 text-blue-400" />
|
||||
<h3 className="text-white font-semibold">Логистика</h3>
|
||||
</div>
|
||||
<p className="text-white/70 text-sm">Управление складскими операциями и доставкой товаров</p>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur rounded-lg p-4 border border-white/20">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<ShoppingCart className="h-5 w-5 text-green-400" />
|
||||
<h3 className="text-white font-semibold">Селлер</h3>
|
||||
</div>
|
||||
<p className="text-white/70 text-sm">Интеграция с маркетплейсами и управление продажами</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Правая часть - Форма авторизации */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center px-4 lg:px-8">
|
||||
<div className="max-w-md w-full">
|
||||
{/* Мобильный заголовок */}
|
||||
<div className="lg:hidden text-center mb-6">
|
||||
<h1 className="text-4xl font-bold text-gradient-bright glow-text mb-2 tracking-tight">
|
||||
SferaV
|
||||
</h1>
|
||||
<p className="text-white/90 text-sm font-medium">Управление бизнесом</p>
|
||||
</div>
|
||||
|
||||
{/* Progress Section - показываем только после первого шага */}
|
||||
{showProgress && (
|
||||
<div className="mb-6 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="glass-secondary text-white/80 text-xs">
|
||||
Шаг {currentStep} из {totalSteps}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="glass-secondary text-white/60 border-white/20 text-xs">
|
||||
{stepName}
|
||||
</Badge>
|
||||
</div>
|
||||
<Progress
|
||||
value={progressValue}
|
||||
className="h-1.5 bg-white/10"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card className="glass-card glow-purple">
|
||||
<CardHeader className="text-center pb-4">
|
||||
<CardTitle className="text-xl font-semibold text-white">
|
||||
{title}
|
||||
</CardTitle>
|
||||
{description && (
|
||||
<>
|
||||
<Separator className="bg-white/20 my-2" />
|
||||
<CardDescription className="text-white/70 text-sm">
|
||||
{description}
|
||||
</CardDescription>
|
||||
</>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 pt-0">
|
||||
{children}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Дополнительная информация */}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-white/60 text-xs">
|
||||
Регистрируясь, вы соглашаетесь с условиями использования
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
114
src/components/auth/cabinet-select-step.tsx
Normal file
114
src/components/auth/cabinet-select-step.tsx
Normal file
@ -0,0 +1,114 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { Package, ShoppingCart, ArrowLeft, Truck, Building2 } from "lucide-react"
|
||||
|
||||
interface CabinetSelectStepProps {
|
||||
onNext: (cabinetType: 'fulfillment' | 'seller' | 'logist' | 'wholesale') => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function CabinetSelectStep({ onNext, onBack }: CabinetSelectStepProps) {
|
||||
const cabinets = [
|
||||
{
|
||||
id: 'fulfillment' as const,
|
||||
title: 'Фулфилмент',
|
||||
description: 'Склады и логистика',
|
||||
icon: Package,
|
||||
features: ['Склады', 'Логистика', 'ИНН'],
|
||||
color: 'blue'
|
||||
},
|
||||
{
|
||||
id: 'seller' as const,
|
||||
title: 'Селлер',
|
||||
description: 'Продажи на маркетплейсах',
|
||||
icon: ShoppingCart,
|
||||
features: ['Wildberries', 'Ozon', 'Аналитика'],
|
||||
color: 'purple'
|
||||
},
|
||||
{
|
||||
id: 'logist' as const,
|
||||
title: 'Логистика',
|
||||
description: 'Логистические решения',
|
||||
icon: Truck,
|
||||
features: ['Доставка', 'Склады', 'ИНН'],
|
||||
color: 'green'
|
||||
},
|
||||
{
|
||||
id: 'wholesale' as const,
|
||||
title: 'Оптовик',
|
||||
description: 'Оптовые продажи',
|
||||
icon: Building2,
|
||||
features: ['Опт', 'Поставки', 'ИНН'],
|
||||
color: 'orange'
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="Выберите тип кабинета"
|
||||
description="Выберите кабинет для управления"
|
||||
currentStep={3}
|
||||
totalSteps={5}
|
||||
stepName="Тип кабинета"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{cabinets.map((cabinet) => {
|
||||
const IconComponent = cabinet.icon
|
||||
return (
|
||||
<button
|
||||
key={cabinet.id}
|
||||
onClick={() => onNext(cabinet.id)}
|
||||
className="glass-card p-4 text-left transition-all hover:scale-[1.02] group relative h-full"
|
||||
>
|
||||
<div className="flex flex-col items-center text-center space-y-3">
|
||||
<div className={`p-3 rounded-lg ${
|
||||
cabinet.color === 'blue' ? 'bg-blue-500/20' :
|
||||
cabinet.color === 'purple' ? 'bg-purple-500/20' :
|
||||
cabinet.color === 'green' ? 'bg-green-500/20' :
|
||||
'bg-orange-500/20'
|
||||
}`}>
|
||||
<IconComponent className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-semibold text-white">{cabinet.title}</h3>
|
||||
<p className="text-white/70 text-xs">
|
||||
{cabinet.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-1 justify-center">
|
||||
{cabinet.features.slice(0, 2).map((feature, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant="outline"
|
||||
className="glass-secondary text-white/60 border-white/20 text-xs px-1 py-0"
|
||||
>
|
||||
{feature}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="glass-secondary"
|
||||
onClick={onBack}
|
||||
className="w-full flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Назад
|
||||
</Button>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
360
src/components/auth/confirmation-step.tsx
Normal file
360
src/components/auth/confirmation-step.tsx
Normal file
@ -0,0 +1,360 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { Package, UserCheck, Phone, FileText, Key, ArrowLeft, Check, Zap, Truck, Building2 } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
|
||||
interface OrganizationData {
|
||||
name?: string
|
||||
fullName?: string
|
||||
address?: string
|
||||
isActive?: boolean
|
||||
}
|
||||
|
||||
interface ApiKeyValidation {
|
||||
sellerId?: string
|
||||
sellerName?: string
|
||||
isValid?: boolean
|
||||
}
|
||||
|
||||
interface ConfirmationStepProps {
|
||||
data: {
|
||||
phone: string
|
||||
cabinetType: 'fulfillment' | 'seller' | 'logist' | 'wholesale'
|
||||
inn?: string
|
||||
organizationData?: OrganizationData
|
||||
wbApiKey?: string
|
||||
wbApiValidation?: ApiKeyValidation
|
||||
ozonApiKey?: string
|
||||
ozonApiValidation?: ApiKeyValidation
|
||||
}
|
||||
onConfirm: () => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function ConfirmationStep({ data, onConfirm, onBack }: ConfirmationStepProps) {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const { registerFulfillmentOrganization, registerSellerOrganization } = useAuth()
|
||||
|
||||
const formatPhone = (phone: string) => {
|
||||
return phone || "+7 (___) ___-__-__"
|
||||
}
|
||||
|
||||
const formatApiKey = (key?: string) => {
|
||||
if (!key) return ""
|
||||
return key.substring(0, 4) + "•".repeat(key.length - 8) + key.substring(key.length - 4)
|
||||
}
|
||||
|
||||
const handleConfirm = async () => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
let result
|
||||
|
||||
if ((data.cabinetType === 'fulfillment' || data.cabinetType === 'logist' || data.cabinetType === 'wholesale') && data.inn) {
|
||||
result = await registerFulfillmentOrganization(
|
||||
data.phone.replace(/\D/g, ''),
|
||||
data.inn
|
||||
)
|
||||
} else if (data.cabinetType === 'seller') {
|
||||
result = await registerSellerOrganization({
|
||||
phone: data.phone.replace(/\D/g, ''),
|
||||
wbApiKey: data.wbApiKey,
|
||||
ozonApiKey: data.ozonApiKey
|
||||
})
|
||||
}
|
||||
|
||||
if (result?.success) {
|
||||
onConfirm()
|
||||
} else {
|
||||
setError(result?.message || 'Ошибка при регистрации организации')
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error('Registration error:', error)
|
||||
setError('Произошла ошибка при регистрации. Попробуйте еще раз.')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="Подтверждение данных"
|
||||
description="Проверьте введенные данные перед завершением"
|
||||
currentStep={5}
|
||||
totalSteps={5}
|
||||
stepName="Подтверждение"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Объединенная карточка с данными */}
|
||||
<div className="glass-card p-4 space-y-3">
|
||||
{/* Телефон */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="h-4 w-4 text-white" />
|
||||
<span className="text-white text-sm">Телефон:</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/70 text-sm">{formatPhone(data.phone)}</span>
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Тип кабинета */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{data.cabinetType === 'fulfillment' ? (
|
||||
<Package className="h-4 w-4 text-white" />
|
||||
) : data.cabinetType === 'logist' ? (
|
||||
<Truck className="h-4 w-4 text-white" />
|
||||
) : data.cabinetType === 'wholesale' ? (
|
||||
<Building2 className="h-4 w-4 text-white" />
|
||||
) : (
|
||||
<UserCheck className="h-4 w-4 text-white" />
|
||||
)}
|
||||
<span className="text-white text-sm">Кабинет:</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/70 text-sm">
|
||||
{data.cabinetType === 'fulfillment' ? 'Фулфилмент' :
|
||||
data.cabinetType === 'logist' ? 'Логистика' :
|
||||
data.cabinetType === 'wholesale' ? 'Оптовик' :
|
||||
'Селлер'}
|
||||
</span>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={`glass-secondary text-xs flex items-center gap-1 ${
|
||||
data.cabinetType === 'fulfillment'
|
||||
? "text-blue-300 border-blue-400/30"
|
||||
: data.cabinetType === 'logist'
|
||||
? "text-green-300 border-green-400/30"
|
||||
: data.cabinetType === 'wholesale'
|
||||
? "text-orange-300 border-orange-400/30"
|
||||
: "text-purple-300 border-purple-400/30"
|
||||
}`}
|
||||
>
|
||||
{data.cabinetType === 'fulfillment' ? (
|
||||
<Package className="h-3 w-3" />
|
||||
) : data.cabinetType === 'logist' ? (
|
||||
<Truck className="h-3 w-3" />
|
||||
) : data.cabinetType === 'wholesale' ? (
|
||||
<Building2 className="h-3 w-3" />
|
||||
) : (
|
||||
<UserCheck className="h-3 w-3" />
|
||||
)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Данные организации */}
|
||||
{(data.cabinetType === 'fulfillment' || data.cabinetType === 'logist' || data.cabinetType === 'wholesale') && data.inn && (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-4 w-4 text-white" />
|
||||
<span className="text-white text-sm">ИНН:</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/70 text-sm font-mono">{data.inn}</span>
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Данные организации из DaData */}
|
||||
{data.organizationData && (
|
||||
<>
|
||||
{data.organizationData.name && (
|
||||
<div className="flex items-center justify-between pl-6">
|
||||
<span className="text-white/60 text-sm">Название:</span>
|
||||
<span className="text-white/90 text-sm max-w-[240px] text-right truncate">
|
||||
{data.organizationData.name}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.organizationData.fullName && data.organizationData.fullName !== data.organizationData.name && (
|
||||
<div className="flex items-center justify-between pl-6">
|
||||
<span className="text-white/60 text-sm">Полное название:</span>
|
||||
<span className="text-white/70 text-xs max-w-[200px] text-right truncate">
|
||||
{data.organizationData.fullName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.organizationData.address && (
|
||||
<div className="flex items-center justify-between pl-6">
|
||||
<span className="text-white/60 text-sm">Адрес:</span>
|
||||
<span className="text-white/70 text-xs max-w-[200px] text-right truncate">
|
||||
{data.organizationData.address}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between pl-6">
|
||||
<span className="text-white/60 text-sm">Статус:</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs flex items-center gap-1 ${
|
||||
data.organizationData.isActive
|
||||
? "glass-secondary text-green-300 border-green-400/30"
|
||||
: "glass-secondary text-red-300 border-red-400/30"
|
||||
}`}
|
||||
>
|
||||
{data.organizationData.isActive ? (
|
||||
<>
|
||||
<Check className="h-3 w-3" />
|
||||
Активна
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FileText className="h-3 w-3" />
|
||||
Неактивна
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* API ключи для селлера */}
|
||||
{data.cabinetType === 'seller' && (data.wbApiKey || data.ozonApiKey) && (
|
||||
<>
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<Key className="h-4 w-4 text-white" />
|
||||
<span className="text-white text-sm">API ключи:</span>
|
||||
<Badge variant="outline" className="glass-secondary text-yellow-300 border-yellow-400/30 text-xs ml-auto flex items-center gap-1">
|
||||
<Zap className="h-3 w-3" />
|
||||
Активны
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{data.wbApiKey && (
|
||||
<div className="space-y-2 pl-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/60 text-sm">Wildberries</span>
|
||||
<Badge variant="outline" className="glass-secondary text-purple-300 border-purple-400/30 text-xs">
|
||||
WB
|
||||
</Badge>
|
||||
</div>
|
||||
{data.wbApiValidation?.sellerName ? (
|
||||
<span className="text-white/70 text-xs max-w-[120px] text-right truncate">
|
||||
{data.wbApiValidation.sellerName}
|
||||
</span>
|
||||
) : (
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
Подключен
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{data.wbApiValidation && (
|
||||
<>
|
||||
{data.wbApiValidation.sellerName && (
|
||||
<div className="flex items-center justify-between pl-4">
|
||||
<span className="text-white/50 text-xs">Магазин:</span>
|
||||
<span className="text-white/70 text-xs max-w-[160px] text-right truncate">
|
||||
{data.wbApiValidation.sellerName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{data.wbApiValidation.sellerId && (
|
||||
<div className="flex items-center justify-between pl-4">
|
||||
<span className="text-white/50 text-xs">ID продавца:</span>
|
||||
<span className="text-white/70 text-xs font-mono">
|
||||
{data.wbApiValidation.sellerId}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.ozonApiKey && (
|
||||
<div className="space-y-2 pl-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/60 text-sm">Ozon</span>
|
||||
<Badge variant="outline" className="glass-secondary text-blue-300 border-blue-400/30 text-xs">
|
||||
OZ
|
||||
</Badge>
|
||||
</div>
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
Подключен
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{data.ozonApiValidation && (
|
||||
<>
|
||||
{data.ozonApiValidation.sellerName && (
|
||||
<div className="flex items-center justify-between pl-4">
|
||||
<span className="text-white/50 text-xs">Магазин:</span>
|
||||
<span className="text-white/70 text-xs max-w-[160px] text-right truncate">
|
||||
{data.ozonApiValidation.sellerName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{data.ozonApiValidation.sellerId && (
|
||||
<div className="flex items-center justify-between pl-4">
|
||||
<span className="text-white/50 text-xs">ID продавца:</span>
|
||||
<span className="text-white/70 text-xs font-mono">
|
||||
{data.ozonApiValidation.sellerId}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="glass-card p-3 border-red-400/30">
|
||||
<p className="text-red-400 text-sm text-center">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
onClick={handleConfirm}
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12 flex items-center gap-2"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
{isLoading ? "Создание организации..." : "Подтвердить и завершить"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="glass-secondary"
|
||||
onClick={onBack}
|
||||
className="w-full flex items-center gap-2"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Назад
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
219
src/components/auth/inn-step.tsx
Normal file
219
src/components/auth/inn-step.tsx
Normal file
@ -0,0 +1,219 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { GlassInput } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { FileText, ArrowLeft, Building, Check, AlertTriangle } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useMutation } from '@apollo/client'
|
||||
import { VERIFY_INN } from '@/graphql/mutations'
|
||||
|
||||
interface InnStepProps {
|
||||
onNext: (inn: string, organizationData?: OrganizationData) => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
interface OrganizationData {
|
||||
name: string
|
||||
address: string
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
export function InnStep({ onNext, onBack }: InnStepProps) {
|
||||
const [inn, setInn] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [organizationData, setOrganizationData] = useState<OrganizationData | null>(null)
|
||||
|
||||
const [verifyInn] = useMutation(VERIFY_INN)
|
||||
|
||||
const formatInn = (value: string) => {
|
||||
const numbers = value.replace(/\D/g, '')
|
||||
return numbers.slice(0, 12) // Максимум 12 цифр для ИНН
|
||||
}
|
||||
|
||||
const handleInnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const formatted = formatInn(e.target.value)
|
||||
setInn(formatted)
|
||||
setError(null)
|
||||
setOrganizationData(null)
|
||||
}
|
||||
|
||||
const isValidInn = (inn: string) => {
|
||||
return inn.length === 10 || inn.length === 12
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!isValidInn(inn)) {
|
||||
setError('ИНН должен содержать 10 или 12 цифр')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
setOrganizationData(null)
|
||||
|
||||
try {
|
||||
const { data } = await verifyInn({
|
||||
variables: { inn }
|
||||
})
|
||||
|
||||
if (data.verifyInn.success && data.verifyInn.organization) {
|
||||
const org = data.verifyInn.organization
|
||||
const newOrgData = {
|
||||
name: org.name,
|
||||
address: org.address,
|
||||
isActive: org.isActive
|
||||
}
|
||||
setOrganizationData(newOrgData)
|
||||
|
||||
if (org.isActive) {
|
||||
// Автоматически переходим дальше для активных организаций
|
||||
setTimeout(() => {
|
||||
onNext(inn, newOrgData)
|
||||
}, 1500)
|
||||
}
|
||||
} else {
|
||||
setError('Организация с таким ИНН не найдена')
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error('INN verification error:', error)
|
||||
setError('Ошибка проверки ИНН. Попробуйте позже.')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleContinueInactive = () => {
|
||||
if (organizationData && !organizationData.isActive) {
|
||||
onNext(inn, organizationData)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="ИНН организации"
|
||||
description="Укажите ИНН для проверки организации"
|
||||
currentStep={4}
|
||||
totalSteps={5}
|
||||
stepName="ИНН"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Alert className="glass-secondary border-white/20">
|
||||
<Building className="h-4 w-4 text-white" />
|
||||
<AlertDescription className="text-white/80">
|
||||
Фулфилмент кабинет - склады и логистика
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="inn" className="text-white text-sm font-medium flex items-center gap-2">
|
||||
<FileText className="h-4 w-4" />
|
||||
ИНН организации
|
||||
</Label>
|
||||
{organizationData && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`glass-secondary flex items-center gap-1 ${
|
||||
organizationData.isActive
|
||||
? 'text-green-300 border-green-400/30'
|
||||
: 'text-yellow-300 border-yellow-400/30'
|
||||
}`}
|
||||
>
|
||||
{organizationData.isActive ? (
|
||||
<>
|
||||
<Check className="h-3 w-3" />
|
||||
Активна
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
Неактивна
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<GlassInput
|
||||
id="inn"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
placeholder="1234567890"
|
||||
value={inn}
|
||||
onChange={handleInnChange}
|
||||
className={`h-12 text-center text-lg font-mono ${error ? 'border-red-400/50' : ''}`}
|
||||
maxLength={12}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="text-red-400 text-xs text-center">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{organizationData && (
|
||||
<div className="glass-card p-4 space-y-2">
|
||||
<h4 className="text-white font-medium text-sm">{organizationData.name}</h4>
|
||||
<p className="text-white/70 text-xs">{organizationData.address}</p>
|
||||
|
||||
{organizationData.isActive ? (
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<Check className="h-4 w-4 text-green-300" />
|
||||
<span className="text-green-300 text-sm">Организация активна</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-300" />
|
||||
<span className="text-yellow-300 text-sm">Организация неактивна</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
{!organizationData && (
|
||||
<Button
|
||||
type="submit"
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12"
|
||||
disabled={!isValidInn(inn) || isLoading}
|
||||
>
|
||||
{isLoading ? "Проверка ИНН..." : "Проверить ИНН"}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{organizationData && !organizationData.isActive && (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleContinueInactive}
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12"
|
||||
>
|
||||
Продолжить с неактивной организацией
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="glass-secondary"
|
||||
onClick={onBack}
|
||||
className="w-full flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Назад
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
367
src/components/auth/marketplace-api-step.tsx
Normal file
367
src/components/auth/marketplace-api-step.tsx
Normal file
@ -0,0 +1,367 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { GlassInput } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { Key, ArrowLeft, ShoppingCart, Check, X } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useMutation } from '@apollo/client'
|
||||
import { ADD_MARKETPLACE_API_KEY } from '@/graphql/mutations'
|
||||
import { getAuthToken } from '@/lib/apollo-client'
|
||||
|
||||
interface ApiValidationData {
|
||||
sellerId?: string
|
||||
sellerName?: string
|
||||
isValid?: boolean
|
||||
}
|
||||
|
||||
interface MarketplaceApiStepProps {
|
||||
onNext: (apiData: {
|
||||
wbApiKey?: string
|
||||
wbApiValidation?: ApiValidationData
|
||||
ozonApiKey?: string
|
||||
ozonApiValidation?: ApiValidationData
|
||||
}) => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
interface ApiKeyValidation {
|
||||
[key: string]: {
|
||||
isValid: boolean | null
|
||||
isValidating: boolean
|
||||
error?: string
|
||||
}
|
||||
}
|
||||
|
||||
export function MarketplaceApiStep({ onNext, onBack }: MarketplaceApiStepProps) {
|
||||
const [selectedMarketplaces, setSelectedMarketplaces] = useState<string[]>([])
|
||||
const [wbApiKey, setWbApiKey] = useState("")
|
||||
const [ozonApiKey, setOzonApiKey] = useState("")
|
||||
const [validationStates, setValidationStates] = useState<ApiKeyValidation>({})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [wbValidationData, setWbValidationData] = useState<ApiValidationData | null>(null)
|
||||
const [ozonValidationData, setOzonValidationData] = useState<ApiValidationData | null>(null)
|
||||
|
||||
const [addMarketplaceApiKey] = useMutation(ADD_MARKETPLACE_API_KEY)
|
||||
|
||||
const handleMarketplaceToggle = (marketplace: string) => {
|
||||
if (selectedMarketplaces.includes(marketplace)) {
|
||||
setSelectedMarketplaces(prev => prev.filter(m => m !== marketplace))
|
||||
if (marketplace === 'wildberries') setWbApiKey("")
|
||||
if (marketplace === 'ozon') setOzonApiKey("")
|
||||
// Сбрасываем состояние валидации
|
||||
setValidationStates(prev => ({
|
||||
...prev,
|
||||
[marketplace]: { isValid: null, isValidating: false }
|
||||
}))
|
||||
} else {
|
||||
setSelectedMarketplaces(prev => [...prev, marketplace])
|
||||
}
|
||||
}
|
||||
|
||||
const validateApiKey = async (marketplace: string, apiKey: string) => {
|
||||
if (!apiKey || !isValidApiKey(apiKey)) return
|
||||
|
||||
setValidationStates(prev => ({
|
||||
...prev,
|
||||
[marketplace]: { isValid: null, isValidating: true }
|
||||
}))
|
||||
|
||||
try {
|
||||
const { data } = await addMarketplaceApiKey({
|
||||
variables: {
|
||||
input: {
|
||||
marketplace: marketplace.toUpperCase(),
|
||||
apiKey,
|
||||
validateOnly: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
setValidationStates(prev => ({
|
||||
...prev,
|
||||
[marketplace]: {
|
||||
isValid: data.addMarketplaceApiKey.success,
|
||||
isValidating: false,
|
||||
error: data.addMarketplaceApiKey.success ? undefined : data.addMarketplaceApiKey.message
|
||||
}
|
||||
}))
|
||||
|
||||
// Сохраняем данные валидации
|
||||
if (data.addMarketplaceApiKey.success && data.addMarketplaceApiKey.apiKey?.validationData) {
|
||||
const validationData = data.addMarketplaceApiKey.apiKey.validationData
|
||||
if (marketplace === 'wildberries') {
|
||||
setWbValidationData({
|
||||
sellerId: validationData.sellerId,
|
||||
sellerName: validationData.sellerName,
|
||||
isValid: true
|
||||
})
|
||||
} else if (marketplace === 'ozon') {
|
||||
setOzonValidationData({
|
||||
sellerId: validationData.sellerId,
|
||||
sellerName: validationData.sellerName,
|
||||
isValid: true
|
||||
})
|
||||
}
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
setValidationStates(prev => ({
|
||||
...prev,
|
||||
[marketplace]: {
|
||||
isValid: false,
|
||||
isValidating: false,
|
||||
error: 'Ошибка валидации API ключа'
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
const handleApiKeyChange = (marketplace: string, value: string) => {
|
||||
if (marketplace === 'wildberries') {
|
||||
setWbApiKey(value)
|
||||
} else if (marketplace === 'ozon') {
|
||||
setOzonApiKey(value)
|
||||
}
|
||||
|
||||
// Сбрасываем состояние валидации при изменении
|
||||
setValidationStates(prev => ({
|
||||
...prev,
|
||||
[marketplace]: { isValid: null, isValidating: false }
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (selectedMarketplaces.length === 0) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
// Валидируем все выбранные маркетплейсы
|
||||
const validationPromises = []
|
||||
|
||||
if (selectedMarketplaces.includes('wildberries') && isValidApiKey(wbApiKey)) {
|
||||
validationPromises.push(validateApiKey('wildberries', wbApiKey))
|
||||
}
|
||||
|
||||
if (selectedMarketplaces.includes('ozon') && isValidApiKey(ozonApiKey)) {
|
||||
validationPromises.push(validateApiKey('ozon', ozonApiKey))
|
||||
}
|
||||
|
||||
// Ждем завершения всех валидаций
|
||||
await Promise.all(validationPromises)
|
||||
|
||||
// Небольшая задержка чтобы состояние обновилось
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
|
||||
// Проверяем результаты валидации
|
||||
let hasValidationErrors = false
|
||||
|
||||
for (const marketplace of selectedMarketplaces) {
|
||||
const validation = validationStates[marketplace]
|
||||
if (!validation || validation.isValid !== true) {
|
||||
hasValidationErrors = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!hasValidationErrors) {
|
||||
const apiData: {
|
||||
wbApiKey?: string
|
||||
wbApiValidation?: ApiValidationData
|
||||
ozonApiKey?: string
|
||||
ozonApiValidation?: ApiValidationData
|
||||
} = {}
|
||||
|
||||
if (selectedMarketplaces.includes('wildberries') && isValidApiKey(wbApiKey)) {
|
||||
apiData.wbApiKey = wbApiKey
|
||||
if (wbValidationData) {
|
||||
apiData.wbApiValidation = wbValidationData
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedMarketplaces.includes('ozon') && isValidApiKey(ozonApiKey)) {
|
||||
apiData.ozonApiKey = ozonApiKey
|
||||
if (ozonValidationData) {
|
||||
apiData.ozonApiValidation = ozonValidationData
|
||||
}
|
||||
}
|
||||
|
||||
onNext(apiData)
|
||||
}
|
||||
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
||||
const isValidApiKey = (key: string) => {
|
||||
return key.length >= 10 && /^[a-zA-Z0-9-_.]+$/.test(key)
|
||||
}
|
||||
|
||||
const isFormValid = () => {
|
||||
if (selectedMarketplaces.length === 0) return false
|
||||
|
||||
for (const marketplace of selectedMarketplaces) {
|
||||
const apiKey = marketplace === 'wildberries' ? wbApiKey : ozonApiKey
|
||||
|
||||
if (!isValidApiKey(apiKey)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const getValidationBadge = (marketplace: string) => {
|
||||
const validation = validationStates[marketplace]
|
||||
|
||||
if (!validation || validation.isValid === null) return null
|
||||
|
||||
if (validation.isValidating) {
|
||||
return (
|
||||
<Badge variant="outline" className="glass-secondary text-yellow-300 border-yellow-400/30 text-xs flex items-center gap-1">
|
||||
Проверка...
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
if (validation.isValid) {
|
||||
return (
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
Валидный
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Badge variant="outline" className="glass-secondary text-red-300 border-red-400/30 text-xs flex items-center gap-1">
|
||||
<X className="h-3 w-3" />
|
||||
Невалидный
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
const marketplaces = [
|
||||
{
|
||||
id: 'wildberries',
|
||||
name: 'Wildberries',
|
||||
badge: 'Популярный',
|
||||
badgeColor: 'purple',
|
||||
apiKey: wbApiKey,
|
||||
setApiKey: (value: string) => handleApiKeyChange('wildberries', value),
|
||||
placeholder: 'API ключ Wildberries'
|
||||
},
|
||||
{
|
||||
id: 'ozon',
|
||||
name: 'Ozon',
|
||||
badge: 'Быстро растёт',
|
||||
badgeColor: 'blue',
|
||||
apiKey: ozonApiKey,
|
||||
setApiKey: (value: string) => handleApiKeyChange('ozon', value),
|
||||
placeholder: 'API ключ Ozon'
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="API ключи маркетплейсов"
|
||||
description="Выберите маркетплейсы и введите API ключи"
|
||||
currentStep={4}
|
||||
totalSteps={5}
|
||||
stepName="API ключи"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="glass-card p-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<ShoppingCart className="h-4 w-4 text-white" />
|
||||
<div>
|
||||
<h4 className="text-white font-medium text-sm">Кабинет селлера</h4>
|
||||
<p className="text-white/70 text-xs">Управление продажами на маркетплейсах</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{marketplaces.map((marketplace) => (
|
||||
<div key={marketplace.id} className="glass-card p-3">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={marketplace.id}
|
||||
checked={selectedMarketplaces.includes(marketplace.id)}
|
||||
onCheckedChange={() => handleMarketplaceToggle(marketplace.id)}
|
||||
className="border-white/30 data-[state=checked]:bg-purple-500"
|
||||
/>
|
||||
<Label htmlFor={marketplace.id} className="text-white text-sm font-medium cursor-pointer">
|
||||
{marketplace.name}
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`glass-secondary border-${marketplace.badgeColor}-400/30 text-${marketplace.badgeColor}-300 text-xs`}
|
||||
>
|
||||
{marketplace.badge}
|
||||
</Badge>
|
||||
{selectedMarketplaces.includes(marketplace.id) && getValidationBadge(marketplace.id)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedMarketplaces.includes(marketplace.id) && (
|
||||
<div className="pt-1">
|
||||
<GlassInput
|
||||
type="text"
|
||||
placeholder={marketplace.placeholder}
|
||||
value={marketplace.apiKey}
|
||||
onChange={(e) => marketplace.setApiKey(e.target.value)}
|
||||
className="h-10 text-sm"
|
||||
/>
|
||||
<p className="text-white/60 text-xs mt-1">
|
||||
{marketplace.id === 'wildberries'
|
||||
? 'Личный кабинет → Настройки → Доступ к API'
|
||||
: 'Кабинет продавца → API → Генерация ключа'
|
||||
}
|
||||
</p>
|
||||
{validationStates[marketplace.id]?.error && (
|
||||
<p className="text-red-400 text-xs mt-1">
|
||||
{validationStates[marketplace.id].error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Сохранение..." : "Продолжить"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="glass-secondary"
|
||||
onClick={onBack}
|
||||
className="w-full flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Назад
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
140
src/components/auth/phone-step.tsx
Normal file
140
src/components/auth/phone-step.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { GlassInput } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { Phone, ArrowRight } from "lucide-react"
|
||||
import { useMutation } from '@apollo/client'
|
||||
import { SEND_SMS_CODE } from '@/graphql/mutations'
|
||||
|
||||
interface PhoneStepProps {
|
||||
onNext: (phone: string) => void
|
||||
}
|
||||
|
||||
export function PhoneStep({ onNext }: PhoneStepProps) {
|
||||
const [phone, setPhone] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const [sendSmsCode] = useMutation(SEND_SMS_CODE)
|
||||
|
||||
const formatPhoneNumber = (value: string) => {
|
||||
const numbers = value.replace(/\D/g, '')
|
||||
|
||||
if (numbers.length === 0) return ''
|
||||
if (numbers[0] === '8') {
|
||||
const withoutFirst = numbers.slice(1)
|
||||
return formatRussianNumber('7' + withoutFirst)
|
||||
}
|
||||
if (numbers[0] === '7') {
|
||||
return formatRussianNumber(numbers)
|
||||
}
|
||||
|
||||
return formatRussianNumber('7' + numbers)
|
||||
}
|
||||
|
||||
const formatRussianNumber = (numbers: string) => {
|
||||
if (numbers.length <= 1) return '+7'
|
||||
if (numbers.length <= 4) return `+7 (${numbers.slice(1)}`
|
||||
if (numbers.length <= 7) return `+7 (${numbers.slice(1, 4)}) ${numbers.slice(4)}`
|
||||
if (numbers.length <= 9) return `+7 (${numbers.slice(1, 4)}) ${numbers.slice(4, 7)}-${numbers.slice(7)}`
|
||||
return `+7 (${numbers.slice(1, 4)}) ${numbers.slice(4, 7)}-${numbers.slice(7, 9)}-${numbers.slice(9, 11)}`
|
||||
}
|
||||
|
||||
const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const formatted = formatPhoneNumber(e.target.value)
|
||||
setPhone(formatted)
|
||||
setError(null)
|
||||
}
|
||||
|
||||
const isValidPhone = (phone: string) => {
|
||||
const numbers = phone.replace(/\D/g, '')
|
||||
return numbers.length === 11 && (numbers.startsWith('7') || numbers.startsWith('8'))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!isValidPhone(phone)) {
|
||||
setError('Введите корректный номер телефона')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const cleanPhone = phone.replace(/\D/g, '')
|
||||
const formattedPhone = cleanPhone.startsWith('8')
|
||||
? '7' + cleanPhone.slice(1)
|
||||
: cleanPhone
|
||||
|
||||
const { data } = await sendSmsCode({
|
||||
variables: { phone: formattedPhone }
|
||||
})
|
||||
|
||||
if (data.sendSmsCode.success) {
|
||||
onNext(phone)
|
||||
} else {
|
||||
setError('Ошибка отправки SMS. Попробуйте позже.')
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error('SMS sending error:', error)
|
||||
setError(error instanceof Error ? error.message : 'Ошибка отправки SMS. Попробуйте позже.')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="Добро пожаловать!"
|
||||
description="Введите номер телефона для входа в систему"
|
||||
currentStep={1}
|
||||
totalSteps={5}
|
||||
stepName="Авторизация"
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone" className="text-white text-sm font-medium flex items-center gap-2">
|
||||
<Phone className="h-4 w-4" />
|
||||
Номер телефона
|
||||
</Label>
|
||||
<GlassInput
|
||||
id="phone"
|
||||
type="tel"
|
||||
placeholder="+7 (___) ___-__-__"
|
||||
value={phone}
|
||||
onChange={handlePhoneChange}
|
||||
className={`h-12 text-lg ${error ? 'border-red-400/50' : ''}`}
|
||||
style={{ caretColor: 'white' }}
|
||||
onFocus={(e) => {
|
||||
// Устанавливаем курсор в начало если поле пустое или содержит только +7
|
||||
if (phone === '' || phone === '+7') {
|
||||
setTimeout(() => {
|
||||
e.target.setSelectionRange(0, 0);
|
||||
}, 0);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-red-400 text-xs">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12 flex items-center gap-2"
|
||||
disabled={!isValidPhone(phone) || isLoading}
|
||||
>
|
||||
{isLoading ? "Отправка..." : "Получить SMS код"}
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
225
src/components/auth/sms-step.tsx
Normal file
225
src/components/auth/sms-step.tsx
Normal file
@ -0,0 +1,225 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useRef, KeyboardEvent, useEffect } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { GlassInput } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { MessageSquare, ArrowLeft, Clock, RefreshCw, Check } from "lucide-react"
|
||||
import { useMutation } from '@apollo/client'
|
||||
import { SEND_SMS_CODE } from '@/graphql/mutations'
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
|
||||
interface SmsStepProps {
|
||||
phone: string
|
||||
onNext: (code: string) => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function SmsStep({ phone, onNext, onBack }: SmsStepProps) {
|
||||
const [code, setCode] = useState(["", "", "", ""])
|
||||
const [timeLeft, setTimeLeft] = useState(60)
|
||||
const [canResend, setCanResend] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const inputRefs = useRef<(HTMLInputElement | null)[]>([])
|
||||
|
||||
const { verifySmsCode, checkAuth } = useAuth()
|
||||
const [sendSmsCode] = useMutation(SEND_SMS_CODE)
|
||||
|
||||
// Автофокус на первое поле при загрузке
|
||||
useEffect(() => {
|
||||
if (inputRefs.current[0]) {
|
||||
inputRefs.current[0].focus()
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Таймер для повторной отправки
|
||||
useEffect(() => {
|
||||
if (timeLeft > 0) {
|
||||
const timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000)
|
||||
return () => clearTimeout(timer)
|
||||
} else {
|
||||
setCanResend(true)
|
||||
}
|
||||
}, [timeLeft])
|
||||
|
||||
const handleInputChange = (index: number, value: string) => {
|
||||
if (value.length > 1) return // Разрешаем только одну цифру
|
||||
if (!/^\d*$/.test(value)) return // Разрешаем только цифры
|
||||
|
||||
const newCode = [...code]
|
||||
newCode[index] = value
|
||||
setCode(newCode)
|
||||
setError(null)
|
||||
|
||||
// Автоматически переключаемся на следующее поле
|
||||
if (value && index < 3) {
|
||||
inputRefs.current[index + 1]?.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Backspace" && !code[index] && index > 0) {
|
||||
inputRefs.current[index - 1]?.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
const fullCode = code.join("")
|
||||
if (fullCode.length === 4) {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const cleanPhone = phone.replace(/\D/g, '')
|
||||
const formattedPhone = cleanPhone.startsWith('8')
|
||||
? '7' + cleanPhone.slice(1)
|
||||
: cleanPhone
|
||||
|
||||
const result = await verifySmsCode(formattedPhone, fullCode)
|
||||
|
||||
if (result.success) {
|
||||
console.log('SmsStep - SMS verification successful, user:', result.user)
|
||||
|
||||
// Проверяем есть ли у пользователя уже организация
|
||||
if (result.user?.organization) {
|
||||
console.log('SmsStep - User already has organization, redirecting to dashboard')
|
||||
// Если организация уже есть, перенаправляем прямо в кабинет
|
||||
window.location.href = '/dashboard'
|
||||
return
|
||||
}
|
||||
|
||||
// Если организации нет, продолжаем поток регистрации
|
||||
onNext(fullCode)
|
||||
} else {
|
||||
setError('Неверный код. Проверьте SMS и попробуйте еще раз.')
|
||||
setCode(["", "", "", ""])
|
||||
inputRefs.current[0]?.focus()
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error('Error verifying SMS code:', error)
|
||||
setError('Ошибка проверки кода. Попробуйте еще раз.')
|
||||
setCode(["", "", "", ""])
|
||||
inputRefs.current[0]?.focus()
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleResend = async () => {
|
||||
setTimeLeft(60)
|
||||
setCanResend(false)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const cleanPhone = phone.replace(/\D/g, '')
|
||||
const formattedPhone = cleanPhone.startsWith('8')
|
||||
? '7' + cleanPhone.slice(1)
|
||||
: cleanPhone
|
||||
|
||||
await sendSmsCode({
|
||||
variables: { phone: formattedPhone }
|
||||
})
|
||||
} catch (error: unknown) {
|
||||
console.error('Error resending SMS:', error)
|
||||
setError('Ошибка отправки SMS. Попробуйте позже.')
|
||||
}
|
||||
}
|
||||
|
||||
const isValidCode = code.every(digit => digit !== "")
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="Введите код"
|
||||
description={`SMS-код отправлен на номер ${phone}`}
|
||||
currentStep={2}
|
||||
totalSteps={5}
|
||||
stepName="Подтверждение"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-white text-sm font-medium flex items-center gap-2">
|
||||
<MessageSquare className="h-4 w-4" />
|
||||
Код из SMS
|
||||
</Label>
|
||||
{isValidCode && (
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
Готово
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-center">
|
||||
{code.map((digit, index) => (
|
||||
<GlassInput
|
||||
key={index}
|
||||
ref={(el) => { inputRefs.current[index] = el }}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
maxLength={1}
|
||||
value={digit}
|
||||
onChange={(e) => handleInputChange(index, e.target.value)}
|
||||
onKeyDown={(e) => handleKeyDown(index, e)}
|
||||
className={`w-12 h-12 text-center text-lg font-semibold ${error ? 'border-red-400/50' : ''}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-red-400 text-xs text-center">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12"
|
||||
disabled={!isValidCode || isLoading}
|
||||
>
|
||||
{isLoading ? "Проверка кода..." : "Продолжить"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="glass-secondary"
|
||||
onClick={onBack}
|
||||
className="w-full flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Изменить номер телефона
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
{!canResend ? (
|
||||
<div className="flex items-center justify-center gap-2 text-white/60">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span className="text-sm">Повторная отправка через {timeLeft}с</span>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={handleResend}
|
||||
className="text-sm text-white/60 hover:text-white/80 underline hover:bg-transparent flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
Отправить код повторно
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
109
src/components/dashboard/dashboard-home.tsx
Normal file
109
src/components/dashboard/dashboard-home.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
"use client"
|
||||
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Building2, Phone } from 'lucide-react'
|
||||
import { Sidebar } from './sidebar'
|
||||
|
||||
export function DashboardHome() {
|
||||
const { user } = useAuth()
|
||||
|
||||
const getOrganizationName = () => {
|
||||
if (user?.organization?.name) {
|
||||
return user.organization.name
|
||||
}
|
||||
if (user?.organization?.fullName) {
|
||||
return user.organization.fullName
|
||||
}
|
||||
return 'Вашей организации'
|
||||
}
|
||||
|
||||
const getCabinetType = () => {
|
||||
if (!user?.organization?.type) return 'кабинета'
|
||||
|
||||
switch (user.organization.type) {
|
||||
case 'FULFILLMENT':
|
||||
return 'фулфилмент кабинета'
|
||||
case 'SELLER':
|
||||
return 'селлер кабинета'
|
||||
case 'LOGIST':
|
||||
return 'логистического кабинета'
|
||||
case 'WHOLESALE':
|
||||
return 'оптового кабинета'
|
||||
default:
|
||||
return 'кабинета'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-64">
|
||||
<div className="p-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">
|
||||
Добро пожаловать!
|
||||
</h1>
|
||||
<p className="text-white/80">
|
||||
Главная панель управления {getCabinetType()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Информация об организации */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<Building2 className="h-8 w-8 text-purple-400" />
|
||||
<h3 className="text-xl font-semibold text-white">Организация</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-white font-medium">
|
||||
{getOrganizationName()}
|
||||
</p>
|
||||
{user?.organization?.inn && (
|
||||
<p className="text-white/60 text-sm">
|
||||
ИНН: {user.organization.inn}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Контактная информация */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<Phone className="h-8 w-8 text-green-400" />
|
||||
<h3 className="text-xl font-semibold text-white">Контакты</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-white font-medium">
|
||||
+{user?.phone}
|
||||
</p>
|
||||
<p className="text-white/60 text-sm">
|
||||
Основной номер
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Статистика или дополнительная информация */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-6">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<div className="h-8 w-8 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-sm font-bold">SF</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white">SferaV</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-white font-medium">
|
||||
Система управления бизнесом
|
||||
</p>
|
||||
<p className="text-white/60 text-sm">
|
||||
Версия 1.0
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
31
src/components/dashboard/dashboard.tsx
Normal file
31
src/components/dashboard/dashboard.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Sidebar } from './sidebar'
|
||||
import { UserSettings } from './user-settings'
|
||||
import { DashboardHome } from './dashboard-home'
|
||||
|
||||
export type DashboardSection = 'home' | 'settings'
|
||||
|
||||
export function Dashboard() {
|
||||
const [activeSection, setActiveSection] = useState<DashboardSection>('home')
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeSection) {
|
||||
case 'settings':
|
||||
return <UserSettings />
|
||||
case 'home':
|
||||
default:
|
||||
return <DashboardHome />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-64">
|
||||
{renderContent()}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
141
src/components/dashboard/sidebar.tsx
Normal file
141
src/components/dashboard/sidebar.tsx
Normal file
@ -0,0 +1,141 @@
|
||||
"use client"
|
||||
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
|
||||
import { useRouter, usePathname } from 'next/navigation'
|
||||
import {
|
||||
Settings,
|
||||
LogOut,
|
||||
Building2,
|
||||
Store
|
||||
} from 'lucide-react'
|
||||
|
||||
export function Sidebar() {
|
||||
const { user, logout } = useAuth()
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
|
||||
const getInitials = () => {
|
||||
const orgName = getOrganizationName()
|
||||
return orgName.charAt(0).toUpperCase()
|
||||
}
|
||||
|
||||
const getOrganizationName = () => {
|
||||
if (user?.organization?.name) {
|
||||
return user.organization.name
|
||||
}
|
||||
if (user?.organization?.fullName) {
|
||||
return user.organization.fullName
|
||||
}
|
||||
return 'Организация'
|
||||
}
|
||||
|
||||
const getCabinetType = () => {
|
||||
if (!user?.organization?.type) return 'Кабинет'
|
||||
|
||||
switch (user.organization.type) {
|
||||
case 'FULFILLMENT':
|
||||
return 'Фулфилмент'
|
||||
case 'SELLER':
|
||||
return 'Селлер'
|
||||
case 'LOGIST':
|
||||
return 'Логистика'
|
||||
case 'WHOLESALE':
|
||||
return 'Оптовик'
|
||||
default:
|
||||
return 'Кабинет'
|
||||
}
|
||||
}
|
||||
|
||||
const handleSettingsClick = () => {
|
||||
router.push('/settings')
|
||||
}
|
||||
|
||||
const handleMarketClick = () => {
|
||||
router.push('/market')
|
||||
}
|
||||
|
||||
const isSettingsActive = pathname === '/settings'
|
||||
const isMarketActive = pathname.startsWith('/market')
|
||||
|
||||
return (
|
||||
<div className="fixed left-0 top-0 h-full w-56 bg-white/10 backdrop-blur-xl border-r border-white/20 p-3">
|
||||
<div className="flex flex-col h-full">
|
||||
|
||||
|
||||
{/* Информация о пользователе */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-3 mb-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Avatar className="h-10 w-10">
|
||||
{user?.avatar ? (
|
||||
<AvatarImage
|
||||
src={user.avatar}
|
||||
alt="Аватар пользователя"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : null}
|
||||
<AvatarFallback className="bg-purple-500 text-white text-sm">
|
||||
{getInitials()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-1 mb-1">
|
||||
<Building2 className="h-3 w-3 text-white/60" />
|
||||
<p className="text-white text-xs font-medium truncate">
|
||||
{getOrganizationName()}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-white/60 text-xs truncate">
|
||||
{getCabinetType()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Навигация */}
|
||||
<div className="space-y-1 mb-3">
|
||||
<Button
|
||||
variant={isMarketActive ? "secondary" : "ghost"}
|
||||
className={`w-full justify-start text-left transition-all duration-200 h-8 text-xs ${
|
||||
isMarketActive
|
||||
? 'bg-white/20 text-white hover:bg-white/30'
|
||||
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
||||
} cursor-pointer`}
|
||||
onClick={handleMarketClick}
|
||||
>
|
||||
<Store className="h-3 w-3 mr-2" />
|
||||
Маркет
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant={isSettingsActive ? "secondary" : "ghost"}
|
||||
className={`w-full justify-start text-left transition-all duration-200 h-8 text-xs ${
|
||||
isSettingsActive
|
||||
? 'bg-white/20 text-white hover:bg-white/30'
|
||||
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
||||
} cursor-pointer`}
|
||||
onClick={handleSettingsClick}
|
||||
>
|
||||
<Settings className="h-3 w-3 mr-2" />
|
||||
Настройки профиля
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Кнопка выхода */}
|
||||
<div className="flex-1 flex items-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start text-white/80 hover:bg-red-500/20 hover:text-red-300 cursor-pointer h-8 text-xs"
|
||||
onClick={logout}
|
||||
>
|
||||
<LogOut className="h-3 w-3 mr-2" />
|
||||
Выйти
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
1130
src/components/dashboard/user-settings.tsx
Normal file
1130
src/components/dashboard/user-settings.tsx
Normal file
@ -0,0 +1,1130 @@
|
||||
"use client"
|
||||
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
import { useMutation } from '@apollo/client'
|
||||
import { UPDATE_USER_PROFILE, UPDATE_ORGANIZATION_BY_INN } from '@/graphql/mutations'
|
||||
import { formatPhone } from '@/lib/utils'
|
||||
import S3Service from '@/services/s3-service'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Sidebar } from './sidebar'
|
||||
import {
|
||||
User,
|
||||
Building2,
|
||||
Phone,
|
||||
Mail,
|
||||
MapPin,
|
||||
CreditCard,
|
||||
Key,
|
||||
Edit3,
|
||||
ExternalLink,
|
||||
Copy,
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
MessageCircle,
|
||||
Save,
|
||||
RefreshCw,
|
||||
Calendar,
|
||||
Settings,
|
||||
Upload,
|
||||
Camera
|
||||
} from 'lucide-react'
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
export function UserSettings() {
|
||||
const { user } = useAuth()
|
||||
const [updateUserProfile, { loading: isSaving }] = useMutation(UPDATE_USER_PROFILE)
|
||||
const [updateOrganizationByInn, { loading: isUpdatingOrganization }] = useMutation(UPDATE_ORGANIZATION_BY_INN)
|
||||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [saveMessage, setSaveMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null)
|
||||
const [partnerLink, setPartnerLink] = useState('')
|
||||
const [isGenerating, setIsGenerating] = useState(false)
|
||||
const [isUploadingAvatar, setIsUploadingAvatar] = useState(false)
|
||||
|
||||
// Инициализируем данные из пользователя и организации
|
||||
const [formData, setFormData] = useState({
|
||||
// Контактные данные организации
|
||||
orgPhone: '', // телефон организации, не пользователя
|
||||
managerName: '',
|
||||
telegram: '',
|
||||
whatsapp: '',
|
||||
email: '',
|
||||
|
||||
// Организация - данные могут быть заполнены из DaData
|
||||
orgName: '',
|
||||
address: '',
|
||||
|
||||
// Юридические данные - могут быть заполнены из DaData
|
||||
fullName: '',
|
||||
inn: '',
|
||||
ogrn: '',
|
||||
registrationPlace: '',
|
||||
|
||||
// Финансовые данные - требуют ручного заполнения
|
||||
bankName: '',
|
||||
bik: '',
|
||||
accountNumber: '',
|
||||
corrAccount: ''
|
||||
})
|
||||
|
||||
// Загружаем данные организации при монтировании компонента
|
||||
useEffect(() => {
|
||||
if (user?.organization) {
|
||||
const org = user.organization
|
||||
|
||||
// Извлекаем первый телефон из phones JSON
|
||||
let orgPhone = ''
|
||||
if (org.phones && Array.isArray(org.phones) && org.phones.length > 0) {
|
||||
orgPhone = org.phones[0].value || org.phones[0] || ''
|
||||
} else if (org.phones && typeof org.phones === 'object') {
|
||||
const phoneValues = Object.values(org.phones)
|
||||
if (phoneValues.length > 0) {
|
||||
orgPhone = String(phoneValues[0])
|
||||
}
|
||||
}
|
||||
|
||||
// Извлекаем email из emails JSON
|
||||
let email = ''
|
||||
if (org.emails && Array.isArray(org.emails) && org.emails.length > 0) {
|
||||
email = org.emails[0].value || org.emails[0] || ''
|
||||
} else if (org.emails && typeof org.emails === 'object') {
|
||||
const emailValues = Object.values(org.emails)
|
||||
if (emailValues.length > 0) {
|
||||
email = String(emailValues[0])
|
||||
}
|
||||
}
|
||||
|
||||
// Извлекаем дополнительные данные из managementPost (JSON)
|
||||
let customContacts: {
|
||||
managerName?: string
|
||||
telegram?: string
|
||||
whatsapp?: string
|
||||
bankDetails?: {
|
||||
bankName?: string
|
||||
bik?: string
|
||||
accountNumber?: string
|
||||
corrAccount?: string
|
||||
}
|
||||
} = {}
|
||||
try {
|
||||
if (org.managementPost && typeof org.managementPost === 'string') {
|
||||
customContacts = JSON.parse(org.managementPost)
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Ошибка парсинга managementPost:', e)
|
||||
}
|
||||
|
||||
setFormData({
|
||||
orgPhone: orgPhone,
|
||||
managerName: customContacts?.managerName || '',
|
||||
telegram: customContacts?.telegram || '',
|
||||
whatsapp: customContacts?.whatsapp || '',
|
||||
email: email,
|
||||
orgName: org.name || '',
|
||||
address: org.address || '',
|
||||
fullName: org.fullName || '',
|
||||
inn: org.inn || '',
|
||||
ogrn: org.ogrn || '',
|
||||
registrationPlace: org.address || '',
|
||||
bankName: customContacts?.bankDetails?.bankName || '',
|
||||
bik: customContacts?.bankDetails?.bik || '',
|
||||
accountNumber: customContacts?.bankDetails?.accountNumber || '',
|
||||
corrAccount: customContacts?.bankDetails?.corrAccount || ''
|
||||
})
|
||||
}
|
||||
}, [user])
|
||||
|
||||
const getInitials = () => {
|
||||
const orgName = user?.organization?.name || user?.organization?.fullName
|
||||
if (orgName) {
|
||||
return orgName.charAt(0).toUpperCase()
|
||||
}
|
||||
return user?.phone ? user.phone.slice(-2).toUpperCase() : 'О'
|
||||
}
|
||||
|
||||
const getCabinetTypeName = () => {
|
||||
if (!user?.organization?.type) return 'Не указан'
|
||||
|
||||
switch (user.organization.type) {
|
||||
case 'FULFILLMENT':
|
||||
return 'Фулфилмент'
|
||||
case 'SELLER':
|
||||
return 'Селлер'
|
||||
case 'LOGIST':
|
||||
return 'Логистика'
|
||||
case 'WHOLESALE':
|
||||
return 'Оптовик'
|
||||
default:
|
||||
return 'Не указан'
|
||||
}
|
||||
}
|
||||
|
||||
// Обновленная функция для проверки заполненности профиля
|
||||
const checkProfileCompleteness = () => {
|
||||
// Базовые поля (обязательные для всех)
|
||||
const baseFields = [
|
||||
{ field: 'orgPhone', label: 'Телефон организации', value: formData.orgPhone },
|
||||
{ field: 'managerName', label: 'Имя управляющего', value: formData.managerName },
|
||||
{ field: 'email', label: 'Email', value: formData.email }
|
||||
]
|
||||
|
||||
// Дополнительные поля в зависимости от типа кабинета
|
||||
const additionalFields = []
|
||||
if (user?.organization?.type === 'FULFILLMENT' || user?.organization?.type === 'LOGIST' || user?.organization?.type === 'WHOLESALE') {
|
||||
// Финансовые данные - всегда обязательны для бизнес-кабинетов
|
||||
additionalFields.push(
|
||||
{ field: 'bankName', label: 'Название банка', value: formData.bankName },
|
||||
{ field: 'bik', label: 'БИК', value: formData.bik },
|
||||
{ field: 'accountNumber', label: 'Расчетный счет', value: formData.accountNumber },
|
||||
{ field: 'corrAccount', label: 'Корр. счет', value: formData.corrAccount }
|
||||
)
|
||||
}
|
||||
|
||||
const allRequiredFields = [...baseFields, ...additionalFields]
|
||||
const filledRequiredFields = allRequiredFields.filter(field => field.value && field.value.trim() !== '').length
|
||||
|
||||
// Подсчитываем бонусные баллы за автоматически заполненные поля
|
||||
let autoFilledFields = 0
|
||||
let totalAutoFields = 0
|
||||
|
||||
// Номер телефона пользователя для авторизации (не считаем в процентах заполненности)
|
||||
// Телефон организации учитывается отдельно как обычное поле
|
||||
|
||||
// Данные организации из DaData (если есть ИНН)
|
||||
if (formData.inn || user?.organization?.inn) {
|
||||
totalAutoFields += 5 // ИНН + название + адрес + полное название + ОГРН
|
||||
|
||||
if (formData.inn || user?.organization?.inn) autoFilledFields += 1 // ИНН
|
||||
if (formData.orgName || user?.organization?.name) autoFilledFields += 1 // Название
|
||||
if (formData.address || user?.organization?.address) autoFilledFields += 1 // Адрес
|
||||
if (formData.fullName || user?.organization?.fullName) autoFilledFields += 1 // Полное название
|
||||
if (formData.ogrn || user?.organization?.ogrn) autoFilledFields += 1 // ОГРН
|
||||
}
|
||||
|
||||
// Место регистрации
|
||||
if (formData.registrationPlace || user?.organization?.registrationDate) {
|
||||
autoFilledFields += 1
|
||||
totalAutoFields += 1
|
||||
}
|
||||
|
||||
const totalPossibleFields = allRequiredFields.length + totalAutoFields
|
||||
const totalFilledFields = filledRequiredFields + autoFilledFields
|
||||
|
||||
const percentage = totalPossibleFields > 0 ? Math.round((totalFilledFields / totalPossibleFields) * 100) : 0
|
||||
const missingFields = allRequiredFields.filter(field => !field.value || field.value.trim() === '').map(field => field.label)
|
||||
|
||||
return { percentage, missingFields }
|
||||
}
|
||||
|
||||
const profileStatus = checkProfileCompleteness()
|
||||
const isIncomplete = profileStatus.percentage < 100
|
||||
|
||||
const generatePartnerLink = async () => {
|
||||
if (!user?.id) return
|
||||
|
||||
setIsGenerating(true)
|
||||
setSaveMessage(null)
|
||||
|
||||
try {
|
||||
// Генерируем уникальный код партнера
|
||||
const partnerCode = btoa(user.id + Date.now()).replace(/[^a-zA-Z0-9]/g, '').substring(0, 12)
|
||||
const link = `${window.location.origin}/register?partner=${partnerCode}`
|
||||
|
||||
setPartnerLink(link)
|
||||
setSaveMessage({ type: 'success', text: 'Партнерская ссылка сгенерирована!' })
|
||||
|
||||
// TODO: Сохранить партнерский код в базе данных
|
||||
console.log('Partner code generated:', partnerCode)
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error generating partner link:', error)
|
||||
setSaveMessage({ type: 'error', text: 'Ошибка при генерации ссылки' })
|
||||
} finally {
|
||||
setIsGenerating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopyLink = async () => {
|
||||
if (!partnerLink) {
|
||||
await generatePartnerLink()
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(partnerLink)
|
||||
setSaveMessage({ type: 'success', text: 'Ссылка скопирована!' })
|
||||
} catch (error) {
|
||||
console.error('Error copying to clipboard:', error)
|
||||
setSaveMessage({ type: 'error', text: 'Ошибка при копировании' })
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenLink = async () => {
|
||||
if (!partnerLink) {
|
||||
await generatePartnerLink()
|
||||
return
|
||||
}
|
||||
window.open(partnerLink, '_blank')
|
||||
}
|
||||
|
||||
const handleAvatarUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0]
|
||||
if (!file || !user?.id) return
|
||||
|
||||
setIsUploadingAvatar(true)
|
||||
setSaveMessage(null)
|
||||
|
||||
try {
|
||||
const avatarUrl = await S3Service.uploadAvatar(file, user.id)
|
||||
|
||||
// Обновляем аватар пользователя через GraphQL
|
||||
const result = await updateUserProfile({
|
||||
variables: {
|
||||
input: {
|
||||
avatar: avatarUrl
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (result.data?.updateUserProfile?.success) {
|
||||
setSaveMessage({ type: 'success', text: 'Аватар успешно обновлен! Обновляем страницу...' })
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 1000)
|
||||
} else {
|
||||
throw new Error('Failed to update avatar')
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error uploading avatar:', error)
|
||||
setSaveMessage({ type: 'error', text: 'Ошибка при загрузке аватара' })
|
||||
} finally {
|
||||
setIsUploadingAvatar(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Функции для валидации и масок
|
||||
const validateEmail = (email: string) => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
return emailRegex.test(email)
|
||||
}
|
||||
|
||||
const formatPhoneInput = (value: string) => {
|
||||
const cleaned = value.replace(/\D/g, '')
|
||||
if (cleaned.length <= 1) return cleaned
|
||||
if (cleaned.length <= 4) return `+7 (${cleaned.slice(1)}`
|
||||
if (cleaned.length <= 7) return `+7 (${cleaned.slice(1, 4)}) ${cleaned.slice(4)}`
|
||||
if (cleaned.length <= 9) return `+7 (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`
|
||||
return `+7 (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7, 9)}-${cleaned.slice(9, 11)}`
|
||||
}
|
||||
|
||||
const formatTelegram = (value: string) => {
|
||||
// Убираем все символы кроме букв, цифр, _ и @
|
||||
let cleaned = value.replace(/[^a-zA-Z0-9_@]/g, '')
|
||||
|
||||
// Убираем лишние символы @
|
||||
cleaned = cleaned.replace(/@+/g, '@')
|
||||
|
||||
// Если есть символы после удаления @ и строка не начинается с @, добавляем @
|
||||
if (cleaned && !cleaned.startsWith('@')) {
|
||||
cleaned = '@' + cleaned
|
||||
}
|
||||
|
||||
// Ограничиваем длину (максимум 32 символа для Telegram)
|
||||
if (cleaned.length > 33) {
|
||||
cleaned = cleaned.substring(0, 33)
|
||||
}
|
||||
|
||||
return cleaned
|
||||
}
|
||||
|
||||
const validateName = (name: string) => {
|
||||
return /^[а-яёА-ЯЁa-zA-Z\s-]+$/.test(name) && name.trim().length >= 2
|
||||
}
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
let processedValue = value
|
||||
|
||||
// Применяем маски и валидации
|
||||
switch (field) {
|
||||
case 'orgPhone':
|
||||
case 'whatsapp':
|
||||
processedValue = formatPhoneInput(value)
|
||||
break
|
||||
case 'telegram':
|
||||
processedValue = formatTelegram(value)
|
||||
break
|
||||
case 'email':
|
||||
// Для email не применяем маску, только валидацию при потере фокуса
|
||||
break
|
||||
case 'managerName':
|
||||
// Разрешаем только буквы, пробелы и дефисы
|
||||
processedValue = value.replace(/[^а-яёА-ЯЁa-zA-Z\s-]/g, '')
|
||||
break
|
||||
}
|
||||
|
||||
setFormData(prev => ({ ...prev, [field]: processedValue }))
|
||||
}
|
||||
|
||||
// Функции для проверки ошибок
|
||||
const getFieldError = (field: string, value: string) => {
|
||||
if (!isEditing || !value.trim()) return null
|
||||
|
||||
switch (field) {
|
||||
case 'email':
|
||||
return !validateEmail(value) ? 'Неверный формат email' : null
|
||||
case 'managerName':
|
||||
return !validateName(value) ? 'Только буквы, пробелы и дефисы' : null
|
||||
case 'orgPhone':
|
||||
case 'whatsapp':
|
||||
const cleaned = value.replace(/\D/g, '')
|
||||
return cleaned.length !== 11 ? 'Неверный формат телефона' : null
|
||||
case 'telegram':
|
||||
return value.length < 6 ? 'Минимум 5 символов после @' : null
|
||||
case 'inn':
|
||||
const innCleaned = value.replace(/\D/g, '')
|
||||
if (innCleaned.length !== 10 && innCleaned.length !== 12) {
|
||||
return 'ИНН должен содержать 10 или 12 цифр'
|
||||
}
|
||||
return null
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// Проверка наличия ошибок валидации
|
||||
const hasValidationErrors = () => {
|
||||
const fields = ['orgPhone', 'managerName', 'telegram', 'whatsapp', 'email', 'inn']
|
||||
return fields.some(field => {
|
||||
const value = formData[field as keyof typeof formData]
|
||||
return getFieldError(field, value)
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
// Сброс предыдущих сообщений
|
||||
setSaveMessage(null)
|
||||
|
||||
try {
|
||||
// Проверяем, изменился ли ИНН и нужно ли обновить данные организации
|
||||
const currentInn = formData.inn || user?.organization?.inn || ''
|
||||
const originalInn = user?.organization?.inn || ''
|
||||
const innCleaned = currentInn.replace(/\D/g, '')
|
||||
const originalInnCleaned = originalInn.replace(/\D/g, '')
|
||||
|
||||
// Если ИНН изменился и валиден, сначала обновляем данные организации
|
||||
if (innCleaned !== originalInnCleaned && (innCleaned.length === 10 || innCleaned.length === 12)) {
|
||||
setSaveMessage({ type: 'success', text: 'Обновляем данные организации...' })
|
||||
|
||||
const orgResult = await updateOrganizationByInn({
|
||||
variables: { inn: innCleaned }
|
||||
})
|
||||
|
||||
if (!orgResult.data?.updateOrganizationByInn?.success) {
|
||||
setSaveMessage({
|
||||
type: 'error',
|
||||
text: orgResult.data?.updateOrganizationByInn?.message || 'Ошибка при обновлении данных организации'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setSaveMessage({ type: 'success', text: 'Данные организации обновлены. Сохраняем профиль...' })
|
||||
}
|
||||
|
||||
const result = await updateUserProfile({
|
||||
variables: {
|
||||
input: {
|
||||
orgPhone: formData.orgPhone,
|
||||
managerName: formData.managerName,
|
||||
telegram: formData.telegram,
|
||||
whatsapp: formData.whatsapp,
|
||||
email: formData.email,
|
||||
bankName: formData.bankName,
|
||||
bik: formData.bik,
|
||||
accountNumber: formData.accountNumber,
|
||||
corrAccount: formData.corrAccount
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (result.data?.updateUserProfile?.success) {
|
||||
setSaveMessage({ type: 'success', text: 'Профиль успешно сохранен! Обновляем страницу...' })
|
||||
|
||||
// Простое обновление страницы после успешного сохранения
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 1000)
|
||||
} else {
|
||||
setSaveMessage({
|
||||
type: 'error',
|
||||
text: result.data?.updateUserProfile?.message || 'Ошибка при сохранении профиля'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving profile:', error)
|
||||
setSaveMessage({ type: 'error', text: 'Ошибка при сохранении профиля' })
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateString?: string) => {
|
||||
if (!dateString) return ''
|
||||
try {
|
||||
let date: Date
|
||||
|
||||
// Проверяем, является ли строка числом (Unix timestamp)
|
||||
if (/^\d+$/.test(dateString)) {
|
||||
// Если это Unix timestamp в миллисекундах
|
||||
const timestamp = parseInt(dateString, 10)
|
||||
date = new Date(timestamp)
|
||||
} else {
|
||||
// Обычная строка даты
|
||||
date = new Date(dateString)
|
||||
}
|
||||
|
||||
if (isNaN(date.getTime())) {
|
||||
console.warn('Invalid date string:', dateString)
|
||||
return 'Неверная дата'
|
||||
}
|
||||
|
||||
return date.toLocaleDateString('ru-RU', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error formatting date:', error, dateString)
|
||||
return 'Ошибка даты'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
{/* Заголовок - фиксированная высота */}
|
||||
<div className="flex items-center justify-between mb-4 flex-shrink-0">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-white mb-1">Настройки профиля</h1>
|
||||
<p className="text-white/70 text-sm">Управление информацией о профиле и организации</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Компактный индикатор прогресса */}
|
||||
{isIncomplete && (
|
||||
<div className="flex items-center gap-2 mr-2">
|
||||
<div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center">
|
||||
<span className="text-xs text-white font-medium">{profileStatus.percentage}%</span>
|
||||
</div>
|
||||
<div className="hidden sm:block text-xs text-white/70">
|
||||
Осталось {profileStatus.missingFields.length} {
|
||||
profileStatus.missingFields.length === 1 ? 'поле' :
|
||||
profileStatus.missingFields.length < 5 ? 'поля' : 'полей'
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isEditing ? (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(false)}
|
||||
className="glass-secondary text-white hover:text-white cursor-pointer"
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSave}
|
||||
disabled={hasValidationErrors() || isSaving}
|
||||
className={`glass-button text-white cursor-pointer ${
|
||||
hasValidationErrors() || isSaving ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{isSaving ? 'Сохранение...' : 'Сохранить'}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="glass-button text-white cursor-pointer"
|
||||
>
|
||||
<Edit3 className="h-4 w-4 mr-2" />
|
||||
Редактировать
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Сообщения о сохранении */}
|
||||
{saveMessage && (
|
||||
<Alert className={`mb-4 ${saveMessage.type === 'success' ? 'border-green-500 bg-green-500/10' : 'border-red-500 bg-red-500/10'}`}>
|
||||
<AlertDescription className={saveMessage.type === 'success' ? 'text-green-400' : 'text-red-400'}>
|
||||
{saveMessage.text}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Основной контент с вкладками - заполняет оставшееся пространство */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<Tabs defaultValue="profile" className="h-full flex flex-col">
|
||||
<TabsList className={`grid w-full glass-card mb-4 flex-shrink-0 ${
|
||||
user?.organization?.type === 'SELLER' ? 'grid-cols-4' :
|
||||
(user?.organization?.type === 'FULFILLMENT' || user?.organization?.type === 'LOGIST' || user?.organization?.type === 'WHOLESALE') ? 'grid-cols-4' :
|
||||
'grid-cols-3'
|
||||
}`}>
|
||||
<TabsTrigger value="profile" className="text-white data-[state=active]:bg-white/20 cursor-pointer">
|
||||
<User className="h-4 w-4 mr-2" />
|
||||
Профиль
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="organization" className="text-white data-[state=active]:bg-white/20 cursor-pointer">
|
||||
<Building2 className="h-4 w-4 mr-2" />
|
||||
Организация
|
||||
</TabsTrigger>
|
||||
{(user?.organization?.type === 'FULFILLMENT' || user?.organization?.type === 'LOGIST' || user?.organization?.type === 'WHOLESALE') && (
|
||||
<TabsTrigger value="financial" className="text-white data-[state=active]:bg-white/20 cursor-pointer">
|
||||
<CreditCard className="h-4 w-4 mr-2" />
|
||||
Финансовые
|
||||
</TabsTrigger>
|
||||
)}
|
||||
{user?.organization?.type === 'SELLER' && (
|
||||
<TabsTrigger value="api" className="text-white data-[state=active]:bg-white/20 cursor-pointer">
|
||||
<Key className="h-4 w-4 mr-2" />
|
||||
API
|
||||
</TabsTrigger>
|
||||
)}
|
||||
<TabsTrigger value="tools" className="text-white data-[state=active]:bg-white/20 cursor-pointer">
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
Инструменты
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Профиль пользователя */}
|
||||
<TabsContent value="profile" className="flex-1 overflow-hidden">
|
||||
<Card className="glass-card p-6 h-full overflow-auto">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="relative">
|
||||
<Avatar className="h-16 w-16">
|
||||
{user?.avatar ? (
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt="Аватар"
|
||||
className="w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<AvatarFallback className="bg-purple-500 text-white text-lg">
|
||||
{getInitials()}
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
<div className="absolute -bottom-1 -right-1">
|
||||
<label htmlFor="avatar-upload" className="cursor-pointer">
|
||||
<div className="w-6 h-6 bg-purple-600 rounded-full flex items-center justify-center hover:bg-purple-700 transition-colors">
|
||||
{isUploadingAvatar ? (
|
||||
<RefreshCw className="h-3 w-3 text-white animate-spin" />
|
||||
) : (
|
||||
<Camera className="h-3 w-3 text-white" />
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
id="avatar-upload"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleAvatarUpload}
|
||||
className="hidden"
|
||||
disabled={isUploadingAvatar}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-white font-medium text-lg">
|
||||
{user?.organization?.name || user?.organization?.fullName || 'Пользователь'}
|
||||
</p>
|
||||
<Badge variant="outline" className="bg-white/10 text-white border-white/20 mt-1">
|
||||
{getCabinetTypeName()}
|
||||
</Badge>
|
||||
<p className="text-white/60 text-sm mt-2">
|
||||
Авторизован по номеру: {formatPhone(user?.phone || '')}
|
||||
</p>
|
||||
{user?.createdAt && (
|
||||
<p className="text-white/50 text-xs mt-1 flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
Дата регистрации: {formatDate(user.createdAt)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<CheckCircle className="h-5 w-5 text-green-400 ml-auto" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Номер телефона организации</Label>
|
||||
<Input
|
||||
value={formData.orgPhone}
|
||||
onChange={(e) => handleInputChange('orgPhone', e.target.value)}
|
||||
placeholder="+7 (999) 999-99-99"
|
||||
readOnly={!isEditing}
|
||||
className={`glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70 ${
|
||||
getFieldError('orgPhone', formData.orgPhone) ? 'border-red-400' : ''
|
||||
}`}
|
||||
/>
|
||||
{getFieldError('orgPhone', formData.orgPhone) ? (
|
||||
<p className="text-red-400 text-xs mt-1 flex items-center gap-1">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
{getFieldError('orgPhone', formData.orgPhone)}
|
||||
</p>
|
||||
) : !formData.orgPhone && (
|
||||
<p className="text-orange-400 text-xs mt-1 flex items-center gap-1">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
Рекомендуется указать
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Имя управляющего</Label>
|
||||
<Input
|
||||
value={formData.managerName}
|
||||
onChange={(e) => handleInputChange('managerName', e.target.value)}
|
||||
placeholder="Иван Иванов"
|
||||
readOnly={!isEditing}
|
||||
className={`glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70 ${
|
||||
getFieldError('managerName', formData.managerName) ? 'border-red-400' : ''
|
||||
}`}
|
||||
/>
|
||||
{getFieldError('managerName', formData.managerName) && (
|
||||
<p className="text-red-400 text-xs mt-1 flex items-center gap-1">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
{getFieldError('managerName', formData.managerName)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 flex items-center gap-2">
|
||||
<MessageCircle className="h-4 w-4 text-blue-400" />
|
||||
Telegram
|
||||
</Label>
|
||||
<Input
|
||||
value={formData.telegram}
|
||||
onChange={(e) => handleInputChange('telegram', e.target.value)}
|
||||
placeholder="@username"
|
||||
readOnly={!isEditing}
|
||||
className={`glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70 ${
|
||||
getFieldError('telegram', formData.telegram) ? 'border-red-400' : ''
|
||||
}`}
|
||||
/>
|
||||
{getFieldError('telegram', formData.telegram) && (
|
||||
<p className="text-red-400 text-xs mt-1 flex items-center gap-1">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
{getFieldError('telegram', formData.telegram)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 flex items-center gap-2">
|
||||
<Phone className="h-4 w-4 text-green-400" />
|
||||
WhatsApp
|
||||
</Label>
|
||||
<Input
|
||||
value={formData.whatsapp}
|
||||
onChange={(e) => handleInputChange('whatsapp', e.target.value)}
|
||||
placeholder="+7 (999) 999-99-99"
|
||||
readOnly={!isEditing}
|
||||
className={`glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70 ${
|
||||
getFieldError('whatsapp', formData.whatsapp) ? 'border-red-400' : ''
|
||||
}`}
|
||||
/>
|
||||
{getFieldError('whatsapp', formData.whatsapp) && (
|
||||
<p className="text-red-400 text-xs mt-1 flex items-center gap-1">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
{getFieldError('whatsapp', formData.whatsapp)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 flex items-center gap-2">
|
||||
<Mail className="h-4 w-4 text-red-400" />
|
||||
Email
|
||||
</Label>
|
||||
<Input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||||
placeholder="example@company.com"
|
||||
readOnly={!isEditing}
|
||||
className={`glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70 ${
|
||||
getFieldError('email', formData.email) ? 'border-red-400' : ''
|
||||
}`}
|
||||
/>
|
||||
{getFieldError('email', formData.email) && (
|
||||
<p className="text-red-400 text-xs mt-1 flex items-center gap-1">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
{getFieldError('email', formData.email)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Организация и юридические данные */}
|
||||
<TabsContent value="organization" className="flex-1 overflow-hidden">
|
||||
<Card className="glass-card p-6 h-full overflow-hidden">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Building2 className="h-5 w-5 text-blue-400" />
|
||||
<h3 className="text-lg font-semibold text-white">Организация и юридические данные</h3>
|
||||
{(formData.inn || user?.organization?.inn) && (
|
||||
<CheckCircle className="h-5 w-5 text-green-400 ml-auto" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Общая подпись про реестр */}
|
||||
<div className="mb-6 p-3 bg-blue-500/10 rounded-lg border border-blue-500/20">
|
||||
<p className="text-blue-300 text-sm flex items-center gap-2">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
При сохранении с измененным ИНН мы автоматически обновляем все остальные данные из федерального реестра
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Названия */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Название организации</Label>
|
||||
<Input
|
||||
value={formData.orgName || user?.organization?.name || ''}
|
||||
onChange={(e) => handleInputChange('orgName', e.target.value)}
|
||||
placeholder="Название организации"
|
||||
readOnly={!isEditing || !!(formData.orgName || user?.organization?.name)}
|
||||
className="glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Полное название</Label>
|
||||
<Input
|
||||
value={formData.fullName || user?.organization?.fullName || ''}
|
||||
readOnly
|
||||
className="glass-input text-white h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Адреса */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 flex items-center gap-2">
|
||||
<MapPin className="h-4 w-4" />
|
||||
Адрес
|
||||
</Label>
|
||||
<Input
|
||||
value={formData.address || user?.organization?.address || ''}
|
||||
onChange={(e) => handleInputChange('address', e.target.value)}
|
||||
placeholder="г. Москва, ул. Примерная, д. 1"
|
||||
readOnly={!isEditing || !!(formData.address || user?.organization?.address)}
|
||||
className="glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Полный юридический адрес</Label>
|
||||
<Input
|
||||
value={user?.organization?.addressFull || ''}
|
||||
readOnly
|
||||
className="glass-input text-white h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ИНН, ОГРН, КПП */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 flex items-center gap-2">
|
||||
ИНН
|
||||
{isUpdatingOrganization && (
|
||||
<RefreshCw className="h-3 w-3 animate-spin text-blue-400" />
|
||||
)}
|
||||
</Label>
|
||||
<Input
|
||||
value={formData.inn || user?.organization?.inn || ''}
|
||||
onChange={(e) => {
|
||||
handleInputChange('inn', e.target.value)
|
||||
}}
|
||||
placeholder="Введите ИНН организации"
|
||||
readOnly={!isEditing}
|
||||
disabled={isUpdatingOrganization}
|
||||
className={`glass-input text-white placeholder:text-white/40 h-10 ${
|
||||
!isEditing ? 'read-only:opacity-70' : ''
|
||||
} ${getFieldError('inn', formData.inn) ? 'border-red-400' : ''} ${
|
||||
isUpdatingOrganization ? 'opacity-50' : ''
|
||||
}`}
|
||||
/>
|
||||
{getFieldError('inn', formData.inn) && (
|
||||
<p className="text-red-400 text-xs mt-1">
|
||||
{getFieldError('inn', formData.inn)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">ОГРН</Label>
|
||||
<Input
|
||||
value={formData.ogrn || user?.organization?.ogrn || ''}
|
||||
readOnly
|
||||
className="glass-input text-white h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">КПП</Label>
|
||||
<Input
|
||||
value={user?.organization?.kpp || ''}
|
||||
readOnly
|
||||
className="glass-input text-white h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Руководитель и статус */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{user?.organization?.managementName && (
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Руководитель</Label>
|
||||
<Input
|
||||
value={user.organization.managementName}
|
||||
readOnly
|
||||
className="glass-input text-white h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{user?.organization?.status && (
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Статус организации</Label>
|
||||
<Input
|
||||
value={user.organization.status === 'ACTIVE' ? 'Действующая' : user.organization.status}
|
||||
readOnly
|
||||
className="glass-input text-white h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Дата регистрации */}
|
||||
{user?.organization?.registrationDate && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4" />
|
||||
Дата регистрации
|
||||
</Label>
|
||||
<Input
|
||||
value={formatDate(user.organization.registrationDate)}
|
||||
readOnly
|
||||
className="glass-input text-white h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
|
||||
|
||||
{/* Финансовые данные */}
|
||||
{(user?.organization?.type === 'FULFILLMENT' || user?.organization?.type === 'LOGIST' || user?.organization?.type === 'WHOLESALE') && (
|
||||
<TabsContent value="financial" className="flex-1 overflow-hidden">
|
||||
<Card className="glass-card p-6 h-full overflow-auto">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<CreditCard className="h-5 w-5 text-red-400" />
|
||||
<h3 className="text-lg font-semibold text-white">Финансовые данные</h3>
|
||||
{formData.bankName && formData.bik && formData.accountNumber && formData.corrAccount && (
|
||||
<CheckCircle className="h-5 w-5 text-green-400 ml-auto" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Название банка</Label>
|
||||
<Input
|
||||
value={formData.bankName}
|
||||
onChange={(e) => handleInputChange('bankName', e.target.value)}
|
||||
placeholder="ПАО Сбербанк"
|
||||
readOnly={!isEditing}
|
||||
className="glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">БИК</Label>
|
||||
<Input
|
||||
value={formData.bik}
|
||||
onChange={(e) => handleInputChange('bik', e.target.value)}
|
||||
placeholder="044525225"
|
||||
readOnly={!isEditing}
|
||||
className="glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Корр. счет</Label>
|
||||
<Input
|
||||
value={formData.corrAccount}
|
||||
onChange={(e) => handleInputChange('corrAccount', e.target.value)}
|
||||
placeholder="30101810400000000225"
|
||||
readOnly={!isEditing}
|
||||
className="glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Расчетный счет</Label>
|
||||
<Input
|
||||
value={formData.accountNumber}
|
||||
onChange={(e) => handleInputChange('accountNumber', e.target.value)}
|
||||
placeholder="40702810123456789012"
|
||||
readOnly={!isEditing}
|
||||
className="glass-input text-white placeholder:text-white/40 h-10 read-only:opacity-70"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
)}
|
||||
|
||||
{/* API ключи для селлера */}
|
||||
{user?.organization?.type === 'SELLER' && (
|
||||
<TabsContent value="api" className="flex-1 overflow-hidden">
|
||||
<Card className="glass-card p-6 h-full overflow-auto">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Key className="h-5 w-5 text-green-400" />
|
||||
<h3 className="text-lg font-semibold text-white">API ключи маркетплейсов</h3>
|
||||
{user?.organization?.apiKeys?.length > 0 && (
|
||||
<CheckCircle className="h-5 w-5 text-green-400 ml-auto" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Wildberries API</Label>
|
||||
<Input
|
||||
value={user?.organization?.apiKeys?.find(key => key.marketplace === 'WILDBERRIES') ? '••••••••••••••••••••' : ''}
|
||||
readOnly
|
||||
className="glass-input text-white h-10 read-only:opacity-70"
|
||||
/>
|
||||
{user?.organization?.apiKeys?.find(key => key.marketplace === 'WILDBERRIES') && (
|
||||
<p className="text-green-400 text-sm mt-2 flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
API ключ настроен
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-white/80 text-sm mb-2 block">Ozon API</Label>
|
||||
<Input
|
||||
value={user?.organization?.apiKeys?.find(key => key.marketplace === 'OZON') ? '••••••••••••••••••••' : ''}
|
||||
readOnly
|
||||
className="glass-input text-white h-10 read-only:opacity-70"
|
||||
/>
|
||||
{user?.organization?.apiKeys?.find(key => key.marketplace === 'OZON') && (
|
||||
<p className="text-green-400 text-sm mt-2 flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
API ключ настроен
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
)}
|
||||
|
||||
{/* Инструменты */}
|
||||
<TabsContent value="tools" className="flex-1 overflow-hidden">
|
||||
<Card className="glass-card p-6 h-full overflow-auto">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Key className="h-5 w-5 text-green-400" />
|
||||
<h3 className="text-lg font-semibold text-white">Инструменты</h3>
|
||||
</div>
|
||||
|
||||
{(user?.organization?.type === 'FULFILLMENT' || user?.organization?.type === 'LOGIST' || user?.organization?.type === 'WHOLESALE') && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h4 className="text-white font-medium mb-2">Партнерская программа</h4>
|
||||
<p className="text-white/70 text-sm mb-4">
|
||||
Приглашайте новых контрагентов по уникальной ссылке. При регистрации они автоматически становятся вашими партнерами.
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="glass-secondary text-white hover:text-white cursor-pointer text-xs px-3 py-2"
|
||||
onClick={generatePartnerLink}
|
||||
disabled={isGenerating}
|
||||
>
|
||||
<RefreshCw className={`h-3 w-3 mr-1 ${isGenerating ? 'animate-spin' : ''}`} />
|
||||
{isGenerating ? 'Генерируем...' : 'Сгенерировать ссылку'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{partnerLink && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="glass-secondary text-white hover:text-white cursor-pointer text-xs px-3 py-2"
|
||||
onClick={handleOpenLink}
|
||||
>
|
||||
<ExternalLink className="h-3 w-3 mr-1" />
|
||||
Открыть ссылку
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="glass-secondary text-white hover:text-white cursor-pointer px-2"
|
||||
onClick={handleCopyLink}
|
||||
>
|
||||
<Copy className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-white/60 text-xs">
|
||||
Ваша партнерская ссылка сгенерирована и готова к использованию
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
326
src/components/market/market-counterparties.tsx
Normal file
326
src/components/market/market-counterparties.tsx
Normal file
@ -0,0 +1,326 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation } from '@apollo/client'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import {
|
||||
Users,
|
||||
Clock,
|
||||
Send,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
ArrowUpCircle,
|
||||
ArrowDownCircle
|
||||
} from 'lucide-react'
|
||||
import { OrganizationCard } from './organization-card'
|
||||
import { GET_MY_COUNTERPARTIES, GET_INCOMING_REQUESTS, GET_OUTGOING_REQUESTS } from '@/graphql/queries'
|
||||
import { RESPOND_TO_COUNTERPARTY_REQUEST, CANCEL_COUNTERPARTY_REQUEST, REMOVE_COUNTERPARTY } from '@/graphql/mutations'
|
||||
|
||||
interface Organization {
|
||||
id: string
|
||||
inn: string
|
||||
name?: string
|
||||
fullName?: string
|
||||
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||
address?: string
|
||||
phones?: Array<{ value: string }>
|
||||
emails?: Array<{ value: string }>
|
||||
createdAt: string
|
||||
users?: Array<{ id: string, avatar?: string }>
|
||||
}
|
||||
|
||||
interface CounterpartyRequest {
|
||||
id: string
|
||||
message?: string
|
||||
status: 'PENDING' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED'
|
||||
createdAt: string
|
||||
sender: Organization
|
||||
receiver: Organization
|
||||
}
|
||||
|
||||
export function MarketCounterparties() {
|
||||
const { data: counterpartiesData, loading: counterpartiesLoading, refetch: refetchCounterparties } = useQuery(GET_MY_COUNTERPARTIES)
|
||||
const { data: incomingData, loading: incomingLoading, refetch: refetchIncoming } = useQuery(GET_INCOMING_REQUESTS)
|
||||
const { data: outgoingData, loading: outgoingLoading, refetch: refetchOutgoing } = useQuery(GET_OUTGOING_REQUESTS)
|
||||
|
||||
const [respondToRequest] = useMutation(RESPOND_TO_COUNTERPARTY_REQUEST, {
|
||||
onCompleted: () => {
|
||||
refetchIncoming()
|
||||
refetchCounterparties()
|
||||
}
|
||||
})
|
||||
|
||||
const [cancelRequest] = useMutation(CANCEL_COUNTERPARTY_REQUEST, {
|
||||
onCompleted: () => {
|
||||
refetchOutgoing()
|
||||
}
|
||||
})
|
||||
|
||||
const [removeCounterparty] = useMutation(REMOVE_COUNTERPARTY, {
|
||||
onCompleted: () => {
|
||||
refetchCounterparties()
|
||||
}
|
||||
})
|
||||
|
||||
const handleAcceptRequest = async (requestId: string) => {
|
||||
try {
|
||||
await respondToRequest({
|
||||
variables: { requestId, response: 'ACCEPTED' }
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Ошибка при принятии заявки:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRejectRequest = async (requestId: string) => {
|
||||
try {
|
||||
await respondToRequest({
|
||||
variables: { requestId, response: 'REJECTED' }
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Ошибка при отклонении заявки:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancelRequest = async (requestId: string) => {
|
||||
try {
|
||||
await cancelRequest({
|
||||
variables: { requestId }
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Ошибка при отмене заявки:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveCounterparty = async (organizationId: string) => {
|
||||
try {
|
||||
await removeCounterparty({
|
||||
variables: { organizationId }
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Ошибка при удалении контрагента:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return ''
|
||||
try {
|
||||
let date: Date
|
||||
|
||||
// Проверяем, является ли строка числом (Unix timestamp)
|
||||
if (/^\d+$/.test(dateString)) {
|
||||
// Если это Unix timestamp в миллисекундах
|
||||
const timestamp = parseInt(dateString, 10)
|
||||
date = new Date(timestamp)
|
||||
} else {
|
||||
// Обычная строка даты
|
||||
date = new Date(dateString)
|
||||
}
|
||||
|
||||
if (isNaN(date.getTime())) {
|
||||
return 'Неверная дата'
|
||||
}
|
||||
|
||||
return date.toLocaleDateString('ru-RU', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
} catch (error) {
|
||||
return 'Ошибка даты'
|
||||
}
|
||||
}
|
||||
|
||||
const counterparties = counterpartiesData?.myCounterparties || []
|
||||
const incomingRequests = incomingData?.incomingRequests || []
|
||||
const outgoingRequests = outgoingData?.outgoingRequests || []
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex items-center space-x-3 mb-6">
|
||||
<Users className="h-6 w-6 text-blue-400" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Мои контрагенты</h3>
|
||||
<p className="text-white/60 text-sm">Управление контрагентами и заявками</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<Tabs defaultValue="counterparties" className="h-full flex flex-col">
|
||||
<TabsList className="grid w-full grid-cols-3 bg-white/5 border-white/10">
|
||||
<TabsTrigger value="counterparties" className="data-[state=active]:bg-blue-500/20 data-[state=active]:text-blue-300">
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
Контрагенты ({counterparties.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="incoming" className="data-[state=active]:bg-green-500/20 data-[state=active]:text-green-300">
|
||||
<ArrowDownCircle className="h-4 w-4 mr-2" />
|
||||
Входящие ({incomingRequests.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="outgoing" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-300">
|
||||
<ArrowUpCircle className="h-4 w-4 mr-2" />
|
||||
Исходящие ({outgoingRequests.length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="counterparties" className="flex-1 overflow-auto mt-4">
|
||||
{counterpartiesLoading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="text-white/60">Загрузка...</div>
|
||||
</div>
|
||||
) : counterparties.length === 0 ? (
|
||||
<div className="glass-card p-8">
|
||||
<div className="text-center">
|
||||
<Users className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||||
<p className="text-white/60">У вас пока нет контрагентов</p>
|
||||
<p className="text-white/40 text-sm mt-2">
|
||||
Перейдите на другие вкладки, чтобы найти партнеров
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{counterparties.map((organization: Organization) => (
|
||||
<OrganizationCard
|
||||
key={organization.id}
|
||||
organization={organization}
|
||||
onRemove={handleRemoveCounterparty}
|
||||
showRemoveButton={true}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="incoming" className="flex-1 overflow-auto mt-4">
|
||||
{incomingLoading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="text-white/60">Загрузка...</div>
|
||||
</div>
|
||||
) : incomingRequests.length === 0 ? (
|
||||
<div className="glass-card p-8">
|
||||
<div className="text-center">
|
||||
<ArrowDownCircle className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||||
<p className="text-white/60">Нет входящих заявок</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{incomingRequests.map((request: CounterpartyRequest) => (
|
||||
<Card key={request.id} className="glass-card p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start space-x-3 flex-1">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold">
|
||||
{(request.sender.name || request.sender.fullName || 'O').charAt(0).toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-white font-medium">
|
||||
{request.sender.name || request.sender.fullName}
|
||||
</h4>
|
||||
<p className="text-white/60 text-sm">ИНН: {request.sender.inn}</p>
|
||||
{request.message && (
|
||||
<p className="text-white/80 text-sm mt-2 italic">"{request.message}"</p>
|
||||
)}
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<Clock className="h-3 w-3 text-white/40" />
|
||||
<span className="text-white/40 text-xs">{formatDate(request.createdAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2 ml-4">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => handleAcceptRequest(request.id)}
|
||||
className="bg-green-500/20 hover:bg-green-500/30 text-green-300 border-green-500/30 cursor-pointer"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleRejectRequest(request.id)}
|
||||
className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30 cursor-pointer"
|
||||
>
|
||||
<XCircle className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="outgoing" className="flex-1 overflow-auto mt-4">
|
||||
{outgoingLoading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="text-white/60">Загрузка...</div>
|
||||
</div>
|
||||
) : outgoingRequests.length === 0 ? (
|
||||
<div className="glass-card p-8">
|
||||
<div className="text-center">
|
||||
<ArrowUpCircle className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||||
<p className="text-white/60">Нет исходящих заявок</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{outgoingRequests.map((request: CounterpartyRequest) => (
|
||||
<Card key={request.id} className="glass-card p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start space-x-3 flex-1">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold">
|
||||
{(request.receiver.name || request.receiver.fullName || 'O').charAt(0).toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-white font-medium">
|
||||
{request.receiver.name || request.receiver.fullName}
|
||||
</h4>
|
||||
<p className="text-white/60 text-sm">ИНН: {request.receiver.inn}</p>
|
||||
{request.message && (
|
||||
<p className="text-white/80 text-sm mt-2 italic">"{request.message}"</p>
|
||||
)}
|
||||
<div className="flex items-center space-x-4 mt-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Clock className="h-3 w-3 text-white/40" />
|
||||
<span className="text-white/40 text-xs">{formatDate(request.createdAt)}</span>
|
||||
</div>
|
||||
<Badge className={
|
||||
request.status === 'PENDING' ? 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30' :
|
||||
request.status === 'REJECTED' ? 'bg-red-500/20 text-red-300 border-red-500/30' :
|
||||
'bg-gray-500/20 text-gray-300 border-gray-500/30'
|
||||
}>
|
||||
{request.status === 'PENDING' ? 'Ожидает' : request.status === 'REJECTED' ? 'Отклонено' : request.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{request.status === 'PENDING' && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleCancelRequest(request.id)}
|
||||
className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30 cursor-pointer ml-4"
|
||||
>
|
||||
<XCircle className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
97
src/components/market/market-dashboard.tsx
Normal file
97
src/components/market/market-dashboard.tsx
Normal file
@ -0,0 +1,97 @@
|
||||
"use client"
|
||||
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||
import { MarketCounterparties } from './market-counterparties'
|
||||
import { MarketFulfillment } from './market-fulfillment'
|
||||
import { MarketSellers } from './market-sellers'
|
||||
import { MarketLogistics } from './market-logistics'
|
||||
import { MarketWholesale } from './market-wholesale'
|
||||
|
||||
export function MarketDashboard() {
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
{/* Заголовок - фиксированная высота */}
|
||||
<div className="flex items-center justify-between mb-4 flex-shrink-0">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-white mb-1">Маркет</h1>
|
||||
<p className="text-white/70 text-sm">Управление контрагентами и поиск партнеров</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Основной контент с табами */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<Tabs defaultValue="counterparties" className="h-full flex flex-col">
|
||||
<TabsList className="grid w-full grid-cols-5 bg-white/5 backdrop-blur border-white/10 flex-shrink-0">
|
||||
<TabsTrigger
|
||||
value="counterparties"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
Мои контрагенты
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="fulfillment"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
Фулфилмент
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="sellers"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
Селлеры
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="logistics"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
Логистика
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="wholesale"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
Оптовик
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="counterparties" className="flex-1 overflow-hidden mt-6">
|
||||
<Card className="glass-card h-full overflow-hidden p-6">
|
||||
<MarketCounterparties />
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="fulfillment" className="flex-1 overflow-hidden mt-6">
|
||||
<Card className="glass-card h-full overflow-hidden p-6">
|
||||
<MarketFulfillment />
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="sellers" className="flex-1 overflow-hidden mt-6">
|
||||
<Card className="glass-card h-full overflow-hidden p-6">
|
||||
<MarketSellers />
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="logistics" className="flex-1 overflow-hidden mt-6">
|
||||
<Card className="glass-card h-full overflow-hidden p-6">
|
||||
<MarketLogistics />
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="wholesale" className="flex-1 overflow-hidden mt-6">
|
||||
<Card className="glass-card h-full overflow-hidden p-6">
|
||||
<MarketWholesale />
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
125
src/components/market/market-fulfillment.tsx
Normal file
125
src/components/market/market-fulfillment.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation } from '@apollo/client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Search, Package } from 'lucide-react'
|
||||
import { OrganizationCard } from './organization-card'
|
||||
import { SEARCH_ORGANIZATIONS } from '@/graphql/queries'
|
||||
import { SEND_COUNTERPARTY_REQUEST } from '@/graphql/mutations'
|
||||
|
||||
interface Organization {
|
||||
id: string
|
||||
inn: string
|
||||
name?: string
|
||||
fullName?: string
|
||||
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||
address?: string
|
||||
phones?: Array<{ value: string }>
|
||||
emails?: Array<{ value: string }>
|
||||
createdAt: string
|
||||
users?: Array<{ id: string, avatar?: string }>
|
||||
isCounterparty?: boolean
|
||||
}
|
||||
|
||||
export function MarketFulfillment() {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
|
||||
const { data, loading, refetch } = useQuery(SEARCH_ORGANIZATIONS, {
|
||||
variables: { type: 'FULFILLMENT', search: searchTerm || null }
|
||||
})
|
||||
|
||||
const [sendRequest, { loading: sendingRequest }] = useMutation(SEND_COUNTERPARTY_REQUEST, {
|
||||
onCompleted: () => {
|
||||
refetch()
|
||||
}
|
||||
})
|
||||
|
||||
const handleSearch = () => {
|
||||
refetch({ type: 'FULFILLMENT', search: searchTerm || null })
|
||||
}
|
||||
|
||||
const handleSendRequest = async (organizationId: string, message: string) => {
|
||||
try {
|
||||
await sendRequest({
|
||||
variables: {
|
||||
receiverId: organizationId,
|
||||
message: message || 'Заявка на добавление в контрагенты'
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Ошибка отправки заявки:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const organizations = data?.searchOrganizations || []
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col space-y-4 overflow-hidden">
|
||||
{/* Поиск */}
|
||||
<div className="flex space-x-4 flex-shrink-0">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-3 h-4 w-4 text-white/40" />
|
||||
<Input
|
||||
placeholder="Поиск фулфилментов по названию или ИНН..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
className="pl-10 glass-input text-white placeholder:text-white/40 h-10"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
className="bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30 cursor-pointer"
|
||||
>
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
Найти
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Заголовок с иконкой */}
|
||||
<div className="flex items-center space-x-3 flex-shrink-0 mb-4">
|
||||
<Package className="h-6 w-6 text-blue-400" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Фулфилмент-центры</h3>
|
||||
<p className="text-white/60 text-sm">Найдите и добавьте фулфилмент-центры в контрагенты</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Результаты поиска */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="text-white/60">Поиск...</div>
|
||||
</div>
|
||||
) : organizations.length === 0 ? (
|
||||
<div className="glass-card p-8">
|
||||
<div className="text-center">
|
||||
<Package className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||||
<p className="text-white/60">
|
||||
{searchTerm ? 'Фулфилмент-центры не найдены' : 'Введите запрос для поиска фулфилментов'}
|
||||
</p>
|
||||
<p className="text-white/40 text-sm mt-2">
|
||||
Попробуйте изменить условия поиска
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{organizations.map((organization: Organization) => (
|
||||
<OrganizationCard
|
||||
key={organization.id}
|
||||
organization={organization}
|
||||
onSendRequest={handleSendRequest}
|
||||
actionButtonText="Добавить"
|
||||
actionButtonColor="blue"
|
||||
requestSending={sendingRequest}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
125
src/components/market/market-logistics.tsx
Normal file
125
src/components/market/market-logistics.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation } from '@apollo/client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Search, Truck } from 'lucide-react'
|
||||
import { OrganizationCard } from './organization-card'
|
||||
import { SEARCH_ORGANIZATIONS } from '@/graphql/queries'
|
||||
import { SEND_COUNTERPARTY_REQUEST } from '@/graphql/mutations'
|
||||
|
||||
interface Organization {
|
||||
id: string
|
||||
inn: string
|
||||
name?: string
|
||||
fullName?: string
|
||||
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||
address?: string
|
||||
phones?: Array<{ value: string }>
|
||||
emails?: Array<{ value: string }>
|
||||
createdAt: string
|
||||
users?: Array<{ id: string, avatar?: string }>
|
||||
isCounterparty?: boolean
|
||||
}
|
||||
|
||||
export function MarketLogistics() {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
|
||||
const { data, loading, refetch } = useQuery(SEARCH_ORGANIZATIONS, {
|
||||
variables: { type: 'LOGIST', search: searchTerm || null }
|
||||
})
|
||||
|
||||
const [sendRequest, { loading: sendingRequest }] = useMutation(SEND_COUNTERPARTY_REQUEST, {
|
||||
onCompleted: () => {
|
||||
refetch()
|
||||
}
|
||||
})
|
||||
|
||||
const handleSearch = () => {
|
||||
refetch({ type: 'LOGIST', search: searchTerm || null })
|
||||
}
|
||||
|
||||
const handleSendRequest = async (organizationId: string, message: string) => {
|
||||
try {
|
||||
await sendRequest({
|
||||
variables: {
|
||||
receiverId: organizationId,
|
||||
message: message || 'Заявка на добавление в контрагенты'
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Ошибка отправки заявки:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const organizations = data?.searchOrganizations || []
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col space-y-4 overflow-hidden">
|
||||
{/* Поиск */}
|
||||
<div className="flex space-x-4 flex-shrink-0">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-3 h-4 w-4 text-white/40" />
|
||||
<Input
|
||||
placeholder="Поиск логистических компаний по названию или ИНН..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
className="pl-10 glass-input text-white placeholder:text-white/40 h-10"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
className="bg-orange-500/20 hover:bg-orange-500/30 text-orange-300 border-orange-500/30 cursor-pointer"
|
||||
>
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
Найти
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Заголовок с иконкой */}
|
||||
<div className="flex items-center space-x-3 flex-shrink-0 mb-4">
|
||||
<Truck className="h-6 w-6 text-orange-400" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Логистика</h3>
|
||||
<p className="text-white/60 text-sm">Найдите и добавьте логистические компании в контрагенты</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Результаты поиска */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="text-white/60">Поиск...</div>
|
||||
</div>
|
||||
) : organizations.length === 0 ? (
|
||||
<div className="glass-card p-8">
|
||||
<div className="text-center">
|
||||
<Truck className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||||
<p className="text-white/60">
|
||||
{searchTerm ? 'Логистические компании не найдены' : 'Введите запрос для поиска'}
|
||||
</p>
|
||||
<p className="text-white/40 text-sm mt-2">
|
||||
Попробуйте изменить условия поиска
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{organizations.map((organization: Organization) => (
|
||||
<OrganizationCard
|
||||
key={organization.id}
|
||||
organization={organization}
|
||||
onSendRequest={handleSendRequest}
|
||||
actionButtonText="Добавить"
|
||||
actionButtonColor="yellow"
|
||||
requestSending={sendingRequest}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
125
src/components/market/market-sellers.tsx
Normal file
125
src/components/market/market-sellers.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation } from '@apollo/client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Search, ShoppingCart } from 'lucide-react'
|
||||
import { OrganizationCard } from './organization-card'
|
||||
import { SEARCH_ORGANIZATIONS } from '@/graphql/queries'
|
||||
import { SEND_COUNTERPARTY_REQUEST } from '@/graphql/mutations'
|
||||
|
||||
interface Organization {
|
||||
id: string
|
||||
inn: string
|
||||
name?: string
|
||||
fullName?: string
|
||||
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||
address?: string
|
||||
phones?: Array<{ value: string }>
|
||||
emails?: Array<{ value: string }>
|
||||
createdAt: string
|
||||
users?: Array<{ id: string, avatar?: string }>
|
||||
isCounterparty?: boolean
|
||||
}
|
||||
|
||||
export function MarketSellers() {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
|
||||
const { data, loading, refetch } = useQuery(SEARCH_ORGANIZATIONS, {
|
||||
variables: { type: 'SELLER', search: searchTerm || null }
|
||||
})
|
||||
|
||||
const [sendRequest, { loading: sendingRequest }] = useMutation(SEND_COUNTERPARTY_REQUEST, {
|
||||
onCompleted: () => {
|
||||
refetch()
|
||||
}
|
||||
})
|
||||
|
||||
const handleSearch = () => {
|
||||
refetch({ type: 'SELLER', search: searchTerm || null })
|
||||
}
|
||||
|
||||
const handleSendRequest = async (organizationId: string, message: string) => {
|
||||
try {
|
||||
await sendRequest({
|
||||
variables: {
|
||||
receiverId: organizationId,
|
||||
message: message || 'Заявка на добавление в контрагенты'
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Ошибка отправки заявки:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const organizations = data?.searchOrganizations || []
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col space-y-4 overflow-hidden">
|
||||
{/* Поиск */}
|
||||
<div className="flex space-x-4 flex-shrink-0">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-3 h-4 w-4 text-white/40" />
|
||||
<Input
|
||||
placeholder="Поиск селлеров по названию или ИНН..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
className="pl-10 glass-input text-white placeholder:text-white/40 h-10"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
className="bg-green-500/20 hover:bg-green-500/30 text-green-300 border-green-500/30 cursor-pointer"
|
||||
>
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
Найти
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Заголовок с иконкой */}
|
||||
<div className="flex items-center space-x-3 flex-shrink-0 mb-4">
|
||||
<ShoppingCart className="h-6 w-6 text-green-400" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Селлеры</h3>
|
||||
<p className="text-white/60 text-sm">Найдите и добавьте селлеров в контрагенты</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Результаты поиска */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="text-white/60">Поиск...</div>
|
||||
</div>
|
||||
) : organizations.length === 0 ? (
|
||||
<div className="glass-card p-8">
|
||||
<div className="text-center">
|
||||
<ShoppingCart className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||||
<p className="text-white/60">
|
||||
{searchTerm ? 'Селлеры не найдены' : 'Введите запрос для поиска селлеров'}
|
||||
</p>
|
||||
<p className="text-white/40 text-sm mt-2">
|
||||
Попробуйте изменить условия поиска
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{organizations.map((organization: Organization) => (
|
||||
<OrganizationCard
|
||||
key={organization.id}
|
||||
organization={organization}
|
||||
onSendRequest={handleSendRequest}
|
||||
actionButtonText="Добавить"
|
||||
actionButtonColor="orange"
|
||||
requestSending={sendingRequest}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
125
src/components/market/market-wholesale.tsx
Normal file
125
src/components/market/market-wholesale.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation } from '@apollo/client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Search, Boxes } from 'lucide-react'
|
||||
import { OrganizationCard } from './organization-card'
|
||||
import { SEARCH_ORGANIZATIONS } from '@/graphql/queries'
|
||||
import { SEND_COUNTERPARTY_REQUEST } from '@/graphql/mutations'
|
||||
|
||||
interface Organization {
|
||||
id: string
|
||||
inn: string
|
||||
name?: string
|
||||
fullName?: string
|
||||
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||
address?: string
|
||||
phones?: Array<{ value: string }>
|
||||
emails?: Array<{ value: string }>
|
||||
createdAt: string
|
||||
users?: Array<{ id: string, avatar?: string }>
|
||||
isCounterparty?: boolean
|
||||
}
|
||||
|
||||
export function MarketWholesale() {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
|
||||
const { data, loading, refetch } = useQuery(SEARCH_ORGANIZATIONS, {
|
||||
variables: { type: 'WHOLESALE', search: searchTerm || null }
|
||||
})
|
||||
|
||||
const [sendRequest, { loading: sendingRequest }] = useMutation(SEND_COUNTERPARTY_REQUEST, {
|
||||
onCompleted: () => {
|
||||
refetch()
|
||||
}
|
||||
})
|
||||
|
||||
const handleSearch = () => {
|
||||
refetch({ type: 'WHOLESALE', search: searchTerm || null })
|
||||
}
|
||||
|
||||
const handleSendRequest = async (organizationId: string, message: string) => {
|
||||
try {
|
||||
await sendRequest({
|
||||
variables: {
|
||||
receiverId: organizationId,
|
||||
message: message || 'Заявка на добавление в контрагенты'
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Ошибка отправки заявки:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const organizations = data?.searchOrganizations || []
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col space-y-4 overflow-hidden">
|
||||
{/* Поиск */}
|
||||
<div className="flex space-x-4 flex-shrink-0">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-3 h-4 w-4 text-white/40" />
|
||||
<Input
|
||||
placeholder="Поиск оптовых компаний по названию или ИНН..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
className="pl-10 glass-input text-white placeholder:text-white/40 h-10"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
className="bg-purple-500/20 hover:bg-purple-500/30 text-purple-300 border-purple-500/30 cursor-pointer"
|
||||
>
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
Найти
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Заголовок с иконкой */}
|
||||
<div className="flex items-center space-x-3 flex-shrink-0 mb-4">
|
||||
<Boxes className="h-6 w-6 text-purple-400" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Оптовики</h3>
|
||||
<p className="text-white/60 text-sm">Найдите и добавьте оптовые компании в контрагенты</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Результаты поиска */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="text-white/60">Поиск...</div>
|
||||
</div>
|
||||
) : organizations.length === 0 ? (
|
||||
<div className="glass-card p-8">
|
||||
<div className="text-center">
|
||||
<Boxes className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||||
<p className="text-white/60">
|
||||
{searchTerm ? 'Оптовые компании не найдены' : 'Введите запрос для поиска оптовиков'}
|
||||
</p>
|
||||
<p className="text-white/40 text-sm mt-2">
|
||||
Попробуйте изменить условия поиска
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{organizations.map((organization: Organization) => (
|
||||
<OrganizationCard
|
||||
key={organization.id}
|
||||
organization={organization}
|
||||
onSendRequest={handleSendRequest}
|
||||
actionButtonText="Добавить"
|
||||
actionButtonColor="red"
|
||||
requestSending={sendingRequest}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
92
src/components/market/organization-avatar.tsx
Normal file
92
src/components/market/organization-avatar.tsx
Normal file
@ -0,0 +1,92 @@
|
||||
"use client"
|
||||
|
||||
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface User {
|
||||
id: string
|
||||
avatar?: string | null
|
||||
}
|
||||
|
||||
interface Organization {
|
||||
id: string
|
||||
name?: string | null
|
||||
fullName?: string | null
|
||||
users?: User[]
|
||||
}
|
||||
|
||||
interface OrganizationAvatarProps {
|
||||
organization: Organization
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
className?: string
|
||||
}
|
||||
|
||||
// Цвета для fallback аватарок
|
||||
const FALLBACK_COLORS = [
|
||||
'bg-blue-500',
|
||||
'bg-green-500',
|
||||
'bg-purple-500',
|
||||
'bg-orange-500',
|
||||
'bg-pink-500',
|
||||
'bg-indigo-500',
|
||||
'bg-teal-500',
|
||||
'bg-red-500',
|
||||
'bg-yellow-500',
|
||||
'bg-cyan-500'
|
||||
]
|
||||
|
||||
function getInitials(name: string): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.map(word => word.charAt(0))
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
}
|
||||
|
||||
function getColorForOrganization(organizationId: string): string {
|
||||
const hash = organizationId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
|
||||
return FALLBACK_COLORS[hash % FALLBACK_COLORS.length]
|
||||
}
|
||||
|
||||
function getSizes(size: 'sm' | 'md' | 'lg') {
|
||||
switch (size) {
|
||||
case 'sm':
|
||||
return { avatar: 'size-8', text: 'text-xs' }
|
||||
case 'md':
|
||||
return { avatar: 'size-10', text: 'text-sm' }
|
||||
case 'lg':
|
||||
return { avatar: 'size-12', text: 'text-base' }
|
||||
default:
|
||||
return { avatar: 'size-8', text: 'text-xs' }
|
||||
}
|
||||
}
|
||||
|
||||
export function OrganizationAvatar({
|
||||
organization,
|
||||
size = 'md',
|
||||
className
|
||||
}: OrganizationAvatarProps) {
|
||||
// Берем аватарку первого пользователя организации
|
||||
const userAvatar = organization.users?.[0]?.avatar
|
||||
|
||||
// Получаем имя для инициалов
|
||||
const displayName = organization.name || organization.fullName || 'Организация'
|
||||
const initials = getInitials(displayName)
|
||||
|
||||
// Получаем цвет для fallback
|
||||
const fallbackColor = getColorForOrganization(organization.id)
|
||||
|
||||
const sizes = getSizes(size)
|
||||
|
||||
return (
|
||||
<Avatar className={cn(sizes.avatar, className)}>
|
||||
{userAvatar && (
|
||||
<AvatarImage src={userAvatar} alt={displayName} />
|
||||
)}
|
||||
<AvatarFallback className={cn(fallbackColor, 'text-white font-medium', sizes.text)}>
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
)
|
||||
}
|
||||
268
src/components/market/organization-card.tsx
Normal file
268
src/components/market/organization-card.tsx
Normal file
@ -0,0 +1,268 @@
|
||||
"use client"
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Phone,
|
||||
Mail,
|
||||
MapPin,
|
||||
Calendar,
|
||||
Plus,
|
||||
Send,
|
||||
Trash2
|
||||
} from 'lucide-react'
|
||||
import { OrganizationAvatar } from './organization-avatar'
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Organization {
|
||||
id: string
|
||||
inn: string
|
||||
name?: string
|
||||
fullName?: string
|
||||
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||
address?: string
|
||||
phones?: Array<{ value: string }>
|
||||
emails?: Array<{ value: string }>
|
||||
createdAt: string
|
||||
users?: Array<{ id: string, avatar?: string }>
|
||||
isCounterparty?: boolean
|
||||
}
|
||||
|
||||
interface OrganizationCardProps {
|
||||
organization: Organization
|
||||
onSendRequest?: (organizationId: string, message: string) => void
|
||||
onRemove?: (organizationId: string) => void
|
||||
showRemoveButton?: boolean
|
||||
actionButtonText?: string
|
||||
actionButtonColor?: string
|
||||
requestSending?: boolean
|
||||
}
|
||||
|
||||
export function OrganizationCard({
|
||||
organization,
|
||||
onSendRequest,
|
||||
onRemove,
|
||||
showRemoveButton = false,
|
||||
actionButtonText = "Добавить",
|
||||
actionButtonColor = "green",
|
||||
requestSending = false
|
||||
}: OrganizationCardProps) {
|
||||
const [requestMessage, setRequestMessage] = useState('')
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return ''
|
||||
try {
|
||||
let date: Date
|
||||
|
||||
// Проверяем, является ли строка числом (Unix timestamp)
|
||||
if (/^\d+$/.test(dateString)) {
|
||||
// Если это Unix timestamp в миллисекундах
|
||||
const timestamp = parseInt(dateString, 10)
|
||||
date = new Date(timestamp)
|
||||
} else {
|
||||
// Обычная строка даты
|
||||
date = new Date(dateString)
|
||||
}
|
||||
|
||||
if (isNaN(date.getTime())) {
|
||||
return 'Неверная дата'
|
||||
}
|
||||
|
||||
return date.toLocaleDateString('ru-RU', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
} catch (error) {
|
||||
return 'Ошибка даты'
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case 'FULFILLMENT': return 'Фулфилмент'
|
||||
case 'SELLER': return 'Селлер'
|
||||
case 'LOGIST': return 'Логистика'
|
||||
case 'WHOLESALE': return 'Оптовик'
|
||||
default: return type
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'FULFILLMENT': return 'bg-blue-500/20 text-blue-300 border-blue-500/30'
|
||||
case 'SELLER': return 'bg-green-500/20 text-green-300 border-green-500/30'
|
||||
case 'LOGIST': return 'bg-orange-500/20 text-orange-300 border-orange-500/30'
|
||||
case 'WHOLESALE': return 'bg-purple-500/20 text-purple-300 border-purple-500/30'
|
||||
default: return 'bg-gray-500/20 text-gray-300 border-gray-500/30'
|
||||
}
|
||||
}
|
||||
|
||||
const getActionButtonColor = (color: string, isDisabled: boolean) => {
|
||||
if (isDisabled) {
|
||||
return "bg-gray-500/20 text-gray-400 border-gray-500/30 cursor-not-allowed"
|
||||
}
|
||||
|
||||
switch (color) {
|
||||
case 'green': return 'bg-green-500/20 hover:bg-green-500/30 text-green-300 border-green-500/30'
|
||||
case 'orange': return 'bg-orange-500/20 hover:bg-orange-500/30 text-orange-300 border-orange-500/30'
|
||||
case 'yellow': return 'bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-300 border-yellow-500/30'
|
||||
case 'red': return 'bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30'
|
||||
case 'blue': return 'bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30'
|
||||
default: return 'bg-gray-500/20 hover:bg-gray-500/30 text-gray-300 border-gray-500/30'
|
||||
}
|
||||
}
|
||||
|
||||
const handleSendRequest = () => {
|
||||
if (onSendRequest) {
|
||||
onSendRequest(organization.id, requestMessage)
|
||||
setRequestMessage('')
|
||||
setIsDialogOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemove = () => {
|
||||
if (onRemove) {
|
||||
onRemove(organization.id)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="glass-card p-4 w-full">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<OrganizationAvatar organization={organization} size="md" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-col space-y-2 mb-3">
|
||||
<h4 className="text-white font-medium text-lg leading-tight">
|
||||
{organization.name || organization.fullName}
|
||||
</h4>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Badge className={getTypeColor(organization.type)}>
|
||||
{getTypeLabel(organization.type)}
|
||||
</Badge>
|
||||
{organization.isCounterparty && (
|
||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/30">
|
||||
Уже добавлен
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-white/60 text-sm">ИНН: {organization.inn}</p>
|
||||
{organization.address && (
|
||||
<div className="flex items-center text-white/60 text-sm">
|
||||
<MapPin className="h-4 w-4 mr-2 flex-shrink-0" />
|
||||
<span className="truncate">{organization.address}</span>
|
||||
</div>
|
||||
)}
|
||||
{organization.phones && organization.phones.length > 0 && (
|
||||
<div className="flex items-center text-white/60 text-sm">
|
||||
<Phone className="h-4 w-4 mr-2 flex-shrink-0" />
|
||||
<span>{organization.phones[0].value}</span>
|
||||
</div>
|
||||
)}
|
||||
{organization.emails && organization.emails.length > 0 && (
|
||||
<div className="flex items-center text-white/60 text-sm">
|
||||
<Mail className="h-4 w-4 mr-2 flex-shrink-0" />
|
||||
<span className="truncate">{organization.emails[0].value}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center text-white/40 text-xs">
|
||||
<Calendar className="h-4 w-4 mr-2 flex-shrink-0" />
|
||||
<span>{showRemoveButton ? 'Добавлен' : 'Зарегистрирован'} {formatDate(organization.createdAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showRemoveButton ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleRemove}
|
||||
className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30 cursor-pointer w-full"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить из контрагентов
|
||||
</Button>
|
||||
) : (
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={organization.isCounterparty}
|
||||
className={`${getActionButtonColor(actionButtonColor, !!organization.isCounterparty)} w-full cursor-pointer`}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{organization.isCounterparty ? 'Уже добавлен' : actionButtonText}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="bg-gray-900/95 backdrop-blur border-white/10 text-white">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-white">
|
||||
Отправить заявку в контрагенты
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 bg-white/5 rounded-lg border border-white/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
<OrganizationAvatar organization={organization} size="sm" />
|
||||
<div>
|
||||
<h4 className="text-white font-medium">
|
||||
{organization.name || organization.fullName}
|
||||
</h4>
|
||||
<p className="text-white/60 text-sm">ИНН: {organization.inn}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Сообщение (необязательно)
|
||||
</label>
|
||||
<Input
|
||||
placeholder="Добавьте комментарий к заявке..."
|
||||
value={requestMessage}
|
||||
onChange={(e) => setRequestMessage(e.target.value)}
|
||||
className="glass-input text-white placeholder:text-white/40"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3 pt-4">
|
||||
<Button
|
||||
onClick={() => setIsDialogOpen(false)}
|
||||
variant="outline"
|
||||
className="flex-1 bg-white/5 hover:bg-white/10 text-white border-white/20 cursor-pointer"
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSendRequest}
|
||||
disabled={requestSending}
|
||||
className="flex-1 bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30 cursor-pointer"
|
||||
>
|
||||
{requestSending ? (
|
||||
"Отправка..."
|
||||
) : (
|
||||
<>
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
Отправить
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
431
src/components/market/organization-details-modal.tsx
Normal file
431
src/components/market/organization-details-modal.tsx
Normal file
@ -0,0 +1,431 @@
|
||||
"use client"
|
||||
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import {
|
||||
Building2,
|
||||
Phone,
|
||||
Mail,
|
||||
MapPin,
|
||||
Calendar,
|
||||
FileText,
|
||||
Users,
|
||||
CreditCard,
|
||||
Hash,
|
||||
User,
|
||||
Briefcase
|
||||
} from 'lucide-react'
|
||||
import { OrganizationAvatar } from './organization-avatar'
|
||||
|
||||
interface User {
|
||||
id: string
|
||||
avatar?: string | null
|
||||
phone: string
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
interface ApiKey {
|
||||
id: string
|
||||
marketplace: string
|
||||
isActive: boolean
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
interface Organization {
|
||||
id: string
|
||||
inn: string
|
||||
kpp?: string | null
|
||||
name?: string | null
|
||||
fullName?: string | null
|
||||
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||
address?: string | null
|
||||
addressFull?: string | null
|
||||
ogrn?: string | null
|
||||
ogrnDate?: string | null
|
||||
status?: string | null
|
||||
actualityDate?: string | null
|
||||
registrationDate?: string | null
|
||||
liquidationDate?: string | null
|
||||
managementName?: string | null
|
||||
managementPost?: string | null
|
||||
opfCode?: string | null
|
||||
opfFull?: string | null
|
||||
opfShort?: string | null
|
||||
okato?: string | null
|
||||
oktmo?: string | null
|
||||
okpo?: string | null
|
||||
okved?: string | null
|
||||
employeeCount?: number | null
|
||||
revenue?: string | null
|
||||
taxSystem?: string | null
|
||||
phones?: Array<{ value: string }> | null
|
||||
emails?: Array<{ value: string }> | null
|
||||
users?: User[]
|
||||
apiKeys?: ApiKey[]
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
interface OrganizationDetailsModalProps {
|
||||
organization: Organization | null
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
|
||||
function formatDate(dateString?: string | null): string {
|
||||
if (!dateString) return 'Не указана'
|
||||
|
||||
try {
|
||||
let date: Date
|
||||
|
||||
// Проверяем, является ли строка числом (Unix timestamp)
|
||||
if (/^\d+$/.test(dateString)) {
|
||||
// Если это Unix timestamp в миллисекундах
|
||||
const timestamp = parseInt(dateString, 10)
|
||||
date = new Date(timestamp)
|
||||
} else {
|
||||
// Обычная строка даты
|
||||
date = new Date(dateString)
|
||||
}
|
||||
|
||||
if (isNaN(date.getTime())) {
|
||||
return 'Не указана'
|
||||
}
|
||||
|
||||
return date.toLocaleDateString('ru-RU', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
} catch (error) {
|
||||
return 'Не указана'
|
||||
}
|
||||
}
|
||||
|
||||
function getTypeLabel(type: string): string {
|
||||
switch (type) {
|
||||
case 'FULFILLMENT':
|
||||
return 'Фулфилмент'
|
||||
case 'SELLER':
|
||||
return 'Селлер'
|
||||
case 'LOGIST':
|
||||
return 'Логистика'
|
||||
case 'WHOLESALE':
|
||||
return 'Оптовик'
|
||||
default:
|
||||
return type
|
||||
}
|
||||
}
|
||||
|
||||
function getTypeColor(type: string): string {
|
||||
switch (type) {
|
||||
case 'FULFILLMENT':
|
||||
return 'bg-blue-500/20 text-blue-300 border-blue-500/30'
|
||||
case 'SELLER':
|
||||
return 'bg-green-500/20 text-green-300 border-green-500/30'
|
||||
case 'LOGIST':
|
||||
return 'bg-orange-500/20 text-orange-300 border-orange-500/30'
|
||||
case 'WHOLESALE':
|
||||
return 'bg-purple-500/20 text-purple-300 border-purple-500/30'
|
||||
default:
|
||||
return 'bg-gray-500/20 text-gray-300 border-gray-500/30'
|
||||
}
|
||||
}
|
||||
|
||||
export function OrganizationDetailsModal({ organization, open, onOpenChange }: OrganizationDetailsModalProps) {
|
||||
if (!organization) return null
|
||||
|
||||
const displayName = organization.name || organization.fullName || 'Неизвестная организация'
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto bg-black/90 backdrop-blur-xl border border-white/20">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-4 text-white">
|
||||
<OrganizationAvatar organization={organization} size="lg" />
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">{displayName}</h2>
|
||||
<Badge className={getTypeColor(organization.type)}>
|
||||
{getTypeLabel(organization.type)}
|
||||
</Badge>
|
||||
</div>
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Основная информация */}
|
||||
<Card className="glass-card p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center">
|
||||
<Building2 className="h-5 w-5 mr-2 text-blue-400" />
|
||||
Основная информация
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">ИНН:</span>
|
||||
<span className="text-white font-mono">{organization.inn}</span>
|
||||
</div>
|
||||
|
||||
{organization.kpp && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">КПП:</span>
|
||||
<span className="text-white font-mono">{organization.kpp}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{organization.ogrn && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">ОГРН:</span>
|
||||
<span className="text-white font-mono">{organization.ogrn}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{organization.status && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Статус:</span>
|
||||
<span className="text-white">{organization.status}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Дата регистрации:</span>
|
||||
<span className="text-white">{formatDate(organization.registrationDate)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Контактная информация */}
|
||||
<Card className="glass-card p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center">
|
||||
<Phone className="h-5 w-5 mr-2 text-green-400" />
|
||||
Контакты
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{organization.phones && organization.phones.length > 0 && (
|
||||
<div>
|
||||
<div className="text-white/60 text-sm mb-2">Телефоны:</div>
|
||||
{organization.phones.map((phone, index) => (
|
||||
<div key={index} className="flex items-center text-white">
|
||||
<Phone className="h-3 w-3 mr-2 text-green-400" />
|
||||
{phone.value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{organization.emails && organization.emails.length > 0 && (
|
||||
<div>
|
||||
<div className="text-white/60 text-sm mb-2">Email:</div>
|
||||
{organization.emails.map((email, index) => (
|
||||
<div key={index} className="flex items-center text-white">
|
||||
<Mail className="h-3 w-3 mr-2 text-blue-400" />
|
||||
{email.value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{organization.address && (
|
||||
<div>
|
||||
<div className="text-white/60 text-sm mb-2">Адрес:</div>
|
||||
<div className="flex items-start text-white">
|
||||
<MapPin className="h-3 w-3 mr-2 mt-1 text-orange-400 flex-shrink-0" />
|
||||
<span className="text-sm">{organization.addressFull || organization.address}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Руководство */}
|
||||
{organization.managementName && (
|
||||
<Card className="glass-card p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center">
|
||||
<User className="h-5 w-5 mr-2 text-purple-400" />
|
||||
Руководство
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Руководитель:</span>
|
||||
<span className="text-white">{organization.managementName}</span>
|
||||
</div>
|
||||
|
||||
{organization.managementPost && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Должность:</span>
|
||||
<span className="text-white">{organization.managementPost}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Организационно-правовая форма */}
|
||||
{organization.opfFull && (
|
||||
<Card className="glass-card p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center">
|
||||
<FileText className="h-5 w-5 mr-2 text-yellow-400" />
|
||||
ОПФ
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Полное название:</span>
|
||||
<span className="text-white">{organization.opfFull}</span>
|
||||
</div>
|
||||
|
||||
{organization.opfShort && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Краткое название:</span>
|
||||
<span className="text-white">{organization.opfShort}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{organization.opfCode && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Код ОКОПФ:</span>
|
||||
<span className="text-white font-mono">{organization.opfCode}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Коды статистики */}
|
||||
{(organization.okato || organization.oktmo || organization.okpo || organization.okved) && (
|
||||
<Card className="glass-card p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center">
|
||||
<Hash className="h-5 w-5 mr-2 text-cyan-400" />
|
||||
Коды статистики
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{organization.okato && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">ОКАТО:</span>
|
||||
<span className="text-white font-mono">{organization.okato}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{organization.oktmo && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">ОКТМО:</span>
|
||||
<span className="text-white font-mono">{organization.oktmo}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{organization.okpo && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">ОКПО:</span>
|
||||
<span className="text-white font-mono">{organization.okpo}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{organization.okved && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Основной ОКВЭД:</span>
|
||||
<span className="text-white font-mono">{organization.okved}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Финансовая информация */}
|
||||
{(organization.employeeCount || organization.revenue || organization.taxSystem) && (
|
||||
<Card className="glass-card p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center">
|
||||
<CreditCard className="h-5 w-5 mr-2 text-emerald-400" />
|
||||
Финансовая информация
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{organization.employeeCount && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Сотрудников:</span>
|
||||
<span className="text-white">{organization.employeeCount}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{organization.revenue && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Выручка:</span>
|
||||
<span className="text-white">{organization.revenue}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{organization.taxSystem && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Налоговая система:</span>
|
||||
<span className="text-white">{organization.taxSystem}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Пользователи */}
|
||||
{organization.users && organization.users.length > 0 && (
|
||||
<Card className="glass-card p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center">
|
||||
<Users className="h-5 w-5 mr-2 text-indigo-400" />
|
||||
Пользователи ({organization.users.length})
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{organization.users.map((user, index) => (
|
||||
<div key={user.id} className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<OrganizationAvatar
|
||||
organization={{
|
||||
id: user.id,
|
||||
users: [user]
|
||||
}}
|
||||
size="sm"
|
||||
/>
|
||||
<span className="text-white">{user.phone}</span>
|
||||
</div>
|
||||
<span className="text-white/60 text-sm">
|
||||
{formatDate(user.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* API ключи */}
|
||||
{organization.apiKeys && organization.apiKeys.length > 0 && (
|
||||
<Card className="glass-card p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center">
|
||||
<Briefcase className="h-5 w-5 mr-2 text-pink-400" />
|
||||
API ключи маркетплейсов
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{organization.apiKeys.map((apiKey, index) => (
|
||||
<div key={apiKey.id} className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Badge className={apiKey.isActive ? 'bg-green-500/20 text-green-300 border-green-500/30' : 'bg-red-500/20 text-red-300 border-red-500/30'}>
|
||||
{apiKey.marketplace}
|
||||
</Badge>
|
||||
<span className="text-white/60 text-sm">
|
||||
{apiKey.isActive ? 'Активен' : 'Неактивен'}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white/60 text-sm">
|
||||
{formatDate(apiKey.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
66
src/components/ui/alert.tsx
Normal file
66
src/components/ui/alert.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn(
|
||||
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription }
|
||||
53
src/components/ui/avatar.tsx
Normal file
53
src/components/ui/avatar.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Avatar({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
className={cn(
|
||||
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarImage({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
data-slot="avatar-image"
|
||||
className={cn("aspect-square size-full", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarFallback({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
"bg-muted flex size-full items-center justify-center rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback }
|
||||
46
src/components/ui/badge.tsx
Normal file
46
src/components/ui/badge.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
61
src/components/ui/button.tsx
Normal file
61
src/components/ui/button.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
glass: "glass-button text-white font-semibold",
|
||||
"glass-secondary": "glass-secondary text-white hover:text-white/90",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
92
src/components/ui/card.tsx
Normal file
92
src/components/ui/card.tsx
Normal file
@ -0,0 +1,92 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
32
src/components/ui/checkbox.tsx
Normal file
32
src/components/ui/checkbox.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="flex items-center justify-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon className="size-3.5" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
143
src/components/ui/dialog.tsx
Normal file
143
src/components/ui/dialog.tsx
Normal file
@ -0,0 +1,143 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
35
src/components/ui/input.tsx
Normal file
35
src/components/ui/input.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function GlassInput({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"glass-input text-white placeholder:text-white/60 selection:bg-purple-500/30 flex h-11 w-full min-w-0 rounded-lg px-4 py-3 text-base font-medium outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input, GlassInput }
|
||||
24
src/components/ui/label.tsx
Normal file
24
src/components/ui/label.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
108
src/components/ui/phone-input.tsx
Normal file
108
src/components/ui/phone-input.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { IMaskInput } from "react-imask"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export interface PhoneInputProps
|
||||
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
|
||||
onChange?: (value: string) => void
|
||||
value?: string
|
||||
}
|
||||
|
||||
const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
|
||||
({ className, onChange, value, ...props }, ref) => {
|
||||
const handleAccept = (value: string) => {
|
||||
onChange?.(value)
|
||||
}
|
||||
|
||||
// Фильтруем пропсы, которые могут конфликтовать с IMaskInput
|
||||
const { min, max, step, ...filteredProps } = props
|
||||
|
||||
return (
|
||||
<IMaskInput
|
||||
mask="+7 (000) 000-00-00"
|
||||
value={value}
|
||||
onAccept={handleAccept}
|
||||
inputRef={ref}
|
||||
{...filteredProps}
|
||||
className={cn(
|
||||
"flex h-12 w-full rounded-lg border border-input bg-background px-4 py-3 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"transition-all duration-200 hover:border-primary/50 focus:border-primary",
|
||||
"cursor-pointer", // Добавляем cursor pointer в соответствии с предпочтениями пользователя
|
||||
className
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
PhoneInput.displayName = "PhoneInput"
|
||||
|
||||
const GlassPhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
|
||||
({ className, onChange, value, ...props }, ref) => {
|
||||
const [isFocused, setIsFocused] = React.useState(false)
|
||||
|
||||
const handleAccept = (value: string) => {
|
||||
onChange?.(value)
|
||||
}
|
||||
|
||||
const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||
setIsFocused(true)
|
||||
props.onFocus?.(e)
|
||||
}
|
||||
|
||||
const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||
setIsFocused(false)
|
||||
props.onBlur?.(e)
|
||||
}
|
||||
|
||||
// Проверяем валидность номера
|
||||
const isValid = value ? value.replace(/\D/g, '').length === 11 : false
|
||||
const isEmpty = !value || value.replace(/\D/g, '').length === 0
|
||||
|
||||
// Фильтруем пропсы, которые могут конфликтовать с IMaskInput
|
||||
const { min, max, step, onFocus, onBlur, ...filteredProps } = props
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<IMaskInput
|
||||
mask="+7 (000) 000-00-00"
|
||||
value={value}
|
||||
onAccept={handleAccept}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
inputRef={ref}
|
||||
{...filteredProps}
|
||||
className={cn(
|
||||
"glass-input text-white placeholder:text-white/50 selection:bg-purple-500/30 flex h-12 w-full rounded-lg px-4 py-3 text-base font-medium outline-none cursor-pointer transition-all duration-300",
|
||||
isFocused && "ring-2 ring-purple-400/50 border-purple-400/30",
|
||||
isValid && !isFocused && "border-green-400/30 bg-green-500/5",
|
||||
!isEmpty && !isValid && !isFocused && "border-yellow-400/30 bg-yellow-500/5",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Индикатор валидности */}
|
||||
<div className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
|
||||
{isValid && (
|
||||
<div className="w-5 h-5 rounded-full bg-green-500/20 border border-green-400/30 flex items-center justify-center">
|
||||
<svg className="w-3 h-3 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
{!isEmpty && !isValid && (
|
||||
<div className="w-5 h-5 rounded-full bg-yellow-500/20 border border-yellow-400/30 flex items-center justify-center">
|
||||
<svg className="w-3 h-3 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.464 0L4.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
GlassPhoneInput.displayName = "GlassPhoneInput"
|
||||
|
||||
export { PhoneInput, GlassPhoneInput }
|
||||
31
src/components/ui/progress.tsx
Normal file
31
src/components/ui/progress.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Progress({
|
||||
className,
|
||||
value,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
||||
return (
|
||||
<ProgressPrimitive.Root
|
||||
data-slot="progress"
|
||||
className={cn(
|
||||
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
data-slot="progress-indicator"
|
||||
className="bg-primary h-full w-full flex-1 transition-all"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Progress }
|
||||
185
src/components/ui/select.tsx
Normal file
185
src/components/ui/select.tsx
Normal file
@ -0,0 +1,185 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="size-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "popper",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
28
src/components/ui/separator.tsx
Normal file
28
src/components/ui/separator.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
13
src/components/ui/skeleton.tsx
Normal file
13
src/components/ui/skeleton.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("bg-accent animate-pulse rounded-md", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
63
src/components/ui/slider.tsx
Normal file
63
src/components/ui/slider.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Slider({
|
||||
className,
|
||||
defaultValue,
|
||||
value,
|
||||
min = 0,
|
||||
max = 100,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
|
||||
const _values = React.useMemo(
|
||||
() =>
|
||||
Array.isArray(value)
|
||||
? value
|
||||
: Array.isArray(defaultValue)
|
||||
? defaultValue
|
||||
: [min, max],
|
||||
[value, defaultValue, min, max]
|
||||
)
|
||||
|
||||
return (
|
||||
<SliderPrimitive.Root
|
||||
data-slot="slider"
|
||||
defaultValue={defaultValue}
|
||||
value={value}
|
||||
min={min}
|
||||
max={max}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track
|
||||
data-slot="slider-track"
|
||||
className={cn(
|
||||
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
|
||||
)}
|
||||
>
|
||||
<SliderPrimitive.Range
|
||||
data-slot="slider-range"
|
||||
className={cn(
|
||||
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
|
||||
)}
|
||||
/>
|
||||
</SliderPrimitive.Track>
|
||||
{Array.from({ length: _values.length }, (_, index) => (
|
||||
<SliderPrimitive.Thumb
|
||||
data-slot="slider-thumb"
|
||||
key={index}
|
||||
className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
||||
/>
|
||||
))}
|
||||
</SliderPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Slider }
|
||||
25
src/components/ui/sonner.tsx
Normal file
25
src/components/ui/sonner.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
"use client"
|
||||
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, ToasterProps } from "sonner"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
31
src/components/ui/switch.tsx
Normal file
31
src/components/ui/switch.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitive from "@radix-ui/react-switch"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Switch({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
|
||||
return (
|
||||
<SwitchPrimitive.Root
|
||||
data-slot="switch"
|
||||
className={cn(
|
||||
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SwitchPrimitive.Thumb
|
||||
data-slot="switch-thumb"
|
||||
className={cn(
|
||||
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Switch }
|
||||
66
src/components/ui/tabs.tsx
Normal file
66
src/components/ui/tabs.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
358
src/graphql/mutations.ts
Normal file
358
src/graphql/mutations.ts
Normal file
@ -0,0 +1,358 @@
|
||||
import { gql } from 'graphql-tag'
|
||||
|
||||
export const SEND_SMS_CODE = gql`
|
||||
mutation SendSmsCode($phone: String!) {
|
||||
sendSmsCode(phone: $phone) {
|
||||
success
|
||||
message
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const VERIFY_SMS_CODE = gql`
|
||||
mutation VerifySmsCode($phone: String!, $code: String!) {
|
||||
verifySmsCode(phone: $phone, code: $code) {
|
||||
success
|
||||
message
|
||||
token
|
||||
user {
|
||||
id
|
||||
phone
|
||||
organization {
|
||||
id
|
||||
inn
|
||||
kpp
|
||||
name
|
||||
fullName
|
||||
address
|
||||
addressFull
|
||||
ogrn
|
||||
ogrnDate
|
||||
type
|
||||
status
|
||||
actualityDate
|
||||
registrationDate
|
||||
liquidationDate
|
||||
managementName
|
||||
managementPost
|
||||
opfCode
|
||||
opfFull
|
||||
opfShort
|
||||
okato
|
||||
oktmo
|
||||
okpo
|
||||
okved
|
||||
employeeCount
|
||||
revenue
|
||||
taxSystem
|
||||
phones
|
||||
emails
|
||||
apiKeys {
|
||||
id
|
||||
marketplace
|
||||
isActive
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const VERIFY_INN = gql`
|
||||
mutation VerifyInn($inn: String!) {
|
||||
verifyInn(inn: $inn) {
|
||||
success
|
||||
message
|
||||
organization {
|
||||
name
|
||||
fullName
|
||||
address
|
||||
isActive
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const REGISTER_FULFILLMENT_ORGANIZATION = gql`
|
||||
mutation RegisterFulfillmentOrganization($input: FulfillmentRegistrationInput!) {
|
||||
registerFulfillmentOrganization(input: $input) {
|
||||
success
|
||||
message
|
||||
user {
|
||||
id
|
||||
phone
|
||||
organization {
|
||||
id
|
||||
inn
|
||||
kpp
|
||||
name
|
||||
fullName
|
||||
address
|
||||
addressFull
|
||||
ogrn
|
||||
ogrnDate
|
||||
type
|
||||
status
|
||||
actualityDate
|
||||
registrationDate
|
||||
liquidationDate
|
||||
managementName
|
||||
managementPost
|
||||
opfCode
|
||||
opfFull
|
||||
opfShort
|
||||
okato
|
||||
oktmo
|
||||
okpo
|
||||
okved
|
||||
employeeCount
|
||||
revenue
|
||||
taxSystem
|
||||
phones
|
||||
emails
|
||||
apiKeys {
|
||||
id
|
||||
marketplace
|
||||
isActive
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const REGISTER_SELLER_ORGANIZATION = gql`
|
||||
mutation RegisterSellerOrganization($input: SellerRegistrationInput!) {
|
||||
registerSellerOrganization(input: $input) {
|
||||
success
|
||||
message
|
||||
user {
|
||||
id
|
||||
phone
|
||||
organization {
|
||||
id
|
||||
inn
|
||||
kpp
|
||||
name
|
||||
fullName
|
||||
address
|
||||
addressFull
|
||||
ogrn
|
||||
ogrnDate
|
||||
type
|
||||
status
|
||||
actualityDate
|
||||
registrationDate
|
||||
liquidationDate
|
||||
managementName
|
||||
managementPost
|
||||
opfCode
|
||||
opfFull
|
||||
opfShort
|
||||
okato
|
||||
oktmo
|
||||
okpo
|
||||
okved
|
||||
employeeCount
|
||||
revenue
|
||||
taxSystem
|
||||
phones
|
||||
emails
|
||||
apiKeys {
|
||||
id
|
||||
marketplace
|
||||
isActive
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ADD_MARKETPLACE_API_KEY = gql`
|
||||
mutation AddMarketplaceApiKey($input: MarketplaceApiKeyInput!) {
|
||||
addMarketplaceApiKey(input: $input) {
|
||||
success
|
||||
message
|
||||
apiKey {
|
||||
id
|
||||
marketplace
|
||||
isActive
|
||||
validationData
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const REMOVE_MARKETPLACE_API_KEY = gql`
|
||||
mutation RemoveMarketplaceApiKey($marketplace: MarketplaceType!) {
|
||||
removeMarketplaceApiKey(marketplace: $marketplace)
|
||||
}
|
||||
`
|
||||
|
||||
export const UPDATE_USER_PROFILE = gql`
|
||||
mutation UpdateUserProfile($input: UpdateUserProfileInput!) {
|
||||
updateUserProfile(input: $input) {
|
||||
success
|
||||
message
|
||||
user {
|
||||
id
|
||||
phone
|
||||
organization {
|
||||
id
|
||||
inn
|
||||
kpp
|
||||
name
|
||||
fullName
|
||||
address
|
||||
addressFull
|
||||
ogrn
|
||||
ogrnDate
|
||||
type
|
||||
status
|
||||
actualityDate
|
||||
registrationDate
|
||||
liquidationDate
|
||||
managementName
|
||||
managementPost
|
||||
opfCode
|
||||
opfFull
|
||||
opfShort
|
||||
okato
|
||||
oktmo
|
||||
okpo
|
||||
okved
|
||||
employeeCount
|
||||
revenue
|
||||
taxSystem
|
||||
phones
|
||||
emails
|
||||
apiKeys {
|
||||
id
|
||||
marketplace
|
||||
isActive
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const UPDATE_ORGANIZATION_BY_INN = gql`
|
||||
mutation UpdateOrganizationByInn($inn: String!) {
|
||||
updateOrganizationByInn(inn: $inn) {
|
||||
success
|
||||
message
|
||||
user {
|
||||
id
|
||||
phone
|
||||
organization {
|
||||
id
|
||||
inn
|
||||
kpp
|
||||
name
|
||||
fullName
|
||||
address
|
||||
addressFull
|
||||
ogrn
|
||||
ogrnDate
|
||||
type
|
||||
status
|
||||
actualityDate
|
||||
registrationDate
|
||||
liquidationDate
|
||||
managementName
|
||||
managementPost
|
||||
opfCode
|
||||
opfFull
|
||||
opfShort
|
||||
okato
|
||||
oktmo
|
||||
okpo
|
||||
okved
|
||||
employeeCount
|
||||
revenue
|
||||
taxSystem
|
||||
phones
|
||||
emails
|
||||
apiKeys {
|
||||
id
|
||||
marketplace
|
||||
isActive
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
// Мутации для контрагентов
|
||||
export const SEND_COUNTERPARTY_REQUEST = gql`
|
||||
mutation SendCounterpartyRequest($organizationId: ID!, $message: String) {
|
||||
sendCounterpartyRequest(organizationId: $organizationId, message: $message) {
|
||||
success
|
||||
message
|
||||
request {
|
||||
id
|
||||
status
|
||||
message
|
||||
createdAt
|
||||
sender {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
type
|
||||
}
|
||||
receiver {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const RESPOND_TO_COUNTERPARTY_REQUEST = gql`
|
||||
mutation RespondToCounterpartyRequest($requestId: ID!, $accept: Boolean!) {
|
||||
respondToCounterpartyRequest(requestId: $requestId, accept: $accept) {
|
||||
success
|
||||
message
|
||||
request {
|
||||
id
|
||||
status
|
||||
message
|
||||
createdAt
|
||||
sender {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
type
|
||||
}
|
||||
receiver {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const CANCEL_COUNTERPARTY_REQUEST = gql`
|
||||
mutation CancelCounterpartyRequest($requestId: ID!) {
|
||||
cancelCounterpartyRequest(requestId: $requestId)
|
||||
}
|
||||
`
|
||||
|
||||
export const REMOVE_COUNTERPARTY = gql`
|
||||
mutation RemoveCounterparty($organizationId: ID!) {
|
||||
removeCounterparty(organizationId: $organizationId)
|
||||
}
|
||||
`
|
||||
169
src/graphql/queries.ts
Normal file
169
src/graphql/queries.ts
Normal file
@ -0,0 +1,169 @@
|
||||
import { gql } from 'graphql-tag'
|
||||
|
||||
export const GET_ME = gql`
|
||||
query GetMe {
|
||||
me {
|
||||
id
|
||||
phone
|
||||
avatar
|
||||
createdAt
|
||||
organization {
|
||||
id
|
||||
inn
|
||||
kpp
|
||||
name
|
||||
fullName
|
||||
address
|
||||
addressFull
|
||||
ogrn
|
||||
ogrnDate
|
||||
type
|
||||
status
|
||||
actualityDate
|
||||
registrationDate
|
||||
liquidationDate
|
||||
managementName
|
||||
managementPost
|
||||
opfCode
|
||||
opfFull
|
||||
opfShort
|
||||
okato
|
||||
oktmo
|
||||
okpo
|
||||
okved
|
||||
employeeCount
|
||||
revenue
|
||||
taxSystem
|
||||
phones
|
||||
emails
|
||||
apiKeys {
|
||||
id
|
||||
marketplace
|
||||
isActive
|
||||
validationData
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
// Запросы для контрагентов
|
||||
export const SEARCH_ORGANIZATIONS = gql`
|
||||
query SearchOrganizations($type: OrganizationType, $search: String) {
|
||||
searchOrganizations(type: $type, search: $search) {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
type
|
||||
address
|
||||
phones
|
||||
emails
|
||||
createdAt
|
||||
isCounterparty
|
||||
users {
|
||||
id
|
||||
avatar
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const GET_MY_COUNTERPARTIES = gql`
|
||||
query GetMyCounterparties {
|
||||
myCounterparties {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
type
|
||||
address
|
||||
phones
|
||||
emails
|
||||
createdAt
|
||||
users {
|
||||
id
|
||||
avatar
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const GET_INCOMING_REQUESTS = gql`
|
||||
query GetIncomingRequests {
|
||||
incomingRequests {
|
||||
id
|
||||
status
|
||||
message
|
||||
createdAt
|
||||
sender {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
type
|
||||
address
|
||||
phones
|
||||
emails
|
||||
}
|
||||
receiver {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const GET_OUTGOING_REQUESTS = gql`
|
||||
query GetOutgoingRequests {
|
||||
outgoingRequests {
|
||||
id
|
||||
status
|
||||
message
|
||||
createdAt
|
||||
sender {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
type
|
||||
}
|
||||
receiver {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
type
|
||||
address
|
||||
phones
|
||||
emails
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const GET_ORGANIZATION = gql`
|
||||
query GetOrganization($id: ID!) {
|
||||
organization(id: $id) {
|
||||
id
|
||||
inn
|
||||
name
|
||||
fullName
|
||||
address
|
||||
type
|
||||
apiKeys {
|
||||
id
|
||||
marketplace
|
||||
isActive
|
||||
validationData
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
`
|
||||
1363
src/graphql/resolvers.ts
Normal file
1363
src/graphql/resolvers.ts
Normal file
@ -0,0 +1,1363 @@
|
||||
import jwt from 'jsonwebtoken'
|
||||
import { GraphQLError } from 'graphql'
|
||||
import { GraphQLScalarType, Kind } from 'graphql'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { SmsService } from '@/services/sms-service'
|
||||
import { DaDataService } from '@/services/dadata-service'
|
||||
import { MarketplaceService } from '@/services/marketplace-service'
|
||||
import { Prisma } from '@prisma/client'
|
||||
|
||||
// Сервисы
|
||||
const smsService = new SmsService()
|
||||
const dadataService = new DaDataService()
|
||||
const marketplaceService = new MarketplaceService()
|
||||
|
||||
// Интерфейсы для типизации
|
||||
interface Context {
|
||||
user?: {
|
||||
id: string
|
||||
phone: string
|
||||
}
|
||||
}
|
||||
|
||||
interface AuthTokenPayload {
|
||||
userId: string
|
||||
phone: string
|
||||
}
|
||||
|
||||
// JWT утилиты
|
||||
const generateToken = (payload: AuthTokenPayload): string => {
|
||||
return jwt.sign(payload, process.env.JWT_SECRET!, { expiresIn: '30d' })
|
||||
}
|
||||
|
||||
const verifyToken = (token: string): AuthTokenPayload => {
|
||||
try {
|
||||
return jwt.verify(token, process.env.JWT_SECRET!) as AuthTokenPayload
|
||||
} catch (error) {
|
||||
throw new GraphQLError('Недействительный токен', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Скалярный тип для JSON
|
||||
const JSONScalar = new GraphQLScalarType({
|
||||
name: 'JSON',
|
||||
description: 'JSON custom scalar type',
|
||||
serialize(value: unknown) {
|
||||
return value // значение отправляется клиенту
|
||||
},
|
||||
parseValue(value: unknown) {
|
||||
return value // значение получено от клиента
|
||||
},
|
||||
parseLiteral(ast) {
|
||||
switch (ast.kind) {
|
||||
case Kind.STRING:
|
||||
case Kind.BOOLEAN:
|
||||
return ast.value
|
||||
case Kind.INT:
|
||||
case Kind.FLOAT:
|
||||
return parseFloat(ast.value)
|
||||
case Kind.OBJECT: {
|
||||
const value = Object.create(null)
|
||||
ast.fields.forEach(field => {
|
||||
value[field.name.value] = parseLiteral(field.value)
|
||||
})
|
||||
return value
|
||||
}
|
||||
case Kind.LIST:
|
||||
return ast.values.map(parseLiteral)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function parseLiteral(ast: unknown): unknown {
|
||||
const astNode = ast as { kind: string; value?: unknown; fields?: unknown[]; values?: unknown[] }
|
||||
|
||||
switch (astNode.kind) {
|
||||
case Kind.STRING:
|
||||
case Kind.BOOLEAN:
|
||||
return astNode.value
|
||||
case Kind.INT:
|
||||
case Kind.FLOAT:
|
||||
return parseFloat(astNode.value as string)
|
||||
case Kind.OBJECT: {
|
||||
const value = Object.create(null)
|
||||
if (astNode.fields) {
|
||||
astNode.fields.forEach((field: unknown) => {
|
||||
const fieldNode = field as { name: { value: string }; value: unknown }
|
||||
value[fieldNode.name.value] = parseLiteral(fieldNode.value)
|
||||
})
|
||||
}
|
||||
return value
|
||||
}
|
||||
case Kind.LIST:
|
||||
return ast.values.map(parseLiteral)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export const resolvers = {
|
||||
JSON: JSONScalar,
|
||||
|
||||
Query: {
|
||||
me: async (_: unknown, __: unknown, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
return await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: {
|
||||
organization: {
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
organization: async (_: unknown, args: { id: string }, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const organization = await prisma.organization.findUnique({
|
||||
where: { id: args.id },
|
||||
include: {
|
||||
apiKeys: true,
|
||||
users: true
|
||||
}
|
||||
})
|
||||
|
||||
if (!organization) {
|
||||
throw new GraphQLError('Организация не найдена')
|
||||
}
|
||||
|
||||
// Проверяем, что пользователь имеет доступ к этой организации
|
||||
const hasAccess = organization.users.some(user => user.id === context.user!.id)
|
||||
if (!hasAccess) {
|
||||
throw new GraphQLError('Нет доступа к этой организации', {
|
||||
extensions: { code: 'FORBIDDEN' }
|
||||
})
|
||||
}
|
||||
|
||||
return organization
|
||||
},
|
||||
|
||||
// Поиск организаций по типу для добавления в контрагенты
|
||||
searchOrganizations: async (_: unknown, args: { type?: string; search?: string }, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
// Получаем текущую организацию пользователя
|
||||
const currentUser = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: { organization: true }
|
||||
})
|
||||
|
||||
if (!currentUser?.organization) {
|
||||
throw new GraphQLError('У пользователя нет организации')
|
||||
}
|
||||
|
||||
// Получаем уже существующих контрагентов для добавления флага
|
||||
const existingCounterparties = await prisma.counterparty.findMany({
|
||||
where: { organizationId: currentUser.organization.id },
|
||||
select: { counterpartyId: true }
|
||||
})
|
||||
|
||||
const existingCounterpartyIds = existingCounterparties.map(c => c.counterpartyId)
|
||||
|
||||
const where: any = {
|
||||
id: { not: currentUser.organization.id } // Исключаем только собственную организацию
|
||||
}
|
||||
|
||||
if (args.type) {
|
||||
where.type = args.type
|
||||
}
|
||||
|
||||
if (args.search) {
|
||||
where.OR = [
|
||||
{ name: { contains: args.search, mode: 'insensitive' } },
|
||||
{ fullName: { contains: args.search, mode: 'insensitive' } },
|
||||
{ inn: { contains: args.search } }
|
||||
]
|
||||
}
|
||||
|
||||
const organizations = await prisma.organization.findMany({
|
||||
where,
|
||||
take: 50, // Ограничиваем количество результатов
|
||||
orderBy: { createdAt: 'desc' },
|
||||
include: {
|
||||
users: true,
|
||||
apiKeys: true
|
||||
}
|
||||
})
|
||||
|
||||
// Добавляем флаг isCounterparty к каждой организации
|
||||
return organizations.map(org => ({
|
||||
...org,
|
||||
isCounterparty: existingCounterpartyIds.includes(org.id)
|
||||
}))
|
||||
},
|
||||
|
||||
// Мои контрагенты
|
||||
myCounterparties: async (_: unknown, __: unknown, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const currentUser = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: { organization: true }
|
||||
})
|
||||
|
||||
if (!currentUser?.organization) {
|
||||
throw new GraphQLError('У пользователя нет организации')
|
||||
}
|
||||
|
||||
const counterparties = await prisma.counterparty.findMany({
|
||||
where: { organizationId: currentUser.organization.id },
|
||||
include: {
|
||||
counterparty: {
|
||||
include: {
|
||||
users: true,
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return counterparties.map(c => c.counterparty)
|
||||
},
|
||||
|
||||
// Входящие заявки
|
||||
incomingRequests: async (_: unknown, __: unknown, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const currentUser = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: { organization: true }
|
||||
})
|
||||
|
||||
if (!currentUser?.organization) {
|
||||
throw new GraphQLError('У пользователя нет организации')
|
||||
}
|
||||
|
||||
return await prisma.counterpartyRequest.findMany({
|
||||
where: {
|
||||
receiverId: currentUser.organization.id,
|
||||
status: 'PENDING'
|
||||
},
|
||||
include: {
|
||||
sender: {
|
||||
include: {
|
||||
users: true,
|
||||
apiKeys: true
|
||||
}
|
||||
},
|
||||
receiver: {
|
||||
include: {
|
||||
users: true,
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
},
|
||||
orderBy: { createdAt: 'desc' }
|
||||
})
|
||||
},
|
||||
|
||||
// Исходящие заявки
|
||||
outgoingRequests: async (_: unknown, __: unknown, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const currentUser = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: { organization: true }
|
||||
})
|
||||
|
||||
if (!currentUser?.organization) {
|
||||
throw new GraphQLError('У пользователя нет организации')
|
||||
}
|
||||
|
||||
return await prisma.counterpartyRequest.findMany({
|
||||
where: {
|
||||
senderId: currentUser.organization.id,
|
||||
status: { in: ['PENDING', 'REJECTED'] }
|
||||
},
|
||||
include: {
|
||||
sender: {
|
||||
include: {
|
||||
users: true,
|
||||
apiKeys: true
|
||||
}
|
||||
},
|
||||
receiver: {
|
||||
include: {
|
||||
users: true,
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
},
|
||||
orderBy: { createdAt: 'desc' }
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
Mutation: {
|
||||
sendSmsCode: async (_: unknown, args: { phone: string }) => {
|
||||
const result = await smsService.sendSmsCode(args.phone)
|
||||
return {
|
||||
success: result.success,
|
||||
message: result.message || 'SMS код отправлен'
|
||||
}
|
||||
},
|
||||
|
||||
verifySmsCode: async (_: unknown, args: { phone: string; code: string }) => {
|
||||
const verificationResult = await smsService.verifySmsCode(args.phone, args.code)
|
||||
|
||||
if (!verificationResult.success) {
|
||||
return {
|
||||
success: false,
|
||||
message: verificationResult.message || 'Неверный код'
|
||||
}
|
||||
}
|
||||
|
||||
// Найти или создать пользователя
|
||||
const formattedPhone = args.phone.replace(/\D/g, '')
|
||||
let user = await prisma.user.findUnique({
|
||||
where: { phone: formattedPhone },
|
||||
include: {
|
||||
organization: {
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (!user) {
|
||||
user = await prisma.user.create({
|
||||
data: {
|
||||
phone: formattedPhone
|
||||
},
|
||||
include: {
|
||||
organization: {
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const token = generateToken({
|
||||
userId: user.id,
|
||||
phone: user.phone
|
||||
})
|
||||
|
||||
console.log('verifySmsCode - Generated token:', token ? `${token.substring(0, 20)}...` : 'No token')
|
||||
console.log('verifySmsCode - Full token:', token)
|
||||
console.log('verifySmsCode - User object:', { id: user.id, phone: user.phone })
|
||||
|
||||
const result = {
|
||||
success: true,
|
||||
message: 'Авторизация успешна',
|
||||
token,
|
||||
user
|
||||
}
|
||||
|
||||
console.log('verifySmsCode - Returning result:', {
|
||||
success: result.success,
|
||||
hasToken: !!result.token,
|
||||
hasUser: !!result.user,
|
||||
message: result.message,
|
||||
tokenPreview: result.token ? `${result.token.substring(0, 20)}...` : 'No token in result'
|
||||
})
|
||||
|
||||
return result
|
||||
},
|
||||
|
||||
verifyInn: async (_: unknown, args: { inn: string }) => {
|
||||
// Валидируем ИНН
|
||||
if (!dadataService.validateInn(args.inn)) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Неверный формат ИНН'
|
||||
}
|
||||
}
|
||||
|
||||
// Получаем данные организации из DaData
|
||||
const organizationData = await dadataService.getOrganizationByInn(args.inn)
|
||||
if (!organizationData) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Организация с указанным ИНН не найдена'
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'ИНН найден',
|
||||
organization: {
|
||||
name: organizationData.name,
|
||||
fullName: organizationData.fullName,
|
||||
address: organizationData.address,
|
||||
isActive: organizationData.isActive
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
registerFulfillmentOrganization: async (
|
||||
_: unknown,
|
||||
args: { input: { phone: string; inn: string } },
|
||||
context: Context
|
||||
) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const { inn } = args.input
|
||||
|
||||
// Валидируем ИНН
|
||||
if (!dadataService.validateInn(inn)) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Неверный формат ИНН'
|
||||
}
|
||||
}
|
||||
|
||||
// Получаем данные организации из DaData
|
||||
const organizationData = await dadataService.getOrganizationByInn(inn)
|
||||
if (!organizationData) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Организация с указанным ИНН не найдена'
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
// Проверяем, что организация еще не зарегистрирована
|
||||
const existingOrg = await prisma.organization.findUnique({
|
||||
where: { inn: organizationData.inn }
|
||||
})
|
||||
|
||||
if (existingOrg) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Организация с таким ИНН уже зарегистрирована'
|
||||
}
|
||||
}
|
||||
|
||||
// Создаем организацию со всеми данными из DaData
|
||||
const organization = await prisma.organization.create({
|
||||
data: {
|
||||
inn: organizationData.inn,
|
||||
kpp: organizationData.kpp,
|
||||
name: organizationData.name,
|
||||
fullName: organizationData.fullName,
|
||||
address: organizationData.address,
|
||||
addressFull: organizationData.addressFull,
|
||||
ogrn: organizationData.ogrn,
|
||||
ogrnDate: organizationData.ogrnDate,
|
||||
|
||||
// Статус организации
|
||||
status: organizationData.status,
|
||||
actualityDate: organizationData.actualityDate,
|
||||
registrationDate: organizationData.registrationDate,
|
||||
liquidationDate: organizationData.liquidationDate,
|
||||
|
||||
// Руководитель
|
||||
managementName: organizationData.managementName,
|
||||
managementPost: organizationData.managementPost,
|
||||
|
||||
// ОПФ
|
||||
opfCode: organizationData.opfCode,
|
||||
opfFull: organizationData.opfFull,
|
||||
opfShort: organizationData.opfShort,
|
||||
|
||||
// Коды статистики
|
||||
okato: organizationData.okato,
|
||||
oktmo: organizationData.oktmo,
|
||||
okpo: organizationData.okpo,
|
||||
okved: organizationData.okved,
|
||||
|
||||
// Контакты
|
||||
phones: organizationData.phones ? JSON.parse(JSON.stringify(organizationData.phones)) : null,
|
||||
emails: organizationData.emails ? JSON.parse(JSON.stringify(organizationData.emails)) : null,
|
||||
|
||||
// Финансовые данные
|
||||
employeeCount: organizationData.employeeCount,
|
||||
revenue: organizationData.revenue,
|
||||
taxSystem: organizationData.taxSystem,
|
||||
|
||||
type: 'FULFILLMENT',
|
||||
dadataData: JSON.parse(JSON.stringify(organizationData.rawData))
|
||||
}
|
||||
})
|
||||
|
||||
// Привязываем пользователя к организации
|
||||
const updatedUser = await prisma.user.update({
|
||||
where: { id: context.user.id },
|
||||
data: { organizationId: organization.id },
|
||||
include: {
|
||||
organization: {
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Фулфилмент организация успешно зарегистрирована',
|
||||
user: updatedUser
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error registering fulfillment organization:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при регистрации организации'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
registerSellerOrganization: async (
|
||||
_: unknown,
|
||||
args: {
|
||||
input: {
|
||||
phone: string
|
||||
wbApiKey?: string
|
||||
ozonApiKey?: string
|
||||
ozonClientId?: string
|
||||
}
|
||||
},
|
||||
context: Context
|
||||
) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const { wbApiKey, ozonApiKey, ozonClientId } = args.input
|
||||
|
||||
if (!wbApiKey && !ozonApiKey) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Необходимо указать хотя бы один API ключ маркетплейса'
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
// Валидируем API ключи
|
||||
const validationResults = []
|
||||
|
||||
if (wbApiKey) {
|
||||
const wbResult = await marketplaceService.validateWildberriesApiKey(wbApiKey)
|
||||
if (!wbResult.isValid) {
|
||||
return {
|
||||
success: false,
|
||||
message: `Wildberries: ${wbResult.message}`
|
||||
}
|
||||
}
|
||||
validationResults.push({
|
||||
marketplace: 'WILDBERRIES',
|
||||
apiKey: wbApiKey,
|
||||
data: wbResult.data
|
||||
})
|
||||
}
|
||||
|
||||
if (ozonApiKey && ozonClientId) {
|
||||
const ozonResult = await marketplaceService.validateOzonApiKey(ozonApiKey, ozonClientId)
|
||||
if (!ozonResult.isValid) {
|
||||
return {
|
||||
success: false,
|
||||
message: `Ozon: ${ozonResult.message}`
|
||||
}
|
||||
}
|
||||
validationResults.push({
|
||||
marketplace: 'OZON',
|
||||
apiKey: ozonApiKey,
|
||||
data: ozonResult.data
|
||||
})
|
||||
}
|
||||
|
||||
// Создаем организацию селлера - используем название магазина как основное имя
|
||||
const shopName = validationResults[0]?.data?.sellerName || 'Магазин'
|
||||
const organization = await prisma.organization.create({
|
||||
data: {
|
||||
inn: validationResults[0]?.data?.inn || `SELLER_${Date.now()}`,
|
||||
name: shopName,
|
||||
fullName: `Интернет-магазин "${shopName}"`,
|
||||
type: 'SELLER'
|
||||
}
|
||||
})
|
||||
|
||||
// Добавляем API ключи
|
||||
for (const validation of validationResults) {
|
||||
await prisma.apiKey.create({
|
||||
data: {
|
||||
marketplace: validation.marketplace as 'WILDBERRIES' | 'OZON',
|
||||
apiKey: validation.apiKey,
|
||||
organizationId: organization.id,
|
||||
validationData: validation.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Привязываем пользователя к организации
|
||||
const updatedUser = await prisma.user.update({
|
||||
where: { id: context.user.id },
|
||||
data: { organizationId: organization.id },
|
||||
include: {
|
||||
organization: {
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Селлер организация успешно зарегистрирована',
|
||||
user: updatedUser
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error registering seller organization:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при регистрации организации'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addMarketplaceApiKey: async (
|
||||
_: unknown,
|
||||
args: {
|
||||
input: {
|
||||
marketplace: 'WILDBERRIES' | 'OZON'
|
||||
apiKey: string
|
||||
clientId?: string
|
||||
validateOnly?: boolean
|
||||
}
|
||||
},
|
||||
context: Context
|
||||
) => {
|
||||
// Разрешаем валидацию без авторизации
|
||||
if (!args.input.validateOnly && !context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const { marketplace, apiKey, clientId, validateOnly } = args.input
|
||||
|
||||
// Валидируем API ключ
|
||||
const validationResult = await marketplaceService.validateApiKey(
|
||||
marketplace,
|
||||
apiKey,
|
||||
clientId
|
||||
)
|
||||
|
||||
if (!validationResult.isValid) {
|
||||
return {
|
||||
success: false,
|
||||
message: validationResult.message
|
||||
}
|
||||
}
|
||||
|
||||
// Если это только валидация, возвращаем результат без сохранения
|
||||
if (validateOnly) {
|
||||
return {
|
||||
success: true,
|
||||
message: 'API ключ действителен',
|
||||
apiKey: {
|
||||
id: 'validate-only',
|
||||
marketplace,
|
||||
isActive: true,
|
||||
validationData: validationResult,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Для сохранения API ключа нужна авторизация
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация для сохранения API ключа', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: { organization: true }
|
||||
})
|
||||
|
||||
if (!user?.organization) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Пользователь не привязан к организации'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
try {
|
||||
// Проверяем, что такого ключа еще нет
|
||||
const existingKey = await prisma.apiKey.findUnique({
|
||||
where: {
|
||||
organizationId_marketplace: {
|
||||
organizationId: user.organization.id,
|
||||
marketplace
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (existingKey) {
|
||||
// Обновляем существующий ключ
|
||||
const updatedKey = await prisma.apiKey.update({
|
||||
where: { id: existingKey.id },
|
||||
data: {
|
||||
apiKey,
|
||||
validationData: validationResult.data,
|
||||
isActive: true
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'API ключ успешно обновлен',
|
||||
apiKey: updatedKey
|
||||
}
|
||||
} else {
|
||||
// Создаем новый ключ
|
||||
const newKey = await prisma.apiKey.create({
|
||||
data: {
|
||||
marketplace,
|
||||
apiKey,
|
||||
organizationId: user.organization.id,
|
||||
validationData: validationResult.data
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'API ключ успешно добавлен',
|
||||
apiKey: newKey
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error adding marketplace API key:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при добавлении API ключа'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
removeMarketplaceApiKey: async (
|
||||
_: unknown,
|
||||
args: { marketplace: 'WILDBERRIES' | 'OZON' },
|
||||
context: Context
|
||||
) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: { organization: true }
|
||||
})
|
||||
|
||||
if (!user?.organization) {
|
||||
throw new GraphQLError('Пользователь не привязан к организации')
|
||||
}
|
||||
|
||||
try {
|
||||
await prisma.apiKey.delete({
|
||||
where: {
|
||||
organizationId_marketplace: {
|
||||
organizationId: user.organization.id,
|
||||
marketplace: args.marketplace
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('Error removing marketplace API key:', error)
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
updateUserProfile: async (_: unknown, args: { input: {
|
||||
avatar?: string
|
||||
orgPhone?: string
|
||||
managerName?: string
|
||||
telegram?: string
|
||||
whatsapp?: string
|
||||
email?: string
|
||||
bankName?: string
|
||||
bik?: string
|
||||
accountNumber?: string
|
||||
corrAccount?: string
|
||||
} }, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: {
|
||||
organization: {
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (!user?.organization) {
|
||||
throw new GraphQLError('Пользователь не привязан к организации')
|
||||
}
|
||||
|
||||
try {
|
||||
const { input } = args
|
||||
|
||||
// Обновляем аватар пользователя если указан
|
||||
if (input.avatar) {
|
||||
await prisma.user.update({
|
||||
where: { id: context.user.id },
|
||||
data: { avatar: input.avatar }
|
||||
})
|
||||
}
|
||||
|
||||
// Подготавливаем данные для обновления организации
|
||||
const updateData: {
|
||||
phones?: object
|
||||
emails?: object
|
||||
managementName?: string
|
||||
managementPost?: string
|
||||
} = {}
|
||||
|
||||
// Обновляем контактные данные в JSON поле phones
|
||||
if (input.orgPhone) {
|
||||
updateData.phones = [{ value: input.orgPhone, type: 'main' }]
|
||||
}
|
||||
|
||||
// Обновляем email в JSON поле emails
|
||||
if (input.email) {
|
||||
updateData.emails = [{ value: input.email, type: 'main' }]
|
||||
}
|
||||
|
||||
// Сохраняем дополнительные контакты в custom полях
|
||||
// Пока добавим их как дополнительные JSON поля
|
||||
const customContacts: {
|
||||
managerName?: string
|
||||
telegram?: string
|
||||
whatsapp?: string
|
||||
bankDetails?: {
|
||||
bankName?: string
|
||||
bik?: string
|
||||
accountNumber?: string
|
||||
corrAccount?: string
|
||||
}
|
||||
} = {}
|
||||
|
||||
if (input.managerName) {
|
||||
customContacts.managerName = input.managerName
|
||||
}
|
||||
|
||||
if (input.telegram) {
|
||||
customContacts.telegram = input.telegram
|
||||
}
|
||||
|
||||
if (input.whatsapp) {
|
||||
customContacts.whatsapp = input.whatsapp
|
||||
}
|
||||
|
||||
if (input.bankName || input.bik || input.accountNumber || input.corrAccount) {
|
||||
customContacts.bankDetails = {
|
||||
bankName: input.bankName,
|
||||
bik: input.bik,
|
||||
accountNumber: input.accountNumber,
|
||||
corrAccount: input.corrAccount
|
||||
}
|
||||
}
|
||||
|
||||
// Если есть дополнительные контакты, сохраним их в поле managementPost временно
|
||||
// В идеале нужно добавить отдельную таблицу для контактов
|
||||
if (Object.keys(customContacts).length > 0) {
|
||||
updateData.managementPost = JSON.stringify(customContacts)
|
||||
}
|
||||
|
||||
// Обновляем организацию
|
||||
const updatedOrganization = await prisma.organization.update({
|
||||
where: { id: user.organization.id },
|
||||
data: updateData,
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
})
|
||||
|
||||
// Получаем обновленного пользователя
|
||||
const updatedUser = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: {
|
||||
organization: {
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Профиль успешно обновлен',
|
||||
user: updatedUser
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating user profile:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при обновлении профиля'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateOrganizationByInn: async (_: unknown, args: { inn: string }, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: {
|
||||
organization: {
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (!user?.organization) {
|
||||
throw new GraphQLError('Пользователь не привязан к организации')
|
||||
}
|
||||
|
||||
try {
|
||||
// Валидируем ИНН
|
||||
if (!dadataService.validateInn(args.inn)) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Неверный формат ИНН'
|
||||
}
|
||||
}
|
||||
|
||||
// Получаем данные организации из DaData
|
||||
const organizationData = await dadataService.getOrganizationByInn(args.inn)
|
||||
if (!organizationData) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Организация с указанным ИНН не найдена в федеральном реестре'
|
||||
}
|
||||
}
|
||||
|
||||
// Проверяем, есть ли уже организация с таким ИНН в базе (кроме текущей)
|
||||
const existingOrganization = await prisma.organization.findUnique({
|
||||
where: { inn: organizationData.inn }
|
||||
})
|
||||
|
||||
if (existingOrganization && existingOrganization.id !== user.organization.id) {
|
||||
return {
|
||||
success: false,
|
||||
message: `Организация с ИНН ${organizationData.inn} уже существует в системе`
|
||||
}
|
||||
}
|
||||
|
||||
// Подготавливаем данные для обновления
|
||||
const updateData: Prisma.OrganizationUpdateInput = {
|
||||
kpp: organizationData.kpp,
|
||||
name: organizationData.name,
|
||||
fullName: organizationData.fullName,
|
||||
address: organizationData.address,
|
||||
addressFull: organizationData.addressFull,
|
||||
ogrn: organizationData.ogrn,
|
||||
ogrnDate: organizationData.ogrnDate ? organizationData.ogrnDate.toISOString() : null,
|
||||
registrationDate: organizationData.registrationDate ? organizationData.registrationDate.toISOString() : null,
|
||||
liquidationDate: organizationData.liquidationDate ? organizationData.liquidationDate.toISOString() : null,
|
||||
managementName: organizationData.managementName,
|
||||
managementPost: user.organization.managementPost, // Сохраняем кастомные данные пользователя
|
||||
opfCode: organizationData.opfCode,
|
||||
opfFull: organizationData.opfFull,
|
||||
opfShort: organizationData.opfShort,
|
||||
okato: organizationData.okato,
|
||||
oktmo: organizationData.oktmo,
|
||||
okpo: organizationData.okpo,
|
||||
okved: organizationData.okved,
|
||||
status: organizationData.status
|
||||
}
|
||||
|
||||
// Добавляем ИНН только если он отличается от текущего
|
||||
if (user.organization.inn !== organizationData.inn) {
|
||||
updateData.inn = organizationData.inn
|
||||
}
|
||||
|
||||
// Обновляем организацию
|
||||
const updatedOrganization = await prisma.organization.update({
|
||||
where: { id: user.organization.id },
|
||||
data: updateData,
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
})
|
||||
|
||||
// Получаем обновленного пользователя
|
||||
const updatedUser = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: {
|
||||
organization: {
|
||||
include: {
|
||||
apiKeys: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Данные организации успешно обновлены',
|
||||
user: updatedUser
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating organization by INN:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при обновлении данных организации'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
logout: () => {
|
||||
// В stateless JWT системе logout происходит на клиенте
|
||||
// Можно добавить blacklist токенов, если нужно
|
||||
return true
|
||||
},
|
||||
|
||||
// Отправить заявку на добавление в контрагенты
|
||||
sendCounterpartyRequest: async (_: unknown, args: { organizationId: string; message?: string }, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const currentUser = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: { organization: true }
|
||||
})
|
||||
|
||||
if (!currentUser?.organization) {
|
||||
throw new GraphQLError('У пользователя нет организации')
|
||||
}
|
||||
|
||||
if (currentUser.organization.id === args.organizationId) {
|
||||
throw new GraphQLError('Нельзя отправить заявку самому себе')
|
||||
}
|
||||
|
||||
// Проверяем, что организация-получатель существует
|
||||
const receiverOrganization = await prisma.organization.findUnique({
|
||||
where: { id: args.organizationId }
|
||||
})
|
||||
|
||||
if (!receiverOrganization) {
|
||||
throw new GraphQLError('Организация не найдена')
|
||||
}
|
||||
|
||||
try {
|
||||
// Создаем или обновляем заявку
|
||||
const request = await prisma.counterpartyRequest.upsert({
|
||||
where: {
|
||||
senderId_receiverId: {
|
||||
senderId: currentUser.organization.id,
|
||||
receiverId: args.organizationId
|
||||
}
|
||||
},
|
||||
update: {
|
||||
status: 'PENDING',
|
||||
message: args.message,
|
||||
updatedAt: new Date()
|
||||
},
|
||||
create: {
|
||||
senderId: currentUser.organization.id,
|
||||
receiverId: args.organizationId,
|
||||
message: args.message,
|
||||
status: 'PENDING'
|
||||
},
|
||||
include: {
|
||||
sender: true,
|
||||
receiver: true
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Заявка отправлена',
|
||||
request
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending counterparty request:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при отправке заявки'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Ответить на заявку контрагента
|
||||
respondToCounterpartyRequest: async (_: unknown, args: { requestId: string; accept: boolean }, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const currentUser = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: { organization: true }
|
||||
})
|
||||
|
||||
if (!currentUser?.organization) {
|
||||
throw new GraphQLError('У пользователя нет организации')
|
||||
}
|
||||
|
||||
try {
|
||||
// Найти заявку и проверить права
|
||||
const request = await prisma.counterpartyRequest.findUnique({
|
||||
where: { id: args.requestId },
|
||||
include: {
|
||||
sender: true,
|
||||
receiver: true
|
||||
}
|
||||
})
|
||||
|
||||
if (!request) {
|
||||
throw new GraphQLError('Заявка не найдена')
|
||||
}
|
||||
|
||||
if (request.receiverId !== currentUser.organization.id) {
|
||||
throw new GraphQLError('Нет прав на обработку этой заявки')
|
||||
}
|
||||
|
||||
if (request.status !== 'PENDING') {
|
||||
throw new GraphQLError('Заявка уже обработана')
|
||||
}
|
||||
|
||||
const newStatus = args.accept ? 'ACCEPTED' : 'REJECTED'
|
||||
|
||||
// Обновляем статус заявки
|
||||
const updatedRequest = await prisma.counterpartyRequest.update({
|
||||
where: { id: args.requestId },
|
||||
data: { status: newStatus },
|
||||
include: {
|
||||
sender: true,
|
||||
receiver: true
|
||||
}
|
||||
})
|
||||
|
||||
// Если заявка принята, создаем связи контрагентов в обе стороны
|
||||
if (args.accept) {
|
||||
await prisma.$transaction([
|
||||
// Добавляем отправителя в контрагенты получателя
|
||||
prisma.counterparty.create({
|
||||
data: {
|
||||
organizationId: request.receiverId,
|
||||
counterpartyId: request.senderId
|
||||
}
|
||||
}),
|
||||
// Добавляем получателя в контрагенты отправителя
|
||||
prisma.counterparty.create({
|
||||
data: {
|
||||
organizationId: request.senderId,
|
||||
counterpartyId: request.receiverId
|
||||
}
|
||||
})
|
||||
])
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: args.accept ? 'Заявка принята' : 'Заявка отклонена',
|
||||
request: updatedRequest
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error responding to counterparty request:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при обработке заявки'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Отменить заявку
|
||||
cancelCounterpartyRequest: async (_: unknown, args: { requestId: string }, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const currentUser = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: { organization: true }
|
||||
})
|
||||
|
||||
if (!currentUser?.organization) {
|
||||
throw new GraphQLError('У пользователя нет организации')
|
||||
}
|
||||
|
||||
try {
|
||||
const request = await prisma.counterpartyRequest.findUnique({
|
||||
where: { id: args.requestId }
|
||||
})
|
||||
|
||||
if (!request) {
|
||||
throw new GraphQLError('Заявка не найдена')
|
||||
}
|
||||
|
||||
if (request.senderId !== currentUser.organization.id) {
|
||||
throw new GraphQLError('Можно отменить только свои заявки')
|
||||
}
|
||||
|
||||
if (request.status !== 'PENDING') {
|
||||
throw new GraphQLError('Можно отменить только ожидающие заявки')
|
||||
}
|
||||
|
||||
await prisma.counterpartyRequest.update({
|
||||
where: { id: args.requestId },
|
||||
data: { status: 'CANCELLED' }
|
||||
})
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('Error cancelling counterparty request:', error)
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
// Удалить контрагента
|
||||
removeCounterparty: async (_: unknown, args: { organizationId: string }, context: Context) => {
|
||||
if (!context.user) {
|
||||
throw new GraphQLError('Требуется авторизация', {
|
||||
extensions: { code: 'UNAUTHENTICATED' }
|
||||
})
|
||||
}
|
||||
|
||||
const currentUser = await prisma.user.findUnique({
|
||||
where: { id: context.user.id },
|
||||
include: { organization: true }
|
||||
})
|
||||
|
||||
if (!currentUser?.organization) {
|
||||
throw new GraphQLError('У пользователя нет организации')
|
||||
}
|
||||
|
||||
try {
|
||||
// Удаляем связь в обе стороны
|
||||
await prisma.$transaction([
|
||||
prisma.counterparty.deleteMany({
|
||||
where: {
|
||||
organizationId: currentUser.organization.id,
|
||||
counterpartyId: args.organizationId
|
||||
}
|
||||
}),
|
||||
prisma.counterparty.deleteMany({
|
||||
where: {
|
||||
organizationId: args.organizationId,
|
||||
counterpartyId: currentUser.organization.id
|
||||
}
|
||||
})
|
||||
])
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('Error removing counterparty:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Резолверы типов
|
||||
Organization: {
|
||||
users: async (parent: { id: string; users?: unknown[] }) => {
|
||||
// Если пользователи уже загружены через include, возвращаем их
|
||||
if (parent.users) {
|
||||
return parent.users
|
||||
}
|
||||
|
||||
// Иначе загружаем отдельно
|
||||
return await prisma.user.findMany({
|
||||
where: { organizationId: parent.id }
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
User: {
|
||||
organization: async (parent: { organizationId?: string; organization?: unknown }) => {
|
||||
// Если организация уже загружена через include, возвращаем её
|
||||
if (parent.organization) {
|
||||
return parent.organization
|
||||
}
|
||||
|
||||
// Иначе загружаем отдельно если есть organizationId
|
||||
if (parent.organizationId) {
|
||||
return await prisma.organization.findUnique({
|
||||
where: { id: parent.organizationId },
|
||||
include: {
|
||||
apiKeys: true,
|
||||
users: true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
229
src/graphql/typedefs.ts
Normal file
229
src/graphql/typedefs.ts
Normal file
@ -0,0 +1,229 @@
|
||||
import { gql } from 'graphql-tag'
|
||||
|
||||
export const typeDefs = gql`
|
||||
type Query {
|
||||
me: User
|
||||
organization(id: ID!): Organization
|
||||
|
||||
# Поиск организаций по типу для добавления в контрагенты
|
||||
searchOrganizations(type: OrganizationType, search: String): [Organization!]!
|
||||
|
||||
# Мои контрагенты
|
||||
myCounterparties: [Organization!]!
|
||||
|
||||
# Входящие заявки
|
||||
incomingRequests: [CounterpartyRequest!]!
|
||||
|
||||
# Исходящие заявки
|
||||
outgoingRequests: [CounterpartyRequest!]!
|
||||
}
|
||||
|
||||
type Mutation {
|
||||
# Авторизация через SMS
|
||||
sendSmsCode(phone: String!): SmsResponse!
|
||||
verifySmsCode(phone: String!, code: String!): AuthResponse!
|
||||
|
||||
# Валидация ИНН
|
||||
verifyInn(inn: String!): InnValidationResponse!
|
||||
|
||||
# Обновление профиля пользователя
|
||||
updateUserProfile(input: UpdateUserProfileInput!): UpdateUserProfileResponse!
|
||||
|
||||
# Обновление данных организации по ИНН
|
||||
updateOrganizationByInn(inn: String!): UpdateOrganizationResponse!
|
||||
|
||||
# Регистрация организации
|
||||
registerFulfillmentOrganization(input: FulfillmentRegistrationInput!): AuthResponse!
|
||||
registerSellerOrganization(input: SellerRegistrationInput!): AuthResponse!
|
||||
|
||||
# Работа с API ключами
|
||||
addMarketplaceApiKey(input: MarketplaceApiKeyInput!): ApiKeyResponse!
|
||||
removeMarketplaceApiKey(marketplace: MarketplaceType!): Boolean!
|
||||
|
||||
# Выход из системы
|
||||
logout: Boolean!
|
||||
|
||||
# Работа с контрагентами
|
||||
sendCounterpartyRequest(organizationId: ID!, message: String): CounterpartyRequestResponse!
|
||||
respondToCounterpartyRequest(requestId: ID!, accept: Boolean!): CounterpartyRequestResponse!
|
||||
cancelCounterpartyRequest(requestId: ID!): Boolean!
|
||||
removeCounterparty(organizationId: ID!): Boolean!
|
||||
}
|
||||
|
||||
# Типы данных
|
||||
type User {
|
||||
id: ID!
|
||||
phone: String!
|
||||
avatar: String
|
||||
organization: Organization
|
||||
createdAt: String!
|
||||
updatedAt: String!
|
||||
}
|
||||
|
||||
type Organization {
|
||||
id: ID!
|
||||
inn: String!
|
||||
kpp: String
|
||||
name: String
|
||||
fullName: String
|
||||
address: String
|
||||
addressFull: String
|
||||
ogrn: String
|
||||
ogrnDate: String
|
||||
type: OrganizationType!
|
||||
status: String
|
||||
actualityDate: String
|
||||
registrationDate: String
|
||||
liquidationDate: String
|
||||
managementName: String
|
||||
managementPost: String
|
||||
opfCode: String
|
||||
opfFull: String
|
||||
opfShort: String
|
||||
okato: String
|
||||
oktmo: String
|
||||
okpo: String
|
||||
okved: String
|
||||
employeeCount: Int
|
||||
revenue: String
|
||||
taxSystem: String
|
||||
phones: JSON
|
||||
emails: JSON
|
||||
users: [User!]!
|
||||
apiKeys: [ApiKey!]!
|
||||
isCounterparty: Boolean
|
||||
createdAt: String!
|
||||
updatedAt: String!
|
||||
}
|
||||
|
||||
type ApiKey {
|
||||
id: ID!
|
||||
marketplace: MarketplaceType!
|
||||
isActive: Boolean!
|
||||
validationData: JSON
|
||||
createdAt: String!
|
||||
updatedAt: String!
|
||||
}
|
||||
|
||||
# Входные типы для мутаций
|
||||
input UpdateUserProfileInput {
|
||||
# Аватар пользователя
|
||||
avatar: String
|
||||
|
||||
# Контактные данные организации
|
||||
orgPhone: String
|
||||
managerName: String
|
||||
telegram: String
|
||||
whatsapp: String
|
||||
email: String
|
||||
|
||||
# Банковские данные
|
||||
bankName: String
|
||||
bik: String
|
||||
accountNumber: String
|
||||
corrAccount: String
|
||||
}
|
||||
|
||||
input FulfillmentRegistrationInput {
|
||||
phone: String!
|
||||
inn: String!
|
||||
}
|
||||
|
||||
input SellerRegistrationInput {
|
||||
phone: String!
|
||||
wbApiKey: String
|
||||
ozonApiKey: String
|
||||
ozonClientId: String
|
||||
}
|
||||
|
||||
input MarketplaceApiKeyInput {
|
||||
marketplace: MarketplaceType!
|
||||
apiKey: String!
|
||||
clientId: String # Для Ozon
|
||||
validateOnly: Boolean # Только валидация без сохранения
|
||||
}
|
||||
|
||||
# Ответные типы
|
||||
type SmsResponse {
|
||||
success: Boolean!
|
||||
message: String!
|
||||
}
|
||||
|
||||
type AuthResponse {
|
||||
success: Boolean!
|
||||
message: String!
|
||||
token: String
|
||||
user: User
|
||||
}
|
||||
|
||||
type InnValidationResponse {
|
||||
success: Boolean!
|
||||
message: String!
|
||||
organization: ValidatedOrganization
|
||||
}
|
||||
|
||||
type ValidatedOrganization {
|
||||
name: String!
|
||||
fullName: String!
|
||||
address: String!
|
||||
isActive: Boolean!
|
||||
}
|
||||
|
||||
type ApiKeyResponse {
|
||||
success: Boolean!
|
||||
message: String!
|
||||
apiKey: ApiKey
|
||||
}
|
||||
|
||||
type UpdateUserProfileResponse {
|
||||
success: Boolean!
|
||||
message: String!
|
||||
user: User
|
||||
}
|
||||
|
||||
type UpdateOrganizationResponse {
|
||||
success: Boolean!
|
||||
message: String!
|
||||
user: User
|
||||
}
|
||||
|
||||
# Enums
|
||||
enum OrganizationType {
|
||||
FULFILLMENT
|
||||
SELLER
|
||||
LOGIST
|
||||
WHOLESALE
|
||||
}
|
||||
|
||||
enum MarketplaceType {
|
||||
WILDBERRIES
|
||||
OZON
|
||||
}
|
||||
|
||||
enum CounterpartyRequestStatus {
|
||||
PENDING
|
||||
ACCEPTED
|
||||
REJECTED
|
||||
CANCELLED
|
||||
}
|
||||
|
||||
# Типы для контрагентов
|
||||
type CounterpartyRequest {
|
||||
id: ID!
|
||||
status: CounterpartyRequestStatus!
|
||||
message: String
|
||||
sender: Organization!
|
||||
receiver: Organization!
|
||||
createdAt: String!
|
||||
updatedAt: String!
|
||||
}
|
||||
|
||||
type CounterpartyRequestResponse {
|
||||
success: Boolean!
|
||||
message: String!
|
||||
request: CounterpartyRequest
|
||||
}
|
||||
|
||||
# JSON скаляр
|
||||
scalar JSON
|
||||
`
|
||||
12
src/hooks/useApolloRefresh.ts
Normal file
12
src/hooks/useApolloRefresh.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { useEffect } from 'react'
|
||||
import { apolloClient } from '@/lib/apollo-client'
|
||||
|
||||
export const useApolloRefresh = () => {
|
||||
const refreshApolloClient = async () => {
|
||||
// Сбрасываем кэш и перезапрашиваем все активные запросы
|
||||
console.log('useApolloRefresh - Resetting Apollo cache and refetching queries')
|
||||
await apolloClient.resetStore()
|
||||
}
|
||||
|
||||
return { refreshApolloClient }
|
||||
}
|
||||
367
src/hooks/useAuth.ts
Normal file
367
src/hooks/useAuth.ts
Normal file
@ -0,0 +1,367 @@
|
||||
import { useMutation } from '@apollo/client'
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
SEND_SMS_CODE,
|
||||
VERIFY_SMS_CODE,
|
||||
REGISTER_FULFILLMENT_ORGANIZATION,
|
||||
REGISTER_SELLER_ORGANIZATION
|
||||
} from '@/graphql/mutations'
|
||||
import { GET_ME } from '@/graphql/queries'
|
||||
import { setAuthToken, setUserData, removeAuthToken, getAuthToken, apolloClient } from '@/lib/apollo-client'
|
||||
import { useApolloRefresh } from './useApolloRefresh'
|
||||
|
||||
interface User {
|
||||
id: string
|
||||
phone: string
|
||||
avatar?: string
|
||||
createdAt?: string
|
||||
organization?: {
|
||||
id: string
|
||||
inn: string
|
||||
kpp?: string
|
||||
name?: string
|
||||
fullName?: string
|
||||
address?: string
|
||||
addressFull?: string
|
||||
ogrn?: string
|
||||
ogrnDate?: string
|
||||
status?: string
|
||||
actualityDate?: string
|
||||
registrationDate?: string
|
||||
liquidationDate?: string
|
||||
managementName?: string
|
||||
managementPost?: string
|
||||
opfCode?: string
|
||||
opfFull?: string
|
||||
opfShort?: string
|
||||
okato?: string
|
||||
oktmo?: string
|
||||
okpo?: string
|
||||
okved?: string
|
||||
employeeCount?: number
|
||||
revenue?: string
|
||||
taxSystem?: string
|
||||
phones?: unknown
|
||||
emails?: unknown
|
||||
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||
apiKeys: Array<{
|
||||
id: string
|
||||
marketplace: 'WILDBERRIES' | 'OZON'
|
||||
isActive: boolean
|
||||
validationData?: unknown
|
||||
}>
|
||||
}
|
||||
}
|
||||
|
||||
interface UseAuthReturn {
|
||||
// SMS методы
|
||||
sendSmsCode: (phone: string) => Promise<{ success: boolean; message: string }>
|
||||
verifySmsCode: (phone: string, code: string) => Promise<{
|
||||
success: boolean
|
||||
message: string
|
||||
user?: User
|
||||
}>
|
||||
|
||||
// Регистрация организаций
|
||||
registerFulfillmentOrganization: (phone: string, inn: string) => Promise<{
|
||||
success: boolean
|
||||
message: string
|
||||
user?: User
|
||||
}>
|
||||
registerSellerOrganization: (data: {
|
||||
phone: string
|
||||
wbApiKey?: string
|
||||
ozonApiKey?: string
|
||||
ozonClientId?: string
|
||||
}) => Promise<{
|
||||
success: boolean
|
||||
message: string
|
||||
user?: User
|
||||
}>
|
||||
|
||||
// Состояние
|
||||
user: User | null
|
||||
isAuthenticated: boolean
|
||||
isLoading: boolean
|
||||
checkAuth: () => Promise<void>
|
||||
logout: () => void
|
||||
}
|
||||
|
||||
export const useAuth = (): UseAuthReturn => {
|
||||
// Инициализируем состояния с проверкой токена
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(() => {
|
||||
// Проверяем наличие токена при инициализации
|
||||
return !!getAuthToken()
|
||||
})
|
||||
const [isCheckingAuth, setIsCheckingAuth] = useState(false) // Защита от повторных вызовов
|
||||
const { refreshApolloClient } = useApolloRefresh()
|
||||
|
||||
const [sendSmsCodeMutation] = useMutation(SEND_SMS_CODE)
|
||||
const [verifySmsCodeMutation] = useMutation(VERIFY_SMS_CODE)
|
||||
const [registerFulfillmentMutation] = useMutation(REGISTER_FULFILLMENT_ORGANIZATION)
|
||||
const [registerSellerMutation] = useMutation(REGISTER_SELLER_ORGANIZATION)
|
||||
|
||||
// Проверка авторизации при инициализации
|
||||
const checkAuth = async () => {
|
||||
if (isCheckingAuth) {
|
||||
console.log('useAuth - checkAuth already in progress, skipping')
|
||||
return
|
||||
}
|
||||
|
||||
const token = getAuthToken()
|
||||
console.log('useAuth - checkAuth called, token exists:', !!token)
|
||||
|
||||
if (!token) {
|
||||
setIsAuthenticated(false)
|
||||
setUser(null)
|
||||
setIsCheckingAuth(false)
|
||||
return
|
||||
}
|
||||
|
||||
setIsCheckingAuth(true)
|
||||
|
||||
try {
|
||||
console.log('useAuth - Making GET_ME query')
|
||||
const { data } = await apolloClient.query({
|
||||
query: GET_ME,
|
||||
errorPolicy: 'all',
|
||||
fetchPolicy: 'network-only' // Всегда делаем свежий запрос
|
||||
})
|
||||
|
||||
console.log('useAuth - GET_ME response:', !!data?.me)
|
||||
if (data?.me) {
|
||||
setUser(data.me)
|
||||
setIsAuthenticated(true)
|
||||
setUserData(data.me)
|
||||
console.log('useAuth - User authenticated:', data.me.phone)
|
||||
} else {
|
||||
setIsAuthenticated(false)
|
||||
setUser(null)
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.log('useAuth - GET_ME error:', error)
|
||||
if ((error as { graphQLErrors?: Array<{ extensions?: { code?: string } }> })?.graphQLErrors?.some((e) => e.extensions?.code === 'UNAUTHENTICATED')) {
|
||||
logout()
|
||||
} else {
|
||||
setIsAuthenticated(false)
|
||||
setUser(null)
|
||||
}
|
||||
} finally {
|
||||
setIsCheckingAuth(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Проверяем авторизацию при загрузке компонента только если нет данных пользователя
|
||||
useEffect(() => {
|
||||
const token = getAuthToken()
|
||||
console.log('useAuth - useEffect init, token exists:', !!token, 'user exists:', !!user, 'isChecking:', isCheckingAuth)
|
||||
|
||||
if (token && !user && !isCheckingAuth) {
|
||||
console.log('useAuth - Running checkAuth because token exists but no user data')
|
||||
checkAuth()
|
||||
} else if (!token) {
|
||||
console.log('useAuth - No token, setting unauthenticated state')
|
||||
setIsAuthenticated(false)
|
||||
setUser(null)
|
||||
}
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const sendSmsCode = async (phone: string) => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const { data } = await sendSmsCodeMutation({
|
||||
variables: { phone }
|
||||
})
|
||||
|
||||
return {
|
||||
success: data.sendSmsCode.success,
|
||||
message: data.sendSmsCode.message
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending SMS code:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при отправке SMS кода'
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const verifySmsCode = async (phone: string, code: string) => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
console.log('useAuth - Starting verifySmsCode mutation with:', { phone, code })
|
||||
|
||||
const { data } = await verifySmsCodeMutation({
|
||||
variables: { phone, code }
|
||||
})
|
||||
|
||||
console.log('useAuth - GraphQL response data:', data)
|
||||
const result = data.verifySmsCode
|
||||
console.log('useAuth - SMS verification result:', {
|
||||
success: result.success,
|
||||
hasToken: !!result.token,
|
||||
hasUser: !!result.user,
|
||||
message: result.message
|
||||
})
|
||||
|
||||
if (result.success && result.token && result.user) {
|
||||
// Сохраняем токен и данные пользователя
|
||||
console.log('useAuth - Saving token:', result.token ? `${result.token.substring(0, 20)}...` : 'No token')
|
||||
setAuthToken(result.token)
|
||||
setUserData(result.user)
|
||||
|
||||
// Обновляем состояние хука
|
||||
setUser(result.user)
|
||||
setIsAuthenticated(true)
|
||||
console.log('useAuth - State updated: user set, isAuthenticated=true')
|
||||
|
||||
// Проверяем что токен действительно сохранился
|
||||
const savedToken = typeof window !== 'undefined' ? localStorage.getItem('authToken') : null
|
||||
console.log('useAuth - Token saved to localStorage:', savedToken ? `${savedToken.substring(0, 20)}...` : 'Not saved')
|
||||
|
||||
// Принудительно обновляем Apollo Client
|
||||
refreshApolloClient()
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: result.message,
|
||||
user: result.user
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: false,
|
||||
message: result.message
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error verifying SMS code:', error)
|
||||
console.error('Error details:', {
|
||||
message: error instanceof Error ? error.message : 'Unknown error',
|
||||
graphQLErrors: (error as { graphQLErrors?: unknown })?.graphQLErrors,
|
||||
networkError: (error as { networkError?: unknown })?.networkError
|
||||
})
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при проверке SMS кода'
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const registerFulfillmentOrganization = async (phone: string, inn: string) => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
|
||||
// Проверяем токен перед запросом
|
||||
const currentToken = typeof window !== 'undefined' ? localStorage.getItem('authToken') : null
|
||||
console.log('useAuth - Token before registerFulfillment request:', currentToken ? `${currentToken.substring(0, 20)}...` : 'No token')
|
||||
|
||||
const { data } = await registerFulfillmentMutation({
|
||||
variables: {
|
||||
input: { phone, inn }
|
||||
}
|
||||
})
|
||||
|
||||
const result = data.registerFulfillmentOrganization
|
||||
|
||||
if (result.success && result.user) {
|
||||
// Обновляем данные пользователя
|
||||
setUserData(result.user)
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: result.message,
|
||||
user: result.user
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: false,
|
||||
message: result.message
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error registering fulfillment organization:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при регистрации фулфилмент организации'
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const registerSellerOrganization = async (data: {
|
||||
phone: string
|
||||
wbApiKey?: string
|
||||
ozonApiKey?: string
|
||||
ozonClientId?: string
|
||||
}) => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const { data: result } = await registerSellerMutation({
|
||||
variables: { input: data }
|
||||
})
|
||||
|
||||
const registerResult = result.registerSellerOrganization
|
||||
|
||||
if (registerResult.success && registerResult.user) {
|
||||
// Обновляем данные пользователя
|
||||
setUserData(registerResult.user)
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: registerResult.message,
|
||||
user: registerResult.user
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: false,
|
||||
message: registerResult.message
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error registering seller organization:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при регистрации селлер организации'
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
console.log('useAuth - Logging out')
|
||||
removeAuthToken()
|
||||
setUser(null)
|
||||
setIsAuthenticated(false)
|
||||
refreshApolloClient()
|
||||
|
||||
// Перенаправляем на главную страницу
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = '/'
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// SMS методы
|
||||
sendSmsCode,
|
||||
verifySmsCode,
|
||||
|
||||
// Регистрация организаций
|
||||
registerFulfillmentOrganization,
|
||||
registerSellerOrganization,
|
||||
|
||||
// Состояние
|
||||
user,
|
||||
isAuthenticated,
|
||||
isLoading,
|
||||
checkAuth,
|
||||
logout
|
||||
}
|
||||
}
|
||||
125
src/lib/apollo-client.ts
Normal file
125
src/lib/apollo-client.ts
Normal file
@ -0,0 +1,125 @@
|
||||
import { ApolloClient, InMemoryCache, createHttpLink, from } from '@apollo/client'
|
||||
import { setContext } from '@apollo/client/link/context'
|
||||
import { onError } from '@apollo/client/link/error'
|
||||
|
||||
// HTTP Link для GraphQL запросов
|
||||
const httpLink = createHttpLink({
|
||||
uri: '/api/graphql',
|
||||
})
|
||||
|
||||
// Auth Link для добавления JWT токена в заголовки
|
||||
const authLink = setContext((operation, { headers }) => {
|
||||
// Получаем токен из localStorage каждый раз
|
||||
const token = typeof window !== 'undefined' ? localStorage.getItem('authToken') : null
|
||||
|
||||
console.log(`Apollo Client - Operation: ${operation.operationName}, Token:`, token ? `${token.substring(0, 20)}...` : 'No token')
|
||||
|
||||
const authHeaders = {
|
||||
...headers,
|
||||
authorization: token ? `Bearer ${token}` : '',
|
||||
}
|
||||
|
||||
console.log('Apollo Client - Auth headers:', { authorization: authHeaders.authorization ? 'Bearer ***' : 'No auth' })
|
||||
|
||||
return {
|
||||
headers: authHeaders
|
||||
}
|
||||
})
|
||||
|
||||
// Error Link для обработки ошибок
|
||||
const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => {
|
||||
if (graphQLErrors) {
|
||||
graphQLErrors.forEach(({ message, locations, path, extensions }) => {
|
||||
console.error(
|
||||
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
|
||||
)
|
||||
|
||||
// Если токен недействителен, очищаем localStorage и перенаправляем на авторизацию
|
||||
// Но не делаем редирект если пользователь уже на главной странице (в процессе авторизации)
|
||||
if (extensions?.code === 'UNAUTHENTICATED') {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.removeItem('authToken')
|
||||
localStorage.removeItem('userData')
|
||||
// Перенаправляем на страницу авторизации только если не находимся на ней
|
||||
if (window.location.pathname !== '/') {
|
||||
window.location.href = '/'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (networkError) {
|
||||
console.error(`[Network error]: ${networkError}`)
|
||||
}
|
||||
})
|
||||
|
||||
// Создаем Apollo Client
|
||||
export const apolloClient = new ApolloClient({
|
||||
link: from([
|
||||
errorLink,
|
||||
authLink,
|
||||
httpLink,
|
||||
]),
|
||||
cache: new InMemoryCache({
|
||||
typePolicies: {
|
||||
User: {
|
||||
fields: {
|
||||
organization: {
|
||||
merge: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
Organization: {
|
||||
fields: {
|
||||
apiKeys: {
|
||||
merge: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
defaultOptions: {
|
||||
watchQuery: {
|
||||
errorPolicy: 'all',
|
||||
},
|
||||
query: {
|
||||
errorPolicy: 'all',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// Утилитарные функции для работы с токеном и пользователем
|
||||
export const setAuthToken = (token: string) => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('authToken', token)
|
||||
}
|
||||
}
|
||||
|
||||
export const removeAuthToken = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.removeItem('authToken')
|
||||
localStorage.removeItem('userData')
|
||||
}
|
||||
}
|
||||
|
||||
export const getAuthToken = (): string | null => {
|
||||
if (typeof window !== 'undefined') {
|
||||
return localStorage.getItem('authToken')
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export const setUserData = (userData: unknown) => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('userData', JSON.stringify(userData))
|
||||
}
|
||||
}
|
||||
|
||||
export const getUserData = (): unknown | null => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const data = localStorage.getItem('userData')
|
||||
return data ? JSON.parse(data) : null
|
||||
}
|
||||
return null
|
||||
}
|
||||
11
src/lib/prisma.ts
Normal file
11
src/lib/prisma.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
|
||||
declare global {
|
||||
var prisma: PrismaClient | undefined
|
||||
}
|
||||
|
||||
export const prisma = globalThis.prisma || new PrismaClient()
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
globalThis.prisma = prisma
|
||||
}
|
||||
25
src/lib/utils.ts
Normal file
25
src/lib/utils.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
||||
// Функция для форматирования номера телефона
|
||||
export function formatPhone(phone: string): string {
|
||||
if (!phone) return ''
|
||||
|
||||
// Убираем все кроме цифр
|
||||
const digits = phone.replace(/\D/g, '')
|
||||
|
||||
// Если номер начинается с 8, заменяем на 7
|
||||
const normalizedDigits = digits.startsWith('8') ? '7' + digits.slice(1) : digits
|
||||
|
||||
// Проверяем длину номера
|
||||
if (normalizedDigits.length !== 11 || !normalizedDigits.startsWith('7')) {
|
||||
return phone // Возвращаем как есть, если формат неправильный
|
||||
}
|
||||
|
||||
// Форматируем как +7 (999) 999-99-99
|
||||
return `+7 (${normalizedDigits.slice(1, 4)}) ${normalizedDigits.slice(4, 7)}-${normalizedDigits.slice(7, 9)}-${normalizedDigits.slice(9, 11)}`
|
||||
}
|
||||
289
src/services/dadata-service.ts
Normal file
289
src/services/dadata-service.ts
Normal file
@ -0,0 +1,289 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export interface DaDataCompany {
|
||||
value: string
|
||||
unrestricted_value: string
|
||||
data: {
|
||||
kpp?: string
|
||||
management?: {
|
||||
name?: string
|
||||
post?: string
|
||||
}
|
||||
hid: string
|
||||
type: string
|
||||
state?: {
|
||||
status?: string
|
||||
actuality_date?: number
|
||||
registration_date?: number
|
||||
liquidation_date?: number
|
||||
}
|
||||
opf?: {
|
||||
code?: string
|
||||
full?: string
|
||||
short?: string
|
||||
}
|
||||
name: {
|
||||
full_with_opf?: string
|
||||
short_with_opf?: string
|
||||
full?: string
|
||||
short?: string
|
||||
}
|
||||
inn: string
|
||||
ogrn?: string
|
||||
ogrn_date?: number
|
||||
okpo?: string
|
||||
okato?: string
|
||||
oktmo?: string
|
||||
okved?: string
|
||||
employee_count?: number
|
||||
phones?: object[]
|
||||
emails?: object[]
|
||||
finance?: {
|
||||
revenue?: number
|
||||
tax_system?: string
|
||||
}
|
||||
address?: {
|
||||
value?: string
|
||||
unrestricted_value?: string
|
||||
data?: {
|
||||
region_with_type?: string
|
||||
city_with_type?: string
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface DaDataResponse {
|
||||
suggestions: DaDataCompany[]
|
||||
}
|
||||
|
||||
export interface OrganizationData {
|
||||
inn: string
|
||||
kpp?: string
|
||||
name: string
|
||||
fullName: string
|
||||
address: string
|
||||
addressFull?: string
|
||||
ogrn?: string
|
||||
ogrnDate?: Date
|
||||
isActive: boolean
|
||||
type: 'FULFILLMENT' | 'SELLER'
|
||||
|
||||
// Статус организации
|
||||
status?: string
|
||||
actualityDate?: Date
|
||||
registrationDate?: Date
|
||||
liquidationDate?: Date
|
||||
|
||||
// Руководитель
|
||||
managementName?: string
|
||||
managementPost?: string
|
||||
|
||||
// ОПФ
|
||||
opfCode?: string
|
||||
opfFull?: string
|
||||
opfShort?: string
|
||||
|
||||
// Коды статистики
|
||||
okato?: string
|
||||
oktmo?: string
|
||||
okpo?: string
|
||||
okved?: string
|
||||
|
||||
// Контакты
|
||||
phones?: object[]
|
||||
emails?: object[]
|
||||
|
||||
// Финансовые данные
|
||||
employeeCount?: number
|
||||
revenue?: bigint
|
||||
taxSystem?: string
|
||||
|
||||
rawData: DaDataCompany
|
||||
}
|
||||
|
||||
export class DaDataService {
|
||||
private apiKey: string
|
||||
private apiUrl: string
|
||||
|
||||
constructor() {
|
||||
this.apiKey = process.env.DADATA_API_KEY!
|
||||
this.apiUrl = process.env.DADATA_API_URL!
|
||||
|
||||
if (!this.apiKey || !this.apiUrl) {
|
||||
throw new Error('DaData API credentials not configured')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Получает информацию об организации по ИНН
|
||||
*/
|
||||
async getOrganizationByInn(inn: string): Promise<OrganizationData | null> {
|
||||
try {
|
||||
const response = await axios.post<DaDataResponse>(
|
||||
`${this.apiUrl}/findById/party`,
|
||||
{
|
||||
query: inn,
|
||||
count: 1
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'Authorization': `Token ${this.apiKey}`,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
if (!response.data?.suggestions?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const company = response.data.suggestions[0]
|
||||
|
||||
// Определяем тип организации на основе ОПФ
|
||||
const organizationType = this.determineOrganizationType(company)
|
||||
|
||||
return {
|
||||
inn: company.data.inn,
|
||||
kpp: company.data.kpp || undefined,
|
||||
name: company.data.name.short || company.data.name.full || 'Название не указано',
|
||||
fullName: company.data.name.full_with_opf || '',
|
||||
address: company.data.address?.value || '',
|
||||
addressFull: company.data.address?.unrestricted_value || undefined,
|
||||
ogrn: company.data.ogrn || undefined,
|
||||
ogrnDate: this.parseDate(company.data.ogrn_date),
|
||||
|
||||
// Статус организации
|
||||
status: company.data.state?.status,
|
||||
actualityDate: this.parseDate(company.data.state?.actuality_date),
|
||||
registrationDate: this.parseDate(company.data.state?.registration_date),
|
||||
liquidationDate: this.parseDate(company.data.state?.liquidation_date),
|
||||
|
||||
// Руководитель
|
||||
managementName: company.data.management?.name,
|
||||
managementPost: company.data.management?.post,
|
||||
|
||||
// ОПФ
|
||||
opfCode: company.data.opf?.code,
|
||||
opfFull: company.data.opf?.full,
|
||||
opfShort: company.data.opf?.short,
|
||||
|
||||
// Коды статистики
|
||||
okato: company.data.okato,
|
||||
oktmo: company.data.oktmo,
|
||||
okpo: company.data.okpo,
|
||||
okved: company.data.okved,
|
||||
|
||||
// Контакты
|
||||
phones: company.data.phones || undefined,
|
||||
emails: company.data.emails || undefined,
|
||||
|
||||
// Финансовые данные
|
||||
employeeCount: company.data.employee_count || undefined,
|
||||
revenue: company.data.finance?.revenue ? BigInt(company.data.finance.revenue) : undefined,
|
||||
taxSystem: company.data.finance?.tax_system || undefined,
|
||||
|
||||
isActive: company.data.state?.status === 'ACTIVE',
|
||||
type: organizationType,
|
||||
rawData: company
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching organization data from DaData:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Безопасно парсит дату из timestamp, возвращает undefined для некорректных дат
|
||||
*/
|
||||
private parseDate(timestamp?: number): Date | undefined {
|
||||
if (!timestamp) return undefined
|
||||
|
||||
try {
|
||||
const date = new Date(timestamp * 1000)
|
||||
// Проверяем, что дата валидна и разумна (между 1900 и 2100 годами)
|
||||
if (isNaN(date.getTime()) || date.getFullYear() < 1900 || date.getFullYear() > 2100) {
|
||||
return undefined
|
||||
}
|
||||
return date
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Определяет тип организации на основе ОПФ (организационно-правовая форма)
|
||||
*/
|
||||
private determineOrganizationType(company: DaDataCompany): 'FULFILLMENT' | 'SELLER' {
|
||||
const opfCode = company.data.opf?.code
|
||||
|
||||
// Индивидуальные предприниматели чаще работают как селлеры
|
||||
if (company.data.type === 'INDIVIDUAL' || opfCode === '50102') {
|
||||
return 'SELLER'
|
||||
}
|
||||
|
||||
// ООО, АО и другие юридические лица чаще работают с фулфилментом
|
||||
return 'FULFILLMENT'
|
||||
}
|
||||
|
||||
/**
|
||||
* Валидирует ИНН по контрольной сумме
|
||||
*/
|
||||
validateInn(inn: string): boolean {
|
||||
const digits = inn.replace(/\D/g, '')
|
||||
|
||||
if (digits.length !== 10 && digits.length !== 12) {
|
||||
return false
|
||||
}
|
||||
|
||||
// Проверяем контрольную сумму для 10-значного ИНН (юридические лица)
|
||||
if (digits.length === 10) {
|
||||
const checksum = this.calculateInn10Checksum(digits)
|
||||
return checksum === parseInt(digits[9])
|
||||
}
|
||||
|
||||
// Проверяем контрольную сумму для 12-значного ИНН (ИП)
|
||||
if (digits.length === 12) {
|
||||
const checksum1 = this.calculateInn12Checksum1(digits)
|
||||
const checksum2 = this.calculateInn12Checksum2(digits)
|
||||
return checksum1 === parseInt(digits[10]) && checksum2 === parseInt(digits[11])
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
private calculateInn10Checksum(inn: string): number {
|
||||
const weights = [2, 4, 10, 3, 5, 9, 4, 6, 8]
|
||||
let sum = 0
|
||||
|
||||
for (let i = 0; i < 9; i++) {
|
||||
sum += parseInt(inn[i]) * weights[i]
|
||||
}
|
||||
|
||||
return sum % 11 % 10
|
||||
}
|
||||
|
||||
private calculateInn12Checksum1(inn: string): number {
|
||||
const weights = [7, 2, 4, 10, 3, 5, 9, 4, 6, 8]
|
||||
let sum = 0
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
sum += parseInt(inn[i]) * weights[i]
|
||||
}
|
||||
|
||||
return sum % 11 % 10
|
||||
}
|
||||
|
||||
private calculateInn12Checksum2(inn: string): number {
|
||||
const weights = [3, 7, 2, 4, 10, 3, 5, 9, 4, 6, 8]
|
||||
let sum = 0
|
||||
|
||||
for (let i = 0; i < 11; i++) {
|
||||
sum += parseInt(inn[i]) * weights[i]
|
||||
}
|
||||
|
||||
return sum % 11 % 10
|
||||
}
|
||||
}
|
||||
223
src/services/marketplace-service.ts
Normal file
223
src/services/marketplace-service.ts
Normal file
@ -0,0 +1,223 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export interface MarketplaceValidationResult {
|
||||
isValid: boolean
|
||||
message: string
|
||||
data?: {
|
||||
sellerId?: string
|
||||
sellerName?: string
|
||||
[key: string]: unknown
|
||||
}
|
||||
}
|
||||
|
||||
export interface WildberriesSellerInfo {
|
||||
id: number
|
||||
name: string
|
||||
inn: string
|
||||
kpp?: string
|
||||
}
|
||||
|
||||
export interface OzonSellerInfo {
|
||||
id: number
|
||||
name: string
|
||||
status: string
|
||||
}
|
||||
|
||||
export class MarketplaceService {
|
||||
private wbApiUrl: string
|
||||
private ozonApiUrl: string
|
||||
|
||||
constructor() {
|
||||
this.wbApiUrl = process.env.WILDBERRIES_API_URL || 'https://common-api.wildberries.ru'
|
||||
this.ozonApiUrl = process.env.OZON_API_URL || 'https://api-seller.ozon.ru'
|
||||
}
|
||||
|
||||
/**
|
||||
* Валидирует API ключ Wildberries
|
||||
*/
|
||||
async validateWildberriesApiKey(apiKey: string): Promise<MarketplaceValidationResult> {
|
||||
try {
|
||||
// Пытаемся получить информацию о продавце
|
||||
const response = await axios.get(
|
||||
`${this.wbApiUrl}/api/v1/seller-info`,
|
||||
{
|
||||
headers: {
|
||||
'Authorization': apiKey,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
timeout: 10000
|
||||
}
|
||||
)
|
||||
|
||||
if (response.status === 200 && response.data) {
|
||||
const sellerData = response.data
|
||||
|
||||
return {
|
||||
isValid: true,
|
||||
message: 'API ключ Wildberries валиден',
|
||||
data: {
|
||||
sellerId: sellerData.id?.toString(),
|
||||
sellerName: sellerData.name || sellerData.supplierName,
|
||||
inn: sellerData.inn
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Не удалось получить информацию о продавце Wildberries'
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Wildberries API validation error:', error)
|
||||
|
||||
if (axios.isAxiosError(error)) {
|
||||
if (error.response?.status === 401) {
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Неверный API ключ Wildberries'
|
||||
}
|
||||
}
|
||||
|
||||
if (error.response?.status === 403) {
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Доступ запрещён. Проверьте права API ключа Wildberries'
|
||||
}
|
||||
}
|
||||
|
||||
if (error.code === 'ECONNABORTED') {
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Превышено время ожидания ответа от Wildberries API'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Ошибка при проверке API ключа Wildberries'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Валидирует API ключ Ozon
|
||||
*/
|
||||
async validateOzonApiKey(apiKey: string, clientId?: string): Promise<MarketplaceValidationResult> {
|
||||
try {
|
||||
// Для Ozon нужен Client-Id
|
||||
if (!clientId) {
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Для Ozon API требуется Client-Id'
|
||||
}
|
||||
}
|
||||
|
||||
// Пытаемся получить информацию о продавце
|
||||
const response = await axios.post(
|
||||
`${this.ozonApiUrl}/v1/seller/info`,
|
||||
{},
|
||||
{
|
||||
headers: {
|
||||
'Api-Key': apiKey,
|
||||
'Client-Id': clientId,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
timeout: 10000
|
||||
}
|
||||
)
|
||||
|
||||
if (response.status === 200 && response.data?.result) {
|
||||
const sellerData = response.data.result as OzonSellerInfo
|
||||
|
||||
return {
|
||||
isValid: true,
|
||||
message: 'API ключ Ozon валиден',
|
||||
data: {
|
||||
sellerId: sellerData.id?.toString(),
|
||||
sellerName: sellerData.name,
|
||||
status: sellerData.status
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Не удалось получить информацию о продавце Ozon'
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Ozon API validation error:', error)
|
||||
|
||||
if (axios.isAxiosError(error)) {
|
||||
if (error.response?.status === 401) {
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Неверный API ключ или Client-Id для Ozon'
|
||||
}
|
||||
}
|
||||
|
||||
if (error.response?.status === 403) {
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Доступ запрещён. Проверьте права API ключа Ozon'
|
||||
}
|
||||
}
|
||||
|
||||
if (error.code === 'ECONNABORTED') {
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Превышено время ожидания ответа от Ozon API'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Ошибка при проверке API ключа Ozon'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Общий метод валидации API ключа по типу маркетплейса
|
||||
*/
|
||||
async validateApiKey(
|
||||
marketplace: 'WILDBERRIES' | 'OZON',
|
||||
apiKey: string,
|
||||
clientId?: string
|
||||
): Promise<MarketplaceValidationResult> {
|
||||
switch (marketplace) {
|
||||
case 'WILDBERRIES':
|
||||
return this.validateWildberriesApiKey(apiKey)
|
||||
case 'OZON':
|
||||
return this.validateOzonApiKey(apiKey, clientId)
|
||||
default:
|
||||
return {
|
||||
isValid: false,
|
||||
message: 'Неподдерживаемый тип маркетплейса'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Проверяет формат API ключа перед отправкой запроса
|
||||
*/
|
||||
validateApiKeyFormat(marketplace: 'WILDBERRIES' | 'OZON', apiKey: string): boolean {
|
||||
if (!apiKey || typeof apiKey !== 'string') {
|
||||
return false
|
||||
}
|
||||
|
||||
switch (marketplace) {
|
||||
case 'WILDBERRIES':
|
||||
// Wildberries API ключи обычно содержат буквы, цифры и дефисы
|
||||
return /^[a-zA-Z0-9\-_]{10,}$/.test(apiKey)
|
||||
case 'OZON':
|
||||
// Ozon API ключи обычно содержат буквы, цифры и дефисы
|
||||
return /^[a-zA-Z0-9\-_]{10,}$/.test(apiKey)
|
||||
default:
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
78
src/services/s3-service.ts
Normal file
78
src/services/s3-service.ts
Normal file
@ -0,0 +1,78 @@
|
||||
interface S3Config {
|
||||
accessKeyId: string
|
||||
secretAccessKey: string
|
||||
region: string
|
||||
endpoint: string
|
||||
bucket: string
|
||||
}
|
||||
|
||||
const s3Config: S3Config = {
|
||||
accessKeyId: 'I6XD2OR7YO2ZN6L6Z629',
|
||||
secretAccessKey: '9xCOoafisG0aB9lJNvdLO1UuK73fBvMcpHMdijrJ',
|
||||
region: 'ru-1',
|
||||
endpoint: 'https://s3.twcstorage.ru',
|
||||
bucket: '617774af-sfera'
|
||||
}
|
||||
|
||||
export class S3Service {
|
||||
private static async createSignedUrl(fileName: string, fileType: string): Promise<string> {
|
||||
// Для простоты пока используем прямую загрузку через fetch
|
||||
// В продакшене лучше генерировать signed URLs на backend
|
||||
const timestamp = Date.now()
|
||||
const key = `avatars/${timestamp}-${fileName}`
|
||||
|
||||
return key
|
||||
}
|
||||
|
||||
static async uploadAvatar(file: File, userId: string): Promise<string> {
|
||||
const fileName = `${userId}-${Date.now()}.${file.name.split('.').pop()}`
|
||||
const key = `avatars/${fileName}`
|
||||
|
||||
try {
|
||||
// Создаем FormData для загрузки
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('key', key)
|
||||
formData.append('bucket', s3Config.bucket)
|
||||
|
||||
// Пока используем простую загрузку через наш API
|
||||
// Позже можно будет сделать прямую загрузку в S3
|
||||
const response = await fetch('/api/upload-avatar', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to upload avatar')
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
return result.url
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error uploading avatar:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
static getAvatarUrl(key: string): string {
|
||||
return `${s3Config.endpoint}/${s3Config.bucket}/${key}`
|
||||
}
|
||||
|
||||
static async deleteAvatar(key: string): Promise<void> {
|
||||
try {
|
||||
await fetch('/api/delete-avatar', {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ key })
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error deleting avatar:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default S3Service
|
||||
243
src/services/sms-service.ts
Normal file
243
src/services/sms-service.ts
Normal file
@ -0,0 +1,243 @@
|
||||
import axios from 'axios'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
|
||||
export interface SmsResponse {
|
||||
success: boolean
|
||||
message: string
|
||||
}
|
||||
|
||||
export interface SmsVerificationResponse {
|
||||
success: boolean
|
||||
message: string
|
||||
}
|
||||
|
||||
export class SmsService {
|
||||
private email: string
|
||||
private apiKey: string
|
||||
private isDevelopment: boolean
|
||||
|
||||
constructor() {
|
||||
this.email = process.env.SMS_AERO_EMAIL!
|
||||
this.apiKey = process.env.SMS_AERO_API_KEY!
|
||||
this.isDevelopment = process.env.NODE_ENV === 'development' || process.env.SMS_DEV_MODE === 'true'
|
||||
|
||||
if (!this.isDevelopment && (!this.email || !this.apiKey)) {
|
||||
throw new Error('SMS Aero credentials not configured')
|
||||
}
|
||||
}
|
||||
|
||||
private generateSmsCode(): string {
|
||||
if (this.isDevelopment) {
|
||||
return '1234'
|
||||
}
|
||||
return Math.floor(1000 + Math.random() * 9000).toString()
|
||||
}
|
||||
|
||||
private validatePhoneNumber(phone: string): boolean {
|
||||
const phoneRegex = /^7\d{10}$/
|
||||
return phoneRegex.test(phone)
|
||||
}
|
||||
|
||||
private formatPhoneNumber(phone: string): string {
|
||||
// Убираем все символы кроме цифр
|
||||
const cleanPhone = phone.replace(/\D/g, '')
|
||||
|
||||
// Если номер начинается с 8, заменяем на 7
|
||||
if (cleanPhone.startsWith('8')) {
|
||||
return '7' + cleanPhone.slice(1)
|
||||
}
|
||||
|
||||
// Если номер начинается с +7, убираем +
|
||||
if (cleanPhone.startsWith('7')) {
|
||||
return cleanPhone
|
||||
}
|
||||
|
||||
// Если номер без кода страны, добавляем 7
|
||||
if (cleanPhone.length === 10) {
|
||||
return '7' + cleanPhone
|
||||
}
|
||||
|
||||
return cleanPhone
|
||||
}
|
||||
|
||||
async sendSmsCode(phone: string): Promise<SmsResponse> {
|
||||
try {
|
||||
const formattedPhone = this.formatPhoneNumber(phone)
|
||||
|
||||
if (!this.validatePhoneNumber(formattedPhone)) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Неверный формат номера телефона'
|
||||
}
|
||||
}
|
||||
|
||||
const code = this.generateSmsCode()
|
||||
const expiresAt = new Date(Date.now() + 5 * 60 * 1000) // 5 минут
|
||||
|
||||
// Удаляем старые коды для этого номера
|
||||
await prisma.smsCode.deleteMany({
|
||||
where: { phone: formattedPhone }
|
||||
})
|
||||
|
||||
// Сохраняем код в базе данных
|
||||
await prisma.smsCode.create({
|
||||
data: {
|
||||
code,
|
||||
phone: formattedPhone,
|
||||
expiresAt,
|
||||
attempts: 0,
|
||||
maxAttempts: 3
|
||||
}
|
||||
})
|
||||
|
||||
// В режиме разработки не отправляем SMS
|
||||
if (this.isDevelopment) {
|
||||
console.log(`Development mode: SMS code ${code} for phone ${formattedPhone}`)
|
||||
return {
|
||||
success: true,
|
||||
message: 'SMS код отправлен успешно (режим разработки)'
|
||||
}
|
||||
}
|
||||
|
||||
// Отправляем SMS через SMS Aero API с HTTP Basic Auth
|
||||
const response = await axios.get(
|
||||
`https://gate.smsaero.ru/v2/sms/send`,
|
||||
{
|
||||
params: {
|
||||
number: formattedPhone,
|
||||
text: `Код подтверждения SferaV: ${code}`,
|
||||
sign: 'SMS Aero'
|
||||
},
|
||||
auth: {
|
||||
username: this.email,
|
||||
password: this.apiKey
|
||||
},
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
console.log('SMS Aero response:', response.data)
|
||||
|
||||
if (response.data.success) {
|
||||
return {
|
||||
success: true,
|
||||
message: 'SMS код отправлен успешно'
|
||||
}
|
||||
} else {
|
||||
console.error('SMS Aero API error:', response.data)
|
||||
return {
|
||||
success: false,
|
||||
message: response.data.message || 'Ошибка при отправке SMS'
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error: unknown) {
|
||||
console.error('Error sending SMS:', error)
|
||||
|
||||
// Детальная информация об ошибке
|
||||
if (axios.isAxiosError(error)) {
|
||||
console.error('Response status:', error.response?.status)
|
||||
console.error('Response data:', error.response?.data)
|
||||
|
||||
if (error.response?.status === 401) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка авторизации SMS API. Проверьте настройки.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при отправке SMS'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async verifySmsCode(phone: string, code: string): Promise<SmsVerificationResponse> {
|
||||
try {
|
||||
const formattedPhone = this.formatPhoneNumber(phone)
|
||||
|
||||
if (!this.validatePhoneNumber(formattedPhone)) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Неверный формат номера телефона'
|
||||
}
|
||||
}
|
||||
|
||||
// Ищем активный код для этого номера
|
||||
const smsCode = await prisma.smsCode.findFirst({
|
||||
where: {
|
||||
phone: formattedPhone,
|
||||
isUsed: false,
|
||||
expiresAt: {
|
||||
gte: new Date()
|
||||
}
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: 'desc'
|
||||
}
|
||||
})
|
||||
|
||||
if (!smsCode) {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Код не найден или истек'
|
||||
}
|
||||
}
|
||||
|
||||
// Проверяем количество попыток
|
||||
if (smsCode.attempts >= smsCode.maxAttempts) {
|
||||
// Помечаем код как использованный при превышении лимита попыток
|
||||
await prisma.smsCode.update({
|
||||
where: { id: smsCode.id },
|
||||
data: { isUsed: true }
|
||||
})
|
||||
|
||||
return {
|
||||
success: false,
|
||||
message: 'Превышено количество попыток ввода кода'
|
||||
}
|
||||
}
|
||||
|
||||
// Проверяем правильность кода
|
||||
if (smsCode.code !== code) {
|
||||
// Увеличиваем счетчик попыток при неправильном коде
|
||||
await prisma.smsCode.update({
|
||||
where: { id: smsCode.id },
|
||||
data: { attempts: smsCode.attempts + 1 }
|
||||
})
|
||||
|
||||
const remainingAttempts = smsCode.maxAttempts - smsCode.attempts - 1
|
||||
return {
|
||||
success: false,
|
||||
message: remainingAttempts > 0
|
||||
? `Неверный код. Осталось попыток: ${remainingAttempts}`
|
||||
: 'Неверный код. Превышено количество попыток'
|
||||
}
|
||||
}
|
||||
|
||||
// Код правильный - помечаем как использованный
|
||||
await prisma.smsCode.update({
|
||||
where: { id: smsCode.id },
|
||||
data: { isUsed: true }
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Код подтвержден успешно'
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error verifying SMS code:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Ошибка при проверке кода'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user