feat(37-02): admin global items client — list, edit, sidebar activation

- Add useAdminGlobalItems hooks: infinite query, detail query, update/delete mutations
- Activate Items sidebar link in admin.tsx (replace disabled div with active Link)
- Create /admin/items list page with table, infinite scroll, search, tag filters, skeleton
- Create /admin/items/$itemId edit page with all fields, manufacturer dropdown, TagInput chip component
- Delete confirmation dialog shows ownerCount impact message
- routeTree.gen.ts updated with /admin/items and /admin/items/$itemId routes

Closes ADMN-02, ADMN-03, ADMN-04 (client side)

src/client/hooks/useAdminGlobalItems.ts

@@ -0,0 +1,116 @@
+import {
+	useInfiniteQuery,
+	useMutation,
+	useQuery,
+	useQueryClient,
+} from "@tanstack/react-query";
+import { ApiError, apiDelete, apiGet, apiPut } from "../lib/api";
+
+// ── Types ──────────────────────────────────────────────────────────
+
+export interface AdminGlobalItem {
+	id: number;
+	manufacturerId: number;
+	brand: string;
+	model: string;
+	category: string | null;
+	weightGrams: number | null;
+	priceCents: number | null;
+	imageUrl: string | null;
+	description: string | null;
+	sourceUrl: string | null;
+	imageCredit: string | null;
+	imageSourceUrl: string | null;
+	dominantColor: string | null;
+	cropZoom: number | null;
+	cropX: number | null;
+	cropY: number | null;
+	createdAt: string;
+	tags: string[];
+	ownerCount: number;
+}
+
+export interface AdminGlobalItemPage {
+	items: AdminGlobalItem[];
+	total: number;
+	hasMore: boolean;
+	nextOffset: number;
+}
+
+export interface AdminGlobalItemDetail extends Omit<AdminGlobalItem, "tags"> {
+	ownerCount: number;
+}
+
+export interface UpdateGlobalItemPayload {
+	manufacturerId?: number;
+	model?: string;
+	category?: string | null;
+	weightGrams?: number | null;
+	priceCents?: number | null;
+	imageUrl?: string | null;
+	description?: string | null;
+	sourceUrl?: string | null;
+	imageCredit?: string | null;
+	imageSourceUrl?: string | null;
+	tags?: string[];
+}
+
+// ── Hooks ──────────────────────────────────────────────────────────
+
+export function useAdminGlobalItems(query?: string, tagNames?: string[]) {
+	const params = new URLSearchParams();
+	if (query) params.set("q", query);
+	if (tagNames && tagNames.length > 0) params.set("tags", tagNames.join(","));
+	params.set("limit", "50");
+	const qs = params.toString();
+
+	return useInfiniteQuery({
+		queryKey: ["admin-global-items", query ?? "", tagNames ?? []],
+		queryFn: ({ pageParam = 0 }) =>
+			apiGet<AdminGlobalItemPage>(
+				`/api/admin/items?offset=${pageParam}&${qs}`,
+			),
+		getNextPageParam: (lastPage) =>
+			lastPage.hasMore ? lastPage.nextOffset : undefined,
+		initialPageParam: 0,
+	});
+}
+
+export function useAdminGlobalItem(id: number | null) {
+	return useQuery({
+		queryKey: ["admin-global-item", id],
+		queryFn: () =>
+			apiGet<AdminGlobalItemDetail>(`/api/admin/items/${id}`),
+		enabled: id != null,
+		retry: (count, error) =>
+			error instanceof ApiError && error.status === 404 ? false : count < 3,
+	});
+}
+
+export function useUpdateAdminGlobalItem() {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: ({
+			id,
+			data,
+		}: {
+			id: number;
+			data: UpdateGlobalItemPayload;
+		}) => apiPut<AdminGlobalItemDetail>(`/api/admin/items/${id}`, data),
+		onSuccess: (_result, { id }) => {
+			queryClient.invalidateQueries({ queryKey: ["admin-global-items"] });
+			queryClient.invalidateQueries({ queryKey: ["admin-global-item", id] });
+		},
+	});
+}
+
+export function useDeleteAdminGlobalItem() {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (id: number) =>
+			apiDelete<{ success: boolean }>(`/api/admin/items/${id}`),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["admin-global-items"] });
+		},
+	});
+}

