@lotics/ui 3.6.0 → 4.0.0

package/examples/tpl_detail.tsx

@@ -0,0 +1,232 @@
+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.zinc[50] }} 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>
+  );
+}

package/examples/tpl_directory.tsx

@@ -0,0 +1,263 @@
+import { useState } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors } from "@lotics/ui/colors";
+import { ActionMenu } from "@lotics/ui/action_menu";
+import { Avatar } from "@lotics/ui/avatar";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { FilterPill } from "@lotics/ui/filter_pill";
+import { Counter } from "@lotics/ui/counter";
+import { Card } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer } from "@lotics/ui/drawer";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { formatMoney } from "@lotics/ui/format_money";
+import { StatusBadge } from "@lotics/ui/status_badge";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { SearchInput } from "@lotics/ui/search_input";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Directory — the partner directory every trading/logistics desk
+// needs: one searchable, filterable register of customers and suppliers with
+// the relationship status and volume at a glance.
+//
+// Grammar: zinc-50 canvas · one header band (count + ONE primary action) ·
+// toolbar (live search + type tabs) · ONE banded card of rows separated by
+// hairlines: Avatar → name + MST → type badge → tabular volume → StatusBadge.
+// Doors: a partner row is the PRIMARY entity here — press opens the partner
+// workspace Drawer (◀ ▶ / ←→ sequenced over the visible filtered ordering);
+// ⋯ holds the row's quick operations (destructive last).
+// ─────────────────────────────────────────────────────────────────────────────
+
+type PartnerKind = "khach" | "ncc";
+
+interface Partner {
+  id: string;
+  ten: string;
+  mst: string;
+  kind: PartnerKind;
+  donHang: number;
+  doanhSo: number;
+  active: boolean;
+}
+
+const PARTNERS: Partner[] = [
+  { id: "p1", ten: "Apex Plastics", mst: "0301452786", kind: "khach", donHang: 24, doanhSo: 860_000_000, active: true },
+  { id: "p2", ten: "Eastland Packaging", mst: "0312908455", kind: "ncc", donHang: 18, doanhSo: 412_000_000, active: true },
+  { id: "p3", ten: "Vista Paper Mills", mst: "0309977120", kind: "ncc", donHang: 31, doanhSo: 1_240_000_000, active: true },
+  { id: "p4", ten: "Crestline Foods", mst: "0107643298", kind: "khach", donHang: 12, doanhSo: 340_000_000, active: true },
+  { id: "p5", ten: "Harbor Engineering", mst: "0203318874", kind: "khach", donHang: 7, doanhSo: 156_000_000, active: false },
+  { id: "p6", ten: "Summit Freight", mst: "0314226901", kind: "ncc", donHang: 42, doanhSo: 980_000_000, active: true },
+  { id: "p7", ten: "Northway Appliances", mst: "0108812346", kind: "khach", donHang: 19, doanhSo: 624_000_000, active: true },
+  { id: "p8", ten: "Brightline Inks", mst: "0305570213", kind: "ncc", donHang: 9, doanhSo: 87_000_000, active: false },
+  { id: "p9", ten: "Phoenix Textiles", mst: "0300523847", kind: "khach", donHang: 28, doanhSo: 1_030_000_000, active: true },
+  { id: "p10", ten: "Delta Chemicals", mst: "0204461185", kind: "ncc", donHang: 15, doanhSo: 295_000_000, active: true },
+];
+
+const KIND_TABS = [
+  { value: "all", label: "All" },
+  { value: "khach", label: "Customers" },
+  { value: "ncc", label: "Suppliers" },
+] as const;
+
+type KindTab = (typeof KIND_TABS)[number]["value"];
+
+const kindLabel = (kind: PartnerKind) => (kind === "khach" ? "Customer" : "Supplier");
+
+function PartnerRow({ p, selected, onPress }: { p: Partner; selected: boolean; onPress: () => void }) {
+  return (
+    <PressableRow onPress={onPress} selected={selected} style={{ minHeight: 64 }}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={`Open partner ${p.ten}`}
+        onPress={onPress}
+        style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12 }}
+      >
+        <Avatar size={36} name={p.ten} />
+        <View style={{ flex: 1, gap: 2 }}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <Text size="sm" weight="medium" numberOfLines={1}>{p.ten}</Text>
+            <Badge label={kindLabel(p.kind)} color={p.kind === "khach" ? "blue" : undefined} />
+          </View>
+          <Text size="xs" color="muted" tabular>MST {p.mst}</Text>
+        </View>
+        <Text size="sm" color="muted" tabular>
+          {p.donHang} orders · {formatMoney(p.doanhSo)}
+        </Text>
+        <StatusBadge enabled={p.active} label={p.active ? "Active" : "Paused"} />
+      </Pressable>
+      <ActionMenu
+        accessibilityLabel={`Actions for ${p.ten}`}
+        items={[
+          { key: "don", label: "Create order", icon: "file-text", onPress: () => {} },
+          { key: "sua", label: "Edit details", icon: "pencil", onPress: () => {} },
+          p.active
+            ? { key: "dung", label: "Pause partnership", icon: "pause", danger: true, onPress: () => {} }
+            : { key: "molai", label: "Resume partnership", icon: "history", onPress: () => {} },
+        ]}
+      />
+    </PressableRow>
+  );
+}
+
+function KVRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 24 }}>
+      <Text size="sm" color="muted" style={{ width: 110 }}>{label}</Text>
+      {typeof children === "string" ? <Text size="sm">{children}</Text> : children}
+    </View>
+  );
+}
+
+// The drawer body — compact partner workspace: identity, the key facts already
+// on the row, and the two real next steps. Keyed by partner id by the caller
+// so nothing leaks across ◀ ▶ steps.
+function PartnerWorkspace({ p }: { p: Partner }) {
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 20 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+          <Avatar size={44} name={p.ten} />
+          <View style={{ gap: 4, flex: 1 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Badge label={kindLabel(p.kind)} color={p.kind === "khach" ? "blue" : undefined} />
+              <StatusBadge enabled={p.active} label={p.active ? "Active" : "Paused"} />
+            </View>
+            <Text size="xs" color="muted" tabular userSelect="auto">MST {p.mst}</Text>
+          </View>
+        </View>
+
+        <Divider />
+
+        <View style={{ gap: 6 }}>
+          <KVRow label="Partner type">{kindLabel(p.kind)}</KVRow>
+          <KVRow label="Tax ID"><Text size="sm" tabular userSelect="auto">{p.mst}</Text></KVRow>
+          <KVRow label="Orders"><Text size="sm" tabular>{`${p.donHang} orders`}</Text></KVRow>
+          <KVRow label="Revenue"><Text size="sm" tabular>{formatMoney(p.doanhSo)}</Text></KVRow>
+        </View>
+      </ScrollView>
+
+      {/* pinned footer — the workspace's escalation, commit action at the right edge */}
+      <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 }}>New orders attach to this partner — track them in the Orders module.</Text>
+        <Button title="Edit details" color="secondary" onPress={() => {}} />
+        <Button title="Create order" color="primary" onPress={() => {}} />
+      </View>
+    </>
+  );
+}
+
+export function TplDirectory() {
+  const [search, setSearch] = useState("");
+  const [tab, setTab] = useState<KindTab>("all");
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [minOrders, setMinOrders] = useState(0);
+
+  const q = search.trim().toLowerCase();
+  const matches = PARTNERS.filter(
+    (p) =>
+      (tab === "all" || p.kind === tab) &&
+      p.donHang >= minOrders &&
+      (q === "" || p.ten.toLowerCase().includes(q) || p.mst.includes(q)),
+  );
+
+  // The drawer sequences over the visible filtered ordering. When the open
+  // partner falls out of it (search/tab changed), the chevrons disappear but
+  // the drawer stays on the record.
+  const openPartner = PARTNERS.find((p) => p.id === openId) ?? null;
+  const seqIndex = openPartner ? matches.findIndex((p) => p.id === openPartner.id) : -1;
+
+  return (
+    <View style={{ flex: 1, backgroundColor: colors.zinc[50] }}>
+      <ScrollView style={{ flex: 1 }} 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 }}>
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+                <Text size="xl" weight="semibold">Directory</Text>
+              </View>
+              <Text size="sm" color="muted">Customers and suppliers — look anyone up by name or tax ID</Text>
+            </View>
+            <Button title="Add partner" color="primary" onPress={() => {}} />
+          </View>
+
+          {/* toolbar: live search + a partner-type lens. Wraps when narrow;
+              every control is 40px so a wrapped band reads as clean rows. */}
+          <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
+            <View style={{ flexGrow: 1, flexBasis: 240, minWidth: 200, maxWidth: 360 }}>
+              <SearchInput
+                placeholder="Search by name or tax ID…"
+                accessibilityLabel="Search partners"
+                value={search}
+                onChangeText={setSearch}
+              />
+            </View>
+            <ChipGroup
+              accessibilityLabel="Partner type"
+              options={KIND_TABS.map((t) => ({
+                label: `${t.label} · ${PARTNERS.filter((p) => t.value === "all" || p.kind === t.value).length}`,
+                value: t.value,
+              }))}
+              value={tab}
+              onValueChange={setTab}
+            />
+            <FilterPill
+              label="Min orders"
+              summary={minOrders > 0 ? `≥ ${minOrders}` : undefined}
+              onClear={() => setMinOrders(0)}
+              clearLabel="Clear min-orders filter"
+            >
+              <View style={{ gap: 10 }}>
+                <Text size="sm" color="muted">Show partners with at least</Text>
+                <Counter
+                  value={minOrders}
+                  min={0}
+                  max={50}
+                  step={5}
+                  onValueChange={setMinOrders}
+                  accessibilityLabel="minimum orders"
+                  format={(n) => `${n} orders`}
+                />
+              </View>
+            </FilterPill>
+          </View>
+
+          {/* the register: one card, hairline-separated rows */}
+          <Card style={{ padding: 0 }}>
+            {matches.length === 0 ? (
+              <EmptyState
+                message="No partners match"
+                hint="Try another keyword or switch the type filter"
+              />
+            ) : (
+              <View style={{ paddingVertical: 6 }}>
+                {matches.map((p, i) => (
+                  <View key={p.id}>
+                    {i > 0 ? <Divider /> : null}
+                    <PartnerRow p={p} selected={p.id === openId} onPress={() => setOpenId(p.id)} />
+                  </View>
+                ))}
+              </View>
+            )}
+          </Card>
+        </View>
+      </ScrollView>
+
+      {/* the partner workspace — body keyed by partner id so per-record state
+          resets when ◀ ▶ (or ←/→) steps through the visible list */}
+      {openPartner ? (
+        <Drawer
+          open onOpenChange={(o) => !o && setOpenId(null)} title={openPartner.ten} width={480}
+          onPrev={seqIndex > 0 ? () => setOpenId(matches[seqIndex - 1].id) : undefined}
+          onNext={seqIndex >= 0 && seqIndex < matches.length - 1 ? () => setOpenId(matches[seqIndex + 1].id) : undefined}
+          position={seqIndex >= 0 ? `${seqIndex + 1}/${matches.length}` : undefined}
+        >
+          <PartnerWorkspace key={openPartner.id} p={openPartner} />
+        </Drawer>
+      ) : null}
+    </View>
+  );
+}