@lotics/ui 3.6.0 → 4.0.0

package/examples/app_orders.tsx

@@ -0,0 +1,405 @@
+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 { 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, CardBody, CardFooter, CardHeader, CardHeaderMeta } from "@lotics/ui/card";
+import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
+import { Drawer } from "@lotics/ui/drawer";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { Divider } from "@lotics/ui/divider";
+import { FormField } from "@lotics/ui/form_field";
+import { Icon } from "@lotics/ui/icon";
+import { KPICard } from "@lotics/ui/kpi_card";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { NumberInput } from "@lotics/ui/number_input";
+import { Peek } from "@lotics/ui/peek";
+import { PressableHighlight } from "@lotics/ui/pressable_highlight";
+import { Popover, PopoverContent, PopoverFooter, PopoverTrigger } from "@lotics/ui/popover";
+import { Screen } from "@lotics/ui/screen_router";
+import { StepProgress } from "@lotics/ui/step_progress";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// App template · Order management — the KD03 pipeline desk, recreated in the
+// harness with mock data so the UI can be polished in isolation and the
+// result copied back into the app. This page IS the design spec.
+//
+// Grammar: full-bleed zinc-50 canvas · one header band · KPI strip · stage pills ·
+// queue of work cards (CardHeader: identity · CardBody: product + stage
+// StepProgress · CardFooter: KPICards → ONE action). The queue pill IS the
+// macro pipeline position — cards carry no second pipeline indicator.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const CONG_DOAN = ["Blanking", "Cutting", "Die-cut", "Printing", "Gluing", "Inbound", "Outbound"];
+
+interface MockOrder {
+  id: string;
+  khach: string;
+  ten: string;
+  queue: "lenh" | "sx" | "giao" | "doichieu";
+  cd?: number; // stage index
+  cdDays?: number;
+  can: string;
+  sl: string;
+  giaTri: number;
+  overdue?: boolean;
+  daGiao?: string;
+  khop?: boolean;
+}
+
+const ORDERS: MockOrder[] = [
+  { id: "SR-2026-0081", khach: "ATLAS COMPONENTS", ten: "Carton blank sheet 675×325 (HPKC00000005)", queue: "lenh", can: "10/04", sl: "2,747", giaTri: 8_982_690, overdue: true },
+  { id: "SR-2026-0082", khach: "ATLAS COMPONENTS", ten: "Full Cover Box 2.4MPa 1470×290×168", queue: "lenh", can: "10/04", sl: "1,162", giaTri: 62_829_340, overdue: true },
+  { id: "SR-2026-0022", khach: "CRESTLINE FURNITURE", ten: "TOP COVER · Long brace (11 pcs/set)", queue: "sx", cd: 5, cdDays: 3, can: "10/06", sl: "5,000", giaTri: 4_000_000, overdue: true },
+  { id: "SR-2026-0026", khach: "VITTORIA ACCESSORIES", ten: "Accessory carton box 400×300×250", queue: "sx", cd: 3, cdDays: 1, can: "13/06", sl: "2,500", giaTri: 22_500_000 },
+  { id: "SR-2026-0019", khach: "KING LUN PLASTICS", ten: "Inner box VTD063518 475×165×108", queue: "sx", cd: 1, cdDays: 0, can: "12/06", sl: "3,000", giaTri: 23_400_000 },
+  { id: "SR-2026-0027", khach: "BRIGHTCELL BATTERIES", ten: "TS1250 Phoenix box 371×191×124", queue: "giao", can: "16/06", sl: "500", giaTri: 4_250_000, daGiao: "0" },
+  { id: "SR-2026-0042", khach: "MERIDIAN CONSTRUCTION", ten: "Carton box NEW 2668 500×300×200", queue: "doichieu", can: "28/05", sl: "1,800", giaTri: 25_200_000, daGiao: "1,800", khop: true },
+];
+
+const QUEUES = [
+  { id: "lenh", label: "Issue order", hint: "New orders — generate the production order for the contract shop" },
+  { id: "sx", label: "Production", hint: "Shop-floor stages — nudge anything stuck over 2 days" },
+  { id: "giao", label: "Delivery", hint: "Dispatch plans the trucks — track delivered quantity" },
+  { id: "doichieu", label: "Reconciliation", hint: "Match delivered vs the delivery note — when it matches, hand to Accounting" },
+] as const;
+
+// Peek dossiers — the detail BEHIND each inline reference. A name on a card
+// answers "who"; the peek answers "who, how to reach them, what they owe"
+// without leaving the queue.
+const KHACH_HO_SO: Record<string, { nganh: string; lienHe: string; dienThoai: string; doanhThu6T: number; congNo: number }> = {
+  "ATLAS COMPONENTS": { nganh: "Export machining", lienHe: "Sarah Chen — Procurement", dienThoai: "(206) 555-0147", doanhThu6T: 312_400_000, congNo: 86_200_000 },
+  "CRESTLINE FURNITURE": { nganh: "Export furniture", lienHe: "David Park — Logistics", dienThoai: "(415) 555-0228", doanhThu6T: 121_500_000, congNo: 64_200_000 },
+  "VITTORIA ACCESSORIES": { nganh: "Bicycle accessories", lienHe: "Maria Lopez — Purchasing", dienThoai: "(312) 555-0193", doanhThu6T: 154_700_000, congNo: 0 },
+  "KING LUN PLASTICS": { nganh: "Household plastics", lienHe: "James Wu — Sourcing", dienThoai: "(646) 555-0162", doanhThu6T: 248_900_000, congNo: 52_800_000 },
+  "BRIGHTCELL BATTERIES": { nganh: "Electrical — batteries", lienHe: "Emma Davis — Materials", dienThoai: "(503) 555-0184", doanhThu6T: 186_200_000, congNo: 86_400_000 },
+  "MERIDIAN CONSTRUCTION": { nganh: "Construction", lienHe: "Daniel Reed — Projects", dienThoai: "(212) 555-0119", doanhThu6T: 98_300_000, congNo: 0 },
+};
+
+function PeekRow({ label, value, danger }: { label: string; value: string; danger?: boolean }) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+      <Text size="sm" color="muted" style={{ flex: 1 }}>{label}</Text>
+      <Text size="sm" color={danger ? "danger" : "default"} tabular>{value}</Text>
+    </View>
+  );
+}
+
+function KhachPeek({ ten }: { ten: string }) {
+  const hs = KHACH_HO_SO[ten];
+  return (
+    <View style={{ gap: 10 }}>
+      <View style={{ gap: 1 }}>
+        <Text size="sm" weight="semibold">{ten}</Text>
+        <Text size="xs" color="muted">{hs.nganh}</Text>
+      </View>
+      <Divider />
+      <PeekRow label="Contact" value={hs.lienHe} />
+      <PeekRow label="Phone" value={hs.dienThoai} />
+      <PeekRow label="Revenue (6 months)" value={formatMoney(hs.doanhThu6T)} />
+      <PeekRow label="Outstanding balance" value={hs.congNo > 0 ? formatMoney(hs.congNo) : "None"} danger={hs.congNo > 0} />
+      <Divider />
+      <Button title="Open customer record" color="secondary" onPress={() => {}} />
+    </View>
+  );
+}
+
+// The order's workspace — every detail, editable where it should be. Opened
+// from the order id on any card; sequenced over the visible queue.
+function OrderWorkspace({ o }: { o: MockOrder }) {
+  const [note, setNote] = useState("");
+  // The card's footer facts are read-only TRIAGE — editing lives HERE, in the
+  // workspace. Keyed by order id at the call site, so these reset per order.
+  const [can, setCan] = useState(o.can);
+  const [sl, setSl] = useState(o.sl);
+  const stuck = o.cdDays !== undefined && o.cdDays > 2;
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 14 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Badge label={QUEUES.find((q) => q.id === o.queue)?.label ?? ""} color="blue" />
+          {o.overdue ? <Badge label="Overdue" color="red" /> : null}
+        </View>
+        <Text size="sm">{o.ten}</Text>
+        {/* the SAME stage band as the card — full-width bar + caption below,
+            danger when stuck; card and drawer read identically */}
+        {o.queue === "sx" && o.cd !== undefined ? (
+          <StepProgress
+            steps={CONG_DOAN}
+            current={o.cd}
+            color={solid("emerald")}
+            captionBelow
+            label={stuck ? `Stuck ${o.cdDays}d · ${CONG_DOAN[o.cd]}` : undefined}
+            captionTone={stuck ? "danger" : "default"}
+          />
+        ) : null}
+        <Divider />
+        {/* customer = a reference (Peek); the two editable facts are real
+            inputs here; value/delivered stay read-only — value is contractual */}
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 28 }}>
+          <Text size="sm" color="muted" style={{ flex: 1 }}>Customer</Text>
+          <Peek accessibilityLabel={`Customer record ${o.khach}`} content={<KhachPeek ten={o.khach} />} align="end">
+            <Text size="sm" weight="medium">{o.khach}</Text>
+          </Peek>
+        </View>
+        <View style={{ flexDirection: "row", gap: 12 }}>
+          <FormField label="Needed by" style={{ flex: 1 }}>
+            <TextInputField value={can} onChangeText={setCan} inputMode="numeric" placeholder="dd/mm" />
+          </FormField>
+          <FormField label="Quantity" style={{ flex: 1 }}>
+            <TextInputField value={sl} onChangeText={setSl} inputMode="numeric" />
+          </FormField>
+        </View>
+        <View style={{ gap: 10 }}>
+          <PeekRow label="Value" value={formatMoney(o.giaTri)} />
+          {o.daGiao !== undefined ? <PeekRow label="Delivered" value={o.daGiao} /> : null}
+        </View>
+        <Divider />
+        <FormField label="Internal note" optional optionalLabel="Optional">
+          <TextInputField value={note} onChangeText={setNote} placeholder="Visible to the whole desk…" />
+        </FormField>
+      </ScrollView>
+      <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 }}>The queue card stays read-only — edit here</Text>
+        <Button title="Open full record" color="secondary" onPress={() => {}} />
+        <Button title="Save changes" color="primary" onPress={() => {}} />
+      </View>
+    </>
+  );
+}
+
+// Stage gates, tiered by weight. Most transitions are one click (never add
+// friction without need); a transition that NEEDS input gets a popover form
+// anchored to its button (context stays visible); the exception/destructive
+// path gets a Dialog (full attention, explicit framing).
+
+function XuatKhoGuard({ o }: { o: MockOrder }) {
+  const [sl, setSl] = useState<number | null>(() => Number(o.sl.replace(/,/g, "")));
+  return (
+    <Popover side="top" align="end">
+      <PopoverTrigger>
+        <Button title="Confirm outbound" color="primary" />
+      </PopoverTrigger>
+      <PopoverContent style={{ width: 300 }} disableBodyScroll>
+        <View style={{ gap: 12 }}>
+          <View style={{ gap: 2 }}>
+            <Text size="sm" weight="semibold">Confirm outbound</Text>
+            <Text size="xs" color="muted">Record the warehouse's actual count — it may differ from the ordered quantity.</Text>
+          </View>
+          <FormField label="Outbound quantity">
+            <NumberInput value={sl} onValueChange={setSl} min={0} accessibilityLabel="Outbound quantity" />
+          </FormField>
+        </View>
+        {/* commit action right — Action Layout */}
+        <PopoverFooter>
+          <Button title="Confirm" color="primary" onPress={() => {}} />
+        </PopoverFooter>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function LechGuard({ o }: { o: MockOrder }) {
+  // Dialog is CONTROLLED — the trigger button lives outside, owning open state.
+  const [open, setOpen] = useState(false);
+  const [lyDo, setLyDo] = useState("");
+  return (
+    <>
+      <Button title="Mismatch" color="muted" onPress={() => setOpen(true)} />
+      <Dialog width={460} open={open} onOpenChange={setOpen}>
+        <Screen route="">
+          <DialogHeader>
+            <DialogHeaderTitle>Report delivery mismatch — {o.id}</DialogHeaderTitle>
+          </DialogHeader>
+          <View style={{ padding: 24, gap: 14 }}>
+            <Text size="sm" color="muted">
+              Delivered quantity does not match the delivery note. The order moves to mismatch handling — Accounting
+              and Dispatch are both notified, and the balance stays unchanged until it is settled.
+            </Text>
+            <FormField label="Reason for mismatch">
+              <TextInputField value={lyDo} onChangeText={setLyDo} placeholder="e.g. 50 boxes short — dented during loading…" />
+            </FormField>
+          </View>
+          <DialogFooter>
+            <Button title="Cancel" color="secondary" onPress={() => setOpen(false)} />
+            <Button title="Confirm mismatch" color="danger" onPress={() => setOpen(false)} />
+          </DialogFooter>
+        </Screen>
+      </Dialog>
+    </>
+  );
+}
+
+function OrderCard({ o, onOpen }: { o: MockOrder; onOpen: () => void }) {
+  return (
+    <Card style={{ padding: 0 }}>
+      {/* the WHOLE card is the door to the order workspace (the header
+          chevron marks it). Nested pressables — the CTA, stage gates, the
+          customer Peek — claim their own presses via the responder system,
+          so they never open the drawer. The surface itself carries no
+          button role and no tab stop: a button must not contain interactive
+          descendants, so the ACCESSIBLE door is the order id inside — the
+          card around it is a mouse-only click extension. A pressable card
+          is not a text-selection surface → userSelect none. */}
+      <PressableHighlight onPress={onOpen} focusable={false} userSelect="none" style={{ borderRadius: 16 }}>
+        <CardHeader>
+          <Pressable accessibilityRole="button" accessibilityLabel={`Open order ${o.id}`} onPress={onOpen}>
+            <Text size="sm" weight="semibold" tabular>{o.id}</Text>
+          </Pressable>
+          {o.overdue ? <Badge label="Overdue" color="red" /> : null}
+          <View style={{ flex: 1 }} />
+          <Peek accessibilityLabel={`Customer record ${o.khach}`} content={<KhachPeek ten={o.khach} />} align="end">
+            <CardHeaderMeta>{o.khach}</CardHeaderMeta>
+          </Peek>
+          <ActionMenu
+            accessibilityLabel={`Actions for ${o.id}`}
+            items={[
+              { key: "sua", label: "Edit order", icon: "pencil", onPress: () => {} },
+              { key: "huy", label: "Cancel order", icon: "trash", danger: true, onPress: () => Alert.alert("Cancel order?", "This cancels the order and notifies the customer — it can't be undone.", [{ text: "Keep order", style: "cancel" }, { text: "Cancel order", style: "destructive", onPress: () => {} }]) },
+            ]}
+          />
+          <Icon name="chevron-right" size={16} color={colors.zinc[400]} />
+        </CardHeader>
+        <CardBody style={{ gap: 10 }}>
+          <Text size="sm" numberOfLines={1}>{o.ten}</Text>
+          {/* the queue pill already says the macro KD03 stage — the only
+              progress inside a card is the shop sub-stage. Full-width bar with
+              the stage in a caption BELOW it (matching the drawer); stuck turns
+              the caption danger — no floating badge that would shift the bar
+              and break card-to-card consistency. */}
+          {o.queue === "sx" && o.cd !== undefined ? (
+            <StepProgress
+              steps={CONG_DOAN}
+              current={o.cd}
+              color={solid("emerald")}
+              captionBelow
+              label={o.cdDays !== undefined && o.cdDays > 2 ? `Stuck ${o.cdDays}d · ${CONG_DOAN[o.cd]}` : undefined}
+              captionTone={o.cdDays !== undefined && o.cdDays > 2 ? "danger" : "default"}
+            />
+          ) : null}
+        </CardBody>
+        <CardFooter style={{ gap: 28 }}>
+          <KPICard label="Needed by" value={o.can} size="sm" tone={o.overdue ? "danger" : "default"} />
+          <KPICard label="Quantity" value={o.sl} size="sm" />
+          {o.daGiao !== undefined ? (
+            <KPICard label="Delivered" value={o.daGiao} size="sm" />
+          ) : (
+            <KPICard label="Value" value={o.giaTri} format="currency" size="sm" />
+          )}
+          <View style={{ flex: 1 }} />
+          {o.queue === "lenh" ? <Button title="Generate order" color="primary" onPress={() => {}} /> : null}
+          {o.queue === "sx" && o.cd !== undefined ? (
+            o.cd === 5 ? (
+              // gated: leaving the shop floor records the real counted quantity
+              <XuatKhoGuard o={o} />
+            ) : (
+              // ungated: advancing a stage needs nothing — one click
+              <Button title={`→ ${CONG_DOAN[o.cd + 1]}`} color="secondary" onPress={() => {}} />
+            )
+          ) : null}
+          {o.queue === "giao" ? <Badge label="Awaiting delivery" color="blue" /> : null}
+          {o.queue === "doichieu" ? (
+            <View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}>
+              {o.khop ? <Badge label="Quantities match" color="emerald" /> : null}
+              <Button title="Mark matched" color="primary" onPress={() => {}} />
+              {/* exception path: a dialog — full attention, reason required */}
+              <LechGuard o={o} />
+            </View>
+          ) : null}
+        </CardFooter>
+      </PressableHighlight>
+    </Card>
+  );
+}
+
+export function AppOrders() {
+  const [tab, setTab] = useState<(typeof QUEUES)[number]["id"]>("sx");
+  const [openId, setOpenId] = useState<string | null>(null);
+  const counts = Object.fromEntries(QUEUES.map((q) => [q.id, ORDERS.filter((o) => o.queue === q.id).length]));
+  const queue = ORDERS.filter((o) => o.queue === tab);
+  const def = QUEUES.find((q) => q.id === tab);
+  const quaHan = ORDERS.filter((o) => o.overdue).length;
+  // dd/mm → comparable day index (mock data lives in one year)
+  const dayIdx = (ddmm: string) => Number(ddmm.slice(3, 5)) * 31 + Number(ddmm.slice(0, 2));
+  const today = dayIdx("12/06");
+  const dueThisWeek = ORDERS.filter((o) => !o.overdue && dayIdx(o.can) >= today && dayIdx(o.can) <= today + 7).length;
+  const stuck = ORDERS.filter((o) => o.queue === "sx" && (o.cdDays ?? 0) > 2).length;
+  const openValue = ORDERS.reduce((sum, o) => sum + o.giaTri, 0);
+
+  // The workspace drawer sequences over the active queue's visible ordering.
+  const openOrder = ORDERS.find((o) => o.id === openId) ?? null;
+  const seqIndex = openOrder ? queue.findIndex((o) => o.id === openOrder.id) : -1;
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 880, 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">Order management</Text>
+            <Text size="sm" color="muted">KD03 process — issue order → production → delivery → reconciliation</Text>
+          </View>
+        </View>
+
+        {/* the strip carries cross-queue HEALTH — never the tab counts
+            (the pills already show those) */}
+        <KPIStrip
+          items={[
+            { label: "Overdue", value: quaHan, format: "number", tone: quaHan > 0 ? "danger" : "default", info: "Orders past their needed-by date, across every queue. The red badge on each card marks them." },
+            { label: "Due this week", value: dueThisWeek, format: "number", caption: "needed by within 7 days" },
+            { label: "Stuck in production", value: stuck, format: "number", tone: stuck > 0 ? "warning" : "default", info: "Production orders sitting in the same stage for more than 2 days — nudge the shop." },
+            { label: "Open value", value: openValue, format: "currency", compact: true, caption: "all unsettled orders" },
+          ]}
+        />
+
+        <ChipGroup
+          accessibilityLabel="Process step"
+          options={QUEUES.map((q) => ({ label: `${q.label} · ${counts[q.id]}`, value: q.id }))}
+          value={tab}
+          onValueChange={setTab}
+        />
+        {def ? <Text size="xs" color="muted">{def.hint}</Text> : null}
+
+        <View style={{ gap: 10 }}>
+          {queue.length === 0 ? (
+            <Card style={{ padding: 0 }}>
+              <EmptyState message="This queue is clear" hint="Orders land here as they reach this step" />
+            </Card>
+          ) : (
+            queue.map((o) => <OrderCard key={o.id} o={o} onOpen={() => setOpenId(o.id)} />)
+          )}
+        </View>
+      </View>
+
+      {openOrder ? (
+        <Drawer
+          open
+          onOpenChange={(open) => !open && setOpenId(null)}
+          title={openOrder.id}
+          width={520}
+          onPrev={seqIndex > 0 ? () => setOpenId(queue[seqIndex - 1].id) : undefined}
+          onNext={seqIndex >= 0 && seqIndex < queue.length - 1 ? () => setOpenId(queue[seqIndex + 1].id) : undefined}
+          position={seqIndex >= 0 ? `${seqIndex + 1}/${queue.length}` : undefined}
+        >
+          <OrderWorkspace key={openOrder.id} o={openOrder} />
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}

package/examples/tpl_allocate.tsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors } from "@lotics/ui/colors";
+import { AllocationRow } from "@lotics/ui/allocation_row";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card, CardFooter } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { RemainderMeter } from "@lotics/ui/remainder_meter";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Allocation / split — apply ONE source across MANY targets until the
+// remainder is zero. Here: cash application — a received payment spread across a
+// customer's open invoices (the same shape serves stock-to-orders, landed-cost,
+// budget distribution). The inverse of the batch builder: batch SUMS parts up to
+// a total; allocation SPLITS a fixed total DOWN, with a remainder that must hit
+// zero. The RemainderMeter is the spine — under (left on account) · exact (apply)
+// · over (blocked). Oldest-first auto-allocates; each row can be filled or typed.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface Invoice {
+  id: string;
+  issued: string;
+  ageDays: number;
+  /** Outstanding amount — the cap this invoice can absorb. */
+  due: number;
+}
+
+const PAYMENT = { amount: 24_500_000, from: "ATLAS COMPONENTS", ref: "TT-88412", date: "11/06" };
+
+const INVOICES: Invoice[] = [
+  { id: "INV-2026-0301", issued: "24/05", ageDays: 18, due: 8_200_000 },
+  { id: "INV-2026-0305", issued: "31/05", ageDays: 11, due: 6_400_000 },
+  { id: "INV-2026-0312", issued: "07/06", ageDays: 4, due: 11_250_000 },
+  { id: "INV-2026-0318", issued: "09/06", ageDays: 2, due: 3_150_000 },
+];
+
+export function TplAllocate() {
+  const [alloc, setAlloc] = useState<Record<string, number>>({});
+
+  const allocated = INVOICES.reduce((s, inv) => s + (alloc[inv.id] ?? 0), 0);
+  const remainder = PAYMENT.amount - allocated;
+  const over = remainder < 0;
+
+  // Oldest-first — fill the oldest invoices in full until the payment runs out.
+  const autoOldest = () => {
+    let left = PAYMENT.amount;
+    const next: Record<string, number> = {};
+    [...INVOICES].sort((a, b) => b.ageDays - a.ageDays).forEach((inv) => {
+      const take = Math.max(0, Math.min(inv.due, left));
+      next[inv.id] = take;
+      left -= take;
+    });
+    setAlloc(next);
+  };
+
+  const status = over
+    ? `Reduce by ${formatMoney(-remainder)} — you can't apply more than was received`
+    : remainder > 0
+      ? `${formatMoney(remainder)} will be left on the customer's account`
+      : "Payment fully applied across the selected invoices";
+
+  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">Apply payment</Text>
+          <Text size="sm" color="muted">Split one received payment across the customer's open invoices — oldest first, or line by line</Text>
+        </View>
+
+        {/* the source — the payment, and the remainder as you place it */}
+        <Card style={{ padding: 0 }}>
+          <View style={{ padding: 20, flexDirection: "row", alignItems: "flex-start", gap: 24, flexWrap: "wrap" }}>
+            <View style={{ gap: 2, flexGrow: 1, flexBasis: 220 }}>
+              <Text size="xs" color="muted" transform="uppercase">Payment received</Text>
+              <Text size="xxl" weight="semibold" tabular>{formatMoney(PAYMENT.amount)}</Text>
+              <Text size="sm" color="muted">{`${PAYMENT.from} · ref ${PAYMENT.ref} · ${PAYMENT.date}`}</Text>
+            </View>
+            <View style={{ gap: 10, flexGrow: 1, flexBasis: 300 }}>
+              <RemainderMeter total={PAYMENT.amount} allocated={allocated} format={formatMoney} />
+              <View style={{ flexDirection: "row", gap: 8 }}>
+                <Button title="Oldest first" color="secondary" onPress={autoOldest} />
+                <Button title="Clear" color="muted" onPress={() => setAlloc({})} />
+              </View>
+            </View>
+          </View>
+        </Card>
+
+        {/* the targets — the open invoices, each absorbing part of the payment */}
+        <Card style={{ padding: 0 }}>
+          <View style={{ paddingHorizontal: 20, paddingVertical: 12 }}>
+            <Text size="xs" color="muted" transform="uppercase">{`Open invoices · ${INVOICES.length}`}</Text>
+          </View>
+          <Divider />
+          {INVOICES.map((inv, i) => (
+            <View key={inv.id}>
+              {i > 0 ? <Divider /> : null}
+              <AllocationRow
+                label={inv.id}
+                sublabel={`Issued ${inv.issued}`}
+                cap={inv.due}
+                value={alloc[inv.id] ?? 0}
+                onValueChange={(n) => setAlloc((prev) => ({ ...prev, [inv.id]: n }))}
+                format={formatMoney}
+                trailing={<Badge variant="dot" label={`${inv.ageDays}d`} color={inv.ageDays > 14 ? "red" : "zinc"} />}
+              />
+            </View>
+          ))}
+          <CardFooter>
+            <Text size="xs" color={over ? "danger" : "muted"} style={{ flex: 1 }}>{status}</Text>
+            <Button title="Apply payment" color="primary" disabled={over || allocated === 0} onPress={() => {}} />
+          </CardFooter>
+        </Card>
+      </View>
+    </ScrollView>
+  );
+}