feat: admin dashboard

2026-06-16 14:50:09 +05:30
commit a70c50254e
30 changed files with 5572 additions and 0 deletions
@@ -0,0 +1,127 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import {
+  Flag,
+  FolderClosed,
+  LayoutGrid,
+  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: "/users", label: "Users", icon: Users },
+  { href: "/posts", label: "Posts", icon: LayoutGrid },
+  { href: "/collections", label: "Collections", icon: FolderClosed },
+  { href: "/feedback", label: "Feedback", icon: MessageSquare },
+  { href: "/reports", label: "Reports", icon: Flag },
+];
+
+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>
+  );
+}