Comprehensive admin + user dashboards (production-ready)

2026-06-07 17:54:30 -04:00
parent 155507f21a
commit f033f00379
122 changed files with 7878 additions and 805 deletions
@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Eye, Loader2 } from "lucide-react";
+import { authClient } from "@/lib/auth/auth-client";
+
+/**
+ * Sticky banner shown while an admin is impersonating a user. Reads the live
+ * session; renders nothing for normal sessions. "Stop" ends impersonation and
+ * returns to the admin surface.
+ */
+export function ImpersonationBanner() {
+  const { data: session } = authClient.useSession();
+  const router = useRouter();
+  const [busy, setBusy] = useState(false);
+
+  // `impersonatedBy` is set on the session row by the better-auth admin plugin.
+  const impersonatedBy = session?.session
+    ? (session.session as { impersonatedBy?: string | null }).impersonatedBy
+    : null;
+  if (!impersonatedBy) return null;
+
+  const who = session?.user?.email ?? session?.user?.name ?? "this user";
+
+  async function stop() {
+    setBusy(true);
+    try {
+      await authClient.admin.stopImpersonating();
+    } finally {
+      router.push("/admin");
+      router.refresh();
+    }
+  }
+
+  return (
+    <div className="sticky top-0 z-40 flex items-center justify-center gap-3 bg-warning px-4 py-2 text-center text-sm font-medium text-warning-foreground">
+      <span className="inline-flex items-center gap-1.5">
+        <Eye className="h-4 w-4" />
+        Viewing as {who}
+      </span>
+      <button
+        onClick={stop}
+        disabled={busy}
+        className="inline-flex items-center gap-1 rounded-full bg-warning-foreground/15 px-3 py-0.5 font-semibold transition-colors hover:bg-warning-foreground/25 disabled:opacity-60"
+      >
+        {busy && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+        Stop
+      </button>
+    </div>
+  );
+}