fix: ui fixes report
This commit is contained in:
gosangam
@@ -7,6 +7,8 @@ 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 { Textarea } from "@/components/ui/input";
|
||||
import { useConfirm } from "@/components/confirm";
|
||||
import { cn, fmtDate } from "@/lib/utils";
|
||||
|
||||
@@ -25,6 +27,7 @@ export default function ReportsPage() {
|
||||
);
|
||||
const list = usePagedList<AdminReport>(fetcher, [type, q]);
|
||||
const confirm = useConfirm();
|
||||
const [resolveTarget, setResolveTarget] = useState<AdminReport | null>(null);
|
||||
|
||||
async function run(action: Promise<unknown>, successMsg: string) {
|
||||
try {
|
||||
@@ -36,8 +39,9 @@ export default function ReportsPage() {
|
||||
}
|
||||
}
|
||||
|
||||
// Per-report moderation buttons. Destructive actions confirm first.
|
||||
function actionsFor(r: AdminReport) {
|
||||
// The moderation button when the target is still live. Destructive actions
|
||||
// confirm first. (When the target is already removed we show "Undo" instead.)
|
||||
function modButton(r: AdminReport) {
|
||||
if (r.type === "post") {
|
||||
return (
|
||||
<>
|
||||
@@ -51,8 +55,7 @@ export default function ReportsPage() {
|
||||
if (
|
||||
await confirm({
|
||||
title: "Delete this post?",
|
||||
message:
|
||||
"It will be removed from the app. You can restore it later from the Posts tab.",
|
||||
message: "It will be removed from the app. You can undo this.",
|
||||
confirmLabel: "Delete post",
|
||||
destructive: true,
|
||||
})
|
||||
@@ -75,7 +78,7 @@ export default function ReportsPage() {
|
||||
if (
|
||||
await confirm({
|
||||
title: "Delete this comment?",
|
||||
message: "It will be removed from the thread (restorable).",
|
||||
message: "It will be removed from the thread. You can undo this.",
|
||||
confirmLabel: "Delete comment",
|
||||
destructive: true,
|
||||
})
|
||||
@@ -96,7 +99,7 @@ export default function ReportsPage() {
|
||||
if (
|
||||
await confirm({
|
||||
title: "Suspend this account?",
|
||||
message: "They'll be signed out and unable to log in until you unban them.",
|
||||
message: "They'll be signed out and unable to log in. You can undo this.",
|
||||
confirmLabel: "Suspend account",
|
||||
destructive: true,
|
||||
})
|
||||
@@ -110,6 +113,25 @@ export default function ReportsPage() {
|
||||
);
|
||||
}
|
||||
|
||||
// Shown when the reported content is currently removed (deleted / banned) —
|
||||
// reverts the soft-deletion or ban.
|
||||
function undoButton(r: AdminReport) {
|
||||
return (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
if (r.type === "post") run(api.restorePost(r.target_id), "Post restored.");
|
||||
else if (r.type === "comment")
|
||||
run(api.restoreComment(r.target_id), "Comment restored.");
|
||||
else run(api.unbanUser(r.target_id), "Account restored.");
|
||||
}}
|
||||
>
|
||||
{r.type === "user" ? "Undo ban" : "Undo delete"}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
const targetLabel =
|
||||
type === "user" ? "Reported account" : type === "comment" ? "Comment" : "Post";
|
||||
|
||||
@@ -153,61 +175,139 @@ export default function ReportsPage() {
|
||||
{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
|
||||
list.items.map((r) => {
|
||||
const resolved = !!r.resolved_at;
|
||||
return (
|
||||
<TR key={r.id} className={resolved ? "opacity-70" : ""}>
|
||||
<TD className="max-w-xs align-top">
|
||||
{type === "user" ? (
|
||||
<span className="font-medium">
|
||||
{r.target_text ? `@${r.target_text}` : "—"}
|
||||
</span>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() =>
|
||||
run(api.resolveReport(r.type, r.id), "Report resolved.")
|
||||
}
|
||||
>
|
||||
Resolve
|
||||
</Button>
|
||||
<>
|
||||
<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}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</TD>
|
||||
</TR>
|
||||
))
|
||||
{r.target_removed ? (
|
||||
<div className="mt-1 text-[10px] font-medium uppercase tracking-wide text-destructive">
|
||||
{r.type === "user" ? "Suspended" : "Removed"}
|
||||
</div>
|
||||
) : null}
|
||||
</TD>
|
||||
<TD className="max-w-xs align-top">
|
||||
<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 align-top text-xs text-muted-foreground">
|
||||
{r.reporter_handle ? `@${r.reporter_handle}` : "—"}
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap align-top">
|
||||
{fmtDate(r.created_at)}
|
||||
</TD>
|
||||
<TD className="align-top text-right">
|
||||
{resolved ? (
|
||||
<div className="flex flex-col items-end gap-1.5">
|
||||
<span className="text-xs font-medium text-primary">
|
||||
✓ Resolved
|
||||
</span>
|
||||
{r.resolution_note ? (
|
||||
<p className="max-w-[220px] whitespace-pre-line text-right text-xs text-muted-foreground">
|
||||
{r.resolution_note}
|
||||
</p>
|
||||
) : null}
|
||||
{r.target_removed ? undoButton(r) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
{r.target_removed ? undoButton(r) : modButton(r)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setResolveTarget(r)}
|
||||
>
|
||||
Resolve
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TD>
|
||||
</TR>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<ResolveModal
|
||||
report={resolveTarget}
|
||||
onClose={() => setResolveTarget(null)}
|
||||
onDone={() => {
|
||||
setResolveTarget(null);
|
||||
list.refresh();
|
||||
}}
|
||||
/>
|
||||
</ListShell>
|
||||
);
|
||||
}
|
||||
|
||||
function ResolveModal({
|
||||
report,
|
||||
onClose,
|
||||
onDone,
|
||||
}: {
|
||||
report: AdminReport | null;
|
||||
onClose: () => void;
|
||||
onDone: () => void;
|
||||
}) {
|
||||
const [note, setNote] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function submit() {
|
||||
if (!report || note.trim() === "") return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await api.resolveReport(report.type, report.id, note.trim());
|
||||
toast.success("Report resolved.");
|
||||
setNote("");
|
||||
onDone();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof AdminError ? err.message : "Could not resolve.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={!!report} onClose={onClose} title="Resolve report">
|
||||
<div className="space-y-4">
|
||||
<label className="block space-y-1.5">
|
||||
<span className="text-sm font-medium">Resolution note</span>
|
||||
<Textarea
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.target.value)}
|
||||
rows={4}
|
||||
maxLength={2000}
|
||||
placeholder="What did you do / decide? (shown in the reports table)"
|
||||
/>
|
||||
</label>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={submit} disabled={busy || note.trim() === ""}>
|
||||
{busy ? "Resolving…" : "Resolve report"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
+7
-2
@@ -161,6 +161,8 @@ export type AdminReport = {
|
||||
resolved_at: string | null;
|
||||
reporter_handle: string | null;
|
||||
reporter_name: string | null;
|
||||
resolution_note: string | null;
|
||||
target_removed: boolean;
|
||||
target_id: string;
|
||||
target_text: string | null;
|
||||
target_author_handle: string | null;
|
||||
@@ -286,7 +288,10 @@ export const api = {
|
||||
reports(type: ReportType, q: string, limit: number, offset: number) {
|
||||
return listed<AdminReport>(`/admin/reports${qs({ type, q, limit, offset })}`);
|
||||
},
|
||||
resolveReport(type: ReportType, id: string) {
|
||||
return call(`/admin/reports/${type}/${id}/resolve`, { method: "POST" });
|
||||
resolveReport(type: ReportType, id: string, note: string) {
|
||||
return call(`/admin/reports/${type}/${id}/resolve`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ note }),
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user