@lotics/ui 7.19.3 → 9.0.0

package/src/use_section_nav.test.ts

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { useSectionNav } from "./use_section_nav";
+import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from "react-native";
+
+const layoutAt = (y: number) => ({ nativeEvent: { layout: { y } } }) as LayoutChangeEvent;
+const scrollTo = (y: number) => ({ nativeEvent: { contentOffset: { y } } }) as NativeSyntheticEvent<NativeScrollEvent>;
+
+function mounted() {
+  const hook = renderHook(() => useSectionNav(["a", "b", "c"] as const));
+  act(() => {
+    hook.result.current.register("a")(layoutAt(0));
+    hook.result.current.register("b")(layoutAt(400));
+    hook.result.current.register("c")(layoutAt(900));
+  });
+  return hook;
+}
+
+describe("useSectionNav", () => {
+  it("starts on the first key", () => {
+    const { result } = renderHook(() => useSectionNav(["a", "b"] as const));
+    expect(result.current.activeKey).toBe("a");
+  });
+
+  it("activates the last section whose top passed the viewport edge (+80 threshold)", () => {
+    const { result } = mounted();
+    act(() => result.current.onScroll(scrollTo(0)));
+    expect(result.current.activeKey).toBe("a");
+    // 321 + 80 threshold = 401 >= b's 400 → b is active
+    act(() => result.current.onScroll(scrollTo(321)));
+    expect(result.current.activeKey).toBe("b");
+    // just short of the threshold stays on a
+    act(() => result.current.onScroll(scrollTo(319)));
+    expect(result.current.activeKey).toBe("a");
+    act(() => result.current.onScroll(scrollTo(2000)));
+    expect(result.current.activeKey).toBe("c");
+  });
+
+  it("keys walk in page order — a later key with a smaller offset never wins", () => {
+    const { result } = renderHook(() => useSectionNav(["a", "b"] as const));
+    act(() => {
+      result.current.register("a")(layoutAt(500));
+      result.current.register("b")(layoutAt(100));
+    });
+    act(() => result.current.onScroll(scrollTo(600)));
+    // both tops passed; the LAST key in page order wins
+    expect(result.current.activeKey).toBe("b");
+  });
+
+  it("ignores keys that never registered", () => {
+    const { result } = renderHook(() => useSectionNav(["a", "b", "c"] as const));
+    act(() => result.current.register("a")(layoutAt(0)));
+    act(() => result.current.onScroll(scrollTo(999)));
+    expect(result.current.activeKey).toBe("a");
+  });
+
+  it("jumpTo scrolls to the section's offset minus the 12px breathing room, clamped at 0", () => {
+    const { result } = mounted();
+    const calls: { y: number }[] = [];
+    (result.current.scrollRef as { current: unknown }).current = {
+      scrollTo: (opts: { y: number }) => calls.push(opts),
+    };
+    act(() => result.current.jumpTo("b"));
+    expect(calls[0]?.y).toBe(388);
+    act(() => result.current.jumpTo("a"));
+    expect(calls[1]?.y).toBe(0);
+  });
+});

package/src/use_section_nav.ts

