frontend admin dashboard changes

src/components/admin/admin-layout.tsx

@@ -0,0 +1,176 @@
+"use client"
+
+import { useState } from 'react'
+import { AdminSidebar } from './admin-sidebar'
+import { AdminTemplatesManager } from './admin-templates-manager'
+import { AdminDashboard } from './admin-dashboard'
+import { TemplateFeaturesManager } from './template-features-manager'
+import { AdminNotificationsPanel } from './admin-notifications-panel'
+
+type AdminView = 
+  | 'dashboard' 
+  | 'templates' 
+  | 'features' 
+  | 'ai-features'
+  | 'users' 
+  | 'notifications' 
+  | 'analytics' 
+  | 'settings'
+  | 'create-template'
+  | 'add-feature'
+  | 'ai-analyze'
+
+export function AdminLayout() {
+  const [currentView, setCurrentView] = useState<AdminView>('dashboard')
+  const [featuresDialogOpen, setFeaturesDialogOpen] = useState(false)
+
+  const renderMainContent = () => {
+    switch (currentView) {
+      case 'dashboard':
+        return <AdminDashboard />
+      
+      case 'templates':
+      case 'create-template':
+        return <AdminTemplatesManager />
+      
+      case 'features':
+      case 'add-feature':
+        const defaultTemplate = {
+          id: "default",
+          type: "default",
+          title: "Default Template",
+          description: "Default template for feature management",
+          complexity: "medium" as const,
+          approved: true,
+          usage_count: 0,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+          is_custom: false,
+          status: "approved" as const
+        }
+        return (
+          <TemplateFeaturesManager 
+            template={defaultTemplate}
+            open={true}
+            onOpenChange={(open) => {
+              if (!open) {
+                setCurrentView('dashboard')
+              }
+            }}
+          />
+        )
+      
+      case 'ai-features':
+      case 'ai-analyze':
+        return (
+          <div className="max-w-7xl mx-auto space-y-6">
+            <div className="text-center space-y-4">
+              <h1 className="text-4xl font-bold text-white">AI Feature Analysis</h1>
+              <p className="text-xl text-white/60">AI-powered feature creation and optimization</p>
+            </div>
+            <div className="bg-white/5 border border-white/10 rounded-xl p-8 text-center">
+              <div className="text-6xl mb-4">🤖</div>
+              <h3 className="text-2xl font-bold text-white mb-2">AI Feature Creator</h3>
+              <p className="text-white/60 mb-6">Analyze project requirements and generate optimized features</p>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="bg-white/5 rounded-lg p-4">
+                  <h4 className="font-semibold text-white mb-2">Smart Analysis</h4>
+                  <p className="text-white/60 text-sm">AI analyzes your project type and suggests relevant features</p>
+                </div>
+                <div className="bg-white/5 rounded-lg p-4">
+                  <h4 className="font-semibold text-white mb-2">Essential Features</h4>
+                  <p className="text-white/60 text-sm">Creates essential features that integrate with your template</p>
+                </div>
+                <div className="bg-white/5 rounded-lg p-4">
+                  <h4 className="font-semibold text-white mb-2">Auto-Optimization</h4>
+                  <p className="text-white/60 text-sm">Optimizes complexity and requirements automatically</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      
+      case 'users':
+        return (
+          <div className="max-w-7xl mx-auto space-y-6">
+            <div className="text-center space-y-4">
+              <h1 className="text-4xl font-bold text-white">User Management</h1>
+              <p className="text-xl text-white/60">Manage user accounts and permissions</p>
+            </div>
+            <div className="bg-white/5 border border-white/10 rounded-xl p-8 text-center">
+              <div className="text-6xl mb-4">👥</div>
+              <h3 className="text-2xl font-bold text-white mb-2">User Administration</h3>
+              <p className="text-white/60">User management features coming soon</p>
+            </div>
+          </div>
+        )
+      
+      case 'notifications':
+        return <AdminNotificationsPanel open={true} onOpenChange={() => {}} />
+      
+      case 'analytics':
+        return (
+          <div className="max-w-7xl mx-auto space-y-6">
+            <div className="text-center space-y-4">
+              <h1 className="text-4xl font-bold text-white">Analytics Dashboard</h1>
+              <p className="text-xl text-white/60">Usage statistics and performance metrics</p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <div className="bg-white/5 border border-white/10 rounded-xl p-6">
+                <h3 className="text-lg font-semibold text-white mb-2">Total Templates</h3>
+                <div className="text-3xl font-bold text-orange-400">24</div>
+                <p className="text-white/60 text-sm">+3 this week</p>
+              </div>
+              <div className="bg-white/5 border border-white/10 rounded-xl p-6">
+                <h3 className="text-lg font-semibold text-white mb-2">Active Users</h3>
+                <div className="text-3xl font-bold text-emerald-400">156</div>
+                <p className="text-white/60 text-sm">+12 this week</p>
+              </div>
+              <div className="bg-white/5 border border-white/10 rounded-xl p-6">
+                <h3 className="text-lg font-semibold text-white mb-2">Features Created</h3>
+                <div className="text-3xl font-bold text-blue-400">89</div>
+                <p className="text-white/60 text-sm">+7 this week</p>
+              </div>
+              <div className="bg-white/5 border border-white/10 rounded-xl p-6">
+                <h3 className="text-lg font-semibold text-white mb-2">AI Analyses</h3>
+                <div className="text-3xl font-bold text-purple-400">42</div>
+                <p className="text-white/60 text-sm">+8 this week</p>
+              </div>
+            </div>
+          </div>
+        )
+      
+      case 'settings':
+        return (
+          <div className="max-w-7xl mx-auto space-y-6">
+            <div className="text-center space-y-4">
+              <h1 className="text-4xl font-bold text-white">System Settings</h1>
+              <p className="text-xl text-white/60">Configure system preferences and options</p>
+            </div>
+            <div className="bg-white/5 border border-white/10 rounded-xl p-8 text-center">
+              <div className="text-6xl mb-4">⚙️</div>
+              <h3 className="text-2xl font-bold text-white mb-2">Configuration Panel</h3>
+              <p className="text-white/60">System settings panel coming soon</p>
+            </div>
+          </div>
+        )
+      
+      default:
+        return <AdminDashboard />
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-black flex">
+      <AdminSidebar 
+        currentView={currentView} 
+        onViewChange={(view) => setCurrentView(view as AdminView)}
+      />
+      <main className="flex-1 overflow-y-auto">
+        <div className="p-8">
+          {renderMainContent()}
+        </div>
+      </main>
+    </div>
+  )
+}

src/components/admin/admin-sidebar.tsx

@@ -0,0 +1,246 @@
+"use client"
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { 
+  LayoutDashboard, 
+  FileText, 
+  Settings, 
+  Users, 
+  Bell, 
+  Plus,
+  Search,
+  Filter,
+  ChevronLeft,
+  ChevronRight,
+  Home,
+  Database,
+  Layers,
+  Zap,
+  BarChart3,
+  Globe,
+  Code
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface AdminSidebarProps {
+  currentView: string
+  onViewChange: (view: string) => void
+  className?: string
+}
+
+export function AdminSidebar({ currentView, onViewChange, className }: AdminSidebarProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  const navigationItems = [
+    {
+      id: 'dashboard',
+      label: 'Dashboard',
+      icon: LayoutDashboard,
+      description: 'Overview & Analytics',
+      badge: null
+    },
+    {
+      id: 'templates',
+      label: 'Templates',
+      icon: FileText,
+      description: 'Manage Templates',
+      badge: null
+    },
+    {
+      id: 'features',
+      label: 'Features',
+      icon: Layers,
+      description: 'Feature Management',
+      badge: null
+    },
+    {
+      id: 'ai-features',
+      label: 'AI Features',
+      icon: Zap,
+      description: 'AI-Powered Creation',
+      badge: 'NEW'
+    },
+    {
+      id: 'users',
+      label: 'Users',
+      icon: Users,
+      description: 'User Management',
+      badge: null
+    },
+    {
+      id: 'notifications',
+      label: 'Notifications',
+      icon: Bell,
+      description: 'System Alerts',
+      badge: '3'
+    },
+    {
+      id: 'analytics',
+      label: 'Analytics',
+      icon: BarChart3,
+      description: 'Usage Statistics',
+      badge: null
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      icon: Settings,
+      description: 'System Configuration',
+      badge: null
+    }
+  ]
+
+  const quickActions = [
+    {
+      id: 'create-template',
+      label: 'New Template',
+      icon: Plus,
+      action: () => onViewChange('create-template')
+    },
+    {
+      id: 'add-feature',
+      label: 'Add Feature',
+      icon: Layers,
+      action: () => onViewChange('add-feature')
+    },
+    {
+      id: 'ai-analyze',
+      label: 'AI Analyze',
+      icon: Zap,
+      action: () => onViewChange('ai-analyze')
+    }
+  ]
+
+  return (
+    <div className={cn(
+      "bg-gray-900/50 border-r border-white/10 flex flex-col transition-all duration-300",
+      isCollapsed ? "w-16" : "w-64",
+      className
+    )}>
+      {/* Header */}
+      <div className="p-4 border-b border-white/10">
+        <div className="flex items-center justify-between">
+          {!isCollapsed && (
+            <div>
+              <h2 className="text-white font-semibold text-lg">Admin Panel</h2>
+              <p className="text-white/60 text-sm">CodeNuk Management</p>
+            </div>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            className="text-white/60 hover:text-white hover:bg-white/10"
+          >
+            {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+          </Button>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="p-2">
+          {!isCollapsed && (
+            <div className="text-white/40 text-xs font-medium uppercase tracking-wider px-3 py-2">
+              Navigation
+            </div>
+          )}
+          <nav className="space-y-1">
+            {navigationItems.map((item) => {
+              const Icon = item.icon
+              const isActive = currentView === item.id
+              
+              return (
+                <Button
+                  key={item.id}
+                  variant="ghost"
+                  onClick={() => onViewChange(item.id)}
+                  className={cn(
+                    "w-full justify-start text-left transition-colors",
+                    isActive 
+                      ? "bg-orange-500/20 text-orange-400 border-r-2 border-orange-400" 
+                      : "text-white/70 hover:text-white hover:bg-white/10",
+                    isCollapsed ? "px-2" : "px-3"
+                  )}
+                >
+                  <Icon className={cn("h-4 w-4", isCollapsed ? "" : "mr-3")} />
+                  {!isCollapsed && (
+                    <>
+                      <div className="flex-1">
+                        <div className="font-medium">{item.label}</div>
+                        <div className="text-xs text-white/50">{item.description}</div>
+                      </div>
+                      {item.badge && (
+                        <Badge 
+                          variant="outline" 
+                          className={cn(
+                            "text-xs",
+                            item.badge === 'NEW' 
+                              ? "bg-emerald-500/20 text-emerald-300 border-emerald-500/30"
+                              : "bg-orange-500/20 text-orange-300 border-orange-500/30"
+                          )}
+                        >
+                          {item.badge}
+                        </Badge>
+                      )}
+                    </>
+                  )}
+                </Button>
+              )
+            })}
+          </nav>
+        </div>
+
+        {/* Quick Actions */}
+        {!isCollapsed && (
+          <div className="p-2 border-t border-white/10 mt-4">
+            <div className="text-white/40 text-xs font-medium uppercase tracking-wider px-3 py-2">
+              Quick Actions
+            </div>
+            <div className="space-y-1">
+              {quickActions.map((action) => {
+                const Icon = action.icon
+                return (
+                  <Button
+                    key={action.id}
+                    variant="outline"
+                    size="sm"
+                    onClick={action.action}
+                    className="w-full justify-start border-white/20 text-white/70 hover:text-white hover:bg-white/10"
+                  >
+                    <Icon className="h-4 w-4 mr-2" />
+                    {action.label}
+                  </Button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="p-4 border-t border-white/10">
+        {!isCollapsed ? (
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-white/60">System Status</span>
+              <div className="flex items-center gap-1">
+                <div className="w-2 h-2 bg-emerald-400 rounded-full"></div>
+                <span className="text-emerald-400 text-xs">Online</span>
+              </div>
+            </div>
+            <div className="text-xs text-white/40">
+              Backend: Connected • DB: Healthy
+            </div>
+          </div>
+        ) : (
+          <div className="flex justify-center">
+            <div className="w-2 h-2 bg-emerald-400 rounded-full"></div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}