feat(admin): items_base browser and AdminPageShell on core pages

Co-authored-by: Cursor <[email protected]>

src/app/admin/items/[id]/items-base-edit-form.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { updateItemsBase } from "@/actions/items-base";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useServerAction } from "@/hooks/use-server-action";
+
+export type ItemsBaseEditValues = {
+	id: number;
+	spriteId: number;
+	publicName: string;
+	itemName: string;
+	type: string;
+	width: number;
+	length: number;
+	stackHeight: string;
+	allowStack: number;
+	allowSit: number;
+	allowLay: number;
+	allowWalk: number;
+	allowGift: number;
+	allowTrade: number;
+	allowRecycle: number;
+	allowMarketplaceSell: number;
+	allowInventoryStack: number;
+	interactionType: string;
+	interactionModesCount: number;
+	vendingIds: string;
+	multiheight: string;
+	customparams: string;
+};
+
+const ALLOW_FLAGS: Array<{ key: keyof ItemsBaseEditValues; label: string }> = [
+	{ key: "allowStack", label: "Stack" },
+	{ key: "allowSit", label: "Sit" },
+	{ key: "allowLay", label: "Lay" },
+	{ key: "allowWalk", label: "Walk" },
+	{ key: "allowGift", label: "Gift" },
+	{ key: "allowTrade", label: "Trade" },
+	{ key: "allowRecycle", label: "Recycle" },
+	{ key: "allowMarketplaceSell", label: "Marketplace" },
+	{ key: "allowInventoryStack", label: "Inv. stack" },
+];
+
+export function ItemsBaseEditForm({
+	initial,
+	canEdit,
+}: {
+	initial: ItemsBaseEditValues;
+	canEdit: boolean;
+}) {
+	const t = useTranslations("pages.admin.items");
+	const router = useRouter();
+	const { run, isPending } = useServerAction();
+	const [form, setForm] = useState(initial);
+
+	function setField<K extends keyof ItemsBaseEditValues>(
+		key: K,
+		value: ItemsBaseEditValues[K],
+	) {
+		setForm((prev) => ({ ...prev, [key]: value }));
+	}
+
+	function handleSave() {
+		if (!canEdit || isPending) return;
+		const { id, ...fields } = form;
+		run(() => updateItemsBase({ id, fields }), {
+			successMessage: t("saved"),
+			onSuccess: () => router.refresh(),
+		});
+	}
+
+	return (
+		<div className="space-y-6">
+			<div className="flex flex-wrap items-center justify-between gap-3">
+				<div>
+					<p className="text-sm text-muted-foreground m-0 font-mono">
+						#{form.id}
+					</p>
+					<h2 className="text-xl font-bold m-0">
+						{form.publicName || form.itemName || t("untitled")}
+					</h2>
+				</div>
+				<div className="flex gap-2">
+					<Button variant="outline" asChild>
+						<Link href="/admin/items">{t("back")}</Link>
+					</Button>
+					{canEdit ? (
+						<Button onClick={handleSave} disabled={isPending}>
+							{t("save")}
+						</Button>
+					) : null}
+				</div>
+			</div>
+
+			<div className="grid gap-4 md:grid-cols-2">
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="text-sm">{t("sectionIdentity")}</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-3">
+						<div>
+							<Label htmlFor="publicName">{t("publicName")}</Label>
+							<Input
+								id="publicName"
+								value={form.publicName}
+								disabled={!canEdit}
+								onChange={(e) => setField("publicName", e.target.value)}
+							/>
+						</div>
+						<div>
+							<Label htmlFor="itemName">{t("itemName")}</Label>
+							<Input
+								id="itemName"
+								value={form.itemName}
+								disabled={!canEdit}
+								className="font-mono"
+								onChange={(e) => setField("itemName", e.target.value)}
+							/>
+						</div>
+						<div className="grid grid-cols-2 gap-3">
+							<div>
+								<Label htmlFor="type">{t("type")}</Label>
+								<Input
+									id="type"
+									value={form.type}
+									disabled={!canEdit}
+									maxLength={3}
+									onChange={(e) => setField("type", e.target.value)}
+								/>
+							</div>
+							<div>
+								<Label htmlFor="spriteId">{t("spriteId")}</Label>
+								<Input
+									id="spriteId"
+									type="number"
+									value={form.spriteId}
+									disabled={!canEdit}
+									onChange={(e) => setField("spriteId", Number(e.target.value))}
+								/>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="text-sm">{t("sectionDims")}</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-3">
+						<div className="grid grid-cols-3 gap-3">
+							<div>
+								<Label htmlFor="width">{t("width")}</Label>
+								<Input
+									id="width"
+									type="number"
+									value={form.width}
+									disabled={!canEdit}
+									onChange={(e) => setField("width", Number(e.target.value))}
+								/>
+							</div>
+							<div>
+								<Label htmlFor="length">{t("length")}</Label>
+								<Input
+									id="length"
+									type="number"
+									value={form.length}
+									disabled={!canEdit}
+									onChange={(e) => setField("length", Number(e.target.value))}
+								/>
+							</div>
+							<div>
+								<Label htmlFor="stackHeight">{t("stackHeight")}</Label>
+								<Input
+									id="stackHeight"
+									value={form.stackHeight}
+									disabled={!canEdit}
+									onChange={(e) => setField("stackHeight", e.target.value)}
+								/>
+							</div>
+						</div>
+						<div>
+							<Label htmlFor="interactionType">{t("interactionType")}</Label>
+							<Input
+								id="interactionType"
+								value={form.interactionType}
+								disabled={!canEdit}
+								onChange={(e) => setField("interactionType", e.target.value)}
+							/>
+						</div>
+						<div>
+							<Label htmlFor="interactionModesCount">
+								{t("interactionModes")}
+							</Label>
+							<Input
+								id="interactionModesCount"
+								type="number"
+								value={form.interactionModesCount}
+								disabled={!canEdit}
+								onChange={(e) =>
+									setField("interactionModesCount", Number(e.target.value))
+								}
+							/>
+						</div>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="text-sm">{t("sectionFlags")}</CardTitle>
+					</CardHeader>
+					<CardContent className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+						{ALLOW_FLAGS.map(({ key, label }) => (
+							<label
+								key={key}
+								className="flex items-center gap-2 text-sm rounded-md border px-2 py-1.5"
+							>
+								<input
+									type="checkbox"
+									checked={Number(form[key]) === 1}
+									disabled={!canEdit}
+									onChange={(e) => setField(key, e.target.checked ? 1 : 0)}
+								/>
+								{label}
+							</label>
+						))}
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="text-sm">{t("sectionExtra")}</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-3">
+						<div>
+							<Label htmlFor="vendingIds">{t("vendingIds")}</Label>
+							<Input
+								id="vendingIds"
+								value={form.vendingIds}
+								disabled={!canEdit}
+								onChange={(e) => setField("vendingIds", e.target.value)}
+							/>
+						</div>
+						<div>
+							<Label htmlFor="multiheight">{t("multiheight")}</Label>
+							<Input
+								id="multiheight"
+								value={form.multiheight}
+								disabled={!canEdit}
+								onChange={(e) => setField("multiheight", e.target.value)}
+							/>
+						</div>
+						<div>
+							<Label htmlFor="customparams">{t("customparams")}</Label>
+							<Input
+								id="customparams"
+								value={form.customparams}
+								disabled={!canEdit}
+								onChange={(e) => setField("customparams", e.target.value)}
+							/>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+}

src/app/admin/items/[id]/page.tsx

@@ -0,0 +1,66 @@
+import { Package } from "lucide-react";
+import { notFound, redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { AdminPageShell } from "@/components/admin/admin-page-shell";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
+import { ItemsBaseEditForm } from "./items-base-edit-form";
+
+export const dynamic = "force-dynamic";
+
+export default async function ItemsBaseDetailPage({
+	params,
+}: {
+	params: Promise<{ id: string }>;
+}) {
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.CATALOG_VIEW, session.user.rank)) {
+		redirect("/admin");
+	}
+
+	const t = await getTranslations("pages.admin.items");
+	const { id: rawId } = await params;
+	const id = Number(rawId);
+	if (!Number.isFinite(id) || id <= 0) notFound();
+
+	const item = await prisma.itemsBase.findUnique({ where: { id } });
+	if (!item) notFound();
+
+	const canEdit = canAccess(permissions, PERMS.CATALOG_EDIT, session.user.rank);
+
+	return (
+		<AdminPageShell
+			icon={Package}
+			title={t("editTitle", { name: item.publicName || item.itemName })}
+			subtitle={t("editSubtitle", { id: item.id })}
+		>
+			<ItemsBaseEditForm
+				canEdit={canEdit}
+				initial={{
+					id: item.id,
+					spriteId: item.spriteId,
+					publicName: item.publicName,
+					itemName: item.itemName,
+					type: item.type,
+					width: item.width,
+					length: item.length,
+					stackHeight: String(item.stackHeight),
+					allowStack: item.allowStack,
+					allowSit: item.allowSit,
+					allowLay: item.allowLay,
+					allowWalk: item.allowWalk,
+					allowGift: item.allowGift,
+					allowTrade: item.allowTrade,
+					allowRecycle: item.allowRecycle,
+					allowMarketplaceSell: item.allowMarketplaceSell,
+					allowInventoryStack: item.allowInventoryStack,
+					interactionType: item.interactionType,
+					interactionModesCount: item.interactionModesCount,
+					vendingIds: item.vendingIds,
+					multiheight: item.multiheight,
+					customparams: item.customparams,
+				}}
+			/>
+		</AdminPageShell>
+	);
+}

