@lotics/ui 7.19.3 → 9.0.0

package/examples/tpl_briefing.tsx

@@ -1,121 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { SegmentedControl } from "@lotics/ui/segmented_control";
-import { Sources } from "@lotics/ui/sources";
-import { Finding, type FindingSeverity } from "@lotics/ui/finding";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Briefing — the agent reads the period's data and writes a short
-// narrative, then a RANKED list of what needs attention. Each finding carries a
-// severity, a headline metric, the sources it rests on, and the one action it
-// suggests. Unlike a dashboard (raw charts), this is the agent's COMMENTARY:
-// what changed, what's at risk, what to do. The leadership digest / daily ops
-// brief / anomaly scan. The narrative explains; the findings are the worklist.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface F {
-  severity: FindingSeverity;
-  title: string;
-  detail: string;
-  metric: string;
-  metricCaption: string;
-  action: string;
-  sources: { id: string; label: string; kind: "record" | "table" | "document" }[];
-}
-
-const NARRATIVE: Record<"today" | "week", string> = {
-  today:
-    "Volume held steady at 41 active shipments. Three reefer containers to Hamburg are inside the demurrage window and need a pickup booked today. Cash collection is lagging — five invoices crossed 30 days overdue. On-time delivery improved on the back of the new Cát Lái slotting.",
-  week:
-    "A solid week: 268 shipments moved, on-time delivery up 6 points after the Cát Lái slotting change. Two ocean lanes slipped below the 12% margin target on bunker surcharges. Receivables remain the soft spot — ₫120M is now past 30 days, concentrated in two accounts.",
-};
-
-const FINDINGS: Record<"today" | "week", F[]> = {
-  today: [
-    { severity: "critical", title: "3 reefer containers at demurrage risk", detail: "Hamburg shipments HBL-4471/4472/4480 hit free-time expiry at 18:00 today; no pickup is booked.", metric: "₫48M", metricCaption: "exposure", action: "Open the shipments", sources: [{ id: "a1", label: "SHIP-4471", kind: "record" }, { id: "a2", label: "Demurrage tracker", kind: "table" }] },
-    { severity: "warning", title: "5 invoices overdue past 30 days", detail: "Two accounts — Crestline and Meridian — make up most of the balance. No promise-to-pay logged this week.", metric: "₫120M", metricCaption: "overdue", action: "Open receivables", sources: [{ id: "a3", label: "Aged receivables", kind: "table" }] },
-    { severity: "warning", title: "Margin on the Hamburg lane below target", detail: "Bunker surcharge rose 9%; the lane is at 9.8% gross vs the 12% floor.", metric: "−2.2 pts", metricCaption: "vs target", action: "Review lane pricing", sources: [{ id: "a4", label: "Lane P&L", kind: "table" }] },
-    { severity: "positive", title: "On-time delivery improving", detail: "The Cát Lái slotting change lifted on-time pickups for the third day running.", metric: "+6 pts", metricCaption: "3-day", action: "See the trend", sources: [{ id: "a5", label: "OTD report", kind: "document" }] },
-  ],
-  week: [
-    { severity: "critical", title: "Receivables concentration risk", detail: "₫120M past 30 days sits in two accounts; one is also near its credit limit.", metric: "2", metricCaption: "accounts", action: "Open receivables", sources: [{ id: "b1", label: "Aged receivables", kind: "table" }] },
-    { severity: "warning", title: "Two ocean lanes below margin target", detail: "Hamburg and Rotterdam slipped under 12% on bunker surcharges sustained all week.", metric: "2", metricCaption: "lanes", action: "Review lane pricing", sources: [{ id: "b2", label: "Lane P&L", kind: "table" }] },
-    { severity: "positive", title: "On-time delivery up 6 points", detail: "The slotting change held all week — the strongest OTD in two months.", metric: "+6 pts", metricCaption: "this week", action: "See the trend", sources: [{ id: "b3", label: "OTD report", kind: "document" }] },
-    { severity: "info", title: "RFQ volume rising", detail: "12 new quote requests this week, ahead of the trailing average — capacity planning should get ahead of it.", metric: "12", metricCaption: "RFQs", action: "Open the pipeline", sources: [{ id: "b4", label: "Quote pipeline", kind: "table" }] },
-  ],
-};
-
-export function TplBriefing() {
-  const [period, setPeriod] = useState<"today" | "week">("today");
-  const findings = FINDINGS[period];
-  const attention = findings.filter((f) => f.severity === "critical" || f.severity === "warning").length;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 860, alignSelf: "center", gap: 16 }}>
-        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
-          <View style={{ flex: 1, gap: 2 }}>
-            <Text size="xl" weight="semibold">Operations briefing</Text>
-            <Text size="sm" color="muted">What the agent sees in the numbers — and what needs a decision</Text>
-          </View>
-          <SegmentedControl
-            accessibilityLabel="Period"
-            options={[
-              { label: "Today", value: "today" },
-              { label: "This week", value: "week" },
-            ]}
-            value={period}
-            onValueChange={setPeriod}
-          />
-        </View>
-
-        {/* the generated narrative */}
-        <View style={{ borderWidth: 1, borderColor: colors.zinc[200], backgroundColor: colors.white, borderRadius: 14, padding: 18, gap: 12 }}>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-            <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Summary</Text>
-            <Text size="xs" color="muted">{period === "today" ? "as of 14:20" : "week to date"}</Text>
-          </View>
-          <Text size="md" style={{ lineHeight: 22 }}>{NARRATIVE[period]}</Text>
-          <Sources
-            label="Read from"
-            onOpen={() => {}}
-            sources={[
-              { id: "n1", label: "Shipments", kind: "table" },
-              { id: "n2", label: "Aged receivables", kind: "table" },
-              { id: "n3", label: "Lane P&L", kind: "table" },
-            ]}
-          />
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Active shipments", value: period === "today" ? 41 : 268, format: "number", trend: period === "today" ? 0 : 4 },
-            { label: "On-time delivery", value: "94%", trend: 6 },
-            { label: "Overdue receivables", value: 120_000_000, format: "currency", compact: true, tone: "danger" },
-            { label: "Needs attention", value: attention, format: "number", tone: attention > 0 ? "warning" : "default" },
-          ]}
-        />
-
-        <View style={{ gap: 10 }}>
-          <Text size="sm" weight="semibold">Needs attention</Text>
-          {findings.map((f, i) => (
-            <Finding
-              key={i}
-              severity={f.severity}
-              title={f.title}
-              detail={f.detail}
-              metric={f.metric}
-              metricCaption={f.metricCaption}
-              sources={f.sources}
-              onOpenSource={() => {}}
-              action={{ label: f.action, onPress: () => {} }}
-            />
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_compare.tsx

@@ -1,133 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
-import { ScoredOption } from "@lotics/ui/scored_option";
-import type { SpecRow } from "@lotics/ui/spec_list";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Compare — the agent SCORES and ranks the options against the
-// criteria, shows its reasoning and the key specs, and the human picks one. The
-// agent does the legwork (gather, normalise, score); the choice stays the
-// human's. Quotes, carriers, suppliers, plans, routes. The recommended option
-// wears a RECOMMENDED label; selecting one settles the shortlist to the decision.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface O {
-  id: string;
-  rank: number;
-  title: string;
-  subtitle: string;
-  score: number;
-  rationale: string;
-  specs: SpecRow[];
-  recommended?: boolean;
-}
-
-const OPTIONS: O[] = [
-  {
-    id: "o1",
-    rank: 1,
-    title: "Maersk — Cát Lái → Hamburg",
-    subtitle: "Direct, weekly service · reefer guaranteed",
-    score: 0.92,
-    rationale: "Best balance: only 4% above the cheapest, but the most reliable schedule and guaranteed reefer plugs — lowest demurrage risk for time-sensitive cargo.",
-    recommended: true,
-    specs: [
-      { label: "All-in rate", value: "$2,840" },
-      { label: "Transit", value: "28 days" },
-      { label: "Schedule reliability", value: "94%" },
-      { label: "Free time", value: "14 days" },
-    ],
-  },
-  {
-    id: "o2",
-    rank: 2,
-    title: "CMA CGM — Cát Lái → Hamburg",
-    subtitle: "1 transshipment at Singapore",
-    score: 0.78,
-    rationale: "Cheapest of the four, but the Singapore transshipment adds three days and a reliability hit — workable for non-urgent cargo.",
-    specs: [
-      { label: "All-in rate", value: "$2,730" },
-      { label: "Transit", value: "31 days" },
-      { label: "Schedule reliability", value: "86%" },
-      { label: "Free time", value: "10 days" },
-    ],
-  },
-  {
-    id: "o3",
-    rank: 3,
-    title: "Hapag-Lloyd — Cát Lái → Hamburg",
-    subtitle: "Direct, premium service",
-    score: 0.64,
-    rationale: "Fastest transit and strong reliability, but the premium rate is hard to justify unless the customer pays for speed.",
-    specs: [
-      { label: "All-in rate", value: "$3,210" },
-      { label: "Transit", value: "26 days" },
-      { label: "Schedule reliability", value: "92%" },
-      { label: "Free time", value: "10 days" },
-    ],
-  },
-  {
-    id: "o4",
-    rank: 4,
-    title: "ONE — Cát Lái → Hamburg",
-    subtitle: "2 transshipments · no reefer guarantee",
-    score: 0.41,
-    rationale: "Lowest score: two transshipments and no guaranteed reefer plug make it unsuitable for frozen cargo, despite a mid-range rate.",
-    specs: [
-      { label: "All-in rate", value: "$2,910" },
-      { label: "Transit", value: "34 days" },
-      { label: "Schedule reliability", value: "79%" },
-      { label: "Free time", value: "7 days" },
-    ],
-  },
-];
-
-export function TplCompare() {
-  const [chosen, setChosen] = useState<string | null>(null);
-  const pick = OPTIONS.find((o) => o.id === chosen) ?? null;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Freight options</Text>
-          <Text size="sm" color="muted">Ocean · Cát Lái → Hamburg · 2×40HC reefer · frozen shrimp</Text>
-        </View>
-
-        <View style={{ borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 12 }}>
-          <Text size="sm" color="muted">
-            The agent scored four quotes against cost, transit time and schedule reliability, weighted for time-sensitive reefer cargo.
-          </Text>
-        </View>
-
-        {pick ? (
-          <Callout tone="neutral">
-            <CalloutTitle>Chosen · {pick.title}</CalloutTitle>
-            <CalloutText>{pick.specs[0].label} {String(pick.specs[0].value)} · {String(pick.specs[1].value)} transit. Booking can proceed on this option.</CalloutText>
-          </Callout>
-        ) : null}
-
-        <View style={{ gap: 12 }}>
-          {OPTIONS.map((o) => (
-            <ScoredOption
-              key={o.id}
-              rank={o.rank}
-              title={o.title}
-              subtitle={o.subtitle}
-              score={o.score}
-              rationale={o.rationale}
-              specs={o.specs}
-              recommended={o.recommended}
-              selected={chosen === o.id}
-              selectLabel="Choose this option"
-              onSelect={() => setChosen((c) => (c === o.id ? null : o.id))}
-            />
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_crosscheck.tsx

@@ -1,120 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
-import { Discrepancy, type DiscrepancyValue } from "@lotics/ui/discrepancy";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Cross-check — the agent compares the documents of one transaction
-// and surfaces every field whose value DISAGREES across sources. Each card lays
-// the conflicting values side by side (with where each came from), marks the one
-// the agent believes, and the human resolves to a truth or flags it. The audit /
-// 3-way-match / contract-vs-invoice desk. Symmetric (N sources disagree), unlike
-// a before→after edit. The agreeing fields stay out of the way — only conflicts
-// need a decision.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface D {
-  id: string;
-  field: string;
-  values: DiscrepancyValue[];
-  note: string;
-}
-
-const SEED: D[] = [
-  {
-    id: "d1",
-    field: "Total cartons",
-    values: [
-      { source: "Shipping instruction", value: "525" },
-      { source: "Commercial invoice", value: "520", recommended: true },
-      { source: "Packing list", value: "520" },
-    ],
-    note: "Two of three documents agree at 520; the SI looks stale — it predates the final load.",
-  },
-  {
-    id: "d2",
-    field: "Net weight",
-    values: [
-      { source: "Commercial invoice", value: "11,980 kg" },
-      { source: "Packing list", value: "12,050 kg", recommended: true },
-    ],
-    note: "The packing list carries the measured weight; the CI rounded for the invoice.",
-  },
-  {
-    id: "d3",
-    field: "Incoterm",
-    values: [
-      { source: "Shipping instruction", value: "FOB" },
-      { source: "Commercial invoice", value: "CIF", recommended: true },
-    ],
-    note: "The commercial invoice governs the sale terms — CIF matches the freight prepaid on the bill of lading.",
-  },
-  {
-    id: "d4",
-    field: "HS code",
-    values: [
-      { source: "Commercial invoice", value: "0306.17", recommended: true },
-      { source: "Customs draft", value: "0306.16" },
-    ],
-    note: "0306.16 is cold-water shrimp; the goods are warm-water Penaeidae → 0306.17. The CI is right — fix the draft.",
-  },
-];
-
-const CHECKED = 22;
-
-export function TplCrosscheck() {
-  const [res, setRes] = useState<Record<string, { idx?: number; flagged?: boolean }>>({});
-
-  const resolvedCount = Object.values(res).filter((r) => r.idx != null || r.flagged).length;
-  const openCount = SEED.length - resolvedCount;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 760, alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Document cross-check</Text>
-          <Text size="sm" color="muted">Shipment HBL-4471 · Shipping instruction · Commercial invoice · Packing list · Customs draft</Text>
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Fields checked", value: CHECKED, format: "number" },
-            { label: "In agreement", value: CHECKED - SEED.length, format: "number" },
-            { label: "Disagree", value: openCount, format: "number", tone: openCount > 0 ? "danger" : "default", info: "Fields whose value differs across the documents — each needs a resolution before the set can be filed." },
-            { label: "Resolved", value: resolvedCount, format: "number" },
-          ]}
-        />
-
-        {openCount > 0 ? (
-          <Callout tone="warning">
-            <CalloutTitle>{openCount} of {CHECKED} fields disagree across the documents</CalloutTitle>
-            <CalloutText>The agent reconciled the other {CHECKED - SEED.length}. Resolve each conflict to a source of truth, or flag it for the desk.</CalloutText>
-          </Callout>
-        ) : (
-          <Callout tone="success">
-            <CalloutTitle>All conflicts resolved</CalloutTitle>
-            <CalloutText>Every field now has a single source of truth — the document set is ready to file.</CalloutText>
-          </Callout>
-        )}
-
-        <View style={{ gap: 10 }}>
-          {SEED.map((d) => (
-            <Discrepancy
-              key={d.id}
-              field={d.field}
-              values={d.values}
-              note={d.note}
-              resolvedIndex={res[d.id]?.idx}
-              flagged={res[d.id]?.flagged}
-              onResolve={(idx) => setRes((p) => ({ ...p, [d.id]: { idx } }))}
-              onFlag={() => setRes((p) => ({ ...p, [d.id]: { flagged: true } }))}
-            />
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_detail.tsx

@@ -1,232 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors, solid } from "@lotics/ui/colors";
-import { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { Card, CardBody } from "@lotics/ui/card";
-import { Divider } from "@lotics/ui/divider";
-import { FileBadge } from "@lotics/ui/file_badge";
-import { formatMoney } from "@lotics/ui/format_money";
-import { KPICard } from "@lotics/ui/kpi_card";
-import { Stepper } from "@lotics/ui/stepper";
-import { Tabs } from "@lotics/ui/tabs";
-import { Timeline, TimelineItem } from "@lotics/ui/timeline";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Record detail — a single order's detail screen. Bands:
-// breadcrumb line · header (id + status + actions) · stat rail (one card,
-// five hairline columns) · Tabs with real switching: Overview (pipeline +
-// key-value list) / Documents (file rows) / Audit log (timeline — every event
-// expands in place; document events link to the Documents tab).
-// ─────────────────────────────────────────────────────────────────────────────
-
-const PIPELINE = ["Intake", "Order", "Prod", "Ship", "Recon", "Paid"];
-const PIPE_AT = 3;
-
-const FIELDS: { label: string; value: string }[] = [
-  { label: "Order received", value: "12/05" },
-  { label: "Customer PO", value: "NEW-2668" },
-  { label: "Specification", value: "500×300×200 · 5-ply BC" },
-  { label: "Unit price", value: `${formatMoney(14_000)}/box` },
-  { label: "Delivered", value: "1,800 / 1,800" },
-  { label: "Payment terms", value: "Net 30" },
-];
-
-const FILES: { name: string; mime: string; size: string }[] = [
-  { name: "Quote_QT-2026-0042.pdf", mime: "application/pdf", size: "182 KB" },
-  { name: "ProductionOrder_MO-2026-0042.pdf", mime: "application/pdf", size: "96 KB" },
-  { name: "DeliveryNote_DN-0042.xlsx", mime: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", size: "24 KB" },
-];
-
-// Every log event expands in place (Timeline rows become pressable when they
-// carry details) — the read-only drill-down door. Events that produced a
-// a document also carry the real path to it (the Documents tab).
-const LOG: {
-  id: string;
-  icon: TimelineItem["icon"];
-  iconColor: string;
-  label: string;
-  time: string;
-  detail: string;
-  chungTu?: string;
-}[] = [
-  {
-    id: "log-5",
-    icon: "circle-check",
-    iconColor: solid("emerald"),
-    label: "Delivered in full 1,800/1,800 — awaiting note reconciliation",
-    time: "04/06 16:40",
-    detail: "Customer signed for all 1,800 boxes · reconcile against DN-0042 before closing receivables.",
-  },
-  {
-    id: "log-4",
-    icon: "package",
-    iconColor: solid("blue"),
-    label: "Shipped 1,800 boxes — loaded on truck 29C-123.45",
-    time: "04/06 07:15",
-    detail: "Dispatched from finished-goods warehouse · truck 29C-123.45 · driver Ben Tran.",
-    chungTu: "DeliveryNote_DN-0042.xlsx",
-  },
-  {
-    id: "log-3",
-    icon: "check",
-    iconColor: solid("blue"),
-    label: "Production complete — moved to finished goods",
-    time: "02/06 17:05",
-    detail: "Completed at the Eastside plant · 1,800 boxes received into finished goods.",
-  },
-  {
-    id: "log-2",
-    icon: "file-text",
-    iconColor: solid("blue"),
-    label: "Production order MO-2026-0042 issued to the plant",
-    time: "26/05 09:20",
-    detail: "Sent to the Eastside plant · 5-ply BC blanks · die KB-118 on hand.",
-    chungTu: "ProductionOrder_MO-2026-0042.pdf",
-  },
-  {
-    id: "log-1",
-    icon: "plus",
-    iconColor: colors.zinc[400],
-    label: "Order created from PO NEW-2668 — Tessa Tran",
-    time: "12/05 10:02",
-    detail: "Created from PO NEW-2668 received by email · created by Tessa Tran.",
-  },
-];
-
-const STATS = [
-  { label: "Customer", value: "NEWTECONS" },
-  { label: "Quantity", value: "1,800" },
-  { label: "Value", value: formatMoney(25_200_000) },
-  { label: "Needed by", value: "28/05", tone: "danger" as const },
-  { label: "Owner", value: "Tessa Tran" },
-];
-
-const TABS = [
-  { label: "Overview", value: "tongquan" },
-  { label: "Documents", value: "chungtu" },
-  { label: "Audit log", value: "nhatky" },
-];
-
-function TongQuan() {
-  return (
-    <View style={{ gap: 12 }}>
-      <Card style={{ padding: 0 }}>
-        <CardBody style={{ gap: 12 }}>
-          <Text size="xs" color="muted" transform="uppercase">
-            Pipeline
-          </Text>
-          {/* a detail screen has room for the journey itself — every
-              milestone labeled, the current one marked */}
-          <Stepper steps={PIPELINE} current={PIPE_AT} color={solid("blue")} />
-          <Text size="xs" color="muted">
-            Delivered in full — awaiting reconciliation
-          </Text>
-        </CardBody>
-      </Card>
-      <Card style={{ padding: 0 }}>
-        {FIELDS.map((f, i) => (
-          <View key={f.label}>
-            {i > 0 ? <Divider /> : null}
-            <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 16, paddingVertical: 12, gap: 16 }}>
-              <Text size="sm" color="muted">{f.label}</Text>
-              <View style={{ flex: 1 }} />
-              <Text size="sm" weight="medium" tabular align="right">
-                {f.value}
-              </Text>
-            </View>
-          </View>
-        ))}
-      </Card>
-    </View>
-  );
-}
-
-function ChungTu() {
-  return (
-    <Card style={{ padding: 0 }}>
-      {FILES.map((f, i) => (
-        <View key={f.name}>
-          {i > 0 ? <Divider /> : null}
-          <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 16, paddingVertical: 12, gap: 12 }}>
-            <FileBadge mimeType={f.mime} size={24} />
-            <Text size="sm" weight="medium" numberOfLines={1} style={{ flexShrink: 1 }}>{f.name}</Text>
-            <Text size="xs" color="muted" tabular>{f.size}</Text>
-            <View style={{ flex: 1 }} />
-            <Button title="Download" color="muted" onPress={() => {}} />
-          </View>
-        </View>
-      ))}
-    </Card>
-  );
-}
-
-function NhatKy({ onMoChungTu }: { onMoChungTu: () => void }) {
-  const items: TimelineItem[] = LOG.map((e) => ({
-    id: e.id,
-    icon: e.icon,
-    iconColor: e.iconColor,
-    label: e.label,
-    right: <Text size="xs" color="muted" tabular>{e.time}</Text>,
-    details: (
-      <View style={{ gap: 8 }}>
-        <Text size="xs" color="muted">{e.detail}</Text>
-        {e.chungTu ? (
-          <View style={{ flexDirection: "row" }}>
-            <Button title="Open document" color="muted" onPress={onMoChungTu} />
-          </View>
-        ) : null}
-      </View>
-    ),
-  }));
-  return (
-    <Card style={{ padding: 16 }}>
-      <Timeline items={items} />
-    </Card>
-  );
-}
-
-export function TplDetail() {
-  const [tab, setTab] = useState<string>("tongquan");
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
-        {/* breadcrumb line */}
-        <Text size="xs" color="muted">Orders / SO-2026-0042</Text>
-
-        {/* header band */}
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-          <Text size="xl" weight="semibold" tabular>SO-2026-0042</Text>
-          <Badge label="Shipping" color="blue" />
-          <Badge label="Overdue" color="red" />
-          <View style={{ flex: 1 }} />
-          <Button title="Print documents" color="secondary" onPress={() => {}} />
-          <Button title="Update" color="primary" onPress={() => {}} />
-        </View>
-        <Text size="sm" color="muted">Carton box NEW 2668 500×300×200 — NEWTECONS</Text>
-
-        {/* stat rail: one card, five KPI columns */}
-        <Card style={{ padding: 0 }}>
-          <View style={{ flexDirection: "row", paddingVertical: 14, paddingHorizontal: 16, gap: 16 }}>
-            {STATS.map((s) => (
-              <KPICard key={s.label} label={s.label} value={s.value} tone={s.tone} size="sm" style={{ flex: 1 }} />
-            ))}
-          </View>
-        </Card>
-
-        <Tabs
-          accessibilityLabel="Record sections"
-          options={TABS}
-          selectedTab={tab}
-          onSelectTab={setTab}
-        />
-
-        {tab === "tongquan" ? <TongQuan /> : null}
-        {tab === "chungtu" ? <ChungTu /> : null}
-        {tab === "nhatky" ? <NhatKy onMoChungTu={() => setTab("chungtu")} /> : null}
-      </View>
-    </ScrollView>
-  );
-}