fix: ui fixes

2026-06-16 15:49:23 +05:30
parent 41367a8b27
commit 5342123fba
8 changed files with 388 additions and 34 deletions
@@ -8,6 +8,7 @@ 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 { Textarea } from "@/components/ui/input";
 import { cn, fmtDate } from "@/lib/utils";

@@ -21,8 +22,43 @@ export default function FeedbackPage() {
    [status],
  );
  const list = usePagedList<AdminFeedback>(fetcher, [status]);
+  const confirm = useConfirm();
  const [reply, setReply] = useState<AdminFeedback | null>(null);

+  async function run(action: Promise<unknown>, successMsg: string) {
+    try {
+      await action;
+      toast.success(successMsg);
+      list.refresh();
+    } catch (err) {
+      toast.error(err instanceof AdminError ? err.message : "Action failed.");
+    }
+  }
+
+  async function acknowledge(f: AdminFeedback) {
+    if (
+      await confirm({
+        title: "Acknowledge this feedback?",
+        message: "The author will be emailed that we've seen it and started work.",
+        confirmLabel: "Acknowledge",
+      })
+    ) {
+      run(api.acknowledgeFeedback(f.id), "Feedback acknowledged.");
+    }
+  }
+
+  async function resolve(f: AdminFeedback) {
+    if (
+      await confirm({
+        title: "Mark resolved?",
+        message: "The author will be emailed a thank-you. This can't be undone.",
+        confirmLabel: "Mark resolved",
+      })
+    ) {
+      run(api.resolveFeedback(f.id), "Feedback resolved.");
+    }
+  }
+
  return (
    <ListShell
      title="Feedback"
@@ -94,9 +130,29 @@ export default function FeedbackPage() {
                </TD>
                <TD className="whitespace-nowrap">{fmtDate(f.created_at)}</TD>
                <TD className="text-right">
-                  <Button size="sm" variant="outline" onClick={() => setReply(f)}>
-                    {f.replied_at ? "Reply again" : "Reply"}
-                  </Button>
+                  <div className="flex flex-wrap justify-end gap-2">
+                    {!f.resolved_at && !f.acknowledged_at ? (
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => acknowledge(f)}
+                      >
+                        Acknowledge
+                      </Button>
+                    ) : null}
+                    {!f.resolved_at ? (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => resolve(f)}
+                      >
+                        Resolve
+                      </Button>
+                    ) : null}
+                    <Button size="sm" variant="outline" onClick={() => setReply(f)}>
+                      {f.replied_at ? "Reply again" : "Reply"}
+                    </Button>
+                  </div>
                </TD>
              </TR>
            ))
@@ -117,8 +173,19 @@ export default function FeedbackPage() {
 }

 function StatusBadge({ f }: { f: AdminFeedback }) {
-  const label = f.replied_at ? "Replied" : f.resolved_at ? "Resolved" : "Open";
-  const tone = f.resolved_at || f.replied_at ? "text-primary" : "text-muted-foreground";
+  const label = f.replied_at
+    ? "Replied"
+    : f.resolved_at
+      ? "Resolved"
+      : f.acknowledged_at
+        ? "Acknowledged"
+        : "Open";
+  const tone =
+    f.replied_at || f.resolved_at
+      ? "text-primary"
+      : f.acknowledged_at
+        ? "text-amber-600"
+        : "text-muted-foreground";
  return <span className={cn("text-sm", tone)}>{label}</span>;
 }

@@ -6,6 +6,7 @@ import { usePathname, useRouter } from "next/navigation";
 import {
  Flag,
  FolderClosed,
+  LayoutDashboard,
  LayoutGrid,
  LogOut,
  MessageSquare,
@@ -17,6 +18,7 @@ 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 },
@@ -1,6 +1,107 @@
-import { redirect } from "next/navigation";
+"use client";

