@lotics/ui 7.8.0 → 7.10.0

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>
-  );
-}