@@ -0,0 +1,59 @@
+import { RefObject, useRef, useState } from "react";
+import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView } from "react-native";
+
+export interface SectionNavHandle<K extends string> {
+  /** Attach to the content `ScrollView` (with `onScroll` + `scrollEventThrottle={16}`). */
+  scrollRef: RefObject<ScrollView | null>;
+  /** The section the scroll currently sits in — drives the rail's `selected`. */
+  activeKey: K;
+  /** `onLayout={register(key)}` on each section wrapper. The wrapper must be a
+   *  DIRECT child of the ScrollView content (layout.y is content-relative). */
+  register: (key: K) => (e: LayoutChangeEvent) => void;
+  /** Scroll to a section — the rail item's `onPress`. */
+  jumpTo: (key: K) => void;
+  onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+}
+
+/**
+ * Scroll-spy for a LONG record surface with a left outline rail: one scrolling
+ * page whose sections register their offsets, a rail of `MenuButton`s that
+ * jumps to them, and an `activeKey` that follows the scroll (the section whose
+ * top has passed the viewport edge is the active one).
+ *
+ *   const nav = useSectionNav(["details", "gatein", "gateout"] as const);
+ *   <MenuButton title="Gate in" selected={nav.activeKey === "gatein"}
+ *               onPress={() => nav.jumpTo("gatein")} />
+ *   <ScrollView ref={nav.scrollRef} onScroll={nav.onScroll} scrollEventThrottle={16}>
+ *     <View onLayout={nav.register("gatein")}>…</View>
+ *
+ * Pass the keys in PAGE ORDER — the spy walks them top-down. Hide the rail on
+ * narrow containers (the page still scrolls; the rail is a wide-screen aid).
+ *
+ * Contract: every key's section stays MOUNTED (an unmounted section leaves its
+ * last offset registered — conditional sections belong inside an always-mounted
+ * wrapper that carries the `onLayout`), and offsets refresh only when a
+ * section's own layout changes — react-native-web's `onLayout` won't refire on
+ * a pure position shift, so content above the sections should settle before
+ * precision matters.
+ */
+export function useSectionNav<K extends string>(keys: readonly [K, ...K[]]): SectionNavHandle<K> {
+  const scrollRef = useRef<ScrollView>(null);
+  const sectionY = useRef<Partial<Record<K, number>>>({});
+  const [activeKey, setActiveKey] = useState<K>(keys[0]);
+  const register = (key: K) => (e: LayoutChangeEvent) => {
+    sectionY.current[key] = e.nativeEvent.layout.y;
+  };
+  const jumpTo = (key: K) => {
+    scrollRef.current?.scrollTo({ y: Math.max(0, (sectionY.current[key] ?? 0) - 12), animated: true });
+  };
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const y = e.nativeEvent.contentOffset.y + 80;
+    let cur: K = keys[0];
+    for (const k of keys) {
+      const sy = sectionY.current[k];
+      if (sy != null && sy <= y) cur = k;
+    }
+    if (cur !== activeKey) setActiveKey(cur);
+  };
+  return { scrollRef, activeKey, register, jumpTo, onScroll };
+}

package/examples/tpl_assistant.tsx