src/client/routeTree.gen.ts

@@ -22,7 +22,9 @@ import { Route as UsersUserIdRouteImport } from './routes/users/$userId'
 import { Route as SetupsSetupIdRouteImport } from './routes/setups/$setupId'
 import { Route as ItemsItemIdRouteImport } from './routes/items/$itemId'
 import { Route as GlobalItemsGlobalItemIdRouteImport } from './routes/global-items/$globalItemId'
+import { Route as AdminItemsRouteImport } from './routes/admin/items'
 import { Route as ThreadsThreadIdIndexRouteImport } from './routes/threads/$threadId/index'
+import { Route as AdminItemsItemIdRouteImport } from './routes/admin/items.$itemId'
 import { Route as ThreadsThreadIdCandidatesCandidateIdRouteImport } from './routes/threads/$threadId/candidates/$candidateId'
 
 const SettingsRoute = SettingsRouteImport.update({
@@ -90,11 +92,21 @@ const GlobalItemsGlobalItemIdRoute = GlobalItemsGlobalItemIdRouteImport.update({
   path: '/global-items/$globalItemId',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AdminItemsRoute = AdminItemsRouteImport.update({
+  id: '/items',
+  path: '/items',
+  getParentRoute: () => AdminRoute,
+} as any)
 const ThreadsThreadIdIndexRoute = ThreadsThreadIdIndexRouteImport.update({
   id: '/threads/$threadId/',
   path: '/threads/$threadId/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AdminItemsItemIdRoute = AdminItemsItemIdRouteImport.update({
+  id: '/$itemId',
+  path: '/$itemId',
+  getParentRoute: () => AdminItemsRoute,
+} as any)
 const ThreadsThreadIdCandidatesCandidateIdRoute =
   ThreadsThreadIdCandidatesCandidateIdRouteImport.update({
     id: '/threads/$threadId/candidates/$candidateId',
@@ -108,6 +120,7 @@ export interface FileRoutesByFullPath {
   '/login': typeof LoginRoute
   '/profile': typeof ProfileRoute
   '/settings': typeof SettingsRoute
+  '/admin/items': typeof AdminItemsRouteWithChildren
   '/global-items/$globalItemId': typeof GlobalItemsGlobalItemIdRoute
   '/items/$itemId': typeof ItemsItemIdRoute
   '/setups/$setupId': typeof SetupsSetupIdRoute
@@ -116,6 +129,7 @@ export interface FileRoutesByFullPath {
   '/collection/': typeof CollectionIndexRoute
   '/global-items/': typeof GlobalItemsIndexRoute
   '/setups/': typeof SetupsIndexRoute
+  '/admin/items/$itemId': typeof AdminItemsItemIdRoute
   '/threads/$threadId/': typeof ThreadsThreadIdIndexRoute
   '/threads/$threadId/candidates/$candidateId': typeof ThreadsThreadIdCandidatesCandidateIdRoute
 }
@@ -124,6 +138,7 @@ export interface FileRoutesByTo {
   '/login': typeof LoginRoute
   '/profile': typeof ProfileRoute
   '/settings': typeof SettingsRoute
+  '/admin/items': typeof AdminItemsRouteWithChildren
   '/global-items/$globalItemId': typeof GlobalItemsGlobalItemIdRoute
   '/items/$itemId': typeof ItemsItemIdRoute
   '/setups/$setupId': typeof SetupsSetupIdRoute
@@ -132,6 +147,7 @@ export interface FileRoutesByTo {
   '/collection': typeof CollectionIndexRoute
   '/global-items': typeof GlobalItemsIndexRoute
   '/setups': typeof SetupsIndexRoute
+  '/admin/items/$itemId': typeof AdminItemsItemIdRoute
   '/threads/$threadId': typeof ThreadsThreadIdIndexRoute
   '/threads/$threadId/candidates/$candidateId': typeof ThreadsThreadIdCandidatesCandidateIdRoute
 }
@@ -142,6 +158,7 @@ export interface FileRoutesById {
   '/login': typeof LoginRoute
   '/profile': typeof ProfileRoute
   '/settings': typeof SettingsRoute
+  '/admin/items': typeof AdminItemsRouteWithChildren
   '/global-items/$globalItemId': typeof GlobalItemsGlobalItemIdRoute
   '/items/$itemId': typeof ItemsItemIdRoute
   '/setups/$setupId': typeof SetupsSetupIdRoute
@@ -150,6 +167,7 @@ export interface FileRoutesById {
   '/collection/': typeof CollectionIndexRoute
   '/global-items/': typeof GlobalItemsIndexRoute
   '/setups/': typeof SetupsIndexRoute
+  '/admin/items/$itemId': typeof AdminItemsItemIdRoute
   '/threads/$threadId/': typeof ThreadsThreadIdIndexRoute
   '/threads/$threadId/candidates/$candidateId': typeof ThreadsThreadIdCandidatesCandidateIdRoute
 }
@@ -161,6 +179,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/profile'
     | '/settings'
+    | '/admin/items'
     | '/global-items/$globalItemId'
     | '/items/$itemId'
     | '/setups/$setupId'
@@ -169,6 +188,7 @@ export interface FileRouteTypes {
     | '/collection/'
     | '/global-items/'
     | '/setups/'
+    | '/admin/items/$itemId'
     | '/threads/$threadId/'
     | '/threads/$threadId/candidates/$candidateId'
   fileRoutesByTo: FileRoutesByTo
@@ -177,6 +197,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/profile'
     | '/settings'
+    | '/admin/items'
     | '/global-items/$globalItemId'
     | '/items/$itemId'
     | '/setups/$setupId'
@@ -185,6 +206,7 @@ export interface FileRouteTypes {
     | '/collection'
     | '/global-items'
     | '/setups'
+    | '/admin/items/$itemId'
     | '/threads/$threadId'
     | '/threads/$threadId/candidates/$candidateId'
   id:
@@ -194,6 +216,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/profile'
     | '/settings'
+    | '/admin/items'
     | '/global-items/$globalItemId'
     | '/items/$itemId'
     | '/setups/$setupId'
@@ -202,6 +225,7 @@ export interface FileRouteTypes {
     | '/collection/'
     | '/global-items/'
     | '/setups/'
+    | '/admin/items/$itemId'
     | '/threads/$threadId/'
     | '/threads/$threadId/candidates/$candidateId'
   fileRoutesById: FileRoutesById
@@ -316,6 +340,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof GlobalItemsGlobalItemIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/admin/items': {
+      id: '/admin/items'
+      path: '/items'
+      fullPath: '/admin/items'
+      preLoaderRoute: typeof AdminItemsRouteImport
+      parentRoute: typeof AdminRoute
+    }
     '/threads/$threadId/': {
       id: '/threads/$threadId/'
       path: '/threads/$threadId'
@@ -323,6 +354,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ThreadsThreadIdIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/admin/items/$itemId': {
+      id: '/admin/items/$itemId'
+      path: '/$itemId'
+      fullPath: '/admin/items/$itemId'
+      preLoaderRoute: typeof AdminItemsItemIdRouteImport
+      parentRoute: typeof AdminItemsRoute
+    }
     '/threads/$threadId/candidates/$candidateId': {
       id: '/threads/$threadId/candidates/$candidateId'
       path: '/threads/$threadId/candidates/$candidateId'
@@ -333,11 +371,25 @@ declare module '@tanstack/react-router' {
   }
 }
 
+interface AdminItemsRouteChildren {
+  AdminItemsItemIdRoute: typeof AdminItemsItemIdRoute
+}
+
+const AdminItemsRouteChildren: AdminItemsRouteChildren = {
+  AdminItemsItemIdRoute: AdminItemsItemIdRoute,
+}
+
+const AdminItemsRouteWithChildren = AdminItemsRoute._addFileChildren(
+  AdminItemsRouteChildren,
+)
+
 interface AdminRouteChildren {
+  AdminItemsRoute: typeof AdminItemsRouteWithChildren
   AdminIndexRoute: typeof AdminIndexRoute
 }
 
 const AdminRouteChildren: AdminRouteChildren = {
+  AdminItemsRoute: AdminItemsRouteWithChildren,
   AdminIndexRoute: AdminIndexRoute,
 }
 

src/client/routes/admin.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, Outlet, useNavigate } from "@tanstack/react-router";
+import { Link, createFileRoute, Outlet, useNavigate } from "@tanstack/react-router";
 import { useEffect } from "react";
 import { useAuth } from "../hooks/useAuth";
 import { LucideIcon } from "../lib/iconData";
@@ -28,17 +28,16 @@ function AdminLayout() {
 					Admin
 				</p>
 
-				{/* Items — disabled (phase 37) */}
+				{/* Items — active (phase 37) */}
-				<div
+				<Link
-					className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-300 cursor-not-allowed"
+					to="/admin/items"
-					title="Coming in a future release"
+					activeProps={{ className: "bg-gray-100 text-gray-900 font-medium" }}
+					inactiveProps={{ className: "text-gray-600 hover:bg-gray-50" }}
+					className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
 				>
 					<LucideIcon name="package" size={16} />
 					<span>Items</span>
-					<span className="ml-auto text-xs bg-gray-100 text-gray-400 px-1.5 py-0.5 rounded">
+				</Link>
-						Soon
-					</span>
-				</div>
 
 				{/* Tags — disabled (phase 38) */}
 				<div

src/client/routes/admin/items.$itemId.tsx

@@ -0,0 +1,435 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useEffect, useRef, useState } from "react";
+import {
+	useAdminGlobalItem,
+	useDeleteAdminGlobalItem,
+	useUpdateAdminGlobalItem,
+} from "../../hooks/useAdminGlobalItems";
+import { apiGet } from "../../lib/api";
+
+export const Route = createFileRoute("/admin/items/$itemId")({
+	component: AdminItemEditPage,
+});
+
+interface Manufacturer {
+	id: number;
+	name: string;
+	slug: string;
+}
+
+// ── Tag chip input ─────────────────────────────────────────────────
+
+function TagInput({
+	value,
+	onChange,
+}: {
+	value: string[];
+	onChange: (tags: string[]) => void;
+}) {
+	const [inputValue, setInputValue] = useState("");
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	function addTag(raw: string) {
+		const tag = raw.trim().toLowerCase().replace(/\s+/g, "-");
+		if (tag && !value.includes(tag)) {
+			onChange([...value, tag]);
+		}
+		setInputValue("");
+	}
+
+	function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+		if (e.key === "Enter" || e.key === ",") {
+			e.preventDefault();
+			addTag(inputValue);
+		} else if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
+			onChange(value.slice(0, -1));
+		}
+	}
+
+	function removeTag(tag: string) {
+		onChange(value.filter((t) => t !== tag));
+	}
+
+	return (
+		<div
+			className="flex flex-wrap gap-2 rounded-lg border border-gray-200 px-3 py-2 min-h-[40px] cursor-text"
+			onClick={() => inputRef.current?.focus()}
+		>
+			{value.map((tag) => (
+				<span
+					key={tag}
+					className="inline-flex items-center gap-1 bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full"
+				>
+					{tag}
+					<button
+						type="button"
+						onClick={(e) => { e.stopPropagation(); removeTag(tag); }}
+						className="text-gray-400 hover:text-gray-600"
+					>
+						×
+					</button>
+				</span>
+			))}
+			<input
+				ref={inputRef}
+				type="text"
+				value={inputValue}
+				onChange={(e) => setInputValue(e.target.value)}
+				onKeyDown={handleKeyDown}
+				onBlur={() => { if (inputValue) addTag(inputValue); }}
+				placeholder={value.length === 0 ? "Add tags..." : ""}
+				className="outline-none bg-transparent text-sm flex-1 min-w-[100px]"
+			/>
+		</div>
+	);
+}
+
+// ── Main edit page ─────────────────────────────────────────────────
+
+function AdminItemEditPage() {
+	const { itemId } = Route.useParams();
+	const id = Number(itemId);
+	const navigate = useNavigate();
+
+	const { data: item, isLoading, isError } = useAdminGlobalItem(isNaN(id) ? null : id);
+	const updateMutation = useUpdateAdminGlobalItem();
+	const deleteMutation = useDeleteAdminGlobalItem();
+
+	const [manufacturers, setManufacturers] = useState<Manufacturer[]>([]);
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+	// Form state
+	const [form, setForm] = useState({
+		manufacturerId: 0,
+		model: "",
+		category: "",
+		weightGrams: "",
+		priceCents: "",
+		imageUrl: "",
+		description: "",
+		sourceUrl: "",
+		imageCredit: "",
+		imageSourceUrl: "",
+		tags: [] as string[],
+	});
+
+	// Populate form when item loads
+	useEffect(() => {
+		if (item) {
+			setForm({
+				manufacturerId: item.manufacturerId,
+				model: item.model,
+				category: item.category ?? "",
+				weightGrams: item.weightGrams != null ? String(item.weightGrams) : "",
+				priceCents: item.priceCents != null ? String(item.priceCents / 100) : "",
+				imageUrl: item.imageUrl ?? "",
+				description: item.description ?? "",
+				sourceUrl: item.sourceUrl ?? "",
+				imageCredit: item.imageCredit ?? "",
+				imageSourceUrl: item.imageSourceUrl ?? "",
+				tags: [],
+			});
+		}
+	}, [item]);
+
+	// Fetch manufacturers for dropdown
+	useEffect(() => {
+		apiGet<Manufacturer[]>("/api/manufacturers").then(setManufacturers).catch(() => {});
+	}, []);
+
+	function handleChange(
+		field: keyof typeof form,
+		value: string | number | string[],
+	) {
+		setForm((prev) => ({ ...prev, [field]: value }));
+	}
+
+	async function handleSave(e: React.FormEvent) {
+		e.preventDefault();
+		const weightGrams = form.weightGrams !== "" ? Number(form.weightGrams) : null;
+		const priceCents =
+			form.priceCents !== "" ? Math.round(Number(form.priceCents) * 100) : null;
+
+		await updateMutation.mutateAsync({
+			id,
+			data: {
+				manufacturerId: form.manufacturerId || undefined,
+				model: form.model || undefined,
+				category: form.category || null,
+				weightGrams: weightGrams,
+				priceCents: priceCents,
+				imageUrl: form.imageUrl || null,
+				description: form.description || null,
+				sourceUrl: form.sourceUrl || null,
+				imageCredit: form.imageCredit || null,
+				imageSourceUrl: form.imageSourceUrl || null,
+				tags: form.tags,
+			},
+		});
+	}
+
+	async function handleDelete() {
+		await deleteMutation.mutateAsync(id);
+		navigate({ to: "/admin/items" });
+	}
+
+	const inputClass =
+		"w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-300";
+	const labelClass = "block text-sm font-medium text-gray-700 mb-1";
+	const sectionClass = "border-t border-gray-100 pt-6 mt-6";
+
+	if (isLoading) {
+		return (
+			<div className="max-w-2xl mx-auto">
+				<div className="h-4 w-16 bg-gray-100 rounded animate-pulse mb-6" />
+				<div className="space-y-4">
+					{Array.from({ length: 8 }).map((_, i) => (
+						<div key={i} className="h-10 bg-gray-100 rounded-lg animate-pulse" />
+					))}
+				</div>
+			</div>
+		);
+	}
+
+	if (isError || !item) {
+		return (
+			<div className="max-w-2xl mx-auto text-center py-12">
+				<p className="text-sm text-red-500">Failed to load item. Please try again.</p>
+			</div>
+		);
+	}
+
+	const ownerText =
+		item.ownerCount === 0
+			? "Not in any collection"
+			: item.ownerCount === 1
+				? "1 user in collection"
+				: `${item.ownerCount} users in collection`;
+
+	return (
+		<div className="max-w-2xl mx-auto">
+			{/* Back link */}
+			<button
+				type="button"
+				onClick={() => navigate({ to: "/admin/items" })}
+				className="text-sm text-gray-400 hover:text-gray-600 transition-colors mb-6 block"
+			>
+				← Items
+			</button>
+
+			{/* Page heading */}
+			<div className="mb-6">
+				<h1 className="text-lg font-semibold text-gray-900">
+					{item.brand} {item.model}
+				</h1>
+				<p className="text-sm text-gray-400 mt-0.5">{ownerText}</p>
+			</div>
+
+			<form onSubmit={handleSave}>
+				{/* Image section */}
+				<div>
+					{item.imageUrl && (
+						<img
+							src={item.imageUrl}
+							alt={`${item.brand} ${item.model}`}
+							className="w-full h-48 object-contain rounded-lg bg-gray-50 mb-3"
+						/>
+					)}
+					<label className={labelClass}>Image URL</label>
+					<input
+						type="url"
+						value={form.imageUrl}
+						onChange={(e) => handleChange("imageUrl", e.target.value)}
+						className={inputClass}
+						placeholder="https://..."
+					/>
+				</div>
+
+				{/* Brand + Model */}
+				<div className={sectionClass}>
+					<div className="grid grid-cols-2 gap-4">
+						<div>
+							<label className={labelClass}>Brand (Manufacturer)</label>
+							<select
+								value={form.manufacturerId}
+								onChange={(e) => handleChange("manufacturerId", Number(e.target.value))}
+								className={`${inputClass} appearance-none bg-white`}
+							>
+								<option value={0}>Select manufacturer...</option>
+								{manufacturers.map((m) => (
+									<option key={m.id} value={m.id}>
+										{m.name}
+									</option>
+								))}
+							</select>
+						</div>
+						<div>
+							<label className={labelClass}>Model</label>
+							<input
+								type="text"
+								value={form.model}
+								onChange={(e) => handleChange("model", e.target.value)}
+								className={inputClass}
+								placeholder="e.g. Woodsmoke 700"
+							/>
+						</div>
+					</div>
+					<div className="mt-4">
+						<label className={labelClass}>Category</label>
+						<input
+							type="text"
+							value={form.category}
+							onChange={(e) => handleChange("category", e.target.value)}
+							className={inputClass}
+							placeholder="e.g. Bikepacking Bags"
+						/>
+					</div>
+				</div>
+
+				{/* Weight + Price */}
+				<div className={sectionClass}>
+					<div className="grid grid-cols-2 gap-4">
+						<div>
+							<label className={labelClass}>Weight (g)</label>
+							<input
+								type="number"
+								value={form.weightGrams}
+								onChange={(e) => handleChange("weightGrams", e.target.value)}
+								className={inputClass}
+								placeholder="e.g. 450"
+								min="0"
+								step="1"
+							/>
+						</div>
+						<div>
+							<label className={labelClass}>Price (€)</label>
+							<input
+								type="number"
+								value={form.priceCents}
+								onChange={(e) => handleChange("priceCents", e.target.value)}
+								className={inputClass}
+								placeholder="e.g. 129.99"
+								min="0"
+								step="0.01"
+							/>
+						</div>
+					</div>
+				</div>
+
+				{/* Tags + Description + Source */}
+				<div className={sectionClass}>
+					<div className="mb-4">
+						<label className={labelClass}>Tags</label>
+						<TagInput
+							value={form.tags}
+							onChange={(tags) => handleChange("tags", tags)}
+						/>
+					</div>
+					<div className="mb-4">
+						<label className={labelClass}>Description</label>
+						<textarea
+							value={form.description}
+							onChange={(e) => handleChange("description", e.target.value)}
+							className={`${inputClass} min-h-[80px] resize-y`}
+							placeholder="Brief description of the item..."
+						/>
+					</div>
+					<div className="mb-4">
+						<label className={labelClass}>Source URL</label>
+						<input
+							type="url"
+							value={form.sourceUrl}
+							onChange={(e) => handleChange("sourceUrl", e.target.value)}
+							className={inputClass}
+							placeholder="https://manufacturer.com/product"
+						/>
+					</div>
+					<div className="mb-4">
+						<label className={labelClass}>Image Credit</label>
+						<input
+							type="text"
+							value={form.imageCredit}
+							onChange={(e) => handleChange("imageCredit", e.target.value)}
+							className={inputClass}
+							placeholder="e.g. © Manufacturer Name"
+						/>
+					</div>
+					<div>
+						<label className={labelClass}>Image Source URL</label>
+						<input
+							type="url"
+							value={form.imageSourceUrl}
+							onChange={(e) => handleChange("imageSourceUrl", e.target.value)}
+							className={inputClass}
+							placeholder="https://..."
+						/>
+					</div>
+				</div>
+
+				{/* Actions */}
+				<div className="flex items-center justify-between mt-8 pt-6 border-t border-gray-100">
+					<button
+						type="button"
+						onClick={() => setShowDeleteConfirm(true)}
+						disabled={deleteMutation.isPending}
+						className="px-4 py-2 rounded-lg border border-red-200 text-red-600 hover:bg-red-50 text-sm font-medium transition-colors disabled:opacity-50"
+					>
+						Delete Item
+					</button>
+					<button
+						type="submit"
+						disabled={updateMutation.isPending}
+						className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors disabled:opacity-50"
+					>
+						{updateMutation.isPending ? "Saving..." : "Save Changes"}
+					</button>
+				</div>
+
+				{/* Save error */}
+				{updateMutation.isError && (
+					<p className="text-sm text-red-500 mt-2 text-right">
+						Failed to save. Please try again.
+					</p>
+				)}
+			</form>
+
+			{/* Delete confirmation dialog */}
+			{showDeleteConfirm && (
+				<div className="fixed inset-0 z-50 flex items-center justify-center">
+					<div
+						className="absolute inset-0 bg-black/30"
+						onClick={() => setShowDeleteConfirm(false)}
+					/>
+					<div className="relative bg-white rounded-xl shadow-lg p-6 max-w-sm mx-4 w-full">
+						<h2 className="text-lg font-semibold text-gray-900 mb-2">
+							Delete {item.brand} {item.model}?
+						</h2>
+						<p className="text-sm text-gray-600 mb-6">
+							{item.ownerCount === 0
+								? "This item is not in any collection. This cannot be undone."
+								: `${item.ownerCount} ${item.ownerCount === 1 ? "user has" : "users have"} this item in their collection. This cannot be undone.`}
+						</p>
+						<div className="flex gap-3 justify-end">
+							<button
+								type="button"
+								onClick={() => setShowDeleteConfirm(false)}
+								disabled={deleteMutation.isPending}
+								className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg disabled:opacity-50"
+							>
+								Cancel
+							</button>
+							<button
+								type="button"
+								onClick={handleDelete}
+								disabled={deleteMutation.isPending}
+								className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg disabled:opacity-50"
+							>
+								{deleteMutation.isPending ? "Deleting..." : "Delete"}
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

src/client/routes/admin/items.tsx

@@ -0,0 +1,237 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useEffect, useRef, useState } from "react";
+import { useAdminGlobalItems } from "../../hooks/useAdminGlobalItems";
+import { useFormatters } from "../../hooks/useFormatters";
+import { useTags } from "../../hooks/useTags";
+
+export const Route = createFileRoute("/admin/items")({
+	component: AdminItemsPage,
+});
+
+function AdminItemsPage() {
+	const navigate = useNavigate();
+	const { weight: formatWeight, price: formatPrice } = useFormatters();
+	const [searchQuery, setSearchQuery] = useState("");
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [debouncedQuery, setDebouncedQuery] = useState("");
+	const sentinelRef = useRef<HTMLDivElement>(null);
+
+	// Debounce search input
+	useEffect(() => {
+		const timer = setTimeout(() => setDebouncedQuery(searchQuery), 300);
+		return () => clearTimeout(timer);
+	}, [searchQuery]);
+
+	const {
+		data,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+		isLoading,
+		isError,
+	} = useAdminGlobalItems(
+		debouncedQuery || undefined,
+		selectedTags.length > 0 ? selectedTags : undefined,
+	);
+
+	const { data: allTags } = useTags();
+
+	// Infinite scroll sentinel
+	useEffect(() => {
+		const el = sentinelRef.current;
+		if (!el) return;
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) {
+					fetchNextPage();
+				}
+			},
+			{ threshold: 0.1 },
+		);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+	const allItems = data?.pages.flatMap((p) => p.items) ?? [];
+	const total = data?.pages[0]?.total ?? 0;
+
+	function toggleTag(name: string) {
+		setSelectedTags((prev) =>
+			prev.includes(name) ? prev.filter((t) => t !== name) : [...prev, name],
+		);
+	}
+
+	return (
+		<div>
+			{/* Header */}
+			<div className="flex items-center justify-between mb-4">
+				<div>
+					<h1 className="text-lg font-semibold text-gray-900">Catalog Items</h1>
+					{!isLoading && (
+						<p className="text-sm text-gray-400 mt-0.5">
+							{total.toLocaleString()} items
+						</p>
+					)}
+				</div>
+				<input
+					type="text"
+					placeholder="Search catalog..."
+					value={searchQuery}
+					onChange={(e) => setSearchQuery(e.target.value)}
+					className="w-64 rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-300"
+				/>
+			</div>
+
+			{/* Tag filters */}
+			{allTags && allTags.length > 0 && (
+				<div className="flex flex-wrap gap-2 mb-4">
+					{allTags.map((tag) => (
+						<button
+							key={tag.id}
+							onClick={() => toggleTag(tag.name)}
+							className={`px-3 py-1 rounded-full text-xs font-medium transition-colors ${
+								selectedTags.includes(tag.name)
+									? "bg-blue-50 text-blue-600 border border-blue-200"
+									: "bg-gray-100 text-gray-600"
+							}`}
+						>
+							{tag.name}
+						</button>
+					))}
+				</div>
+			)}
+
+			{/* Error state */}
+			{isError && (
+				<div className="py-12 text-center text-sm text-red-500">
+					Failed to load catalog items. Please try again.
+				</div>
+			)}
+
+			{/* Table */}
+			{!isError && (
+				<div className="w-full overflow-hidden rounded-xl border border-gray-100 bg-white">
+					<table className="w-full text-sm">
+						<thead className="bg-gray-50 border-b border-gray-100">
+							<tr>
+								<th className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wide">
+									Brand / Model
+								</th>
+								<th className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wide">
+									Category
+								</th>
+								<th className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wide">
+									Weight
+								</th>
+								<th className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wide">
+									Price
+								</th>
+								<th className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wide">
+									Tags
+								</th>
+								<th className="px-4 py-3 text-right text-xs font-semibold text-gray-400 uppercase tracking-wide">
+									Owners
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{isLoading
+								? Array.from({ length: 6 }).map((_, i) => (
+										<tr key={i} className="border-b border-gray-50">
+											{Array.from({ length: 6 }).map((_, j) => (
+												<td key={j} className="px-4 py-3">
+													<div className="h-4 bg-gray-100 rounded animate-pulse" />
+												</td>
+											))}
+										</tr>
+									))
+								: allItems.map((item) => (
+										<tr
+											key={item.id}
+											className="border-b border-gray-50 hover:bg-gray-50 cursor-pointer transition-colors"
+											onClick={() =>
+												navigate({ to: "/admin/items/$itemId", params: { itemId: String(item.id) } })
+											}
+										>
+											<td className="px-4 py-3">
+												<span className="font-medium text-gray-900">{item.brand}</span>
+												<span className="text-gray-500 ml-1">{item.model}</span>
+											</td>
+											<td className="px-4 py-3 text-gray-700">
+												{item.category ?? <span className="text-gray-300">—</span>}
+											</td>
+											<td className="px-4 py-3 text-gray-700">
+												{item.weightGrams != null
+													? formatWeight(item.weightGrams)
+													: <span className="text-gray-300">—</span>}
+											</td>
+											<td className="px-4 py-3 text-gray-700">
+												{item.priceCents != null
+													? formatPrice(item.priceCents)
+													: <span className="text-gray-300">—</span>}
+											</td>
+											<td className="px-4 py-3">
+												{item.tags.length === 0 ? (
+													<span className="text-gray-300">—</span>
+												) : item.tags.length <= 2 ? (
+													<div className="flex flex-wrap gap-1">
+														{item.tags.map((t) => (
+															<span
+																key={t}
+																className="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full"
+															>
+																{t}
+															</span>
+														))}
+													</div>
+												) : (
+													<span className="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
+														+{item.tags.length}
+													</span>
+												)}
+											</td>
+											<td className="px-4 py-3 text-right">
+												<span
+													className={
+														item.ownerCount === 0
+															? "text-gray-300"
+															: "text-gray-500"
+													}
+												>
+													{item.ownerCount}
+												</span>
+											</td>
+										</tr>
+									))}
+						</tbody>
+					</table>
+
+					{/* Empty state (after load, no items) */}
+					{!isLoading && allItems.length === 0 && !isError && (
+						<div className="py-12 text-center">
+							<p className="text-sm font-medium text-gray-900">No items found</p>
+							<p className="text-sm text-gray-400 mt-1">
+								Try a different search or clear your filters.
+							</p>
+						</div>
+					)}
+
+					{/* Infinite scroll sentinel */}
+					<div ref={sentinelRef} className="h-4" />
+
+					{/* Loading more */}
+					{isFetchingNextPage && (
+						<div className="py-4 text-center text-sm text-gray-400">Loading...</div>
+					)}
+
+					{/* All loaded message */}
+					{!isLoading && !hasNextPage && allItems.length > 0 && (
+						<div className="py-4 text-center text-sm text-gray-400">
+							All {total.toLocaleString()} items loaded
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}