Initial import: property management SaaS + security hardening + admin dashboard
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>
This commit is contained in:
Leon Serfaty
@@ -0,0 +1,307 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
import {
|
||||
LayoutDashboard, Building2, Users, CreditCard,
|
||||
Wrench, FileText, Receipt, Settings, LogOut,
|
||||
X, Menu, ChevronRight, Zap, Sparkles, Bot, BarChart3, Hammer, ClipboardList,
|
||||
PanelLeftClose, PanelLeftOpen, CalendarDays, Activity, Brain, Bell,
|
||||
} from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Logo, LogoMark } from "@/components/shared/logo"
|
||||
import { signOut } from "@/app/actions/auth"
|
||||
import type { Profile } from "@/types"
|
||||
import { initials } from "@/lib/utils"
|
||||
|
||||
const navItems = [
|
||||
{ label: "Dashboard", href: "/dashboard", icon: LayoutDashboard, section: "main" },
|
||||
{ label: "Properties", href: "/properties", icon: Building2, section: "main" },
|
||||
{ label: "Tenants", href: "/tenants", icon: Users, section: "main" },
|
||||
{ label: "Rent Tracker", href: "/rent", icon: CreditCard, section: "main" },
|
||||
{ label: "Maintenance", href: "/maintenance", icon: Wrench, section: "main" },
|
||||
{ label: "Leases", href: "/leases", icon: FileText, section: "main" },
|
||||
{ label: "Expenses", href: "/expenses", icon: Receipt, section: "main" },
|
||||
{ label: "AI Dashboard", href: "/ai-dashboard", icon: Brain, section: "main" },
|
||||
{ label: "AI Assistant", href: "/ai", icon: Bot, section: "main" },
|
||||
{ label: "Reports", href: "/reports", icon: BarChart3, section: "main" },
|
||||
{ label: "Vendors", href: "/vendors", icon: Hammer, section: "main" },
|
||||
{ label: "Inspections", href: "/inspections", icon: ClipboardList, section: "main" },
|
||||
{ label: "Calendar", href: "/calendar", icon: CalendarDays, section: "main" },
|
||||
{ label: "Activity", href: "/activity", icon: Activity, section: "main" },
|
||||
{ label: "AI Insights", href: "/recommendations", icon: Zap, section: "main" },
|
||||
{ label: "AI Impact", href: "/impact", icon: Sparkles, section: "main" },
|
||||
{ label: "Predictions", href: "/predictions", icon: BarChart3, section: "main" },
|
||||
{ label: "Follow-ups", href: "/follow-ups", icon: Bell, section: "main" },
|
||||
]
|
||||
|
||||
const planConfig: Record<string, { label: string; color: string; bg: string; border: string }> = {
|
||||
starter: { label: "Starter", color: "text-white/50", bg: "bg-white/5", border: "border-white/10" },
|
||||
pro: { label: "Pro", color: "text-indigo-300", bg: "bg-indigo-500/10", border: "border-indigo-500/20" },
|
||||
landlord: { label: "Landlord", color: "text-violet-300", bg: "bg-violet-500/10", border: "border-violet-500/20" },
|
||||
lifetime: { label: "Lifetime", color: "text-amber-300", bg: "bg-amber-500/10", border: "border-amber-500/20" },
|
||||
}
|
||||
|
||||
interface SidebarProps { profile: Profile | null }
|
||||
|
||||
function NavContent({
|
||||
profile,
|
||||
collapsed,
|
||||
onClose,
|
||||
}: {
|
||||
profile: Profile | null
|
||||
collapsed?: boolean
|
||||
onClose?: () => void
|
||||
}) {
|
||||
const pathname = usePathname()
|
||||
|
||||
function isActive(href: string) {
|
||||
if (href === "/dashboard") return pathname === "/dashboard"
|
||||
return pathname.startsWith(href)
|
||||
}
|
||||
|
||||
const plan = profile?.plan ?? "starter"
|
||||
const pc = planConfig[plan] ?? planConfig.starter
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Logo */}
|
||||
<div className={cn(
|
||||
"flex h-16 shrink-0 items-center border-b border-white/[0.06]",
|
||||
collapsed ? "justify-center px-2" : "justify-between px-4"
|
||||
)}>
|
||||
{!collapsed && <Logo />}
|
||||
{collapsed && <LogoMark size="md" />}
|
||||
{onClose && (
|
||||
<button onClick={onClose} className="rounded-lg p-1.5 text-white/40 hover:text-white transition md:hidden">
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Nav */}
|
||||
<nav className={cn("flex flex-1 flex-col gap-0.5 overflow-y-auto py-3", collapsed ? "px-2" : "px-3")}>
|
||||
{!collapsed && (
|
||||
<p className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-widest text-white/20">Navigation</p>
|
||||
)}
|
||||
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon
|
||||
const active = isActive(item.href)
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={onClose}
|
||||
title={collapsed ? item.label : undefined}
|
||||
className={cn(
|
||||
"group relative flex items-center rounded-xl transition-all duration-200",
|
||||
collapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2.5",
|
||||
active
|
||||
? "bg-indigo-600/15 text-indigo-300"
|
||||
: "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
|
||||
)}
|
||||
>
|
||||
{active && !collapsed && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-indigo-500" />
|
||||
)}
|
||||
{active && collapsed && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-indigo-500" />
|
||||
)}
|
||||
<Icon className={cn(
|
||||
"h-4 w-4 shrink-0 transition-colors",
|
||||
active ? "text-indigo-400" : "text-white/30 group-hover:text-white/60"
|
||||
)} />
|
||||
{!collapsed && (
|
||||
<>
|
||||
<span className="flex-1">{item.label}</span>
|
||||
{active && <ChevronRight className="h-3 w-3 text-indigo-400/60 shrink-0" />}
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className="my-3 border-t border-white/[0.06]" />
|
||||
{!collapsed && (
|
||||
<p className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-widest text-white/20">Account</p>
|
||||
)}
|
||||
|
||||
<Link
|
||||
href="/settings/profile"
|
||||
onClick={onClose}
|
||||
title={collapsed ? "Settings" : undefined}
|
||||
className={cn(
|
||||
"group relative flex items-center rounded-xl transition-all duration-200",
|
||||
collapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2.5",
|
||||
pathname.startsWith("/settings") && !pathname.includes("/demo")
|
||||
? "bg-indigo-600/15 text-indigo-300"
|
||||
: "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
|
||||
)}
|
||||
>
|
||||
{pathname.startsWith("/settings") && !pathname.includes("/demo") && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-indigo-500" />
|
||||
)}
|
||||
<Settings className={cn(
|
||||
"h-4 w-4 shrink-0 transition-colors",
|
||||
pathname.startsWith("/settings") && !pathname.includes("/demo") ? "text-indigo-400" : "text-white/30 group-hover:text-white/60"
|
||||
)} />
|
||||
{!collapsed && "Settings"}
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/settings/demo"
|
||||
onClick={onClose}
|
||||
title={collapsed ? "Demo Data" : undefined}
|
||||
className={cn(
|
||||
"group relative flex items-center rounded-xl transition-all duration-200",
|
||||
collapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2.5",
|
||||
pathname === "/settings/demo"
|
||||
? "bg-indigo-600/15 text-indigo-300"
|
||||
: "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
|
||||
)}
|
||||
>
|
||||
{pathname === "/settings/demo" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-indigo-500" />
|
||||
)}
|
||||
<Sparkles className={cn(
|
||||
"h-4 w-4 shrink-0 transition-colors",
|
||||
pathname === "/settings/demo" ? "text-indigo-400" : "text-white/30 group-hover:text-white/60"
|
||||
)} />
|
||||
{!collapsed && "Demo Data"}
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Bottom — plan + user */}
|
||||
{!collapsed && (
|
||||
<div className="shrink-0 border-t border-white/[0.06] p-3 space-y-2">
|
||||
<div className={cn("flex items-center justify-between rounded-xl border px-3 py-2", pc.bg, pc.border)}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className={cn("h-3.5 w-3.5", pc.color)} />
|
||||
<span className={cn("text-xs font-semibold", pc.color)}>{pc.label} Plan</span>
|
||||
</div>
|
||||
{plan === "starter" && (
|
||||
<Link
|
||||
href="/settings/billing"
|
||||
onClick={onClose}
|
||||
className="text-[10px] font-semibold text-indigo-400 hover:text-indigo-300 transition"
|
||||
>
|
||||
Upgrade →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 rounded-xl px-2 py-2 hover:bg-white/[0.03] transition group">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white shadow-lg shadow-indigo-500/20">
|
||||
{profile?.full_name ? initials(profile.full_name) : "?"}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-xs font-semibold text-white">{profile?.full_name ?? "User"}</p>
|
||||
<p className="truncate text-[10px] text-white/40">{profile?.email}</p>
|
||||
</div>
|
||||
<form action={signOut}>
|
||||
<button
|
||||
type="submit"
|
||||
title="Sign out"
|
||||
className="rounded-lg p-1.5 text-white/20 transition hover:text-red-400 hover:bg-red-500/10"
|
||||
>
|
||||
<LogOut className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Collapsed bottom — just avatar + logout */}
|
||||
{collapsed && (
|
||||
<div className="shrink-0 border-t border-white/[0.06] p-2 space-y-1">
|
||||
<div
|
||||
title={profile?.full_name ?? "User"}
|
||||
className="flex justify-center"
|
||||
>
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white">
|
||||
{profile?.full_name ? initials(profile.full_name) : "?"}
|
||||
</div>
|
||||
</div>
|
||||
<form action={signOut} className="flex justify-center">
|
||||
<button
|
||||
type="submit"
|
||||
title="Sign out"
|
||||
className="rounded-lg p-1.5 text-white/20 transition hover:text-red-400 hover:bg-red-500/10"
|
||||
>
|
||||
<LogOut className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Sidebar({ profile }: SidebarProps) {
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
const [collapsed, setCollapsed] = useState(false)
|
||||
|
||||
// Persist collapse preference
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem("sidebar-collapsed")
|
||||
if (stored === "true") setCollapsed(true)
|
||||
}, [])
|
||||
|
||||
function toggleCollapse() {
|
||||
const next = !collapsed
|
||||
setCollapsed(next)
|
||||
localStorage.setItem("sidebar-collapsed", String(next))
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Desktop sidebar */}
|
||||
<aside
|
||||
className={cn(
|
||||
"hidden md:flex h-screen shrink-0 flex-col border-r border-white/[0.06] bg-[#111118] transition-all duration-300",
|
||||
collapsed ? "w-16" : "w-60"
|
||||
)}
|
||||
>
|
||||
<NavContent profile={profile} collapsed={collapsed} />
|
||||
|
||||
{/* Collapse toggle */}
|
||||
<button
|
||||
onClick={toggleCollapse}
|
||||
className="shrink-0 flex items-center justify-center gap-2 border-t border-white/[0.06] py-3 text-xs text-white/25 transition hover:text-white/60"
|
||||
title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
>
|
||||
{collapsed
|
||||
? <PanelLeftOpen className="h-4 w-4" />
|
||||
: <><PanelLeftClose className="h-4 w-4" /><span>Collapse</span></>
|
||||
}
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
{/* Mobile hamburger */}
|
||||
<div className="fixed top-0 left-0 z-50 flex h-16 items-center px-4 md:hidden">
|
||||
<button
|
||||
onClick={() => setMobileOpen(true)}
|
||||
className="flex h-9 w-9 items-center justify-center rounded-xl border border-white/[0.06] bg-white/[0.03] text-white/60 hover:bg-white/[0.08] hover:text-white transition"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile drawer */}
|
||||
{mobileOpen && (
|
||||
<div className="fixed inset-0 z-50 md:hidden">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/70 backdrop-blur-sm"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
/>
|
||||
<aside className="absolute left-0 top-0 flex h-full w-72 flex-col bg-[#111118] shadow-2xl">
|
||||
<NavContent profile={profile} onClose={() => setMobileOpen(false)} />
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user