@@ -1,174 +0,0 @@
-import { useRef, useState } from "react";
-import { ScrollView, View } from "react-native";
-import { colors } from "@lotics/ui/colors";
-import { Text } from "@lotics/ui/text";
-import { DotsIndicator } from "@lotics/ui/dots_indicator";
-import { Composer } from "@lotics/ui/composer";
-import { ChangeReview, ChangeReviewActions, ChangeDiff, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · AI assistant — a CHAT workflow, a different shape from the design
-// canvas: a conversation where the agent's answer carries SUGGESTED EDITS the
-// human approves or rejects ONE BY ONE (a before→after diff per change, ✓/✕),
-// then applies only the accepted set. The review-each-edit pattern — an AI
-// copilot proposing changes to a record, never committing on its own. All mock.
-// ─────────────────────────────────────────────────────────────────────────────
-
-/** One field's before→after edit — the assistant's proposals, reviewed 1-by-1. */
-interface EditChange {
-  label: string;
-  before?: string;
-  after: string;
-}
-
-interface ChatMsg {
-  id: string;
-  role: "user" | "agent";
-  text?: string;
-  /** An agent turn may carry suggested edits to review 1-by-1. */
-  changes?: EditChange[];
-  applied?: boolean;
-  typing?: boolean;
-}
-
-const SUGGESTED: EditChange[] = [
-  { label: "Company", before: "acme packaging co", after: "Acme Packaging Co." },
-  { label: "Phone", before: "0901234567", after: "+84 90 123 4567" },
-  { label: "Email", before: "SALES@ACME.VN", after: "sales@acme.vn" },
-  { label: "Industry", after: "Packaging" },
-];
-
-export function TplAssistant() {
-  const idRef = useRef(1);
-  const nextId = () => `m${idRef.current++}`;
-  const [messages, setMessages] = useState<ChatMsg[]>([
-    { id: "m0", role: "agent", text: "Paste a record or ask me to tidy one up — I'll propose changes you can approve one by one." },
-  ]);
-  const [decisions, setDecisions] = useState<Record<string, ChangeReviewItemStatus>>({});
-  const [prompt, setPrompt] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [proposed, setProposed] = useState(false);
-
-  const send = (text: string) => {
-    setPrompt("");
-    const userMsg: ChatMsg = { id: nextId(), role: "user", text };
-    const typingId = nextId();
-    setMessages((m) => [...m, userMsg, { id: typingId, role: "agent", typing: true }]);
-    setBusy(true);
-    setTimeout(() => {
-      setBusy(false);
-      setMessages((m) =>
-        m.map((msg) =>
-          msg.id === typingId
-            ? proposed
-              ? { id: msg.id, role: "agent", text: "Done — anything else to adjust?" }
-              : { id: msg.id, role: "agent", text: "Here's what I'd standardize on this contact. Review each:", changes: SUGGESTED.map((c) => ({ ...c, status: "pending" })) }
-            : msg,
-        ),
-      );
-      setProposed(true);
-    }, 1300);
-  };
-
-  const decide = (msgId: string, index: number, status: ChangeReviewItemStatus) => {
-    setDecisions((d) => ({ ...d, [`${msgId}:${index}`]: status }));
-  };
-
-  const applyMsg = (msgId: string) => {
-    const msg = messages.find((m) => m.id === msgId);
-    const n = (msg?.changes ?? []).filter((_, i) => decisions[`${msgId}:${i}`] === "accepted").length;
-    setMessages((m) => [
-      ...m.map((x) => (x.id === msgId ? { ...x, applied: true } : x)),
-      { id: nextId(), role: "agent", text: `Applied ${n} change${n === 1 ? "" : "s"} to the contact.` },
-    ]);
-  };
-
-  return (
-    <View style={{ flex: 1, backgroundColor: colors.white }}>
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: colors.zinc[200], backgroundColor: colors.background }}>
-        <View style={{ width: 24, height: 24, borderRadius: 7, alignItems: "center", justifyContent: "center", backgroundColor: colors.zinc[100] }}>
-          <View style={{ width: 4, height: 4, borderRadius: 2, backgroundColor: colors.zinc[900] }} />
-        </View>
-        <Text size="sm" weight="semibold">Record assistant</Text>
-      </View>
-
-      <ScrollView contentContainerStyle={{ padding: 20, paddingBottom: 140, gap: 16, maxWidth: 760, width: "100%", alignSelf: "center" }}>
-        {messages.map((m) => {
-          if (m.role === "user") {
-            return (
-              <View key={m.id} style={{ alignItems: "flex-end" }}>
-                <View style={{ maxWidth: "82%", backgroundColor: colors.zinc[900], borderRadius: 14, paddingHorizontal: 14, paddingVertical: 10 }}>
-                  <Text size="sm" color="inverted">{m.text}</Text>
-                </View>
-              </View>
-            );
-          }
-          const active = m.changes != null && !m.applied;
-          return (
-            <View key={m.id} style={{ flexDirection: "row", gap: 10, alignItems: "flex-start" }}>
-              <View style={{ width: 26, height: 26, borderRadius: 8, alignItems: "center", justifyContent: "center", backgroundColor: colors.zinc[100], marginTop: 1 }}>
-                <View style={{ width: 4, height: 4, borderRadius: 2, backgroundColor: colors.zinc[900] }} />
-              </View>
-              <View style={{ flex: 1, gap: 10 }}>
-                {m.typing ? (
-                  <View style={{ paddingVertical: 6 }}><DotsIndicator size={6} color={colors.zinc[400]} /></View>
-                ) : null}
-                {m.text ? <Text size="sm">{m.text}</Text> : null}
-                {m.changes ? (
-                  <View style={{ gap: 14 }}>
-                    <ChangeReview
-                      items={m.changes}
-                      getKey={(c, i) => `${m.id}:${i}`}
-                      statusOf={(_, i) => decisions[`${m.id}:${i}`] ?? "pending"}
-                      renderItem={(c) => (
-                        <>
-                          <Text size="xs" color="muted" weight="medium">{c.label}</Text>
-                          <ChangeDiff before={c.before} after={c.after} />
-                        </>
-                      )}
-                      renderSummary={(c, kept) => (
-                        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                          <Text size="sm" weight="medium" numberOfLines={1}>{c.label}</Text>
-                          <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={[{ flex: 1 }, kept ? undefined : { textDecorationLine: "line-through" }]}>{kept ? c.after : (c.before ?? c.after)}</Text>
-                        </View>
-                      )}
-                      status={m.applied ? "applied" : "open"}
-                      onAcceptItem={active ? (i) => decide(m.id, i, "accepted") : undefined}
-                      onRejectItem={active ? (i) => decide(m.id, i, "rejected") : undefined}
-                      onUndoItem={active ? (i) => setDecisions((d) => { const n = { ...d }; delete n[`${m.id}:${i}`]; return n; }) : undefined}
-                    />
-                    {/* Inline (no dialog) — the commit bar sits under the list behind a divider. */}
-                    {active && !m.applied ? (
-                      <View style={{ borderTopWidth: 1, borderTopColor: colors.zinc[200], paddingTop: 14, flexDirection: "row" }}>
-                        <ChangeReviewActions
-                          items={m.changes}
-                          statusOf={(_, i) => decisions[`${m.id}:${i}`] ?? "pending"}
-                          applyLabel="Apply accepted"
-                          onAcceptItem={(i) => decide(m.id, i, "accepted")}
-                          onApply={() => applyMsg(m.id)}
-                          onDiscard={() => setMessages((ms) => ms.map((x) => (x.id === m.id ? { ...x, applied: true } : x)))}
-                        />
-                      </View>
-                    ) : null}
-                  </View>
-                ) : null}
-              </View>
-            </View>
-          );
-        })}
-      </ScrollView>
-
-      <View style={{ position: "absolute", left: 0, right: 0, bottom: 20, alignItems: "center", paddingHorizontal: 16 }}>
-        <View style={{ width: "100%", maxWidth: 720 }}>
-          <Composer
-            value={prompt}
-            onChangeText={setPrompt}
-            onSend={send}
-            disabled={busy}
-            placeholder={proposed ? "Ask for another change…" : "Try: “Tidy up this contact”"}
-          />
-        </View>
-      </View>
-    </View>
-  );
-}

