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,74 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { api, type AdminCollection } 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 { fmtDate } from "@/lib/utils";
+
+export default function CollectionsPage() {
+  const [q, setQ] = useState("");
+  const fetcher = useCallback(
+    (limit: number, offset: number) => api.collections(q, limit, offset),
+    [q],
+  );
+  const list = usePagedList<AdminCollection>(fetcher, [q]);
+
+  return (
+    <ListShell
+      title="Collections"
+      total={list.total}
+      searchPlaceholder="Search title, description, or owner…"
+      onQueryChange={setQ}
+      list={list}
+    >
+      <Table>
+        <THead>
+          <TR>
+            <TH>Collection</TH>
+            <TH>Owner</TH>
+            <TH>Items</TH>
+            <TH>Visibility</TH>
+            <TH>Created</TH>
+          </TR>
+        </THead>
+        <tbody>
+          {list.items.length === 0 && !list.loading ? (
+            <EmptyRow cols={5} label="No collections found." />
+          ) : (
+            list.items.map((c) => (
+              <TR key={c.id}>
+                <TD className="max-w-md">
+                  <div className="font-medium">{c.title}</div>
+                  {c.description ? (
+                    <div className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">
+                      {c.description}
+                    </div>
+                  ) : null}
+                </TD>
+                <TD className="whitespace-nowrap">
+                  <div className="font-medium">{c.owner_name}</div>
+                  <div className="text-xs text-muted-foreground">
+                    @{c.owner_handle}
+                  </div>
+                </TD>
+                <TD>{c.item_count}</TD>
+                <TD>
+                  <span
+                    className={
+                      c.is_public ? "text-foreground" : "text-muted-foreground"
+                    }
+                  >
+                    {c.is_public ? "Public" : "Private"}
+                  </span>
+                </TD>
+                <TD className="whitespace-nowrap">{fmtDate(c.created_at)}</TD>
+              </TR>
+            ))
+          )}
+        </tbody>
+      </Table>
+    </ListShell>
+  );
+}