@lotics/ui 7.7.0 → 7.9.0

package/examples/tpl_reconcile.tsx

@@ -1,275 +0,0 @@
-import { useState } from "react";
-import { Pressable, ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { ActionMenu } from "@lotics/ui/action_menu";
-import { Alert } from "@lotics/ui/alert";
-import { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
-import { Divider } from "@lotics/ui/divider";
-import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
-import { EmptyState } from "@lotics/ui/empty_state";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { MenuListItem } from "@lotics/ui/menu_list_item";
-import { PressableRow } from "@lotics/ui/pressable_row";
-import { ChipGroup } from "@lotics/ui/chip_group";
-import { formatMoney } from "@lotics/ui/format_money";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Reconciliation — the unit of work is a PAIR: two lists that
-// must agree (here: bank statement lines vs open invoices; same shape for
-// 3-way match, delivered-vs-ordered, ledger-vs-subledger). The engine
-// proposes matches with a named confidence; the person confirms in one
-// click, demotes wrong guesses, and resolves the unmatched tail in the
-// drawer — pick a candidate, or take an escape hatch (bank fee, manual
-// receipt). Filter pills are the match lifecycle; confirming moves rows live.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface Invoice {
-  id: string;
-  customer: string;
-  amount: number;
-}
-
-interface BankLine {
-  id: string;
-  date: string;
-  desc: string;
-  amount: number;
-  status: "suggested" | "unmatched" | "confirmed";
-  /** The engine's proposed invoice + why it believes the pair. */
-  match?: { invoice: string; confidence: "Exact reference" | "Amount + date" };
-}
-
-const INVOICES: Invoice[] = [
-  { id: "INV-2026-0312", customer: "ATLAS COMPONENTS", amount: 86_200_000 },
-  { id: "INV-2026-0318", customer: "CRESTLINE FURNITURE", amount: 41_300_000 },
-  { id: "INV-2026-0320", customer: "KING LUN PLASTICS", amount: 23_400_000 },
-  { id: "INV-2026-0321", customer: "VITTORIA ACCESSORIES", amount: 22_500_000 },
-  { id: "INV-2026-0324", customer: "BRIGHTCELL BATTERIES", amount: 18_700_000 },
-  { id: "INV-2026-0326", customer: "MERIDIAN CONSTRUCTION", amount: 25_200_000 },
-  { id: "INV-2026-0327", customer: "KING LUN PLASTICS", amount: 23_900_000 },
-];
-
-const LINES: BankLine[] = [
-  { id: "BL-091", date: "09/06", desc: "ATLAS COMPONENTS — INV-2026-0312", amount: 86_200_000, status: "suggested", match: { invoice: "INV-2026-0312", confidence: "Exact reference" } },
-  { id: "BL-092", date: "09/06", desc: "CRESTLINE TT PAYMENT", amount: 41_300_000, status: "suggested", match: { invoice: "INV-2026-0318", confidence: "Amount + date" } },
-  { id: "BL-094", date: "10/06", desc: "VITTORIA ACC — INV-2026-0321", amount: 22_500_000, status: "suggested", match: { invoice: "INV-2026-0321", confidence: "Exact reference" } },
-  { id: "BL-095", date: "10/06", desc: "BRIGHTCELL JUNE", amount: 18_700_000, status: "suggested", match: { invoice: "INV-2026-0324", confidence: "Amount + date" } },
-  { id: "BL-096", date: "11/06", desc: "KING LUN PLASTICS TRANSFER", amount: 23_400_000, status: "unmatched" },
-  { id: "BL-097", date: "11/06", desc: "INCOMING TT REF 88412", amount: 25_200_000, status: "unmatched" },
-  { id: "BL-098", date: "11/06", desc: "BANK CHARGES JUNE", amount: 264_000, status: "unmatched" },
-  { id: "BL-099", date: "12/06", desc: "MERIDIAN PART PAYMENT", amount: 12_600_000, status: "unmatched" },
-  { id: "BL-088", date: "08/06", desc: "ATLAS COMPONENTS — INV-2026-0301", amount: 64_800_000, status: "confirmed", match: { invoice: "INV-2026-0301", confidence: "Exact reference" } },
-  { id: "BL-089", date: "08/06", desc: "NORTHWIND PKG — INV-2026-0305", amount: 31_400_000, status: "confirmed", match: { invoice: "INV-2026-0305", confidence: "Exact reference" } },
-];
-
-const invoiceOf = (id: string) => INVOICES.find((i) => i.id === id);
-
-/** Candidate invoices for an unmatched line — closest amounts first. */
-const candidatesFor = (line: BankLine, taken: Set<string>) =>
-  INVOICES.filter((i) => !taken.has(i.id))
-    .map((i) => ({ ...i, delta: i.amount - line.amount }))
-    .sort((a, b) => Math.abs(a.delta) - Math.abs(b.delta))
-    .slice(0, 3);
-
-function SideCell({ top, bottom, width }: { top: string; bottom: string; width?: number }) {
-  return (
-    <View style={{ gap: 0, width, flexShrink: 1 }}>
-      <Text size="sm" numberOfLines={1}>{top}</Text>
-      <Text size="xs" color="muted" numberOfLines={1}>{bottom}</Text>
-    </View>
-  );
-}
-
-export function TplReconcile() {
-  const [lines, setLines] = useState<BankLine[]>(LINES);
-  const [tab, setTab] = useState("suggested");
-  const [openId, setOpenId] = useState<string | null>(null);
-
-  const setStatus = (id: string, status: BankLine["status"], match?: BankLine["match"]) => {
-    setLines((prev) => prev.map((l) => (l.id === id ? { ...l, status, match: match ?? (status === "unmatched" ? undefined : l.match) } : l)));
-    setOpenId(null);
-  };
-
-  const byStatus = (s: BankLine["status"]) => lines.filter((l) => l.status === s);
-  const visible = byStatus(tab as BankLine["status"]);
-  const open = lines.find((l) => l.id === openId) ?? null;
-  const seqIndex = open ? visible.findIndex((l) => l.id === open.id) : -1;
-
-  const unexplained = byStatus("unmatched").reduce((s, l) => s + l.amount, 0);
-  const matchedValue = byStatus("confirmed").reduce((s, l) => s + l.amount, 0);
-  const takenInvoices = new Set(lines.filter((l) => l.match && l.status !== "unmatched").map((l) => l.match!.invoice));
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 1040, alignSelf: "center", gap: 16 }}>
-        {/* header band */}
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Payment reconciliation</Text>
-          <Text size="sm" color="muted">Two lists that must agree — confirm the engine's matches, then chase the unexplained tail</Text>
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Statement lines", value: lines.length, format: "number", caption: "this period" },
-            { label: "Open invoices", value: INVOICES.length - takenInvoices.size, format: "number", info: "Invoices with no matching statement line yet — the other half of the reconciliation." },
-            { label: "Matched value", value: matchedValue, format: "currency", compact: true, info: "Statement money tied to an invoice — the explained half of the period." },
-            { label: "Unexplained", value: unexplained, format: "currency", compact: true, tone: unexplained > 0 ? "danger" : "default", info: "Money on the statement not yet tied to an invoice or an escape hatch (bank fee, manual receipt). Reconciliation closes at zero." },
-          ]}
-        />
-
-        <ChipGroup
-          accessibilityLabel="Match lifecycle"
-          options={[
-            { label: `Suggested · ${byStatus("suggested").length}`, value: "suggested" },
-            { label: `Unmatched · ${byStatus("unmatched").length}`, value: "unmatched" },
-            { label: `Confirmed · ${byStatus("confirmed").length}`, value: "confirmed" },
-          ]}
-          value={tab}
-          onValueChange={(t) => { setTab(t); setOpenId(null); }}
-        />
-
-        <Card style={{ padding: 0 }}>
-          <CardHeader>
-            <CardHeaderTitle
-              info={
-                tab === "suggested"
-                  ? "Bank line on the left, proposed invoice on the right, the engine's reason in between. Confirm is one click; ⋯ demotes a wrong guess."
-                  : tab === "unmatched"
-                    ? "Statement money with no invoice yet. Press a row to pick from candidates or take an escape hatch."
-                    : "Settled pairs. ⋯ unlinks a mistake — the line returns to Unmatched."
-              }
-            >
-              {tab === "suggested" ? "Proposed matches" : tab === "unmatched" ? "Needs a home" : "Settled"}
-            </CardHeaderTitle>
-          </CardHeader>
-
-          {visible.length === 0 ? (
-            <EmptyState message={tab === "unmatched" ? "Nothing unexplained" : "Nothing here"} hint={tab === "suggested" ? "Every proposal is confirmed or demoted" : undefined} />
-          ) : (
-            visible.map((l, i) => {
-              const inv = l.match ? invoiceOf(l.match.invoice) : undefined;
-              return (
-                <View key={l.id}>
-                  {i > 0 ? <Divider /> : null}
-                  <PressableRow onPress={() => setOpenId(l.id)} selected={open?.id === l.id}>
-                    <Pressable
-                      accessibilityRole="button"
-                      accessibilityLabel={`Open statement line ${l.id}`}
-                      onPress={() => setOpenId(l.id)}
-                      style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12, minHeight: 56 }}
-                    >
-                      {/* bank side */}
-                      <Text size="sm" color="muted" tabular style={{ width: 44 }}>{l.date}</Text>
-                      <SideCell top={l.desc} bottom={`${l.id} · ${formatMoney(l.amount)}`} />
-                      <View style={{ flex: 1 }} />
-                      {/* the pair bridge */}
-                      {l.match ? (
-                        <>
-                          <Badge variant="dot" label={l.match.confidence} color={l.match.confidence === "Exact reference" ? "emerald" : "amber"} />
-                          <SideCell
-                            top={l.match.invoice}
-                            bottom={inv ? `${inv.customer} · ${formatMoney(inv.amount)}` : "non-invoice entry"}
-                            width={210}
-                          />
-                        </>
-                      ) : (
-                        <Badge variant="dot" label="No invoice" color="red" />
-                      )}
-                    </Pressable>
-                    {l.status === "suggested" ? (
-                      <>
-                        <Button title="Confirm" color="secondary" onPress={() => setStatus(l.id, "confirmed")} />
-                        <ActionMenu
-                          accessibilityLabel={`Actions for ${l.id}`}
-                          items={[{ key: "demote", label: "Not a match", icon: "ban", danger: true, onPress: () => Alert.alert("Demote this match?", "The proposed match moves back to the unexplained list.", [{ text: "Keep", style: "cancel" }, { text: "Not a match", style: "destructive", onPress: () => setStatus(l.id, "unmatched") }]) }]}
-                        />
-                      </>
-                    ) : null}
-                    {l.status === "unmatched" ? (
-                      <Button title="Resolve" color="secondary" onPress={() => setOpenId(l.id)} />
-                    ) : null}
-                    {l.status === "confirmed" ? (
-                      <ActionMenu
-                        accessibilityLabel={`Actions for ${l.id}`}
-                        items={[{ key: "unlink", label: "Unlink match", icon: "ban", danger: true, onPress: () => Alert.alert("Unlink this match?", "The confirmed pair is broken and the line returns to unexplained.", [{ text: "Keep", style: "cancel" }, { text: "Unlink", style: "destructive", onPress: () => setStatus(l.id, "unmatched") }]) }]}
-                      />
-                    ) : null}
-                  </PressableRow>
-                </View>
-              );
-            })
-          )}
-
-          <CardFooter>
-            <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
-              {`${visible.length} lines · ${formatMoney(visible.reduce((s, l) => s + l.amount, 0), { compact: true })} in this view`}
-            </Text>
-          </CardFooter>
-        </Card>
-      </View>
-
-      {open !== null ? (
-        <Drawer
-          open
-          onOpenChange={(o) => !o && setOpenId(null)}
-          title={open.id}
-          width={460}
-          onPrev={seqIndex > 0 ? () => setOpenId(visible[seqIndex - 1].id) : undefined}
-          onNext={seqIndex >= 0 && seqIndex < visible.length - 1 ? () => setOpenId(visible[seqIndex + 1].id) : undefined}
-          position={seqIndex >= 0 ? `${seqIndex + 1}/${visible.length}` : undefined}
-        >
-          <ScrollView key={open.id} style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 14 }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Badge label={open.status === "confirmed" ? "Settled" : open.status === "suggested" ? "Proposed" : "Unmatched"} color={open.status === "confirmed" ? "emerald" : open.status === "suggested" ? "amber" : "red"} />
-              <Text size="sm" color="muted" tabular>{open.date}</Text>
-            </View>
-            <Text size="sm">{open.desc}</Text>
-            <Text size="lg" weight="semibold" tabular>{formatMoney(open.amount)}</Text>
-            <Divider />
-            {open.status === "unmatched" ? (
-              <View style={{ gap: 8 }}>
-                <Text size="sm" weight="semibold">Candidate invoices</Text>
-                <View style={{ gap: 2 }}>
-                  {candidatesFor(open, takenInvoices).map((c) => (
-                    <MenuListItem
-                      key={c.id}
-                      title={`${c.id} · ${c.customer}`}
-                      description={
-                        c.delta === 0
-                          ? `${formatMoney(c.amount)} — exact amount`
-                          : `${formatMoney(c.amount)} — off by ${formatMoney(Math.abs(c.delta))}${c.delta > 0 ? " (partial payment?)" : ""}`
-                      }
-                      onPress={() => setStatus(open.id, "confirmed", { invoice: c.id, confidence: "Amount + date" })}
-                    />
-                  ))}
-                </View>
-                <Text size="xs" color="muted">No candidate fits? Take an escape hatch below — unexplained money never stays unexplained.</Text>
-              </View>
-            ) : open.match ? (
-              <View style={{ gap: 6 }}>
-                <Text size="sm" weight="semibold">Matched invoice</Text>
-                <Text size="sm" weight="medium" tabular>{open.match.invoice}</Text>
-                <Text size="xs" color="muted">{`${invoiceOf(open.match.invoice)?.customer ?? "Non-invoice entry"} · matched on ${open.match.confidence.toLowerCase()}`}</Text>
-              </View>
-            ) : null}
-          </ScrollView>
-          <DrawerFooter>
-            {open.status === "unmatched" ? (
-              <>
-                <Button title="Record as bank fee" color="muted" onPress={() => setStatus(open.id, "confirmed", { invoice: "Bank fees · June", confidence: "Exact reference" })} />
-                <Button title="Create manual receipt" color="secondary" onPress={() => {}} />
-              </>
-            ) : open.status === "suggested" ? (
-              <Button title="Confirm match" color="primary" onPress={() => setStatus(open.id, "confirmed")} />
-            ) : (
-              <Button title="Open receipt record" color="primary" onPress={() => {}} />
-            )}
-          </DrawerFooter>
-        </Drawer>
-      ) : null}
-    </ScrollView>
-  );
-}

