frontend admin dashboard changes
This commit is contained in:
parent
2264f58f07
commit
f26633fb6c
176
src/components/admin/admin-layout.tsx
Normal file
176
src/components/admin/admin-layout.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
246
src/components/admin/admin-sidebar.tsx
Normal file
246
src/components/admin/admin-sidebar.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user