@lotics/ui 3.5.0 → 4.0.0

package/examples/tpl_stock.tsx

@@ -0,0 +1,387 @@
+import { useMemo, useState } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, ramp, solid, type ColorName } from "@lotics/ui/colors";
+import { ActionMenu } from "@lotics/ui/action_menu";
+import { Badge } from "@lotics/ui/badge";
+import { Breakdown } from "@lotics/ui/breakdown";
+import { Button } from "@lotics/ui/button";
+import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer } from "@lotics/ui/drawer";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { Pagination } from "@lotics/ui/pagination";
+import { PillButton } from "@lotics/ui/pill_button";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { SearchInput } from "@lotics/ui/search_input";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Stock overview — monitoring a population too large to browse
+// (10,000+ units). The funnel: KPI strip (population health) → Breakdown
+// cards (composition by dimension; pressing a segment is the drill-down) →
+// dismissible facet chips + search → PAGINATED register (the data is the
+// reason Pagination exists) → row press opens the sequenced unit drawer,
+// ⋯ carries quick operations. Facets combine across dimensions, and each
+// Breakdown's counts respect the OTHER dimensions' selections — true
+// faceted search.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Type/depot are COHERENT dimensions with no inherent meaning per category —
+// one hue family each, shaded by a `ramp` (the label carries identity, the
+// shade only orders). Status colors carry MEANING, so each is its own
+// `ColorName` (one reference; the Breakdown solid()s it, the row Badge takes
+// it directly). No hand-picked hex anywhere.
+const TYPES = [
+  { key: "dry20", label: "Dry 20ft" },
+  { key: "dry40", label: "Dry 40ft" },
+  { key: "hc40", label: "High-cube 40ft" },
+  { key: "reefer", label: "Reefer 40ft" },
+  { key: "opentop", label: "Open-top" },
+  { key: "tank", label: "Tank" },
+] as const;
+const TYPE_RAMP = ramp("blue", TYPES.length);
+
+const STATUSES = [
+  { key: "leased", label: "Leased out", color: "emerald" },
+  { key: "yard", label: "In yard", color: "zinc" },
+  { key: "transit", label: "In transit", color: "blue" },
+  { key: "repair", label: "Under repair", color: "amber" },
+  { key: "idle", label: "Idle >30 days", color: "red" },
+] as const satisfies readonly { key: string; label: string; color: ColorName }[];
+
+const DEPOTS = [
+  { key: "eastport", label: "Eastport" },
+  { key: "northgate", label: "Northgate" },
+  { key: "riverside", label: "Riverside" },
+  { key: "southbay", label: "Southbay" },
+] as const;
+const DEPOT_RAMP = ramp("violet", DEPOTS.length);
+
+type TypeKey = (typeof TYPES)[number]["key"];
+type StatusKey = (typeof STATUSES)[number]["key"];
+type DepotKey = (typeof DEPOTS)[number]["key"];
+
+interface Unit {
+  id: string;
+  type: TypeKey;
+  status: StatusKey;
+  depot: DepotKey;
+  ageYears: number;
+  lastMove: string;
+  value: number;
+}
+
+// 10,482 deterministic units — integer hashing instead of Math.random so the
+// page is stable across reloads. Distributions are intentionally uneven
+// (real fleets are): lots of dry 40ft, few tanks; most units leased.
+function hash(i: number, salt: number): number {
+  let x = (i + 1) * 2654435761 + salt * 40503;
+  x = ((x >>> 16) ^ x) * 0x45d9f3b;
+  x = ((x >>> 16) ^ x) * 0x45d9f3b;
+  return (x >>> 16) % 1000;
+}
+
+function pick<T>(i: number, salt: number, weighted: [T, number][]): T {
+  const total = weighted.reduce((s, [, w]) => s + w, 0);
+  let roll = hash(i, salt) % total;
+  for (const [item, w] of weighted) {
+    if (roll < w) return item;
+    roll -= w;
+  }
+  return weighted[0][0];
+}
+
+const TYPE_BASE_VALUE: Record<TypeKey, number> = {
+  dry20: 38_000_000, dry40: 62_000_000, hc40: 71_000_000,
+  reefer: 240_000_000, opentop: 88_000_000, tank: 310_000_000,
+};
+
+const UNITS: Unit[] = Array.from({ length: 10_482 }, (_, i) => {
+  const type = pick<TypeKey>(i, 1, [["dry40", 34], ["dry20", 26], ["hc40", 18], ["reefer", 12], ["opentop", 7], ["tank", 3]]);
+  const status = pick<StatusKey>(i, 2, [["leased", 52], ["yard", 18], ["transit", 14], ["repair", 9], ["idle", 7]]);
+  const depot = pick<DepotKey>(i, 3, [["eastport", 38], ["northgate", 27], ["riverside", 21], ["southbay", 14]]);
+  const ageYears = 1 + (hash(i, 4) % 12);
+  const day = 1 + (hash(i, 5) % 28);
+  const month = status === "idle" ? 1 + (hash(i, 6) % 4) : 4 + (hash(i, 6) % 3);
+  const value = Math.round((TYPE_BASE_VALUE[type] * (100 - ageYears * 4 + (hash(i, 7) % 10))) / 100 / 100_000) * 100_000;
+  return {
+    id: `CSU-${String(i + 1).padStart(6, "0")}`,
+    type, status, depot, ageYears,
+    lastMove: `${String(day).padStart(2, "0")}/${String(month).padStart(2, "0")}`,
+    value,
+  };
+});
+
+const PAGE_SIZE = 12;
+
+const typeOf = (k: TypeKey) => TYPES.find((t) => t.key === k)!;
+const statusOf = (k: StatusKey) => STATUSES.find((s) => s.key === k)!;
+const depotOf = (k: DepotKey) => DEPOTS.find((d) => d.key === k)!;
+
+function KVRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 28 }}>
+      <Text size="sm" color="muted" style={{ flex: 1 }}>{label}</Text>
+      {children}
+    </View>
+  );
+}
+
+export function TplStock() {
+  const [type, setType] = useState<string | null>(null);
+  const [status, setStatus] = useState<string | null>(null);
+  const [depot, setDepot] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const [openIdx, setOpenIdx] = useState<number | null>(null);
+
+  // Facets combine with AND; any change resets paging.
+  const setFacet = (set: (v: string | null) => void) => (v: string | null) => {
+    set(v);
+    setPage(0);
+    setOpenIdx(null);
+  };
+
+  const matches = (u: Unit, skip?: "type" | "status" | "depot") =>
+    (skip === "type" || !type || u.type === type) &&
+    (skip === "status" || !status || u.status === status) &&
+    (skip === "depot" || !depot || u.depot === depot) &&
+    (search.trim() === "" || u.id.toLowerCase().includes(search.trim().toLowerCase()));
+
+  // Each dimension's counts respect the OTHER dimensions — the segment you
+  // could still drill into, not the unfiltered universe.
+  const { byType, byStatus, byDepot, filtered } = useMemo(() => {
+    const byType = new Map<string, number>();
+    const byStatus = new Map<string, number>();
+    const byDepot = new Map<string, number>();
+    const filtered: Unit[] = [];
+    for (const u of UNITS) {
+      if (matches(u, "type")) byType.set(u.type, (byType.get(u.type) ?? 0) + 1);
+      if (matches(u, "status")) byStatus.set(u.status, (byStatus.get(u.status) ?? 0) + 1);
+      if (matches(u, "depot")) byDepot.set(u.depot, (byDepot.get(u.depot) ?? 0) + 1);
+      if (matches(u)) filtered.push(u);
+    }
+    return { byType, byStatus, byDepot, filtered };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [type, status, depot, search]);
+
+  const pageRows = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
+  const open = openIdx !== null ? pageRows[openIdx] : null;
+
+  // Population health — cross-cutting numbers no facet card shows.
+  const idle = UNITS.filter((u) => u.status === "idle").length;
+  const repair = UNITS.filter((u) => u.status === "repair").length;
+  const working = UNITS.filter((u) => u.status === "leased" || u.status === "transit").length;
+  const fleetValue = useMemo(() => UNITS.reduce((s, u) => s + u.value, 0), []);
+
+  const chips: { key: string; label: string; clear: () => void }[] = [
+    ...(type ? [{ key: "type", label: typeOf(type as TypeKey).label, clear: () => setFacet(setType)(null) }] : []),
+    ...(status ? [{ key: "status", label: statusOf(status as StatusKey).label, clear: () => setFacet(setStatus)(null) }] : []),
+    ...(depot ? [{ key: "depot", label: depotOf(depot as DepotKey).label, clear: () => setFacet(setDepot)(null) }] : []),
+  ];
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 1100, 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">Stock overview</Text>
+            <Text size="sm" color="muted">The whole fleet at a glance — drill into any slice, then walk the units one by one</Text>
+          </View>
+          <Button title="Register units" color="primary" onPress={() => {}} />
+        </View>
+
+        {/* population health — numbers no single facet shows */}
+        <KPIStrip
+          items={[
+            { label: "Total units", value: UNITS.length, format: "number" },
+            { label: "Utilization", value: Math.round((working / UNITS.length) * 100), format: "percentage", info: "Share of the fleet leased out or in transit — units earning, not sitting." },
+            { label: "Idle >30 days", value: idle, format: "number", tone: "danger", info: "Units with no movement for over 30 days — candidates for repositioning or sale. Drill in via the status breakdown." },
+            { label: "Fleet value", value: fleetValue, format: "currency", compact: true, caption: `${repair.toLocaleString("en-US")} under repair` },
+          ]}
+        />
+
+        {/* composition — press a segment to drill; selections combine */}
+        <View style={{ flexDirection: "row", gap: 16, alignItems: "stretch", flexWrap: "wrap" }}>
+          <Card style={{ padding: 0, flexGrow: 1, flexBasis: 300 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Fleet composition by container type. Press a type to filter the register below — combine with status and depot.">
+                By type
+              </CardHeaderTitle>
+            </CardHeader>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16 }}>
+              <Breakdown
+                items={TYPES.map((t, i) => ({ key: t.key, label: t.label, value: byType.get(t.key) ?? 0, color: TYPE_RAMP[i] }))}
+                selectedKey={type}
+                onSelect={setFacet(setType)}
+              />
+            </View>
+          </Card>
+          <Card style={{ padding: 0, flexGrow: 1, flexBasis: 300 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Where every unit stands right now. Idle and repair are the slices to watch.">
+                By status
+              </CardHeaderTitle>
+            </CardHeader>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16 }}>
+              <Breakdown
+                items={STATUSES.map((s) => ({ key: s.key, label: s.label, value: byStatus.get(s.key) ?? 0, color: solid(s.color) }))}
+                selectedKey={status}
+                onSelect={setFacet(setStatus)}
+              />
+            </View>
+          </Card>
+          <Card style={{ padding: 0, flexGrow: 1, flexBasis: 300 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Units by home depot — spot imbalances worth a repositioning run.">
+                By depot
+              </CardHeaderTitle>
+            </CardHeader>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16 }}>
+              <Breakdown
+                items={DEPOTS.map((d, i) => ({ key: d.key, label: d.label, value: byDepot.get(d.key) ?? 0, color: DEPOT_RAMP[i] }))}
+                selectedKey={depot}
+                onSelect={setFacet(setDepot)}
+              />
+            </View>
+          </Card>
+        </View>
+
+        {/* the register — paginated; facets + search feed it */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle info="Every unit matching the active slice. Press a row to open the unit; ⋯ for quick operations.">
+              Units
+            </CardHeaderTitle>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+              {chips.map((c) => (
+                <PillButton key={c.key} onDismiss={c.clear} dismissTooltip="Clear filter">
+                  <Text size="xs" weight="medium" color="muted">{c.label}</Text>
+                </PillButton>
+              ))}
+              <View style={{ width: 240 }}>
+                <SearchInput
+                  placeholder="Search by unit no…"
+                  value={search}
+                  onChangeText={(t) => { setSearch(t); setPage(0); }}
+                  accessibilityLabel="Search units"
+                />
+              </View>
+            </View>
+          </CardHeader>
+
+          {/* eyebrow columns */}
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 10 }}>
+            <Text size="xs" color="muted" transform="uppercase" style={{ width: 110 }}>Unit no</Text>
+            <Text size="xs" color="muted" transform="uppercase" style={{ flex: 1 }}>Type</Text>
+            <Text size="xs" color="muted" transform="uppercase" style={{ width: 96 }}>Depot</Text>
+            <Text size="xs" color="muted" transform="uppercase" style={{ width: 76 }}>Last move</Text>
+            <Text size="xs" color="muted" transform="uppercase" tabular align="right" style={{ width: 104 }}>Value</Text>
+            <Text size="xs" color="muted" transform="uppercase" style={{ width: 110 }}>Status</Text>
+            <View style={{ width: 28 }} />
+          </View>
+          <Divider />
+
+          {pageRows.length === 0 ? (
+            <EmptyState message="No units match this slice" hint="Clear a filter chip or adjust the search" />
+          ) : (
+            pageRows.map((u, i) => (
+              <View key={u.id}>
+                {i > 0 ? <Divider /> : null}
+                <PressableRow onPress={() => setOpenIdx(i)} selected={open?.id === u.id} style={{ gap: 8 }}>
+                  <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel={`Open ${u.id}`}
+                    onPress={() => setOpenIdx(i)}
+                    style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12, minHeight: 44 }}
+                  >
+                    <Text size="sm" weight="medium" tabular style={{ width: 110 }}>{u.id}</Text>
+                    <Text size="sm" numberOfLines={1} style={{ flex: 1 }}>{typeOf(u.type).label}</Text>
+                    <Text size="sm" color="muted" style={{ width: 96 }}>{depotOf(u.depot).label}</Text>
+                    <Text size="sm" tabular style={{ width: 76 }}>{u.lastMove}</Text>
+                    <Text size="sm" tabular align="right" style={{ width: 104 }}>{formatMoney(u.value)}</Text>
+                    {/* browse register: status is a secondary attribute (the
+                        triage signal lives in the By-status breakdown + Idle
+                        KPI) — the LIGHT dot reads cleaner across many rows than
+                        a tonal pill. The drawer header keeps the tonal pill. */}
+                    <View style={{ width: 116 }}>
+                      <Badge variant="dot" label={statusOf(u.status).label} color={statusOf(u.status).color} />
+                    </View>
+                  </Pressable>
+                  <ActionMenu
+                    accessibilityLabel={`Actions for ${u.id}`}
+                    items={[
+                      { key: "move", label: "Plan repositioning", icon: "arrow-right", onPress: () => {} },
+                      { key: "repair", label: "Send to repair", icon: "settings", disabled: u.status === "repair", onPress: () => {} },
+                      { key: "retire", label: "Retire unit", icon: "ban", danger: true, onPress: () => {} },
+                    ]}
+                  />
+                </PressableRow>
+              </View>
+            ))
+          )}
+
+          <CardFooter>
+            <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
+              {`${filtered.length.toLocaleString("en-US")} units in this slice · ${formatMoney(filtered.reduce((s, u) => s + u.value, 0), { compact: true })}`}
+            </Text>
+            <Pagination
+              page={page}
+              pageSize={PAGE_SIZE}
+              rowCount={pageRows.length}
+              hasMore={(page + 1) * PAGE_SIZE < filtered.length}
+              total={filtered.length}
+              onPageChange={(p) => { setPage(p); setOpenIdx(null); }}
+            />
+          </CardFooter>
+        </Card>
+      </View>
+
+      {open !== null && openIdx !== null ? (
+        <Drawer
+          open
+          onOpenChange={(o) => !o && setOpenIdx(null)}
+          title={open.id}
+          width={440}
+          onPrev={openIdx > 0 ? () => setOpenIdx(openIdx - 1) : undefined}
+          onNext={openIdx < pageRows.length - 1 ? () => setOpenIdx(openIdx + 1) : undefined}
+          position={`${page * PAGE_SIZE + openIdx + 1}/${filtered.length.toLocaleString("en-US")}`}
+        >
+          <View key={open.id} style={{ flex: 1, padding: 24, gap: 12 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Badge label={statusOf(open.status).label} color={statusOf(open.status).color} />
+              <Badge label={typeOf(open.type).label} />
+            </View>
+            <View style={{ gap: 6, paddingTop: 4 }}>
+              <KVRow label="Depot"><Text size="sm">{depotOf(open.depot).label}</Text></KVRow>
+              <Divider />
+              <KVRow label="Last movement"><Text size="sm" tabular>{open.lastMove}</Text></KVRow>
+              <Divider />
+              <KVRow label="Age"><Text size="sm" tabular>{`${open.ageYears} years`}</Text></KVRow>
+              <Divider />
+              <KVRow label="Book value"><Text size="sm" tabular>{formatMoney(open.value)}</Text></KVRow>
+            </View>
+          </View>
+          <View
+            style={{
+              borderTopWidth: 1,
+              borderTopColor: colors.border,
+              paddingHorizontal: 20,
+              paddingVertical: 14,
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: 12,
+            }}
+          >
+            <Button title="Plan repositioning" color="secondary" onPress={() => {}} />
+            <Button title="Open unit record" color="primary" onPress={() => {}} />
+          </View>
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}

package/examples/tpl_timeline.tsx

@@ -0,0 +1,244 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid } from "@lotics/ui/colors";
+import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
+import { Badge } from "@lotics/ui/badge";
+import { Card, CardHeader, CardHeaderTitle, CardHeaderMeta } from "@lotics/ui/card";
+import { Icon, type IconName } from "@lotics/ui/icon";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { Timeline, type TimelineItem } from "@lotics/ui/timeline";
+import { KPICard } from "@lotics/ui/kpi_card";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Activity log — the audit feed of ONE record (an order).
+// Grammar: zinc-50 canvas · header band · filter pills (ChipGroup) · one Card
+// per DAY, each card = date band → Divider → Timeline. Icon color = event
+// category accent (blue = documents, emerald = payments, zinc = system,
+// red = warnings). Times right-aligned tabular; expandable details on the
+// events that carry numbers. No dead rows: events without inline details
+// carry an ActionMenu (⋯) with the event's real operations — open/download
+// the document, view the workflow run, re-send the reminder.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type Cat = "chungtu" | "thanhtoan" | "hethong";
+
+interface MockEvent {
+  id: string;
+  cat: Cat;
+  icon: IconName;
+  color: string;
+  label: string;
+  time: string; // HH:mm
+  stats?: { label: string; value: string; tone?: "danger" }[];
+  file?: string;
+  note?: string;
+  actions?: ActionMenuItem[];
+}
+
+interface DayGroup {
+  id: string;
+  label: string; // "Today · 12/06"
+  events: MockEvent[];
+}
+
+const DAYS: DayGroup[] = [
+  {
+    id: "d0",
+    label: "Today · 12/06",
+    events: [
+      {
+        id: "e1", cat: "thanhtoan", icon: "circle-check", color: solid("emerald"),
+        label: "Accounting confirmed installment 2 — order settled", time: "14:32",
+        stats: [
+          { label: "Amount", value: formatMoney(12_600_000) },
+          { label: "Method", value: "Bank transfer" },
+          { label: "Outstanding", value: formatMoney(0) },
+        ],
+        note: "Reference TRX-0612-114 · First National Bank",
+      },
+      {
+        id: "e2", cat: "chungtu", icon: "file-up", color: solid("blue"),
+        label: "Nina Adams uploaded the signed delivery note", time: "11:05",
+        file: "DeliveryNote_DN-0042_signed.pdf",
+        actions: [
+          { key: "xem", label: "View document", icon: "eye", onPress: () => {} },
+          { key: "tai", label: "Download", icon: "download", onPress: () => {} },
+        ],
+      },
+      {
+        id: "e3", cat: "hethong", icon: "bolt", color: colors.zinc[500],
+        label: "Delivery-reconciliation workflow ran — quantities match the note", time: "11:06",
+        actions: [
+          { key: "chay", label: "View run", icon: "history", onPress: () => {} },
+          { key: "mo", label: "Open workflow", icon: "external-link", onPress: () => {} },
+        ],
+      },
+      {
+        id: "e4", cat: "hethong", icon: "bell", color: colors.zinc[500],
+        label: "Reminded Accounting: order awaiting invoice", time: "11:06",
+        actions: [
+          { key: "xem", label: "View notification", icon: "bell", onPress: () => {} },
+          { key: "nhac", label: "Remind again", icon: "repeat", onPress: () => {} },
+        ],
+      },
+    ],
+  },
+  {
+    id: "d1",
+    label: "Yesterday · 11/06",
+    events: [
+      {
+        id: "e5", cat: "chungtu", icon: "file-text", color: solid("blue"),
+        label: "VAT invoice issued from the Sales invoice template", time: "16:40",
+        file: "Invoice_INV-2026-0584.pdf",
+        actions: [
+          { key: "xem", label: "View invoice", icon: "eye", onPress: () => {} },
+          { key: "tai", label: "Download", icon: "download", onPress: () => {} },
+          { key: "gui", label: "Send to customer", icon: "send", onPress: () => {} },
+        ],
+      },
+      {
+        id: "e6", cat: "thanhtoan", icon: "credit-card", color: solid("emerald"),
+        label: "Installment 1 recorded (50% per contract)", time: "10:18",
+        stats: [
+          { label: "Amount", value: formatMoney(12_600_000) },
+          { label: "Outstanding", value: formatMoney(12_600_000), tone: "danger" },
+        ],
+      },
+      {
+        id: "e7", cat: "hethong", icon: "circle-alert", color: solid("red"),
+        label: "Warning: delivered 2 days past the needed-by date", time: "08:00",
+        note: "Needed by 09/06 — truck actually delivered 11/06. Logged against the delivery KPI.",
+      },
+    ],
+  },
+  {
+    id: "d2",
+    label: "Tuesday · 09/06",
+    events: [
+      {
+        id: "e8", cat: "hethong", icon: "pencil", color: colors.zinc[500],
+        label: "Mark Vu edited the Expected delivery date field", time: "15:22",
+        stats: [
+          { label: "Before", value: "09/06" },
+          { label: "After", value: "11/06" },
+        ],
+        note: "Reason: gluing line jammed at the plant — customer notified by chat.",
+      },
+      {
+        id: "e9", cat: "chungtu", icon: "send", color: solid("blue"),
+        label: "Approved quote emailed to the customer", time: "09:47",
+        file: "Quote_QT-2026-0042.pdf",
+        actions: [
+          { key: "xem", label: "View quote", icon: "eye", onPress: () => {} },
+          { key: "tai", label: "Download", icon: "download", onPress: () => {} },
+          { key: "gui", label: "Re-send email", icon: "send", onPress: () => {} },
+        ],
+      },
+      {
+        id: "e10", cat: "hethong", icon: "circle-check", color: solid("emerald"),
+        label: "Director approved the order — moved to Production order", time: "09:30",
+        actions: [
+          { key: "duyet", label: "View approval", icon: "eye", onPress: () => {} },
+          { key: "lien-ket", label: "Copy link", icon: "copy", onPress: () => {} },
+        ],
+      },
+    ],
+  },
+];
+
+const FILTERS = [
+  { value: "all", label: "All" },
+  { value: "chungtu", label: "Documents" },
+  { value: "thanhtoan", label: "Payments" },
+  { value: "hethong", label: "System" },
+] as const;
+
+function EventDetails({ ev }: { ev: MockEvent }) {
+  return (
+    <View style={{ gap: 8, paddingVertical: 4 }}>
+      {ev.stats ? (
+        <View style={{ flexDirection: "row", gap: 28 }}>
+          {ev.stats.map((s) => (
+            <KPICard key={s.label} label={s.label} value={s.value} format="none" size="sm" tone={s.tone} />
+          ))}
+        </View>
+      ) : null}
+      {ev.note ? <Text size="xs" color="muted">{ev.note}</Text> : null}
+    </View>
+  );
+}
+
+function toTimelineItem(ev: MockEvent): TimelineItem {
+  const hasDetails = !!ev.stats || !!ev.note;
+  return {
+    id: ev.id,
+    icon: ev.icon,
+    iconColor: ev.color,
+    label: ev.label,
+    right: (
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        {ev.file ? (
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 4 }}>
+            <Icon name="file" size={12} color={colors.zinc[400]} />
+            <Text size="xs" color="muted" numberOfLines={1}>{ev.file}</Text>
+          </View>
+        ) : null}
+        <Text size="xs" color="muted" tabular>{ev.time}</Text>
+        {ev.actions ? (
+          <ActionMenu items={ev.actions} accessibilityLabel={`Actions: ${ev.label}`} />
+        ) : null}
+      </View>
+    ),
+    details: hasDetails ? <EventDetails ev={ev} /> : undefined,
+  };
+}
+
+export function TplTimeline() {
+  const [filter, setFilter] = useState<string>("all");
+
+  const all = DAYS.flatMap((d) => d.events);
+  const countOf = (v: string) => (v === "all" ? all.length : all.filter((e) => e.cat === v).length);
+  const days = DAYS
+    .map((d) => ({ ...d, events: filter === "all" ? d.events : d.events.filter((e) => e.cat === filter) }))
+    .filter((d) => d.events.length > 0);
+
+  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">Activity log</Text>
+            <Text size="sm" color="muted">Order SO-2026-0042 · NEWTECONS — who did what, when, with the paper trail</Text>
+          </View>
+          <Badge label="Settled" color="emerald" />
+        </View>
+
+        {/* filter band — pills narrow the feed by event type */}
+        <ChipGroup
+          accessibilityLabel="Filter activity"
+          options={FILTERS.map((f) => ({ label: `${f.label} · ${countOf(f.value)}`, value: f.value }))}
+          value={filter}
+          onValueChange={setFilter}
+        />
+
+        {/* one card per day: date band → hairline → timeline */}
+        {days.map((d) => (
+          <Card key={d.id} style={{ padding: 0 }}>
+            <CardHeader>
+              <CardHeaderTitle>{d.label}</CardHeaderTitle>
+              <CardHeaderMeta>{`${d.events.length} events`}</CardHeaderMeta>
+            </CardHeader>
+            {/* Last Timeline row carries its own 14px tail — trim the band's bottom to keep 16px optical. */}
+            <View style={{ paddingTop: 16, paddingHorizontal: 16, paddingBottom: 2 }}>
+              <Timeline items={d.events.map(toTimelineItem)} />
+            </View>
+          </Card>
+        ))}
+      </View>
+    </ScrollView>
+  );
+}