package/examples/tpl_run.tsx

@@ -1,235 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors, type ColorName } from "@lotics/ui/colors";
-import { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { Card, CardFooter } from "@lotics/ui/card";
-import { ChipGroup } from "@lotics/ui/chip_group";
-import { CompletionState } from "@lotics/ui/completion_state";
-import { DetailRow } from "@lotics/ui/detail_row";
-import { Divider } from "@lotics/ui/divider";
-import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
-import { formatMoney } from "@lotics/ui/format_money";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Run & post — stage a bulk operation, PREVIEW what it will do row by
-// row with a validation verdict, then commit the valid and HOLD the errors. Here:
-// a billing run (generate the period's invoices); the same shape serves a payroll
-// run, period-close postings, an MRP run, depreciation. Each row carries a status
-// — ready · needs review (posts, flagged) · blocked (held) — with the reason
-// inline; blockers are resolved in the drawer, which moves them back into the
-// postable set. The footer "Post" is GATED: you can never post a blocked line, and
-// the run can't apply more than it previews. CompletionState closes the run.
-// ─────────────────────────────────────────────────────────────────────────────
-
-type RunStatus = "ready" | "review" | "blocked";
-
-interface RunLine {
-  id: string;
-  customer: string;
-  ref: string;
-  amount: number;
-  status: RunStatus;
-  /** Why it's flagged / held — shown inline and in the drawer. */
-  issue?: string;
-}
-
-const STATUS: Record<RunStatus, { label: string; color: ColorName }> = {
-  ready: { label: "Ready", color: "emerald" },
-  review: { label: "Needs review", color: "amber" },
-  blocked: { label: "Blocked", color: "red" },
-};
-
-const LINES: RunLine[] = [
-  { id: "SO-4021", customer: "ATLAS COMPONENTS", ref: "Order SO-4021", amount: 31_414_670, status: "ready" },
-  { id: "SO-4024", customer: "Northwind Packaging", ref: "Order SO-4024", amount: 18_900_000, status: "ready" },
-  { id: "SO-4025", customer: "CRESTLINE FURNITURE", ref: "Order SO-4025", amount: 4_000_000, status: "review", issue: "PO number missing — invoice will post without it" },
-  { id: "SO-4027", customer: "King Lun Plastics", ref: "Order SO-4027", amount: 23_400_000, status: "ready" },
-  { id: "SO-4030", customer: "Vittoria Accessories", ref: "Order SO-4030", amount: 22_500_000, status: "review", issue: "Customer over credit limit by ₫8.4M" },
-  { id: "SO-4031", customer: "Harbor Industries", ref: "Order SO-4031", amount: 13_650_000, status: "blocked", issue: "Customer tax ID missing — cannot issue a tax invoice" },
-  { id: "SO-4033", customer: "Summit Logistics", ref: "Order SO-4033", amount: 9_180_000, status: "ready" },
-  { id: "SO-4035", customer: "Beacon Supplies", ref: "Order SO-4035", amount: 28_800_000, status: "blocked", issue: "Customer on credit hold — release the hold to invoice" },
-  { id: "SO-4036", customer: "Meridian Foods", ref: "Order SO-4036", amount: 16_320_000, status: "ready" },
-];
-
-const FILTERS: { value: string; label: string }[] = [
-  { value: "all", label: "All" },
-  { value: "ready", label: "Ready" },
-  { value: "review", label: "Needs review" },
-  { value: "blocked", label: "Blocked" },
-];
-
-const COLUMNS: TableColumn[] = [
-  { key: "customer", label: "Customer", flex: 1 },
-  { key: "amount", label: "Amount", width: 150, align: "right" },
-  { key: "status", label: "Verdict", width: 230 },
-];
-
-function RunRow({ line, status, onPress }: { line: RunLine; status: RunStatus; onPress: () => void }) {
-  const meta = STATUS[status];
-  return (
-    <TableRow onPress={onPress} accessibilityLabel={`Inspect ${line.customer}`}>
-      <TableCell>
-        <View style={{ gap: 0 }}>
-          <Text size="sm" weight="medium" numberOfLines={1}>{line.customer}</Text>
-          <Text size="xs" color="muted" tabular>{line.ref}</Text>
-        </View>
-      </TableCell>
-      <TableCell>
-        <Text size="sm" tabular>{formatMoney(line.amount)}</Text>
-      </TableCell>
-      <TableCell>
-        <View style={{ gap: 2 }}>
-          <Badge variant="dot" label={meta.label} color={meta.color} />
-          {status !== "ready" && line.issue ? (
-            <Text size="xs" color={status === "blocked" ? "danger" : "muted"} numberOfLines={1}>{line.issue}</Text>
-          ) : null}
-        </View>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-function InspectLine({ line, status, onResolve }: { line: RunLine; status: RunStatus; onResolve: () => void }) {
-  const meta = STATUS[status];
-  return (
-    <>
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 16 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-          <Badge variant="dot" label={meta.label} color={meta.color} />
-          <Text size="xs" color="muted" tabular style={{ flex: 1, textAlign: "right" }}>{line.ref}</Text>
-        </View>
-        <Text size="md" weight="medium">{line.customer}</Text>
-        <View style={{ gap: 6 }}>
-          <DetailRow label="Invoice total"><Text size="sm" weight="semibold" tabular>{formatMoney(line.amount)}</Text></DetailRow>
-          <Divider />
-          <DetailRow label="Source"><Text size="sm" tabular>{line.ref}</Text></DetailRow>
-        </View>
-        {status !== "ready" && line.issue ? (
-          <View style={{ gap: 4, padding: 14, borderRadius: 10, backgroundColor: status === "blocked" ? colors.red[50] : colors.amber[50] }}>
-            <Text size="xs" weight="semibold" color={status === "blocked" ? "danger" : "default"} transform="uppercase">
-              {status === "blocked" ? "Blocked" : "Needs review"}
-            </Text>
-            <Text size="sm">{line.issue}</Text>
-          </View>
-        ) : (
-          <Text size="sm" color="muted">No issues — this invoice will post in the run.</Text>
-        )}
-      </ScrollView>
-      <DrawerFooter>
-        {status === "blocked" ? (
-          <Button title="Resolve & include" color="primary" onPress={onResolve} />
-        ) : (
-          <Button title="Open order record" color="primary" onPress={() => {}} />
-        )}
-      </DrawerFooter>
-    </>
-  );
-}
-
-export function TplRun() {
-  const [resolved, setResolved] = useState<Set<string>>(new Set());
-  const [filter, setFilter] = useState("all");
-  const [openId, setOpenId] = useState<string | null>(null);
-  const [posted, setPosted] = useState(false);
-
-  // A resolved blocker re-enters the run as ready; a review still posts.
-  const statusOf = (l: RunLine): RunStatus => (resolved.has(l.id) && l.status === "blocked" ? "ready" : l.status);
-
-  const counts = { ready: 0, review: 0, blocked: 0 } as Record<RunStatus, number>;
-  LINES.forEach((l) => { counts[statusOf(l)] += 1; });
-
-  const postable = LINES.filter((l) => statusOf(l) !== "blocked");
-  const blocked = LINES.filter((l) => statusOf(l) === "blocked");
-  const postValue = postable.reduce((s, l) => s + l.amount, 0);
-
-  const visible = LINES.filter((l) => filter === "all" || statusOf(l) === filter);
-  const open = openId === null ? null : LINES.find((l) => l.id === openId) ?? null;
-
-  if (posted) {
-    return (
-      <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
-        <View style={{ width: "100%", maxWidth: 1000, alignSelf: "center" }}>
-          <Card style={{ padding: 0 }}>
-            <CompletionState
-              title="Billing run posted"
-              summary={`${postable.length} invoices · ${formatMoney(postValue)}${blocked.length ? ` · ${blocked.length} held for fixes` : ""}`}
-            >
-              <Button title="Start a new run" color="muted" onPress={() => { setPosted(false); setResolved(new Set()); setFilter("all"); }} />
-              <Button title="View posted invoices" color="primary" onPress={() => {}} />
-            </CompletionState>
-          </Card>
-        </View>
-      </ScrollView>
-    );
-  }
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 1000, alignSelf: "center", gap: 16 }}>
-        {/* header */}
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">June billing run</Text>
-          <Text size="sm" color="muted">Preview every invoice the run will create, clear the blockers, then post — blocked lines are held, never posted</Text>
-        </View>
-
-        {/* the run summary — the verdict breakdown the commit gates on */}
-        <KPIStrip
-          items={[
-            { label: "Ready", value: counts.ready, format: "number" },
-            { label: "Needs review", value: counts.review, format: "number", tone: counts.review > 0 ? "warning" : "default", info: "Soft issues — these post, but the flag is recorded (missing PO, over credit limit)." },
-            { label: "Blocked", value: counts.blocked, format: "number", tone: counts.blocked > 0 ? "danger" : "default", info: "Hard blockers — held out of the run until resolved (no tax ID, on credit hold)." },
-            { label: "Value to post", value: postValue, format: "currency", compact: true, caption: `${postable.length} invoices` },
-          ]}
-        />
-
-        {/* preview register — filter to the verdict you're working */}
-        <Card style={{ padding: 0 }}>
-          <View style={{ paddingHorizontal: 20, paddingVertical: 12 }}>
-            <ChipGroup
-              accessibilityLabel="Filter by verdict"
-              options={FILTERS.map((f) => ({
-                label: f.value === "all" ? `All · ${LINES.length}` : `${f.label} · ${counts[f.value as RunStatus]}`,
-                value: f.value,
-              }))}
-              value={filter}
-              onValueChange={setFilter}
-            />
-          </View>
-          <Table columns={COLUMNS}>
-            {visible.map((l) => (
-              <RunRow key={l.id} line={l} status={statusOf(l)} onPress={() => setOpenId(l.id)} />
-            ))}
-          </Table>
-          <CardFooter>
-            <Text size="xs" color={blocked.length > 0 ? "danger" : "muted"} style={{ flex: 1 }}>
-              {blocked.length > 0
-                ? `${blocked.length} blocked held back — resolve to include them`
-                : "All lines clear — nothing held back"}
-            </Text>
-            <Button
-              title={`Post ${postable.length} invoices`}
-              color="primary"
-              disabled={postable.length === 0}
-              onPress={() => setPosted(true)}
-            />
-          </CardFooter>
-        </Card>
-      </View>
-
-      {open !== null ? (
-        <Drawer open onOpenChange={(o) => !o && setOpenId(null)} title={open.customer} width={440}>
-          <InspectLine
-            key={open.id}
-            line={open}
-            status={statusOf(open)}
-            onResolve={() => { setResolved((prev) => new Set(prev).add(open.id)); setOpenId(null); }}
-          />
-        </Drawer>
-      ) : null}
-    </ScrollView>
-  );
-}