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,181 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { api, AdminError, type AdminUser } from "@/lib/api";
+import { usePagedList } from "@/lib/use-paged-list";
+import { ListShell, EmptyRow } from "@/components/list-shell";
+import { Table, THead, TR, TH, TD } from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Modal } from "@/components/ui/modal";
+import { useConfirm } from "@/components/confirm";
+import { Input, Textarea } from "@/components/ui/input";
+import { fmtDate } from "@/lib/utils";
+
+export default function UsersPage() {
+  const [q, setQ] = useState("");
+  const fetcher = useCallback(
+    (limit: number, offset: number) => api.users(q, limit, offset),
+    [q],
+  );
+  const list = usePagedList<AdminUser>(fetcher, [q]);
+  const confirm = useConfirm();
+  const [notify, setNotify] = useState<AdminUser | null>(null);
+
+  async function toggleBan(u: AdminUser) {
+    const banning = !u.banned_at;
+    if (
+      banning &&
+      !(await confirm({
+        title: `Suspend @${u.handle}?`,
+        message: "They'll be signed out and unable to log in until you unban them.",
+        confirmLabel: "Suspend account",
+        destructive: true,
+      }))
+    ) {
+      return;
+    }
+    try {
+      await (banning ? api.banUser(u.id) : api.unbanUser(u.id));
+      toast.success(banning ? "Account suspended." : "Account restored.");
+      list.refresh();
+    } catch (err) {
+      toast.error(err instanceof AdminError ? err.message : "Action failed.");
+    }
+  }
+
+  return (
+    <ListShell
+      title="Users"
+      total={list.total}
+      searchPlaceholder="Search name, handle, or email…"
+      onQueryChange={setQ}
+      list={list}
+    >
+      <Table>
+        <THead>
+          <TR>
+            <TH>User</TH>
+            <TH>Email</TH>
+            <TH>Role</TH>
+            <TH>Joined</TH>
+            <TH className="text-right">Actions</TH>
+          </TR>
+        </THead>
+        <tbody>
+          {list.items.length === 0 && !list.loading ? (
+            <EmptyRow cols={5} label="No users found." />
+          ) : (
+            list.items.map((u) => (
+              <TR key={u.id}>
+                <TD>
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium">{u.name}</span>
+                    {u.banned_at ? (
+                      <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive">
+                        Suspended
+                      </span>
+                    ) : null}
+                  </div>
+                  <div className="text-xs text-muted-foreground">@{u.handle}</div>
+                </TD>
+                <TD>
+                  {u.email ?? <span className="text-muted-foreground">—</span>}
+                </TD>
+                <TD className="capitalize">{u.role}</TD>
+                <TD className="whitespace-nowrap">{fmtDate(u.created_at)}</TD>
+                <TD className="text-right">
+                  <div className="flex flex-wrap justify-end gap-2">
+                    <Button size="sm" variant="outline" onClick={() => setNotify(u)}>
+                      Notify
+                    </Button>
+                    {u.role !== "admin" ? (
+                      <Button
+                        size="sm"
+                        variant={u.banned_at ? "outline" : "destructive"}
+                        onClick={() => toggleBan(u)}
+                      >
+                        {u.banned_at ? "Unban" : "Ban"}
+                      </Button>
+                    ) : null}
+                  </div>
+                </TD>
+              </TR>
+            ))
+          )}
+        </tbody>
+      </Table>
+
+      <NotifyModal user={notify} onClose={() => setNotify(null)} />
+    </ListShell>
+  );
+}
+
+function NotifyModal({
+  user,
+  onClose,
+}: {
+  user: AdminUser | null;
+  onClose: () => void;
+}) {
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  async function send() {
+    if (!user || body.trim() === "") return;
+    setBusy(true);
+    try {
+      await api.notifyUser(user.id, title.trim(), body.trim());
+      toast.success(`Notification sent to @${user.handle}`);
+      setTitle("");
+      setBody("");
+      onClose();
+    } catch (err) {
+      toast.error(err instanceof AdminError ? err.message : "Could not send.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Modal
+      open={!!user}
+      onClose={onClose}
+      title={user ? `Notify @${user.handle}` : "Notify"}
+    >
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          Sends an in-app notification, plus web push and email where available.
+        </p>
+        <label className="block space-y-1.5">
+          <span className="text-sm font-medium">Title (optional)</span>
+          <Input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            maxLength={120}
+            placeholder="A note from the team"
+          />
+        </label>
+        <label className="block space-y-1.5">
+          <span className="text-sm font-medium">Message</span>
+          <Textarea
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            rows={5}
+            maxLength={4000}
+            placeholder="Write your message…"
+          />
+        </label>
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={send} disabled={busy || body.trim() === ""}>
+            {busy ? "Sending…" : "Send notification"}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}