feat: admin dashboard
This commit is contained in:
gosangam
@@ -0,0 +1,213 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { api, AdminError, type AdminReport, type ReportType } 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 { cn, fmtDate } from "@/lib/utils";
|
||||
|
||||
const TYPES: { key: ReportType; label: string }[] = [
|
||||
{ key: "post", label: "Posts" },
|
||||
{ key: "comment", label: "Comments" },
|
||||
{ key: "user", label: "Accounts" },
|
||||
];
|
||||
|
||||
export default function ReportsPage() {
|
||||
const [type, setType] = useState<ReportType>("post");
|
||||
const [q, setQ] = useState("");
|
||||
const fetcher = useCallback(
|
||||
(limit: number, offset: number) => api.reports(type, q, limit, offset),
|
||||
[type, q],
|
||||
);
|
||||
const list = usePagedList<AdminReport>(fetcher, [type, 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.");
|
||||
}
|
||||
}
|
||||
|
||||
// Per-report moderation buttons. Destructive actions confirm first.
|
||||
function actionsFor(r: AdminReport) {
|
||||
if (r.type === "post") {
|
||||
return (
|
||||
<>
|
||||
<Button size="sm" variant="outline" onClick={() => run(api.hidePost(r.target_id), "Post hidden.")}>
|
||||
Hide
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={async () => {
|
||||
if (
|
||||
await confirm({
|
||||
title: "Delete this post?",
|
||||
message:
|
||||
"It will be removed from the app. You can restore it later from the Posts tab.",
|
||||
confirmLabel: "Delete post",
|
||||
destructive: true,
|
||||
})
|
||||
) {
|
||||
run(api.deletePost(r.target_id), "Post deleted.");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (r.type === "comment") {
|
||||
return (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={async () => {
|
||||
if (
|
||||
await confirm({
|
||||
title: "Delete this comment?",
|
||||
message: "It will be removed from the thread (restorable).",
|
||||
confirmLabel: "Delete comment",
|
||||
destructive: true,
|
||||
})
|
||||
) {
|
||||
run(api.deleteComment(r.target_id), "Comment deleted.");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={async () => {
|
||||
if (
|
||||
await confirm({
|
||||
title: "Suspend this account?",
|
||||
message: "They'll be signed out and unable to log in until you unban them.",
|
||||
confirmLabel: "Suspend account",
|
||||
destructive: true,
|
||||
})
|
||||
) {
|
||||
run(api.banUser(r.target_id), "Account suspended.");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Ban
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
const targetLabel =
|
||||
type === "user" ? "Reported account" : type === "comment" ? "Comment" : "Post";
|
||||
|
||||
return (
|
||||
<ListShell
|
||||
title="Reports"
|
||||
total={list.total}
|
||||
searchPlaceholder="Search content or reporter…"
|
||||
onQueryChange={setQ}
|
||||
list={list}
|
||||
toolbar={
|
||||
<div className="flex gap-1 rounded-lg border border-border bg-card p-1">
|
||||
{TYPES.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setType(t.key)}
|
||||
className={cn(
|
||||
"rounded-md px-3 py-1.5 text-sm transition-colors",
|
||||
type === t.key
|
||||
? "bg-accent text-accent-foreground font-medium"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Table>
|
||||
<THead>
|
||||
<TR>
|
||||
<TH>{targetLabel}</TH>
|
||||
<TH>Reason</TH>
|
||||
<TH>Reporter</TH>
|
||||
<TH>Reported</TH>
|
||||
<TH className="text-right">Actions</TH>
|
||||
</TR>
|
||||
</THead>
|
||||
<tbody>
|
||||
{list.items.length === 0 && !list.loading ? (
|
||||
<EmptyRow cols={5} label="No reports." />
|
||||
) : (
|
||||
list.items.map((r) => (
|
||||
<TR key={r.id} className={r.resolved_at ? "opacity-60" : ""}>
|
||||
<TD className="max-w-xs">
|
||||
{type === "user" ? (
|
||||
<span className="font-medium">
|
||||
{r.target_text ? `@${r.target_text}` : "—"}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<div className="line-clamp-2">{r.target_text || "—"}</div>
|
||||
{r.target_author_handle ? (
|
||||
<div className="mt-0.5 text-xs text-muted-foreground">
|
||||
by @{r.target_author_handle}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</TD>
|
||||
<TD className="max-w-xs">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
{r.category}
|
||||
</div>
|
||||
{r.reason ? (
|
||||
<div className="mt-0.5 line-clamp-2">{r.reason}</div>
|
||||
) : null}
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap text-xs text-muted-foreground">
|
||||
{r.reporter_handle ? `@${r.reporter_handle}` : "—"}
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap">{fmtDate(r.created_at)}</TD>
|
||||
<TD className="text-right">
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
{actionsFor(r)}
|
||||
{r.resolved_at ? (
|
||||
<span className="self-center text-xs text-muted-foreground">
|
||||
Resolved
|
||||
</span>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() =>
|
||||
run(api.resolveReport(r.type, r.id), "Report resolved.")
|
||||
}
|
||||
>
|
||||
Resolve
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</TD>
|
||||
</TR>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
</ListShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user