@lotics/ui 3.6.0 → 4.0.0

package/examples/tpl_attendance.tsx

@@ -0,0 +1,355 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid } from "@lotics/ui/colors";
+import { Accordion, AccordionContent, AccordionHeader } from "@lotics/ui/accordion";
+import { ActionMenu } from "@lotics/ui/action_menu";
+import { Avatar } from "@lotics/ui/avatar";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer } from "@lotics/ui/drawer";
+import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
+import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { Picker } from "@lotics/ui/picker";
+import { Tabs } from "@lotics/ui/tabs";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Attendance. The daily attendance desk: who is in, who
+// is late, who is out, plus the weekly per-person grid. Emerald = presence;
+// badge colors carry the status meaning (amber late / red absent / blue leave).
+//
+// Grammar: zinc-50 canvas · header + month Picker · KPIStrip (four counts) ·
+// Tabs Today / This week. "Today" = one banded roster Card — each row
+// press-opens the employee workspace Drawer (◀ ▶ sequencing) and carries a
+// ⋯ ActionMenu with the day's quick fixes. "This week" = per-person Accordion
+// rows: five day markers, expanding to the day-by-day detail in place.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type TrangThai = "co_mat" | "di_muon" | "vang" | "nghi_phep";
+type NgayCong = "du" | "muon" | "vang" | "phep";
+
+interface NhanVien {
+  id: string;
+  ten: string;
+  chucVu: string;
+  vao?: string;
+  ra?: string;
+  trangThai: TrangThai;
+  /** Minutes late — only for di_muon rows; feeds the badge label. */
+  muonPhut?: number;
+  /** Hours worked today — only once the person has checked out. */
+  tongGio?: string;
+  /** T2 → T6 of the current week. */
+  tuan: NgayCong[];
+  tongTuan: string;
+}
+
+const NHAN_VIEN: NhanVien[] = [
+  { id: "NV-01", ten: "Daniel Reed", chucVu: "Plant supervisor", vao: "07:52", ra: "17:05", trangThai: "co_mat", tongGio: "9,2h", tuan: ["du", "du", "du", "du", "du"], tongTuan: "42,1h" },
+  { id: "NV-02", ten: "Tessa Tran", chucVu: "Accountant", vao: "07:58", trangThai: "co_mat", tuan: ["du", "du", "muon", "du", "du"], tongTuan: "40,6h" },
+  { id: "NV-03", ten: "Martin Pike", chucVu: "Sales rep", vao: "08:12", trangThai: "di_muon", muonPhut: 12, tuan: ["muon", "du", "du", "muon", "muon"], tongTuan: "39,8h" },
+  { id: "NV-04", ten: "Helen Lee", chucVu: "Warehouse keeper", vao: "07:45", ra: "17:02", trangThai: "co_mat", tongGio: "9,3h", tuan: ["du", "du", "du", "du", "du"], tongTuan: "41,9h" },
+  { id: "NV-05", ten: "Nolan Hayes", chucVu: "Delivery driver", trangThai: "vang", tuan: ["du", "vang", "du", "du", "vang"], tongTuan: "24,3h" },
+  { id: "NV-06", ten: "Maria Vu", chucVu: "HR & admin", trangThai: "nghi_phep", tuan: ["du", "du", "phep", "phep", "phep"], tongTuan: "16,4h" },
+  { id: "NV-07", ten: "Bruno Dale", chucVu: "Machine operator", vao: "07:49", trangThai: "co_mat", tuan: ["du", "du", "du", "du", "du"], tongTuan: "42,0h" },
+  { id: "NV-08", ten: "Nina Burke", chucVu: "Sales rep", vao: "08:27", trangThai: "di_muon", muonPhut: 27, tuan: ["du", "muon", "du", "du", "muon"], tongTuan: "40,2h" },
+  { id: "NV-09", ten: "Theo Nash", chucVu: "Maintenance", vao: "07:56", ra: "16:45", trangThai: "co_mat", tongGio: "8,8h", tuan: ["du", "du", "du", "du", "du"], tongTuan: "41,7h" },
+];
+
+const TRANG_THAI: Record<TrangThai, { label: string; color: "emerald" | "amber" | "red" | "blue" }> = {
+  co_mat: { label: "Present", color: "emerald" },
+  di_muon: { label: "Late", color: "amber" },
+  vang: { label: "Absent", color: "red" },
+  nghi_phep: { label: "On leave", color: "blue" },
+};
+
+const NGAY_CONG: Record<NgayCong, { bg: string; border: string; label: string }> = {
+  du: { bg: solid("emerald"), border: solid("emerald"), label: "Full day" },
+  muon: { bg: solid("amber"), border: solid("amber"), label: "Late" },
+  vang: { bg: colors.white, border: solid("red"), label: "Absent" },
+  phep: { bg: solid("blue"), border: solid("blue"), label: "On leave" },
+};
+
+const THANG = [
+  { label: "April 2026", value: "2026-04" },
+  { label: "May 2026", value: "2026-05" },
+  { label: "June 2026", value: "2026-06" },
+];
+
+const TAB = [
+  { label: "Today", value: "hom_nay" },
+  { label: "This week", value: "tuan_nay" },
+];
+
+const NGAY_TUAN = ["T2", "T3", "T4", "T5", "T6"];
+
+const rowPad = { paddingHorizontal: 20, flexDirection: "row" as const, alignItems: "center" as const, gap: 12 };
+
+// Week-view widths (the Accordion grid: day cells + week total + disclosure).
+// The Today roster uses COLUMNS below, rendered by Table.
+const W = { tong: 72, cell: 22, chevron: 28 };
+
+const COLUMNS: TableColumn[] = [
+  { key: "ten", label: "Employee", flex: 1, sortable: true },
+  { key: "vao", label: "In – out", width: 112, align: "right", sortable: true },
+  { key: "trangThai", label: "Status", width: 124, sortable: true },
+  { key: "tongGio", label: "Hours", width: 72, align: "right", sortable: true },
+];
+
+function badgeLabel(nv: NhanVien): string {
+  const tt = TRANG_THAI[nv.trangThai];
+  return nv.trangThai === "di_muon" && nv.muonPhut !== undefined ? `${tt.label} ${nv.muonPhut}ph` : tt.label;
+}
+
+/** One weekday marker — filled means worked, hollow red ring means absent. */
+function DayCell({ ngay }: { ngay: NgayCong }) {
+  const s = NGAY_CONG[ngay];
+  return (
+    <View style={{ width: W.cell, alignItems: "center" }}>
+      <View style={{ width: 13, height: 13, borderRadius: 4, backgroundColor: s.bg, borderWidth: 1, borderColor: s.border }} />
+    </View>
+  );
+}
+
+/** The day's quick fixes for one person — the ⋯ door; the row press is the workspace door. */
+function HomNayMenu({ nv }: { nv: NhanVien }) {
+  return (
+    <ActionMenu
+      accessibilityLabel={`Actions for ${nv.ten}`}
+      items={[
+        { key: "sua_gio", label: "Adjust hours", icon: "pencil", onPress: () => {} },
+        { key: "nghi_phep", label: "Record leave", icon: "calendar-off", onPress: () => {} },
+        { key: "nhac", label: "Remind to clock in", icon: "bell", disabled: nv.vao !== undefined, onPress: () => {} },
+        { key: "danh_dau_vang", label: "Mark absent", icon: "ban", danger: true, disabled: nv.trangThai === "vang", onPress: () => {} },
+      ]}
+    />
+  );
+}
+
+function HomNayRow({ nv, selected, onPress }: { nv: NhanVien; selected: boolean; onPress: () => void }) {
+  const tt = TRANG_THAI[nv.trangThai];
+  return (
+    <TableRow
+      onPress={onPress}
+      selected={selected}
+      minHeight={64}
+      accessibilityLabel={`Open ${nv.ten}'s day`}
+      trailing={<HomNayMenu nv={nv} />}
+    >
+      <TableCell>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+          <Avatar name={nv.ten} size={36} />
+          <View style={{ flex: 1, gap: 2, minWidth: 0 }}>
+            <Text weight="medium" numberOfLines={1}>{nv.ten}</Text>
+            <Text size="sm" color="zinc-500" numberOfLines={1}>{nv.chucVu}</Text>
+          </View>
+        </View>
+      </TableCell>
+      <TableCell>
+        <Text size="sm" tabular>{`${nv.vao ?? "—"} – ${nv.ra ?? "—"}`}</Text>
+      </TableCell>
+      <TableCell>
+        <Badge variant="dot" label={badgeLabel(nv)} color={tt.color} />
+      </TableCell>
+      <TableCell>
+        <Text size="sm" weight="medium" tabular>{nv.tongGio ?? "—"}</Text>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+/** Week row — read-only drill-down: expands in place to the day-by-day detail. */
+function TuanRow({ nv }: { nv: NhanVien }) {
+  return (
+    <Accordion>
+      <AccordionHeader accessibilityLabel={`Week detail for ${nv.ten}`}>
+        <View style={{ flex: 1, gap: 2 }}>
+          <Text size="sm" weight="medium" numberOfLines={1}>{nv.ten}</Text>
+          <Text size="xs" color="muted" numberOfLines={1}>{nv.chucVu}</Text>
+        </View>
+        <View style={{ flexDirection: "row", gap: 10 }}>
+          {nv.tuan.map((ngay, i) => <DayCell key={NGAY_TUAN[i]} ngay={ngay} />)}
+        </View>
+        <View style={{ width: W.tong, alignItems: "flex-end" }}>
+          <Text size="sm" weight="medium" tabular>{nv.tongTuan}</Text>
+        </View>
+      </AccordionHeader>
+      <AccordionContent>
+        {nv.tuan.map((ngay, i) => (
+          <View key={NGAY_TUAN[i]} style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 32 }}>
+            <Text size="xs" color="muted" tabular style={{ width: 24 }}>{NGAY_TUAN[i]}</Text>
+            <DayCell ngay={ngay} />
+            <Text size="sm">{NGAY_CONG[ngay].label}</Text>
+          </View>
+        ))}
+      </AccordionContent>
+    </Accordion>
+  );
+}
+
+function KVRow({ label, value }: { label: string; value: string }) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 24 }}>
+      <Text size="sm" color="muted" style={{ width: 140 }}>{label}</Text>
+      <Text size="sm" tabular>{value}</Text>
+    </View>
+  );
+}
+
+// The drawer body — compact: identity + today's facts + the week at a glance.
+// Keyed by nv.id from the caller so it resets when ◀ ▶ steps.
+function NhanVienWorkspace({ nv }: { nv: NhanVien }) {
+  const tt = TRANG_THAI[nv.trangThai];
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 20 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+          <Avatar name={nv.ten} size={40} />
+          <View style={{ flex: 1, gap: 2 }}>
+            <Text size="sm" color="muted">{nv.chucVu}</Text>
+          </View>
+          <Badge label={badgeLabel(nv)} color={tt.color} />
+        </View>
+        <View style={{ gap: 6 }}>
+          <KVRow label="Clock-in" value={nv.vao ?? "Not clocked"} />
+          <KVRow label="Clock-out" value={nv.ra ?? "Not clocked"} />
+          <KVRow label="Hours today" value={nv.tongGio ?? "—"} />
+        </View>
+        <Divider />
+        <View style={{ gap: 10 }}>
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            <View style={{ flex: 1 }}>
+              <Text size="xs" color="muted" transform="uppercase">This week</Text>
+            </View>
+            <Text size="sm" weight="medium" tabular>{nv.tongTuan}</Text>
+          </View>
+          <View style={{ gap: 6 }}>
+            {nv.tuan.map((ngay, i) => (
+              <View key={NGAY_TUAN[i]} style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 24 }}>
+                <Text size="xs" color="muted" tabular style={{ width: 24 }}>{NGAY_TUAN[i]}</Text>
+                <DayCell ngay={ngay} />
+                <Text size="sm">{NGAY_CONG[ngay].label}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+      {/* pinned footer — the workspace's one primary fix action */}
+      <View style={{ borderTopWidth: 1, borderTopColor: colors.border, paddingHorizontal: 20, paddingVertical: 14, flexDirection: "row", alignItems: "center", gap: 12 }}>
+        <Text size="xs" color="muted" style={{ flex: 1 }}>Missed punches get fixed here — every change is audited.</Text>
+        <Button title="Adjust hours" color="primary" onPress={() => {}} />
+      </View>
+    </>
+  );
+}
+
+export function TplAttendance() {
+  const [tab, setTab] = useState<string>("hom_nay");
+  const [thang, setThang] = useState<string>("2026-06");
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [sort, setSort] = useState<SortState | null>(null);
+  const onSort = (key: string) => setSort(cycleSort(sort, key));
+
+  const dem = (tt: TrangThai) => NHAN_VIEN.filter((nv) => nv.trangThai === tt).length;
+  const eyebrow = (label: string) => <Text size="xs" color="muted" transform="uppercase">{label}</Text>;
+
+  // The Today roster, ordered by the active sort (Hours sorts numerically).
+  const sorted = sortBy(NHAN_VIEN, sort, (nv, key) =>
+    key === "vao" ? (nv.vao ?? "")
+    : key === "trangThai" ? TRANG_THAI[nv.trangThai].label
+    : key === "tongGio" ? parseFloat((nv.tongGio ?? "0").replace(",", "."))
+    : nv.ten.toLowerCase(),
+  );
+
+  // The drawer sequences over the roster's visible (sorted) ordering.
+  const openNv = NHAN_VIEN.find((nv) => nv.id === openId) ?? null;
+  const seqIndex = openNv ? sorted.findIndex((nv) => nv.id === openNv.id) : -1;
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 920, alignSelf: "center", gap: 16 }}>
+        {/* header band */}
+        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
+          <View style={{ gap: 2, flex: 1 }}>
+            <Text size="xl" weight="semibold">Attendance</Text>
+            <Text size="sm" color="muted">Today, Friday 12/06 — in/out times for 9 employees</Text>
+          </View>
+          <Picker
+            options={THANG}
+            value={thang}
+            onValueChange={setThang}
+            placeholder="Pick a month"
+            style={{ width: 150 }}
+          />
+        </View>
+
+        <KPIStrip
+          items={[
+            { label: "Present", value: dem("co_mat"), format: "number" },
+            { label: "Late", value: dem("di_muon"), format: "number" },
+            { label: "Absent", value: dem("vang"), format: "number", tone: "danger" },
+            { label: "On leave", value: dem("nghi_phep"), format: "number" },
+          ]}
+        />
+
+        <Tabs accessibilityLabel="Attendance scope" options={TAB} selectedTab={tab} onSelectTab={setTab} />
+
+        {tab === "hom_nay" ? (
+          <Card style={{ padding: 0 }}>
+            <Table columns={COLUMNS} trailing={28} sort={sort} onSort={onSort}>
+              {sorted.map((nv) => (
+                <HomNayRow key={nv.id} nv={nv} selected={nv.id === openId} onPress={() => setOpenId(nv.id)} />
+              ))}
+            </Table>
+          </Card>
+        ) : (
+          <Card style={{ padding: 0 }}>
+            <View style={[rowPad, { paddingVertical: 10 }]}>
+              <View style={{ flex: 1 }}>{eyebrow("Employee")}</View>
+              <View style={{ flexDirection: "row", gap: 10 }}>
+                {NGAY_TUAN.map((d) => (
+                  <View key={d} style={{ width: W.cell, alignItems: "center" }}>{eyebrow(d)}</View>
+                ))}
+              </View>
+              <View style={{ width: W.tong, alignItems: "flex-end" }}>{eyebrow("Week total")}</View>
+              <View style={{ width: W.chevron - 12 }} />
+            </View>
+            <View style={{ paddingHorizontal: 20 }}>
+              {NHAN_VIEN.map((nv) => (
+                <View key={nv.id}>
+                  <Divider />
+                  <TuanRow nv={nv} />
+                </View>
+              ))}
+            </View>
+            <Divider />
+            {/* legend band — what each marker means */}
+            <View style={[rowPad, { paddingVertical: 12, gap: 18 }]}>
+              {(Object.keys(NGAY_CONG) as NgayCong[]).map((k) => (
+                <View key={k} style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+                  <DayCell ngay={k} />
+                  <Text size="xs" color="muted">{NGAY_CONG[k].label}</Text>
+                </View>
+              ))}
+            </View>
+          </Card>
+        )}
+      </View>
+
+      {/* the employee workspace — body keyed by id so state resets on ◀ ▶ / ←→ steps */}
+      {openNv ? (
+        <Drawer
+          open onOpenChange={(o) => !o && setOpenId(null)} title={openNv.ten} width={440}
+          onPrev={seqIndex > 0 ? () => setOpenId(NHAN_VIEN[seqIndex - 1].id) : undefined}
+          onNext={seqIndex >= 0 && seqIndex < NHAN_VIEN.length - 1 ? () => setOpenId(NHAN_VIEN[seqIndex + 1].id) : undefined}
+          position={seqIndex >= 0 ? `${seqIndex + 1}/${NHAN_VIEN.length}` : undefined}
+        >
+          <NhanVienWorkspace key={openNv.id} nv={openNv} />
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}

package/examples/tpl_batch.tsx

@@ -0,0 +1,234 @@
+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>
+  );
+}