feat: quiz

app/(dashboard)/layout.tsx

@@ -4,7 +4,9 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import {
+  ClipboardCheck,
   Flag,
+  ShieldCheck,
   Gift,
   Megaphone,
   Quote,
@@ -16,22 +18,57 @@ import {
   MessageSquare,
   Users,
 } from "lucide-react";
-import { api, type Me } from "@/lib/api";
+import { api, staff, MANAGE_STAFF, type Me, type StaffMe } from "@/lib/api";
+import { RequirePermission, StaffProvider } from "@/components/staff-context";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { ConfirmProvider } from "@/components/confirm";
 
+// Each entry names the permission that unlocks it, so the sidebar only shows
+// what the signed-in role can actually use.
 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 },
-  { href: "/vani", label: "Vāṇī of the Day", icon: Quote },
+  { href: "/", label: "Overview", icon: LayoutDashboard, perm: "stats:read" },
+  { href: "/users", label: "Users", icon: Users, perm: "users:read" },
+  { href: "/posts", label: "Posts", icon: LayoutGrid, perm: "posts:moderate" },
+  {
+    href: "/collections",
+    label: "Collections",
+    icon: FolderClosed,
+    perm: "collections:read",
+  },
+  {
+    href: "/short-urls",
+    label: "Short URLs",
+    icon: Link2,
+    perm: "short_urls:read",
+  },
+  {
+    href: "/feedback",
+    label: "Feedback",
+    icon: MessageSquare,
+    perm: "feedback:read",
+  },
+  { href: "/reports", label: "Reports", icon: Flag, perm: "reports:read" },
+  {
+    href: "/broadcasts",
+    label: "Announcements",
+    icon: Megaphone,
+    perm: "broadcasts:read",
+  },
+  { href: "/reward-gifts", label: "Gifts", icon: Gift, perm: "rewards:read" },
+  { href: "/vani", label: "Vāṇī of the Day", icon: Quote, perm: "vani:read" },
+  {
+    href: "/quizzes",
+    label: "Quizzes",
+    icon: ClipboardCheck,
+    perm: "quizzes:read",
+  },
+  {
+    href: "/staff",
+    label: "Staff & roles",
+    icon: ShieldCheck,
+    perm: MANAGE_STAFF,
+  },
 ];
 
 export default function DashboardLayout({
@@ -42,22 +79,24 @@ export default function DashboardLayout({
   const router = useRouter();
   const pathname = usePathname();
   const [me, setMe] = useState<Me | null>(null);
+  const [staffMe, setStaffMe] = useState<StaffMe | 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.
+  // Staff gate: only an account holding an admin role, and not blocked from
+  // the panel, may see the dashboard. /admin/me answers both at once — it 403s
+  // otherwise. The BFF enforces this on every /admin/* call regardless, so
+  // this is UX, not the security boundary.
   useEffect(() => {
     let cancelled = false;
-    api
-      .me()
-      .then((u) => {
+    Promise.all([api.me(), staff.me()])
+      .then(([u, s]) => {
         if (cancelled) return;
-        if (!u || u.role !== "admin") {
+        if (!u || !s) {
           router.replace("/login");
           return;
         }
         setMe(u);
+        setStaffMe(s);
         setChecked(true);
       })
       .catch(() => {
@@ -68,12 +107,25 @@ export default function DashboardLayout({
     };
   }, [router]);
 
+  // A role without stats:read has no Overview — send them to the first
+  // section they can use instead of a page of permission errors.
+  useEffect(() => {
+    if (
+      !staffMe ||
+      pathname !== "/" ||
+      staffMe.permissions.includes("stats:read")
+    )
+      return;
+    const first = NAV.find((n) => staffMe.permissions.includes(n.perm));
+    if (first) router.replace(first.href);
+  }, [staffMe, pathname, router]);
+
   async function signOut() {
     await api.logout().catch(() => {});
     router.replace("/login");
   }
 
-  if (!checked || !me) {
+  if (!checked || !me || !staffMe) {
     return (
       <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
         Loading…
@@ -91,29 +143,35 @@ export default function DashboardLayout({
           <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.filter((n) => staffMe.permissions.includes(n.perm)).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>
+            <p className="mt-1 inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+              {staffMe.role_name}
+            </p>
           </div>
           <Button
             variant="ghost"
@@ -129,7 +187,28 @@ export default function DashboardLayout({
 
       <main className="flex-1 overflow-x-hidden px-6 py-6 lg:px-10">
         <div className="mx-auto max-w-6xl">
-          <ConfirmProvider>{children}</ConfirmProvider>
+          <StaffProvider value={staffMe}>
+            <ConfirmProvider>
+              {/* The section's own permission, so a URL typed straight in
+                  explains itself instead of failing call by call. */}
+              {(() => {
+                const section =
+                  NAV.find(
+                    (n) =>
+                      n.href !== "/" &&
+                      (pathname === n.href ||
+                        pathname.startsWith(n.href + "/")),
+                  ) ?? (pathname === "/" ? NAV[0] : undefined);
+                return section ? (
+                  <RequirePermission perm={section.perm}>
+                    {children}
+                  </RequirePermission>
+                ) : (
+                  children
+                );
+              })()}
+            </ConfirmProvider>
+          </StaffProvider>
         </div>
       </main>
     </div>