@lotics/ui 7.8.0 → 7.10.0

package/examples/tpl_approvals.tsx

@@ -1,375 +0,0 @@
-import { useState } from "react";
-import { Pressable, ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors, solid } from "@lotics/ui/colors";
-import { Avatar } from "@lotics/ui/avatar";
-import { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
-import { CheckboxInput } from "@lotics/ui/checkbox_input";
-import { DetailRow } from "@lotics/ui/detail_row";
-import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
-import { Divider } from "@lotics/ui/divider";
-import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
-import { EmptyState } from "@lotics/ui/empty_state";
-import { Counter } from "@lotics/ui/counter";
-import { FilterChip, selectSummary } from "@lotics/ui/filter_chip";
-import { FloatingActionBar } from "@lotics/ui/floating_action_bar";
-import { FormField } from "@lotics/ui/form_field";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { OptionList } from "@lotics/ui/option_list";
-import { Popover, PopoverContent, PopoverFooter, PopoverTrigger } from "@lotics/ui/popover";
-import { RangeSlider, rangeSummary } from "@lotics/ui/range_slider";
-import { PressableRow } from "@lotics/ui/pressable_row";
-import { Screen } from "@lotics/ui/screen_router";
-import { ChipGroup } from "@lotics/ui/chip_group";
-import { TextInputField } from "@lotics/ui/text_input_field";
-import { Timeline } from "@lotics/ui/timeline";
-import { formatMoney } from "@lotics/ui/format_money";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Approvals — the work is a VERDICT, not a process step. The
-// design splits routine from exception: in-policy requests approve in one
-// click (or in bulk via checkboxes + the floating bar); over-policy
-// requests lose the checkbox and force the drawer, where the policy band
-// shows exactly what's being overridden, and approval is a Dialog with
-// the consequence spelled out. Reject always asks one question — why —
-// in a popover. The row press opens the sequenced request workspace.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface Request {
-  id: string;
-  type: "purchase" | "discount" | "expense";
-  requester: string;
-  role: string;
-  summary: string;
-  amount: number;
-  /** The policy ceiling for this request kind/requester. */
-  limit: number;
-  ageDays: number;
-  note: string;
-}
-
-const REQUESTS: Request[] = [
-  { id: "REQ-0231", type: "purchase", requester: "Maria Lopez", role: "Procurement", summary: "Corrugated sheets — restock for the June run", amount: 18_400_000, limit: 20_000_000, ageDays: 1, note: "Supplier quote attached; same unit price as May." },
-  { id: "REQ-0232", type: "purchase", requester: "James Wu", role: "Production", summary: "Die-cut blade replacement set", amount: 6_750_000, limit: 20_000_000, ageDays: 2, note: "Current blades past rated cycles." },
-  { id: "REQ-0234", type: "purchase", requester: "Maria Lopez", role: "Procurement", summary: "Ink — spot color for ATLAS order", amount: 23_400_000, limit: 20_000_000, ageDays: 6, note: "Rush order; only one supplier stocks this color." },
-  { id: "REQ-0236", type: "purchase", requester: "David Park", role: "Warehouse", summary: "Pallet wrap, 40 rolls", amount: 3_120_000, limit: 20_000_000, ageDays: 1, note: "Routine restock." },
-  { id: "REQ-0228", type: "discount", requester: "Sarah Chen", role: "Sales", summary: "CRESTLINE — 8% on repeat order SR-2026-0091", amount: 4_980_000, limit: 6_000_000, ageDays: 3, note: "Customer at 96% on-time payment; volume up 20% QoQ." },
-  { id: "REQ-0237", type: "discount", requester: "Daniel Reed", role: "Sales", summary: "NEW client trial — 15% on first order", amount: 9_300_000, limit: 6_000_000, ageDays: 4, note: "Competitor quote attached; strategic account." },
-  { id: "REQ-0229", type: "expense", requester: "Emma Davis", role: "Sales", summary: "Client visit — Haiphong, 2 days", amount: 2_840_000, limit: 5_000_000, ageDays: 2, note: "Itinerary attached." },
-  { id: "REQ-0233", type: "expense", requester: "James Wu", role: "Production", summary: "Forklift repair — emergency callout", amount: 7_600_000, limit: 5_000_000, ageDays: 5, note: "Invoice from the service vendor attached." },
-  { id: "REQ-0235", type: "expense", requester: "David Park", role: "Warehouse", summary: "Safety gloves and boots, Q3", amount: 1_950_000, limit: 5_000_000, ageDays: 1, note: "Annual PPE refresh." },
-];
-
-const TYPE_LABEL: Record<Request["type"], string> = { purchase: "Purchase", discount: "Discount", expense: "Expense" };
-
-// Distinct facet values, derived from the data — the secondary filter dimensions.
-const REQUESTERS = [...new Set(REQUESTS.map((r) => r.requester))].map((n) => ({ label: n, value: n }));
-const ROLES = [...new Set(REQUESTS.map((r) => r.role))].map((n) => ({ label: n, value: n }));
-const AMT_MIN = 0;
-const AMT_MAX = 25_000_000;
-
-const overPolicy = (r: Request) => r.amount > r.limit;
-const overPct = (r: Request) => Math.round(((r.amount - r.limit) / r.limit) * 100);
-
-function RejectGate({ id, onReject }: { id: string; onReject: () => void }) {
-  const [reason, setReason] = useState("");
-  return (
-    <Popover side="top" align="end">
-      <PopoverTrigger>
-        <Button title="Reject" color="muted" />
-      </PopoverTrigger>
-      <PopoverContent style={{ width: 300 }} disableBodyScroll>
-        <View style={{ gap: 12 }}>
-          <View style={{ gap: 2 }}>
-            <Text size="sm" weight="semibold">{`Reject ${id}`}</Text>
-            <Text size="xs" color="muted">The requester sees this reason — say what would change the decision.</Text>
-          </View>
-          <FormField label="Reason">
-            <TextInputField value={reason} onChangeText={setReason} placeholder="e.g. defer to July budget…" />
-          </FormField>
-        </View>
-        <PopoverFooter>
-          <Button title="Reject request" color="danger" onPress={onReject} />
-        </PopoverFooter>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function OverrideGate({ r, onApprove }: { r: Request; onApprove: () => void }) {
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <Button title="Approve over policy" color="primary" onPress={() => setOpen(true)} />
-      <Dialog width={460} open={open} onOpenChange={setOpen}>
-        <Screen route="">
-          <DialogHeader>
-            <DialogHeaderTitle>{`Approve ${r.id} over policy`}</DialogHeaderTitle>
-          </DialogHeader>
-          <View style={{ padding: 24, gap: 10 }}>
-            <Text size="sm" color="muted">
-              {`This ${TYPE_LABEL[r.type].toLowerCase()} is ${formatMoney(r.amount - r.limit)} (+${overPct(r)}%) above the ${formatMoney(r.limit)} policy ceiling. Your approval is recorded as a policy override and appears in the monthly exceptions report.`}
-            </Text>
-          </View>
-          <DialogFooter>
-            <Button title="Cancel" color="secondary" onPress={() => setOpen(false)} />
-            <Button title="Approve and record override" color="primary" onPress={() => { setOpen(false); onApprove(); }} />
-          </DialogFooter>
-        </Screen>
-      </Dialog>
-    </>
-  );
-}
-
-function RequestWorkspace({ r, onDecide }: { r: Request; onDecide: () => void }) {
-  return (
-    <>
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 14 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-          <Badge label={TYPE_LABEL[r.type]} color="blue" />
-          {overPolicy(r) ? <Badge label={`Over limit +${overPct(r)}%`} color="red" /> : <Badge label="In policy" color="emerald" />}
-        </View>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-          <Avatar name={r.requester} size={32} />
-          <View style={{ gap: 0 }}>
-            <Text size="sm" weight="medium">{r.requester}</Text>
-            <Text size="xs" color="muted">{r.role}</Text>
-          </View>
-        </View>
-        <Text size="sm">{r.summary}</Text>
-        <Text size="sm" color="muted">{r.note}</Text>
-        <Divider />
-        {/* the policy band — the one comparison the verdict rests on */}
-        <View style={{ gap: 6 }}>
-          <DetailRow label="Requested">
-            <Text size="sm" weight="semibold" tabular>{formatMoney(r.amount)}</Text>
-          </DetailRow>
-          <Divider />
-          <DetailRow label="Policy ceiling">
-            <Text size="sm" tabular>{formatMoney(r.limit)}</Text>
-          </DetailRow>
-          <Divider />
-          <DetailRow label="Headroom">
-            <Text size="sm" tabular color={overPolicy(r) ? "danger" : "default"}>
-              {overPolicy(r) ? `−${formatMoney(r.amount - r.limit)} (+${overPct(r)}%)` : formatMoney(r.limit - r.amount)}
-            </Text>
-          </DetailRow>
-        </View>
-        <View style={{ gap: 8, paddingTop: 4 }}>
-          <Text size="sm" weight="semibold">History</Text>
-          <Timeline
-            items={[
-              { id: "submit", icon: "send", iconColor: solid("blue"), label: `Submitted by ${r.requester}`, right: <Text size="xs" color="muted" tabular>{`${r.ageDays}d ago`}</Text> },
-              { id: "routed", icon: "check", iconColor: solid("emerald"), label: "Budget line verified — routed to you", right: <Text size="xs" color="muted" tabular>{`${Math.max(0, r.ageDays - 1)}d ago`}</Text> },
-            ]}
-          />
-        </View>
-      </ScrollView>
-      <DrawerFooter>
-        <RejectGate id={r.id} onReject={onDecide} />
-        {overPolicy(r) ? <OverrideGate r={r} onApprove={onDecide} /> : <Button title="Approve" color="primary" onPress={onDecide} />}
-      </DrawerFooter>
-    </>
-  );
-}
-
-export function TplApprovals() {
-  const [pending, setPending] = useState<Request[]>(REQUESTS);
-  const [tab, setTab] = useState("all");
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [openId, setOpenId] = useState<string | null>(null);
-  const [reqSel, setReqSel] = useState<string[]>([]);
-  const [roleSel, setRoleSel] = useState<string[]>([]);
-  const [amt, setAmt] = useState<[number, number]>([AMT_MIN, AMT_MAX]);
-  const [minDays, setMinDays] = useState(0);
-
-  const visible = pending.filter(
-    (r) =>
-      (tab === "all" || r.type === tab) &&
-      (reqSel.length === 0 || reqSel.includes(r.requester)) &&
-      (roleSel.length === 0 || roleSel.includes(r.role)) &&
-      r.amount >= amt[0] &&
-      r.amount <= amt[1] &&
-      r.ageDays >= minDays,
-  );
-  const open = pending.find((r) => r.id === openId) ?? null;
-  const seqIndex = open ? visible.findIndex((r) => r.id === open.id) : -1;
-
-  const over = pending.filter(overPolicy).length;
-  const oldest = pending.reduce((m, r) => Math.max(m, r.ageDays), 0);
-  const totalValue = pending.reduce((s, r) => s + r.amount, 0);
-
-  // A decision removes the request from the inbox — approve and reject both
-  // resolve it here; the record lives on in its own register.
-  const decide = (ids: string[]) => {
-    setPending((prev) => prev.filter((r) => !ids.includes(r.id)));
-    setSelected((prev) => new Set([...prev].filter((id) => !ids.includes(id))));
-    setOpenId(null);
-  };
-
-  const routineVisible = visible.filter((r) => !overPolicy(r));
-  const allRoutineSelected = routineVisible.length > 0 && routineVisible.every((r) => selected.has(r.id));
-
-  const counts = (t: string) => pending.filter((r) => t === "all" || r.type === t).length;
-
-  const fmtAmt = (n: number) => formatMoney(n, { compact: true });
-  const reqSummary = selectSummary(reqSel, REQUESTERS);
-  const roleSummary = selectSummary(roleSel, ROLES, { max: 3 });
-  const amtSummary = rangeSummary(amt, fmtAmt, [AMT_MIN, AMT_MAX]);
-  const daysSummary = minDays > 0 ? `≥ ${minDays}d` : undefined;
-
-  return (
-    <View style={{ flex: 1 }}>
-      <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
-        <View style={{ width: "100%", maxWidth: 980, alignSelf: "center", gap: 16 }}>
-          {/* header band */}
-          <View style={{ gap: 2 }}>
-            <Text size="xl" weight="semibold">Approvals</Text>
-            <Text size="sm" color="muted">Decide, don't process — routine requests in bulk, exceptions with full attention</Text>
-          </View>
-
-          <KPIStrip
-            items={[
-              { label: "Awaiting decision", value: pending.length, format: "number" },
-              { label: "Over policy", value: over, format: "number", tone: over > 0 ? "danger" : "default", info: "Requests above their policy ceiling — no checkbox, no one-click: each one opens its workspace and approval is recorded as an override." },
-              { label: "Oldest waiting", value: oldest, format: "number", caption: "days — requesters are blocked" },
-              { label: "Requested value", value: totalValue, format: "currency", compact: true },
-            ]}
-          />
-
-          {/* layered filter band — the hot dimension (type) inline as chips,
-              secondary dimensions collapsed into FilterChips so the band stays
-              scannable as more facets are added */}
-          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
-            <ChipGroup
-              accessibilityLabel="Request type"
-              options={[
-                { label: `All · ${counts("all")}`, value: "all" },
-                { label: `Purchases · ${counts("purchase")}`, value: "purchase" },
-                { label: `Discounts · ${counts("discount")}`, value: "discount" },
-                { label: `Expenses · ${counts("expense")}`, value: "expense" },
-              ]}
-              value={tab}
-              onValueChange={(t) => { setTab(t); setOpenId(null); }}
-            />
-            <FilterChip label="Requester" summary={reqSummary} onClear={() => setReqSel([])} clearLabel="Clear requester filter">
-              <OptionList search={{ mode: "none" }} multi options={REQUESTERS} value={reqSel} onValueChange={setReqSel} />
-            </FilterChip>
-            <FilterChip label="Role" summary={roleSummary} onClear={() => setRoleSel([])} clearLabel="Clear role filter">
-              <OptionList search={{ mode: "none" }} multi options={ROLES} value={roleSel} onValueChange={setRoleSel} />
-            </FilterChip>
-            <FilterChip label="Amount" summary={amtSummary} onClear={() => setAmt([AMT_MIN, AMT_MAX])} clearLabel="Clear amount filter">
-              <RangeSlider
-                min={AMT_MIN}
-                max={AMT_MAX}
-                step={500_000}
-                value={amt}
-                onValueChange={setAmt}
-                format={fmtAmt}
-                accessibilityLabel="Amount"
-              />
-            </FilterChip>
-            <FilterChip label="Waiting" summary={daysSummary} onClear={() => setMinDays(0)} clearLabel="Clear waiting filter">
-              <View style={{ gap: 10 }}>
-                <Text size="sm" color="muted">Waiting at least</Text>
-                <Counter
-                  value={minDays}
-                  min={0}
-                  max={14}
-                  onValueChange={setMinDays}
-                  accessibilityLabel="minimum days waiting"
-                  format={(n) => `${n} ${n === 1 ? "day" : "days"}`}
-                />
-              </View>
-            </FilterChip>
-          </View>
-
-          <Card style={{ padding: 0 }}>
-            <CardHeader>
-              <CheckboxInput
-                accessibilityLabel="Select all in-policy requests"
-                checked={allRoutineSelected}
-                indeterminate={!allRoutineSelected && routineVisible.some((r) => selected.has(r.id))}
-                onChange={(on) => setSelected(on ? new Set([...selected, ...routineVisible.map((r) => r.id)]) : new Set([...selected].filter((id) => !routineVisible.some((r) => r.id === id))))}
-                disabled={routineVisible.length === 0}
-              />
-              <CardHeaderTitle info="Press a row to open the request; tick in-policy rows to approve in bulk. Over-policy rows have no checkbox — they must be opened.">
-                Inbox
-              </CardHeaderTitle>
-            </CardHeader>
-            {visible.length === 0 ? (
-              <EmptyState message="Inbox zero" hint="Nothing awaits your decision in this view" />
-            ) : null}
-            {visible.map((r, i) => (
-              <View key={r.id}>
-                {i > 0 ? <Divider /> : null}
-                <PressableRow onPress={() => setOpenId(r.id)} selected={open?.id === r.id} marked={selected.has(r.id)}>
-                  {overPolicy(r) ? (
-                    // matches the 24px Checkbox footprint so rows stay aligned
-                    <View style={{ width: 24 }} />
-                  ) : (
-                    <CheckboxInput
-                      accessibilityLabel={`Select ${r.id}`}
-                      checked={selected.has(r.id)}
-                      onChange={(on) => setSelected((prev) => { const next = new Set(prev); if (on) next.add(r.id); else next.delete(r.id); return next; })}
-                    />
-                  )}
-                  <Pressable
-                    accessibilityRole="button"
-                    accessibilityLabel={`Open request ${r.id}`}
-                    onPress={() => setOpenId(r.id)}
-                    style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12, minHeight: 52 }}
-                  >
-                    <Avatar name={r.requester} size={28} />
-                    <View style={{ flex: 1, gap: 0 }}>
-                      <Text size="sm" numberOfLines={1}>{r.summary}</Text>
-                      <Text size="xs" color="muted">{`${r.requester} · ${TYPE_LABEL[r.type]} · ${r.ageDays}d waiting`}</Text>
-                    </View>
-                    <Text size="sm" tabular align="right" style={{ width: 104 }}>{formatMoney(r.amount)}</Text>
-                    <View style={{ width: 104 }}>
-                      {overPolicy(r) ? <Badge variant="dot" label={`Over +${overPct(r)}%`} color="red" /> : <Badge variant="dot" label="In policy" color="emerald" />}
-                    </View>
-                  </Pressable>
-                  {/* routine verdict = one click; the exception path lives in the drawer.
-                      Fixed-width keeps the trailing column constant so the amount +
-                      status columns line up across in-policy and over-policy rows. */}
-                  {overPolicy(r) ? (
-                    <Button title="Review" color="muted" onPress={() => setOpenId(r.id)} style={{ width: 96 }} />
-                  ) : (
-                    <Button title="Approve" color="secondary" onPress={() => decide([r.id])} style={{ width: 96 }} />
-                  )}
-                </PressableRow>
-              </View>
-            ))}
-            <CardFooter>
-              <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
-                {visible.length === 0 ? "Inbox zero — nothing awaits your decision" : `${visible.length} requests · approving an over-policy request is always recorded as an override`}
-              </Text>
-            </CardFooter>
-          </Card>
-        </View>
-      </ScrollView>
-
-      {/* bulk-approve the ticked in-policy requests */}
-      <FloatingActionBar count={selected.size} label="in-policy requests" onClear={() => setSelected(new Set())}>
-        <Button title={`Approve ${selected.size}`} color="primary" onPress={() => decide([...selected])} />
-      </FloatingActionBar>
-
-      {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}
-        >
-          <RequestWorkspace key={open.id} r={open} onDecide={() => decide([open.id])} />
-        </Drawer>
-      ) : null}
-    </View>
-  );
-}

