@pylonsync/create-pylon 0.3.344 → 0.3.346

package/templates/invoices/lib/seed.ts

@@ -0,0 +1,190 @@
+// Demo data for a brand-new billing workspace.
+//
+// An empty invoice list shows you nothing about totals, ageing, or partial
+// payment. The first sign-in seeds a realistic book — including one invoice
+// already overdue and one part-paid — so those states are visible rather than
+// theoretical.
+//
+// Pure data + pure shaping; `functions/seedWorkspace.ts` stays a thin wrapper.
+
+export interface SeedClient {
+  key: string;
+  name: string;
+  email: string;
+  address: string;
+}
+
+export interface SeedLine {
+  description: string;
+  /** Whole units; shaped into thousandths. */
+  quantity: number;
+  /** Whole dollars; shaped into cents. */
+  unitPrice: number;
+}
+
+export interface SeedInvoice {
+  key: string;
+  client: string;
+  number: string;
+  status: string;
+  taxRateBps: number;
+  /** Days from today; negative is in the past. */
+  issuedInDays: number;
+  dueInDays: number;
+  lines: SeedLine[];
+  /** Dollars already received; 0 means nothing paid. */
+  paid?: number;
+  paidInDays?: number;
+}
+
+export const SEED_CLIENTS: SeedClient[] = [
+  {
+    key: "northwind",
+    name: "Northwind Logistics",
+    email: "ap@northwind.co",
+    address: "412 Dock Road\nRotterdam, NL",
+  },
+  {
+    key: "hallmark",
+    name: "Hallmark Dental",
+    email: "billing@hallmarkdental.com",
+    address: "88 Mercer Street\nAustin, TX 78701",
+  },
+  {
+    key: "riverbed",
+    name: "Riverbed Coffee",
+    email: "tom@riverbed.coffee",
+    address: "5 Mill Lane\nPortland, OR 97209",
+  },
+  {
+    key: "quarry",
+    name: "Quarry Design Co",
+    email: "ben@quarry.design",
+    address: "19 Foundry Street\nManchester, UK",
+  },
+];
+
+export const SEED_INVOICES: SeedInvoice[] = [
+  // Overdue: sent, past due, nothing paid.
+  {
+    key: "overdue",
+    client: "northwind",
+    number: "INV-2026-0001",
+    status: "sent",
+    taxRateBps: 0,
+    issuedInDays: -52,
+    dueInDays: -22,
+    lines: [
+      { description: "Dispatch integration — discovery", quantity: 1, unitPrice: 4800 },
+      { description: "Senior engineering", quantity: 32, unitPrice: 165 },
+    ],
+  },
+  // Part-paid: a payment against a larger balance.
+  {
+    key: "partial",
+    client: "hallmark",
+    number: "INV-2026-0002",
+    status: "sent",
+    taxRateBps: 875,
+    issuedInDays: -18,
+    dueInDays: 12,
+    lines: [
+      { description: "Patient intake portal — build", quantity: 1, unitPrice: 12_400 },
+      { description: "Training session", quantity: 2, unitPrice: 450 },
+    ],
+    paid: 5000,
+    paidInDays: -6,
+  },
+  // Settled.
+  {
+    key: "paid",
+    client: "riverbed",
+    number: "INV-2026-0003",
+    status: "paid",
+    taxRateBps: 0,
+    issuedInDays: -40,
+    dueInDays: -10,
+    lines: [{ description: "Inventory sync — monthly", quantity: 1, unitPrice: 1800 }],
+    paid: 1800,
+    paidInDays: -12,
+  },
+  // Still being written.
+  {
+    key: "draft",
+    client: "quarry",
+    number: "INV-2026-0004",
+    status: "draft",
+    taxRateBps: 2000,
+    issuedInDays: 0,
+    dueInDays: 30,
+    lines: [
+      { description: "Client portal — phase 1", quantity: 1, unitPrice: 9500 },
+      { description: "SSO configuration", quantity: 4, unitPrice: 180 },
+    ],
+  },
+];
+
+export interface ShapedSeed {
+  clients: Array<{ key: string; row: Record<string, unknown> }>;
+  invoices: Array<{ key: string; client: string; row: Record<string, unknown> }>;
+  lines: Array<{ invoice: string; row: Record<string, unknown> }>;
+  payments: Array<{ invoice: string; row: Record<string, unknown> }>;
+}
+
+export function shapeSeed(now: number = Date.now()): ShapedSeed {
+  const at = (days: number) => new Date(now + days * 86_400_000).toISOString();
+
+  const lines: ShapedSeed["lines"] = [];
+  const payments: ShapedSeed["payments"] = [];
+
+  for (const invoice of SEED_INVOICES) {
+    invoice.lines.forEach((line, index) => {
+      lines.push({
+        invoice: invoice.key,
+        row: {
+          description: line.description,
+          quantityMilli: Math.round(line.quantity * 1000),
+          unitPriceCents: Math.round(line.unitPrice * 100),
+          position: index,
+        },
+      });
+    });
+    if (invoice.paid) {
+      payments.push({
+        invoice: invoice.key,
+        row: {
+          amountCents: Math.round(invoice.paid * 100),
+          method: "bank",
+          paidAt: at(invoice.paidInDays ?? 0),
+        },
+      });
+    }
+  }
+
+  return {
+    clients: SEED_CLIENTS.map((c) => ({
+      key: c.key,
+      row: {
+        name: c.name,
+        email: c.email,
+        address: c.address,
+        createdAt: at(-90),
+      },
+    })),
+    invoices: SEED_INVOICES.map((i) => ({
+      key: i.key,
+      client: i.client,
+      row: {
+        number: i.number,
+        status: i.status,
+        taxRateBps: i.taxRateBps,
+        issueDate: at(i.issuedInDays),
+        dueDate: at(i.dueInDays),
+        createdAt: at(i.issuedInDays),
+        updatedAt: at(i.paidInDays ?? i.issuedInDays),
+      },
+    })),
+    lines,
+    payments,
+  };
+}

