@lotics/ui 8.0.0 → 9.0.0

package/examples/tpl_record.tsx

@@ -0,0 +1,1354 @@
+import { useRef, 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 { Divider } from "@lotics/ui/divider";
+import { Badge } from "@lotics/ui/badge";
+import { Link } from "@lotics/ui/link";
+import { Icon } from "@lotics/ui/icon";
+import { Alert } from "@lotics/ui/alert";
+import type { PickerOption } from "@lotics/ui/picker";
+import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
+import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
+import { Callout, CalloutText } from "@lotics/ui/callout";
+import { Section, SectionHeading, SectionHeadingMeta, SectionHeadingTitle } from "@lotics/ui/section_heading";
+import { MenuButton } from "@lotics/ui/menu_button";
+import { Modal, ModalBody, ModalHeader } from "@lotics/ui/modal";
+import { useSectionNav } from "@lotics/ui/use_section_nav";
+import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
+import { formatMoney } from "@lotics/ui/format_money";
+import { RecordSummary } from "@lotics/ui/record_summary";
+import { CheckCircle } from "@lotics/ui/check_circle";
+import { ProgressBar } from "@lotics/ui/progress_bar";
+import { FilterChip } from "@lotics/ui/filter_chip";
+import { CaptureRow } from "@lotics/ui/capture_row";
+import { Checklist, ChecklistRow } from "@lotics/ui/checklist";
+import type { ActionMenuItem } from "@lotics/ui/action_menu";
+import { SuggestionChip } from "@lotics/ui/suggestion_chip";
+import { OptionList } from "@lotics/ui/option_list";
+import { MemberChip } from "@lotics/ui/member_chip";
+import { InlineStatic } from "@lotics/ui/inline_static";
+import { InlineTextInput } from "@lotics/ui/inline_text_input";
+import { InlineNumberInput } from "@lotics/ui/inline_number_input";
+import { InlineSelect } from "@lotics/ui/inline_select";
+import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
+import { InlineMemberSelect } from "@lotics/ui/inline_member_select";
+import type { MemberSelectMember } from "@lotics/ui/member_select";
+import { Switch } from "@lotics/ui/switch";
+import { FileDropzone } from "@lotics/ui/file_dropzone";
+import type { DisplayFile } from "@lotics/ui/file_thumbnail";
+import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
+import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
+import { DangerZone } from "@lotics/ui/danger_zone";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Record — THE record surface, create-then-refine taken all the way:
+// "New order" is ONE CLICK (no dialog, no form) — it creates a fresh Draft and
+// everything is refined here, in place. Top → bottom: a `RecordSummary` header
+// (identity · status · the to-collect metric) over its key-fact `DetailTable`,
+// a Details `DetailTable`, the CUSTOMER section (TWO states: attached = the
+// read-only-first card — Tax ID / Contact / City edit inline, and the Fetch
+// button fills contact + city from the tax-ID registry, un-gating invoicing;
+// Remove detaches the link → the find-or-create search, whose custom row opens
+// the create Dialog), BILLING — charges grouped into issuable invoice
+// documents, every value in the inline vocabulary (amount chips with the list
+// price as ghost text, "How paid…" select chips), the issue action in each
+// band's header, ONE section-level callout explaining what blocks issuing, the
+// collect total, and a separate refundable deposit — and FILES (drop to add,
+// gallery preview, delete). The lifecycle is the HANDOFF CHAIN below —
+// per-desk task checklists inform each stage's handoff CTA (never blocking);
+// there is no separate submit step. Also the settings shape:
+// Preferences switch rows + the `DangerZone`.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface Customer {
+  id: string;
+  name: string;
+  code: string;
+  taxId: string;
+  contact: string;
+  city: string;
+}
+
+// Atlas ships WITHOUT a tax ID — attach it to see the billing gate + the
+// inline Tax ID fix-up in the Customer section.
+const KNOWN_CUSTOMERS: Customer[] = [
+  { id: "cus_01", name: "Northwind Traders", code: "KH-0148", taxId: "0312456780", contact: "Mara Lindqvist", city: "Gothenburg" },
+  { id: "cus_02", name: "Harbor Freight Lines", code: "KH-0203", taxId: "0312998820", contact: "Diego Alvarez", city: "Rotterdam" },
+  { id: "cus_03", name: "Summit Packaging Co.", code: "KH-0231", taxId: "0301557742", contact: "Priya Nair", city: "Singapore" },
+  { id: "cus_04", name: "Atlas Distribution", code: "KH-0117", taxId: "", contact: "Tom Becker", city: "Hamburg" },
+  { id: "cus_05", name: "Bluewater Logistics", code: "KH-0294", taxId: "0312004455", contact: "Lena Fischer", city: "Antwerp" },
+];
+
+const TAX_ID_RE = /^\d{10}(\d{3})?$/;
+
+// HANDOFF is a STAGE TRANSITION on the shared record — never a message or a
+// task. Each department owns its sections; the handoff CTA moves the record to
+// the next desk (spine + stage = handoff) — open tasks warn, they never block.
+type Stage = "sales" | "operations" | "accounting" | "closed";
+type Desk = Exclude<Stage, "closed">;
+const DESKS: { key: Desk; label: string; color: "blue" | "amber" | "violet" }[] = [
+  { key: "sales", label: "Sales", color: "blue" },
+  { key: "operations", label: "Operations", color: "amber" },
+  { key: "accounting", label: "Accounting", color: "violet" },
+];
+const STAGES: { key: Stage; label: string; color: "blue" | "amber" | "violet" | "emerald" }[] = [
+  ...DESKS,
+  { key: "closed", label: "Closed", color: "emerald" },
+];
+const stageOf = (st: Stage) => STAGES.find((x) => x.key === st) ?? STAGES[0];
+
+// The handoff is MANAGED as tasks: each desk's checklist INFORMS its handoff
+// CTA (open tasks warn and carry over; the CTA never blocks) — actionable,
+// unlike a decorative progress strip.
+interface StageTask {
+  id: string;
+  label: string;
+  stage: Desk;
+  done: boolean;
+  assignee: string | null;
+}
+// Common-but-OPTIONAL tasks per desk — in a real app, the record type's
+// configured checklist. A NEW record starts with an EMPTY list (tasks truly
+// vary); these commons wait as dismissible suggestion CHIPS under each desk
+// (tap to materialize, ✕ to dismiss) — pills, never rows, so a
+// suggestion can't be mistaken for a task. MANDATORY tasks are a different
+// thing entirely: the app seeds those via a workflow on create — no human
+// types them.
+const SUGGESTED_TASKS: Record<Desk, string[]> = {
+  sales: ["Confirm pricing with the customer", "Attach the signed quote", "Verify the customer's tax ID"],
+  operations: ["Book the carrier", "Attach the delivery documents", "Confirm the delivery window"],
+  accounting: ["Issue every invoice", "Reconcile the receipts"],
+};
+
+// Monotonic id for user-added tasks — a length-derived id would collide after
+// a removal (delete then add) and break keys + patch-by-id.
+let taskSeq = 0;
+const newTaskId = () => `t_${(taskSeq += 1)}`;
+
+// The in-flight demo record's existing checklist (a NEW record gets []).
+const TASK_SEEDS: StageTask[] = [
+  { id: "t1", label: "Confirm pricing with the customer", stage: "sales", done: true, assignee: "mem_01" },
+  { id: "t2", label: "Attach the signed quote", stage: "sales", done: true, assignee: "mem_01" },
+  { id: "t3", label: "Verify the customer's tax ID", stage: "sales", done: false, assignee: null },
+  { id: "t4", label: "Book the carrier", stage: "operations", done: false, assignee: "mem_02" },
+  { id: "t5", label: "Attach the delivery documents", stage: "operations", done: false, assignee: null },
+  { id: "t6", label: "Issue every invoice", stage: "accounting", done: false, assignee: "mem_03" },
+  { id: "t7", label: "Reconcile the receipts", stage: "accounting", done: false, assignee: null },
+];
+
+/** The owner tag a section heading wears — WHO works this section. */
+function OwnerTag({ stage }: { stage: Desk }) {
+  const meta = stageOf(stage);
+  return <Badge variant="dot" label={meta.label} color={meta.color} />;
+}
+
+// The assignable roster — an app feeds `useMembers()` here.
+const TEAM: MemberSelectMember[] = [
+  { id: "mem_01", name: "Sarah Chen" },
+  { id: "mem_02", name: "David Park" },
+  { id: "mem_03", name: "Maria Lopez" },
+  { id: "mem_04", name: "James Walker" },
+];
+
+// The company registry the Fetch button consults (mocked): tax ID → the
+// company's registered contact + city. Unknown-but-valid IDs still resolve so
+// the fill is always demoable.
+const REGISTRY: Record<string, { contact: string; city: string }> = {
+  "0312456780": { contact: "Mara Lindqvist", city: "Gothenburg" },
+  "0312998820": { contact: "Diego Alvarez", city: "Rotterdam" },
+  "0301557742": { contact: "Priya Nair", city: "Singapore" },
+  "0312004455": { contact: "Lena Fischer", city: "Antwerp" },
+};
+
+const lookupRegistry = (taxId: string) =>
+  new Promise<{ contact: string; city: string }>((resolve) => {
+    setTimeout(() => resolve(REGISTRY[taxId] ?? { contact: "Accounts desk", city: "Ho Chi Minh City" }), 700);
+  });
+
+const TERMS = [
+  { value: "receipt", label: "Due on receipt" },
+  { value: "15", label: "Net 15" },
+  { value: "30", label: "Net 30" },
+  { value: "45", label: "Net 45" },
+];
+
+const WAREHOUSES = [
+  { value: "north", label: "North DC" },
+  { value: "central", label: "Central hub" },
+  { value: "port", label: "Port cross-dock" },
+];
+
+const PRIORITY = [
+  { value: "standard", label: "Standard" },
+  { value: "rush", label: "Rush" },
+];
+
+const PRIORITY_DOT: Record<string, string> = {
+  standard: colors.zinc[400],
+  rush: colors.amber[500],
+};
+
+// ── billing — charges grouped into issuable invoice DOCUMENTS on this record
+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 — 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[] = [
+  {
+    key: "delivery",
+    title: "Delivery",
+    ref: "",
+    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: "" }],
+  },
+  {
+    key: "storage",
+    title: "Storage",
+    ref: "",
+    charges: [{ key: "storage", label: "Storage fee", standard: 80_000, amount: 80_000, method: "transfer" }],
+  },
+];
+
+/** A fresh record has nothing billed — the invoice shapes with zeroed lines. */
+const freshInvoices = (): Invoice[] =>
+  BILLING_INITIAL.map((inv) => ({ ...inv, ref: "", charges: inv.charges.map((c) => ({ ...c, amount: 0, method: "" as const })) }));
+
+type InvoiceState = "none" | "draft" | "issued";
+const invoiceTotal = (inv: Invoice) => inv.charges.reduce((s, c) => s + c.amount, 0);
+const invoiceStatus = (inv: Invoice): InvoiceState => (inv.ref ? "issued" : invoiceTotal(inv) > 0 ? "draft" : "none");
+const missingMethods = (inv: Invoice) => inv.charges.filter((c) => c.amount > 0 && !c.method);
+
+const money = (v: number | null) => (v == null ? "" : formatMoney(v));
+
+/** 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);
+    });
+}
+
+/** One invoice document — a hairline-set BAND: a title line, its charge lines
+ *  as inline rows (amount chip with the list price as ghost text + a one-tap
+ *  "Standard …" suggestion pill while unset; the payment method turns required
+ *  the moment the line carries an amount), then the ACTION ROW at the bottom
+ *  right: the hint naming exactly what's missing → the status dot → Issue.
+ *  No per-band total — the collect band below owns the number. An ISSUED
+ *  invoice keeps its lines editable — fees change — and offers Re-issue (a new
+ *  lookup code replaces the old, confirmed in the same Dialog). */
+function InvoiceBand({
+  inv, gateReason, onAmount, onMethod, onIssue,
+}: {
+  inv: Invoice;
+  /** The customer-level block ("Attach a customer…" / "Add the tax ID…"),
+   *  resolved by the parent — "" when the customer side is ready. */
+  gateReason: string;
+  onAmount: (chKey: string, v: number) => Promise<void>;
+  onMethod: (chKey: string, m: Method) => Promise<void>;
+  onIssue: (inv: Invoice) => void;
+}) {
+  const total = invoiceTotal(inv);
+  const state = invoiceStatus(inv);
+  const missing = missingMethods(inv);
+  const ready = total > 0 && missing.length === 0 && gateReason === "";
+  // What stands between this invoice and Issue — band-local blockers first
+  // (fixable right here), then the customer-level gate.
+  const blockReason =
+    total === 0
+      ? "Enter the fees to issue."
+      : missing.length > 0
+        ? "Choose a payment method for every charged line."
+        : gateReason;
+  return (
+    <>
+      <Divider />
+      <View style={{ gap: 8, paddingVertical: 2 }}>
+        <Text weight="semibold">{inv.title}</Text>
+        {/* two editors per cell → stack earlier than a single-editor table */}
+        <DetailTable labelWidth={150} minValueWidth={320}>
+          {inv.charges.map((c) => (
+            <DetailRow key={c.key} label={c.label}>
+              <View style={{ gap: 4 }}>
+                {/* amount + method WRAP on narrow — a fixed 160 method next to a
+                    flex amount crushes the amount chip to nothing on phones */}
+                <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) => onAmount(c.key, v ?? 0)}
+                      min={0}
+                      format={money}
+                      placeholder={c.standard > 0 ? money(c.standard) : "—"}
+                      accessibilityLabel={`${c.label} amount`}
+                    />
+                  </View>
+                  <View style={{ flexGrow: 1, flexBasis: 140, maxWidth: 160 }}>
+                    <InlineSelect
+                      value={c.method === "" ? null : c.method}
+                      onSave={(m) => onMethod(c.key, m)}
+                      options={METHODS}
+                      placeholder="How paid…"
+                      disabled={c.amount <= 0}
+                      accessibilityLabel={`Payment method · ${c.label}`}
+                    />
+                  </View>
+                </View>
+                {/* the one-tap suggestion: fill the list price while unset */}
+                {c.amount <= 0 && c.standard > 0 ? (
+                  <View style={{ flexDirection: "row" }}>
+                    <Button title={`Standard ${money(c.standard)}`} color="secondary" onPress={() => onAmount(c.key, c.standard)} />
+                  </View>
+                ) : null}
+              </View>
+            </DetailRow>
+          ))}
+        </DetailTable>
+        {/* the band's action row — bottom right: why-not → status → the action */}
+        <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 6 }}>
+          {state === "issued" ? (
+            <>
+              <Text size="xs" color="muted" align="right" style={{ flexGrow: 1, flexBasis: 180 }}>
+                {ready ? "" : blockReason}
+              </Text>
+              <Badge variant="dot" label="Issued" color="emerald" />
+              <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
+              <Button title="Re-issue" color="secondary" disabled={!ready} onPress={() => onIssue(inv)} />
+            </>
+          ) : (
+            <>
+              <Text size="xs" color="muted" align="right" style={{ flexGrow: 1, flexBasis: 180 }}>
+                {blockReason}
+              </Text>
+              <Badge
+                variant="dot"
+                label={state === "draft" ? "Draft" : "Nothing to bill"}
+                color={state === "draft" ? "amber" : "zinc"}
+              />
+              <Button title="Issue invoice" color="primary" disabled={!ready} onPress={() => onIssue(inv)} />
+            </>
+          )}
+        </View>
+      </View>
+    </>
+  );
+}
+
+export function TplRecord() {
+  const id = useRef(1);
+  const nextId = (prefix: string) => `${prefix}_${(id.current += 1)}`;
+
+  // ── the record — seeded mid-flight so every state is visible
+  const [code, setCode] = useState("RC-2026-0418");
+  const [stage, setStage] = useState<Stage>("sales");
+  // The customer book is STATE: the attached customer's tax ID edits inline in
+  // the Customer section (that's what un-gates invoicing).
+  const [customers, setCustomers] = useState<Customer[]>(KNOWN_CUSTOMERS);
+  const [customerId, setCustomerId] = useState<string | null>("cus_02");
+  const customer = customers.find((c) => c.id === customerId) ?? null;
+
+  // ── facts + details (all inline-persisted)
+  const [orderDate, setOrderDate] = useState("2026-06-15");
+  const [deliverBy, setDeliverBy] = useState("2026-06-22");
+  const [terms, setTerms] = useState("30");
+  const [priority, setPriority] = useState("standard");
+  const [warehouse, setWarehouse] = useState("central");
+  const [reference, setReference] = useState("");
+  const [weight, setWeight] = useState<number | null>(1250);
+  const [salesOwner, setSalesOwner] = useState<string | null>("mem_01");
+
+  // ── customer section — TWO states: attached (read-only-first card, Remove
+  // detaches) or empty (the find-or-create search). The "create" branch opens
+  // a focused Dialog; non-null draft = the dialog is open.
+  const [custDraft, setCustDraft] = useState<{ name: string; taxId: string; contact: string; city: string } | null>(null);
+  // The attached card RESTS read-only; Edit switches its fields to inline chips.
+  const [editingCustomer, setEditingCustomer] = useState(false);
+  // The Fetch button's in-flight state (the registry lookup).
+  const [fetching, setFetching] = useState(false);
+
+  // ── billing — the bill-to tax ID comes off the CUSTOMER
+  const [invoices, setInvoices] = useState<Invoice[]>(BILLING_INITIAL);
+  const [deposit, setDeposit] = useState(0);
+  const [confirmIssue, setConfirmIssue] = useState<Invoice | null>(null);
+  const seq = useRef(414);
+  const fileSeq = useRef(0);
+  const taxId = customer?.taxId ?? "";
+  const taxIdValid = TAX_ID_RE.test(taxId);
+
+  // ── files (ids from a monotonic counter — name+index would collide after a
+  //    removal and break React keys + the gallery index)
+  const [files, setFiles] = useState<DisplayFile[]>([]);
+  const [activeFile, setActiveFile] = useState<number | null>(null);
+
+  // ── the handoff tasks — the current desk's checklist gates its handoff
+  const [tasks, setTasks] = useState<StageTask[]>(TASK_SEEDS);
+  const [newTask, setNewTask] = useState("");
+  const toggleTask = (tid: string, done: boolean) =>
+    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, done } : t)));
+  const renameTask = (tid: string, label: string) =>
+    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, label } : t)));
+  // The capture desk: adds land on the current desk; a CLOSED record's adds
+  // land on the last desk (the stage never gates task editing).
+  const captureDesk: Desk = stage === "closed" ? "accounting" : stage;
+  const addTask = () => {
+    const label = newTask.trim();
+    if (!label) return;
+    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: captureDesk, done: false, assignee: null }]);
+    setNewTask("");
+  };
+  const addSuggested = (desk: Desk, label: string) =>
+    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: desk, done: false, assignee: null }]);
+  const removeTask = (tid: string) => setTasks((prev) => prev.filter((t) => t.id !== tid));
+  const moveTask = (tid: string, desk: Desk) =>
+    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, stage: desk } : t)));
+  const nextDeskOf = (desk: Desk): Desk | null =>
+    desk === "sales" ? "operations" : desk === "operations" ? "accounting" : null;
+  const [dismissed, setDismissed] = useState<string[]>([]);
+  const assignTask = (tid: string, member: string | null) =>
+    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, assignee: member } : t)));
+  // The Task-list grammar: a clearable Group-by + filter chips derive the
+  // sections; empty groups drop (except desks — the journey stays visible).
+  const [taskGroup, setTaskGroup] = useState<"desk" | "assignee" | "status" | null>("desk");
+  const [assigneeFilter, setAssigneeFilter] = useState<string[]>([]);
+  const [statusFilter, setStatusFilter] = useState<"open" | "done" | null>(null);
+  const taskPool = tasks.filter((t) => {
+    if (assigneeFilter.length > 0 && !assigneeFilter.includes(t.assignee ?? "none")) return false;
+    if (statusFilter === "open" && t.done) return false;
+    if (statusFilter === "done" && !t.done) return false;
+    return true;
+  });
+  const suggesting = assigneeFilter.length === 0 && statusFilter === null;
+  const taskSections: { key: string; head: React.ReactNode; items: StageTask[]; desk: Desk | null; ghosts: string[] }[] =
+    taskGroup === "desk"
+      ? DESKS.map((st) => ({
+          key: st.key,
+          head: <Badge variant="dot" label={st.label} color={st.color} />,
+          items: taskPool.filter((t) => t.stage === st.key),
+          desk: st.key,
+          ghosts: suggesting ? SUGGESTED_TASKS[st.key].filter((l) => !tasks.some((t) => t.label === l) && !dismissed.includes(l)) : [],
+        }))
+      : taskGroup === "assignee"
+        ? [...TEAM.map((m) => ({ key: m.id, head: <MemberChip name={m.name ?? m.id} />, items: taskPool.filter((t) => t.assignee === m.id), desk: null, ghosts: [] })),
+           { key: "none", head: <Text size="xs" weight="semibold" color="muted">Unassigned</Text>, items: taskPool.filter((t) => t.assignee == null), desk: null, ghosts: [] },
+          ].filter((g) => g.items.length > 0)
+        : taskGroup === "status"
+          ? [
+              { key: "open", head: <Text size="xs" weight="semibold" color="muted">Open</Text>, items: taskPool.filter((t) => !t.done), desk: null, ghosts: [] },
+              { key: "done", head: <Text size="xs" weight="semibold" color="muted">Done</Text>, items: taskPool.filter((t) => t.done), desk: null, ghosts: [] },
+            ].filter((g) => g.items.length > 0)
+          : [{ key: "all", head: null, items: taskPool, desk: null, ghosts: [] }];
+  const remaining = tasks.filter((t) => t.stage === stage && !t.done).length;
+
+  // ── preferences
+  const [notifyCustomer, setNotifyCustomer] = useState(true);
+  const [partialDelivery, setPartialDelivery] = useState(false);
+
+  const customerOptions: PickerOption<string, Customer>[] = customers.map((c) => ({
+    value: c.id,
+    label: c.name,
+    data: c,
+  }));
+
+  const patchCustomer = (cid: string, patch: Partial<Customer>) =>
+    setCustomers((prev) => prev.map((c) => (c.id === cid ? { ...c, ...patch } : c)));
+
+  // Find-or-create resolution: an existing pick attaches; the custom row opens
+  // the create Dialog, prefilled with the query.
+  const onPickCustomer = (opt: PickerOption<string, Customer>) => {
+    if (customers.some((c) => c.id === opt.value)) {
+      setCustomerId(opt.value);
+      setEditingCustomer(false);
+      return;
+    }
+    setCustDraft({ name: opt.value, taxId: "", contact: "", city: "" });
+  };
+
+  const taxIdError =
+    custDraft && custDraft.taxId && !TAX_ID_RE.test(custDraft.taxId.trim()) ? "Tax ID is 10 or 13 digits" : undefined;
+
+  const createAndAttach = () => {
+    if (!custDraft) return;
+    const c: Customer = {
+      id: nextId("cus"),
+      name: custDraft.name.trim(),
+      code: `KH-${String(300 + id.current).padStart(4, "0")}`,
+      taxId: custDraft.taxId.trim(),
+      contact: custDraft.contact.trim(),
+      city: custDraft.city.trim(),
+    };
+    setCustomers((prev) => [...prev, c]);
+    setCustomerId(c.id);
+    setCustDraft(null);
+    setEditingCustomer(false);
+  };
+
+  // The registry lookup — fills Contact + City off the customer's tax ID.
+  const fetchDetails = async (c: Customer) => {
+    setFetching(true);
+    const details = await lookupRegistry(c.taxId.trim());
+    patchCustomer(c.id, details);
+    setFetching(false);
+  };
+
+  // The same lookup for the create Dialog — fills the draft's fields.
+  const fetchIntoDraft = async () => {
+    if (!custDraft) return;
+    setFetching(true);
+    const details = await lookupRegistry(custDraft.taxId.trim());
+    setCustDraft((d) => (d ? { ...d, ...details } : d));
+    setFetching(false);
+  };
+
+  // "New order" is ONE CLICK — a fresh Draft, refined entirely on this surface.
+  const newOrder = () => {
+    setCode(`RC-2026-0${420 + (id.current += 1)}`);
+    setStage("sales");
+    setCustomerId(null);
+    setCustDraft(null);
+    setEditingCustomer(false);
+    setOrderDate("2026-07-04");
+    setDeliverBy("");
+    setTerms("30");
+    setPriority("standard");
+    setWarehouse("central");
+    setReference("");
+    setWeight(null);
+    setSalesOwner(null);
+    setInvoices(freshInvoices());
+    setDeposit(0);
+    setFiles([]);
+    setTasks([]);
+    setDismissed([]);
+    setNewTask("");
+    setNotifyCustomer(true);
+    setPartialDelivery(false);
+  };
+
+  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);
+    });
+
+  const grandTotal = invoices.reduce((sum, inv) => sum + invoiceTotal(inv), 0);
+  const allMissing = invoices.flatMap(missingMethods);
+  const issuedCount = invoices.filter((i) => invoiceStatus(i) === "issued").length;
+
+  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)));
+    setConfirmIssue(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" }]);
+  };
+
+  // Open tasks INFORM the handoff, they never block it — the count warns and
+  // carries over to the next desk (or stays open on the closed record).
+  const taskHint =
+    stage === "accounting"
+      ? `${remaining} open ${remaining === 1 ? "task stays" : "tasks stay"} open on the closed record.`
+      : `${remaining} open ${remaining === 1 ? "task carries" : "tasks carry"} over to the next desk.`;
+  const gate =
+    stage === "sales"
+      ? { cta: "Hand off to Operations", next: "operations" as Stage }
+      : stage === "operations"
+        ? { cta: "Hand off to Accounting", next: "accounting" as Stage }
+        : stage === "accounting"
+          ? { cta: "Close record", next: "closed" as Stage }
+          : null;
+  const prevStage: Stage | null = stage === "operations" ? "sales" : stage === "accounting" ? "operations" : null;
+
+  // ── the outline rail — jump to a section instead of scrolling the long page
+  const SECTIONS = [
+    { key: "details", label: "Details", icon: "file-text" },
+    { key: "customer", label: "Customer", icon: "building-2" },
+    { key: "billing", label: "Billing", icon: "credit-card" },
+    { key: "files", label: "Files", icon: "folder-closed" },
+    { key: "tasks", label: "Tasks", icon: "list-checks" },
+    { key: "preferences", label: "Preferences", icon: "sliders-horizontal" },
+  ] as const;
+  const nav = useSectionNav(["details", "customer", "billing", "files", "tasks", "preferences"] as const);
+  // Narrow: the rail becomes a pinned bar naming the CURRENT section; tapping
+  // it opens a full-page section picker (Escape / the close control dismiss).
+  const [sectionsOpen, setSectionsOpen] = useState(false);
+  const [pageWidth, setPageWidth] = useState<number | null>(null);
+  const wide = pageWidth != null && pageWidth >= 760;
+
+  return (
+    // Measure-then-reveal: hidden until the width is known, so the rail/bar
+    // choice never visibly reshuffles the page on first paint.
+    <View style={{ flex: 1, flexDirection: wide ? "row" : "column", backgroundColor: colors.white, opacity: pageWidth == null ? 0 : 1 }} onLayout={(e) => setPageWidth(e.nativeEvent.layout.width)}>
+      {pageWidth == null ? null : wide ? (
+        <View style={{ width: 208, borderRightWidth: 1, borderRightColor: colors.zinc[200], padding: 8 }}>
+          <View style={{ gap: 2 }}>
+            {SECTIONS.map((sec) => (
+              <MenuButton key={sec.key} icon={sec.icon} title={sec.label} selected={nav.activeKey === sec.key} onPress={() => nav.jumpTo(sec.key)} />
+            ))}
+          </View>
+        </View>
+      ) : (
+        // Narrow: a pinned bar names the CURRENT section (the spy keeps it
+        // honest while scrolling); tapping opens the full-page section picker —
+        // no tab strip the thumb has to scroll.
+        <View style={{ borderBottomWidth: 1, borderBottomColor: colors.zinc[200], paddingHorizontal: 12, paddingVertical: 6, flexDirection: "row" }}>
+          <Button
+            title={SECTIONS.find((sec) => sec.key === nav.activeKey)?.label ?? "Sections"}
+            color="secondary"
+            icon="list-collapse"
+            onPress={() => setSectionsOpen(true)}
+          />
+        </View>
+      )}
+    <ScrollView ref={nav.scrollRef} onScroll={nav.onScroll} scrollEventThrottle={16} style={{ flex: 1 }} contentContainerStyle={{ padding: 28, paddingBottom: 96 }}>
+      <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 32 }}>
+        {/* app bar — CREATE is one click; the surface is where everything is refined */}
+        <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 10, rowGap: 8 }}>
+          <Text size="sm" color="muted">Records <Text size="sm" color="muted">/</Text> <Text size="sm" weight="medium" color="default" tabular>{code}</Text></Text>
+          <View style={{ flex: 1 }} />
+          <Button title="New record" color="secondary" icon="plus" onPress={newOrder} />
+        </View>
+
+        <RecordSummary
+          title={code}
+          subtitle={customer ? [customer.name, customer.city].filter(Boolean).join(" · ") : "No customer"}
+          status={<Badge label={stageOf(stage).label} color={stageOf(stage).color} />}
+          metric={{ label: "To collect", value: formatMoney(grandTotal), tone: stage === "closed" ? "success" : "default" }}
+        />
+
+        {/* the header's key facts — a DetailTable with the SAME columns as the
+            Details table below (trailingWidth reserved even though no fact has
+            a trailing), so the two parts sit on one page-wide grid */}
+        <DetailTable labelWidth={150} trailingWidth={88}>
+          <DetailRow label="Sales owner">
+            <InlineMemberSelect
+              members={TEAM}
+              value={salesOwner}
+              onSave={persist(setSalesOwner)}
+              placeholder="Assign…"
+              accessibilityLabel="Sales owner"
+            />
+          </DetailRow>
+          <DetailRow label="Opened">
+            <InlineDatePicker value={orderDate} onSave={persist(setOrderDate)} locale="en-US" accessibilityLabel="Opened date" />
+          </DetailRow>
+          <DetailRow label="Due">
+            <InlineDatePicker value={deliverBy} onSave={persist(setDeliverBy)} locale="en-US" accessibilityLabel="Due date" placeholder="Set a due date…" />
+          </DetailRow>
+          <DetailRow label="Payment terms">
+            <InlineSelect value={terms} options={TERMS} onSave={persist(setTerms)} accessibilityLabel="Payment terms" />
+          </DetailRow>
+        </DetailTable>
+
+        <Divider />
+
+        {/* ONE DetailTable = the record's field grid: label · editor · trailing
+            columns set once on the parent, every row aligned like a table —
+            editors share one width even when only some rows carry a trailing
+            action / badge; read-only values are InlineStatic in the same
+            column, aligned to the pixel */}
+        <View onLayout={nav.register("details")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Every value edits in place — click a chip, change it, it saves on its own.">Details</SectionHeadingTitle>
+            <OwnerTag stage="sales" />
+          </SectionHeading>
+          <DetailTable labelWidth={150} trailingWidth={88}>
+            <DetailRow label="Reference" trailing={<Button title="Copy" color="secondary" onPress={() => {}} />}>
+              <InlineTextInput value={reference} onSave={persist(setReference)} placeholder="Add buyer's reference…" accessibilityLabel="Reference" />
+            </DetailRow>
+            <DetailRow label="Priority">
+              <InlineSelect
+                value={priority}
+                onSave={persist(setPriority)}
+                options={PRIORITY}
+                accessibilityLabel="Priority"
+                renderOptionContent={(o) => (
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                    <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: PRIORITY_DOT[o.value] }} />
+                    <Text size="sm">{o.label}</Text>
+                  </View>
+                )}
+              />
+            </DetailRow>
+            <DetailRow label="Location">
+              <InlineSelect value={warehouse} onSave={persist(setWarehouse)} options={WAREHOUSES} accessibilityLabel="Location" />
+            </DetailRow>
+            <DetailRow label="Total weight">
+              <InlineNumberInput
+                value={weight}
+                onSave={persist(setWeight)}
+                min={0}
+                format={(v) => (v == null ? "" : `${v.toLocaleString("en-US")} kg`)}
+                placeholder="Add the weight…"
+                accessibilityLabel="Total weight"
+              />
+            </DetailRow>
+            <DetailRow label="Record ID" trailing={<Badge label="System" color="zinc" />}>
+              <InlineStatic value={code} tabular />
+            </DetailRow>
+          </DetailTable>
+        </Section>
+        </View>
+
+        <Divider />
+
+        {/* CUSTOMER — TWO states, no swap mode. Attached: the read-only-first
+            card (identity + editable fields — Tax ID with the registry Fetch
+            that fills Contact + City, which are inline-editable too); Remove
+            detaches the LINK (the customer stays in the book) and drops you to
+            the empty state. Empty: the find-or-create search; the custom row
+            opens the create Dialog. */}
+        <View onLayout={nav.register("customer")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="The bill-to. Its tax ID gates invoicing below — add it here.">Customer</SectionHeadingTitle>
+            <OwnerTag stage="sales" />
+            {customer && !editingCustomer ? (
+              <Button title="Edit" color="secondary" icon="pencil" onPress={() => setEditingCustomer(true)} />
+            ) : null}
+          </SectionHeading>
+          {customer ? (
+            <View style={{ gap: 10 }}>
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                <Icon name="building-2" size={16} color={colors.zinc[500]} />
+                <Text weight="medium">{customer.name}</Text>
+                <Text size="xs" color="muted" tabular>{customer.code}</Text>
+              </View>
+              {editingCustomer ? (
+                <DetailTable labelWidth={150} trailingWidth={88}>
+                  <DetailRow
+                    label="Tax ID"
+                    trailing={
+                      <Button
+                        title="Fetch"
+                        color="secondary"
+                        loading={fetching}
+                        disabled={!TAX_ID_RE.test(customer.taxId.trim())}
+                        onPress={() => fetchDetails(customer)}
+                      />
+                    }
+                  >
+                    <InlineTextInput
+                      value={customer.taxId}
+                      onSave={(v: string) => {
+                        if (v.trim() !== "" && !TAX_ID_RE.test(v.trim())) throw new Error("Enter a 10- or 13-digit tax ID.");
+                        return persist((next: string) => patchCustomer(customer.id, { taxId: next.trim() }))(v);
+                      }}
+                      placeholder="Add tax ID…"
+                      accessibilityLabel="Tax ID"
+                    />
+                  </DetailRow>
+                  <DetailRow label="Contact">
+                    <InlineTextInput
+                      value={customer.contact}
+                      onSave={persist((v: string) => patchCustomer(customer.id, { contact: v }))}
+                      placeholder="Add contact…"
+                      accessibilityLabel="Contact"
+                    />
+                  </DetailRow>
+                  <DetailRow label="City">
+                    <InlineTextInput
+                      value={customer.city}
+                      onSave={persist((v: string) => patchCustomer(customer.id, { city: v }))}
+                      placeholder="Add city…"
+                      accessibilityLabel="City"
+                    />
+                  </DetailRow>
+                </DetailTable>
+              ) : (
+                // At REST the card is read-only — flat InlineStatic values in
+                // the SAME columns, so entering Edit never shifts the grid.
+                <DetailTable labelWidth={150} trailingWidth={88}>
+                  <DetailRow label="Tax ID">
+                    <InlineStatic value={customer.taxId || "—"} tabular />
+                  </DetailRow>
+                  <DetailRow label="Contact">
+                    <InlineStatic value={customer.contact || "—"} />
+                  </DetailRow>
+                  <DetailRow label="City">
+                    <InlineStatic value={customer.city || "—"} />
+                  </DetailRow>
+                </DetailTable>
+              )}
+              {/* the card's closing row — Remove (destructive) low-left at
+                  rest; while editing, Done commits out at the bottom right */}
+              {editingCustomer ? (
+                <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
+                  <Button title="Done" color="primary" onPress={() => setEditingCustomer(false)} />
+                </View>
+              ) : (
+                <View style={{ flexDirection: "row" }}>
+                  <Button title="Remove" color="danger" icon="x" onPress={() => setCustomerId(null)} />
+                </View>
+              )}
+            </View>
+          ) : (
+            <View style={{ gap: 10 }}>
+              <Combobox
+                options={customerOptions}
+                onValueChange={onPickCustomer}
+                getOptionDescription={(o) => (o.data ? `${o.data.code} · ${o.data.city}` : undefined)}
+                reflectSelection={false}
+                allowCustom
+                customOptionPlacement="top"
+                customOptionLabel={(q) => `Create new customer “${q}”`}
+              >
+                <ComboboxInput icon="search" placeholder="Search customers by name…" accessibilityLabel="Attach customer" />
+                <ComboboxContent emptyText="No customer matches — type a name to create one" />
+              </Combobox>
+              <Text size="xs" color="muted">
+                No match? Pick “Create new customer …” to add one without leaving the order.
+              </Text>
+            </View>
+          )}
+        </Section>
+        </View>
+
+        <Divider />
+
+        {/* BILLING — invoice documents on the record, in the inline vocabulary.
+            The issue action lives in each band's header; ONE section-level
+            callout explains what blocks issuing (no per-band totals, no
+            per-band reasons — the collect band owns the number). */}
+        <View onLayout={nav.register("billing")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Each invoice owns its charge lines — a charge never lives apart from the document it bills on.">Billing</SectionHeadingTitle>
+            <OwnerTag stage="accounting" />
+          </SectionHeading>
+
+          {stage === "sales" || stage === "operations" ? (
+            <Callout tone="info">
+              <CalloutText>Billing opens when the record reaches Accounting — hand off above.</CalloutText>
+            </Callout>
+          ) : customer === null ? (
+            <Callout tone="warning">
+              <CalloutText>Attach a customer above to issue invoices.</CalloutText>
+            </Callout>
+          ) : !taxIdValid ? (
+            <Callout tone="warning">
+              <CalloutText>{customer.name} has no valid tax ID — add it in the Customer section to issue invoices.</CalloutText>
+            </Callout>
+          ) : null}
+
+          <View style={{ gap: 10 }}>
+            {invoices.map((inv) => (
+              <InvoiceBand
+                key={inv.key}
+                inv={inv}
+                gateReason={
+                  stage === "sales" || stage === "operations"
+                    ? "Billing opens at the Accounting stage."
+                    : customer === null
+                      ? "Attach a customer to issue."
+                      : !taxIdValid
+                        ? "Add the customer's tax ID to issue."
+                        : ""
+                }
+                onAmount={(chKey, v) => saveCharge(inv.key, chKey, { amount: v })}
+                onMethod={(chKey, m) => saveCharge(inv.key, chKey, { method: m })}
+                onIssue={setConfirmIssue}
+              />
+            ))}
+          </View>
+
+          {/* collect band */}
+          <Divider />
+          <View style={{ gap: 10 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Text weight="semibold" style={{ flex: 1 }}>Total to collect</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>
+          </View>
+
+          {/* deposit band — labelled separate, never part of the total */}
+          <Divider />
+          <View style={{ 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: 12, flexWrap: "wrap", minHeight: 40 }}>
+              <Text size="sm" color="muted" style={{ width: 150 }}>Refundable</Text>
+              <View style={{ flexGrow: 1, flexBasis: 160 }}>
+                <InlineNumberInput
+                  value={deposit || null}
+                  onSave={persist((v: number | null) => setDeposit(v ?? 0))}
+                  min={0}
+                  format={money}
+                  placeholder="—"
+                  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>
+          </View>
+        </Section>
+        </View>
+
+        <Divider />
+
+        {/* FILES — the record's document CRUD: drop to add, click a thumbnail
+            to preview in the gallery, ✕ to delete. */}
+        <View onLayout={nav.register("files")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="The signed quote, the PO, photos — drop to add, click to preview.">Files</SectionHeadingTitle>
+            <OwnerTag stage="operations" />
+            {files.length > 0 ? <SectionHeadingMeta>{`${files.length} ${files.length === 1 ? "file" : "files"}`}</SectionHeadingMeta> : null}
+          </SectionHeading>
+          {files.length > 0 ? (
+            <FileThumbnailGrid
+              files={files}
+              itemSize={84}
+              onFilePress={(f) => setActiveFile(files.findIndex((x) => x.id === f.id))}
+              onRemove={(fid) => setFiles((prev) => prev.filter((x) => x.id !== fid))}
+            />
+          ) : null}
+          <FileDropzone
+            height={100}
+            label="Drop the signed quote or PO"
+            hint="or click to browse · PDF, images"
+            dropLabel="Release to attach"
+            accept="application/pdf,image/*"
+            accessibilityLabel="Attach documents"
+            onFiles={(dropped) =>
+              setFiles((prev) => [
+                ...prev,
+                ...dropped.map((f) => ({
+                  id: `file_${(fileSeq.current += 1)}`,
+                  filename: f.name,
+                  mimeType: f.type || "application/octet-stream",
+                  url: URL.createObjectURL(f),
+                })),
+              ])
+            }
+          />
+        </Section>
+        </View>
+
+        <Divider />
+
+        {/* TASKS — the handoff checklist, grouped by the desk that owns
+            them; every row edits (the stage gates the handoff and Billing,
+            never task editing). The CURRENT desk's open tasks warn beside
+            the handoff CTA below. */}
+        <View onLayout={nav.register("tasks")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Each desk clears its checklist to hand the record off.">Tasks</SectionHeadingTitle>
+            {/* the same compact meter as the register's Tasks column */}
+            {tasks.length > 0 ? (
+              <View style={{ width: 120 }}>
+                <ProgressBar compact value={tasks.filter((t) => t.done).length} max={tasks.length} format="fraction" color={colors.zinc[500]} completeColor={colors.emerald[500]} />
+              </View>
+            ) : null}
+          </SectionHeading>
+          {/* the Task-list toolbar grammar: a clearable Group-by FilterChip +
+              filter chips — not a bespoke pill row */}
+          <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
+            <FilterChip
+              label="Group by"
+              summary={taskGroup === "desk" ? "Desk" : taskGroup === "assignee" ? "Assignee" : taskGroup === "status" ? "Status" : undefined}
+              onClear={() => setTaskGroup(null)}
+              clearLabel="Clear grouping"
+            >
+              {({ close }) => (
+                <OptionList
+                  search={{ mode: "none" }}
+                  options={[
+                    { value: "desk", label: "Desk" },
+                    { value: "assignee", label: "Assignee" },
+                    { value: "status", label: "Status" },
+                  ]}
+                  value={taskGroup ?? undefined}
+                  onValueChange={(v) => {
+                    if (v) setTaskGroup(v);
+                    close();
+                  }}
+                  onRequestClose={close}
+                />
+              )}
+            </FilterChip>
+            <FilterChip
+              label="Assignee"
+              summary={assigneeFilter.length > 0 ? `${assigneeFilter.length}` : undefined}
+              onClear={() => setAssigneeFilter([])}
+              clearLabel="Clear assignee filter"
+            >
+              <OptionList
+                search={{ mode: "none" }}
+                multi
+                options={[...TEAM.map((m) => ({ value: m.id, label: m.name ?? m.id })), { value: "none", label: "Unassigned" }]}
+                value={assigneeFilter}
+                onValueChange={setAssigneeFilter}
+              />
+            </FilterChip>
+            <FilterChip
+              label="Status"
+              summary={statusFilter === "open" ? "Open" : statusFilter === "done" ? "Done" : undefined}
+              onClear={() => setStatusFilter(null)}
+              clearLabel="Clear status filter"
+            >
+              {({ close }) => (
+                <OptionList
+                  search={{ mode: "none" }}
+                  options={[
+                    { value: "open", label: "Open" },
+                    { value: "done", label: "Done" },
+                  ]}
+                  value={statusFilter ?? undefined}
+                  onValueChange={(v) => {
+                    if (v) setStatusFilter(v);
+                    close();
+                  }}
+                  onRequestClose={close}
+                />
+              )}
+            </FilterChip>
+          </View>
+          {/* the capture row at the TOP — a new task lands on the capture desk
+              (the current one; the last desk once closed) */}
+          <CaptureRow value={newTask} onChangeText={setNewTask} onSubmit={addTask} placeholder={`Add a task for ${stageOf(captureDesk).label}…`} accessibilityLabel="Add a task" />
+          <View style={{ gap: 14 }}>
+            {taskSections.map((g) => {
+              const desk = g.desk;
+              return (
+              <View key={g.key} style={{ gap: 6 }}>
+                {g.head ? (
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                    {g.head}
+                    {g.items.length > 0 ? (
+                      <Text size="xs" color="muted" tabular>{`${g.items.filter((t) => t.done).length}/${g.items.length}`}</Text>
+                    ) : null}
+                  </View>
+                ) : null}
+                {/* rows ride the Checklist compound — one geometry, EVERY
+                    desk's rows fully editable (the stage gates the handoff
+                    and Billing, never task editing — planning ahead on a
+                    later desk is normal work) */}
+                <Checklist trailingWidth={156}>
+                  {g.items.map((t) => {
+                    const next = nextDeskOf(t.stage);
+                    const menuItems: ActionMenuItem[] = [
+                      ...(next !== null
+                        ? [{ key: "chuyen", label: `Move to ${stageOf(next).label}`, icon: "arrow-right" as const, onPress: () => moveTask(t.id, next) }]
+                        : []),
+                      { key: "xoa", label: "Delete task", icon: "trash", danger: true, onPress: () => removeTask(t.id) },
+                    ];
+                    return (
+                      <ChecklistRow
+                        key={t.id}
+                        control={
+                          <CheckCircle
+                            checked={t.done}
+                            onChange={(on) => toggleTask(t.id, on)}
+                            accessibilityLabel={t.label}
+                          />
+                        }
+                        trailing={
+                          <InlineMemberSelect
+                            background="transparent"
+                            members={TEAM}
+                            value={t.assignee}
+                            onSave={(m) => assignTask(t.id, m)}
+                            placeholder="Assign…"
+                            accessibilityLabel={`Assignee · ${t.label}`}
+                          />
+                        }
+                        menu={{ items: menuItems, accessibilityLabel: `Task options: ${t.label}` }}
+                      >
+                        <InlineTextInput
+                          background="transparent"
+                          value={t.label}
+                          onSave={(v) => renameTask(t.id, v)}
+                          struck={t.done}
+                          accessibilityLabel="Task title"
+                        />
+                      </ChecklistRow>
+                    );
+                  })}
+                  {/* SUGGESTIONS are pills, not rows — tap to materialize,
+                      ✕ dismisses for this record; never counted */}
+                  {desk != null && g.ghosts.length > 0 ? (
+                    <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 6, paddingTop: 2, paddingBottom: 4 }}>
+                      {g.ghosts.map((label) => (
+                        <SuggestionChip
+                          key={label}
+                          label={label}
+                          onAdd={() => addSuggested(desk, label)}
+                          onDismiss={() => setDismissed((prev) => (prev.includes(label) ? prev : [...prev, label]))}
+                        />
+                      ))}
+                    </View>
+                  ) : null}
+                </Checklist>
+              </View>
+              );
+            })}
+          </View>
+        </Section>
+        </View>
+
+        <Divider />
+
+        {/* THE HANDOFF GATE — the atomic boundary between departments, not a
+            form and not a message: the record itself changes desks. Each stage
+            names what it owes (the why-hint) before its CTA un-gates; the
+            receiving department finds the record in ITS register. */}
+        {gate ? (
+          <View style={{ gap: 12 }}>
+            {remaining > 0 ? (
+              <Callout tone="info">
+                <CalloutText>{taskHint}</CalloutText>
+              </Callout>
+            ) : null}
+            <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8 }}>
+              {prevStage ? (
+                <Button title={`Back to ${stageOf(prevStage).label}`} color="muted" onPress={() => setStage(prevStage)} />
+              ) : null}
+              <Text size="xs" color="muted" align="right" style={{ flexGrow: 1, flexBasis: 160 }}>
+                {`Handing off moves the record to ${stageOf(gate.next).label} — fields stay editable after.`}
+              </Text>
+              <Button title={gate.cta} color="primary" onPress={() => setStage(gate.next)} />
+            </View>
+          </View>
+        ) : (
+          <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8 }}>
+            <Text size="xs" color="muted" style={{ flexGrow: 1, flexBasis: 160 }}>
+              Closed on 04/07/2026 — every field still edits in place and saves on its own.
+            </Text>
+            <Button title="Reopen at Accounting" color="muted" onPress={() => setStage("accounting")} />
+          </View>
+        )}
+
+        <Divider />
+
+        {/* the settings shape: title + description left, a live control right,
+            applied on change */}
+        <View onLayout={nav.register("preferences")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Applied as you change them — no Save.">Preferences</SectionHeadingTitle>
+          </SectionHeading>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 40 }}>
+            <View style={{ flex: 1, gap: 1 }}>
+              <Text size="sm">Notify the customer</Text>
+              <Text size="xs" color="muted">Email changes to the primary contact</Text>
+            </View>
+            <Switch accessibilityLabel="Notify the customer" value={notifyCustomer} onChange={setNotifyCustomer} />
+          </View>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 40 }}>
+            <View style={{ flex: 1, gap: 1 }}>
+              <Text size="sm">Allow partial delivery</Text>
+              <Text size="xs" color="muted">Ship available lines before the rest arrive</Text>
+            </View>
+            <Switch accessibilityLabel="Allow partial delivery" value={partialDelivery} onChange={setPartialDelivery} />
+          </View>
+        </Section>
+        </View>
+
+        <Divider />
+
+        <DangerZone
+          title="Delete record"
+          description="Permanently remove this record and its invoices, charges, and history. This can't be undone."
+        >
+          <Button title="Delete record" color="danger" onPress={() => {}} />
+        </DangerZone>
+      </View>
+
+      {/* the narrow-mode section picker — a full-page takeover: pick a section
+          to jump there; Escape or the close control dismisses */}
+      <Modal open={sectionsOpen} onClose={() => setSectionsOpen(false)}>
+        <ModalHeader title="Sections" onClose={() => setSectionsOpen(false)} />
+        <ModalBody>
+          <View style={{ gap: 2 }}>
+            {SECTIONS.map((sec) => (
+              <MenuButton
+                key={sec.key}
+                icon={sec.icon}
+                title={sec.label}
+                selected={nav.activeKey === sec.key}
+                onPress={() => {
+                  setSectionsOpen(false);
+                  nav.jumpTo(sec.key);
+                }}
+              />
+            ))}
+          </View>
+        </ModalBody>
+      </Modal>
+
+      {/* find-or-create's CREATE branch — a focused Dialog (4 fields is
+          dialog-weight; an inline swap shifts the page). Essentials only:
+          after Create & attach, the card's Fetch button fills the rest. */}
+      <Dialog width={520} open={custDraft !== null} onOpenChange={(o) => { if (!o) setCustDraft(null); }}>
+        <DialogHeader>
+          <DialogHeaderTitle>New customer</DialogHeaderTitle>
+        </DialogHeader>
+        {/* the SAME inline-chip table as the edit card — create and edit are
+            one vocabulary, only the commit differs (Create & attach) */}
+        <View style={{ paddingHorizontal: 24, paddingBottom: 12, gap: 8 }}>
+          <DetailTable labelWidth={150} trailingWidth={88}>
+            <DetailRow label="Customer name">
+              <InlineTextInput
+                value={custDraft?.name ?? ""}
+                onSave={(v) => {
+                  setCustDraft((d) => (d ? { ...d, name: v } : d));
+                  return Promise.resolve();
+                }}
+                placeholder="Add legal name…"
+                accessibilityLabel="Customer name"
+              />
+            </DetailRow>
+            <DetailRow
+              label="Tax ID"
+              trailing={
+                <Button
+                  title="Fetch"
+                  color="secondary"
+                  loading={fetching}
+                  disabled={!TAX_ID_RE.test((custDraft?.taxId ?? "").trim())}
+                  onPress={fetchIntoDraft}
+                />
+              }
+            >
+              <InlineTextInput
+                value={custDraft?.taxId ?? ""}
+                onSave={(v) => {
+                  setCustDraft((d) => (d ? { ...d, taxId: v } : d));
+                  return Promise.resolve();
+                }}
+                placeholder="Add tax ID…"
+                accessibilityLabel="Tax ID"
+              />
+            </DetailRow>
+            <DetailRow label="Contact">
+              <InlineTextInput
+                value={custDraft?.contact ?? ""}
+                onSave={(v) => {
+                  setCustDraft((d) => (d ? { ...d, contact: v } : d));
+                  return Promise.resolve();
+                }}
+                placeholder="Add contact…"
+                accessibilityLabel="Contact"
+              />
+            </DetailRow>
+            <DetailRow label="City">
+              <InlineTextInput
+                value={custDraft?.city ?? ""}
+                onSave={(v) => {
+                  setCustDraft((d) => (d ? { ...d, city: v } : d));
+                  return Promise.resolve();
+                }}
+                placeholder="Add city…"
+                accessibilityLabel="City"
+              />
+            </DetailRow>
+          </DetailTable>
+          {taxIdError ? <Text size="xs" color="danger">{taxIdError}</Text> : null}
+          <Text size="xs" color="muted">Created and attached to this order — Fetch fills contact + city from the tax-ID registry.</Text>
+        </View>
+        <DialogFooter>
+          <Button title="Cancel" color="secondary" onPress={() => setCustDraft(null)} />
+          <Button title="Create & attach" color="primary" disabled={(custDraft?.name.trim() ?? "") === "" || !!taxIdError} onPress={createAndAttach} />
+        </DialogFooter>
+      </Dialog>
+
+      <FileGalleryModal files={files} activeIndex={activeFile} onIndexChange={setActiveFile} />
+
+      {/* issuing an e-invoice is irreversible — confirm in a Dialog (stage gate) */}
+      <Dialog width={460} open={confirmIssue !== null} onOpenChange={(o) => { if (!o) setConfirmIssue(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={() => setConfirmIssue(null)} />
+          <Button title="Issue" color="primary" onPress={() => confirmIssue && issue(confirmIssue)} />
+        </DialogFooter>
+      </Dialog>
+    </ScrollView>
+    </View>
+  );
+}