136 lines
4.0 KiB
TypeScript
136 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import {
|
|
Flag,
|
|
Gift,
|
|
Megaphone,
|
|
FolderClosed,
|
|
LayoutDashboard,
|
|
LayoutGrid,
|
|
Link2,
|
|
LogOut,
|
|
MessageSquare,
|
|
Users,
|
|
} from "lucide-react";
|
|
import { api, type Me } from "@/lib/api";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ConfirmProvider } from "@/components/confirm";
|
|
|
|
const NAV = [
|
|
{ href: "/", label: "Overview", icon: LayoutDashboard },
|
|
{ href: "/users", label: "Users", icon: Users },
|
|
{ href: "/posts", label: "Posts", icon: LayoutGrid },
|
|
{ href: "/collections", label: "Collections", icon: FolderClosed },
|
|
{ href: "/short-urls", label: "Short URLs", icon: Link2 },
|
|
{ href: "/feedback", label: "Feedback", icon: MessageSquare },
|
|
{ href: "/reports", label: "Reports", icon: Flag },
|
|
{ href: "/broadcasts", label: "Announcements", icon: Megaphone },
|
|
{ href: "/reward-gifts", label: "Gifts", icon: Gift },
|
|
];
|
|
|
|
export default function DashboardLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [me, setMe] = useState<Me | null>(null);
|
|
const [checked, setChecked] = useState(false);
|
|
|
|
// Admin gate: only an authenticated admin may see the dashboard. Anyone
|
|
// else is bounced to /login. The BFF independently enforces this on every
|
|
// /admin/* call, so this is UX, not the security boundary.
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
api
|
|
.me()
|
|
.then((u) => {
|
|
if (cancelled) return;
|
|
if (!u || u.role !== "admin") {
|
|
router.replace("/login");
|
|
return;
|
|
}
|
|
setMe(u);
|
|
setChecked(true);
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) router.replace("/login");
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [router]);
|
|
|
|
async function signOut() {
|
|
await api.logout().catch(() => {});
|
|
router.replace("/login");
|
|
}
|
|
|
|
if (!checked || !me) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
|
|
Loading…
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen">
|
|
<aside className="flex w-60 shrink-0 flex-col border-r border-border bg-card">
|
|
<div className="px-5 py-5">
|
|
<p className="text-xs uppercase tracking-[0.2em] text-primary">
|
|
Prabhupāda Says
|
|
</p>
|
|
<p className="mt-0.5 text-sm font-semibold text-foreground">Admin</p>
|
|
</div>
|
|
<nav className="flex-1 space-y-1 px-3">
|
|
{NAV.map(({ href, label, icon: Icon }) => {
|
|
const active = pathname === href || pathname.startsWith(href + "/");
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
|
|
active
|
|
? "bg-accent text-accent-foreground font-medium"
|
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
{label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
<div className="border-t border-border px-3 py-3">
|
|
<div className="px-3 pb-2 text-xs text-muted-foreground">
|
|
<p className="truncate font-medium text-foreground">{me.name}</p>
|
|
<p className="truncate">@{me.handle}</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={signOut}
|
|
className="w-full justify-start text-muted-foreground"
|
|
>
|
|
<LogOut className="size-4" />
|
|
Sign out
|
|
</Button>
|
|
</div>
|
|
</aside>
|
|
|
|
<main className="flex-1 overflow-x-hidden px-6 py-6 lg:px-10">
|
|
<div className="mx-auto max-w-6xl">
|
|
<ConfirmProvider>{children}</ConfirmProvider>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|