src/app/admin/items/items-table.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { Eye, Package, Pencil } from "lucide-react";
+import Link from "next/link";
+import { DataTable } from "@/components/admin/data-table";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
+
+export interface ItemsBaseRow {
+	id: number;
+	spriteId: number;
+	publicName: string;
+	itemName: string;
+	type: string;
+	interactionType: string;
+	width: number;
+	length: number;
+}
+
+function getColumns(canEdit: boolean): DataTableColumn<ItemsBaseRow>[] {
+	return [
+		{ key: "id", label: "ID", sortable: true },
+		{
+			key: "publicName",
+			label: "Name",
+			sortable: true,
+			render: (_, row) => (
+				<Link
+					href={`/admin/items/${row.id}`}
+					className="hover:opacity-80 flex items-center gap-2 min-w-0"
+				>
+					<Package className="h-4 w-4 shrink-0 text-muted-foreground" />
+					<div className="min-w-0">
+						<span className="font-medium block truncate">
+							{row.publicName || "—"}
+						</span>
+						<span className="text-xs text-muted-foreground font-mono truncate block">
+							{row.itemName}
+						</span>
+					</div>
+				</Link>
+			),
+		},
+		{
+			key: "spriteId",
+			label: "Sprite",
+			sortable: true,
+			render: (v) => <span className="tabular-nums text-sm">{String(v)}</span>,
+		},
+		{
+			key: "type",
+			label: "Type",
+			sortable: true,
+			filterKey: "filter_type",
+			filterOptions: [
+				{ label: "Floor (s)", value: "s" },
+				{ label: "Wall (i)", value: "i" },
+				{ label: "Effect (e)", value: "e" },
+				{ label: "Badge (b)", value: "b" },
+				{ label: "Robot (r)", value: "r" },
+			],
+			render: (v) => <Badge variant="outline">{String(v)}</Badge>,
+		},
+		{
+			key: "interactionType",
+			label: "Interaction",
+			sortable: true,
+			render: (v) => (
+				<span className="text-xs font-mono text-muted-foreground">
+					{String(v || "default")}
+				</span>
+			),
+		},
+		{
+			key: "width",
+			label: "Size",
+			render: (_, row) => (
+				<span className="tabular-nums text-sm">
+					{row.width}×{row.length}
+				</span>
+			),
+		},
+		{
+			key: "actions",
+			label: "",
+			render: (_, row) => (
+				<div className="flex gap-1 justify-end">
+					<Button variant="ghost" size="icon" asChild>
+						<Link href={`/admin/items/${row.id}`} aria-label="View">
+							{canEdit ? (
+								<Pencil className="h-4 w-4" />
+							) : (
+								<Eye className="h-4 w-4" />
+							)}
+						</Link>
+					</Button>
+				</div>
+			),
+		},
+	];
+}
+
+export function ItemsTable({
+	data,
+	canEdit,
+}: {
+	data: PaginatedResult<ItemsBaseRow>;
+	canEdit: boolean;
+}) {
+	return (
+		<DataTable
+			columns={getColumns(canEdit)}
+			data={data}
+			searchPlaceholder="Search name, classname or ID…"
+		/>
+	);
+}