package/examples/tpl_billing.tsx

@@ -1,344 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { Button } from "@lotics/ui/button";
-import { Card, CardBody, CardHeader, CardHeaderMeta, CardHeaderTitle } from "@lotics/ui/card";
-import { Badge } from "@lotics/ui/badge";
-import { Link } from "@lotics/ui/link";
-import { Icon } from "@lotics/ui/icon";
-import { Divider } from "@lotics/ui/divider";
-import { NumberInput } from "@lotics/ui/number_input";
-import { Picker } from "@lotics/ui/picker";
-import type { PickerOption } from "@lotics/ui/picker";
-import { Callout, CalloutText } from "@lotics/ui/callout";
-import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
-import { Alert } from "@lotics/ui/alert";
-import { formatMoney } from "@lotics/ui/format_money";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Billing & invoicing — the charges→invoice→collect flow as ONE
-// banded card, not a stack of disconnected cards. It's a single document, so it
-// reads as one: the bill-to, each invoice, the collect total, and the deposit
-// are BANDS separated by hairline Dividers. The INVOICE DOCUMENT is the unit —
-// each band is anchored by its own title + status badge and owns its editable
-// charge lines (amount + how it's paid), its live total, and its issue action,
-// so a charge never lives apart from the document it bills on. Issuing a real
-// e-invoice is irreversible and needs a bill-to tax ID, so it's gated inline
-// (never a dead end) and confirmed in a Dialog. A refundable DEPOSIT is its own
-// (tinted) band — collected separately, never folded into the total due.
-// ─────────────────────────────────────────────────────────────────────────────
-
-type Method = "cash" | "transfer" | "card";
-const METHODS: PickerOption<Method>[] = [
-  { value: "cash", label: "Cash" },
-  { value: "transfer", label: "Bank transfer" },
-  { value: "card", label: "Card" },
-];
-
-interface Charge {
-  key: string;
-  label: string;
-  /** The expected list price — offered as a one-tap fill 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 INITIAL: Invoice[] = [
-  {
-    key: "service",
-    title: "Service",
-    ref: "",
-    charges: [
-      { key: "labor", label: "Labor", standard: 1_200_000, amount: 1_200_000, method: "cash" },
-      { key: "parts", label: "Parts", standard: 0, amount: 0, method: "" },
-    ],
-  },
-  {
-    key: "inspection",
-    title: "Inspection",
-    ref: "",
-    charges: [{ key: "insp", label: "Inspection fee", standard: 150_000, amount: 150_000, method: "" }],
-  },
-  {
-    key: "disposal",
-    title: "Disposal",
-    ref: "INV-2026-0414",
-    charges: [{ key: "disp", label: "Disposal fee", standard: 80_000, amount: 80_000, method: "transfer" }],
-  },
-];
-
-type Status = "none" | "draft" | "issued";
-const invoiceTotal = (inv: Invoice) => inv.charges.reduce((s, c) => s + c.amount, 0);
-const invoiceStatus = (inv: Invoice): Status => (inv.ref ? "issued" : invoiceTotal(inv) > 0 ? "draft" : "none");
-const missingMethods = (inv: Invoice) => inv.charges.filter((c) => c.amount > 0 && !c.method);
-
-/** One charge: label, an amount that reads blank until entered (a one-tap
- *  Standard fill + "Set 0" while unset), and the payment method — which turns
- *  required the moment the line carries an amount. */
-function ChargeLine({
-  charge, onAmount, onMethod, disabled,
-}: {
-  charge: Charge;
-  onAmount: (v: number) => void;
-  onMethod: (m: Method) => void;
-  disabled: boolean;
-}) {
-  const unset = charge.amount <= 0;
-  const needsMethod = charge.amount > 0 && !charge.method;
-  return (
-    <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 10, flexWrap: "wrap" }}>
-      <Text size="sm" color="muted" style={{ width: 116, paddingTop: 10 }}>{charge.label}</Text>
-      <View style={{ flexGrow: 1, flexBasis: 130, gap: 4 }}>
-        <NumberInput
-          value={unset ? null : charge.amount}
-          onValueChange={(v) => onAmount(v ?? 0)}
-          min={0}
-          disabled={disabled}
-          accessibilityLabel={`${charge.label} amount`}
-        />
-        {unset && !disabled ? (
-          <View style={{ flexDirection: "row", gap: 8, flexWrap: "wrap" }}>
-            {charge.standard > 0 ? (
-              <Button title={`Standard ${formatMoney(charge.standard)}`} color="secondary" onPress={() => onAmount(charge.standard)} />
-            ) : null}
-            <Button title="Set 0" color="secondary" onPress={() => onAmount(0)} />
-          </View>
-        ) : null}
-      </View>
-      <View style={{ flexBasis: 168, gap: 4 }}>
-        <Picker
-          options={METHODS}
-          value={charge.method || null}
-          onValueChange={onMethod}
-          placeholder="How paid…"
-          disabled={disabled || unset}
-          accessibilityLabel={`Payment method · ${charge.label}`}
-        />
-        {needsMethod ? <Text size="xs" color="danger">Choose a method</Text> : null}
-      </View>
-    </View>
-  );
-}
-
-/** One invoice document, rendered as a BAND inside the single billing card: a
- *  title + status header, its charge lines, and a total + issue row. The leading
- *  Divider sets it off from the band above without a second card. */
-function InvoiceBand({
-  inv, taxId, onAmount, onMethod, onIssue,
-}: {
-  inv: Invoice;
-  taxId: string;
-  onAmount: (chKey: string, v: number) => void;
-  onMethod: (chKey: string, m: Method) => void;
-  onIssue: (inv: Invoice) => void;
-}) {
-  const total = invoiceTotal(inv);
-  const status = invoiceStatus(inv);
-  const missing = missingMethods(inv);
-  const canIssue = total > 0 && missing.length === 0 && !!taxId;
-  const blockReason = !taxId ? "Add the customer's tax ID to issue." : missing.length ? "Choose a payment method for every charged line." : "";
-  return (
-    <>
-      <Divider />
-      <CardBody style={{ gap: 10 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-          <Text weight="semibold">{inv.title}</Text>
-          <View style={{ flex: 1 }} />
-          {status === "issued" ? (
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Badge variant="dot" label="Issued" color="emerald" />
-              <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
-            </View>
-          ) : status === "draft" ? (
-            <Badge variant="dot" label="Draft" color="amber" />
-          ) : (
-            <Badge variant="dot" label="Nothing to bill" color="zinc" />
-          )}
-        </View>
-        {inv.charges.map((c) => (
-          <ChargeLine
-            key={c.key}
-            charge={c}
-            disabled={status === "issued"}
-            onAmount={(v) => onAmount(c.key, v)}
-            onMethod={(m) => onMethod(c.key, m)}
-          />
-        ))}
-        {total > 0 ? (
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap", paddingTop: 2 }}>
-            <Text size="sm" color="muted" style={{ flex: 1 }}>
-              Total <Text weight="semibold" color="default" tabular>{formatMoney(total)}</Text>
-            </Text>
-            {status === "issued" ? (
-              <>
-                <Button title="Re-issue" color="secondary" disabled={!canIssue} onPress={() => onIssue(inv)} />
-              </>
-            ) : (
-              <Button title="Issue invoice" color="primary" disabled={!canIssue} onPress={() => onIssue(inv)} />
-            )}
-          </View>
-        ) : null}
-        {total > 0 && status !== "issued" && !canIssue ? <Text size="xs" color="muted">{blockReason}</Text> : null}
-      </CardBody>
-    </>
-  );
-}
-
-export function TplBilling() {
-  const [invoices, setInvoices] = useState<Invoice[]>(INITIAL);
-  // The bill-to: issuing an e-invoice needs a tax ID. Toggle it to see the gate.
-  const [taxId, setTaxId] = useState("0312456780");
-  const [deposit, setDeposit] = useState(0);
-  const [confirm, setConfirm] = useState<Invoice | null>(null);
-  const seq = useState(() => ({ n: 414 }))[0];
-
-  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)) },
-      ),
-    );
-
-  const grandTotal = invoices.reduce((s, inv) => s + invoiceTotal(inv), 0);
-  const allMissing = invoices.flatMap(missingMethods);
-  const issuedCount = invoices.filter((i) => invoiceStatus(i) === "issued").length;
-
-  const issue = (inv: Invoice) => {
-    seq.n += 1;
-    const ref = `INV-2026-${String(seq.n).padStart(4, "0")}`;
-    setInvoices((prev) => prev.map((x) => (x.key === inv.key ? { ...x, ref } : x)));
-    setConfirm(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" }]);
-  };
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 640, alignSelf: "center", gap: 16 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-          <Text size="xl" weight="semibold">Billing</Text>
-          <Badge label="Order #4821" color="zinc" />
-        </View>
-
-        {/* ONE banded card — bill-to · each invoice · collect · deposit */}
-        <Card style={{ padding: 0 }}>
-          <CardHeader>
-            <CardHeaderTitle info="One document: the bill-to, each invoice, the total, and the deposit are bands of the same card.">
-              Phí &amp; hóa đơn
-            </CardHeaderTitle>
-            <CardHeaderMeta>{formatMoney(grandTotal)}</CardHeaderMeta>
-          </CardHeader>
-
-          {/* bill-to band — issuing needs a tax ID; the toggle shows the gate */}
-          <CardBody>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
-              <Icon name="building-2" size={16} color={colors.zinc[500]} />
-              <Text weight="medium">Harbor Freight Lines</Text>
-              <Text size="sm" color="muted">·</Text>
-              {taxId ? (
-                <Text size="sm" color="muted" tabular>MST {taxId}</Text>
-              ) : (
-                <Text size="sm" color="danger">No tax ID — required to issue</Text>
-              )}
-              <View style={{ flex: 1 }} />
-              <Button title={taxId ? "Remove tax ID" : "Add tax ID"} color="muted" onPress={() => setTaxId((t) => (t ? "" : "0312456780"))} />
-            </View>
-          </CardBody>
-
-          {/* invoice bands */}
-          {invoices.map((inv) => (
-            <InvoiceBand
-              key={inv.key}
-              inv={inv}
-              taxId={taxId}
-              onAmount={(chKey, v) => patchCharge(inv.key, chKey, { amount: v })}
-              onMethod={(chKey, m) => patchCharge(inv.key, chKey, { method: m })}
-              onIssue={setConfirm}
-            />
-          ))}
-
-          {/* collect band */}
-          <Divider />
-          <CardBody style={{ gap: 10 }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Text weight="semibold" style={{ flex: 1 }}>Tổng thu</Text>
-              <Text weight="semibold" size="lg" tabular>{formatMoney(grandTotal)}</Text>
-            </View>
-            {allMissing.length > 0 ? (
-              <Callout tone="warning">
-                <CalloutText>
-                  {allMissing.length} charged {allMissing.length === 1 ? "line has" : "lines have"} no payment method — set them before printing the receipt.
-                </CalloutText>
-              </Callout>
-            ) : null}
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Text size="xs" color="muted" style={{ flex: 1 }}>{issuedCount} of {invoices.length} issued</Text>
-              <Button title="Print receipt" color="primary" disabled={grandTotal <= 0} onPress={printReceipt} />
-            </View>
-          </CardBody>
-
-          {/* deposit band — tinted + labelled separate, never part of the total */}
-          <Divider />
-          <CardBody style={{ backgroundColor: colors.white, gap: 8 }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Text weight="semibold">Deposit</Text>
-              <Badge label="Collected separately" color="zinc" />
-            </View>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
-              <Text size="sm" color="muted" style={{ width: 116 }}>Refundable</Text>
-              <View style={{ flexGrow: 1, flexBasis: 130 }}>
-                <NumberInput value={deposit || null} onValueChange={(v) => setDeposit(v ?? 0)} min={0} accessibilityLabel="Deposit amount" />
-              </View>
-              <Button
-                title="Deposit receipt"
-                color="secondary"
-                disabled={deposit <= 0}
-                onPress={() => Alert.alert("Deposit receipt", `Printing deposit receipt for ${formatMoney(deposit)}.`, [{ text: "OK" }])}
-              />
-            </View>
-          </CardBody>
-        </Card>
-      </View>
-
-      {/* issuing an e-invoice is irreversible — confirm in a Dialog (stage gate) */}
-      <Dialog width={460} open={confirm !== null} onOpenChange={(o) => { if (!o) setConfirm(null); }}>
-        <DialogHeader>
-          <DialogHeaderTitle>{confirm?.ref ? "Re-issue invoice?" : "Issue e-invoice?"}</DialogHeaderTitle>
-        </DialogHeader>
-        <View style={{ paddingHorizontal: 24, paddingVertical: 12 }}>
-          <Callout tone="warning">
-            <CalloutText>
-              {confirm
-                ? `Issue a real e-invoice for "${confirm.title}" (${formatMoney(invoiceTotal(confirm))}) 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={() => setConfirm(null)} />
-          <Button title="Issue" color="primary" onPress={() => confirm && issue(confirm)} />
-        </DialogFooter>
-      </Dialog>
-    </ScrollView>
-  );
-}