Добавлены новые зависимости, обновлены стили и улучшена структура проекта. Обновлен 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/dashboard/sidebar.tsx
+++ b/src/components/dashboard/sidebar.tsx
@ -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>
+  )
+}