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,138 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { api, AdminError, type AdminPost } 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 { useConfirm } from "@/components/confirm";
+import { fmtDate } from "@/lib/utils";
+
+export default function PostsPage() {
+  const [q, setQ] = useState("");
+  const fetcher = useCallback(
+    (limit: number, offset: number) => api.posts(q, limit, offset),
+    [q],
+  );
+  const list = usePagedList<AdminPost>(fetcher, [q]);
+  const confirm = useConfirm();
+
+  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 onDelete(p: AdminPost) {
+    if (
+      await confirm({
+        title: "Delete this post?",
+        message: "It will be removed from the app. You can restore it here later.",
+        confirmLabel: "Delete post",
+        destructive: true,
+      })
+    ) {
+      run(api.deletePost(p.id), "Post deleted.");
+    }
+  }
+
+  return (
+    <ListShell
+      title="Posts"
+      total={list.total}
+      searchPlaceholder="Search caption, source, or author…"
+      onQueryChange={setQ}
+      list={list}
+    >
+      <Table>
+        <THead>
+          <TR>
+            <TH>Post</TH>
+            <TH>Author</TH>
+            <TH>Engagement</TH>
+            <TH>Created</TH>
+            <TH className="text-right">Actions</TH>
+          </TR>
+        </THead>
+        <tbody>
+          {list.items.length === 0 && !list.loading ? (
+            <EmptyRow cols={5} label="No posts found." />
+          ) : (
+            list.items.map((p) => (
+              <TR key={p.id} className={p.deleted_at ? "opacity-60" : ""}>
+                <TD className="max-w-md">
+                  <div className="line-clamp-2">{p.caption || "—"}</div>
+                  <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                    {p.source_title}
+                    {p.deleted_at ? (
+                      <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive">
+                        Deleted
+                      </span>
+                    ) : p.is_hidden ? (
+                      <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+                        Hidden
+                      </span>
+                    ) : null}
+                  </div>
+                </TD>
+                <TD className="whitespace-nowrap">
+                  <div className="font-medium">{p.author_name}</div>
+                  <div className="text-xs text-muted-foreground">
+                    @{p.author_handle}
+                  </div>
+                </TD>
+                <TD className="whitespace-nowrap text-xs text-muted-foreground">
+                  {p.likes_count} likes · {p.comments_count} comments
+                </TD>
+                <TD className="whitespace-nowrap">{fmtDate(p.created_at)}</TD>
+                <TD className="text-right">
+                  <div className="flex flex-wrap justify-end gap-2">
+                    {p.deleted_at ? (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => run(api.restorePost(p.id), "Post restored.")}
+                      >
+                        Restore
+                      </Button>
+                    ) : (
+                      <>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() =>
+                            run(
+                              p.is_hidden
+                                ? api.unhidePost(p.id)
+                                : api.hidePost(p.id),
+                              p.is_hidden ? "Post unhidden." : "Post hidden.",
+                            )
+                          }
+                        >
+                          {p.is_hidden ? "Unhide" : "Hide"}
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          onClick={() => onDelete(p)}
+                        >
+                          Delete
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </TD>
+              </TR>
+            ))
+          )}
+        </tbody>
+      </Table>
+    </ListShell>
+  );
+}