t5de-hub/apps/web/app/console/cases/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { CaseAbout, caseKinds, CaseStatus } from "@/components/cases";
import { PageHeader } from "@/components/status";
import { DateTime } from "@/components/time";
import { Button, buttonVariants } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { api, unwrap } from "@/lib/api";
import { ConsoleNav, requireConsole } from "../console-nav";

export const metadata: Metadata = { title: "Cases" };

const statuses = ["open", "resolved", "declined"] as const;
const kinds = ["report", "rating-review", "removal-request", "catalog-deletion", "appeal"] as const;

export default async function CasesPage({ searchParams }: { searchParams: Promise<Record<string, string | string[]>> }) {
  await requireConsole("/console/cases");
  const params = await searchParams;
  // Open cases unless asked otherwise ("any" for all).
  const status = params.status === "any" ? undefined : (statuses.find((s) => s === params.status) ?? "open");
  const kind = kinds.find((k) => k === params.kind);
  const mine = params.mine === "1";
  const before = typeof params.before === "string" && /^\d+$/.test(params.before) ? Number(params.before) : undefined;
  const data = unwrap(
    await api.cases.get({
      query: {
        ...(status ? { status } : {}),
        ...(kind ? { kind } : {}),
        ...(mine ? { mine: "1" as const } : {}),
        ...(before ? { before } : {}),
        limit: 50,
      },
    }),
  );
  const older = new URLSearchParams({
    status: status ?? "any",
    ...(kind ? { kind } : {}),
    ...(mine ? { mine: "1" } : {}),
    ...(data.before ? { before: String(data.before) } : {}),
  });

  return (
    <>
      <PageHeader title="Cases">
        {data.moderator ? "Reports, reviews, requests and appeals." : "Cases you opened, and those about what you manage."}
      </PageHeader>
      <ConsoleNav />
      <form action="/console/cases" className="mb-6 flex flex-wrap gap-2">
        <NativeSelect name="status" defaultValue={status ?? "any"} aria-label="Status" className="w-36">
          <NativeSelectOption value="open">Open</NativeSelectOption>
          <NativeSelectOption value="resolved">Resolved</NativeSelectOption>
          <NativeSelectOption value="declined">Declined</NativeSelectOption>
          <NativeSelectOption value="any">Any status</NativeSelectOption>
        </NativeSelect>
        <NativeSelect name="kind" defaultValue={kind ?? ""} aria-label="Kind" className="w-44">
          <NativeSelectOption value="">Any kind</NativeSelectOption>
          {kinds.map((k) => (
            <NativeSelectOption key={k} value={k}>
              {caseKinds[k]}
            </NativeSelectOption>
          ))}
        </NativeSelect>
        <NativeSelect name="mine" defaultValue={mine ? "1" : ""} aria-label="Whose" className="w-44">
          <NativeSelectOption value="">{data.moderator ? "Everyone's" : "All I can see"}</NativeSelectOption>
          <NativeSelectOption value="1">Opened by me</NativeSelectOption>
        </NativeSelect>
        <Button type="submit">Filter</Button>
      </form>
      <Card>
        <CardContent>
          {data.cases.length === 0 ? (
            <p className="text-sm text-muted-foreground">Nothing here.</p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Case</TableHead>
                  <TableHead>About</TableHead>
                  <TableHead>Opened by</TableHead>
                  <TableHead>Assigned</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Changed</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.cases.map((c) => (
                  <TableRow key={c.id}>
                    <TableCell className="font-medium">
                      <Link href={`/console/cases/${c.id}`} className="underline-offset-4 hover:underline">
                        {caseKinds[c.kind] ?? c.kind} #{c.id}
                      </Link>
                    </TableCell>
                    <TableCell className="text-sm">
                      <CaseAbout tags={c.tags} names={c.tagNames} />
                    </TableCell>
                    <TableCell className="text-muted-foreground">{c.openedBy || "someone"}</TableCell>
                    <TableCell className="text-muted-foreground">{c.assignee ?? ""}</TableCell>
                    <TableCell>
                      <CaseStatus status={c.status} />
                    </TableCell>
                    <TableCell className="text-muted-foreground">
                      <DateTime iso={c.updatedAt} />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
      {data.before && data.cases.length === 50 && (
        <div className="mt-4">
          <Link href={`/console/cases?${older}`} className={buttonVariants({ variant: "outline" })}>
            Older
          </Link>
        </div>
      )}
    </>
  );
}