Leon SerfatyandClaude Opus 4.8
857b9a7811
Property Management Network — Next.js 16 (App Router), Better Auth, Drizzle ORM over PostgreSQL, Stripe, OpenAI, Resend. Includes: - Security hardening: access-control/IDOR fixes, TLS-by-default DB layer, constant-time cron auth, strict security headers, atomic AI quota gating, HTML/email output encoding, demo-backdoor disabled in production. - Superadmin dashboard at /admin (overview/MRR, server-paginated users with ban/impersonate/plan/delete, billing, platform activity + admin audit log, AI usage, system health) via the Better Auth admin plugin. - Seed/migration utility scripts under scripts/. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
93 lines
3.9 KiB
TypeScript
93 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import {
|
|
LayoutDashboard, Users, CreditCard, Activity, Brain, Server,
|
|
ArrowLeft, LogOut, ShieldCheck,
|
|
} from "lucide-react"
|
|
import { cn, initials } from "@/lib/utils"
|
|
import { signOut } from "@/app/actions/auth"
|
|
|
|
export const ADMIN_NAV = [
|
|
{ label: "Overview", href: "/admin", icon: LayoutDashboard },
|
|
{ label: "Users", href: "/admin/users", icon: Users },
|
|
{ label: "Billing", href: "/admin/billing", icon: CreditCard },
|
|
{ label: "Activity & Audit", href: "/admin/activity", icon: Activity },
|
|
{ label: "AI Usage", href: "/admin/ai-usage", icon: Brain },
|
|
{ label: "System", href: "/admin/system", icon: Server },
|
|
]
|
|
|
|
function isActive(pathname: string, href: string) {
|
|
return href === "/admin" ? pathname === "/admin" : pathname.startsWith(href)
|
|
}
|
|
|
|
export function AdminSidebar({ email, name }: { email: string; name: string }) {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<aside className="hidden md:flex h-screen w-60 shrink-0 flex-col border-r border-white/[0.06] bg-[#111118]">
|
|
<div className="flex h-16 items-center gap-2.5 border-b border-white/[0.06] px-5">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-rose-500 to-red-600 shadow-lg shadow-rose-500/20">
|
|
<ShieldCheck className="h-4 w-4 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-bold leading-none text-white">Admin</p>
|
|
<p className="mt-0.5 text-[10px] text-white/40">Control Panel</p>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-3">
|
|
<p className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-widest text-white/20">Platform</p>
|
|
{ADMIN_NAV.map(({ label, href, icon: Icon }) => {
|
|
const active = isActive(pathname, href)
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
"group relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-all",
|
|
active ? "bg-rose-600/15 text-rose-200" : "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
|
|
)}
|
|
>
|
|
{active && <div className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-rose-500" />}
|
|
<Icon className={cn("h-4 w-4 shrink-0", active ? "text-rose-400" : "text-white/30 group-hover:text-white/60")} />
|
|
<span className="flex-1">{label}</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
|
|
<div className="my-3 border-t border-white/[0.06]" />
|
|
<Link
|
|
href="/dashboard"
|
|
className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-white/50 transition hover:bg-white/[0.05] hover:text-white/90"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 shrink-0 text-white/30" />
|
|
Back to App
|
|
</Link>
|
|
</nav>
|
|
|
|
<div className="shrink-0 border-t border-white/[0.06] p-3">
|
|
<div className="flex items-center gap-3 rounded-xl px-2 py-2">
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-rose-500 to-red-600 text-xs font-bold text-white">
|
|
{name ? initials(name) : "A"}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-xs font-semibold text-white">{name || "Admin"}</p>
|
|
<p className="truncate text-[10px] text-white/40">{email}</p>
|
|
</div>
|
|
<form action={signOut}>
|
|
<button
|
|
type="submit"
|
|
title="Sign out"
|
|
className="rounded-lg p-1.5 text-white/20 transition hover:bg-red-500/10 hover:text-red-400"
|
|
>
|
|
<LogOut className="h-3.5 w-3.5" />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|