dhkatzandClaude Opus 5.5
64c552330b
apps/web: Next.js 16 (App Router), Tailwind 4 and shadcn/ui, light and dark from the system. Pages render on the server and call the API with Eden Treaty (typed by @t5de/api), forwarding the visitor's cookie; forms use server actions; sign-up, sign-in and sign-out use Better Auth's React client. /api is rewritten to the API so its cookies are first-party. Who's online follows the API's event stream (Next's gzip is off: it held the stream back). Standalone output with a Dockerfile; deploys to Vercel as is. Co-Authored-By: Claude Opus 5.5 <[email protected]>
97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { OnlineList } from "@/components/online-list";
|
|
import { PageHeader } from "@/components/status";
|
|
import { DateTime } from "@/components/time";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { api, unwrap, type AuditEntry } from "@/lib/api";
|
|
import { ConsoleNav, requireModerator } from "./console-nav";
|
|
|
|
export const metadata: Metadata = { title: "Console" };
|
|
|
|
export default async function Console() {
|
|
await requireModerator("/console");
|
|
const data = unwrap(await api.console.get());
|
|
const stats = [
|
|
{ label: "People", value: data.counts.people, note: "accounts" },
|
|
{ label: "IMVU accounts", value: data.counts.links, note: "linked" },
|
|
{ label: "Computers", value: data.counts.computers, note: "signed in" },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<PageHeader title="Console">Moderation.</PageHeader>
|
|
<ConsoleNav />
|
|
<div className="space-y-6">
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
|
{stats.map((s) => (
|
|
<Card key={s.label}>
|
|
<CardHeader>
|
|
<CardDescription>{s.label}</CardDescription>
|
|
<CardTitle className="text-3xl font-semibold tabular-nums">{s.value}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-sm text-muted-foreground">{s.note}</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Online now</CardTitle>
|
|
<CardDescription>
|
|
{data.connections} {data.connections === 1 ? "connection" : "connections"} when the page loaded
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<OnlineList initial={data.online} moderator />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Audit log</CardTitle>
|
|
<CardDescription>The latest 50 changes.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<AuditLog entries={data.audit} />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function AuditLog({ entries }: { entries: AuditEntry[] }) {
|
|
if (entries.length === 0) return <p className="text-sm text-muted-foreground">Nothing yet.</p>;
|
|
return (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>When</TableHead>
|
|
<TableHead>Who</TableHead>
|
|
<TableHead>What</TableHead>
|
|
<TableHead>Target</TableHead>
|
|
<TableHead>Detail</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{entries.map((e, i) => (
|
|
<TableRow key={i}>
|
|
<TableCell className="text-muted-foreground">
|
|
<DateTime iso={e.at} />
|
|
</TableCell>
|
|
<TableCell>{e.actor || <span className="text-muted-foreground">hub</span>}</TableCell>
|
|
<TableCell className="font-mono text-xs">{e.action}</TableCell>
|
|
<TableCell>{e.target}</TableCell>
|
|
<TableCell className="text-xs whitespace-normal text-muted-foreground">
|
|
{Object.entries((e.detail ?? {}) as Record<string, unknown>)
|
|
.map(([k, v]) => `${k}: ${typeof v === "string" ? v : JSON.stringify(v)}`)
|
|
.join(", ")}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
}
|