package/examples/tpl_batch.tsx

@@ -1,234 +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 { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
-import { CheckboxInput } from "@lotics/ui/checkbox_input";
-import { DetailRow } from "@lotics/ui/detail_row";
-import { Divider } from "@lotics/ui/divider";
-import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
-import { EmptyState } from "@lotics/ui/empty_state";
-import { IconButton } from "@lotics/ui/icon_button";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { PressableRow } from "@lotics/ui/pressable_row";
-import { formatMoney } from "@lotics/ui/format_money";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Batch builder — the work COMPOSES a new record from parts:
-// tick source rows, watch the draft build with running totals, create the
-// aggregate (here: uninvoiced deliveries → one invoice; same shape for
-// payment runs, shipment consolidation, PO bundling). The grouping rule —
-// one invoice, one customer — is enforced at the checkbox: once the first
-// row is ticked, other customers' rows disable with the reason visible.
-// The draft panel is the live preview; Create resolves the batch and the
-// source rows leave the pool.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface Delivery {
-  id: string;
-  customer: string;
-  description: string;
-  date: string;
-  ageDays: number;
-  amount: number;
-}
-
-const DELIVERIES: Delivery[] = [
-  { id: "DL-0214", customer: "ATLAS COMPONENTS", description: "Carton blank sheet 675×325 — 2,747 pcs", date: "27/05", ageDays: 16, amount: 8_982_690 },
-  { id: "DL-0218", customer: "ATLAS COMPONENTS", description: "Full cover box 1470×290×168 — 580 pcs", date: "02/06", ageDays: 10, amount: 31_414_670 },
-  { id: "DL-0223", customer: "ATLAS COMPONENTS", description: "Full cover box 1470×290×168 — 582 pcs", date: "09/06", ageDays: 3, amount: 31_414_670 },
-  { id: "DL-0216", customer: "CRESTLINE FURNITURE", description: "TOP COVER long brace — 2,500 sets", date: "30/05", ageDays: 13, amount: 2_000_000 },
-  { id: "DL-0221", customer: "CRESTLINE FURNITURE", description: "TOP COVER long brace — 2,500 sets", date: "06/06", ageDays: 6, amount: 2_000_000 },
-  { id: "DL-0219", customer: "KING LUN PLASTICS", description: "Inner box VTD063518 — 3,000 pcs", date: "04/06", ageDays: 8, amount: 23_400_000 },
-  { id: "DL-0224", customer: "VITTORIA ACCESSORIES", description: "Accessory carton 400×300×250 — 1,250 pcs", date: "10/06", ageDays: 2, amount: 11_250_000 },
-  { id: "DL-0225", customer: "VITTORIA ACCESSORIES", description: "Accessory carton 400×300×250 — 1,250 pcs", date: "11/06", ageDays: 1, amount: 11_250_000 },
-];
-
-const VAT_RATE = 0.08;
-
-export function TplBatch() {
-  const [pool, setPool] = useState<Delivery[]>(DELIVERIES);
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [openId, setOpenId] = useState<string | null>(null);
-
-  const picked = pool.filter((d) => selected.has(d.id));
-  // The grouping rule: the first ticked row locks the batch to its customer.
-  const lockedCustomer = picked[0]?.customer ?? null;
-
-  const toggle = (id: string, on: boolean) =>
-    setSelected((prev) => { const next = new Set(prev); if (on) next.add(id); else next.delete(id); return next; });
-
-  const customers = [...new Set(pool.map((d) => d.customer))];
-  const subtotal = picked.reduce((s, d) => s + d.amount, 0);
-  const vat = Math.round(subtotal * VAT_RATE);
-  const oldest = pool.reduce((m, d) => Math.max(m, d.ageDays), 0);
-
-  const create = () => {
-    setPool((prev) => prev.filter((d) => !selected.has(d.id)));
-    setSelected(new Set());
-    setOpenId(null);
-  };
-
-  const open = pool.find((d) => d.id === openId) ?? null;
-  const seqIndex = open ? pool.findIndex((d) => d.id === open.id) : -1;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 1060, alignSelf: "center", gap: 16 }}>
-        {/* header band */}
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Invoice builder</Text>
-          <Text size="sm" color="muted">Tick deliveries, watch the draft build, create one invoice — one customer per batch</Text>
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Uninvoiced deliveries", value: pool.length, format: "number" },
-            { label: "Value uninvoiced", value: pool.reduce((s, d) => s + d.amount, 0), format: "currency", compact: true, info: "Goods delivered but not yet billed — every day here is working capital lent to the customer for free." },
-            { label: "Customers awaiting", value: customers.length, format: "number", caption: "one invoice each" },
-            { label: "Oldest delivery", value: oldest, format: "number", tone: oldest > 14 ? "danger" : "default", caption: "days unbilled" },
-          ]}
-        />
-
-        <View style={{ flexDirection: "row", gap: 16, alignItems: "flex-start", flexWrap: "wrap" }}>
-          {/* the source pool, grouped by the batching key */}
-          <Card style={{ padding: 0, flexGrow: 2, flexBasis: 540 }}>
-            <CardHeader>
-              <CardHeaderTitle info="One invoice covers one customer: the first ticked row locks the batch, and other customers' rows disable until you clear it.">
-                Uninvoiced deliveries
-              </CardHeaderTitle>
-            </CardHeader>
-            {pool.length === 0 ? (
-              <EmptyState message="Everything is billed" hint="The pool refills as deliveries complete" />
-            ) : (
-              customers.map((customer) => {
-                const rows = pool.filter((d) => d.customer === customer);
-                const blocked = lockedCustomer !== null && lockedCustomer !== customer;
-                const allPicked = rows.every((d) => selected.has(d.id));
-                return (
-                  <View key={customer}>
-                    <View style={{ flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 20, paddingTop: 14, paddingBottom: 6 }}>
-                      <CheckboxInput
-                        accessibilityLabel={`Select all deliveries for ${customer}`}
-                        checked={allPicked && rows.length > 0}
-                        indeterminate={!allPicked && rows.some((d) => selected.has(d.id))}
-                        disabled={blocked}
-                        onChange={(on) => setSelected((prev) => {
-                          const next = new Set(prev);
-                          rows.forEach((d) => { if (on) next.add(d.id); else next.delete(d.id); });
-                          return next;
-                        })}
-                      />
-                      <Text size="xs" color="muted" transform="uppercase" style={{ flex: 1 }}>{customer}</Text>
-                      {blocked ? <Text size="xs" color="muted">{`batch locked to ${lockedCustomer}`}</Text> : null}
-                    </View>
-                    <View style={{ paddingHorizontal: 20, paddingBottom: 10, gap: 2 }}>
-                    {rows.map((d) => (
-                      <PressableRow key={d.id} variant="inset" marked={selected.has(d.id)} onPress={() => setOpenId(d.id)} selected={open?.id === d.id} style={{ gap: 10 }}>
-                        <CheckboxInput
-                          accessibilityLabel={`Select ${d.id}`}
-                          checked={selected.has(d.id)}
-                          disabled={blocked}
-                          onChange={(on) => toggle(d.id, on)}
-                        />
-                        <Pressable
-                          accessibilityRole="button"
-                          accessibilityLabel={`Open delivery ${d.id}`}
-                          onPress={() => setOpenId(d.id)}
-                          style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12, minHeight: 44 }}
-                        >
-                          <Text size="sm" weight="medium" tabular style={{ width: 70 }}>{d.id}</Text>
-                          <Text size="sm" numberOfLines={1} style={{ flex: 1 }}>{d.description}</Text>
-                          <Text size="sm" color={d.ageDays > 14 ? "danger" : "muted"} tabular style={{ width: 44 }}>{`${d.ageDays}d`}</Text>
-                          <Text size="sm" tabular align="right" style={{ width: 104 }}>{formatMoney(d.amount)}</Text>
-                        </Pressable>
-                      </PressableRow>
-                    ))}
-                    </View>
-                  </View>
-                );
-              })
-            )}
-            <CardFooter>
-              <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
-                {`${pool.length} deliveries · ${formatMoney(pool.reduce((s, d) => s + d.amount, 0), { compact: true })} unbilled`}
-              </Text>
-            </CardFooter>
-          </Card>
-
-          {/* the draft — a live preview of the record being composed */}
-          <Card style={{ padding: 0, flexGrow: 1, flexBasis: 320 }}>
-            <CardHeader>
-              <CardHeaderTitle info="The invoice being composed — lines, totals and VAT update as you tick. Create resolves the batch; the deliveries leave the pool.">
-                Draft invoice
-              </CardHeaderTitle>
-            </CardHeader>
-            {picked.length === 0 ? (
-              <EmptyState message="No lines yet" hint="Tick deliveries on the left to start the draft" />
-            ) : (
-              <>
-                <View style={{ paddingHorizontal: 20, paddingVertical: 14, gap: 10 }}>
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                    <Badge label={lockedCustomer ?? ""} color="blue" />
-                    <Text size="xs" color="muted" tabular>{`${picked.length} lines`}</Text>
-                  </View>
-                  <View style={{ gap: 4 }}>
-                    {picked.map((d) => (
-                      <View key={d.id} style={{ flexDirection: "row", alignItems: "center", gap: 8, minHeight: 28 }}>
-                        <Text size="sm" color="muted" tabular style={{ width: 70 }}>{d.id}</Text>
-                        <Text size="xs" color="muted" numberOfLines={1} style={{ flex: 1 }}>{d.date}</Text>
-                        <Text size="sm" tabular align="right">{formatMoney(d.amount)}</Text>
-                        <IconButton icon="x" accessibilityLabel={`Remove ${d.id} from the draft`} onPress={() => toggle(d.id, false)} />
-                      </View>
-                    ))}
-                  </View>
-                  <Divider />
-                  <DetailRow label="Subtotal"><Text size="sm" tabular>{formatMoney(subtotal)}</Text></DetailRow>
-                  <DetailRow label={`VAT ${Math.round(VAT_RATE * 100)}%`}><Text size="sm" tabular>{formatMoney(vat)}</Text></DetailRow>
-                  <Divider />
-                  <DetailRow label="Total"><Text size="md" weight="semibold" tabular>{formatMoney(subtotal + vat)}</Text></DetailRow>
-                </View>
-                <CardFooter>
-                  <Button title="Clear" color="muted" onPress={() => setSelected(new Set())} />
-                  <View style={{ flex: 1 }} />
-                  <Button title="Create invoice" color="primary" onPress={create} />
-                </CardFooter>
-              </>
-            )}
-          </Card>
-        </View>
-      </View>
-
-      {open !== null ? (
-        <Drawer
-          open
-          onOpenChange={(o) => !o && setOpenId(null)}
-          title={open.id}
-          width={440}
-          onPrev={seqIndex > 0 ? () => setOpenId(pool[seqIndex - 1].id) : undefined}
-          onNext={seqIndex >= 0 && seqIndex < pool.length - 1 ? () => setOpenId(pool[seqIndex + 1].id) : undefined}
-          position={seqIndex >= 0 ? `${seqIndex + 1}/${pool.length}` : undefined}
-        >
-          <View key={open.id} style={{ flex: 1, padding: 24, gap: 14 }}>
-            <Badge label={open.customer} color="blue" />
-            <Text size="sm">{open.description}</Text>
-            <View style={{ gap: 6 }}>
-              <DetailRow label="Delivered"><Text size="sm" tabular>{open.date}</Text></DetailRow>
-              <Divider />
-              <DetailRow label="Days unbilled">
-                <Text size="sm" tabular color={open.ageDays > 14 ? "danger" : "default"}>{`${open.ageDays} days`}</Text>
-              </DetailRow>
-              <Divider />
-              <DetailRow label="Amount"><Text size="sm" tabular>{formatMoney(open.amount)}</Text></DetailRow>
-            </View>
-          </View>
-          <DrawerFooter>
-            <Button title="Open delivery record" color="primary" onPress={() => {}} />
-          </DrawerFooter>
-        </Drawer>
-      ) : null}
-    </ScrollView>
-  );
-}