@lotics/ui 7.19.3 → 9.0.0

package/examples/tpl_intake.tsx

@@ -1,206 +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 { Button } from "@lotics/ui/button";
-import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
-import { FileDropzone } from "@lotics/ui/file_dropzone";
-import type { DisplayFile } from "@lotics/ui/file_thumbnail";
-import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
-import { Divider } from "@lotics/ui/divider";
-import { FormField } from "@lotics/ui/form_field";
-import { Picker } from "@lotics/ui/picker";
-import { Switch } from "@lotics/ui/switch";
-import { TextInputField } from "@lotics/ui/text_input_field";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Client intake — the multi-section intake form for a new
-// business partner. One banded Card: header (title + why it matters) →
-// three titled fieldsets separated by Dividers → footer per Action Layout
-// (helper text left · Cancel muted + ONE primary right). Fields wrap on a
-// flexBasis grid; every field holds state; Tax ID demonstrates the error band.
-// ─────────────────────────────────────────────────────────────────────────────
-
-const INDUSTRIES = [
-  { label: "Manufacturing", value: "san_xuat" },
-  { label: "Trading", value: "thuong_mai" },
-  { label: "Construction", value: "xay_dung" },
-  { label: "Transportation", value: "van_tai" },
-  { label: "Packaging", value: "bao_bi" },
-  { label: "Other", value: "khac" },
-];
-
-const PAYMENT_TERMS = [
-  { label: "Due on receipt", value: "ngay" },
-  { label: "Net 15", value: "15" },
-  { label: "Net 30", value: "30" },
-  { label: "Net 45", value: "45" },
-];
-
-/** Grid cells: half-width on wide screens, full row when they can't fit. */
-const half = { flexGrow: 1, flexBasis: 280 } as const;
-const full = { flexGrow: 1, flexBasis: "100%" } as const;
-
-function FieldsetTitle({ title, hint }: { title: string; hint: string }) {
-  return (
-    <View style={{ gap: 2, paddingBottom: 14 }}>
-      <Text size="xs" color="muted" transform="uppercase">{title}</Text>
-      <Text size="xs" color="muted">{hint}</Text>
-    </View>
-  );
-}
-
-export function TplIntake() {
-  const [tenCongTy, setTenCongTy] = useState("Northwind Packaging Co., Ltd.");
-  const [mst, setMst] = useState("031245678");
-  const [linhVuc, setLinhVuc] = useState("");
-  const [nguoiLienHe, setNguoiLienHe] = useState("Maria Lopez");
-  const [dienThoai, setDienThoai] = useState("0903 558 214");
-  const [email, setEmail] = useState("maria.lopez@northwindpkg.com");
-  const [nhomZalo, setNhomZalo] = useState("");
-  const [hanThanhToan, setHanThanhToan] = useState("30");
-  const [hoaDonVat, setHoaDonVat] = useState(true);
-  const [ghiChu, setGhiChu] = useState("");
-  const [giayTo, setGiayTo] = useState<DisplayFile[]>([]);
-
-  const soChuSo = mst.replace(/\D/g, "").length;
-  const mstError =
-    mst.length > 0 && !/^\d{10}(\d{3})?$/.test(mst.replace(/[\s.-]/g, ""))
-      ? `Tax ID must be 10 or 13 digits — currently ${soChuSo}.`
-      : undefined;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} 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">Client intake</Text>
-            <Text size="sm" color="muted">Set up a new partner record — complete details up front mean quotes, orders, and invoices never need a follow-up question</Text>
-          </View>
-        </View>
-
-        <Card style={{ padding: 0 }}>
-          {/* card header: what this form decides */}
-          <CardHeader>
-            <CardHeaderTitle description="Enter once, reuse on every future quote and invoice — the tax ID is the matching key, double-check it before creating">
-              Partner record
-            </CardHeaderTitle>
-          </CardHeader>
-
-          {/* fieldset 1 · General information */}
-          <View style={{ paddingHorizontal: 20, paddingTop: 18, paddingBottom: 4 }}>
-            <FieldsetTitle title="General information" hint="Legal name as on the business registration, not the trading name" />
-            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-              <FormField label="Company name" style={full}>
-                <TextInputField value={tenCongTy} onChangeText={setTenCongTy} placeholder="Name on the business registration" />
-              </FormField>
-              <FormField label="Tax ID" error={mstError} style={half}>
-                <TextInputField
-                  value={mst}
-                  onChangeText={setMst}
-                  placeholder="10 or 13 digits"
-                  inputMode="numeric"
-                  style={{ fontVariant: ["tabular-nums"] }}
-                />
-              </FormField>
-              <FormField label="Industry" style={half}>
-                <Picker options={INDUSTRIES} value={linhVuc} onValueChange={setLinhVuc} placeholder="Select industry" />
-              </FormField>
-            </View>
-          </View>
-          <Divider />
-
-          {/* fieldset 2 · Contact */}
-          <View style={{ paddingHorizontal: 20, paddingTop: 18, paddingBottom: 4 }}>
-            <FieldsetTitle title="Contact" hint="The person who receives quotes and the monthly statement reconciliation" />
-            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-              <FormField label="Contact person" style={half}>
-                <TextInputField value={nguoiLienHe} onChangeText={setNguoiLienHe} placeholder="Full name" />
-              </FormField>
-              <FormField label="Phone" style={half}>
-                <TextInputField
-                  value={dienThoai}
-                  onChangeText={setDienThoai}
-                  placeholder="Mobile number"
-                  inputMode="tel"
-                  style={{ fontVariant: ["tabular-nums"] }}
-                />
-              </FormField>
-              <FormField label="Email" style={half}>
-                <TextInputField value={email} onChangeText={setEmail} placeholder="name@company.com" inputMode="email" autoCapitalize="none" />
-              </FormField>
-              <FormField label="Chat group" optional optionalLabel="Optional" style={half}>
-                <TextInputField value={nhomZalo} onChangeText={setNhomZalo} placeholder="Group used to coordinate orders" />
-              </FormField>
-            </View>
-          </View>
-          <Divider />
-
-          {/* fieldset 3 · Terms */}
-          <View style={{ paddingHorizontal: 20, paddingTop: 18, paddingBottom: 4 }}>
-            <FieldsetTitle title="Terms" hint="Applied as the default on every order for this partner, adjustable per order" />
-            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-              <FormField label="Payment terms" style={half}>
-                <Picker options={PAYMENT_TERMS} value={hanThanhToan} onValueChange={setHanThanhToan} placeholder="Select payment terms" />
-              </FormField>
-              <FormField label="VAT invoice" style={half}>
-                <View style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 40 }}>
-                  <Switch accessibilityLabel="VAT invoice" value={hoaDonVat} onChange={setHoaDonVat} />
-                  <Text size="sm" color="muted">{hoaDonVat ? "Issue an invoice for every order" : "No invoices issued"}</Text>
-                </View>
-              </FormField>
-              <FormField label="Notes" optional optionalLabel="Optional" style={full}>
-                <TextInputField
-                  value={ghiChu}
-                  onChangeText={setGhiChu}
-                  placeholder="Special requirements for delivery, documents, reconciliation…"
-                  numberOfLines={3}
-                />
-              </FormField>
-            </View>
-          </View>
-
-          <Divider />
-
-          {/* fieldset 4 · Documents — the attachment pattern: FileDropzone
-              captures, FileThumbnailGrid displays what landed */}
-          <View style={{ paddingHorizontal: 20, paddingTop: 18, paddingBottom: 16, gap: 12 }}>
-            <FieldsetTitle title="Documents" hint="Business registration and legal documents — clear scans or photos" />
-            <FileDropzone
-              height={120}
-              label="Drop the business registration here"
-              hint="or click to browse · PDF, images"
-              dropLabel="Release to attach"
-              accept="application/pdf,image/*"
-              accessibilityLabel="Attach business registration"
-              onFiles={(files) =>
-                setGiayTo((prev) => [
-                  ...prev,
-                  ...files.map((f, i) => ({
-                    id: `${f.name}-${prev.length + i}`,
-                    filename: f.name,
-                    mimeType: f.type || "application/octet-stream",
-                    url: URL.createObjectURL(f),
-                  })),
-                ])
-              }
-            />
-            {giayTo.length > 0 ? <FileThumbnailGrid files={giayTo} itemSize={88} /> : null}
-          </View>
-
-          {/* footer per Action Layout: helper left · Cancel muted + ONE primary right */}
-          <CardFooter>
-            <Text size="xs" color="muted" style={{ flex: 1 }}>
-              {giayTo.length > 0
-                ? `${giayTo.length} files attached · record awaits Accounting approval before the first order`
-                : "New records await Accounting approval before the first order"}
-            </Text>
-            <Button title="Cancel" color="muted" onPress={() => {}} />
-            <Button title="Create record" color="primary" onPress={() => {}} />
-          </CardFooter>
-        </Card>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_match.tsx

