feat(admin): reports page with dismiss and delete-post actions

src/app/p/[secret]/layout.tsx

@@ -2,7 +2,7 @@ import { notFound, redirect } from "next/navigation";
 import { auth } from "@clerk/nextjs/server";
 import Link from "next/link";
 import { createTRPCCaller } from "@/trpc/server";
-import { LayoutDashboard, Users, Megaphone, ShieldCheck, FileText } from "lucide-react";
+import { LayoutDashboard, Users, Megaphone, ShieldCheck, FileText, Flag } from "lucide-react";
 
 interface AdminLayoutProps {
   children: React.ReactNode;
@@ -39,6 +39,7 @@ export default async function AdminLayout({ children, params }: AdminLayoutProps
   const nav = [
     { href: base, label: "Dashboard", Icon: LayoutDashboard },
     { href: `${base}/posts`, label: "Posts", Icon: FileText },
+    { href: `${base}/reports`, label: "Reports", Icon: Flag },
     { href: `${base}/users`, label: "Users", Icon: Users },
     { href: `${base}/ads`, label: "Ads", Icon: Megaphone },
     { href: `${base}/moderators`, label: "Moderators", Icon: ShieldCheck },

src/app/p/[secret]/reports/page.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTRPC } from "@/trpc/client";
+import { Flag, Trash2, X, Loader2, CheckCheck } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+
+const REASON_LABELS: Record<string, string> = {
+  SPAM: "Spam",
+  HARASSMENT: "Belästigung",
+  INAPPROPRIATE: "Unangemessen",
+  MISINFORMATION: "Falschinformation",
+  OTHER: "Sonstiges",
+};
+
+type ReportAction =
+  | { kind: "dismiss"; reportId: string }
+  | { kind: "deletePost"; postId: string };
+
+export default function AdminReportsPage() {
+  const trpc = useTRPC();
+  const qc = useQueryClient();
+  const [action, setAction] = useState<ReportAction | null>(null);
+  const [reason, setReason] = useState("");
+
+  const { data: reports = [], isLoading } = useQuery(trpc.admin.listReports.queryOptions());
+
+  const invalidate = () =>
+    void qc.invalidateQueries({ queryKey: trpc.admin.listReports.queryKey() });
+
+  const dismiss = useMutation(
+    trpc.admin.dismissReport.mutationOptions({
+      onSuccess: () => { invalidate(); closeDialog(); },
+    })
+  );
+
+  const deletePost = useMutation(
+    trpc.admin.deleteReportedPost.mutationOptions({
+      onSuccess: () => { invalidate(); closeDialog(); },
+    })
+  );
+
+  function closeDialog() {
+    setAction(null);
+    setReason("");
+  }
+
+  function confirm() {
+    if (!action) return;
+    if (action.kind === "dismiss") {
+      dismiss.mutate({ reportId: action.reportId });
+    } else {
+      deletePost.mutate({ postId: action.postId, reason: reason || undefined });
+    }
+  }
+
+  const isPending = dismiss.isPending || deletePost.isPending;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <h1 className="text-2xl font-bold text-zinc-100">Reports</h1>
+        {reports.length > 0 && (
+          <Badge className="bg-yellow-600 text-yellow-100">{reports.length}</Badge>
+        )}
+      </div>
+
+      {isLoading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-5 w-5 animate-spin text-zinc-500" />
+        </div>
+      ) : reports.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 py-16 text-zinc-500">
+          <CheckCheck className="h-8 w-8" />
+          <p className="text-sm">Keine offenen Reports — alles sauber.</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {reports.map((report) => (
+            <div
+              key={report.id}
+              className="flex items-start gap-4 rounded-xl border border-zinc-800 bg-zinc-900 px-4 py-3"
+            >
+              <Flag className="h-4 w-4 text-yellow-400 shrink-0 mt-0.5" />
+
+              <div className="flex-1 min-w-0 space-y-1">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Badge variant="outline" className="border-yellow-600 text-yellow-400 text-[10px]">
+                    {REASON_LABELS[report.reason] ?? report.reason}
+                  </Badge>
+                  <span className="text-xs text-zinc-500">
+                    von <span className="text-zinc-300">{report.reporter.name}</span>
+                  </span>
+                  <span className="text-xs text-zinc-600">
+                    {new Date(report.createdAt).toLocaleDateString("de-DE")}
+                  </span>
+                </div>
+
+                {report.notes && (
+                  <p className="text-sm text-zinc-300 leading-snug">{report.notes}</p>
+                )}
+
+                <div className="flex gap-3 text-xs text-zinc-600 flex-wrap">
+                  {report.targetPostId && (
+                    <span>Post: <code className="text-zinc-500">{report.targetPostId}</code></span>
+                  )}
+                  {report.targetPetId && (
+                    <span>Pet: <code className="text-zinc-500">{report.targetPetId}</code></span>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex gap-2 shrink-0">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  title="Report ignorieren"
+                  className="text-zinc-400 hover:text-zinc-100"
+                  onClick={() => setAction({ kind: "dismiss", reportId: report.id })}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+
+                {report.targetPostId && (
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    title="Post löschen"
+                    className="text-red-400 hover:text-red-300"
+                    onClick={() =>
+                      setAction({ kind: "deletePost", postId: report.targetPostId! })
+                    }
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <Dialog open={!!action} onOpenChange={(o) => { if (!o) closeDialog(); }}>
+        <DialogContent className="bg-zinc-900 border-zinc-800 text-zinc-100 max-w-sm">
+          <DialogHeader>
+            <DialogTitle>
+              {action?.kind === "dismiss" ? "Report ignorieren" : "Post löschen"}
+            </DialogTitle>
+          </DialogHeader>
+
+          {action?.kind === "dismiss" ? (
+            <p className="text-sm text-zinc-400">
+              Den Report als unbegründet schließen? Der Inhalt bleibt bestehen.
+            </p>
+          ) : (
+            <>
+              <p className="text-sm text-zinc-400">
+                Den gemeldeten Post dauerhaft löschen? Alle zugehörigen Reports werden damit
+                ebenfalls geschlossen.
+              </p>
+              <Input
+                placeholder="Begründung (optional)"
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                className="bg-zinc-800 border-zinc-700 text-zinc-100 placeholder:text-zinc-500"
+              />
+            </>
+          )}
+
+          <DialogFooter className="gap-2">
+            <Button variant="ghost" className="text-zinc-400" onClick={closeDialog}>
+              Abbrechen
+            </Button>
+            <Button
+              variant={action?.kind === "deletePost" ? "destructive" : "default"}
+              onClick={confirm}
+              disabled={isPending}
+              className={action?.kind === "dismiss" ? "bg-zinc-700 hover:bg-zinc-600 text-zinc-100" : ""}
+            >
+              {isPending && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
+              {action?.kind === "dismiss" ? "Ignorieren" : "Post löschen"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/trpc/routers/admin.ts

@@ -213,13 +213,48 @@ export const adminRouter = router({
     return ctx.prisma.report.findMany({
       include: {
         reporter: { select: { id: true, name: true } },
-        post: { select: { id: true, caption: true, petId: true } },
       },
       orderBy: { createdAt: "desc" },
-      take: 50,
+      take: 100,
     });
   }),
 
+  dismissReport: protectedProcedure
+    .input(z.object({ reportId: z.string().min(1) }))
+    .mutation(async ({ ctx, input }) => {
+      await assertAdmin(ctx.prisma, ctx.userId);
+      const report = await ctx.prisma.report.findUnique({ where: { id: input.reportId } });
+      if (!report) throw new TRPCError({ code: "NOT_FOUND" });
+      await ctx.prisma.report.delete({ where: { id: input.reportId } });
+      await ctx.prisma.moderationLog.create({
+        data: {
+          action: "DISMISS_REPORT",
+          targetType: "REPORT",
+          targetId: input.reportId,
+          moderatorId: ctx.userId,
+        },
+      });
+      return { success: true };
+    }),
+
+  deleteReportedPost: protectedProcedure
+    .input(z.object({ postId: z.string().min(1), reason: z.string().max(500).optional() }))
+    .mutation(async ({ ctx, input }) => {
+      await assertAdmin(ctx.prisma, ctx.userId);
+      // Delete the post (cascades to reports, comments, reactions via Prisma schema)
+      await ctx.prisma.post.delete({ where: { id: input.postId } });
+      await ctx.prisma.moderationLog.create({
+        data: {
+          action: "DELETE_POST",
+          targetType: "POST",
+          targetId: input.postId,
+          reason: input.reason ?? null,
+          moderatorId: ctx.userId,
+        },
+      });
+      return { success: true };
+    }),
+
   // ─── Advertisements ──────────────────────────────────────────────────────────
   listAds: protectedProcedure.query(async ({ ctx }) => {
     await assertAdmin(ctx.prisma, ctx.userId);