349 lines
12 KiB
TypeScript
349 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { useAuth } from "@/contexts/auth-context"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import {
|
|
Bell,
|
|
Settings,
|
|
LogOut,
|
|
User,
|
|
Shield,
|
|
ArrowLeft,
|
|
LayoutDashboard,
|
|
Files,
|
|
Zap,
|
|
Users,
|
|
BarChart3,
|
|
FileText,
|
|
Cog,
|
|
HelpCircle,
|
|
ChevronLeft,
|
|
ChevronRight
|
|
} from "lucide-react"
|
|
import { useState } from "react"
|
|
import { AdminNotificationsPanel } from "@/components/admin/admin-notifications-panel"
|
|
import { useAdminNotifications } from "@/contexts/AdminNotificationContext"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface AdminSidebarLayoutProps {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
interface SidebarItem {
|
|
id: string
|
|
label: string
|
|
icon: React.ComponentType<{ className?: string }>
|
|
href?: string
|
|
badge?: number
|
|
subItems?: SidebarItem[]
|
|
}
|
|
|
|
export function AdminSidebarLayout({ children }: AdminSidebarLayoutProps) {
|
|
const [isLoggingOut, setIsLoggingOut] = useState(false)
|
|
const [showNotifications, setShowNotifications] = useState(false)
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
|
const pathname = usePathname()
|
|
const { user, logout, isAdmin } = useAuth()
|
|
const { unreadCount } = useAdminNotifications()
|
|
|
|
// Handle logout with loading state
|
|
const handleLogout = async () => {
|
|
try {
|
|
setIsLoggingOut(true)
|
|
await logout()
|
|
} catch (error) {
|
|
console.error('Logout failed:', error)
|
|
setIsLoggingOut(false)
|
|
}
|
|
}
|
|
|
|
// Sidebar navigation items
|
|
const sidebarItems: SidebarItem[] = [
|
|
{
|
|
id: "dashboard",
|
|
label: "Dashboard",
|
|
icon: LayoutDashboard,
|
|
href: "/admin"
|
|
},
|
|
{
|
|
id: "features",
|
|
label: "Custom Features",
|
|
icon: Zap,
|
|
href: "/admin?tab=features",
|
|
badge: 0 // This will be updated dynamically
|
|
},
|
|
{
|
|
id: "templates",
|
|
label: "Templates",
|
|
icon: Files,
|
|
href: "/admin/templates"
|
|
},
|
|
{
|
|
id: "users",
|
|
label: "User Management",
|
|
icon: Users,
|
|
href: "/admin/users"
|
|
},
|
|
{
|
|
id: "analytics",
|
|
label: "Analytics",
|
|
icon: BarChart3,
|
|
href: "/admin/analytics"
|
|
},
|
|
{
|
|
id: "settings",
|
|
label: "Settings",
|
|
icon: Cog,
|
|
href: "/admin/settings"
|
|
},
|
|
{
|
|
id: "help",
|
|
label: "Help & Support",
|
|
icon: HelpCircle,
|
|
href: "/admin/help"
|
|
}
|
|
]
|
|
|
|
// Redirect non-admin users
|
|
if (!isAdmin) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="text-center">
|
|
<h1 className="text-2xl font-bold text-red-600 mb-4">Access Denied</h1>
|
|
<p className="text-gray-600 mb-4">You don't have permission to access the admin panel.</p>
|
|
<Link href="/">
|
|
<Button>Go to Home</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const SidebarItem = ({ item, level = 0 }: { item: SidebarItem; level?: number }) => {
|
|
const [isExpanded, setIsExpanded] = useState(false)
|
|
const hasSubItems = item.subItems && item.subItems.length > 0
|
|
const isActive = pathname === item.href || (item.href && pathname.startsWith(item.href))
|
|
|
|
return (
|
|
<div>
|
|
<Link
|
|
href={item.href || "#"}
|
|
onClick={hasSubItems ? (e) => {
|
|
e.preventDefault()
|
|
setIsExpanded(!isExpanded)
|
|
} : undefined}
|
|
className={cn(
|
|
"flex items-center justify-between w-full px-3 py-2 text-sm rounded-lg transition-colors",
|
|
level > 0 && "ml-4 pl-6",
|
|
isActive
|
|
? "bg-orange-500 text-black font-medium"
|
|
: "text-white/80 hover:bg-white/10 hover:text-white",
|
|
sidebarCollapsed && level === 0 && "justify-center px-2"
|
|
)}
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<item.icon className={cn("h-5 w-5", sidebarCollapsed && level === 0 && "h-6 w-6")} />
|
|
{(!sidebarCollapsed || level > 0) && (
|
|
<span className="truncate">{item.label}</span>
|
|
)}
|
|
</div>
|
|
|
|
{!sidebarCollapsed && (
|
|
<div className="flex items-center space-x-2">
|
|
{item.badge !== undefined && item.badge > 0 && (
|
|
<Badge className="bg-red-500 text-white text-xs h-5 w-5 rounded-full p-0 flex items-center justify-center">
|
|
{item.badge}
|
|
</Badge>
|
|
)}
|
|
{hasSubItems && (
|
|
<ChevronRight className={cn("h-4 w-4 transition-transform", isExpanded && "rotate-90")} />
|
|
)}
|
|
</div>
|
|
)}
|
|
</Link>
|
|
|
|
{hasSubItems && isExpanded && !sidebarCollapsed && (
|
|
<div className="mt-1 space-y-1">
|
|
{item.subItems!.map((subItem) => (
|
|
<SidebarItem key={subItem.id} item={subItem} level={level + 1} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-black text-white flex">
|
|
{/* Sidebar */}
|
|
<div className={cn(
|
|
"bg-gray-900 border-r border-white/10 transition-all duration-300 flex flex-col",
|
|
sidebarCollapsed ? "w-16" : "w-64"
|
|
)}>
|
|
{/* Sidebar Header */}
|
|
<div className="p-4 border-b border-white/10">
|
|
<div className="flex items-center justify-between">
|
|
{!sidebarCollapsed && (
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center">
|
|
<span className="text-black font-bold text-sm">C</span>
|
|
</div>
|
|
<span className="text-lg font-bold">Admin</span>
|
|
<Badge className="bg-orange-500 text-black text-xs">
|
|
<Shield className="h-3 w-3 mr-1" />
|
|
Panel
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
|
className="text-white/70 hover:text-white hover:bg-white/10"
|
|
>
|
|
{sidebarCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 p-4 space-y-2">
|
|
{sidebarItems.map((item) => (
|
|
<SidebarItem key={item.id} item={item} />
|
|
))}
|
|
</nav>
|
|
|
|
{/* Sidebar Footer */}
|
|
<div className="p-4 border-t border-white/10">
|
|
{!sidebarCollapsed ? (
|
|
<div className="flex items-center space-x-3">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src="/avatars/01.png" alt={user?.username || user?.email || "User"} />
|
|
<AvatarFallback className="bg-orange-500 text-black">
|
|
{(user?.username && user.username.charAt(0)) || (user?.email && user.email.charAt(0)) || "U"}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-white truncate">
|
|
{user?.username || user?.email || "User"}
|
|
</p>
|
|
<p className="text-xs text-white/60 truncate">Administrator</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex justify-center">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src="/avatars/01.png" alt={user?.username || user?.email || "User"} />
|
|
<AvatarFallback className="bg-orange-500 text-black">
|
|
{(user?.username && user.username.charAt(0)) || (user?.email && user.email.charAt(0)) || "U"}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 flex flex-col">
|
|
{/* Top Header */}
|
|
<header className="bg-black/90 text-white border-b border-white/10 backdrop-blur">
|
|
<div className="px-6 py-4">
|
|
<div className="flex h-8 justify-between items-center">
|
|
{/* Back to Main Site */}
|
|
<div className="flex items-center space-x-4">
|
|
<Link href="/" className="flex items-center space-x-2 text-white/70 hover:text-white">
|
|
<ArrowLeft className="h-5 w-5" />
|
|
<span className="text-sm">Back to Site</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Right side */}
|
|
<div className="flex items-center space-x-4">
|
|
{/* Notifications */}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="relative text-white/80 hover:text-white hover:bg-white/5"
|
|
onClick={() => setShowNotifications(true)}
|
|
>
|
|
<Bell className="h-5 w-5" />
|
|
{unreadCount > 0 && (
|
|
<Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs bg-orange-500 text-black">
|
|
{unreadCount}
|
|
</Badge>
|
|
)}
|
|
</Button>
|
|
|
|
{/* User Menu */}
|
|
{user && user.email && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full cursor-pointer hover:bg-white/5">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src="/avatars/01.png" alt={user.username || user.email || "User"} />
|
|
<AvatarFallback>
|
|
{(user.username && user.username.charAt(0)) || (user.email && user.email.charAt(0)) || "U"}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56 bg-black text-white border-white/10" align="end" forceMount>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">{user.username || user.email || "User"}</p>
|
|
<p className="text-xs leading-none text-white/60">{user.email || "No email"}</p>
|
|
<Badge className="w-fit bg-orange-500 text-black text-xs">
|
|
<Shield className="h-3 w-3 mr-1" />
|
|
Admin
|
|
</Badge>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className="hover:bg-white/5 cursor-pointer">
|
|
<User className="mr-2 h-4 w-4" />
|
|
<span>Profile</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className="hover:bg-white/5 cursor-pointer">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
<span>Settings</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout} className="hover:bg-white/5 cursor-pointer" disabled={isLoggingOut}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>{isLoggingOut ? "Logging out..." : "Log out"}</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content Area */}
|
|
<main className="flex-1 px-6 py-8 overflow-auto">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
|
|
{/* Notifications Panel */}
|
|
<AdminNotificationsPanel
|
|
open={showNotifications}
|
|
onOpenChange={setShowNotifications}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|