@lotics/ui 27.17.0 → 28.0.0

package/examples/tpl_item_list.tsx

@@ -17,6 +17,7 @@ import { FloatingActionBar } from "@lotics/ui/floating_action_bar";
 import { FormField } from "@lotics/ui/form_field";
 import { Icon, type IconName } from "@lotics/ui/icon";
 import { IconButton } from "@lotics/ui/icon_button";
+import { CommentsButton } from "@lotics/ui/comments_button";
 import { CopyButton } from "@lotics/ui/copy_button";
 import { ListItem } from "@lotics/ui/list_item";
 import { TplRecord } from "./tpl_record";
@@ -109,6 +110,9 @@ const TRANG_THAI: Record<TrangThai, { label: string; color: ColorName; doc: { ti
 
 interface HoSo {
   ma: string;
+  /** How many comments the record carries — surfaced on the row so a thread is
+   *  discoverable from the book rather than only after opening. */
+  binhLuan: number;
   khach: string;
   dienThoai: string;
   trangThai: TrangThai;
@@ -120,29 +124,29 @@ interface HoSo {
 }
 
 const HO_SO: HoSo[] = [
-  { ma: "RC-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: "RC-2026-0042", khach: "Anna Whitfield", dienThoai: "(555) 220-4158", trangThai: "dangxuly", phi: 1_800_000, daThu: false, ngayNhan: "03/06", phuTrach: "Sarah Chen" },
-  { ma: "RC-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: "RC-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: "RC-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: "RC-2026-0046", khach: "Daniel Brooks", dienThoai: "(555) 112-9084", trangThai: "chobosung", phi: 1_800_000, daThu: false, ngayNhan: "06/06", phuTrach: "Sarah Chen" },
-  { ma: "RC-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: "RC-2026-0048", khach: "Laura Bennett", dienThoai: "(555) 833-5192", trangThai: "dangxuly", phi: 2_500_000, daThu: false, ngayNhan: "09/06", phuTrach: "James Walker" },
-  { ma: "RC-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: "RC-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: "RC-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: "RC-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: "RC-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: "RC-2026-0054", khach: "Summit Logistics", dienThoai: "(555) 662-8059", trangThai: "dangxuly", phi: 5_600_000, daThu: false, ngayNhan: "09/06", phuTrach: "Maria Lopez" },
-  { ma: "RC-2026-0055", khach: "Brian Keller", dienThoai: "(555) 484-9131", trangThai: "chobosung", phi: 3_100_000, daThu: false, ngayNhan: "07/06", phuTrach: "James Walker" },
-  { ma: "RC-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: "RC-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: "RC-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: "RC-2026-0059", khach: "Nina Alvarez", dienThoai: "(555) 270-1548", trangThai: "dangxuly", phi: 1_800_000, daThu: false, ngayNhan: "10/06", phuTrach: "Sarah Chen" },
-  { ma: "RC-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: "RC-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: "RC-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: "RC-2026-0063", khach: "Olivia Manning", dienThoai: "(555) 631-2904", trangThai: "dangxuly", phi: 1_200_000, daThu: false, ngayNhan: "11/06", phuTrach: "Sarah Chen" },
+  { ma: "RC-2026-0041", binhLuan: 2, 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: "RC-2026-0042", binhLuan: 0, khach: "Anna Whitfield", dienThoai: "(555) 220-4158", trangThai: "dangxuly", phi: 1_800_000, daThu: false, ngayNhan: "03/06", phuTrach: "Sarah Chen" },
+  { ma: "RC-2026-0043", binhLuan: 5, 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: "RC-2026-0044", binhLuan: 0, 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: "RC-2026-0045", binhLuan: 1, 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: "RC-2026-0046", binhLuan: 0, khach: "Daniel Brooks", dienThoai: "(555) 112-9084", trangThai: "chobosung", phi: 1_800_000, daThu: false, ngayNhan: "06/06", phuTrach: "Sarah Chen" },
+  { ma: "RC-2026-0047", binhLuan: 3, 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: "RC-2026-0048", binhLuan: 0, khach: "Laura Bennett", dienThoai: "(555) 833-5192", trangThai: "dangxuly", phi: 2_500_000, daThu: false, ngayNhan: "09/06", phuTrach: "James Walker" },
+  { ma: "RC-2026-0049", binhLuan: 2, 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: "RC-2026-0050", binhLuan: 0, 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: "RC-2026-0051", binhLuan: 5, 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: "RC-2026-0052", binhLuan: 0, 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: "RC-2026-0053", binhLuan: 1, 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: "RC-2026-0054", binhLuan: 0, khach: "Summit Logistics", dienThoai: "(555) 662-8059", trangThai: "dangxuly", phi: 5_600_000, daThu: false, ngayNhan: "09/06", phuTrach: "Maria Lopez" },
+  { ma: "RC-2026-0055", binhLuan: 3, khach: "Brian Keller", dienThoai: "(555) 484-9131", trangThai: "chobosung", phi: 3_100_000, daThu: false, ngayNhan: "07/06", phuTrach: "James Walker" },
+  { ma: "RC-2026-0056", binhLuan: 0, 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: "RC-2026-0057", binhLuan: 2, 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: "RC-2026-0058", binhLuan: 0, 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: "RC-2026-0059", binhLuan: 5, khach: "Nina Alvarez", dienThoai: "(555) 270-1548", trangThai: "dangxuly", phi: 1_800_000, daThu: false, ngayNhan: "10/06", phuTrach: "Sarah Chen" },
+  { ma: "RC-2026-0060", binhLuan: 0, 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: "RC-2026-0061", binhLuan: 1, 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: "RC-2026-0062", binhLuan: 0, 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: "RC-2026-0063", binhLuan: 3, 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 }[] = [
@@ -165,13 +169,18 @@ const ASSIGNEES = [...new Set(HO_SO.map((r) => r.phuTrach))].map((n) => ({ label
 // (label-over-value) so nothing is lost — the drawer carries full detail
 // either way.
 const COLUMNS: TableColumn[] = [
-  { key: "ma", label: "Record ID", width: 112, sortable: true },
+  // The SUBJECT leads. A reader scans this book by who the record is FOR, and
+  // says "the Harbor Freight one" — never "RC-2026-0041". The key is how the
+  // SYSTEM refers to the record, so it rides the identity cell's supporting line
+  // where every other supporting value lives. It kept a 112px column of its own
+  // while the thing everyone actually looks for sat second.
   { key: "khach", label: "Customer", flex: 1, sortable: true, priority: 1 },
   { key: "trangThai", label: "Status", width: 112, sortable: true, priority: 3 },
   { key: "phi", label: "Fee", width: 116, align: "right", sortable: true, priority: 2 },
   { key: "ngayNhan", label: "Received", width: 72, sortable: true, priority: 5 },
 ];
 
+
 // 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, daThu: boolean): { title: string; icon: IconName } {
@@ -189,10 +198,11 @@ function menuFor(r: HoSo, daThu: boolean): ActionMenuItem[] {
   ];
 }
 
-function HoSoRow({ hs, daThu, selected, marked, selectable, onToggle, onPress }: { hs: HoSo; daThu: boolean; selected: boolean; marked: boolean; selectable: boolean; onToggle: (on: boolean) => void; onPress: () => void }) {
+function HoSoRow({ hs, ordinal, daThu, selected, marked, selectable, onToggle, onPress, onOpenComments }: { hs: HoSo; ordinal: number; daThu: boolean; selected: boolean; marked: boolean; selectable: boolean; onToggle: (on: boolean) => void; onPress: () => void; onOpenComments: () => void }) {
   return (
     <TableRow
       onPress={onPress}
+      ordinal={ordinal}
       selected={selected}
       marked={marked}
       minHeight={56}
@@ -202,11 +212,17 @@ function HoSoRow({ hs, daThu, selected, marked, selectable, onToggle, onPress }:
       trailing={<ActionMenu items={menuFor(hs, daThu)} accessibilityLabel={`Actions for ${hs.ma}`} />}
     >
       <TableCell>
-        <Text size="sm" weight="semibold" tabular>{hs.ma}</Text>
-      </TableCell>
-      <TableCell>
-        <View style={{ gap: 2, alignItems: "flex-start" }}>
-          <Text size="sm" weight="medium" numberOfLines={1}>{hs.khach}</Text>
+        <View style={{ gap: 2, alignSelf: "stretch" }}>
+          {/* The name takes the row, the thread pins right. A comment count is
+              the one thing on this row that is about PEOPLE talking rather than
+              the record's own state, so it sits apart from the values below it
+              instead of joining them on the supporting line. */}
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <Text size="sm" weight="medium" numberOfLines={1} style={{ flexShrink: 1 }}>{hs.khach}</Text>
+            {/* Rendered only where a thread EXISTS — a zero on every quiet row is a
+                column of noise that trains the eye to skip where the signal appears. */}
+            {hs.binhLuan > 0 ? <CommentsButton count={hs.binhLuan} subject={hs.khach} onPress={onOpenComments} /> : null}
+          </View>
           {/* Every value on this row is selectable — that is what a register owes
               its reader, and it costs no chrome. The phone gets a CONTROL on top
               because it is the one value copied often enough to earn one (a desk
@@ -214,7 +230,19 @@ function HoSoRow({ hs, daThu, selected, marked, selectable, onToggle, onPress }:
               inside its own cell: the trailing gutter belongs to the ⋯, and with
               two values in this cell it would have nothing to name. */}
           <View style={{ flexDirection: "row", alignItems: "center", gap: 2 }}>
-            <Text size="xs" color="muted" tabular numberOfLines={1}>{hs.dienThoai}</Text>
+            {/* The KEY, muted, on the supporting line — at most this, never a
+                column and never the row's name.
+
+                It does NOT shrink. A key is quoted whole or it is not a key: a
+                phone number clipped to "(555) 384-7…" is still recognisably a
+                number the reader can widen the column to finish, while
+                "RC-2026-0…" is unusable — it is the exact string a desk reads
+                out. So the fixed-length identifier holds its width and the phone
+                gives way, which is also the right order of loss: the phone has a
+                Copy control beside it that hands over the full value regardless. */}
+            <Text size="xs" color="muted" tabular numberOfLines={1} style={{ flexShrink: 0 }}>{hs.ma}</Text>
+            <Text size="xs" color="muted" style={{ flexShrink: 0 }}> · </Text>
+            <Text size="xs" color="muted" tabular numberOfLines={1} style={{ flexShrink: 1 }}>{hs.dienThoai}</Text>
             <CopyButton value={hs.dienThoai} label="Copy phone number" />
           </View>
         </View>
@@ -248,8 +276,11 @@ function HoSoRow({ hs, daThu, selected, marked, selectable, onToggle, onPress }:
  *  to a BACK button + the pushed case id (the proper home for back — drawer
  *  chrome, not scroll content), and the sequence hides (stepping the root
  *  record from inside a linked one would be disorienting). */
-function RecordDrawer({ hs, daThu: _daThu, onPaid: _onPaid, onClose, onPrev, onNext, position }: {
+function RecordDrawer({ hs, daThu: _daThu, onPaid: _onPaid, onClose, onPrev, onNext, position, openSection }: {
   hs: HoSo;
+  /** The section the record should land on — set when the row's comment bubble
+   *  opened it, so the reader arrives in the conversation they pressed. */
+  openSection?: string;
   daThu: boolean;
   onPaid: () => void;
   onClose: () => void;
@@ -288,7 +319,7 @@ function RecordDrawer({ hs, daThu: _daThu, onPaid: _onPaid, onClose, onPrev, onN
             reading order as its last section. Rendering the component is what keeps
             the two identical; the hand-built workspace that used to live here is
             how they drifted — a checklist on this side, a pipeline on that one. */}
-        <TplRecord chrome="drawer" code={hs.ma} />
+        <TplRecord chrome="drawer" code={hs.ma} openSection={openSection} />
       </Screen>
       <Screen route="/record/:ma">{(p) => <LinkedRecordScreen ma={p.ma} />}</Screen>
     </Drawer>
@@ -789,6 +820,9 @@ export function TplItemList() {
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(0);
   const [openMa, setOpenMa] = useState<string | null>(null);
+  /** Which section the record should OPEN on — set by the row's comment bubble,
+   *  cleared on close so the next plain row press lands at the top. */
+  const [openSection, setOpenSection] = useState<string | undefined>(undefined);
   // Paid state is LIFTED, not owned by the drawer: settling the ledger inside the
   // drawer flips the row's Unpaid/Print/menu live, because both read one source.
   const [paidMap, setPaidMap] = useState<Record<string, boolean>>({});
@@ -802,6 +836,7 @@ export function TplItemList() {
     const ma = `RC-2026-${String(nextMa.current++).padStart(4, "0")}`;
     const row: HoSo = {
       ma,
+      binhLuan: 0,
       khach,
       dienThoai,
       trangThai: "dangxuly",
@@ -1013,9 +1048,14 @@ export function TplItemList() {
 
         {/* the register — eyebrow band (Table header) → list rows → totals + paging */}
         <View>
+          {/* THE COUNTED REGISTER. `count` is what MATCHED, not what this page
+              shows — the reader's "how many" survives paging — and each row's
+              `ordinal` continues across pages rather than restarting at 1, so the
+              last row of page 2 reads 100 under a header that says 100. */}
           <Table
             columns={COLUMNS}
             leading={24}
+            count={filtered.length}
             trailing={132}
             sort={sort}
             onSort={onSort}
@@ -1029,8 +1069,8 @@ export function TplItemList() {
               />
             }
           >
-            {pageRows.map((r) => (
-              <HoSoRow key={r.ma} hs={r} daThu={daThuOf(r)} selected={r.ma === openMa} marked={sel.has(r.ma)} selectable={isSelectable(r)} onToggle={(on) => sel.toggle(r.ma, on)} onPress={() => setOpenMa(r.ma)} />
+            {pageRows.map((r, i) => (
+              <HoSoRow key={r.ma} hs={r} ordinal={page * PAGE_SIZE + i + 1} daThu={daThuOf(r)} selected={r.ma === openMa} marked={sel.has(r.ma)} selectable={isSelectable(r)} onToggle={(on) => sel.toggle(r.ma, on)} onPress={() => setOpenMa(r.ma)} onOpenComments={() => { setOpenSection("comments"); setOpenMa(r.ma); }} />
             ))}
           </Table>
           {pageRows.length === 0 ? (
@@ -1078,9 +1118,10 @@ export function TplItemList() {
         <ScreenRouter key={openRow.ma}>
           <RecordDrawer
             hs={openRow}
+            openSection={openSection}
             daThu={daThuOf(openRow)}
             onPaid={() => setPaidMap((prev) => ({ ...prev, [openRow.ma]: true }))}
-            onClose={() => setOpenMa(null)}
+            onClose={() => { setOpenMa(null); setOpenSection(undefined); }}
             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}