-// The dashboard root just lands on Users.
-export default function DashboardIndex() {
-  redirect("/users");
+import { useEffect, useState } from "react";
+import { api, AdminError, type Stats } from "@/lib/api";
+
+export default function OverviewPage() {
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    api
+      .stats()
+      .then((s) => {
+        if (!cancelled) setStats(s);
+      })
+      .catch((e) => {
+        if (!cancelled)
+          setError(e instanceof AdminError ? e.message : "Could not load stats.");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-2xl font-semibold text-foreground">Overview</h1>
+
+      {error ? (
+        <p className="text-sm text-destructive">{error}</p>
+      ) : !stats ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : (
+        <>
+          <section className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
+            <StatCard label="Users" value={stats.users} delta={`+${stats.users_last_7_days} / 7d`} />
+            <StatCard label="Posts" value={stats.posts} delta={`+${stats.posts_last_7_days} / 7d`} />
+            <StatCard
+              label="Collections"
+              value={stats.collections}
+              delta={`${stats.public_collections} public`}
+            />
+            <StatCard label="Bookmarks" value={stats.bookmarks} />
+            <StatCard label="Reshares" value={stats.reshares} />
+            <StatCard
+              label="Feedback"
+              value={stats.feedback}
+              delta={`+${stats.feedback_last_7_days} / 7d`}
+            />
+          </section>
+
+          <section className="space-y-3">
+            <h2 className="text-lg font-semibold text-foreground">
+              Feedback by category
+            </h2>
+            {stats.feedback_by_category.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No feedback yet.</p>
+            ) : (
+              <div className="max-w-md divide-y divide-border rounded-xl border border-border bg-card">
+                {stats.feedback_by_category.map((c) => (
+                  <div
+                    key={c.category}
+                    className="flex items-center justify-between px-4 py-2.5 text-sm"
+                  >
+                    <span className="capitalize text-foreground">
+                      {c.category.replace(/_/g, " ")}
+                    </span>
+                    <span className="font-medium text-muted-foreground">
+                      {c.count}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+        </>
+      )}
+    </div>
+  );
+}
+
+function StatCard({
+  label,
+  value,
+  delta,
+}: {
+  label: string;
+  value: number;
+  delta?: string;
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-4">
+      <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </div>
+      <div className="mt-1 flex items-baseline gap-2">
+        <span className="text-2xl font-semibold text-foreground">
+          {value.toLocaleString()}
+        </span>
+        {delta ? (
+          <span className="text-xs font-medium text-primary">{delta}</span>
+        ) : null}
+      </div>
+    </div>
+  );
 }
@@ -8,6 +8,8 @@ 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 { RowMenu, type MenuItem } from "@/components/ui/menu";
+import { Avatar } from "@/components/ui/avatar";
 import { useConfirm } from "@/components/confirm";
 import { Input, Textarea } from "@/components/ui/input";
 import { fmtDate } from "@/lib/utils";
@@ -44,6 +46,21 @@ export default function UsersPage() {
    }
  }

+  function menuItems(u: AdminUser): MenuItem[] {
+    const items: MenuItem[] = [
+      { label: "Send notification", onClick: () => setNotify(u) },
+    ];
+    // No ban option for fellow admins (avoid locking each other out).
+    if (u.role !== "admin") {
+      items.push({
+        label: u.banned_at ? "Unban account" : "Ban account",
+        onClick: () => toggleBan(u),
+        destructive: !u.banned_at,
+      });
+    }
+    return items;
+  }
+
  return (
    <ListShell
      title="Users"
@@ -57,7 +74,7 @@ export default function UsersPage() {
          <TR>
            <TH>User</TH>
            <TH>Email</TH>
-            <TH>Role</TH>
+            <TH>Posts</TH>
            <TH>Joined</TH>
            <TH className="text-right">Actions</TH>
          </TR>
@@ -69,36 +86,30 @@ export default function UsersPage() {
            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 className="flex items-center gap-3">
+                    <Avatar src={u.avatar_url} name={u.name} />
+                    <div className="min-w-0">
+                      <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>
+                    </div>
                  </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>{u.post_count}</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>
+                  <RowMenu items={menuItems(u)} />
                </TD>
              </TR>
            ))