162 lines
4.2 KiB
TypeScript
162 lines
4.2 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { signOut } from "next-auth/react"
|
|
import {
|
|
Users,
|
|
Settings,
|
|
Upload,
|
|
BarChart3,
|
|
Calendar,
|
|
LogOut,
|
|
Home,
|
|
Palette
|
|
} from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
import { UserRole } from "@/types/database"
|
|
|
|
interface AdminSidebarProps {
|
|
user: {
|
|
id: string
|
|
name: string
|
|
email: string
|
|
role: UserRole
|
|
image?: string
|
|
}
|
|
}
|
|
|
|
const navigation = [
|
|
{
|
|
name: "Dashboard",
|
|
href: "/admin",
|
|
icon: Home,
|
|
roles: [UserRole.SHOP_ADMIN, UserRole.SUPER_ADMIN],
|
|
},
|
|
{
|
|
name: "Artists",
|
|
href: "/admin/artists",
|
|
icon: Users,
|
|
roles: [UserRole.SHOP_ADMIN, UserRole.SUPER_ADMIN],
|
|
},
|
|
{
|
|
name: "Portfolio",
|
|
href: "/admin/portfolio",
|
|
icon: Palette,
|
|
roles: [UserRole.SHOP_ADMIN, UserRole.SUPER_ADMIN],
|
|
},
|
|
{
|
|
name: "Calendar",
|
|
href: "/admin/calendar",
|
|
icon: Calendar,
|
|
roles: [UserRole.SHOP_ADMIN, UserRole.SUPER_ADMIN],
|
|
},
|
|
{
|
|
name: "Analytics",
|
|
href: "/admin/analytics",
|
|
icon: BarChart3,
|
|
roles: [UserRole.SHOP_ADMIN, UserRole.SUPER_ADMIN],
|
|
},
|
|
{
|
|
name: "File Manager",
|
|
href: "/admin/uploads",
|
|
icon: Upload,
|
|
roles: [UserRole.SHOP_ADMIN, UserRole.SUPER_ADMIN],
|
|
},
|
|
{
|
|
name: "Settings",
|
|
href: "/admin/settings",
|
|
icon: Settings,
|
|
roles: [UserRole.SHOP_ADMIN, UserRole.SUPER_ADMIN],
|
|
},
|
|
]
|
|
|
|
export function AdminSidebar({ user }: AdminSidebarProps) {
|
|
const pathname = usePathname()
|
|
|
|
// Filter navigation items based on user role
|
|
const filteredNavigation = navigation.filter(item =>
|
|
item.roles.includes(user.role)
|
|
)
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut({ callbackUrl: "/" })
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col w-64 bg-white shadow-lg">
|
|
{/* Logo/Brand */}
|
|
<div className="flex items-center justify-center h-16 px-4 border-b border-gray-200">
|
|
<Link href="/" className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 bg-black rounded-md flex items-center justify-center">
|
|
<span className="text-white font-bold text-sm">U</span>
|
|
</div>
|
|
<span className="text-xl font-bold text-gray-900">United Admin</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 px-4 py-6 space-y-2">
|
|
{filteredNavigation.map((item) => {
|
|
const isActive = pathname === item.href
|
|
const Icon = item.icon
|
|
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={cn(
|
|
"flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors",
|
|
isActive
|
|
? "bg-gray-100 text-gray-900"
|
|
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
|
|
)}
|
|
>
|
|
<Icon className="w-5 h-5 mr-3" />
|
|
{item.name}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
{/* User info and sign out */}
|
|
<div className="border-t border-gray-200 p-4">
|
|
<div className="flex items-center space-x-3 mb-4">
|
|
<div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
|
|
{user.image ? (
|
|
<img
|
|
src={user.image}
|
|
alt={user.name}
|
|
className="w-10 h-10 rounded-full"
|
|
/>
|
|
) : (
|
|
<span className="text-sm font-medium text-gray-600">
|
|
{user.name.charAt(0).toUpperCase()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-gray-900 truncate">
|
|
{user.name}
|
|
</p>
|
|
<p className="text-xs text-gray-500 truncate">
|
|
{user.role.replace('_', ' ').toLowerCase()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleSignOut}
|
|
className="w-full justify-start"
|
|
>
|
|
<LogOut className="w-4 h-4 mr-2" />
|
|
Sign Out
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|