feat(03-02): setup list page, detail page, and item picker

- Create SetupCard component with name, item count, weight, cost display
- Build setups list page with inline create form and grid layout
- Build setup detail page with category-grouped items and sticky totals bar
- Create ItemPicker component in SlideOutPanel with category-grouped checkboxes
- Add onRemove prop to ItemCard for non-destructive setup item removal
- Setup detail has delete confirmation dialog with collection safety note
- Empty states for both setup list and setup detail pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-15 12:50:54 +01:00
parent 86a7a0def1
commit 67099551d0
5 changed files with 552 additions and 8 deletions

View File

@@ -0,0 +1,43 @@
import { Link } from "@tanstack/react-router";
import { formatWeight, formatPrice } from "../lib/formatters";
interface SetupCardProps {
id: number;
name: string;
itemCount: number;
totalWeight: number;
totalCost: number;
}
export function SetupCard({
id,
name,
itemCount,
totalWeight,
totalCost,
}: SetupCardProps) {
return (
<Link
to="/setups/$setupId"
params={{ setupId: String(id) }}
className="block w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-4"
>
<div className="flex items-start justify-between mb-3">
<h3 className="text-sm font-semibold text-gray-900 truncate">
{name}
</h3>
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 shrink-0">
{itemCount} {itemCount === 1 ? "item" : "items"}
</span>
</div>
<div className="flex flex-wrap gap-1.5">
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
{formatWeight(totalWeight)}
</span>
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
{formatPrice(totalCost)}
</span>
</div>
</Link>
);
}