@lotics/ui 8.0.0 → 9.0.0

package/src/section_heading.tsx

@@ -2,6 +2,7 @@ import { View, type StyleProp, type ViewStyle } from "react-native";
 import { Text, type HeadingLevel } from "./text";
 import { Icon, type IconName } from "./icon";
 import { InfoPopover } from "./info_popover";
+import { useLoticsLocale } from "./locale";
 
 // The card-less section header — the bare-canvas sibling of `CardHeader`, built
 // the same compound way. A title (+ optional leading icon / description) on one
@@ -36,7 +37,12 @@ export interface SectionProps {
  *   </Section>
  */
 export function Section(props: SectionProps) {
-  return <View style={[{ gap: 10 }, props.style]}>{props.children}</View>;
+  // gap 12 spaces the heading from its body. Space BETWEEN sections belongs to
+  // the page column: flat record/form pages use `gap: 32` on the content column
+  // with a bare `Divider` BETWEEN sections (never under the heading — the
+  // heading belongs to its content; the hairline separates it from the LAST
+  // section).
+  return <View style={[{ gap: 12 }, props.style]}>{props.children}</View>;
 }
 
 export interface SectionHeadingProps {
@@ -58,26 +64,28 @@ export interface SectionHeadingTitleProps {
   icon?: IconName;
   /** Heading rank. Defaults to 2 — typical for page-level section titles. */
   level?: HeadingLevel;
-  /** Title weight. Defaults to `medium`; `semibold` (matching `CardHeaderTitle`)
-   * for denser surfaces — a side panel, a stacked group list — where `medium`
-   * blends into the body rows. */
+  /** Title weight. Defaults to `semibold` — a section title must separate from
+   * the body rows at a glance (medium blends in; it remains as an opt-down for
+   * a surface where the heading competes with a stronger band above it). */
   weight?: "medium" | "semibold";
   /** An ⓘ popover after the title — a short "what this is / where it came from"
    * gloss, mirroring `CardHeaderTitle`'s `info`. */
   info?: string;
 }
 
-/** The title block — grows to push any sibling actions to the right edge. */
+/** The title block — lg semibold (a section must announce itself; md blends
+ * into control labels) + an optional muted `description` line. Grows to push
+ * any sibling actions to the right edge. */
 export function SectionHeadingTitle(props: SectionHeadingTitleProps) {
-  const { children, description, icon, level = 2, weight = "medium", info } = props;
+  const { children, description, icon, level = 2, weight = "semibold", info } = props;
   return (
     <View style={{ flex: 1, gap: 2 }}>
       <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
         {icon ? <Icon name={icon} size={18} /> : null}
-        <Text level={level} weight={weight} size="md">
+        <Text level={level} weight={weight} size="lg">
           {children}
         </Text>
-        {info ? <InfoPopover text={info} accessibilityLabel="Giải thích dữ liệu" /> : null}
+        {info ? <InfoPopover text={info} accessibilityLabel={useLoticsLocale().sectionHeading.info} /> : null}
       </View>
       {description ? (
         <Text color="zinc-500" size="sm">

package/src/suggestion_chip.tsx

@@ -0,0 +1,47 @@
+import { StyleSheet, View } from "react-native";
+import { Chip } from "./chip";
+import { colors } from "./colors";
+import { Icon } from "./icon";
+import { useLoticsLocale } from "./locale";
+import { Text } from "./text";
+
+export interface SuggestionChipProps {
+  /** The suggested item ("Verify the customer's tax ID"). */
+  label: string;
+  /** Materialize the suggestion. */
+  onAdd: () => void;
+  /** Refuse the suggestion (the ✕). Omit for take-it-or-leave-it pills. */
+  onDismiss?: () => void;
+  /** Accessible name of the press target; default "Add: <label>". */
+  accessibilityLabel?: string;
+  /** The ✕'s name; defaults to the locale's "Dismiss suggestion". */
+  dismissLabel?: string;
+}
+
+/**
+ * A dismissible SUGGESTION pill — an item the record could have but doesn't
+ * yet (a common task, an expected line): a `Chip` whose press MATERIALIZES it
+ * and whose ✕ refuses it. A pill can never be mistaken for the real row it
+ * would become; suggestions never count in any total. Filter out labels the
+ * list already holds before rendering.
+ */
+export function SuggestionChip(props: SuggestionChipProps) {
+  const { label, onAdd, onDismiss, accessibilityLabel, dismissLabel } = props;
+  const labels = useLoticsLocale().suggestionChip;
+  return (
+    <Chip onPress={onAdd} accessibilityLabel={accessibilityLabel ?? labels.add(label)} onDismiss={onDismiss} dismissTooltip={dismissLabel ?? labels.dismiss}>
+      <View style={styles.content}>
+        <Icon name="plus" size={15} color={colors.zinc[500]} />
+        <Text size="sm">{label}</Text>
+      </View>
+    </Chip>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+});

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_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>
-  );
-}