@lotics/ui 46.3.0 → 46.8.0

package/examples/tpl_money.tsx

@@ -0,0 +1,1027 @@
+import { useRef, useState } from "react";
+import { Pressable, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { Alert } from "@lotics/ui/alert";
+import { Button } from "@lotics/ui/button";
+import { IconButton } from "@lotics/ui/icon_button";
+import { Link } from "@lotics/ui/link";
+import { TextLink } from "@lotics/ui/text_link";
+import { Callout, CalloutText } from "@lotics/ui/callout";
+import { PageContent } from "@lotics/ui/page_content";
+import { Section, SectionHeading, SectionHeadingTitle, Subsection } from "@lotics/ui/section_heading";
+import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
+import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
+import { SummaryLine } from "@lotics/ui/summary_line";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
+import { FileBadge } from "@lotics/ui/file_badge";
+import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
+import { type DisplayFile } from "@lotics/ui/file_thumbnail";
+import { InlineButton } from "@lotics/ui/inline_button";
+import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
+import { InlineFiles } from "@lotics/ui/inline_files";
+import { InlineNumberInput } from "@lotics/ui/inline_number_input";
+import { InlineSelect } from "@lotics/ui/inline_select";
+import { InlineTextInput } from "@lotics/ui/inline_text_input";
+import { ChargeLine, ChargeLines } from "@lotics/ui/charge_lines";
+import { Ledger, LedgerGroup, LedgerRow, LedgerTotal } from "@lotics/ui/ledger";
+import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
+import { daysUntil, deadlineAnnotation } from "@lotics/ui/deadline";
+import { formatMoney } from "@lotics/ui/format_money";
+import { useLoticsLocale } from "@lotics/ui/locale";
+import type { PickerOption } from "@lotics/ui/picker";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template, Money — THE money surface: one record's money, in every shape it
+// takes. Four kinds of screen live here and they are not interchangeable:
+//
+//   FEES     — the DETAILED view, both directions (charge/cost), each fee with
+//              its party, due date, supplier original and paid state. A
+//              register whose every row expands in place to its full detail.
+//   BILLING  — the invoice DOCUMENTS: per-invoice charge bands, the closing
+//              `Ledger` statement, the deposit and the receipt.
+//   CHARGES  — `ChargeLines`, the editable band you PRICE into: priced lines,
+//              flat amounts, mixed kinds, locked, empty, and the narrow fork.
+//
+// The split that governs the page: `ChargeLines` is what you are PRICING and
+// `Ledger` is what you are READING — a band you type into versus a statement
+// you check. Both keep every figure on one right-aligned tabular column,
+// because a money column that lands on more edges than it has kinds cannot be
+// added up by eye.
+//
+// Fees and Billing are lifted from `tpl_record`, where they are two sections of
+// a much larger record surface; here they are the subject rather than a part of
+// one, and the charge bands below them show the shapes a record's money takes
+// that no single scenario exercises at once.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** ONE ₫ formatter for the page — a template that spells its home currency two
+ *  ways teaches two ways. `formatMoney` is the kit's, so a table cell and a
+ *  charge line cannot disagree about digit grouping. */
+const money = (v: number | null) => (v == null ? "" : formatMoney(v));
+/** A SECOND currency, for the one band that is denominated in it. A band formats
+ *  its own money (`ChargeLines.formatMoney`), which is exactly what lets a
+ *  foreign-currency charge sit on the same page as the domestic ones. */
+const eur = (n: number) => `€${n.toLocaleString("en-IE", { minimumFractionDigits: 2 })}`;
+
+type Method = "cash" | "transfer" | "card";
+const METHODS: PickerOption<Method>[] = [
+  { value: "cash", label: "Cash" },
+  { value: "transfer", label: "Bank transfer" },
+  { value: "card", label: "Card" },
+];
+
+/** Fake persistence for the inline editors — real apps await their mutation. */
+function persist<T>(set: (v: T) => void) {
+  return (v: T) =>
+    new Promise<void>((resolve) => {
+      setTimeout(() => {
+        set(v);
+        resolve();
+      }, 350);
+    });
+}
+
+const MOCK_PDF_URL = "data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDE+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9NZWRpYUJveFswIDAgNjEyIDc5Ml0vQ29udGVudHMgNCAwIFIvUmVzb3VyY2VzPDwvRm9udDw8L0YxIDUgMCBSPj4+Pj4+ZW5kb2JqCjQgMCBvYmo8PC9MZW5ndGggNjM+PnN0cmVhbQpCVCAvRjEgMTggVGYgNzIgNzIwIFRkIChOb3JkaWMgRnVybml0dXJlIC0gbW9jayBkb2N1bWVudCkgVGogRVQKZW5kc3RyZWFtIGVuZG9iago1IDAgb2JqPDwvVHlwZS9Gb250L1N1YnR5cGUvVHlwZTEvQmFzZUZvbnQvSGVsdmV0aWNhPj5lbmRvYmoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAwNTIgMDAwMDAgbiAKMDAwMDAwMDEwMSAwMDAwMCBuIAowMDAwMDAwMjExIDAwMDAwIG4gCjAwMDAwMDAzMjAgMDAwMDAgbiAKdHJhaWxlcjw8L1NpemUgNi9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjM4MQolJUVPRg==";
+const MOCK_PHOTO_URL =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2JmZGJmZScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM5M2M1ZmQnLz48Y2lyY2xlIGN4PScyNDAnIGN5PSc4MCcgcj0nNDAnIGZpbGw9JyNmZWY5YzMnLz48L3N2Zz4=";
+
+// ── the FEES ledger — the DETAILED money view (both directions), distinct
+// from Billing's invoice DOCUMENTS: every fee the record incurs or charges,
+// with its party, due date, proof reference and paid state.
+//
+// The drill-down law for a CHILD COLLECTION inside a record: the row EXPANDS
+// (`TableRow` `detail` + `expanded`), it does not open a drawer. A register
+// screen's row still docks a workspace Drawer — on a list screen there is
+// nowhere else for the detail to go — but here the record page IS the context
+// the drawer was recreating, so docking one charged for navigation twice and
+// took the surrounding rows away to show nine fields.
+//
+// This is also why the ledger is not simply WIDER. All nine fields as columns
+// demand 946px + 112 gap + 40 gutter = 1098px against a reading column a third
+// of that; over budget `table_fit` drops droppable columns by priority until
+// the rest fit. Widening the register does not display VAT / Invoice no / Note
+// — it drops them silently. And `note` is prose: it has no column width at any
+// measure.
+type FeeDirection = "charge" | "cost";
+/** A picked `File` as the kit's `DisplayFile`. A real host uploads and returns
+ *  the stored object; the object URL stands in for that here. */
+let feeDocSeq = 0;
+const asDisplayFile = (f: File): DisplayFile => ({
+  id: `fee-doc-u${(feeDocSeq += 1)}`,
+  filename: f.name,
+  mimeType: f.type || "application/octet-stream",
+  url: URL.createObjectURL(f),
+});
+
+interface Fee {
+  id: string;
+  name: string;
+  /** charge = billed to the customer, cost = paid out to a vendor. */
+  direction: FeeDirection;
+  party: string;
+  amount: number;
+  vat: number | null;
+  due: string;
+  invoiceNo: string;
+  /** The supplier's original, filed against THIS fee. A number is what the field
+   *  claimed; these are what actually arrived, and the gap between them is the
+   *  work a payables desk does. */
+  docs: DisplayFile[];
+  paid: boolean;
+  note: string;
+}
+let feeSeq = 4;
+const FEE_SEED: Fee[] = [
+  { id: "fee_1", name: "Freight surcharge", direction: "charge", party: "Harbor Freight Lines", amount: 350_000, vat: 8, due: "", invoiceNo: "", docs: [], paid: true, note: "" },
+  { id: "fee_2", name: "Trucking", direction: "cost", party: "Northline Haulage", amount: 450_000, vat: 8, due: "2026-07-02", invoiceNo: "NH-2044", docs: [{ id: "fee-doc-1", filename: "NH-2044-invoice.pdf", mimeType: "application/pdf", url: MOCK_PDF_URL }], paid: false, note: "Last-mile to the port" },
+  // UNPAID with a number claimed and nothing filed — the state the status column
+  // exists to surface. It was `paid: true`, which meant "Awaiting invoice" could
+  // never render and the design could not be seen at all.
+  { id: "fee_3", name: "Customs advance", direction: "cost", party: "Blue Anchor Brokerage", amount: 275_000, vat: null, due: "", invoiceNo: "BA-118", docs: [], paid: false, note: "" },
+  // A PHOTO of an invoice, not a PDF — the case the badge exists for. A supplier
+  // who sends a phone snap has not sent a tax document, and the colour says so
+  // before anyone opens it. A fixture of nothing but PDFs makes the badge look
+  // like decoration, because the one thing it carries never varies.
+  { id: "fee_4", name: "Storage overrun", direction: "charge", party: "Harbor Freight Lines", amount: 120_000, vat: 8, due: "2026-08-02", invoiceNo: "HF-8821", docs: [{ id: "fee-doc-2", filename: "storage-invoice-photo.jpg", mimeType: "image/jpeg", url: MOCK_PHOTO_URL }], paid: false, note: "3 extra days at Central hub" },
+];
+// `priority` = the mobile contract: Party then Type drop first on a narrow
+// container, Amount + Status survive with the identity; at the floor the rows
+// STACK label-over-value — and the expansion always carries the full fee.
+// THREE columns, not five — the register's grammar. A column per FACT spends
+// width on separation the reader never asked for: the party belongs to the fee's
+// identity and the payment state belongs to its amount, so each rides line 2 of
+// the cell it qualifies. Grouping bought 246px (Party 150 + Status 96), which is
+// more than the document column costs — the table gained information and lost
+// two columns.
+const FEE_COLUMNS: TableColumn[] = [
+  { key: "fee", label: "Fee", flex: 1 },
+  { key: "amount", label: "Amount", width: 104, align: "right", priority: 1 },
+  { key: "invoice", label: "Invoice", width: 116, priority: 2 },
+];
+const feeOverdue = (f: Fee): boolean => !f.paid && f.due !== "" && new Date(f.due) < new Date();
+
+interface Charge {
+  key: string;
+  label: string;
+  /** The expected list price — shown as ghost text while the line is unset. */
+  standard: number;
+  amount: number;
+  method: Method | "";
+}
+
+interface Invoice {
+  key: string;
+  title: string;
+  charges: Charge[];
+  /** Lookup code once issued to the e-invoice provider; "" = not issued. */
+  ref: string;
+}
+
+const BILLING_INITIAL: Invoice[] = [
+  {
+    // Issued AND multi-line, which is the row that exercises the precedence: `peek` wins,
+    // so its lookup link renders INSIDE the popover and the flat `reference` is ignored.
+    // Storage is the mirror case (one charge, issued) and takes the flat link instead.
+    key: "delivery",
+    title: "Delivery",
+    ref: "INV-0029",
+    charges: [
+      { key: "freight", label: "Freight", standard: 1_200_000, amount: 1_200_000, method: "cash" },
+      { key: "insurance", label: "Insurance", standard: 250_000, amount: 0, method: "" },
+    ],
+  },
+  {
+    key: "handling",
+    title: "Handling",
+    ref: "",
+    charges: [{ key: "handling", label: "Handling fee", standard: 150_000, amount: 150_000, method: "" }],
+  },
+  {
+    // Seeded ISSUED, so the section renders both states at rest: the Re-issue path, the
+    // band's lookup link, and the ledger's trailing `reference`. A fixture where nothing
+    // has happened yet only ever exercises the first half of a flow.
+    key: "storage",
+    title: "Storage",
+    ref: "INV-0031",
+    charges: [{ key: "storage", label: "Storage fee", standard: 80_000, amount: 80_000, method: "transfer" }],
+  },
+];
+
+/** A settled credit against the record — the statement's third side, and its only line. */
+const CREDIT = { key: "cn-0031", label: "Credit note CN-0031", amount: 120_000, meta: "Storage waived, 3 days" };
+
+const invoiceTotal = (inv: Invoice) => inv.charges.reduce((s, c) => s + c.amount, 0);
+const missingMethods = (inv: Invoice) => inv.charges.filter((c) => c.amount > 0 && !c.method);
+
+function InvoiceParticulars({ inv }: { inv: Invoice }) {
+  return (
+    <View style={{ gap: 8, padding: 12, minWidth: 240 }}>
+      <Text size="xs" color="muted">{inv.title}</Text>
+      {inv.charges.map((c) => (
+        <View key={c.key} style={{ flexDirection: "row", alignItems: "baseline", gap: 12 }}>
+          <Text size="sm" style={{ flexGrow: 1, flexShrink: 1 }}>{c.label}</Text>
+          <Text size="sm" tabular color={c.amount > 0 ? undefined : "muted"}>
+            {c.amount > 0 ? formatMoney(c.amount) : "—"}
+          </Text>
+        </View>
+      ))}
+      {inv.ref ? (
+        <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
+      ) : null}
+    </View>
+  );
+}
+
+// ── the CHARGE BANDS — `ChargeLines`, the write side. One seed feeds the wide
+// band and the narrow one, because the fork is a statement about the BAND's
+// container and nothing else: the same data, the same handlers, two widths.
+interface PricedLine {
+  key: string;
+  label: string;
+  meta?: string;
+  quantity: number | null;
+  unitPrice: number | null;
+}
+const PRICED_SEED: PricedLine[] = [
+  { key: "runs", label: "Delivery runs", meta: "Distance band 101–200 km", quantity: 45, unitPrice: 4_000 },
+  { key: "cleaning", label: "Site cleaning", quantity: 1, unitPrice: 30_000 },
+];
+/** The rate card's ceiling — the figure the one-tap verb fills in. */
+const CEILING_RATE = 4_200;
+const lineAmount = (l: PricedLine) => (l.quantity ?? 0) * (l.unitPrice ?? 0);
+
+export function TplMoney() {
+  // ONE clock per render. Two rows each calling `new Date()` can land on
+  // opposite sides of midnight and disagree about what "today" is.
+  const now = new Date();
+  const words = useLoticsLocale();
+  // The countdown for any date field on this record: "2 days overdue" / "Today"
+  // / "5 days left", routed to the annotation slot its urgency earns
+  // (error / warning / description) — @lotics/ui/deadline owns the wording and
+  // the thresholds so this screen cannot disagree with the register beside it.
+  const dueAnnotation = (iso: string, open: boolean) =>
+    open && iso !== "" ? deadlineAnnotation(daysUntil(new Date(iso), now), words.deadline) : {};
+
+  // ── the fees ledger — a register whose rows EXPAND (create-then-refine: Add
+  // appends a blank fee already open; every field refines in the expansion)
+  const [fees, setFees] = useState<Fee[]>(FEE_SEED);
+  // Which fee is expanded — ONE at a time, the caller's rule (`TableRow.expanded`
+  // is controlled precisely so this is a decision and not a default). Two open
+  // 380px details would push the third row off screen, and a register that can't
+  // be scanned has stopped being a register.
+  const [feeView, setFeeView] = useState<{ kind: "edit"; id: string } | null>(null);
+  const patchFee = (id: string, p: Partial<Fee>) => setFees((prev) => prev.map((f) => (f.id === id ? { ...f, ...p } : f)));
+  const addFee = () => {
+    const f: Fee = { id: `fee_${(feeSeq += 1)}`, name: "", direction: "cost", party: "", amount: 0, vat: null, due: "", invoiceNo: "", docs: [], paid: false, note: "" };
+    setFees((prev) => [...prev, f]);
+    setFeeView({ kind: "edit", id: f.id });
+  };
+  const deleteFee = (f: Fee) => {
+    Alert.alert(`Remove ${f.name || "this fee"}?`, "The fee comes off the record's ledger. This can't be undone.", [
+      { text: "Cancel", style: "cancel" },
+      { text: "Remove", style: "destructive", onPress: () => { setFees((prev) => prev.filter((x) => x.id !== f.id)); setFeeView(null); } },
+    ]);
+  };
+  // The status column speaks in facts: Paid, Overdue, Due <date>, Unpaid.
+  /**
+   * MONEY state only — it rides under the amount it is about.
+   *
+   * "Awaiting docs" lived here while the document had no column of its own, and
+   * it was a conflation: whether a supplier's original has arrived is not a fact
+   * about the money, and putting it in the money's state meant a fee could not
+   * report both at once. Now the Invoice column carries the document and this
+   * carries the payment, and each says one thing.
+   */
+  const feeStatus = (f: Fee): { text: string; danger: boolean } =>
+    f.paid ? { text: "Paid", danger: false }
+      : feeOverdue(f) ? { text: "Overdue", danger: true }
+        : f.due !== "" ? { text: `Due ${new Date(f.due).toLocaleDateString("en-GB", { day: "numeric", month: "short" })}`, danger: false }
+          : { text: "Unpaid", danger: false };
+
+  // The gallery is mounted only while a file is being looked at. The row's link
+  // opens the fee's OWN originals — the number in that cell is what they were
+  // filed against, so the preview a reader asks for by pressing it is that fee's
+  // paperwork and not the record's whole pile.
+  const [preview, setPreview] = useState<{ files: DisplayFile[]; index: number } | null>(null);
+
+  // ── billing — the invoice documents
+  const [invoices, setInvoices] = useState<Invoice[]>(BILLING_INITIAL);
+  const [deposit, setDeposit] = useState(0);
+  const [confirmIssueKey, setConfirmIssueKey] = useState<string | null>(null);
+  const seq = useRef(414);
+
+  const patchCharge = (invKey: string, chKey: string, patch: Partial<Charge>) =>
+    setInvoices((prev) =>
+      prev.map((inv) =>
+        inv.key !== invKey ? inv : { ...inv, charges: inv.charges.map((c) => (c.key === chKey ? { ...c, ...patch } : c)) },
+      ),
+    );
+
+  /** Inline-editor persistence for one charge cell. */
+  const saveCharge = (invKey: string, chKey: string, patch: Partial<Charge>) =>
+    new Promise<void>((resolve) => {
+      setTimeout(() => {
+        patchCharge(invKey, chKey, patch);
+        resolve();
+      }, 350);
+    });
+
+  // Resolved from the CURRENT invoices every render — the confirm dialog quotes the
+  // total that will actually be billed, including a charge that landed after the press.
+  const confirmIssue = invoices.find((i) => i.key === confirmIssueKey) ?? null;
+  const grandTotal = invoices.reduce((sum, inv) => sum + invoiceTotal(inv), 0);
+  // A charge carrying a METHOD has been paid — the statement below is derived from
+  // that, not from a second "paid" flag somebody has to keep in step with it. The
+  // record already knows; asking again is how the two answers start disagreeing.
+  //
+  // ONE list, and both the rows and the subtotal read it. Deriving them from two
+  // separate predicates is how a ledger comes to disagree with itself: filter the
+  // rows on `method && amount > 0` while summing on `method` alone and any charge
+  // that fails only the second test lands in the total with no line to explain it.
+  // The component cannot catch that — it renders the `total` it is handed.
+  const receipts = invoices.flatMap((inv) =>
+    inv.charges.filter((c) => c.method !== "" && c.amount > 0).map((c) => ({ inv, charge: c })),
+  );
+  const received = receipts.reduce((sum, r) => sum + r.charge.amount, 0);
+  // Three sides now, so the total states the arithmetic rather than a difference of two:
+  // what was billed, less what was credited, less what arrived.
+  const outstanding = grandTotal - CREDIT.amount - received;
+  const allMissing = invoices.flatMap(missingMethods);
+
+  const issue = (inv: Invoice) => {
+    seq.current += 1;
+    const ref = `INV-2026-${String(seq.current).padStart(4, "0")}`;
+    setInvoices((prev) => prev.map((x) => (x.key === inv.key ? { ...x, ref } : x)));
+    setConfirmIssueKey(null);
+  };
+
+  const printReceipt = () => {
+    if (allMissing.length > 0) {
+      Alert.alert(
+        "Missing payment method",
+        `Choose how these charges were paid before printing the receipt:\n\n${allMissing.map((c) => `• ${c.label} (${formatMoney(c.amount)})`).join("\n")}`,
+        [{ text: "OK" }],
+      );
+      return;
+    }
+    Alert.alert("Receipt", `Printing receipt for ${formatMoney(grandTotal)}.`, [{ text: "OK" }]);
+  };
+
+  // ── the charge bands
+  const [pricedLines, setPricedLines] = useState<PricedLine[]>(PRICED_SEED);
+  const patchLine = (key: string, p: Partial<PricedLine>) =>
+    setPricedLines((prev) => prev.map((l) => (l.key === key ? { ...l, ...p } : l)));
+  const removeLine = (key: string) => setPricedLines((prev) => prev.filter((l) => l.key !== key));
+  const pricedTotal = pricedLines.reduce((s, l) => s + lineAmount(l), 0);
+
+  const [handling, setHandling] = useState<number | null>(0);
+  const [clearance, setClearance] = useState<number | null>(1_200);
+  const [handlingMethod, setHandlingMethod] = useState<Method | null>(null);
+
+  const [mixedQty, setMixedQty] = useState<number | null>(45);
+  const [mixedRate, setMixedRate] = useState<number | null>(4_000);
+  const [shortfall, setShortfall] = useState<number | null>(50_000);
+
+  /** One priced band, rendered twice — see the narrow section for why. */
+  const pricedBand = (
+    <ChargeLines
+      totalLabel="Total"
+      total={pricedTotal}
+      formatMoney={money}
+      empty={<EmptyState compact message="Nothing priced yet" hint="Add a charge to price it against the rate card." />}
+      /* The commit takes its OWN row at the band's end and sits on the left —
+         it belongs to the band, so the band draws it rather than the page
+         laying a button beside one. */
+      action={
+        <Button
+          color="primary"
+          title="Issue invoice"
+          disabled={pricedTotal <= 0}
+          onPress={() => Alert.alert("Issue invoice", `Issuing an invoice for ${money(pricedTotal)}.`, [{ text: "OK" }])}
+        />
+      }
+    >
+      {pricedLines.map((l) => (
+        <ChargeLine
+          key={l.key}
+          label={l.label}
+          meta={l.meta}
+          quantity={l.quantity}
+          unitPrice={l.unitPrice}
+          onQuantityChange={(v) => patchLine(l.key, { quantity: v })}
+          onUnitPriceChange={(v) => patchLine(l.key, { unitPrice: v })}
+          /* the rate card's ceiling, one tap, BESIDE the field it fills */
+          /* Unconditional + `disabled`, never conditional: a verb passed only when it
+             has work makes the field narrower on the rows that carry it, so those rows
+             stop sharing this money column with the rest. */
+          unitPriceActions={
+            <InlineButton
+              title={money(CEILING_RATE)}
+              accessibilityLabel="Apply the ceiling rate"
+              disabled={l.key !== "runs" || l.unitPrice === CEILING_RATE}
+              onPress={() => patchLine(l.key, { unitPrice: CEILING_RATE })}
+            />
+          }
+          action={<IconButton icon="x" size="sm" color="danger" tooltip="Remove this charge" onPress={() => removeLine(l.key)} />}
+        />
+      ))}
+    </ChargeLines>
+  );
+
+  return (
+    <PageContent
+      size="md"
+      title="Money"
+      description="Everything this record charges, costs, bills and collects."
+    >
+      <SectionStack>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Every fee the record incurs or charges — its party, due date and paid state.">Fees</SectionHeadingTitle>
+            {/* THE SECTION'S ADD RIDES THE HEADING ROW, right edge — the one
+                place it can sit that does not MOVE. Under the register it sat
+                below the last row, so where a reader looks for "how do I add
+                one" depended on how many there already were: past a screenful
+                the verb is off-screen entirely, and on an empty list there is no
+                last row to sit under, so it had to be a SECOND button inside the
+                `EmptyState`. One verb, two renderings, neither findable without
+                scanning. The heading row is the section's control line — where a
+                section's meta and verbs sit, with the title growing to push its
+                siblings right — so the add belongs on it, in the same spot
+                whether the list holds nought or forty. */}
+            <Button title="Add fee" color="primary" onPress={addFee} />
+          </SectionHeading>
+          <SummaryLine
+            items={[
+              { label: "collected", value: fees.filter((f) => f.direction === "charge" && f.paid).reduce((s, f) => s + f.amount, 0), format: "currency", compact: true },
+              { label: "to collect", value: fees.filter((f) => f.direction === "charge" && !f.paid).reduce((s, f) => s + f.amount, 0), format: "currency", compact: true },
+              { label: "to pay", value: fees.filter((f) => f.direction === "cost" && !f.paid).reduce((s, f) => s + f.amount, 0), format: "currency", compact: true, tone: fees.some((f) => f.direction === "cost" && feeOverdue(f)) ? "warning" : undefined },
+            ]}
+          />
+          {/* The empty state takes NO `action` — the heading's Add is the only
+              one, and it is already on screen. Repeating the section's verb here
+              puts two buttons for one act in view at once, and makes the add MOVE
+              the moment the first row lands. The empty state says what the
+              section holds; the heading says how to fill it. */}
+          {fees.length === 0 ? (
+            <EmptyState icon="receipt" message="No fees on this record" hint="Add the first charge or cost — it expands ready to fill in." />
+          ) : (
+            <Table columns={FEE_COLUMNS}>
+              {fees.map((f) => {
+                const st = feeStatus(f);
+                return (
+                  <TableRow
+                    key={f.id}
+                    /* TOGGLE, unlike a peek's open-never-toggle: a popover
+                       fights its own outside-press dismissal, an expansion has
+                       none, so the row that opened it must also close it. */
+                    onPress={() => setFeeView((cur) => (cur?.id === f.id ? null : { kind: "edit", id: f.id }))}
+                    expanded={feeView?.id === f.id}
+                    /* `— details`, the peek's convention: the door is a disclosure,
+                       not a trip, so "Open" would name the wrong act. `PressDoor`
+                       carries the state as aria-expanded. */
+                    accessibilityLabel={`${f.name || "New fee"} — details`}
+                    /* NO `selected`: `TableRow` already derives it —
+                       `selected={selected || showDetail}` — so the expanded row
+                       wears the wash without being told, and passing it here
+                       would only restate the kit. */
+                    detail={
+                      /* The detail carries ALL NINE fields, including the three the
+                         row already shows — because the row's cells are read-only
+                         Text, and because tier 2 DROPS columns on a narrow
+                         container. `table_fit` licenses that drop on the promise
+                         that "the door opens the record where dropped values
+                         live"; the expansion is now that door, so anything it
+                         omitted would be unreachable, not merely inconvenient.
+                         Table does not expose its fit result, so this cannot be
+                         conditional — nor should it be. */
+                      /* 24 (`SPACE.lg`), not the 12 this file uses for intra-block
+                         gaps: the field grid's own row gap is `SPACE.md` (16), so
+                         anything separating a DIFFERENT block has to beat it or
+                         the verb below reads as one more field. Same rung logic
+                         `DetailRow` uses for its stacked rows. */
+                      <View style={{ gap: 24 }}>
+                        {/* 150, the SAME width every field grid on this page uses.
+                            The page's invariant is one pixel-aligned VALUE column,
+                            and a `Table`'s detail is inset by `ROW_GUTTER` — which
+                            is 0 — so this grid starts at the same x as Billing's
+                            and takes the same label width. In a grid that IS
+                            inset, the label width is 150 − inset. */}
+                        <DetailTable labelWidth={150}>
+                          <DetailRow label="Fee">
+                            <InlineTextInput value={f.name} onSave={persist((v: string) => patchFee(f.id, { name: v }))} placeholder="Name the fee…" accessibilityLabel="Fee name" />
+                          </DetailRow>
+                          <DetailRow label="Type" description="Charge — billed to the customer; Cost — paid to a vendor">
+                            <InlineSelect
+                              value={f.direction}
+                              options={[{ value: "charge", label: "Charge" }, { value: "cost", label: "Cost" }]}
+                              onSave={persist((v: FeeDirection) => patchFee(f.id, { direction: v }))}
+                              accessibilityLabel="Fee type"
+                            />
+                          </DetailRow>
+                          <DetailRow label="Party">
+                            <InlineTextInput value={f.party} onSave={persist((v: string) => patchFee(f.id, { party: v }))} placeholder="Who pays, or is paid…" accessibilityLabel="Party" />
+                          </DetailRow>
+                          <DetailRow label="Amount">
+                            <InlineNumberInput value={f.amount || null} onSave={persist((v: number | null) => patchFee(f.id, { amount: v ?? 0 }))} min={0} format={money} placeholder="—" accessibilityLabel="Amount" />
+                          </DetailRow>
+                          <DetailRow label="VAT (%)">
+                            <InlineNumberInput value={f.vat} onSave={persist((v: number | null) => patchFee(f.id, { vat: v }))} min={0} placeholder="—" accessibilityLabel="VAT percent" />
+                          </DetailRow>
+                          <DetailRow label="Due" {...dueAnnotation(f.due, !f.paid)}>
+                            <InlineDatePicker value={f.due} onSave={persist((v: string) => patchFee(f.id, { due: v }))} locale="en-US" placeholder="Set a due date…" accessibilityLabel="Fee due date" />
+                          </DetailRow>
+                          <DetailRow label="Invoice no" description="The party's invoice or debit note">
+                            <InlineTextInput value={f.invoiceNo} onSave={persist((v: string) => patchFee(f.id, { invoiceNo: v }))} placeholder="Add the reference…" accessibilityLabel="Invoice number" />
+                          </DetailRow>
+                          {/* THE FILE, ON THE ROW THAT OWES IT — the shape a
+                              payables desk actually works in: a table of
+                              charges, each row expanding to the document that
+                              justifies it. The register cell above can only
+                              MARK whether a document is held; the managing
+                              happens here.
+
+                              `multiple`, because a supplier invoice arrives as
+                              one PDF or as three scanned pages, and the second
+                              page must not replace the first.
+
+                              `blockedReason` when no number has been claimed:
+                              there is nothing to file the scan AGAINST yet, and
+                              a sentence naming that act beats a disabled button
+                              that only says no. */}
+                          <DetailRow label="Supplier original">
+                            <InlineFiles
+                              files={f.docs}
+                              onAdd={(picked) => patchFee(f.id, { docs: [...f.docs, ...picked.map(asDisplayFile)] })}
+                              onRemove={(doc) => patchFee(f.id, { docs: f.docs.filter((d) => d.id !== doc.id) })}
+                              addLabel="Attach original"
+                              addMoreLabel="Add page"
+                              accept="application/pdf,image/*"
+                              blockedReason={f.invoiceNo.trim() === "" ? "Enter the invoice number first — the scan is filed against it." : undefined}
+                            />
+                          </DetailRow>
+                          <DetailRow label="Status">
+                            <InlineSelect
+                              value={f.paid ? "paid" : "unpaid"}
+                              options={[{ value: "unpaid", label: "Unpaid" }, { value: "paid", label: "Paid" }]}
+                              onSave={persist((v: string) => patchFee(f.id, { paid: v === "paid" }))}
+                              accessibilityLabel="Paid status"
+                            />
+                          </DetailRow>
+                          <DetailRow label="Note">
+                            <InlineTextInput value={f.note} onSave={persist((v: string) => patchFee(f.id, { note: v }))} placeholder="Add a note…" accessibilityLabel="Fee note" />
+                          </DetailRow>
+                        </DetailTable>
+                        {/* The destructive verb, LEFT — the peek footer's convention.
+                            Solid `danger` per composition rule 9; no trash glyph,
+                            because "Remove fee" already names the object the icon
+                            was only decorating.
+
+                            NO Divider. Every hairline a `Table` draws is full-bleed,
+                            so one inset by ROW_GUTTER puts two hairline lengths in
+                            the same vertical run — and it repeats what the expanded
+                            row's wash already says. The row wrapper IS required: a
+                            `Button` alone in a column View stretches full width. */}
+                        <View style={{ flexDirection: "row" }}>
+                          <Button title="Remove fee" color="danger" onPress={() => deleteFee(f)} />
+                        </View>
+                      </View>
+                    }
+                  >
+                    {/* IDENTITY over its PARTY — `tpl_item_list`'s customer cell
+                        exactly: the thing you scan for on line 1, what qualifies
+                        it on line 2, in one cell rather than two columns. */}
+                    <TableCell>
+                      <View style={{ gap: 2 }}>
+                        <Text size="sm" weight="medium" leading="tight" numberOfLines={1}>{f.name || "—"}</Text>
+                        {/* Body size: the subject carries `medium`, which is what
+                            makes this a pair rather than two peers. */}
+                        <Text size="sm" color="muted" leading="tight" numberOfLines={1}>
+                          {f.party || (f.direction === "charge" ? "Charge" : "Cost")}
+                        </Text>
+                      </View>
+                    </TableCell>
+                    {/* AMOUNT over its PAYMENT state — the register's fee cell,
+                        same stack, same rungs. The state qualifies the number it
+                        sits under, so it needs no column and no repeated label. */}
+                    <TableCell>
+                      <View style={{ gap: 2, alignItems: "flex-end" }}>
+                        <Text size="sm" tabular numberOfLines={1}>{formatMoney(f.amount)}</Text>
+                        <Text size="xs" tabular numberOfLines={1} color={st.danger ? "danger" : "muted"}>{st.text}</Text>
+                      </View>
+                    </TableCell>
+                    {/* THE DOCUMENT, with a column of its own at last.
+                        Held: a clip + the number, pressable to preview. Claimed
+                        but not arrived: the number in WARNING tone — the fee
+                        cannot be paid, and that now reads in the column the fact
+                        belongs to instead of borrowing the money's state. Never
+                        claimed (paid in cash on the spot): an em dash, because nothing is
+                        owed and a permanent warning on every such row trains the
+                        eye straight past the column. */}
+                    <TableCell>
+                      {f.invoiceNo.trim() === "" ? (
+                        <Text size="sm" color="muted">—</Text>
+                      ) : f.docs.length === 0 ? (
+                        <Text size="sm" color="muted" numberOfLines={1}>{f.invoiceNo}</Text>
+                      ) : (
+                        <Pressable
+                          onPress={() => setPreview({ files: f.docs, index: 0 })}
+                          accessibilityRole="button"
+                          accessibilityLabel={`Open invoice ${f.invoiceNo}`}
+                          style={{ flexDirection: "row", alignItems: "center", gap: 6 }}
+                        >
+                          <FileBadge mimeType={f.docs[0].mimeType} size={22} />
+                          <TextLink size="sm">{f.invoiceNo}</TextLink>
+                        </Pressable>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </Table>
+          )}
+        </Section>
+
+        {/* BILLING — invoice documents on the record, in the inline vocabulary.
+            The issue action lives at each band's end. In `tpl_record` a
+            record-level premise (no customer, no valid tax ID) also reads here
+            as ONE section-scoped Callout, because the action-gating law is: a
+            not-ready CTA is DISABLED and a PROBLEM reads as a co-located
+            Callout at its scope, once. This page holds no customer, so the only
+            problems it can state are band-local — and those ride the CHARGE ROW
+            that has them (`warning` on the line missing its method), which is
+            both smaller than a callout and more precise than one: it names the
+            offender instead of counting offenders. Never prose beside a CTA. */}
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Each invoice owns its charge lines — a charge never lives apart from the document it bills on.">Billing</SectionHeadingTitle>
+          </SectionHeading>
+
+          {/* EVERYTHING VISIBLE, and the chrome is what shrinks.
+              Three attempts landed here. Inline BANDS were "spread" — but the
+              spread was never the data: four charge lines across three invoices
+              is nothing. Each band carried a `SubsectionHeading`, its own
+              callout and its own action row, so the CHROME was three times the
+              content. A register then hid those four lines behind three
+              expansions, which trades a real fault for a worse one: you can no
+              longer see what you are paying for.
+              So the lines all stay, and each invoice costs ONE line of chrome —
+              its name, its total, its act. No heading rung, no band callout, no
+              separate action row. */}
+          <SubsectionStack>
+            {invoices.map((inv) => {
+              const missing = missingMethods(inv);
+              const total = invoiceTotal(inv);
+              const ready = total > 0 && missing.length === 0;
+              return (
+                <Subsection key={inv.key}>
+                  {/* the invoice's ONE line of chrome: what it is, what it comes
+                      to, and its reference once issued. No indent under it — the
+                      lead line's weight and its total already mark the group, and
+                      the `SubsectionStack` beat separates one from the next, so an
+                      indent would only push every charge off the page's left edge
+                      for nothing. */}
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                    <Text size="sm" weight="medium" style={{ flex: 1 }} numberOfLines={1}>{inv.title}</Text>
+                    <Text size="sm" tabular color={total > 0 ? "default" : "muted"}>{total > 0 ? money(total) : "—"}</Text>
+                    {/* HELD OPEN whether or not this invoice has been issued.
+                        The reference is a trailing verb, and a trailing verb
+                        that shows on some rows and not others drags the figure
+                        beside it: three invoice totals then sit on three edges
+                        and stop sharing the column the `Ledger` below closes.
+                        Same law as the fixed action slot in `ChargeLines`. */}
+                    <View style={{ width: 64, alignItems: "flex-start" }}>
+                      {inv.ref ? (
+                        <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
+                      ) : null}
+                    </View>
+                  </View>
+                  <DetailTable labelWidth={150} minValueWidth={320}>
+                    {inv.charges.map((c) => (
+                      <DetailRow
+                        key={c.key}
+                        label={c.label}
+                        warning={c.amount > 0 && !c.method ? "Choose how this was paid" : undefined}
+                      >
+                        <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 4 }}>
+                          <View style={{ flexGrow: 1, flexBasis: 150 }}>
+                            <InlineNumberInput
+                              value={c.amount || null}
+                              onSave={(v) => saveCharge(inv.key, c.key, { amount: v ?? 0 })}
+                              min={0}
+                              format={money}
+                              placeholder="—"
+                              accessibilityLabel={`Amount for ${c.label}`}
+                              /* The list price, one tap, ON the field it fills —
+                                 and this is the fork from `ChargeLines`, which
+                                 puts the same verb BESIDE the field. The
+                                 discriminator is what the field sits in: here it
+                                 is a form row whose value column grows, so a verb
+                                 on the field's own surface moves nothing. In a
+                                 right-aligned money COLUMN it would eat the
+                                 field's width and slide the figure off the
+                                 column its neighbours are on. */
+                              actions={
+                                <InlineButton
+                                  title={money(c.standard)}
+                                  accessibilityLabel={`Use the standard ${c.label} price`}
+                                  disabled={c.amount > 0 || c.standard <= 0}
+                                  onPress={() => saveCharge(inv.key, c.key, { amount: c.standard })}
+                                />
+                              }
+                            />
+                          </View>
+                          <View style={{ flexGrow: 1, flexBasis: 140, maxWidth: 160 }}>
+                            <InlineSelect
+                              value={c.method === "" ? null : c.method}
+                              onSave={(m) => saveCharge(inv.key, c.key, { method: m })}
+                              options={METHODS}
+                              placeholder="How paid…"
+                              disabled={c.amount <= 0}
+                              accessibilityLabel={`Payment method for ${c.label}`}
+                            />
+                          </View>
+                        </View>
+                      </DetailRow>
+                    ))}
+                    {/* AFTER the lines it bills — a committing act goes where its
+                        effect lands, which is the end of what it commits, never
+                        above it. On the control column like every other CTA on
+                        the page (the form-action alignment law). */}
+                    <DetailRow label="">
+                      <View style={{ flexDirection: "row" }}>
+                        <Button
+                          title={inv.ref ? "Re-issue" : "Issue invoice"}
+                          color={inv.ref ? "secondary" : "primary"}
+                          disabled={!ready}
+                          onPress={() => setConfirmIssueKey(inv.key)}
+                        />
+                      </View>
+                    </DetailRow>
+                  </DetailTable>
+                </Subsection>
+              );
+            })}
+          </SubsectionStack>
+
+          {/* THE CLOSING STATEMENT — `Ledger`, the money grammar, and the answer to
+              the one question the bands above cannot give: what does this record come
+              to, and how much of it has arrived. Each invoice states its own total on
+              its lead line, but three totals down the page are three facts the reader
+              has to add up, and "is anything still owed" was nowhere on the section.
+
+              It is a STATEMENT, not another band: no `Subsection`, no heading rung. It
+              closes the invoices, so it sits directly under them.
+
+              THREE sides, which is what makes the total state arithmetic rather than a
+              difference: billed, less credited, less received. Money coming back is
+              NEGATIVE (the component renders "− ") and `success`-toned, because a
+              receipt and a credit are both the good outcome; `zeroLabel` gives a settled
+              record "Paid in full" instead of a proud zero.
+
+              The DEPOSIT is deliberately absent. It is refundable — never part of the
+              total to collect — so folding it in would make the closing figure answer a
+              different question than the one it is labelled with. A ledger earns trust
+              by summing exactly what its label claims.
+
+              A row opens where there is something to open, and the two ways are not
+              interchangeable. `peek` floats an invoice's PARTICULARS — the charges behind
+              its one figure — and the lookup link lives INSIDE that popover, never beside
+              the trigger, because a button inside a button is invalid. `reference` is the
+              flat alternative for a row with nothing to expand: one charge IS its own
+              particulars, so Storage carries a trailing link instead of a door.
+
+              The `Adjustments` group holds ONE row and therefore no `total`: a sum over a
+              single line states the same fact twice, at two weights. That is the honest
+              fixture rather than a tidy one — real groups are built from data, so some
+              arrive with one row. */}
+          <Ledger formatValue={money}>
+            <LedgerGroup label="Invoiced" total={grandTotal}>
+              {invoices.map((inv) => {
+                /* NO meta on this side. It briefly carried "awaiting payment method",
+                   and that was `meta` doing two jobs: on the Received rows it holds a
+                   neutral QUALIFIER (how the money arrived), here it held a PROBLEM.
+                   Two unlike things in one treatment is what makes a caption read as
+                   inconsistent — the size was never the fault.
+                   The problem also had a home already: the charge row above carries
+                   `warning="Choose how this was paid"`, on the line with the editor that
+                   fixes it. A statement's job is the arithmetic, and the arithmetic
+                   already says it — `Outstanding` IS the unpaid money. Saying it again in
+                   weaker words adds a second voice for one fact. */
+                /* A door where there are PARTICULARS, and the count that decides it is the
+                   charges, not the priced ones. An invoice whose second line is unpriced is
+                   exactly the row whose figure looks too small for it, which is the question
+                   the popover answers — gating on `amount > 0` would hide the door precisely
+                   when it is most useful. */
+                return (
+                  <LedgerRow
+                    key={inv.key}
+                    label={inv.title}
+                    value={invoiceTotal(inv)}
+                    peek={inv.charges.length > 1 ? <InvoiceParticulars inv={inv} /> : undefined}
+                    reference={inv.ref ? { label: inv.ref, onPress: () => {} } : undefined}
+                  />
+                );
+              })}
+            </LedgerGroup>
+            <LedgerGroup label="Adjustments">
+              <LedgerRow label={CREDIT.label} meta={CREDIT.meta} value={-CREDIT.amount} tone="success" />
+            </LedgerGroup>
+            {received > 0 ? (
+              <LedgerGroup label="Received" total={-received}>
+                {receipts.map(({ inv, charge }) => (
+                  <LedgerRow
+                    key={`${inv.key}-${charge.key}`}
+                    label={charge.label}
+                    meta={METHODS.find((m) => m.value === charge.method)?.label}
+                    value={-charge.amount}
+                    tone="success"
+                  />
+                ))}
+              </LedgerGroup>
+            ) : null}
+            <LedgerTotal label="Outstanding" value={outstanding} tone={outstanding > 0 ? "danger" : "default"} zeroLabel="Paid in full" />
+          </Ledger>
+
+          {/* ONE action row for the section, on the control column. The deposit
+              is a field of the record, not a band of its own — its receipt is a
+              second act on the same row. */}
+          <DetailTable labelWidth={150} minValueWidth={320}>
+            <DetailRow label="Deposit" description="Refundable — never part of the total to collect">
+              <InlineNumberInput
+                value={deposit || null}
+                onSave={persist((v: number | null) => setDeposit(v ?? 0))}
+                min={0}
+                format={money}
+                placeholder="—"
+                accessibilityLabel="Deposit amount"
+                actions={<InlineButton title="Receipt" accessibilityLabel="Deposit receipt" disabled={deposit <= 0} onPress={() => Alert.alert("Deposit receipt", `Printing deposit receipt for ${formatMoney(deposit)}.`, [{ text: "OK" }])} />}
+              />
+            </DetailRow>
+            <DetailRow label="">
+              <View style={{ flexDirection: "row" }}>
+                <Button title="Print receipt" color="primary" disabled={grandTotal <= 0} onPress={printReceipt} />
+              </View>
+            </DetailRow>
+          </DetailTable>
+        </Section>
+
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Quantity × unit price derives the amount, and the amount is never typed. The arithmetic reads across one line and ends at the amount: hang the derived figure on a second line and every row doubles in height while the answer lands in no column, so the total below closes nothing.">
+              Priced lines
+            </SectionHeadingTitle>
+          </SectionHeading>
+          {/* `unitPriceActions` puts the standard rate one tap away, BESIDE the
+              field it fills — inside, the verb eats the field's width and the
+              figure slides left, so a row with a one-tap rate and a row without
+              stop sharing a column. */}
+          {pricedBand}
+        </Section>
+
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Omit the quantity and unit price and the AMOUNT becomes the editable figure — a fee agreed as one number rather than computed from a rate. A line's problem sits beside the control that fixes it, never as a callout for the whole band.">
+              Flat charges
+            </SectionHeadingTitle>
+          </SectionHeading>
+          {/* `extra` carries a second control that belongs to the charge itself
+              (how it was paid), so it rides the charge's own line instead of
+              living in a separate table.
+
+              A band formats its own money: this one is denominated in euro while
+              every other band on the page is in ₫, and neither has to know about
+              the other. */}
+          <ChargeLines
+            totalLabel="Invoice total"
+            total={(handling ?? 0) + (clearance ?? 0)}
+            formatMoney={eur}
+            action={
+              <Button
+                color="primary"
+                title="Issue invoice"
+                disabled={!handlingMethod}
+                onPress={() => Alert.alert("Issue invoice", `Issuing an invoice for ${eur((handling ?? 0) + (clearance ?? 0))}.`, [{ text: "OK" }])}
+              />
+            }
+          >
+            <ChargeLine
+              label="Handling"
+              amount={handling}
+              onAmountChange={setHandling}
+              amountActions={
+                <InlineButton
+                  title={eur(250)}
+                  accessibilityLabel="Use the standard handling price"
+                  disabled={(handling ?? 0) > 0}
+                  onPress={() => setHandling(250)}
+                />
+              }
+              warning={(handling ?? 0) > 0 && !handlingMethod ? "Choose how this was paid" : undefined}
+              extra={
+                <InlineSelect
+                  value={handlingMethod}
+                  onSave={setHandlingMethod}
+                  options={METHODS}
+                  placeholder="How paid…"
+                  disabled={(handling ?? 0) <= 0}
+                  accessibilityLabel="Payment method for handling"
+                />
+              }
+            />
+            <ChargeLine label="Customs clearance" amount={clearance} onAmountChange={setClearance} />
+          </ChargeLines>
+        </Section>
+
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="A band mixing a priced line with a flat one still lands every figure on ONE amount column, which is the whole reason the two shapes share a component rather than each app inventing its own row.">
+              Mixed kinds
+            </SectionHeadingTitle>
+          </SectionHeading>
+          <ChargeLines totalLabel="Total" total={(mixedQty ?? 0) * (mixedRate ?? 0) + (shortfall ?? 0)} formatMoney={money}>
+            <ChargeLine label="Delivery runs" quantity={mixedQty} unitPrice={mixedRate} onQuantityChange={setMixedQty} onUnitPriceChange={setMixedRate} />
+            <ChargeLine label="Shortfall recovered" amount={shortfall} onAmountChange={setShortfall} />
+          </ChargeLines>
+        </Section>
+
+        {/* ITS OWN SECTION, not a second band under the one above. A band closes
+            on its total, so the next band's first line arriving 8px under that
+            total reads as another charge in the same band — two bands stacked
+            inside one heading have nothing between them that says where one
+            stops. The section beat and the heading are what separate them. */}
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Locked turns the editors into values once the money is collected — the band stops being a form and becomes the record of what was charged, with no verb slot drawn.">
+              Settled
+            </SectionHeadingTitle>
+          </SectionHeading>
+          <ChargeLines totalLabel="Collected" total={190_000} formatMoney={money}>
+            <ChargeLine label="Delivery runs" quantity={40} unitPrice={4_000} locked />
+            <ChargeLine label="Site cleaning" quantity={1} unitPrice={30_000} locked />
+          </ChargeLines>
+        </Section>
+
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="An empty band is a real state, not an error: a record that has not been priced. The total still closes the column, so the shape a reader learns does not change the moment there is data.">
+              Nothing priced yet
+            </SectionHeadingTitle>
+          </SectionHeading>
+          <ChargeLines
+            totalLabel="Total"
+            total={0}
+            formatMoney={money}
+            empty={<EmptyState compact message="Nothing charged on this record" hint="Add the first charge to price it against the rate card." />}
+          />
+        </Section>
+
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Below the band's fork width the name takes its own line and the arithmetic sits under it, still ending on the amount column. That is a two-line row ON PURPOSE, which is a different thing from a derived value that fell off the end of a one-line row — the tell is that the amounts still share an edge with the total.">
+              The narrow fork
+            </SectionHeadingTitle>
+          </SectionHeading>
+          {/* The fork is measured on the BAND's own container, never the window:
+              this shape lives in drawers as often as on pages. Which is why the
+              box below is a fixed 360 — it is the SAME band as the priced
+              section above, same state, same handlers, rendered in a narrower
+              container. Edit either and both move. */}
+          <View style={{ width: 360 }}>{pricedBand}</View>
+        </Section>
+      </SectionStack>
+
+      {/* issuing an e-invoice is irreversible — confirm in a Dialog */}
+      <Dialog width={460} open={confirmIssue !== null} onOpenChange={(o) => { if (!o) setConfirmIssueKey(null); }}>
+        <DialogHeader>
+          <DialogHeaderTitle>{confirmIssue?.ref ? "Re-issue invoice?" : "Issue e-invoice?"}</DialogHeaderTitle>
+        </DialogHeader>
+        <View style={{ paddingHorizontal: 24, paddingVertical: 12 }}>
+          <Callout tone="warning">
+            <CalloutText>
+              {confirmIssue
+                ? confirmIssue.ref
+                  ? `Re-issue "${confirmIssue.title}" (${formatMoney(invoiceTotal(confirmIssue))}) with the current charges. A NEW lookup code replaces ${confirmIssue.ref}; this can't be undone.`
+                  : `Issue a real e-invoice for "${confirmIssue.title}" (${formatMoney(invoiceTotal(confirmIssue))}) to the provider. This writes a lookup code to the record and can't be undone.`
+                : ""}
+            </CalloutText>
+          </Callout>
+        </View>
+        <DialogFooter>
+          <Button title="Cancel" color="secondary" onPress={() => setConfirmIssueKey(null)} />
+          <Button title="Issue" color="primary" onPress={() => confirmIssue && issue(confirmIssue)} />
+        </DialogFooter>
+      </Dialog>
+
+      {/* Mounted only while open — its per-file hooks want a stable list. */}
+      {preview ? (
+        <FileGalleryModal
+          files={preview.files}
+          activeIndex={preview.index}
+          onIndexChange={(i) => setPreview((p) => (i == null || !p ? null : { ...p, index: i }))}
+        />
+      ) : null}
+    </PageContent>
+  );
+}