first commit

components/admin/AdminSidebar.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { 
+  LayoutDashboard,
+  Users,
+  Package,
+  ShoppingCart,
+  DollarSign,
+  Settings,
+  BarChart3,
+  CreditCard,
+  Tag,
+  ChevronLeft,
+  ChevronRight,
+  Mail,
+  Star
+} from 'lucide-react'
+
+const navigation = [
+  { name: 'Dashboard', href: '/admin', icon: LayoutDashboard },
+  { name: 'Users', href: '/admin/users', icon: Users },
+  { name: 'Products', href: '/admin/products', icon: Package },
+  { name: 'Categories', href: '/admin/categories', icon: Tag },
+  { name: 'Orders', href: '/admin/orders', icon: ShoppingCart },
+  { name: 'Reviews', href: '/admin/reviews', icon: Star },
+  { name: 'Form Responses', href: '/admin/forms', icon: Mail },
+  { name: 'Commissions', href: '/admin/commissions', icon: DollarSign },
+  { name: 'Payouts', href: '/admin/payouts', icon: CreditCard },
+  { name: 'Analytics', href: '/admin/analytics', icon: BarChart3 },
+  { name: 'Settings', href: '/admin/settings', icon: Settings },
+]
+
+export function AdminSidebar() {
+  const pathname = usePathname()
+  const [collapsed, setCollapsed] = useState(false)
+
+  return (
+    <div className={cn(
+      "bg-white border-r border-gray-200 transition-all duration-300",
+      collapsed ? "w-16" : "w-64"
+    )}>
+      <div className="flex h-full flex-col">
+        <div className="flex items-center justify-between p-4 border-b">
+          {!collapsed && (
+            <h2 className="text-lg font-semibold text-gray-900">Admin Panel</h2>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setCollapsed(!collapsed)}
+            className="h-8 w-8 p-0"
+          >
+            {collapsed ? (
+              <ChevronRight className="h-4 w-4" />
+            ) : (
+              <ChevronLeft className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+        
+        <nav className="flex-1 space-y-1 p-4">
+          {navigation.map((item) => {
+            const isActive = pathname === item.href
+            return (
+              <Link
+                key={item.name}
+                href={item.href}
+                className={cn(
+                  "flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-blue-50 text-blue-700"
+                    : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+                )}
+                title={collapsed ? item.name : undefined}
+              >
+                <item.icon className={cn("h-5 w-5", collapsed ? "mx-auto" : "mr-3")} />
+                {!collapsed && <span>{item.name}</span>}
+              </Link>
+            )
+          })}
+        </nav>
+      </div>
+    </div>
+  )
+}