src/app/admin/items/page.tsx

@@ -0,0 +1,73 @@
+import { Package } from "lucide-react";
+import { getTranslations } from "next-intl/server";
+import { AdminPageShell } from "@/components/admin/admin-page-shell";
+import { fetchAdminList } from "@/lib/admin-list";
+import { canAccess, PERMS } from "@/lib/permissions";
+import { type ItemsBaseRow, ItemsTable } from "./items-table";
+
+export default async function ItemsBasePage({
+	params: paramsPromise,
+	searchParams,
+}: {
+	params: Promise<{ locale: string }>;
+	searchParams: Promise<Record<string, string>>;
+}) {
+	const result = await fetchAdminList<ItemsBaseRow>(
+		{
+			permission: PERMS.CATALOG_VIEW,
+			model: "itemsBase",
+			searchFields: ["itemName", "publicName"],
+			defaultSort: { id: "desc" },
+			select: {
+				id: true,
+				spriteId: true,
+				publicName: true,
+				itemName: true,
+				type: true,
+				interactionType: true,
+				width: true,
+				length: true,
+			},
+			filterMap: {
+				filter_type: (v) => ({ type: v }),
+			},
+			mapRow: (r) => ({
+				id: r.id as number,
+				spriteId: r.spriteId as number,
+				publicName: (r.publicName as string) || "",
+				itemName: (r.itemName as string) || "",
+				type: (r.type as string) || "s",
+				interactionType: (r.interactionType as string) || "default",
+				width: r.width as number,
+				length: r.length as number,
+			}),
+		},
+		paramsPromise,
+		searchParams,
+	);
+
+	const t = await getTranslations("pages.admin.items");
+	const canEdit = canAccess(
+		result.permissions,
+		PERMS.CATALOG_EDIT,
+		result.rank,
+	);
+
+	return (
+		<AdminPageShell icon={Package} title={t("title")} subtitle={t("subtitle")}>
+			<p className="text-muted-foreground m-0">
+				{t("total", { count: result.total })}
+			</p>
+			<ItemsTable
+				data={{
+					rows: result.rows,
+					total: result.total,
+					page: result.page,
+					perPage: result.perPage,
+					lastPage: result.lastPage,
+				}}
+				canEdit={canEdit}
+			/>
+		</AdminPageShell>
+	);
+}