@@ -1,134 +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 { Button } from "@lotics/ui/button";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { SegmentedControl } from "@lotics/ui/segmented_control";
-import { EmptyState } from "@lotics/ui/empty_state";
-import { ReviewCard, type ReviewAction } from "@lotics/ui/review_card";
-import { MatchSides, MatchSideText } from "@lotics/ui/match_sides";
-import type { ConfidenceLevel } from "@lotics/ui/confidence";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Match & reconcile — the agent proposes PAIRINGS and shows its
-// reasoning; the human confirms, reassigns, or rejects. Each row is two-sided
-// (a known item ↔ the agent's proposed counterpart) with a confidence on the
-// bridge. High-confidence pairs batch-accept; the rest are worked one by one.
-// Same shape for bank-line ↔ invoice, invoice ↔ PO, dedup A ↔ B, entity
-// resolution. Strip the agent's reasoning and it's just a deterministic match register.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface M {
-  id: string;
-  amount: number;
-  source: { title: string; detail: string };
-  match?: { title: string; detail: string };
-  /** An alternate candidate the agent considered — drives Reassign. */
-  alt?: { title: string; detail: string };
-  rationale: string;
-  confidence: ConfidenceLevel;
-  status: "open" | "accepted" | "dismissed";
-}
-
-const SEED: M[] = [
-  { id: "m1", amount: 86_200_000, source: { title: "INCOMING TT — ATLAS COMPONENTS", detail: "09 Jun · 86,200,000 ₫" }, match: { title: "INV-2026-0312", detail: "Atlas Components · 86,200,000 ₫" }, rationale: "Exact amount and the invoice number appears in the transfer memo.", confidence: "high", status: "open" },
-  { id: "m2", amount: 41_300_000, source: { title: "CRESTLINE TT PAYMENT", detail: "09 Jun · 41,300,000 ₫" }, match: { title: "INV-2026-0318", detail: "Crestline Furniture · 41,300,000 ₫" }, rationale: "Amount matches to the đồng and the payer name maps to the customer on file.", confidence: "high", status: "open" },
-  { id: "m3", amount: 22_500_000, source: { title: "VITTORIA ACC — REF 0321", detail: "10 Jun · 22,500,000 ₫" }, match: { title: "INV-2026-0321", detail: "Vittoria Accessories · 22,500,000 ₫" }, rationale: "Reference 0321 cited; amount exact.", confidence: "high", status: "open" },
-  { id: "m4", amount: 18_700_000, source: { title: "BRIGHTCELL JUNE", detail: "10 Jun · 18,700,000 ₫" }, match: { title: "INV-2026-0324", detail: "Brightcell Batteries · 18,700,000 ₫" }, alt: { title: "INV-2026-0319", detail: "Brightcell Batteries · 18,700,000 ₫" }, rationale: "Amount + customer match, but two open invoices share this total — confirm the period.", confidence: "medium", status: "open" },
-  { id: "m5", amount: 12_600_000, source: { title: "MERIDIAN PART PAYMENT", detail: "12 Jun · 12,600,000 ₫" }, match: { title: "INV-2026-0326", detail: "Meridian Construction · 25,200,000 ₫" }, rationale: "Half the invoice total from the same payer — likely a partial payment.", confidence: "medium", status: "open" },
-  { id: "m6", amount: 25_200_000, source: { title: "INCOMING TT REF 88412", detail: "11 Jun · 25,200,000 ₫" }, alt: { title: "INV-2026-0326", detail: "Meridian Construction · 25,200,000 ₫" }, rationale: "No name or reference on the line; the amount matches one open invoice but the agent isn't confident.", confidence: "low", status: "open" },
-  { id: "m7", amount: 264_000, source: { title: "BANK CHARGES JUNE", detail: "11 Jun · 264,000 ₫" }, rationale: "No invoice fits; the description reads as a bank fee, not a receipt.", confidence: "low", status: "open" },
-  { id: "m8", amount: 64_800_000, source: { title: "ATLAS COMPONENTS — INV-0301", detail: "08 Jun · 64,800,000 ₫" }, match: { title: "INV-2026-0301", detail: "Atlas Components · 64,800,000 ₫" }, rationale: "Exact reference and amount.", confidence: "high", status: "accepted" },
-];
-
-export function TplMatch() {
-  const [rows, setRows] = useState<M[]>(SEED);
-  const [tab, setTab] = useState<"open" | "resolved">("open");
-
-  const set = (id: string, status: M["status"]) => setRows((prev) => prev.map((r) => (r.id === id ? { ...r, status } : r)));
-  const reassign = (id: string) =>
-    setRows((prev) =>
-      prev.map((r) =>
-        r.id === id && r.alt ? { ...r, match: r.alt, alt: r.match, confidence: "medium", rationale: "Reassigned to the alternate candidate the agent considered." } : r,
-      ),
-    );
-  const acceptAllHigh = () => setRows((prev) => prev.map((r) => (r.status === "open" && r.confidence === "high" && r.match ? { ...r, status: "accepted" } : r)));
-
-  const open = rows.filter((r) => r.status === "open");
-  const resolved = rows.filter((r) => r.status !== "open");
-  const visible = tab === "open" ? open : resolved;
-  const accepted = rows.filter((r) => r.status === "accepted");
-  const matchedValue = accepted.reduce((s, r) => s + r.amount, 0);
-  const unmatched = open.filter((r) => !r.match).length;
-  const highOpen = open.filter((r) => r.confidence === "high" && r.match).length;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
-        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
-          <View style={{ flex: 1, gap: 2 }}>
-            <Text size="xl" weight="semibold">Payment matching</Text>
-            <Text size="sm" color="muted">The agent pairs incoming payments to open invoices — you confirm, reassign, or reject</Text>
-          </View>
-          {tab === "open" && highOpen > 0 ? (
-            <Button title={`Accept ${highOpen} high-confidence`} color="secondary" onPress={acceptAllHigh} />
-          ) : null}
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Proposed", value: open.length, format: "number", caption: "awaiting a decision" },
-            { label: "Accepted", value: accepted.length, format: "number" },
-            { label: "Unmatched", value: unmatched, format: "number", tone: unmatched > 0 ? "warning" : "default", info: "Lines the agent couldn't pair confidently — they need a human to find the counterpart or take an escape hatch." },
-            { label: "Matched value", value: matchedValue, format: "currency", compact: true, info: "Money tied to an invoice through an accepted pairing." },
-          ]}
-        />
-
-        <SegmentedControl
-          accessibilityLabel="Queue"
-          options={[
-            { label: `Proposed · ${open.length}`, value: "open" },
-            { label: `Resolved · ${resolved.length}`, value: "resolved" },
-          ]}
-          value={tab}
-          onValueChange={setTab}
-        />
-
-        {visible.length === 0 ? (
-          <EmptyState
-            icon="circle-check"
-            message={tab === "open" ? "Queue cleared" : "Nothing resolved yet"}
-            hint={tab === "open" ? "Every proposal has been accepted or rejected" : undefined}
-          />
-        ) : (
-          <View style={{ gap: 10 }}>
-            {visible.map((r) => {
-              const actions: ReviewAction[] = [
-                { label: "Not a match", onPress: () => set(r.id, "dismissed"), kind: "muted" },
-                ...(r.alt ? [{ label: r.match ? "Reassign" : "Find match", onPress: () => reassign(r.id), kind: "secondary" as const }] : []),
-                ...(r.match ? [{ label: "Accept", onPress: () => set(r.id, "accepted"), kind: "primary" as const }] : []),
-              ];
-              return (
-                <ReviewCard
-                  key={r.id}
-                  summary={r.source.title}
-                  confidence={r.confidence}
-                  rationale={r.rationale}
-                  status={r.status}
-                  acceptedLabel={r.match ? `Matched · ${r.match.title}` : "Matched"}
-                  actions={actions}
-                >
-                  <MatchSides
-                    source={<MatchSideText title={r.source.title} detail={r.source.detail} />}
-                    match={r.match ? <MatchSideText title={r.match.title} detail={r.match.detail} align="right" /> : undefined}
-                  />
-                </ReviewCard>
-              );
-            })}
-          </View>
-        )}
-      </View>
-    </ScrollView>
-  );
-}