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

2025-07-16 18:00:41 +03:00
parent d260749bc9
commit 823ef9a28c
69 changed files with 15539 additions and 210 deletions
--- a/src/components/auth/cabinet-select-step.tsx
+++ b/src/components/auth/cabinet-select-step.tsx
@ -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>
+  )
+}