@lotics/ui 3.5.0 → 4.0.0

package/examples/tpl_dossier.tsx

@@ -0,0 +1,431 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, type ColorName } from "@lotics/ui/colors";
+import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
+import { Alert } from "@lotics/ui/alert";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card, CardFooter } from "@lotics/ui/card";
+import { DetailRow } from "@lotics/ui/detail_row";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { FormField } from "@lotics/ui/form_field";
+import { type IconName } from "@lotics/ui/icon";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { NumberInput } from "@lotics/ui/number_input";
+import { Pagination } from "@lotics/ui/pagination";
+import { Popover, PopoverContent, PopoverFooter, PopoverTrigger } from "@lotics/ui/popover";
+import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
+import { SearchInput } from "@lotics/ui/search_input";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { FilterPill, selectSummary } from "@lotics/ui/filter_pill";
+import { PickerMenu } from "@lotics/ui/picker_menu";
+import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
+import { Combobox } from "@lotics/ui/combobox";
+import type { PickerOption } from "@lotics/ui/picker";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Cases & documents — the case register. Two jobs on one screen:
+// track each case through its statuses, AND generate/print the paper the
+// current stage needs (payment slip while the fee is unpaid, then the stage's
+// own document). Grammar: header band (+ New case popover form) · KPI strip
+// (counts drill into the status pills) · ChipGroup filters the register · ONE banded
+// card: search toolbar → eyebrow band → pressable list rows (press = the
+// sequenced workspace Drawer, ⋯ = the row's real actions) → footer with the
+// filtered totals + Pagination over the filtered set (pageSize 8).
+// ─────────────────────────────────────────────────────────────────────────────
+
+// The customer book the new-case form searches — find-or-create (pick an existing
+// customer or coin a new one) instead of typing a raw name that risks a duplicate.
+const CUSTOMER_OPTIONS: PickerOption[] = [
+  "Northwind Packaging", "Crestline Foods", "Atlas Components", "Summit Logistics",
+  "Michael Torres", "Anna Whitfield", "Robert Hayes", "Karen Mitchell",
+].map((name) => ({ value: name, label: name }));
+
+type TrangThai = "dangxuly" | "chobosung" | "hoantat";
+type Tab = "all" | TrangThai;
+
+const TRANG_THAI: Record<TrangThai, { label: string; color: ColorName; doc: { title: string; icon: IconName } }> = {
+  dangxuly: { label: "Processing", color: "blue", doc: { title: "Print receipt", icon: "file-text" } },
+  chobosung: { label: "Awaiting docs", color: "amber", doc: { title: "Print docs request", icon: "file-text" } },
+  hoantat: { label: "Complete", color: "emerald", doc: { title: "Print result", icon: "file-down" } },
+};
+
+interface HoSo {
+  ma: string;
+  khach: string;
+  dienThoai: string;
+  trangThai: TrangThai;
+  phi: number;
+  daThu: boolean;
+  ngayThu?: string;
+  ngayNhan: string;
+  phuTrach: string;
+}
+
+const HO_SO: HoSo[] = [
+  { ma: "CS-2026-0041", khach: "Michael Torres", dienThoai: "(555) 384-7560", trangThai: "dangxuly", phi: 2_500_000, daThu: true, ngayThu: "03/06", ngayNhan: "02/06", phuTrach: "Sarah Chen" },
+  { ma: "CS-2026-0042", khach: "Anna Whitfield", dienThoai: "(555) 220-4158", trangThai: "dangxuly", phi: 1_800_000, daThu: false, ngayNhan: "03/06", phuTrach: "Sarah Chen" },
+  { ma: "CS-2026-0043", khach: "Northwind Packaging", dienThoai: "(555) 558-2143", trangThai: "chobosung", phi: 4_200_000, daThu: true, ngayThu: "05/06", ngayNhan: "04/06", phuTrach: "David Park" },
+  { ma: "CS-2026-0044", khach: "Robert Hayes", dienThoai: "(555) 471-8026", trangThai: "hoantat", phi: 2_500_000, daThu: true, ngayThu: "29/05", ngayNhan: "28/05", phuTrach: "Sarah Chen" },
+  { ma: "CS-2026-0045", khach: "Karen Mitchell", dienThoai: "(555) 605-3317", trangThai: "dangxuly", phi: 3_100_000, daThu: true, ngayThu: "06/06", ngayNhan: "05/06", phuTrach: "David Park" },
+  { ma: "CS-2026-0046", khach: "Daniel Brooks", dienThoai: "(555) 112-9084", trangThai: "chobosung", phi: 1_800_000, daThu: false, ngayNhan: "06/06", phuTrach: "Sarah Chen" },
+  { ma: "CS-2026-0047", khach: "Crestline Foods", dienThoai: "(555) 446-2708", trangThai: "hoantat", phi: 5_600_000, daThu: true, ngayThu: "31/05", ngayNhan: "30/05", phuTrach: "David Park" },
+  { ma: "CS-2026-0048", khach: "Laura Bennett", dienThoai: "(555) 833-5192", trangThai: "dangxuly", phi: 2_500_000, daThu: false, ngayNhan: "09/06", phuTrach: "James Walker" },
+  { ma: "CS-2026-0049", khach: "Thomas Reed", dienThoai: "(555) 760-3844", trangThai: "hoantat", phi: 1_800_000, daThu: true, ngayThu: "02/06", ngayNhan: "27/05", phuTrach: "James Walker" },
+  { ma: "CS-2026-0050", khach: "Kevin Doyle", dienThoai: "(555) 905-1273", trangThai: "dangxuly", phi: 4_200_000, daThu: true, ngayThu: "10/06", ngayNhan: "10/06", phuTrach: "James Walker" },
+  { ma: "CS-2026-0051", khach: "Atlas Components", dienThoai: "(555) 271-6355", trangThai: "dangxuly", phi: 6_800_000, daThu: true, ngayThu: "06/06", ngayNhan: "05/06", phuTrach: "Maria Lopez" },
+  { ma: "CS-2026-0052", khach: "Rachel Foster", dienThoai: "(555) 540-2866", trangThai: "chobosung", phi: 2_500_000, daThu: true, ngayThu: "04/06", ngayNhan: "03/06", phuTrach: "Sarah Chen" },
+  { ma: "CS-2026-0053", khach: "Patrick Shaw", dienThoai: "(555) 119-4727", trangThai: "hoantat", phi: 1_200_000, daThu: true, ngayThu: "30/05", ngayNhan: "26/05", phuTrach: "David Park" },
+  { ma: "CS-2026-0054", khach: "Summit Logistics", dienThoai: "(555) 662-8059", trangThai: "dangxuly", phi: 5_600_000, daThu: false, ngayNhan: "09/06", phuTrach: "Maria Lopez" },
+  { ma: "CS-2026-0055", khach: "Brian Keller", dienThoai: "(555) 484-9131", trangThai: "chobosung", phi: 3_100_000, daThu: false, ngayNhan: "07/06", phuTrach: "James Walker" },
+  { ma: "CS-2026-0056", khach: "Emily Carter", dienThoai: "(555) 358-0274", trangThai: "hoantat", phi: 2_500_000, daThu: true, ngayThu: "03/06", ngayNhan: "29/05", phuTrach: "Sarah Chen" },
+  { ma: "CS-2026-0057", khach: "Jason Pratt", dienThoai: "(555) 705-4693", trangThai: "dangxuly", phi: 1_200_000, daThu: true, ngayThu: "08/06", ngayNhan: "08/06", phuTrach: "David Park" },
+  { ma: "CS-2026-0058", khach: "Beacon Supplies", dienThoai: "(555) 813-2460", trangThai: "hoantat", phi: 4_200_000, daThu: true, ngayThu: "01/06", ngayNhan: "28/05", phuTrach: "Maria Lopez" },
+  { ma: "CS-2026-0059", khach: "Nina Alvarez", dienThoai: "(555) 270-1548", trangThai: "dangxuly", phi: 1_800_000, daThu: false, ngayNhan: "10/06", phuTrach: "Sarah Chen" },
+  { ma: "CS-2026-0060", khach: "Steven Drake", dienThoai: "(555) 593-7186", trangThai: "chobosung", phi: 2_500_000, daThu: true, ngayThu: "09/06", ngayNhan: "08/06", phuTrach: "James Walker" },
+  { ma: "CS-2026-0061", khach: "Harbor Industries", dienThoai: "(555) 047-5829", trangThai: "dangxuly", phi: 6_800_000, daThu: true, ngayThu: "11/06", ngayNhan: "10/06", phuTrach: "Maria Lopez" },
+  { ma: "CS-2026-0062", khach: "Grace Holloway", dienThoai: "(555) 826-3050", trangThai: "hoantat", phi: 3_100_000, daThu: true, ngayThu: "05/06", ngayNhan: "31/05", phuTrach: "David Park" },
+  { ma: "CS-2026-0063", khach: "Olivia Manning", dienThoai: "(555) 631-2904", trangThai: "dangxuly", phi: 1_200_000, daThu: false, ngayNhan: "11/06", phuTrach: "Sarah Chen" },
+];
+
+const TABS: { value: Tab; label: string }[] = [
+  { value: "all", label: "All" },
+  { value: "dangxuly", label: "Processing" },
+  { value: "chobosung", label: "Awaiting docs" },
+  { value: "hoantat", label: "Complete" },
+];
+
+const PAGE_SIZE = 8;
+
+// Distinct case handlers — the secondary filter dimension (a multi-select FilterPill).
+const ASSIGNEES = [...new Set(HO_SO.map((r) => r.phuTrach))].map((n) => ({ label: n, value: n }));
+
+// Columns defined ONCE — Table renders the header from these and each
+// TableCell takes its width/align by position; the ⋯ is the trailing gutter.
+const COLUMNS: TableColumn[] = [
+  { key: "ma", label: "Case ID", width: 122, sortable: true },
+  { key: "khach", label: "Customer", flex: 1, sortable: true },
+  { key: "trangThai", label: "Status", width: 122, sortable: true },
+  { key: "phi", label: "Fee", width: 138, align: "right", sortable: true },
+  { key: "ngayNhan", label: "Received", width: 88, sortable: true },
+];
+
+// DOCUMENT — the paper the row needs NOW: while the fee is unpaid the
+// paper that matters is the payment slip; once paid, the stage's own document.
+function docFor(r: HoSo): { title: string; icon: IconName } {
+  return r.daThu ? TRANG_THAI[r.trangThai].doc : { title: "Print payment slip", icon: "receipt" };
+}
+
+// The ⋯ menu carries the row's REAL actions: the stage document first, then
+// payment (disabled once collected), edit, and the destructive cancel last.
+function menuFor(r: HoSo): ActionMenuItem[] {
+  const doc = docFor(r);
+  return [
+    { key: "chung_tu", label: doc.title, icon: doc.icon, onPress: () => {} },
+    { key: "thanh_toan", label: "Record payment", icon: "credit-card", disabled: r.daThu, onPress: () => {} },
+    { key: "sua", label: "Edit case", icon: "pencil", onPress: () => {} },
+    { key: "huy", label: "Cancel case", icon: "trash", danger: true, onPress: () => Alert.alert("Cancel this case?", "The case is closed and removed from the active register — it can't be undone.", [{ text: "Keep case", style: "cancel" }, { text: "Cancel case", style: "destructive", onPress: () => {} }]) },
+  ];
+}
+
+function HoSoRow({ hs, selected, onPress }: { hs: HoSo; selected: boolean; onPress: () => void }) {
+  return (
+    <TableRow
+      onPress={onPress}
+      selected={selected}
+      minHeight={56}
+      accessibilityLabel={`Open case ${hs.ma} — ${hs.khach}`}
+      trailing={<ActionMenu items={menuFor(hs)} accessibilityLabel={`Actions for ${hs.ma}`} />}
+    >
+      <TableCell>
+        <Text size="sm" weight="semibold" tabular>{hs.ma}</Text>
+      </TableCell>
+      <TableCell>
+        <View style={{ gap: 2 }}>
+          <Text size="sm" weight="medium" numberOfLines={1}>{hs.khach}</Text>
+          <Text size="xs" color="muted" tabular>{hs.dienThoai}</Text>
+        </View>
+      </TableCell>
+      <TableCell>
+        <Badge variant="dot" label={TRANG_THAI[hs.trangThai].label} color={TRANG_THAI[hs.trangThai].color} />
+      </TableCell>
+      <TableCell>
+        <View style={{ gap: 2, alignItems: "flex-end" }}>
+          <Text size="sm" tabular>{formatMoney(hs.phi)}</Text>
+          <Text size="xs" color={hs.daThu ? "muted" : "danger"} tabular>
+            {hs.daThu ? `Paid ${hs.ngayThu}` : "Unpaid"}
+          </Text>
+        </View>
+      </TableCell>
+      <TableCell>
+        <Text size="sm" tabular>{hs.ngayNhan}</Text>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+// The case workspace behind a register row — the summary fields plus the
+// stage document and the Open case action. Keyed by id from the caller so
+// per-record state resets as ◀ ▶ steps the sequence.
+function HoSoWorkspace({ hs }: { hs: HoSo }) {
+  const doc = docFor(hs);
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 16 }}>
+        <View style={{ gap: 8 }}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+            <Text size="lg" weight="semibold" tabular>{hs.ma}</Text>
+            <Badge label={TRANG_THAI[hs.trangThai].label} color={TRANG_THAI[hs.trangThai].color} />
+          </View>
+          <Text size="sm" color="muted">{`Received ${hs.ngayNhan} · ${hs.phuTrach}`}</Text>
+        </View>
+        <Divider />
+        <View style={{ gap: 8 }}>
+          <DetailRow label="Customer" labelWidth={120} minHeight={24}><Text size="sm" color="default" tabular>{hs.khach}</Text></DetailRow>
+          <DetailRow label="Phone" labelWidth={120} minHeight={24}><Text size="sm" color="default" tabular>{hs.dienThoai}</Text></DetailRow>
+          <DetailRow label="Assignee" labelWidth={120} minHeight={24}><Text size="sm" color="default" tabular>{hs.phuTrach}</Text></DetailRow>
+          <DetailRow label="Case fee" labelWidth={120} minHeight={24}><Text size="sm" color="default" tabular>{formatMoney(hs.phi)}</Text></DetailRow>
+          <DetailRow label="Payment" labelWidth={120} minHeight={24}><Text size="sm" color={!hs.daThu ? "danger" : "default"} tabular>{hs.daThu ? `Paid ${hs.ngayThu}` : "Unpaid"}</Text></DetailRow>
+        </View>
+      </ScrollView>
+      {/* pinned footer — the stage's paper + the way into the full record */}
+      <DrawerFooter>
+        <Text size="xs" color="muted" style={{ flex: 1 }}>
+          {hs.daThu ? "Fee collected — print the current stage's document." : "Fee unpaid — print the payment slip before proceeding."}
+        </Text>
+        <Button title={doc.title} icon={doc.icon} color="secondary" onPress={() => {}} />
+        <Button title="Open case" color="primary" onPress={() => {}} />
+      </DrawerFooter>
+    </>
+  );
+}
+
+/** New case is a 2-field gate — a popover form anchored to the primary
+ *  button (Dialog would be overweight for customer + fee). */
+function TaoHoSoForm() {
+  const [khach, setKhach] = useState("");
+  const [phi, setPhi] = useState<number | null>(null);
+  return (
+    <Popover side="bottom" align="end">
+      <PopoverTrigger>
+        <Button title="New case" color="primary" />
+      </PopoverTrigger>
+      <PopoverContent style={{ width: 320 }} disableBodyScroll>
+        <View style={{ gap: 12 }}>
+          <View style={{ gap: 2 }}>
+            <Text size="sm" weight="semibold">Create a new case</Text>
+            <Text size="xs" color="muted">The case starts in Processing — print the receipt right after creating it.</Text>
+          </View>
+          <FormField label="Customer">
+            <Combobox
+              icon="search"
+              options={CUSTOMER_OPTIONS}
+              onValueChange={(opt) => setKhach(opt.label ?? opt.value)}
+              allowCustom
+              customOptionPlacement="top"
+              customOptionLabel={(q) => `Create new customer “${q}”`}
+              placeholder="Search customers, or add a new one…"
+              accessibilityLabel="Customer"
+            />
+          </FormField>
+          <FormField label="Case fee">
+            <NumberInput value={phi} onValueChange={setPhi} min={0} accessibilityLabel="Case fee" />
+          </FormField>
+        </View>
+        <PopoverFooter>
+          <Button title="Create case" color="primary" disabled={khach === ""} onPress={() => {}} />
+        </PopoverFooter>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function TplDossier() {
+  const [tab, setTab] = useState<Tab>("all");
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const [openMa, setOpenMa] = useState<string | null>(null);
+  const [sort, setSort] = useState<SortState | null>(null);
+  const [assignee, setAssignee] = useState<string[]>([]);
+  const [feeStatus, setFeeStatus] = useState<"paid" | "unpaid" | null>(null);
+
+  // Filter / sort changes reset paging — page 3 of the old ordering is
+  // meaningless under the new one.
+  const chonTab = (t: Tab) => {
+    setTab(t);
+    setPage(0);
+  };
+  const doiTimKiem = (s: string) => {
+    setSearch(s);
+    setPage(0);
+  };
+  // One sort at a time; the third toggle on a column clears it.
+  const onSort = (key: string) => {
+    setSort(cycleSort(sort, key));
+    setPage(0);
+  };
+
+  const dem = (t: TrangThai) => HO_SO.filter((r) => r.trangThai === t).length;
+  const phiDaThu = HO_SO.filter((r) => r.daThu).reduce((s, r) => s + r.phi, 0);
+  const chuaThu = HO_SO.filter((r) => !r.daThu);
+
+  // Search + status tab filter FIRST, then paging over the filtered ordering.
+  const q = search.trim().toLowerCase();
+  const filtered = HO_SO.filter((r) => {
+    if (tab !== "all" && r.trangThai !== tab) return false;
+    if (assignee.length > 0 && !assignee.includes(r.phuTrach)) return false;
+    if (feeStatus === "paid" && !r.daThu) return false;
+    if (feeStatus === "unpaid" && r.daThu) return false;
+    if (q && !`${r.ma} ${r.khach} ${r.dienThoai}`.toLowerCase().includes(q)) return false;
+    return true;
+  });
+  const assigneeSummary = selectSummary(assignee, ASSIGNEES);
+  // Sort the filtered set (one column), then page over that ordering.
+  const sorted = sortBy(filtered, sort, (r, key) =>
+    key === "khach" ? r.khach.toLowerCase()
+    : key === "trangThai" ? TRANG_THAI[r.trangThai].label
+    : key === "phi" ? r.phi
+    : key === "ngayNhan" ? r.ngayNhan.split("/").reverse().join("")
+    : r.ma,
+  );
+  const tongPhi = filtered.reduce((s, r) => s + r.phi, 0);
+  const pageRows = sorted.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
+  const hasMore = (page + 1) * PAGE_SIZE < sorted.length;
+
+  // The drawer sequences over the CURRENTLY-VISIBLE page slice. If the open
+  // case falls out of view, the chevrons disappear but the drawer stays.
+  const openRow = openMa === null ? null : HO_SO.find((r) => r.ma === openMa) ?? null;
+  const seqIndex = openRow ? pageRows.findIndex((r) => r.ma === openRow.ma) : -1;
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 1040, alignSelf: "center", gap: 16 }}>
+        {/* header band — one primary action: the New case popover form */}
+        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
+          <View style={{ gap: 2, flex: 1 }}>
+            <Text size="xl" weight="semibold">Cases & documents</Text>
+            <Text size="sm" color="muted">Track each case's status and print the right document for its stage</Text>
+          </View>
+          <TaoHoSoForm />
+        </View>
+
+        {/* each count drills into the matching tab below; Fees collected carries
+            the chase ("n still unpaid") as its caption */}
+        <KPIStrip
+          items={[
+            { label: "Processing", value: dem("dangxuly") },
+            { label: "Awaiting docs", value: dem("chobosung"), tone: "warning", info: "Cases waiting on customer paperwork — chase these first; the tab below filters to them." },
+            { label: "Complete", value: dem("hoantat") },
+            {
+              label: "Fees collected",
+              value: phiDaThu,
+              format: "currency",
+              compact: true,
+              caption: `${chuaThu.length} cases unpaid · ${formatMoney(chuaThu.reduce((s, r) => s + r.phi, 0), { compact: true })}`,
+            },
+          ]}
+        />
+
+        {/* status chips (the hot dimension, inline) + a secondary Assignee
+            multi-select FilterPill — the same faceted band as Approvals */}
+        <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
+          <View style={{ flexGrow: 1, flexBasis: 240, minWidth: 200, maxWidth: 360 }}>
+            <SearchInput
+              placeholder="Search by ID, name, or phone…"
+              value={search}
+              onChangeText={doiTimKiem}
+              accessibilityLabel="Search cases"
+            />
+          </View>
+          <ChipGroup
+            accessibilityLabel="Filter by status"
+            options={TABS.map((t) => ({
+              label: `${t.label} · ${t.value === "all" ? HO_SO.length : dem(t.value)}`,
+              value: t.value,
+            }))}
+            value={tab}
+            onValueChange={chonTab}
+          />
+          <FilterPill
+            label="Assignee"
+            summary={assigneeSummary}
+            onClear={() => { setAssignee([]); setPage(0); }}
+            clearLabel="Clear assignee filter"
+          >
+            <PickerMenu
+              multi
+              enableSelectAll
+              options={ASSIGNEES}
+              value={assignee}
+              onValueChange={(v) => { setAssignee(v); setPage(0); }}
+            />
+          </FilterPill>
+          {/* Single-select sibling — the render-prop `close` shuts the popover on
+              pick (the multi above stays open to collect several values). */}
+          <FilterPill
+            label="Fee"
+            summary={feeStatus === "paid" ? "Paid" : feeStatus === "unpaid" ? "Unpaid" : undefined}
+            onClear={() => { setFeeStatus(null); setPage(0); }}
+            clearLabel="Clear fee filter"
+          >
+            {({ close }) => (
+              <PickerMenu
+                options={[{ value: "paid", label: "Paid" }, { value: "unpaid", label: "Unpaid" }]}
+                value={feeStatus}
+                onValueChange={(v) => { setFeeStatus(v); setPage(0); }}
+                onRequestClose={close}
+              />
+            )}
+          </FilterPill>
+        </View>
+
+        {/* the register — eyebrow band (Table header) → list rows → totals + paging */}
+        <Card style={{ padding: 0 }}>
+          <Table columns={COLUMNS} trailing={40} sort={sort} onSort={onSort}>
+            {pageRows.map((r) => (
+              <HoSoRow key={r.ma} hs={r} selected={r.ma === openMa} onPress={() => setOpenMa(r.ma)} />
+            ))}
+          </Table>
+          {pageRows.length === 0 ? (
+            <>
+              <Divider />
+              <EmptyState message="No matching cases" hint="Try another keyword or switch status" />
+            </>
+          ) : null}
+          <CardFooter>
+            <Text size="sm" color="muted" tabular style={{ flex: 1 }}>
+              {`${filtered.length} cases · Total fees ${formatMoney(tongPhi)}`}
+            </Text>
+            <Pagination
+              page={page}
+              pageSize={PAGE_SIZE}
+              rowCount={pageRows.length}
+              hasMore={hasMore}
+              total={filtered.length}
+              onPageChange={setPage}
+            />
+          </CardFooter>
+        </Card>
+      </View>
+
+      {/* the case workspace — sequenced over the visible page ordering */}
+      {openRow ? (
+        <Drawer
+          open
+          onOpenChange={(o) => !o && setOpenMa(null)}
+          title={openRow.khach}
+          width={440}
+          onPrev={seqIndex > 0 ? () => setOpenMa(pageRows[seqIndex - 1].ma) : undefined}
+          onNext={seqIndex >= 0 && seqIndex < pageRows.length - 1 ? () => setOpenMa(pageRows[seqIndex + 1].ma) : undefined}
+          position={seqIndex >= 0 ? `${seqIndex + 1}/${pageRows.length}` : undefined}
+        >
+          <HoSoWorkspace key={openRow.ma} hs={openRow} />
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}

package/examples/tpl_intake.tsx

@@ -0,0 +1,206 @@
+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.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">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>
+  );
+}