feat: banner and report viewer in admin panel

src/app/admin/page.tsx

@@ -1,11 +1,45 @@
-import { auth } from "@/lib/auth";
+import { Metadata } from "next";
+import Link from "next/link";
 import { redirect } from "next/navigation";
+import { revalidatePath } from "next/cache";
+
+import { Icon } from "@iconify/react";
+import { ReportStatus } from "@prisma/client";
+
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+import BannerForm from "@/components/admin/banner-form";
+
+export const metadata: Metadata = {
+	title: "Admin - TomodachiShare",
+	description: "TomodachiShare admin panel",
+	robots: {
+		index: false,
+		follow: false,
+	},
+};
 
 export default async function AdminPage() {
 	const session = await auth();
 
 	if (!session || Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) redirect("/404");
 
+	const reports = await prisma.report.findMany();
+
+	const updateStatus = async (formData: FormData) => {
+		"use server";
+		const id = Number(formData.get("id"));
+		const status = formData.get("status") as ReportStatus;
+
+		await prisma.report.update({
+			where: { id },
+			data: { status },
+		});
+
+		revalidatePath("/admin");
+	};
+
 	return (
 		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
 			<div>
@@ -13,12 +47,99 @@ export default async function AdminPage() {
 				<p className="text-sm text-zinc-500">View reports, set banners, etc.</p>
 			</div>
 
+			{/* Separator */}
+			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
+				<hr className="flex-grow border-zinc-300" />
+				<span>Banners</span>
+				<hr className="flex-grow border-zinc-300" />
+			</div>
+
+			<BannerForm />
+
 			{/* Separator */}
 			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
 				<hr className="flex-grow border-zinc-300" />
 				<span>Reports</span>
 				<hr className="flex-grow border-zinc-300" />
 			</div>
+
+			<div className="bg-orange-100 rounded-xl border-2 border-orange-400 w-full">
+				<table className="w-full text-sm table-fixed rounded-xl overflow-hidden">
+					<thead className="bg-orange-200 rounded">
+						<tr className=" border-b-2 border-orange-300 *:px-4 *:py-2 *:font-semibold *:text-left">
+							<th>Type</th>
+							<th>Status</th>
+							<th>Target</th>
+							<th>Reason</th>
+							<th>Notes</th>
+							<th>Author</th>
+							<th>Actions</th>
+						</tr>
+					</thead>
+					<tbody>
+						{reports.map((report, index) => (
+							<tr key={index} className="*:px-4 *:py-2">
+								<td>
+									<span
+										className={`text-xs font-semibold px-2 py-1 rounded-full border ${
+											report.reportType == "USER" ? "bg-red-200 text-red-800" : "bg-cyan-200 text-cyan-800"
+										}`}
+									>
+										{report.reportType}
+									</span>
+								</td>
+								<td>
+									<span
+										className={`text-xs font-semibold px-2 py-1 rounded-full border ${
+											report.status == "OPEN"
+												? "bg-orange-200 text-orange-800"
+												: report.status == "RESOLVED"
+												? "bg-green-200 text-green-800"
+												: "bg-zinc-200 text-zinc-800"
+										}`}
+									>
+										{report.status}
+									</span>
+								</td>
+								<td className="font-bold text-blue-500">
+									<Link href={report.reportType === "MII" ? `/mii/${report.targetId}` : `/profile/${report.targetId}`}>{report.targetId}</Link>
+								</td>
+								<td>{report.reason}</td>
+								<td className="italic">{report.reasonNotes}</td>
+								<td className="font-bold text-blue-500">
+									<Link href={`/profile/${report.authorId}`}>{report.authorId}</Link>
+								</td>
+								<td className="flex items-center text-2xl *:flex">
+									<form action={updateStatus}>
+										<input type="hidden" name="id" value={report.id} />
+										<input type="hidden" name="status" value={"OPEN"} />
+
+										<button type="submit" data-tooltip="Mark as OPEN" className="cursor-pointer text-orange-300">
+											<Icon icon="mdi:alert-circle" />
+										</button>
+									</form>
+									<form action={updateStatus}>
+										<input type="hidden" name="id" value={report.id} />
+										<input type="hidden" name="status" value={"RESOLVED"} />
+
+										<button type="submit" data-tooltip="Mark as RESOLVED" className="cursor-pointer text-green-400">
+											<Icon icon="mdi:check-circle" />
+										</button>
+									</form>
+									<form action={updateStatus}>
+										<input type="hidden" name="id" value={report.id} />
+										<input type="hidden" name="status" value={"DISMISSED"} />
+
+										<button type="submit" data-tooltip="Mark as DISMISSED" className="cursor-pointer text-zinc-400">
+											<Icon icon="mdi:close-circle" />
+										</button>
+									</form>
+								</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
 		</div>
 	);
 }

src/app/api/admin/banner/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+
+let bannerText: string | null = null;
+
+export async function GET() {
+	return NextResponse.json({ success: true, message: bannerText });
+}
+
+export async function POST(request: NextRequest) {
+	const session = await auth();
+	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+	if (Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+
+	const body = await request.text();
+	bannerText = body;
+
+	return NextResponse.json({ success: true });
+}
+
+export async function DELETE() {
+	const session = await auth();
+	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+	if (Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+
+	bannerText = null;
+	return NextResponse.json({ success: true });
+}

src/app/api/report/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
-import { ReportReason, ReportStatus, ReportType } from "@prisma/client";
+import { ReportReason, ReportType } from "@prisma/client";
 
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
@@ -15,10 +15,6 @@ const reportSchema = z.object({
 	notes: z.string().trim().max(256).optional(),
 });
 
-const getReportSchema = z.object({
-	status: z.enum(["open", "resolved", "dismissed"], { message: "Status must be either 'open', 'resolved', or 'dismissed'" }).default("open"),
-});
-
 export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
@@ -70,24 +66,3 @@ export async function POST(request: NextRequest) {
 
 	return rateLimit.sendResponse({ success: true });
 }
-
-export async function GET(request: NextRequest) {
-	const session = await auth();
-	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-
-	// Check if user is an admin
-	if (Number(session.user.id) != Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID))
-		return NextResponse.json({ error: "You're not an admin" }, { status: 403 });
-
-	const parsed = getReportSchema.safeParse(Object.fromEntries(request.nextUrl.searchParams));
-	if (!parsed.success) return NextResponse.json({ error: parsed.error.errors[0].message }, { status: 400 });
-	const { status } = parsed.data;
-
-	const reports = await prisma.report.findMany({
-		where: {
-			status: (status.toUpperCase() as ReportStatus) ?? "OPEN",
-		},
-	});
-
-	return NextResponse.json({ success: true, reports });
-}

src/app/layout.tsx

@@ -7,6 +7,7 @@ import "./globals.css";
 import Providers from "./provider";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
+import AdminBanner from "@/components/admin/banner";
 
 const lexend = Lexend({
 	subsets: ["latin"],
@@ -35,6 +36,7 @@ export default function RootLayout({
 
 				<Providers>
 					<Header />
+					<AdminBanner />
 					<div className="px-4 py-8 max-w-7xl w-full flex-grow flex flex-col">{children}</div>
 					<Footer />
 				</Providers>

src/components/admin/banner-form.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from "react";
+
+export default function BannerForm() {
+	const [message, setMessage] = useState("");
+
+	const onClickClear = async () => {
+		await fetch("/api/admin/banner", { method: "DELETE" });
+	};
+
+	const onClickSet = async () => {
+		await fetch("/api/admin/banner", { method: "POST", body: message });
+	};
+
+	return (
+		<div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex flex-col gap-2">
+			<input type="text" className="pill input w-full" placeholder="Enter banner text" value={message} onChange={(e) => setMessage(e.target.value)} />
+			<div className="flex gap-2 self-end">
+				<button type="button" className="pill button" onClick={onClickClear}>
+					Clear
+				</button>
+				<button type="submit" className="pill button" onClick={onClickSet}>
+					Set
+				</button>
+			</div>
+		</div>
+	);
+}

src/components/admin/banner.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import useSWR from "swr";
+import { Icon } from "@iconify/react";
+
+interface ApiResponse {
+	message: string;
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export default function AdminBanner() {
+	const { data } = useSWR<ApiResponse>("/api/admin/banner", fetcher);
+	if (!data || !data.message) return null;
+
+	return (
+		<div className="w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 shadow-md flex justify-center items-center gap-2 text-orange-900 font-semibold">
+			<Icon icon="humbleicons:exclamation" className="text-2xl" />
+			<span>{data.message}</span>
+		</div>
+	);
+}