@lotics/ui 8.0.0 → 10.0.0

package/examples/tpl_billing.tsx

@@ -1,344 +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, CardBody, CardHeader, CardHeaderMeta, CardHeaderTitle } from "@lotics/ui/card";
-import { Badge } from "@lotics/ui/badge";
-import { Link } from "@lotics/ui/link";
-import { Icon } from "@lotics/ui/icon";
-import { Divider } from "@lotics/ui/divider";
-import { NumberInput } from "@lotics/ui/number_input";
-import { Picker } from "@lotics/ui/picker";
-import type { PickerOption } from "@lotics/ui/picker";
-import { Callout, CalloutText } from "@lotics/ui/callout";
-import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
-import { Alert } from "@lotics/ui/alert";
-import { formatMoney } from "@lotics/ui/format_money";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Billing & invoicing — the charges→invoice→collect flow as ONE
-// banded card, not a stack of disconnected cards. It's a single document, so it
-// reads as one: the bill-to, each invoice, the collect total, and the deposit
-// are BANDS separated by hairline Dividers. The INVOICE DOCUMENT is the unit —
-// each band is anchored by its own title + status badge and owns its editable
-// charge lines (amount + how it's paid), its live total, and its issue action,
-// so a charge never lives apart from the document it bills on. Issuing a real
-// e-invoice is irreversible and needs a bill-to tax ID, so it's gated inline
-// (never a dead end) and confirmed in a Dialog. A refundable DEPOSIT is its own
-// (tinted) band — collected separately, never folded into the total due.
-// ─────────────────────────────────────────────────────────────────────────────
-
-type Method = "cash" | "transfer" | "card";
-const METHODS: PickerOption<Method>[] = [
-  { value: "cash", label: "Cash" },
-  { value: "transfer", label: "Bank transfer" },
-  { value: "card", label: "Card" },
-];
-
-interface Charge {
-  key: string;
-  label: string;
-  /** The expected list price — offered as a one-tap fill while the line is unset. */
-  standard: number;
-  amount: number;
-  method: Method | "";
-}
-
-interface Invoice {
-  key: string;
-  title: string;
-  charges: Charge[];
-  /** Lookup code once issued to the e-invoice provider; "" = not issued. */
-  ref: string;
-}
-
-const INITIAL: Invoice[] = [
-  {
-    key: "service",
-    title: "Service",
-    ref: "",
-    charges: [
-      { key: "labor", label: "Labor", standard: 1_200_000, amount: 1_200_000, method: "cash" },
-      { key: "parts", label: "Parts", standard: 0, amount: 0, method: "" },
-    ],
-  },
-  {
-    key: "inspection",
-    title: "Inspection",
-    ref: "",
-    charges: [{ key: "insp", label: "Inspection fee", standard: 150_000, amount: 150_000, method: "" }],
-  },
-  {
-    key: "disposal",
-    title: "Disposal",
-    ref: "INV-2026-0414",
-    charges: [{ key: "disp", label: "Disposal fee", standard: 80_000, amount: 80_000, method: "transfer" }],
-  },
-];
-
-type Status = "none" | "draft" | "issued";
-const invoiceTotal = (inv: Invoice) => inv.charges.reduce((s, c) => s + c.amount, 0);
-const invoiceStatus = (inv: Invoice): Status => (inv.ref ? "issued" : invoiceTotal(inv) > 0 ? "draft" : "none");
-const missingMethods = (inv: Invoice) => inv.charges.filter((c) => c.amount > 0 && !c.method);
-
-/** One charge: label, an amount that reads blank until entered (a one-tap
- *  Standard fill + "Set 0" while unset), and the payment method — which turns
- *  required the moment the line carries an amount. */
-function ChargeLine({
-  charge, onAmount, onMethod, disabled,
-}: {
-  charge: Charge;
-  onAmount: (v: number) => void;
-  onMethod: (m: Method) => void;
-  disabled: boolean;
-}) {
-  const unset = charge.amount <= 0;
-  const needsMethod = charge.amount > 0 && !charge.method;
-  return (
-    <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 10, flexWrap: "wrap" }}>
-      <Text size="sm" color="muted" style={{ width: 116, paddingTop: 10 }}>{charge.label}</Text>
-      <View style={{ flexGrow: 1, flexBasis: 130, gap: 4 }}>
-        <NumberInput
-          value={unset ? null : charge.amount}
-          onValueChange={(v) => onAmount(v ?? 0)}
-          min={0}
-          disabled={disabled}
-          accessibilityLabel={`${charge.label} amount`}
-        />
-        {unset && !disabled ? (
-          <View style={{ flexDirection: "row", gap: 8, flexWrap: "wrap" }}>
-            {charge.standard > 0 ? (
-              <Button title={`Standard ${formatMoney(charge.standard)}`} color="secondary" onPress={() => onAmount(charge.standard)} />
-            ) : null}
-            <Button title="Set 0" color="secondary" onPress={() => onAmount(0)} />
-          </View>
-        ) : null}
-      </View>
-      <View style={{ flexBasis: 168, gap: 4 }}>
-        <Picker
-          options={METHODS}
-          value={charge.method || null}
-          onValueChange={onMethod}
-          placeholder="How paid…"
-          disabled={disabled || unset}
-          accessibilityLabel={`Payment method · ${charge.label}`}
-        />
-        {needsMethod ? <Text size="xs" color="danger">Choose a method</Text> : null}
-      </View>
-    </View>
-  );
-}
-
-/** One invoice document, rendered as a BAND inside the single billing card: a
- *  title + status header, its charge lines, and a total + issue row. The leading
- *  Divider sets it off from the band above without a second card. */
-function InvoiceBand({
-  inv, taxId, onAmount, onMethod, onIssue,
-}: {
-  inv: Invoice;
-  taxId: string;
-  onAmount: (chKey: string, v: number) => void;
-  onMethod: (chKey: string, m: Method) => void;
-  onIssue: (inv: Invoice) => void;
-}) {
-  const total = invoiceTotal(inv);
-  const status = invoiceStatus(inv);
-  const missing = missingMethods(inv);
-  const canIssue = total > 0 && missing.length === 0 && !!taxId;
-  const blockReason = !taxId ? "Add the customer's tax ID to issue." : missing.length ? "Choose a payment method for every charged line." : "";
-  return (
-    <>
-      <Divider />
-      <CardBody style={{ gap: 10 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-          <Text weight="semibold">{inv.title}</Text>
-          <View style={{ flex: 1 }} />
-          {status === "issued" ? (
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Badge variant="dot" label="Issued" color="emerald" />
-              <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
-            </View>
-          ) : status === "draft" ? (
-            <Badge variant="dot" label="Draft" color="amber" />
-          ) : (
-            <Badge variant="dot" label="Nothing to bill" color="zinc" />
-          )}
-        </View>
-        {inv.charges.map((c) => (
-          <ChargeLine
-            key={c.key}
-            charge={c}
-            disabled={status === "issued"}
-            onAmount={(v) => onAmount(c.key, v)}
-            onMethod={(m) => onMethod(c.key, m)}
-          />
-        ))}
-        {total > 0 ? (
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap", paddingTop: 2 }}>
-            <Text size="sm" color="muted" style={{ flex: 1 }}>
-              Total <Text weight="semibold" color="default" tabular>{formatMoney(total)}</Text>
-            </Text>
-            {status === "issued" ? (
-              <>
-                <Button title="Re-issue" color="secondary" disabled={!canIssue} onPress={() => onIssue(inv)} />
-              </>
-            ) : (
-              <Button title="Issue invoice" color="primary" disabled={!canIssue} onPress={() => onIssue(inv)} />
-            )}
-          </View>
-        ) : null}
-        {total > 0 && status !== "issued" && !canIssue ? <Text size="xs" color="muted">{blockReason}</Text> : null}
-      </CardBody>
-    </>
-  );
-}
-
-export function TplBilling() {
-  const [invoices, setInvoices] = useState<Invoice[]>(INITIAL);
-  // The bill-to: issuing an e-invoice needs a tax ID. Toggle it to see the gate.
-  const [taxId, setTaxId] = useState("0312456780");
-  const [deposit, setDeposit] = useState(0);
-  const [confirm, setConfirm] = useState<Invoice | null>(null);
-  const seq = useState(() => ({ n: 414 }))[0];
-
-  const patchCharge = (invKey: string, chKey: string, patch: Partial<Charge>) =>
-    setInvoices((prev) =>
-      prev.map((inv) =>
-        inv.key !== invKey ? inv : { ...inv, charges: inv.charges.map((c) => (c.key === chKey ? { ...c, ...patch } : c)) },
-      ),
-    );
-
-  const grandTotal = invoices.reduce((s, inv) => s + invoiceTotal(inv), 0);
-  const allMissing = invoices.flatMap(missingMethods);
-  const issuedCount = invoices.filter((i) => invoiceStatus(i) === "issued").length;
-
-  const issue = (inv: Invoice) => {
-    seq.n += 1;
-    const ref = `INV-2026-${String(seq.n).padStart(4, "0")}`;
-    setInvoices((prev) => prev.map((x) => (x.key === inv.key ? { ...x, ref } : x)));
-    setConfirm(null);
-  };
-
-  const printReceipt = () => {
-    if (allMissing.length > 0) {
-      Alert.alert(
-        "Missing payment method",
-        `Choose how these charges were paid before printing the receipt:\n\n${allMissing.map((c) => `• ${c.label} (${formatMoney(c.amount)})`).join("\n")}`,
-        [{ text: "OK" }],
-      );
-      return;
-    }
-    Alert.alert("Receipt", `Printing receipt for ${formatMoney(grandTotal)}.`, [{ text: "OK" }]);
-  };
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 640, alignSelf: "center", gap: 16 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-          <Text size="xl" weight="semibold">Billing</Text>
-          <Badge label="Order #4821" color="zinc" />
-        </View>
-
-        {/* ONE banded card — bill-to · each invoice · collect · deposit */}
-        <Card style={{ padding: 0 }}>
-          <CardHeader>
-            <CardHeaderTitle info="One document: the bill-to, each invoice, the total, and the deposit are bands of the same card.">
-              Phí &amp; hóa đơn
-            </CardHeaderTitle>
-            <CardHeaderMeta>{formatMoney(grandTotal)}</CardHeaderMeta>
-          </CardHeader>
-
-          {/* bill-to band — issuing needs a tax ID; the toggle shows the gate */}
-          <CardBody>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
-              <Icon name="building-2" size={16} color={colors.zinc[500]} />
-              <Text weight="medium">Harbor Freight Lines</Text>
-              <Text size="sm" color="muted">·</Text>
-              {taxId ? (
-                <Text size="sm" color="muted" tabular>MST {taxId}</Text>
-              ) : (
-                <Text size="sm" color="danger">No tax ID — required to issue</Text>
-              )}
-              <View style={{ flex: 1 }} />
-              <Button title={taxId ? "Remove tax ID" : "Add tax ID"} color="muted" onPress={() => setTaxId((t) => (t ? "" : "0312456780"))} />
-            </View>
-          </CardBody>
-
-          {/* invoice bands */}
-          {invoices.map((inv) => (
-            <InvoiceBand
-              key={inv.key}
-              inv={inv}
-              taxId={taxId}
-              onAmount={(chKey, v) => patchCharge(inv.key, chKey, { amount: v })}
-              onMethod={(chKey, m) => patchCharge(inv.key, chKey, { method: m })}
-              onIssue={setConfirm}
-            />
-          ))}
-
-          {/* collect band */}
-          <Divider />
-          <CardBody style={{ gap: 10 }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Text weight="semibold" style={{ flex: 1 }}>Tổng thu</Text>
-              <Text weight="semibold" size="lg" tabular>{formatMoney(grandTotal)}</Text>
-            </View>
-            {allMissing.length > 0 ? (
-              <Callout tone="warning">
-                <CalloutText>
-                  {allMissing.length} charged {allMissing.length === 1 ? "line has" : "lines have"} no payment method — set them before printing the receipt.
-                </CalloutText>
-              </Callout>
-            ) : null}
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Text size="xs" color="muted" style={{ flex: 1 }}>{issuedCount} of {invoices.length} issued</Text>
-              <Button title="Print receipt" color="primary" disabled={grandTotal <= 0} onPress={printReceipt} />
-            </View>
-          </CardBody>
-
-          {/* deposit band — tinted + labelled separate, never part of the total */}
-          <Divider />
-          <CardBody style={{ backgroundColor: colors.white, gap: 8 }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Text weight="semibold">Deposit</Text>
-              <Badge label="Collected separately" color="zinc" />
-            </View>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
-              <Text size="sm" color="muted" style={{ width: 116 }}>Refundable</Text>
-              <View style={{ flexGrow: 1, flexBasis: 130 }}>
-                <NumberInput value={deposit || null} onValueChange={(v) => setDeposit(v ?? 0)} min={0} accessibilityLabel="Deposit amount" />
-              </View>
-              <Button
-                title="Deposit receipt"
-                color="secondary"
-                disabled={deposit <= 0}
-                onPress={() => Alert.alert("Deposit receipt", `Printing deposit receipt for ${formatMoney(deposit)}.`, [{ text: "OK" }])}
-              />
-            </View>
-          </CardBody>
-        </Card>
-      </View>
-
-      {/* issuing an e-invoice is irreversible — confirm in a Dialog (stage gate) */}
-      <Dialog width={460} open={confirm !== null} onOpenChange={(o) => { if (!o) setConfirm(null); }}>
-        <DialogHeader>
-          <DialogHeaderTitle>{confirm?.ref ? "Re-issue invoice?" : "Issue e-invoice?"}</DialogHeaderTitle>
-        </DialogHeader>
-        <View style={{ paddingHorizontal: 24, paddingVertical: 12 }}>
-          <Callout tone="warning">
-            <CalloutText>
-              {confirm
-                ? `Issue a real e-invoice for "${confirm.title}" (${formatMoney(invoiceTotal(confirm))}) to the provider. This writes a lookup code to the record and can't be undone.`
-                : ""}
-            </CalloutText>
-          </Callout>
-        </View>
-        <DialogFooter>
-          <Button title="Cancel" color="secondary" onPress={() => setConfirm(null)} />
-          <Button title="Issue" color="primary" onPress={() => confirm && issue(confirm)} />
-        </DialogFooter>
-      </Dialog>
-    </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>
-  );
-}