diff --git a/build-battle/merchant-console/src/app/api/cards/[id]/route.ts b/build-battle/merchant-console/src/app/api/cards/[id]/route.ts
new file mode 100644
index 00000000..d994a05a
--- /dev/null
+++ b/build-battle/merchant-console/src/app/api/cards/[id]/route.ts
@@ -0,0 +1,22 @@
+import { cardById, parseCardStatus, transitionCard } from "@/data/cards"
+import { NextRequest, NextResponse } from "next/server"
+
+type Context = { params: Promise<{ id: string }> }
+
+export async function GET(_request: NextRequest, { params }: Context) {
+  const card = cardById((await params).id)
+  if (!card) return NextResponse.json({ error: "Card not found." }, { status: 404 })
+  return NextResponse.json({ card })
+}
+
+/** Status changes only; limit edits are NWP-202. */
+export async function PATCH(request: NextRequest, { params }: Context) {
+  const parsed = parseCardStatus(await request.json().catch(() => null))
+  if (!parsed.ok) return NextResponse.json({ error: parsed.error }, { status: 400 })
+  const result = transitionCard((await params).id, parsed.value)
+  if (!result.ok) {
+    const status = result.reason === "not_found" ? 404 : 409
+    return NextResponse.json({ error: result.error }, { status })
+  }
+  return NextResponse.json({ card: result.card })
+}
diff --git a/build-battle/merchant-console/src/app/api/cards/route.ts b/build-battle/merchant-console/src/app/api/cards/route.ts
new file mode 100644
index 00000000..8c961b21
--- /dev/null
+++ b/build-battle/merchant-console/src/app/api/cards/route.ts
@@ -0,0 +1,24 @@
+import { issueCardOnce, listCards, parseIdempotencyKey, parseIssueCard } from "@/data/cards"
+import { NextRequest, NextResponse } from "next/server"
+
+/** Stored cards carry the last four only, never a number. */
+export function GET() {
+  return NextResponse.json({ cards: listCards() })
+}
+
+/** The one response with a full number. A replayed key gets 409 without it. */
+export async function POST(request: NextRequest) {
+  const key = parseIdempotencyKey(request.headers.get("idempotency-key"))
+  if (!key.ok) return NextResponse.json({ error: key.error }, { status: 400 })
+  const parsed = parseIssueCard(await request.json().catch(() => null))
+  if (!parsed.ok) return NextResponse.json({ error: parsed.error }, { status: 400 })
+
+  const result = issueCardOnce(parsed.value, key.value)
+  if (result.replayed) {
+    const error = "This card was already issued. Its number is not shown again."
+    return NextResponse.json({ error, card: result.card }, { status: 409 })
+  }
+
+  const { card, number } = result
+  return NextResponse.json({ card, number }, { status: 201, headers: { "cache-control": "no-store" } })
+}
diff --git a/build-battle/merchant-console/src/app/cards/[id]/not-found.tsx b/build-battle/merchant-console/src/app/cards/[id]/not-found.tsx
new file mode 100644
index 00000000..01dbc5e1
--- /dev/null
+++ b/build-battle/merchant-console/src/app/cards/[id]/not-found.tsx
@@ -0,0 +1,13 @@
+import Link from "next/link"
+
+export default function CardNotFound() {
+  return (
+    <div className="p-4 py-16 text-center sm:p-6">
+      <h1 className="font-medium text-gray-900 dark:text-gray-50">This card does not exist</h1>
+      <p className="mt-1 text-sm text-gray-500">
+        Check the link, or <Link href="/cards" className="text-blue-600 hover:underline dark:text-blue-500">find it in the list</Link>.
+        Cards issued before the console last restarted are not kept.
+      </p>
+    </div>
+  )
+}
diff --git a/build-battle/merchant-console/src/app/cards/[id]/page.tsx b/build-battle/merchant-console/src/app/cards/[id]/page.tsx
new file mode 100644
index 00000000..31233a9d
--- /dev/null
+++ b/build-battle/merchant-console/src/app/cards/[id]/page.tsx
@@ -0,0 +1,89 @@
+import { Divider } from "@/components/Divider"
+import { StatusBadge } from "@/components/ui/payments/StatusBadge"
+import { cardById } from "@/data/cards"
+import { merchantById } from "@/data/merchants"
+import { CARD_CATEGORY_LABELS, maskCardNumber, spendProgress } from "@/lib/cards"
+import { formatInZone } from "@/lib/dates"
+import { formatMoney } from "@/lib/money"
+import { cx } from "@/lib/utils"
+import Link from "next/link"
+import { notFound } from "next/navigation"
+
+export const dynamic = "force-dynamic"
+
+const EVENT_LABELS = { issued: "Card issued", frozen: "Frozen", unfrozen: "Unfrozen", cancelled: "Cancelled" }
+const heading = "mt-6 text-sm font-semibold text-gray-900 dark:text-gray-50"
+
+export default async function CardDetail({ params }: { params: Promise<{ id: string }> }) {
+  const card = cardById((await params).id)
+  if (!card) notFound()
+
+  const merchant = merchantById(card.merchantId)!
+  const money = (minor: number) => formatMoney(minor, card.currency)
+  const { percent, nearLimit } = spendProgress(card.spent, card.spendLimit)
+  const fields: [label: string, value: string, mono?: boolean][] = [
+    ["Merchant", `${merchant.name} · ${merchant.country}`],
+    ["Currency", card.currency],
+    ["Category lock", card.categoryLock ? CARD_CATEGORY_LABELS[card.categoryLock] : "None: any category"],
+    ["Spend limit", money(card.spendLimit)],
+    ["Spent", money(card.spent)],
+    ["Remaining", money(Math.max(0, card.spendLimit - card.spent))],
+    ["Reference", card.reference, true],
+    [`Created (${merchant.timezone})`, formatInZone(card.createdAt, merchant.timezone)],
+  ]
+
+  return (
+    <div className="p-4 sm:p-6">
+      <Link href="/cards" className="text-sm text-gray-500 hover:text-gray-900 dark:hover:text-gray-50">
+        ← All cards
+      </Link>
+      <div className="mt-4 flex flex-wrap items-center gap-3">
+        <h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-50">{card.nickname}</h1>
+        <StatusBadge status={card.status} />
+      </div>
+      <p className="mt-1 font-mono text-sm text-gray-500">
+        {maskCardNumber(card.last4)} · {card.id}
+      </p>
+      <Divider />
+
+      <dl className="grid grid-cols-1 gap-x-8 gap-y-4 text-sm sm:grid-cols-2 lg:grid-cols-3">
+        {fields.map(([label, value, mono]) => (
+          <div key={label}>
+            <dt className="text-gray-500">{label}</dt>
+            <dd className={cx("mt-1 tabular-nums text-gray-900 dark:text-gray-50", mono && "font-mono")}>
+              {value}
+            </dd>
+          </div>
+        ))}
+      </dl>
+
+      <h2 className={heading}>Spend</h2>
+      <p className="mt-2 text-sm tabular-nums text-gray-900 dark:text-gray-50">
+        {money(card.spent)} of {money(card.spendLimit)} spent
+        <span className="ml-2 text-gray-500">{percent}% used</span>
+      </p>
+      <progress
+        value={percent}
+        max={100}
+        aria-label={`Spend against limit: ${percent}% used`}
+        className={cx("mt-2 h-2 w-full max-w-md", nearLimit ? "accent-amber-500" : "accent-blue-500")}
+      />
+      {card.spent === 0 && (
+        <p className="mt-2 text-sm text-gray-500">
+          No spend recorded. The console is not connected to a card network yet, so spend stays at
+          zero until authorizations exist.
+        </p>
+      )}
+
+      <h2 className={heading}>History</h2>
+      <ol className="mt-2 space-y-3 text-sm">
+        {card.events.map((event, index) => (
+          <li key={index}>
+            <p className="text-gray-900 dark:text-gray-50">{EVENT_LABELS[event.type]}</p>
+            <p className="text-gray-500">{formatInZone(event.at, merchant.timezone)}</p>
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}
diff --git a/build-battle/merchant-console/src/app/cards/card-actions.tsx b/build-battle/merchant-console/src/app/cards/card-actions.tsx
new file mode 100644
index 00000000..282b1300
--- /dev/null
+++ b/build-battle/merchant-console/src/app/cards/card-actions.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { Button } from "@/components/Button"
+import type { CardStatus } from "@/data/types"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+
+/** Freeze, unfreeze and a two-step cancel. */
+export function CardActions(props: { id: string; nickname: string; status: CardStatus }) {
+  const router = useRouter()
+  const [pending, setPending] = useState(false)
+  const [confirming, setConfirming] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  if (props.status === "cancelled") {
+    return <span className="text-gray-400 dark:text-gray-600">—</span>
+  }
+
+  const update = async (status: CardStatus) => {
+    setPending(true)
+    setError(null)
+    try {
+      const response = await fetch(`/api/cards/${props.id}`, {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ status }),
+      })
+      if (!response.ok) {
+        const body = await response.json().catch(() => null)
+        return setError(body?.error ?? "The card could not be updated. Try again.")
+      }
+      setConfirming(false)
+      router.refresh()
+    } catch {
+      setError("The card could not be updated. Check your connection and try again.")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  const action = (
+    label: string,
+    name: string,
+    onClick: () => void,
+    variant: "secondary" | "ghost" | "destructive" = "secondary",
+  ) => (
+    <Button
+      variant={variant}
+      className={variant === "ghost" ? "py-1 text-red-600 dark:text-red-500" : "py-1"}
+      disabled={pending}
+      aria-label={`${name} ${props.nickname}`}
+      onClick={onClick}
+    >
+      {label}
+    </Button>
+  )
+
+  return (
+    <div className="flex flex-col items-end gap-1">
+      <div className="flex justify-end gap-2">
+        {confirming ? (
+          <>
+            {action("Keep card", "Keep", () => setConfirming(false))}
+            {action("Confirm cancel", "Confirm cancel", () => update("cancelled"), "destructive")}
+          </>
+        ) : (
+          <>
+            {props.status === "active"
+              ? action("Freeze", "Freeze", () => update("frozen"))
+              : action("Unfreeze", "Unfreeze", () => update("active"))}
+            {action("Cancel card", "Cancel card", () => setConfirming(true), "ghost")}
+          </>
+        )}
+      </div>
+      {error && <p role="alert" className="text-xs text-red-600 dark:text-red-500">{error}</p>}
+    </div>
+  )
+}
diff --git a/build-battle/merchant-console/src/app/cards/issue-card-drawer.tsx b/build-battle/merchant-console/src/app/cards/issue-card-drawer.tsx
new file mode 100644
index 00000000..604e5e4f
--- /dev/null
+++ b/build-battle/merchant-console/src/app/cards/issue-card-drawer.tsx
@@ -0,0 +1,226 @@
+"use client"
+
+import { Button } from "@/components/Button"
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/Drawer"
+import { Input } from "@/components/Input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/Select"
+import type { Currency } from "@/data/types"
+import { CARD_CATEGORIES, CARD_CATEGORY_LABELS } from "@/lib/cards"
+import { parseAmountToMinorUnits } from "@/lib/money"
+import { Plus } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+
+/** Radix Select has no empty value, so "no lock" is a sentinel. */
+const NO_LOCK = "none"
+const EMPTY = { nickname: "", merchantId: "", limit: "", category: NO_LOCK }
+
+function Field(props: { id: string; label: string; note?: string | null; error?: boolean; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1.5 text-sm">
+      <label htmlFor={props.id} className="font-medium text-gray-900 dark:text-gray-50">
+        {props.label}
+      </label>
+      {props.children}
+      {props.note && (
+        <p id={`${props.id}-note`} className={props.error ? "text-red-600 dark:text-red-500" : "text-gray-500"}>
+          {props.note}
+        </p>
+      )}
+    </div>
+  )
+}
+
+function Choice(props: {
+  id: string
+  value: string
+  onChange: (value: string) => void
+  options: [value: string, label: string][]
+  placeholder?: string
+  noted?: boolean
+}) {
+  return (
+    <Select value={props.value} onValueChange={props.onChange}>
+      <SelectTrigger id={props.id} aria-describedby={props.noted ? `${props.id}-note` : undefined}>
+        <SelectValue placeholder={props.placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {props.options.map(([value, label]) => (
+          <SelectItem key={value} value={value}>{label}</SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export function IssueCardDrawer(props: {
+  merchants: { id: string; name: string; currency: Currency }[]
+  maxNicknameLength: number
+}) {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [form, setForm] = useState(EMPTY)
+  const [limitError, setLimitError] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  // The number lives here only until the drawer closes.
+  const [issued, setIssued] = useState<{ nickname: string; number: string } | null>(null)
+  // One key per form: a retry or double click issues at most one card.
+  const [idempotencyKey, setIdempotencyKey] = useState(() => crypto.randomUUID())
+
+  const set = (changes: Partial<typeof EMPTY>) => setForm((f) => ({ ...f, ...changes }))
+  const currency = props.merchants.find((m) => m.id === form.merchantId)?.currency
+
+  const onOpenChange = (next: boolean) => {
+    // Closing mid-request would drop the one response that carries the number.
+    if (!next && submitting) return
+    setOpen(next)
+    if (next) return
+    if (issued) router.refresh()
+    setForm(EMPTY)
+    setLimitError(null)
+    setError(null)
+    setIssued(null)
+    setIdempotencyKey(crypto.randomUUID())
+  }
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    if (submitting) return
+    setError(null)
+    setLimitError(null)
+    if (!form.nickname.trim()) return setError("Nickname is required.")
+    if (!currency) return setError("Choose a merchant.")
+    // Converted once, at the boundary; the server re-validates.
+    const spendLimit = parseAmountToMinorUnits(form.limit)
+    if (!spendLimit) return setLimitError("Enter an amount like 250.00, greater than zero.")
+
+    setSubmitting(true)
+    try {
+      const { nickname, merchantId, category } = form
+      const response = await fetch("/api/cards", {
+        method: "POST",
+        headers: { "content-type": "application/json", "idempotency-key": idempotencyKey },
+        body: JSON.stringify({
+          nickname,
+          merchantId,
+          spendLimit,
+          currency,
+          categoryLock: category === NO_LOCK ? null : category,
+        }),
+      })
+      const body = await response.json().catch(() => null)
+      if (response.ok && body?.number) setIssued({ nickname: body.card.nickname, number: body.number })
+      else setError(body?.error ?? "The card could not be issued. Try again.")
+    } catch {
+      setError("The card could not be issued. Check your connection and try again.")
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerTrigger asChild>
+        <Button className="w-full gap-2 py-1.5 sm:w-fit">
+          <Plus className="-ml-0.5 size-4 shrink-0" aria-hidden="true" />
+          Issue card
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>{issued ? "Card issued" : "Issue card"}</DrawerTitle>
+          <DrawerDescription>{issued ? "Copy the number now." : "One merchant, one limit."}</DrawerDescription>
+        </DrawerHeader>
+
+        {issued ? (
+          <>
+            <DrawerBody className="flex flex-col gap-4 text-gray-900 dark:text-gray-50">
+              <p className="font-medium">{issued.nickname}</p>
+              <div>
+                <p className="text-sm text-gray-500">Card number</p>
+                <p className="font-mono text-lg tracking-wider">
+                  {issued.number.replace(/(\d{4})(?=\d)/g, "$1 ")}
+                </p>
+              </div>
+              <p className="rounded-md bg-amber-50 p-3 text-sm text-amber-900 dark:bg-amber-400/10 dark:text-amber-400">
+                The full number is shown only this once.
+              </p>
+            </DrawerBody>
+            <DrawerFooter>
+              <Button onClick={() => onOpenChange(false)}>Done</Button>
+            </DrawerFooter>
+          </>
+        ) : (
+          <form onSubmit={submit} noValidate className="flex flex-1 flex-col">
+            <DrawerBody className="flex flex-col gap-4">
+              <Field id="card-nickname" label="Nickname">
+                <Input
+                  id="card-nickname"
+                  maxLength={props.maxNicknameLength}
+                  value={form.nickname}
+                  onChange={(e) => set({ nickname: e.target.value })}
+                />
+              </Field>
+              <Field
+                id="card-merchant"
+                label="Merchant"
+                note={currency && `Issued in ${currency}, the merchant's settlement currency.`}
+              >
+                <Choice
+                  id="card-merchant"
+                  value={form.merchantId}
+                  placeholder="Choose a merchant"
+                  options={props.merchants.map((m) => [m.id, m.name])}
+                  onChange={(merchantId) => set({ merchantId })}
+                  noted={!!currency}
+                />
+              </Field>
+              <Field id="card-limit" label={`Spend limit ${currency ?? ""}`} note={limitError} error>
+                <Input
+                  id="card-limit"
+                  inputMode="decimal"
+                  autoComplete="off"
+                  placeholder="250.00"
+                  value={form.limit}
+                  onChange={(e) => set({ limit: e.target.value })}
+                  hasError={!!limitError}
+                  aria-invalid={!!limitError}
+                  aria-describedby={limitError ? "card-limit-note" : undefined}
+                />
+              </Field>
+              <Field
+                id="card-category"
+                label="Merchant category lock"
+                note="Only this category can spend. Fixed at issue."
+              >
+                <Choice
+                  id="card-category"
+                  value={form.category}
+                  options={[[NO_LOCK, "No lock"], ...CARD_CATEGORIES.map((c) => [c, CARD_CATEGORY_LABELS[c]] as [string, string])]}
+                  onChange={(category) => set({ category })}
+                  noted
+                />
+              </Field>
+              {error && <p role="alert" className="text-sm text-red-600 dark:text-red-500">{error}</p>}
+            </DrawerBody>
+            <DrawerFooter>
+              <Button type="submit" isLoading={submitting} loadingText="Issuing..." disabled={submitting}>
+                Issue card
+              </Button>
+            </DrawerFooter>
+          </form>
+        )}
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/build-battle/merchant-console/src/app/cards/page.tsx b/build-battle/merchant-console/src/app/cards/page.tsx
new file mode 100644
index 00000000..dde5156b
--- /dev/null
+++ b/build-battle/merchant-console/src/app/cards/page.tsx
@@ -0,0 +1,92 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRoot,
+  TableRow,
+} from "@/components/Table"
+import { StatusBadge } from "@/components/ui/payments/StatusBadge"
+import { listCards, MAX_NICKNAME_LENGTH } from "@/data/cards"
+import { merchantById, merchants } from "@/data/merchants"
+import { CARD_CATEGORY_LABELS, maskCardNumber } from "@/lib/cards"
+import { formatDate } from "@/lib/dates"
+import { formatMoney } from "@/lib/money"
+import Link from "next/link"
+import { CardActions } from "./card-actions"
+import { IssueCardDrawer } from "./issue-card-drawer"
+
+export const dynamic = "force-dynamic"
+
+const COLUMNS = ["Card", "Merchant", "Number", "Category", "Spend limit", "Status", "Created", ""]
+
+export default function CardsPage() {
+  const cards = listCards()
+
+  return (
+    <section aria-label="Virtual cards">
+      <div className="flex flex-col justify-between gap-2 px-4 py-6 sm:flex-row sm:items-center sm:p-6">
+        <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-50">Virtual cards</h1>
+        <IssueCardDrawer merchants={merchants} maxNicknameLength={MAX_NICKNAME_LENGTH} />
+      </div>
+
+      <TableRoot className="border-t border-gray-200 dark:border-gray-800">
+        <Table>
+          <TableHead>
+            <TableRow>
+              {COLUMNS.map((column) => (
+                <TableHeaderCell key={column} className={column === "Spend limit" ? "text-right" : ""}>
+                  {column || <span className="sr-only">Actions</span>}
+                </TableHeaderCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {cards.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={COLUMNS.length} className="py-16 text-center">
+                  <p className="font-medium text-gray-900 dark:text-gray-50">No cards issued yet</p>
+                  <p className="mt-1 text-gray-500">
+                    Use Issue card to create a virtual card for a merchant.
+                  </p>
+                </TableCell>
+              </TableRow>
+            )}
+            {cards.map((card) => (
+              <TableRow key={card.id}>
+                <TableCell>
+                  <Link
+                    href={`/cards/${card.id}`}
+                    className="font-medium text-blue-600 hover:underline dark:text-blue-500"
+                  >
+                    {card.nickname}
+                  </Link>
+                </TableCell>
+                <TableCell>{merchantById(card.merchantId)?.name}</TableCell>
+                <TableCell className="font-mono">{maskCardNumber(card.last4)}</TableCell>
+                <TableCell className="text-gray-500">
+                  {card.categoryLock ? CARD_CATEGORY_LABELS[card.categoryLock] : "Any"}
+                </TableCell>
+                <TableCell className="text-right font-medium tabular-nums text-gray-900 dark:text-gray-50">
+                  {formatMoney(card.spendLimit, card.currency)}
+                </TableCell>
+                <TableCell>
+                  <StatusBadge status={card.status} />
+                </TableCell>
+                <TableCell>{formatDate(card.createdAt)}</TableCell>
+                <TableCell>
+                  <CardActions id={card.id} nickname={card.nickname} status={card.status} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableRoot>
+
+      <p className="px-4 py-4 text-sm text-gray-500 sm:px-6">
+        {cards.length} {cards.length === 1 ? "card" : "cards"}
+      </p>
+    </section>
+  )
+}
diff --git a/build-battle/merchant-console/src/app/siteConfig.ts b/build-battle/merchant-console/src/app/siteConfig.ts
index c59e5da2..08c5d3d7 100644
--- a/build-battle/merchant-console/src/app/siteConfig.ts
+++ b/build-battle/merchant-console/src/app/siteConfig.ts
@@ -7,6 +7,7 @@ export const siteConfig = {
     payments: "/payments",
     disputes: "/disputes",
     payouts: "/payouts",
+    cards: "/cards",
   },
 }
 
diff --git a/build-battle/merchant-console/src/components/Drawer.tsx b/build-battle/merchant-console/src/components/Drawer.tsx
index fc9a5539..85114676 100644
--- a/build-battle/merchant-console/src/components/Drawer.tsx
+++ b/build-battle/merchant-console/src/components/Drawer.tsx
@@ -112,6 +112,7 @@ const DrawerHeader = React.forwardRef<
       <DrawerPrimitives.Close asChild>
         <Button
           variant="ghost"
+          aria-label="Close"
           className="aspect-square p-1 hover:bg-gray-100 hover:dark:bg-gray-400/10"
         >
           <RiCloseLine className="size-6" aria-hidden="true" />
diff --git a/build-battle/merchant-console/src/components/ui/navigation/AppSidebar.tsx b/build-battle/merchant-console/src/components/ui/navigation/AppSidebar.tsx
index f5e1345b..7bb21b65 100644
--- a/build-battle/merchant-console/src/components/ui/navigation/AppSidebar.tsx
+++ b/build-battle/merchant-console/src/components/ui/navigation/AppSidebar.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/components/Sidebar"
 import { cx, focusRing } from "@/lib/utils"
 import { RiArrowDownSFill } from "@remixicon/react"
-import { Banknote, CreditCard, House, ShieldAlert } from "lucide-react"
+import { Banknote, CreditCard, House, ShieldAlert, WalletCards } from "lucide-react"
 import * as React from "react"
 import { Logo } from "../../../../public/Logo"
 import { UserProfile } from "./UserProfile"
@@ -48,6 +48,12 @@ const navigation = [
     icon: Banknote,
     notifications: false as const,
   },
+  {
+    name: "Cards",
+    href: siteConfig.baseLinks.cards,
+    icon: WalletCards,
+    notifications: false as const,
+  },
 ] as const
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
diff --git a/build-battle/merchant-console/src/components/ui/payments/StatusBadge.tsx b/build-battle/merchant-console/src/components/ui/payments/StatusBadge.tsx
index 20e5ff26..90fb1988 100644
--- a/build-battle/merchant-console/src/components/ui/payments/StatusBadge.tsx
+++ b/build-battle/merchant-console/src/components/ui/payments/StatusBadge.tsx
@@ -1,8 +1,8 @@
 import { Badge } from "@/components/Badge"
-import { DisputeStatus, PaymentStatus, PayoutStatus } from "@/data/types"
+import { CardStatus, DisputeStatus, PaymentStatus, PayoutStatus } from "@/data/types"
 import { cx } from "@/lib/utils"
 
-type AnyStatus = PaymentStatus | DisputeStatus | PayoutStatus
+type AnyStatus = PaymentStatus | DisputeStatus | PayoutStatus | CardStatus
 
 const LABELS: Record<AnyStatus, string> = {
   authorized: "Authorized",
@@ -17,6 +17,9 @@ const LABELS: Record<AnyStatus, string> = {
   paid: "Paid",
   in_transit: "In transit",
   pending: "Pending",
+  active: "Active",
+  frozen: "Frozen",
+  cancelled: "Cancelled",
 }
 
 const DOTS: Record<AnyStatus, string> = {
@@ -32,6 +35,9 @@ const DOTS: Record<AnyStatus, string> = {
   paid: "bg-emerald-600 dark:bg-emerald-400",
   in_transit: "bg-blue-500 dark:bg-blue-500",
   pending: "bg-gray-500 dark:bg-gray-500",
+  active: "bg-emerald-600 dark:bg-emerald-400",
+  frozen: "bg-blue-500 dark:bg-blue-500",
+  cancelled: "bg-gray-500 dark:bg-gray-500",
 }
 
 const VARIANTS: Record<AnyStatus, "default" | "neutral" | "success" | "error" | "warning"> = {
@@ -47,6 +53,9 @@ const VARIANTS: Record<AnyStatus, "default" | "neutral" | "success" | "error" |
   paid: "success",
   in_transit: "default",
   pending: "neutral",
+  active: "success",
+  frozen: "default",
+  cancelled: "neutral",
 }
 
 export function StatusBadge({ status }: { status: AnyStatus }) {
diff --git a/build-battle/merchant-console/src/data/cards.test.ts b/build-battle/merchant-console/src/data/cards.test.ts
new file mode 100644
index 00000000..05ef4164
--- /dev/null
+++ b/build-battle/merchant-console/src/data/cards.test.ts
@@ -0,0 +1,100 @@
+import { isValidLuhn } from "@/lib/cards"
+import { describe, expect, it } from "vitest"
+import {
+  cardById,
+  issueCard,
+  issueCardOnce,
+  listCards,
+  parseCardStatus,
+  parseIdempotencyKey,
+  parseIssueCard,
+  transitionCard,
+} from "./cards"
+
+// mch_01 settles in USD, mch_04 in GBP, mch_05 in EUR.
+const valid = { nickname: "Ad spend", merchantId: "mch_01", spendLimit: 25000, currency: "USD" }
+const input = { ...valid, currency: "USD" as const, categoryLock: null }
+const errorFor = (changes: Record<string, unknown>) => {
+  const parsed = parseIssueCard({ ...valid, ...changes })
+  return parsed.ok ? null : parsed.error
+}
+
+describe("parseIssueCard", () => {
+  it("accepts a valid request, trimming the nickname", () => {
+    expect(parseIssueCard({ ...valid, nickname: " Ad spend " })).toEqual({
+      ok: true,
+      value: { ...valid, categoryLock: null },
+    })
+    expect(errorFor({ spendLimit: 5_000_000 })).toBeNull()
+    expect(errorFor({ merchantId: "mch_05", currency: "EUR" })).toBeNull()
+    expect(errorFor({ categoryLock: "advertising" })).toBeNull()
+  })
+
+  it.each([
+    ["missing merchant", { merchantId: undefined }, /Merchant is required/],
+    ["unknown merchant", { merchantId: "mch_99" }, /Merchant not found/],
+    ["zero limit", { spendLimit: 0 }, /greater than zero/],
+    ["negative limit", { spendLimit: -1 }, /greater than zero/],
+    ["limit over 5,000,000", { spendLimit: 5_000_001 }, /cannot exceed/],
+    ["fractional limit", { spendLimit: 250.5 }, /whole number/],
+    ["string limit", { spendLimit: "$250.00" }, /whole number/],
+    ["currency outside allowlist", { currency: "JPY" }, /one of USD, EUR, or GBP/],
+    ["currency not the merchant's", { currency: "EUR" }, /settles in USD/],
+    ["GBP merchant in USD", { merchantId: "mch_04" }, /settles in GBP/],
+    ["unknown category", { categoryLock: "gambling" }, /Category/],
+    ["blank nickname", { nickname: "  " }, /Nickname is required/],
+    ["long nickname", { nickname: "x".repeat(51) }, /50 characters/],
+  ])("rejects %s", (_, changes, message) => {
+    expect(errorFor(changes)).toMatch(message)
+  })
+
+  it("rejects a body that is not an object", () => {
+    expect(parseIssueCard(null)).toEqual({ ok: false, error: "Request body must be a JSON object." })
+  })
+})
+
+it("allowlists statuses and idempotency keys", () => {
+  expect(parseCardStatus({ status: "frozen" })).toEqual({ ok: true, value: "frozen" })
+  expect(parseCardStatus({ status: "deleted" }).ok).toBe(false)
+  expect(parseIdempotencyKey(null).ok && parseIdempotencyKey(crypto.randomUUID()).ok).toBe(true)
+  expect(parseIdempotencyKey("short").ok || parseIdempotencyKey("has spaces here").ok).toBe(false)
+})
+
+describe("issueCard", () => {
+  it("returns the full number once and stores only the last four", () => {
+    const { card, number } = issueCard(input)
+    expect(number).toMatch(/^4242\d{12}$/)
+    expect(isValidLuhn(number)).toBe(true)
+    expect(card).toMatchObject({ last4: number.slice(-4), status: "active", spent: 0 })
+    const stored = JSON.stringify(cardById(card.id))
+    expect(stored).not.toContain(number)
+    expect(stored).not.toMatch(/\d{16}/)
+    expect(listCards()).toContain(card)
+  })
+
+  it("issues once per idempotency key and never reveals the number twice", () => {
+    const first = issueCardOnce(input, "key-double-click")
+    const again = issueCardOnce(input, "key-double-click")
+    expect(again).toEqual({ replayed: true, card: first.card })
+    expect(listCards().filter((c) => c.id === first.card.id)).toHaveLength(1)
+    expect(issueCardOnce(input, null).card.id).not.toBe(issueCardOnce(input, null).card.id)
+  })
+})
+
+describe("transitionCard", () => {
+  it("walks active → frozen → active → cancelled, recording each step", () => {
+    const { card } = issueCard(input)
+    for (const to of ["frozen", "active", "cancelled"] as const) {
+      expect(transitionCard(card.id, to).ok).toBe(true)
+    }
+    expect(card.events.map((e) => e.type)).toEqual(["issued", "frozen", "unfrozen", "cancelled"])
+  })
+
+  it("keeps cancelled terminal and reports unknown cards", () => {
+    const { card } = issueCard(input)
+    transitionCard(card.id, "cancelled")
+    expect(transitionCard(card.id, "active")).toMatchObject({ ok: false, reason: "illegal" })
+    expect(card.status).toBe("cancelled")
+    expect(transitionCard("card_nope", "frozen")).toMatchObject({ reason: "not_found" })
+  })
+})
diff --git a/build-battle/merchant-console/src/data/cards.ts b/build-battle/merchant-console/src/data/cards.ts
new file mode 100644
index 00000000..03e3f255
--- /dev/null
+++ b/build-battle/merchant-console/src/data/cards.ts
@@ -0,0 +1,125 @@
+import { CARD_CATEGORIES, canTransition, eventForTransition, generateCardNumber } from "@/lib/cards"
+import { merchantById } from "./merchants"
+import { store } from "./store"
+import { CardCategory, CardStatus, Currency, VirtualCard } from "./types"
+
+const CURRENCIES: readonly Currency[] = ["USD", "EUR", "GBP"]
+const STATUSES: readonly CardStatus[] = ["active", "frozen", "cancelled"]
+/** 5,000,000 minor units: $50,000.00. */
+export const MAX_SPEND_LIMIT = 5_000_000
+export const MAX_NICKNAME_LENGTH = 50
+const IDEMPOTENCY_KEY = /^[A-Za-z0-9_-]{8,100}$/
+
+export type IssueCardInput = Pick<
+  VirtualCard,
+  "nickname" | "merchantId" | "spendLimit" | "currency" | "categoryLock"
+>
+type Parsed<T> = { ok: true; value: T } | { ok: false; error: string }
+const fail = (error: string) => ({ ok: false as const, error })
+
+/** Allowlists client input before the store, like `parseFilters`. */
+export function parseIssueCard(body: unknown): Parsed<IssueCardInput> {
+  if (typeof body !== "object" || body === null) return fail("Request body must be a JSON object.")
+  const { nickname, merchantId, spendLimit, currency, categoryLock } =
+    body as Record<string, unknown>
+
+  const name = typeof nickname === "string" ? nickname.trim() : ""
+  if (!name) return fail("Nickname is required.")
+  if (name.length > MAX_NICKNAME_LENGTH) {
+    return fail(`Nickname must be ${MAX_NICKNAME_LENGTH} characters or fewer.`)
+  }
+  if (typeof merchantId !== "string" || !merchantId) return fail("Merchant is required.")
+  const merchant = merchantById(merchantId)
+  if (!merchant) return fail("Merchant not found.")
+
+  if (typeof spendLimit !== "number" || !Number.isInteger(spendLimit)) {
+    return fail("Spend limit must be a whole number of minor units.")
+  }
+  if (spendLimit <= 0) return fail("Spend limit must be greater than zero.")
+  if (spendLimit > MAX_SPEND_LIMIT) return fail("Spend limit cannot exceed 5,000,000 minor units.")
+  if (!CURRENCIES.includes(currency as Currency)) {
+    return fail("Currency must be one of USD, EUR, or GBP.")
+  }
+  if (currency !== merchant.currency) {
+    const code = merchant.currency
+    return fail(`${merchant.name} settles in ${code}. Issue this card in ${code}.`)
+  }
+  const category = (categoryLock ?? null) as CardCategory | null
+  if (category !== null && !CARD_CATEGORIES.includes(category)) {
+    return fail(`Category must be one of ${CARD_CATEGORIES.join(", ")}, or omitted.`)
+  }
+
+  return {
+    ok: true,
+    value: {
+      nickname: name,
+      merchantId,
+      spendLimit,
+      currency: merchant.currency,
+      categoryLock: category,
+    },
+  }
+}
+
+export function parseCardStatus(body: unknown): Parsed<CardStatus> {
+  const status = (body as { status?: unknown } | null)?.status as CardStatus
+  if (!STATUSES.includes(status)) return fail("Status must be one of active, frozen, or cancelled.")
+  return { ok: true, value: status }
+}
+
+export function parseIdempotencyKey(key: string | null): Parsed<string | null> {
+  if (key !== null && !IDEMPOTENCY_KEY.test(key)) {
+    return fail("Idempotency-Key must be 8 to 100 letters, digits, - or _.")
+  }
+  return { ok: true, value: key }
+}
+
+export const listCards = () =>
+  [...store.cards].sort((a, b) => b.createdAt.localeCompare(a.createdAt))
+
+export const cardById = (id: string) =>
+  store.cards.find((card) => card.id === id) ?? null
+
+/** Returns the number once; the stored card keeps only last4 and a reference. */
+export function issueCard(input: IssueCardInput) {
+  const number = generateCardNumber()
+  const createdAt = new Date().toISOString()
+  const card: VirtualCard = {
+    ...input,
+    id: `card_${crypto.randomUUID().slice(0, 8)}`,
+    last4: number.slice(-4),
+    reference: `cref_${crypto.randomUUID()}`,
+    spent: 0,
+    status: "active",
+    createdAt,
+    events: [{ type: "issued", at: createdAt }],
+  }
+  store.cards.push(card)
+  return { card, number }
+}
+
+/** One card per idempotency key; a replay never gets the number again. */
+export function issueCardOnce(input: IssueCardInput, key: string | null) {
+  const existing = key ? cardById(store.cardIssueKeys.get(key) ?? "") : null
+  if (existing) return { replayed: true as const, card: existing }
+
+  const { card, number } = issueCard(input)
+  if (key) store.cardIssueKeys.set(key, card.id)
+  return { replayed: false as const, card, number }
+}
+
+/** The only way a card's status changes. Guards the state machine. */
+export function transitionCard(id: string, to: CardStatus) {
+  const card = cardById(id)
+  if (!card) return { ...fail("Card not found."), reason: "not_found" as const }
+  if (!canTransition(card.status, to)) {
+    const error =
+      card.status === "cancelled"
+        ? "This card is cancelled. Cancelled cards cannot be changed."
+        : `A ${card.status} card cannot be moved to ${to}.`
+    return { ...fail(error), reason: "illegal" as const }
+  }
+  card.events.push({ type: eventForTransition(card.status, to), at: new Date().toISOString() })
+  card.status = to
+  return { ok: true as const, card }
+}
diff --git a/build-battle/merchant-console/src/data/generate.ts b/build-battle/merchant-console/src/data/generate.ts
index 2887ba8c..b9ba6262 100644
--- a/build-battle/merchant-console/src/data/generate.ts
+++ b/build-battle/merchant-console/src/data/generate.ts
@@ -6,6 +6,7 @@ import {
   PaymentStatus,
   Payout,
   Refund,
+  VirtualCard,
 } from "./types"
 
 /**
@@ -191,3 +192,33 @@ function generatePayouts(payments: Payment[]): Payout[] {
 
   return payouts
 }
+
+/** Never `rand()`, so no seeded payment moves. */
+const CARD_SEEDS = [
+  ["Ad spend — Q3", "mch_01", "4817", 500_000, "advertising", "active", 41],
+  ["Design tools", "mch_04", "0932", 25_000, "software", "active", 30],
+  ["Contractor laptops", "mch_05", "6604", 1_200_000, "contractor_tools", "frozen", 22],
+  ["Trade show booth", "mch_09", "7148", 300_000, null, "cancelled", 9],
+] as const
+
+export function generateCards(): VirtualCard[] {
+  return CARD_SEEDS.map(([nickname, merchantId, last4, spendLimit, categoryLock, status, daysAgo], i) => {
+    const at = (days: number) => new Date(GENERATED_AT.getTime() - days * 86_400_000).toISOString()
+    const events: VirtualCard["events"] = [{ type: "issued", at: at(daysAgo) }]
+    if (status !== "active") events.push({ type: status, at: at(daysAgo - 3) })
+    return {
+      id: `card_${pad(i + 1)}`,
+      nickname,
+      merchantId,
+      last4,
+      reference: `cref_seed_${pad(i + 1)}`,
+      spendLimit,
+      spent: 0,
+      currency: merchants.find((m) => m.id === merchantId)!.currency,
+      categoryLock,
+      status,
+      createdAt: at(daysAgo),
+      events,
+    }
+  })
+}
diff --git a/build-battle/merchant-console/src/data/metrics.test.ts b/build-battle/merchant-console/src/data/metrics.test.ts
new file mode 100644
index 00000000..dc1393f9
--- /dev/null
+++ b/build-battle/merchant-console/src/data/metrics.test.ts
@@ -0,0 +1,24 @@
+import { utcDayKey } from "@/lib/dates"
+import { afterEach, describe, expect, it } from "vitest"
+import { dailyVolume } from "./metrics"
+import { store } from "./store"
+
+const originalTz = process.env.TZ
+afterEach(() => void (process.env.TZ = originalTz))
+
+const sumOn = (rows: { createdAt: string; amount: number }[], day: string) =>
+  rows.filter((r) => utcDayKey(r.createdAt) === day).reduce((sum, r) => sum + r.amount, 0)
+
+describe("dailyVolume", () => {
+  it("buckets by UTC day in minor units, with refunds from the refund records", () => {
+    // West of UTC, a local-date bucket moves evening-UTC payments a day back.
+    process.env.TZ = "America/New_York"
+    const captured = store.payments.filter((p) => p.status === "captured")
+    const days = dailyVolume(30)
+    expect(days).toHaveLength(30)
+    for (const day of days) {
+      expect(day.captured).toBe(sumOn(captured, day.date))
+      expect(day.refunded).toBe(sumOn(store.refunds, day.date))
+    }
+  })
+})
diff --git a/build-battle/merchant-console/src/data/metrics.ts b/build-battle/merchant-console/src/data/metrics.ts
index c64027c2..c53e212d 100644
--- a/build-battle/merchant-console/src/data/metrics.ts
+++ b/build-battle/merchant-console/src/data/metrics.ts
@@ -1,5 +1,6 @@
-import { lastUtcDays } from "@/lib/dates"
+import { lastUtcDays, utcDayKey } from "@/lib/dates"
 import { GENERATED_AT } from "./generate"
+import { filterPayments } from "./queries"
 import { store } from "./store"
 
 /**
@@ -20,29 +21,18 @@ export function dailyVolume(days = 30): DailyVolume[] {
     keys.map((date) => [date, { date, captured: 0, refunded: 0 }]),
   )
 
-  for (const payment of store.payments) {
-    // Bucket by calendar date.
-    const key = new Date(payment.createdAt).toLocaleDateString("en-CA")
-    const bucket = buckets.get(key)
-    if (!bucket) continue
-
-    if (payment.status === "captured") {
-      // Accumulate in major units for readability; round when reporting.
-      bucket.captured += payment.amount / 100
-    }
-    if (payment.status === "refunded") {
-      bucket.refunded += payment.amount / 100
-    }
+  // UTC days, minor units, via the one query builder.
+  for (const payment of filterPayments({ status: "captured" })) {
+    const bucket = buckets.get(utcDayKey(payment.createdAt))
+    if (bucket) bucket.captured += payment.amount
+  }
+  // Refunds on their own date and for their own amount.
+  for (const refund of store.refunds) {
+    const bucket = buckets.get(utcDayKey(refund.createdAt))
+    if (bucket) bucket.refunded += refund.amount
   }
 
-  return keys.map((date) => {
-    const bucket = buckets.get(date)!
-    return {
-      date,
-      captured: Math.round(bucket.captured * 100),
-      refunded: Math.round(bucket.refunded * 100),
-    }
-  })
+  return [...buckets.values()]
 }
 
 export function headlineMetrics() {
diff --git a/build-battle/merchant-console/src/data/queries.test.ts b/build-battle/merchant-console/src/data/queries.test.ts
new file mode 100644
index 00000000..178785de
--- /dev/null
+++ b/build-battle/merchant-console/src/data/queries.test.ts
@@ -0,0 +1,11 @@
+import { expect, it } from "vitest"
+import { sortPayments } from "./queries"
+import type { Payment } from "./types"
+
+it("sorts amounts numerically, not as strings", () => {
+  const rows = [900, 10000, 25].map((amount) => ({ amount }) as Payment)
+  const by = (dir: "asc" | "desc") =>
+    sortPayments(rows, "amount", dir).map((p) => p.amount)
+  expect(by("asc")).toEqual([25, 900, 10000])
+  expect(by("desc")).toEqual([10000, 900, 25])
+})
diff --git a/build-battle/merchant-console/src/data/queries.ts b/build-battle/merchant-console/src/data/queries.ts
index cc4ca009..498623f5 100644
--- a/build-battle/merchant-console/src/data/queries.ts
+++ b/build-battle/merchant-console/src/data/queries.ts
@@ -76,10 +76,7 @@ export function sortPayments(
 ): Payment[] {
   const factor = direction === "asc" ? 1 : -1
   return [...payments].sort((a, b) => {
-    if (sort === "amount") {
-      // Sort by the formatted amount so the order matches what the table shows.
-      return String(a.amount).localeCompare(String(b.amount)) * factor
-    }
+    if (sort === "amount") return (a.amount - b.amount) * factor
     return a.createdAt.localeCompare(b.createdAt) * factor
   })
 }
diff --git a/build-battle/merchant-console/src/data/store.ts b/build-battle/merchant-console/src/data/store.ts
index ba71d950..0dc516ec 100644
--- a/build-battle/merchant-console/src/data/store.ts
+++ b/build-battle/merchant-console/src/data/store.ts
@@ -1,6 +1,6 @@
-import { generate } from "./generate"
+import { generate, generateCards } from "./generate"
 import { merchants } from "./merchants"
-import { Dispute, Payment, Payout, Refund } from "./types"
+import { Dispute, Payment, Payout, Refund, VirtualCard } from "./types"
 
 /**
  * In-memory store.
@@ -19,6 +19,9 @@ interface Store {
   refunds: Refund[]
   disputes: Dispute[]
   payouts: Payout[]
+  cards: VirtualCard[]
+  /** Idempotency key → id of the card it issued. */
+  cardIssueKeys: Map<string, string>
 }
 
 declare global {
@@ -28,7 +31,8 @@ declare global {
 
 function createStore(): Store {
   const { payments, refunds, disputes, payouts } = generate()
-  return { merchants, payments, refunds, disputes, payouts }
+  const cards = generateCards()
+  return { merchants, payments, refunds, disputes, payouts, cards, cardIssueKeys: new Map() }
 }
 
 export const store: Store = globalThis.__northwindStore ?? createStore()
diff --git a/build-battle/merchant-console/src/data/types.ts b/build-battle/merchant-console/src/data/types.ts
index 6697e576..45c5ff33 100644
--- a/build-battle/merchant-console/src/data/types.ts
+++ b/build-battle/merchant-console/src/data/types.ts
@@ -82,3 +82,33 @@ export interface PaymentFilters {
   sort?: "createdAt" | "amount"
   direction?: "asc" | "desc"
 }
+
+export type CardStatus = "active" | "frozen" | "cancelled"
+
+export type CardCategory = "advertising" | "software" | "contractor_tools" | "travel" | "office_supplies"
+
+/** `at` is ISO 8601, always UTC. */
+export interface CardEvent {
+  type: "issued" | "frozen" | "unfrozen" | "cancelled"
+  at: string
+}
+
+/** A stored card. The full number is never stored. */
+export interface VirtualCard {
+  id: string
+  nickname: string
+  merchantId: string
+  last4: string
+  /** Opaque; not the number. */
+  reference: string
+  /** Integer minor units, as is `spent`. */
+  spendLimit: number
+  /** 0 until authorizations exist. */
+  spent: number
+  currency: Currency
+  categoryLock: CardCategory | null
+  status: CardStatus
+  /** ISO 8601, always UTC. */
+  createdAt: string
+  events: CardEvent[]
+}
diff --git a/build-battle/merchant-console/src/lib/cards.test.ts b/build-battle/merchant-console/src/lib/cards.test.ts
new file mode 100644
index 00000000..7872544b
--- /dev/null
+++ b/build-battle/merchant-console/src/lib/cards.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest"
+import {
+  canTransition,
+  eventForTransition,
+  generateCardNumber,
+  isValidLuhn,
+  luhnCheckDigit,
+  maskCardNumber,
+  spendProgress,
+} from "./cards"
+
+describe("card numbers", () => {
+  it("computes and checks the Luhn digit", () => {
+    expect(luhnCheckDigit("424242424242424")).toBe(2)
+    expect(isValidLuhn("4242424242424242")).toBe(true)
+    expect(isValidLuhn("4242424242424241")).toBe(false)
+    expect(isValidLuhn("4242 4242 4242 4242")).toBe(false)
+    expect(isValidLuhn("")).toBe(false)
+  })
+
+  it("generates 16 digits on the 4242 BIN with a valid check digit", () => {
+    for (let i = 0; i < 1000; i++) {
+      const number = generateCardNumber()
+      expect(number).toMatch(/^4242\d{12}$/)
+      expect(isValidLuhn(number)).toBe(true)
+    }
+    const zeros = "424200000000000"
+    expect(generateCardNumber(() => 0)).toBe(zeros + luhnCheckDigit(zeros))
+  })
+
+  it("masks to the last four", () => {
+    expect(maskCardNumber("1234")).toBe("•••• 1234")
+  })
+})
+
+describe("status transitions", () => {
+  it.each([
+    ["active", "frozen", true],
+    ["frozen", "active", true],
+    ["active", "cancelled", true],
+    ["frozen", "cancelled", true],
+    ["cancelled", "active", false],
+    ["cancelled", "frozen", false],
+    ["cancelled", "cancelled", false],
+    ["active", "active", false],
+    ["frozen", "frozen", false],
+  ] as const)("%s → %s allowed: %s", (from, to, allowed) => {
+    expect(canTransition(from, to)).toBe(allowed)
+  })
+
+  it("names the event each transition records", () => {
+    expect(eventForTransition("active", "frozen")).toBe("frozen")
+    expect(eventForTransition("frozen", "active")).toBe("unfrozen")
+    expect(eventForTransition("frozen", "cancelled")).toBe("cancelled")
+  })
+})
+
+describe("spendProgress", () => {
+  it.each([
+    [0, 25000, 0, false],
+    [20000, 25000, 80, false], // exactly 80% is not past it
+    [20001, 25000, 80, true],
+    [8040, 10000, 80, true], // decided on exact spend, not the rounded percent
+    [30000, 25000, 100, true],
+    [100, 0, 0, false],
+  ])("%i of %i → %i%%, near limit %s", (spent, limit, percent, nearLimit) => {
+    expect(spendProgress(spent, limit)).toEqual({ percent, nearLimit })
+  })
+})
diff --git a/build-battle/merchant-console/src/lib/cards.ts b/build-battle/merchant-console/src/lib/cards.ts
new file mode 100644
index 00000000..3cbf2e2f
--- /dev/null
+++ b/build-battle/merchant-console/src/lib/cards.ts
@@ -0,0 +1,69 @@
+import { CardCategory, CardEvent, CardStatus } from "@/data/types"
+
+/** Card rules on the 4242 test BIN. Only `src/data/cards.ts` generates numbers. */
+export const TEST_BIN = "4242"
+
+/** The digit that makes `partial` + digit pass the Luhn check. */
+export function luhnCheckDigit(partial: string): number {
+  let sum = 0
+  for (let i = 0; i < partial.length; i++) {
+    // From the right, the digit beside the check digit is doubled.
+    let digit = Number(partial[partial.length - 1 - i])
+    if (i % 2 === 0) digit = digit * 2 > 9 ? digit * 2 - 9 : digit * 2
+    sum += digit
+  }
+  return (10 - (sum % 10)) % 10
+}
+
+export const isValidLuhn = (number: string) =>
+  /^\d{2,}$/.test(number) && luhnCheckDigit(number.slice(0, -1)) === Number(number.slice(-1))
+
+/** A uniform decimal digit from the platform CSPRNG (rejects 250-255). */
+function randomDigit(): number {
+  const byte = new Uint8Array(1)
+  do crypto.getRandomValues(byte)
+  while (byte[0] >= 250)
+  return byte[0] % 10
+}
+
+/** A 16-digit number on the test BIN; `digit` is injectable. */
+export function generateCardNumber(digit: () => number = randomDigit): string {
+  let partial = TEST_BIN
+  while (partial.length < 15) partial += digit()
+  return partial + luhnCheckDigit(partial)
+}
+
+/** The only way a card number is displayed after creation. */
+export const maskCardNumber = (last4: string) => `•••• ${last4}`
+
+/** Spend against a limit (minor units): whole percent, capped, and past 80%. */
+export function spendProgress(spent: number, limit: number) {
+  if (limit <= 0) return { percent: 0, nearLimit: false }
+  const percent = Math.min(100, Math.round((spent * 100) / limit))
+  return { percent, nearLimit: spent * 100 > limit * 80 }
+}
+
+export const CARD_CATEGORY_LABELS: Record<CardCategory, string> = {
+  advertising: "Advertising",
+  software: "Software & subscriptions",
+  contractor_tools: "Contractor tools",
+  travel: "Travel",
+  office_supplies: "Office supplies",
+}
+export const CARD_CATEGORIES = Object.keys(CARD_CATEGORY_LABELS) as CardCategory[]
+
+/** active ⇄ frozen, either to cancelled, and cancelled is terminal. */
+const TRANSITIONS: Record<CardStatus, CardStatus[]> = {
+  active: ["frozen", "cancelled"],
+  frozen: ["active", "cancelled"],
+  cancelled: [],
+}
+
+export const canTransition = (from: CardStatus, to: CardStatus) =>
+  TRANSITIONS[from].includes(to)
+
+/** The history entry a legal transition records. */
+export function eventForTransition(from: CardStatus, to: CardStatus): CardEvent["type"] {
+  if (to === "active") return from === "frozen" ? "unfrozen" : "issued"
+  return to
+}
diff --git a/docs/specs/NWP-201-issue-cards.md b/docs/specs/NWP-201-issue-cards.md
new file mode 100644
index 00000000..0096d126
--- /dev/null
+++ b/docs/specs/NWP-201-issue-cards.md
@@ -0,0 +1,66 @@
+# SPEC · NWP-201 — Issue virtual cards
+
+**Ticket:** [NWP-201](../tickets/NWP-201.md) · **Author:** Maxim · **Status:** done
+
+## Problem
+
+Ops requests cards over Slack 12–20 times a week, and two went out with the wrong limit last month. They need to issue, list and open cards in the console.
+
+## Current state (under `build-battle/merchant-console/`)
+
+- There are no cards yet (`CLAUDE.md` Layout).
+- `src/data/types.ts:1`: `Currency` is the allowlist.
+- `store.ts:16`: the store lives on `globalThis`.
+- `generate.ts:20`: a shared PRNG, so seeds must not use it.
+- `queries.ts:18`: `parseFilters` is the validation pattern. `:45` is the one payment builder.
+- Reuse `money.ts:15,46` and `dates.ts:7,22`.
+- No API error shape exists.
+- Docs vs code:
+  - `.claude/rules/components.md` names a `Dialog` that doesn't exist, so `Drawer` is used.
+  - Seeds are code, not JSON.
+
+## Domain rules
+
+Sources: `build-battle/merchant-console/CLAUDE.md` ("Card rules"), `build-battle/merchant-console/.claude/rules/cards.md` ("Generate on the server", "Reveal once", "Guard the transition on the server"), and the ticket.
+
+- Money is integer minor units.
+- `4242` BIN with a Luhn digit, generated on the server.
+- The number appears once. Store `last4` and a reference.
+- `active ⇄ frozen`, either can go to `cancelled`, and `cancelled` is terminal. The server guards it.
+- Reject:
+  - a missing merchant
+  - a limit ≤ 0 or > 5,000,000
+  - a currency outside USD/EUR/GBP
+  - a currency other than the merchant's
+- Spend stays 0 until authorizations exist.
+
+## Approach
+
+- `src/lib/cards.ts` holds the pure rules.
+- `src/data/cards.ts` holds validation, `issueCardOnce` (keyed by `Idempotency-Key`) and `transitionCard`.
+- Routes: `/api/cards` and `/api/cards/[id]`, returning `{ error }` with 400/404/409.
+- UI: `/cards` (drawer and actions) and `/cards/[id]`.
+
+**Rejected:** server actions, a decimal limit on the API, warn-only currency, invented seed spend.
+
+## Files and plan
+
+1. `src/lib/cards.ts` + test.
+2. `types`, `store`, `generate`, then `src/data/cards.ts` + test.
+3. Routes: check each status with curl.
+4. `src/app/cards/**`, nav and badge: check in the browser.
+5. `/ship-ready`, then the PR.
+
+## Verification
+
+Unit tests cover Luhn, the BIN, reveal-once, each rejection and the transitions; curl and the browser, per the plan, cover the rest.
+
+## Fixed in passing
+
+- `metrics.ts` `dailyVolume` used local-date buckets, float sums and refunds taken from payments. It now uses UTC, minor units, `filterPayments` and `store.refunds`.
+- `sortPayments` compared amounts as strings; it now compares numbers. Hand-built filters are left to NWP-101.
+- Left for later: the overview's cross-currency totals, and other metrics that read `store.payments` directly.
+
+## Out of scope
+
+Persistence (NWP-203), auth, network calls, limit edits (NWP-202) and enforcing the category lock. `•••• 4242` is read as `•••• <last4>`, as in `payments/page.tsx:123`.