spb/rareindex

1import type { Metadata } from 'next';2import { Suspense } from 'react';3import { PageHeader } from '@/components/ui/page-header';4import { FilterBar } from '@/components/ui/filter-bar';5import { Pagination } from '@/components/ui/pagination';6import { Skeleton } from '@/components/ui/primitives';7import { SalesTable } from '@/components/market/sales-table';8import { listSales, listSaleSources } from '@/lib/queries/market-lists';9import { CATEGORIES, GRADERS } from '@rareindex/taxonomy';10import { pick, sp1, spEnum, spInt, spNum, type SP } from '@/lib/search-params';1112export const metadata: Metadata = { title: 'Sales', description: 'Latest verified collectible transactions across marketplaces and auction houses, with grade, source attribution and native currency.' };1314const KEYS = ['category', 'source', 'grader', 'min', 'max', 'days', 'type', 'q', 'sort'];1516export default async function SalesPage({ searchParams }: { searchParams: Promise<SP> }) {17  const sp = await searchParams;18  const sources = await listSaleSources();19  const filters = { category: sp1(sp, 'category') ?? null, source: sp1(sp, 'source') ?? null, grader: sp1(sp, 'grader') ?? null, minUsd: spNum(sp, 'min'), maxUsd: spNum(sp, 'max'), days: spNum(sp, 'days'), saleType: sp1(sp, 'type') ?? null, q: sp1(sp, 'q') ?? null, sort: spEnum(sp, 'sort', ['date', 'price'] as const, 'date'), page: spInt(sp, 'page'), pageSize: 50 };20  return (21    <div>22      <PageHeader kicker="Transactions" title="Sales" description="Observed transactions only — never asking prices. Each row links to its source; prices show USD at the historical exchange rate of the sale date, with the native amount beneath." compact />23      <Suspense>24        <FilterBar25          className="mb-3"26          fields={[27            { name: 'q', label: 'Search', type: 'text', placeholder: 'asset or title…', width: 'w-44' },28            { name: 'category', label: 'Category', type: 'select', options: CATEGORIES.map((c) => ({ value: c.slug, label: `${c.level ? '↳ ' : ''}${c.name}` })), width: 'w-48' },29            { name: 'source', label: 'Source', type: 'select', options: sources.map((s) => ({ value: s.id, label: `${s.name} (${s.sales.toLocaleString('en-US')})` })), width: 'w-44' },30            { name: 'grader', label: 'Grader', type: 'select', options: GRADERS.map((g) => ({ value: g.slug, label: g.name })), width: 'w-28' },31            { name: 'type', label: 'Type', type: 'select', options: ['auction', 'fixed_price', 'best_offer', 'private', 'dealer'].map((t) => ({ value: t, label: t.replace('_', ' ') })), width: 'w-28' },32            { name: 'min', label: 'Min $', type: 'number', width: 'w-24' },33            { name: 'max', label: 'Max $', type: 'number', width: 'w-24' },34            { name: 'days', label: 'Last N days', type: 'number', placeholder: 'all', width: 'w-24' },35            { name: 'sort', label: 'Sort', type: 'select', options: [{ value: 'date', label: 'Newest' }, { value: 'price', label: 'Highest price' }], placeholder: 'Newest', width: 'w-32' },36          ]}37        />38      </Suspense>39      <Suspense fallback={<Skeleton className="h-96" />}>40        <Results filters={filters} params={pick(sp, KEYS)} />41      </Suspense>42    </div>43  );44}4546async function Results({ filters, params }: { filters: Parameters<typeof listSales>[0]; params: Record<string, string | undefined> }) {47  const res = await listSales(filters);48  return (49    <>50      <p className="mb-2 num text-[11px] text-subtle">{res.total.toLocaleString('en-US')} sales</p>51      <div className="card overflow-hidden">52        <SalesTable items={res.items} />53      </div>54      <Pagination page={res.page} pageSize={res.pageSize} total={res.total} basePath="/sales" params={params} />55    </>56  );57}58