package/templates/invoices/lib/utils.ts

@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// `cn` — the shadcn class merger. clsx resolves conditional/array class
+// inputs; tailwind-merge then dedupes conflicting Tailwind utilities so
+// the last one wins (e.g. `cn("px-2", "px-4")` → "px-4"). Every shadcn
+// component routes its className through this.
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/invoices/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "__APP_NAME_KEBAB__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pylon dev",
+    "deploy": "pylon deploy",
+    "check": "tsc --noEmit",
+    "test": "pylon test"
+  },
+  "dependencies": {
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/functions": "^__PYLON_VERSION__",
+    "@pylonsync/client": "^__PYLON_VERSION__",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "@tailwindcss/cli": "^4.3.0",
+    "tw-animate-css": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.0",
+    "lucide-react": "^0.460.0",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-slot": "^1.1.0"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.10.0",
+    "@pylonsync/cli": "^__PYLON_VERSION__",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.6.0"
+  }
+}

package/templates/invoices/tests/billing.test.ts

@@ -0,0 +1,283 @@
+import { describe, expect, test } from "bun:test";
+import {
+  daysOverdue,
+  displayStatus,
+  isOverdue,
+  isValidStatus,
+  lineTotalCents,
+  money,
+  nextNumber,
+  parseAmount,
+  parseQuantity,
+  quantity,
+  summarize,
+  totals,
+  type Invoice,
+  type LineItem,
+  type Payment,
+} from "../lib/billing";
+
+const NOW = Date.parse("2026-07-27T12:00:00Z");
+const at = (days: number) => new Date(NOW + days * 86_400_000).toISOString();
+
+const invoice = (over: Partial<Invoice> = {}): Invoice => ({
+  id: "i1",
+  number: "INV-2026-0001",
+  status: "sent",
+  taxRateBps: 0,
+  dueDate: at(10),
+  ...over,
+});
+
+const line = (over: Partial<LineItem> = {}): LineItem => ({
+  id: "l1",
+  invoiceId: "i1",
+  description: "Work",
+  quantityMilli: 1000,
+  unitPriceCents: 10_000,
+  ...over,
+});
+
+describe("lineTotalCents", () => {
+  test("multiplies quantity by unit price", () => {
+    expect(lineTotalCents({ quantityMilli: 32_000, unitPriceCents: 16_500 })).toBe(528_000);
+  });
+
+  test("handles fractional quantities exactly", () => {
+    // 1.5 hours at $165.00 — the case a float would get wrong.
+    expect(lineTotalCents({ quantityMilli: 1500, unitPriceCents: 16_500 })).toBe(24_750);
+  });
+
+  test("rounds to a whole cent", () => {
+    // 0.333 × $10.00 = $3.33
+    expect(lineTotalCents({ quantityMilli: 333, unitPriceCents: 1000 })).toBe(333);
+  });
+
+  test("garbage is zero, not NaN", () => {
+    expect(
+      lineTotalCents({ quantityMilli: NaN as unknown as number, unitPriceCents: 100 }),
+    ).toBe(0);
+  });
+});
+
+describe("totals", () => {
+  test("sums lines belonging to THIS invoice only", () => {
+    const t = totals(
+      invoice(),
+      [line({ id: "a" }), line({ id: "b", invoiceId: "other", unitPriceCents: 999_999 })],
+      [],
+    );
+    expect(t.subtotalCents).toBe(10_000);
+  });
+
+  test("applies tax to the rounded subtotal", () => {
+    // 8.75% of $124.00 = $10.85
+    const t = totals(
+      invoice({ taxRateBps: 875 }),
+      [line({ unitPriceCents: 12_400 })],
+      [],
+    );
+    expect(t.subtotalCents).toBe(12_400);
+    expect(t.taxCents).toBe(1085);
+    expect(t.totalCents).toBe(13_485);
+  });
+
+  test("balance is total minus payments", () => {
+    const payments: Payment[] = [{ id: "p1", invoiceId: "i1", amountCents: 4000 }];
+    const t = totals(invoice(), [line()], payments);
+    expect(t.paidCents).toBe(4000);
+    expect(t.balanceCents).toBe(6000);
+  });
+
+  test("an overpayment floors the balance at zero", () => {
+    // A credit is a decision to handle deliberately, not a negative balance
+    // that quietly offsets the next invoice.
+    const payments: Payment[] = [{ id: "p1", invoiceId: "i1", amountCents: 99_999 }];
+    expect(totals(invoice(), [line()], payments).balanceCents).toBe(0);
+  });
+
+  test("no lines is zero across the board", () => {
+    expect(totals(invoice(), [], [])).toEqual({
+      subtotalCents: 0,
+      taxCents: 0,
+      totalCents: 0,
+      paidCents: 0,
+      balanceCents: 0,
+    });
+  });
+});
+
+describe("isOverdue / displayStatus", () => {
+  test("sent, past due, and unpaid is overdue", () => {
+    expect(isOverdue(invoice({ dueDate: at(-1) }), 5000, NOW)).toBe(true);
+  });
+
+  test("due today is not yet overdue", () => {
+    // The customer has until the end of the day they were given.
+    expect(isOverdue(invoice({ dueDate: at(0) }), 5000, NOW)).toBe(false);
+  });
+
+  test("a paid balance is never overdue", () => {
+    expect(isOverdue(invoice({ dueDate: at(-30) }), 0, NOW)).toBe(false);
+  });
+
+  test("drafts and voids are never overdue", () => {
+    expect(isOverdue(invoice({ status: "draft", dueDate: at(-30) }), 5000, NOW)).toBe(false);
+    expect(isOverdue(invoice({ status: "void", dueDate: at(-30) }), 5000, NOW)).toBe(false);
+  });
+
+  test("no due date means nothing to be late for", () => {
+    expect(isOverdue(invoice({ dueDate: null }), 5000, NOW)).toBe(false);
+  });
+
+  test("displayStatus surfaces the derived states", () => {
+    expect(displayStatus(invoice({ dueDate: at(-3) }), 5000, NOW)).toBe("overdue");
+    // Fully paid reads as paid even before someone changes the field.
+    expect(displayStatus(invoice(), 0, NOW)).toBe("paid");
+    expect(displayStatus(invoice({ status: "draft" }), 100, NOW)).toBe("draft");
+    expect(displayStatus(invoice({ status: "void" }), 100, NOW)).toBe("void");
+  });
+
+  test("daysOverdue counts whole days", () => {
+    expect(daysOverdue(invoice({ dueDate: at(-7) }), NOW)).toBe(7);
+    expect(daysOverdue(invoice({ dueDate: null }), NOW)).toBeNull();
+  });
+});
+
+describe("summarize", () => {
+  const items: LineItem[] = [
+    line({ id: "a", invoiceId: "late", unitPriceCents: 100_000 }),
+    line({ id: "b", invoiceId: "open", unitPriceCents: 50_000 }),
+    line({ id: "c", invoiceId: "done", unitPriceCents: 20_000 }),
+    line({ id: "d", invoiceId: "draft", unitPriceCents: 30_000 }),
+  ];
+  const payments: Payment[] = [{ id: "p", invoiceId: "done", amountCents: 20_000 }];
+  const invoices: Invoice[] = [
+    invoice({ id: "late", dueDate: at(-5) }),
+    invoice({ id: "open", dueDate: at(5) }),
+    invoice({ id: "done", status: "paid" }),
+    invoice({ id: "draft", status: "draft" }),
+  ];
+
+  test("outstanding covers every sent invoice, overdue only the late ones", () => {
+    const s = summarize(invoices, items, payments, NOW);
+    expect(s.outstandingCents).toBe(150_000);
+    expect(s.overdueCents).toBe(100_000);
+    expect(s.overdueCount).toBe(1);
+  });
+
+  test("collected counts payments regardless of status", () => {
+    expect(summarize(invoices, items, payments, NOW).paidCents).toBe(20_000);
+  });
+
+  test("drafts are counted but never billed", () => {
+    // A draft has real line items ($300) but isn't owed until it's sent —
+    // including it would overstate what the business is waiting on.
+    const s = summarize(invoices, items, payments, NOW);
+    expect(s.draftCount).toBe(1);
+    expect(s.outstandingCents).toBe(150_000);
+
+    const withoutDraft = summarize(
+      invoices.filter((i) => i.status !== "draft"),
+      items,
+      payments,
+      NOW,
+    );
+    expect(withoutDraft.outstandingCents).toBe(s.outstandingCents);
+  });
+
+  test("an empty book is zeroes", () => {
+    expect(summarize([], [], [], NOW)).toEqual({
+      outstandingCents: 0,
+      overdueCents: 0,
+      paidCents: 0,
+      draftCount: 0,
+      overdueCount: 0,
+    });
+  });
+});
+
+describe("money", () => {
+  test("shows exact amounts — an invoice never compacts", () => {
+    expect(money(124_000)).toBe("$1,240.00");
+    expect(money(5)).toBe("$0.05");
+    expect(money(0)).toBe("$0.00");
+    expect(money(1_234_567)).toBe("$12,345.67");
+  });
+
+  test("handles nothing and negatives", () => {
+    expect(money(null)).toBe("$0.00");
+    expect(money(-2500)).toBe("-$25.00");
+  });
+});
+
+describe("quantity", () => {
+  test("drops trailing zeroes", () => {
+    expect(quantity(1000)).toBe("1");
+    expect(quantity(1500)).toBe("1.5");
+    expect(quantity(333)).toBe("0.333");
+    expect(quantity(null)).toBe("0");
+  });
+});
+
+describe("parseAmount", () => {
+  test("reads what a person actually types", () => {
+    expect(parseAmount("1,240.50")).toBe(124_050);
+    expect(parseAmount("$1240.5")).toBe(124_050);
+    expect(parseAmount("1240")).toBe(124_000);
+    expect(parseAmount(" 12.34 ")).toBe(1234);
+  });
+
+  test("rejects nonsense rather than silently billing $0.00", () => {
+    expect(parseAmount("")).toBeNull();
+    expect(parseAmount("abc")).toBeNull();
+    expect(parseAmount("1.2.3")).toBeNull();
+    expect(parseAmount(".")).toBeNull();
+  });
+});
+
+describe("parseQuantity", () => {
+  test("reads decimals into thousandths", () => {
+    expect(parseQuantity("1.5")).toBe(1500);
+    expect(parseQuantity("32")).toBe(32_000);
+  });
+
+  test("rejects nonsense and negatives", () => {
+    expect(parseQuantity("abc")).toBeNull();
+    expect(parseQuantity("-1")).toBeNull();
+    expect(parseQuantity("")).toBeNull();
+  });
+});
+
+describe("nextNumber", () => {
+  test("continues the year's series", () => {
+    expect(nextNumber(["INV-2026-0001", "INV-2026-0007"], 2026)).toBe("INV-2026-0008");
+  });
+
+  test("starts a new year at one", () => {
+    expect(nextNumber(["INV-2025-0042"], 2026)).toBe("INV-2026-0001");
+  });
+
+  test("ignores numbers it can't read", () => {
+    expect(nextNumber(["INV-2026-abc", "", "INV-2026-0003"], 2026)).toBe("INV-2026-0004");
+  });
+
+  test("an empty book starts at one", () => {
+    expect(nextNumber([], 2026)).toBe("INV-2026-0001");
+  });
+
+  test("pads so the series sorts lexically", () => {
+    // The list view sorts on the string; unpadded numbers would put 10 before 9.
+    expect(nextNumber(["INV-2026-0009"], 2026)).toBe("INV-2026-0010");
+  });
+});
+
+describe("statuses", () => {
+  test("overdue is derived, never a stored status", () => {
+    expect(isValidStatus("overdue")).toBe(false);
+    expect(isValidStatus("draft")).toBe(true);
+    expect(isValidStatus("sent")).toBe(true);
+    expect(isValidStatus("paid")).toBe(true);
+    expect(isValidStatus("void")).toBe(true);
+  });
+});

package/templates/invoices/tests/components.test.tsx

@@ -0,0 +1,172 @@
+import { afterEach, describe, expect, test } from "bun:test";
+// This project uses the classic JSX transform, so .tsx tests import React.
+import React from "react";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { LineItems } from "../components/line-items";
+import { TotalsPanel } from "../components/totals-panel";
+import { PaymentDialog } from "../components/payment-dialog";
+import { StatusBadge } from "../components/status-badge";
+import { totals, type LineItem } from "../lib/billing";
+
+afterEach(cleanup);
+
+// Tier 2: components. No mocking needed — they take data as props and report
+// changes through callbacks, because the container owns `db`.
+
+const items: LineItem[] = [
+  {
+    id: "l1",
+    invoiceId: "i1",
+    description: "Senior engineering",
+    quantityMilli: 32_000,
+    unitPriceCents: 16_500,
+  },
+];
+
+describe("LineItems", () => {
+  test("renders the line with its computed amount", () => {
+    render(<LineItems items={items} editable onAdd={() => {}} onRemove={() => {}} />);
+    expect(screen.getByText("Senior engineering")).toBeDefined();
+    expect(screen.getByText("32")).toBeDefined();
+    expect(screen.getByText("$5,280.00")).toBeDefined();
+  });
+
+  test("adding parses the typed quantity and price into integers", () => {
+    const added: unknown[] = [];
+    render(<LineItems items={[]} editable onAdd={(d) => added.push(d)} onRemove={() => {}} />);
+    fireEvent.change(screen.getByLabelText("Description"), {
+      target: { value: "Training" },
+    });
+    fireEvent.change(screen.getByLabelText("Quantity"), { target: { value: "1.5" } });
+    fireEvent.change(screen.getByLabelText("Unit price"), { target: { value: "450.50" } });
+    fireEvent.click(screen.getByRole("button", { name: /add/i }));
+    expect(added).toEqual([
+      { description: "Training", quantityMilli: 1500, unitPriceCents: 45_050 },
+    ]);
+  });
+
+  test("an unreadable price can't be added", () => {
+    // Silently billing $0.00 for a typo is the failure this prevents.
+    const added: unknown[] = [];
+    render(<LineItems items={[]} editable onAdd={(d) => added.push(d)} onRemove={() => {}} />);
+    fireEvent.change(screen.getByLabelText("Description"), { target: { value: "X" } });
+    fireEvent.change(screen.getByLabelText("Unit price"), { target: { value: "abc" } });
+    fireEvent.click(screen.getByRole("button", { name: /add/i }));
+    expect(added).toEqual([]);
+  });
+
+  test("a sent invoice hides the editing controls entirely", () => {
+    // It's a document someone is paying against; editing desyncs it from their copy.
+    render(
+      <LineItems items={items} editable={false} onAdd={() => {}} onRemove={() => {}} />,
+    );
+    expect(screen.queryByLabelText("Description")).toBeNull();
+    expect(screen.queryByRole("button", { name: /remove/i })).toBeNull();
+  });
+
+  test("removing reports the line id", () => {
+    const removed: string[] = [];
+    render(
+      <LineItems items={items} editable onAdd={() => {}} onRemove={(id) => removed.push(id)} />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: /remove senior engineering/i }));
+    expect(removed).toEqual(["l1"]);
+  });
+
+  test("no lines shows a placeholder row, not an empty table", () => {
+    render(<LineItems items={[]} editable onAdd={() => {}} onRemove={() => {}} />);
+    expect(screen.getByText("No lines yet.")).toBeDefined();
+  });
+});
+
+describe("TotalsPanel", () => {
+  test("shows subtotal, tax, total and balance in reading order", () => {
+    const t = totals(
+      { id: "i1", number: "INV-1", status: "sent", taxRateBps: 875 },
+      items,
+      [{ id: "p", invoiceId: "i1", amountCents: 100_000 }],
+    );
+    const { container } = render(<TotalsPanel totals={t} taxRateBps={875} />);
+    const text = container.textContent ?? "";
+    expect(text).toContain("$5,280.00");
+    expect(text).toContain("Tax (8.75%)");
+    expect(text).toContain("Balance due");
+  });
+
+  test("hides the tax row when there's no tax", () => {
+    const t = totals({ id: "i1", number: "INV-1", status: "sent" }, items, []);
+    const { container } = render(<TotalsPanel totals={t} taxRateBps={0} />);
+    expect(container.textContent).not.toContain("Tax");
+  });
+});
+
+describe("PaymentDialog", () => {
+  test("defaults to the outstanding balance", () => {
+    // Retyping the figure is how a typo gets in.
+    render(
+      <PaymentDialog open balanceCents={52_800} onOpenChange={() => {}} onRecord={() => {}} />,
+    );
+    expect((screen.getByLabelText("Amount") as HTMLInputElement).value).toBe("528.00");
+  });
+
+  test("records the parsed amount in cents", () => {
+    const recorded: unknown[] = [];
+    render(
+      <PaymentDialog
+        open
+        balanceCents={52_800}
+        onOpenChange={() => {}}
+        onRecord={(cents, method) => recorded.push([cents, method])}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText("Amount"), { target: { value: "250.25" } });
+    fireEvent.click(screen.getByRole("button", { name: /record payment/i }));
+    expect(recorded).toEqual([[25_025, "bank"]]);
+  });
+
+  test("refuses more than the balance", () => {
+    const recorded: unknown[] = [];
+    render(
+      <PaymentDialog
+        open
+        balanceCents={1000}
+        onOpenChange={() => {}}
+        onRecord={(cents) => recorded.push(cents)}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText("Amount"), { target: { value: "50" } });
+    fireEvent.click(screen.getByRole("button", { name: /record payment/i }));
+    expect(recorded).toEqual([]);
+    expect(screen.getByText(/more than the balance/i)).toBeDefined();
+  });
+
+  test("renders nothing when closed", () => {
+    const { container } = render(
+      <PaymentDialog
+        open={false}
+        balanceCents={1000}
+        onOpenChange={() => {}}
+        onRecord={() => {}}
+      />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+describe("StatusBadge", () => {
+  test("labels the derived overdue state", () => {
+    render(<StatusBadge status="overdue" />);
+    expect(screen.getByText("Overdue")).toBeDefined();
+  });
+
+  test("labels the stored ones", () => {
+    const { container } = render(
+      <>
+        <StatusBadge status="draft" />
+        <StatusBadge status="paid" />
+      </>,
+    );
+    expect(within(container).getByText("Draft")).toBeDefined();
+    expect(within(container).getByText("Paid")).toBeDefined();
+  });
+});