@lotics/ui 23.2.0 → 24.0.0

package/examples/tpl_item_list.tsx

@@ -6,11 +6,9 @@ import { colors, solid, 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 { InlineButton } from "@lotics/ui/inline_button";
 import { Button } from "@lotics/ui/button";
 import { CardFooter } from "@lotics/ui/card";
 import { CheckboxInput } from "@lotics/ui/checkbox_input";
-import { CheckCircle } from "@lotics/ui/check_circle";
 import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
 import { Divider } from "@lotics/ui/divider";
 import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
@@ -20,15 +18,11 @@ import { FormField } from "@lotics/ui/form_field";
 import { Icon, type IconName } from "@lotics/ui/icon";
 import { IconButton } from "@lotics/ui/icon_button";
 import { ListItem } from "@lotics/ui/list_item";
-import { PressableHighlight } from "@lotics/ui/pressable_highlight";
-import { CaptureRow } from "@lotics/ui/capture_row";
-import { TaskActions, TaskItem, TaskList, TaskStatus, TaskSubRow, TaskTitle } from "@lotics/ui/task";
-import { SuggestionChip } from "@lotics/ui/suggestion_chip";
+import { TplRecord } from "./tpl_record";
 import { Screen, ScreenRouter, useScreenRouter } from "@lotics/ui/screen_router";
 import { SummaryLine } from "@lotics/ui/summary_line";
 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 { Select } from "@lotics/ui/select";
@@ -37,21 +31,13 @@ import { ColumnFilter, type ColumnFilterValue } from "@lotics/ui/column_filter";
 import { OptionList } from "@lotics/ui/option_list";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
-import { Picker, type PickerOption } from "@lotics/ui/picker";
+import { type PickerOption } from "@lotics/ui/picker";
 import { formatMoney } from "@lotics/ui/format_money";
-import { toISODate } from "@lotics/ui/format_date";
 import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
 import { InlineNumberInput } from "@lotics/ui/inline_number_input";
 import { InlineMemberSelect } from "@lotics/ui/inline_member_select";
 import type { MemberSelectMember } from "@lotics/ui/member_select";
-import { OptionBadge, type OptionValue } from "@lotics/ui/option_badge";
-import { FileRows } from "@lotics/ui/file_rows";
-import { FileRow } from "@lotics/ui/file_row";
-import { pickFiles } from "@lotics/ui/file_picker";
 import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
-import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
-import { Ledger, LedgerGroup, LedgerRow, LedgerTotal } from "@lotics/ui/ledger";
-import { ProgressBar } from "@lotics/ui/progress_bar";
 import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle, DialogScrollArea } from "@lotics/ui/dialog";
 import { AgentRunScope, AgentRunPane, AgentRunActions, type AgentRunLike, type AgentRunQuestion } from "@lotics/ui/agent_run_pane";
 import { ResultHeader } from "@lotics/ui/result_header";
@@ -59,17 +45,10 @@ import { Confidence } from "@lotics/ui/confidence";
 import { CardSelectItem } from "@lotics/ui/card_select_item";
 import { FileDropzone } from "@lotics/ui/file_dropzone";
 import { FileDropTarget } from "@lotics/ui/file_drop_target";
-import { MemberSelect } from "@lotics/ui/member_select";
-import { Callout, CalloutText } from "@lotics/ui/callout";
-import { Timeline, type TimelineItem } from "@lotics/ui/timeline";
 import { Link } from "@lotics/ui/link";
 import { TextInputField } from "@lotics/ui/text_input_field";
-import { Section, SectionHeading, SectionHeadingMeta, SectionHeadingTitle } from "@lotics/ui/section_heading";
-import { DangerZone } from "@lotics/ui/danger_zone";
-import { ChipGroup } from "@lotics/ui/chip_group";
 import type { DisplayFile } from "@lotics/ui/file_thumbnail";
 import { InlineSelect } from "@lotics/ui/inline_select";
-import { InlineStatic } from "@lotics/ui/inline_static";
 import { InlineTextInput } from "@lotics/ui/inline_text_input";
 import { useSelection } from "@lotics/ui/use_selection";
 
@@ -103,30 +82,6 @@ const MEMBERS: MemberSelectMember[] = [
 ];
 const memberIdOf = (name: string) => MEMBERS.find((m) => m.name === name)?.id ?? null;
 
-const PRIORITY_OPTS = [
-  { value: "standard", label: "Standard" },
-  { value: "urgent", label: "Urgent" },
-];
-const PRIORITY_DOT: Record<string, string> = { standard: colors.zinc[400], urgent: colors.amber[500] };
-
-const RECORD_TAGS: Record<string, OptionValue> = {
-  corporate: { key: "corporate", label: "Corporate", color: "blue" },
-  courier: { key: "courier", label: "Courier", color: "amber" },
-  vip: { key: "vip", label: "VIP", color: "emerald" },
-};
-const TAG_OPTIONS = Object.values(RECORD_TAGS).map((t) => ({ value: String(t.key), label: t.label }));
-const renderTagBadge = (o: { value: string; label?: string }) => (
-  <OptionBadge value={RECORD_TAGS[o.value] ?? { key: o.value, label: o.label ?? o.value, color: null }} variant="dot" />
-);
-
-// Seeded documents preview for real (SVG data URIs); picked files map to
-// local object URLs — a host wires its own upload here.
-const sampleDoc = (label: string, fill: string): DisplayFile => ({
-  id: `seed-${label}`,
-  filename: `${label}.png`,
-  mimeType: "image/png",
-  url: "data:image/svg+xml," + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240"><rect width="320" height="240" fill="${fill}"/><text x="160" y="128" font-family="sans-serif" font-size="22" fill="white" text-anchor="middle">${label}</text></svg>`),
-});
 let fileSeq = 0;
 const toDisplayFiles = (files: File[]): DisplayFile[] =>
   files.map((f) => ({ id: `f_${(fileSeq += 1)}`, filename: f.name, mimeType: f.type || "application/octet-stream", url: URL.createObjectURL(f) }));
@@ -135,175 +90,12 @@ const toDisplayFiles = (files: File[]): DisplayFile[] =>
 const persist = <T,>(set: (v: T) => void) => (v: T) =>
   new Promise<void>((resolve) => { setTimeout(() => { set(v); resolve(); }, 300); });
 
-// The HANDOFF checklist — this desk's tasks on the record; the register shows
-// done/total per row, and open tasks WARN in the handoff dialog (never block).
-const HANDOFF_TASKS = [
-  "Confirm the service scope",
-  "Collect the identity documents",
-  "Verify the customer's tax code",
-  "Collect the service fee",
-  "Prepare the handoff summary",
-];
-interface RecTask {
-  id: string;
-  label: string;
-  done: boolean;
-  assignee: string | null;
-  due: string;
-}
-// Monotonic id for user-added tasks — a length-derived id would collide after
-// a removal (delete t_1, add → a second t_2) and break keys + patch-by-id.
-let recTaskSeq = 0;
-const newTaskId = () => `t_${(recTaskSeq += 1)}`;
-// Seeded from the record's FACTS so the checklist never contradicts the row:
-// the docs task tracks the Awaiting-docs status, the fee task tracks daThu,
-// the wrap-up tasks clear only on completed records.
 /** "02/06" (dd/MM in the register) → the ISO date the pickers edit. */
 const isoReceived = (ddmm: string) => {
   const [d, m] = ddmm.split("/");
   return `2026-${m}-${d}`;
 };
 
-const seedTasks = (hs: HoSo): RecTask[] => {
-  const done = [
-    true,
-    hs.trangThai !== "chobosung",
-    hs.trangThai === "hoantat",
-    hs.daThu,
-    hs.trangThai === "hoantat",
-  ];
-  return HANDOFF_TASKS.map((label, i) => ({
-    id: `${hs.ma}_${i}`,
-    label,
-    done: done[i] ?? false,
-    assignee: i % 2 === 0 ? MEMBERS[i % MEMBERS.length].id : null,
-    due: i === 1 && !done[1] ? "2026-07-08" : "",
-  }));
-};
-
-/** The interactive checklist — the task templates' row vocabulary (sibling
- *  CheckCircle + struck transparent InlineTextInput + the dashed-ring capture
- *  row). Shared by the register's task peek and the drawer's. */
-function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
-  tasks: RecTask[];
-  onChange: (next: RecTask[]) => void;
-  suggestions: string[];
-  onDismissSuggestion: (label: string) => void;
-}) {
-  const [draft, setDraft] = useState("");
-  const patch = (tid: string, p: Partial<RecTask>) => onChange(tasks.map((x) => (x.id === tid ? { ...x, ...p } : x)));
-  const add = () => {
-    const label = draft.trim();
-    if (!label) return;
-    onChange([...tasks, { id: newTaskId(), label, done: false, assignee: null, due: "" }]);
-    setDraft("");
-  };
-  const addSuggested = (label: string) => onChange([...tasks, { id: newTaskId(), label, done: false, assignee: null, due: "" }]);
-  const pending = suggestions.filter((l) => !tasks.some((t) => t.label === l));
-  return (
-    <TaskList>
-      {/* ONE anatomy for every surface. The row is the title; the assignee and
-          the due date hang under it as named fields, and the pair splits onto
-          two lines only when the surface is too narrow to seat both — a drawer,
-          a peek, a phone. The template no longer picks. */}
-      {tasks.map((t) => (
-        <TaskItem key={t.id}>
-          <TaskStatus>
-            <CheckCircle state={t.done ? "done" : "none"} onChange={(on) => patch(t.id, { done: on })} accessibilityLabel={t.label} />
-          </TaskStatus>
-          <TaskTitle>
-            <InlineTextInput
-              variant="bare"
-              value={t.label}
-              onSave={(v) => patch(t.id, { label: v })}
-              struck={t.done}
-              accessibilityLabel="Task title"
-            />
-          </TaskTitle>
-          <TaskActions>
-            <ActionMenu
-              items={[{ key: "xoa", label: "Delete task", icon: "trash", danger: true, onPress: () => onChange(tasks.filter((x) => x.id !== t.id)) }]}
-              accessibilityLabel={`Task options: ${t.label}`}
-            />
-          </TaskActions>
-          {/* the task's own FIELDS hang UNDER it, name beside value, one indent
-              step in — never cells in a shared column, which put each name a
-              quarter of the surface from the control it names */}
-          <TaskSubRow label="Assignee">
-            <InlineMemberSelect
-              members={MEMBERS}
-              value={t.assignee}
-              onSave={(m) => patch(t.id, { assignee: m })}
-              placeholder="Assign…"
-              accessibilityLabel={`Assignee for ${t.label}`}
-            />
-          </TaskSubRow>
-          <TaskSubRow label="Due">
-            <InlineDatePicker
-              value={t.due}
-              onSave={(v) => patch(t.id, { due: v })}
-              placeholder="Set due…"
-              accessibilityLabel={`Due for ${t.label}`}
-            />
-          </TaskSubRow>
-        </TaskItem>
-      ))}
-      {/* SUGGESTIONS are pills, not rows — a chip can't be mistaken for a
-          task. Tap = materialize; ✕ = dismiss it for this record. */}
-      {pending.length > 0 ? (
-        <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 6, paddingTop: 2, paddingBottom: 4 }}>
-          {pending.map((label) => (
-            <SuggestionChip key={label} label={label} onAdd={() => addSuggested(label)} onDismiss={() => onDismissSuggestion(label)} />
-          ))}
-        </View>
-      ) : null}
-      <CaptureRow value={draft} onChangeText={setDraft} onSubmit={add} placeholder="Add a task…" accessibilityLabel="Add a task" />
-    </TaskList>
-  );
-}
-
-/** The task PEEK — done/total + a live mini bar as a pressable trigger; the
- *  popover holds the full interactive checklist, so tasks tick from the
- *  register without opening the drawer. */
-function TasksPeek({ tasks, onChange, suggestions, onDismissSuggestion }: { tasks: RecTask[]; onChange: (next: RecTask[]) => void; suggestions: string[]; onDismissSuggestion: (label: string) => void }) {
-  const done = tasks.filter((t) => t.done).length;
-  return (
-    <Popover side="bottom" align="end">
-      <PopoverTrigger>
-        <PressableHighlight
-          focusRing
-          accessibilityRole="button"
-          accessibilityLabel={`Tasks: ${done} of ${tasks.length} done`}
-          style={(state) => [
-            { paddingHorizontal: 8, paddingVertical: 6, borderRadius: 8, minWidth: 66 },
-            state.hovered ? { backgroundColor: colors.zinc[50] } : null,
-          ]}
-        >
-          <ProgressBar compact value={done} max={tasks.length} format="fraction" color={colors.zinc[500]} completeColor={colors.emerald[500]} />
-        </PressableHighlight>
-      </PopoverTrigger>
-      <PopoverContent style={{ width: 440 }}>
-        <TasksChecklist tasks={tasks} onChange={onChange} suggestions={suggestions} onDismissSuggestion={onDismissSuggestion} />
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-// The call-log vocabulary — every entry is an OUTCOME (the telesales pattern:
-// status flows from the outcome, a call-back carries its follow-up date).
-type Outcome = "connected" | "callback" | "declined" | "noanswer";
-const OUTCOME_OPTS: { value: Outcome; label: string }[] = [
-  { value: "connected", label: "Connected" },
-  { value: "callback", label: "Call back" },
-  { value: "declined", label: "Declined" },
-  { value: "noanswer", label: "No answer" },
-];
-const OUTCOME_META: Record<Outcome, { label: string; icon: "phone" | "message-square"; color: string }> = {
-  connected: { label: "Call — connected", icon: "phone", color: colors.emerald[500] },
-  callback: { label: "Call — call back", icon: "phone", color: colors.amber[500] },
-  declined: { label: "Call — declined", icon: "phone", color: colors.red[500] },
-  noanswer: { label: "Call — no answer", icon: "phone", color: colors.zinc[400] },
-};
 
 type TrangThai = "dangxuly" | "chobosung" | "hoantat";
 type Tab = "all" | TrangThai;
@@ -375,7 +167,6 @@ const COLUMNS: TableColumn[] = [
   { key: "ma", label: "Record ID", width: 112, sortable: true },
   { key: "khach", label: "Customer", flex: 1, sortable: true, priority: 1 },
   { key: "trangThai", label: "Status", width: 112, sortable: true, priority: 3 },
-  { key: "viec", label: "Tasks", width: 82, priority: 4 },
   { key: "phi", label: "Fee", width: 116, align: "right", sortable: true, priority: 2 },
   { key: "ngayNhan", label: "Received", width: 72, sortable: true, priority: 5 },
 ];
@@ -397,7 +188,7 @@ function menuFor(r: HoSo, daThu: boolean): ActionMenuItem[] {
   ];
 }
 
-function HoSoRow({ hs, daThu, tasks, onTasksChange, suggestions, onDismissSuggestion, selected, marked, selectable, onToggle, onPress }: { hs: HoSo; daThu: boolean; tasks: RecTask[]; onTasksChange: (next: RecTask[]) => void; suggestions: string[]; onDismissSuggestion: (label: string) => void; selected: boolean; marked: boolean; selectable: boolean; onToggle: (on: boolean) => void; onPress: () => void }) {
+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 }) {
   return (
     <TableRow
       onPress={onPress}
@@ -421,9 +212,6 @@ function HoSoRow({ hs, daThu, tasks, onTasksChange, suggestions, onDismissSugges
       <TableCell>
         <Badge variant="dot" label={TRANG_THAI[hs.trangThai].label} color={TRANG_THAI[hs.trangThai].color} />
       </TableCell>
-      <TableCell>
-        <TasksPeek tasks={tasks} onChange={onTasksChange} suggestions={suggestions} onDismissSuggestion={onDismissSuggestion} />
-      </TableCell>
       <TableCell>
         <View style={{ gap: 2, alignItems: "flex-end" }}>
           <Text size="sm" tabular>{formatMoney(hs.phi)}</Text>
@@ -445,547 +233,15 @@ function HoSoRow({ hs, daThu, tasks, onTasksChange, suggestions, onDismissSugges
 // the status as a quiet suffix → divider → ONE emphasized closing number — the
 // same shape at popover density). Keyed by id from the caller so per-record
 // state resets as ◀ ▶ steps the sequence.
-function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, onDismissSuggestion, onClose }: { hs: HoSo; daThu: boolean; onPaid: () => void; tasks: RecTask[]; onTasksChange: (next: RecTask[]) => void; suggestions: string[]; onDismissSuggestion: (label: string) => void; onClose: () => void }) {
-  const doc = docFor(hs, daThu);
-  const { navigate } = useScreenRouter();
-  // A record CREATED this session (not in the seed set) opens with only what
-  // creation gave it — no fabricated June history; seeded records carry the
-  // full worked mock.
-  const isSeed = HO_SO.some((r) => r.ma === hs.ma);
-  // Linked records — in a real app, records related via a link field; mocked
-  // as two sibling rows here (their own customers show on each row).
-  const linked = isSeed ? HO_SO.filter((r) => r.ma !== hs.ma).slice(0, 2) : [];
-  const [khach, setKhach] = useState(hs.khach);
-  const [dienThoai, setDienThoai] = useState(hs.dienThoai);
-  const [assignee, setAssignee] = useState<string | null>(memberIdOf(hs.phuTrach));
-  const [ngayNhan, setNgayNhan] = useState(() => isoReceived(hs.ngayNhan));
-  const [due, setDue] = useState("");
-  const [priority, setPriority] = useState(hs.trangThai === "chobosung" ? "urgent" : "standard");
-  const [declared, setDeclared] = useState<number | null>(isSeed ? 25_000_000 : null);
-  const [tags, setTags] = useState<string[]>(isSeed ? (hs.trangThai === "hoantat" ? ["corporate"] : ["corporate", "courier"]) : []);
-  const [files, setFiles] = useState<DisplayFile[]>(isSeed ? [sampleDoc("id-scan", "#3b82f6"), sampleDoc("application-form", "#10b981")] : []);
-  // THE standard files intake — one handler, three ways in: the section's Add
-  // CTA, a drag anywhere onto the Files section, and Ctrl/Cmd+V — the last two
-  // both ride the section's `<FileDropTarget paste>` below. Every record surface
-  // carries all three; the user should never have to hunt for a dropzone.
-  const addFiles = (picked: File[]) => setFiles((prev) => [...prev, ...toDisplayFiles(picked)]);
-  // ── the case's money: CHARGES owed vs RECEIPTS received — outstanding is
-  // the difference. Recording a payment appends a receipt; everything
-  // (bar, group sums, the closing number) recomputes from the two lists.
-  const charges = isSeed
-    ? [
-        { id: "f1", item: "Service fee", amount: hs.phi, basis: "Fixed tariff, type A", chargedOn: "03/06", by: "Sarah Chen", ref: "" },
-        { id: "f2", item: "Notarization", amount: 350_000, basis: "Per notarized copy × 2", chargedOn: "04/06", by: "David Park", ref: "" },
-        { id: "f3", item: "Government levy", amount: 1_200_000, basis: "State fee schedule 2026", chargedOn: "04/06", by: "System", ref: "LEVY-2026-118" },
-      ]
-    : hs.phi > 0
-      ? [{ id: "f1", item: "Service fee", amount: hs.phi, basis: "Fixed tariff, type A", chargedOn: "Today", by: "Sarah Chen", ref: "" }]
-      : [];
-  const [receipts, setReceipts] = useState(() =>
-    isSeed
-      ? [
-          { id: "r1", date: hs.ngayNhan, method: "Cash", note: "Disbursements", amount: 1_550_000 },
-          ...(daThu ? [{ id: "r2", date: hs.ngayThu ?? "Today", method: "Bank transfer", note: "Service fee", amount: hs.phi }] : []),
-        ]
-      : [],
-  );
-  const totalCharged = charges.reduce((t, c) => t + c.amount, 0);
-  const received = receipts.reduce((t, r) => t + r.amount, 0);
-  const outstanding = Math.max(0, totalCharged - received);
-  // the record-payment stage gate (1–2 fields → a popover, per the gate law)
-  const [payOpen, setPayOpen] = useState(false);
-  const [payAmount, setPayAmount] = useState<number | null>(null);
-  const [payMethod, setPayMethod] = useState("transfer");
-  const PAY_METHODS: PickerOption[] = [
-    { value: "cash", label: "Cash" },
-    { value: "transfer", label: "Bank transfer" },
-    { value: "card", label: "Card" },
-  ];
-  const recordPayment = () => {
-    if (!payAmount || payAmount <= 0) return;
-    setReceipts((prev) => [
-      ...prev,
-      { id: `r_${prev.length + 1}`, date: "Today", method: PAY_METHODS.find((m) => m.value === payMethod)?.label ?? payMethod, note: "Payment", amount: payAmount },
-    ]);
-    // Settling the ledger flips the record's paid state at the PAGE level —
-    // the register row (Unpaid tag, Print, menu) updates live.
-    if (totalCharged - (received + payAmount) <= 0) onPaid();
-    setPayOpen(false);
-  };
-  const remainingTasks = tasks.filter((t) => !t.done).length;
-  // ── the handoff dialog — never a blocked CTA: pressing Hand off opens the
-  // dialog (receiving assignee + a note for the next desk); incomplete tasks
-  // WARN inside, they don't block.
-  const [handoffOpen, setHandoffOpen] = useState(false);
-  const [handoffAssignee, setHandoffAssignee] = useState<string | null>("m2");
-  const [handoffNote, setHandoffNote] = useState("");
-
-  // ── activity — the interaction log (the telesales call-log shape): every
-  // entry is an OUTCOME; a call-back asks for its follow-up date; the composer
-  // sits ABOVE the history, always visible.
-  // Attachments ride the log entry: picked in the composer (removable
-  // thumbnails), then shown as an expandable thumbnail grid ON the entry —
-  // pressing one opens the shared gallery.
-  const [attached, setAttached] = useState<DisplayFile[]>([]);
-  const [galleryFiles, setGalleryFiles] = useState<DisplayFile[]>([]);
-  const [galleryIdx, setGalleryIdx] = useState<number | null>(null);
-  const attachmentDetails = (docs: DisplayFile[]) => (
-    <FileThumbnailGrid
-      files={docs}
-      itemSize={64}
-      onFilePress={(f) => {
-        setGalleryFiles(docs);
-        setGalleryIdx(docs.findIndex((x) => x.id === f.id));
-      }}
-    />
-  );
-  const [logOutcome, setLogOutcome] = useState<Outcome | "">("");
-  const [logNote, setLogNote] = useState("");
-  const [followUp, setFollowUp] = useState<string | null>(null);
-  const [events, setEvents] = useState<TimelineItem[]>(() => isSeed ? [
-    { id: "e1", icon: "phone", iconColor: colors.amber[500], label: "Call — call back", description: "Asked for the signed contract; follow up 08/06", right: <Text size="xs" color="muted">04/06</Text> },
-    { id: "e2", icon: "credit-card", iconColor: colors.emerald[500], label: "Payment received — 1.550.000 ₫", description: "Cash for disbursements advance", right: <Text size="xs" color="muted">03/06</Text> },
-    { id: "e3", icon: "phone", iconColor: colors.zinc[400], label: "Call — no answer", right: <Text size="xs" color="muted">03/06</Text> },
-    { id: "e4", icon: "file-text", iconColor: colors.zinc[500], label: "Receipt printed", right: <Text size="xs" color="muted">03/06</Text> },
-    { id: "e5", icon: "phone", iconColor: colors.emerald[500], label: "Call — connected", description: "Walked through the required documents; 1 file", right: <Text size="xs" color="muted">02/06</Text>, details: attachmentDetails([sampleDoc("checklist", "#8b5cf6")]) },
-    { id: "e6", icon: "plus", iconColor: colors.blue[500], label: "Record created", right: <Text size="xs" color="muted">02/06</Text> },
-  ] : [
-    { id: "e1", icon: "plus", iconColor: colors.blue[500], label: "Record created", right: <Text size="xs" color="muted">Today</Text> },
-  ]);
-  // The NOTE is the record — the one required thing. The outcome pill is an
-  // optional tag (tap the active pill to deselect); follow-up an optional date.
-  const canLog = logNote.trim() !== "";
-  const logEvent = () => {
-    if (!canLog) return;
-    const meta = logOutcome === "" ? null : OUTCOME_META[logOutcome];
-    const note = logNote.trim();
-    const docs = attached;
-    // With an outcome the note goes in the description; without one the note IS
-    // the label — either way follow-up and file count always survive.
-    const parts = [
-      meta ? note : null,
-      followUp ? `follow up ${followUp}` : null,
-      docs.length > 0 ? `${docs.length} ${docs.length === 1 ? "file" : "files"}` : null,
-    ].filter((x): x is string => x !== null);
-    setEvents((prev) => [
-      {
-        id: `e_${prev.length + 1}`,
-        icon: meta ? meta.icon : "message-square",
-        iconColor: meta ? meta.color : colors.blue[500],
-        label: meta ? meta.label : note,
-        description: parts.join("; ") || undefined,
-        right: <Text size="xs" color="muted">Today</Text>,
-        details: docs.length > 0 ? attachmentDetails(docs) : undefined,
-      },
-      ...prev,
-    ]);
-    setLogNote("");
-    setFollowUp(null);
-    setLogOutcome("");
-    setAttached([]);
-  };
-  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} by ${hs.phuTrach}`}</Text>
-        </View>
-        <Divider />
-        {/* DETAILS — every field type in the inline vocabulary, on ONE
-            DetailTable grid: text, member, dates (plain + optional-time),
-            select-with-dots, money number, a multi-value TAG field, a
-            system-owned static. The chips mark what's editable. */}
-        <Section>
-          <SectionHeading>
-            <SectionHeadingTitle>Details</SectionHeadingTitle>
-          </SectionHeading>
-          <DetailTable labelWidth={120}>
-            <DetailRow label="Customer"><InlineTextInput value={khach} onSave={persist(setKhach)} accessibilityLabel="Customer" /></DetailRow>
-            {/* A verb about the VALUE rides the FIELD — `InlineButton` in the
-                editor's `actions`, never a column beside it. Passed
-                unconditionally and disabled when there is nothing to act on: a
-                verb that appears once the value is filled resizes the field as
-                the user types. */}
-            <DetailRow label="Phone">
-              <InlineTextInput
-                value={dienThoai}
-                onSave={persist(setDienThoai)}
-                accessibilityLabel="Phone"
-                actions={<InlineButton title="Call" accessibilityLabel="Call this number" disabled={!dienThoai} onPress={() => {}} />}
-              />
-            </DetailRow>
-            <DetailRow label="Assignee">
-              <InlineMemberSelect members={MEMBERS} value={assignee} onSave={persist(setAssignee)} placeholder="Assign…" accessibilityLabel="Assignee" />
-            </DetailRow>
-            <DetailRow label="Received"><InlineDatePicker value={ngayNhan} onSave={persist(setNgayNhan)} accessibilityLabel="Received date" /></DetailRow>
-            {/* The verb rides the FIELD, like every other value verb — including
-                on a popover editor: the field exposes its outer box separately
-                from the control inside it, so the calendar still opens at the
-                field's own width. */}
-            <DetailRow label="Due">
-              <InlineDatePicker
-                value={due}
-                optionalTime
-                onSave={persist(setDue)}
-                placeholder="Set due date…"
-                accessibilityLabel="Due date"
-                actions={<InlineButton title="Today" accessibilityLabel="Set due date to today" onPress={() => void persist(setDue)(toISODate(new Date()))} />}
-              />
-            </DetailRow>
-            <DetailRow label="Priority">
-              <InlineSelect
-                value={priority}
-                onSave={persist(setPriority)}
-                options={PRIORITY_OPTS}
-                accessibilityLabel="Priority"
-                renderOptionContent={(o) => (
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                    <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: PRIORITY_DOT[o.value] }} />
-                    <Text size="sm">{o.label}</Text>
-                  </View>
-                )}
-              />
-            </DetailRow>
-            <DetailRow label="Declared value">
-              <InlineNumberInput value={declared} onSave={persist(setDeclared)} min={0} format={(v) => (v == null ? "" : formatMoney(v))} accessibilityLabel="Declared value" />
-            </DetailRow>
-            <DetailRow label="Tags">
-              <InlineSelect
-                multi
-                value={tags}
-                onSave={persist(setTags)}
-                options={TAG_OPTIONS}
-                renderSelected={renderTagBadge}
-                placeholder="Add tags…"
-                accessibilityLabel="Tags"
-              />
-            </DetailRow>
-            {/* A `Badge` is not a verb and never was a column — it qualifies the
-                VALUE, so it sits beside it inside the value cell. */}
-            <DetailRow label="Record ID" flat>
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                <InlineStatic value={hs.ma} tabular />
-                <Badge label="System" color="zinc" />
-              </View>
-            </DetailRow>
-          </DetailTable>
-        </Section>
-        <Divider />
-        {/* TASKS — the Record template's section shape: heading + the compact
-            meter, the shared checklist below (capture at the end);
-            the same state feeds the register column + its peek. */}
-        <Section>
-          <SectionHeading>
-            <SectionHeadingTitle>Tasks</SectionHeadingTitle>
-            {tasks.length > 0 ? (
-              <View style={{ width: 120 }}>
-                <ProgressBar compact value={tasks.filter((t) => t.done).length} max={tasks.length} format="fraction" color={colors.zinc[500]} completeColor={colors.emerald[500]} />
-              </View>
-            ) : null}
-          </SectionHeading>
-          <TasksChecklist tasks={tasks} onChange={onTasksChange} suggestions={suggestions} onDismissSuggestion={onDismissSuggestion} />
-        </Section>
-        <Divider />
-        {/* LINKED RECORDS — a record surfaces its relatives (the customer's
-            other cases); pressing one PUSHES its screen inside this drawer
-            (ScreenRouter), back returns here with scroll preserved. Hidden
-            while the record has none (a fresh create). */}
-        {linked.length > 0 ? (
-        <Section>
-          <SectionHeading>
-            <SectionHeadingTitle>Linked records</SectionHeadingTitle>
-            <SectionHeadingMeta>{`${linked.length} linked`}</SectionHeadingMeta>
-          </SectionHeading>
-          <View>
-            {linked.map((r) => (
-              <ListItem
-                key={r.ma}
-                title={r.ma}
-                description={r.khach}
-                right={
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                    <Badge label={TRANG_THAI[r.trangThai].label} color={TRANG_THAI[r.trangThai].color} />
-                    <Text size="sm" tabular color="muted">{formatMoney(r.phi)}</Text>
-                    <Icon name="chevron-right" size={16} color={colors.zinc[400]} />
-                  </View>
-                }
-                onPress={() => navigate(`/record/${r.ma}`)}
-              />
-            ))}
-          </View>
-        </Section>
-        ) : null}
-        <Divider />
-        {/* FILES — the document CRUD: FileRows (press → gallery preview, ⋯ →
-            remove) + the section's OWN CTA; an EXPECTED document renders as a
-            ghost placeholder row with its own chase action.
-            The whole section is a FileDropTarget with `paste` — drag a file
-            anywhere onto it, or Ctrl/Cmd+V while focus is in it — the standard
-            files-intake behavior every record surface should carry. */}
-        <FileDropTarget onFiles={addFiles} paste>
-        <Section>
-          <SectionHeading>
-            {/* The standard files-section affordance line — drag / paste / click
-                are otherwise invisible on a FileDropTarget-wrapped section. */}
-            <SectionHeadingTitle description="Drag, paste, or click to add files">Files</SectionHeadingTitle>
-            <SectionHeadingMeta>{`${files.length} ${files.length === 1 ? "file" : "files"}`}</SectionHeadingMeta>
-            <Button
-              title="Add file"
-              color="secondary"
-              onPress={() => {
-                void pickFiles({ multiple: true }).then((picked) => {
-                  if (picked.length > 0) addFiles(picked);
-                });
-              }}
-            />
-          </SectionHeading>
-          <FileRows files={files} onRemove={(f) => setFiles((prev) => prev.filter((x) => x.id !== f.id))} />
-          <FileRow
-            name="Signed service contract"
-            placeholder
-            meta="Expected — not provided yet"
-            trailing={<Button title="Request" color="muted" onPress={() => {}} />}
-          />
-        </Section>
-        </FileDropTarget>
-        <Divider />
-        {/* the PAYMENT summary — a plain financial STATEMENT: the two sides
-            of the ledger (charges owed, receipts received), every amount on
-            ONE right-aligned tabular column, a divider-set emphasized closing
-            number, and the record-payment popover that appends a receipt.
-            No bars, no charts — the numbers are the interface. */}
-        {charges.length > 0 ? (
-        <Section>
-          <SectionHeading>
-            <SectionHeadingTitle>Payment</SectionHeadingTitle>
-            <SectionHeadingMeta>{`${receipts.length} ${receipts.length === 1 ? "receipt" : "receipts"}`}</SectionHeadingMeta>
-          </SectionHeading>
-          {/* the Ledger compound: groups with their sums, peekable fee rows
-              (press → the fee's particulars in an anchored popover; references
-              live INSIDE the peek), receipts with meta, one emphasized close */}
-          <Ledger formatValue={formatMoney}>
-            <LedgerGroup label="Charges" total={totalCharged}>
-              {charges.map((c) => (
-                <LedgerRow
-                  key={c.id}
-                  label={c.item}
-                  value={c.amount}
-                  peek={
-                    <View style={{ gap: 8 }}>
-                      <View style={{ gap: 2 }}>
-                        <Text size="sm" weight="semibold">{c.item}</Text>
-                        <Text size="xs" color="muted">{`Charged ${c.chargedOn} by ${c.by}`}</Text>
-                      </View>
-                      <DetailRow label="Basis" labelSize="xs" labelWidth={72}><Text size="xs">{c.basis}</Text></DetailRow>
-                      <DetailRow label="Amount" labelSize="xs" labelWidth={72}><Text size="xs" tabular>{formatMoney(c.amount)}</Text></DetailRow>
-                      {c.ref ? (
-                        <DetailRow label="Reference" labelSize="xs" labelWidth={72}>
-                          <Link size="xs" onPress={() => {}} accessibilityLabel={c.ref}>{c.ref}</Link>
-                        </DetailRow>
-                      ) : null}
-                    </View>
-                  }
-                />
-              ))}
-            </LedgerGroup>
-            <LedgerGroup label="Received" total={received > 0 ? -received : undefined}>
-              {receipts.map((r) => (
-                <LedgerRow key={r.id} label={r.note} meta={`${r.date}, ${r.method}`} value={-r.amount} tone="success" />
-              ))}
-            </LedgerGroup>
-            <LedgerTotal label="Outstanding" value={outstanding} tone="danger" zeroLabel="Paid in full" />
-          </Ledger>
-          {outstanding > 0 ? (
-            <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
-              <Popover
-                side="top"
-                align="end"
-                open={payOpen}
-                onOpenChange={(o) => {
-                  setPayOpen(o);
-                  if (o) {
-                    setPayAmount(outstanding);
-                    setPayMethod("transfer");
-                  }
-                }}
-              >
-                <PopoverTrigger>
-                  <Button title="Record payment" color="secondary" />
-                </PopoverTrigger>
-                <PopoverContent style={{ width: 300 }}>
-                  <View style={{ gap: 12 }}>
-                    <View style={{ gap: 2 }}>
-                      <Text size="sm" weight="semibold">Record a payment</Text>
-                      <Text size="xs" color="muted">Prefilled with the outstanding balance.</Text>
-                    </View>
-                    <FormField label="Amount">
-                      <NumberInput value={payAmount} onValueChange={(v) => setPayAmount(v ?? null)} min={0} accessibilityLabel="Payment amount" />
-                    </FormField>
-                    <FormField label="Method">
-                      <Picker options={PAY_METHODS} value={payMethod} onValueChange={setPayMethod} accessibilityLabel="Payment method" />
-                    </FormField>
-                    <PopoverFooter>
-                      <Button title="Record" color="primary" disabled={!payAmount || payAmount <= 0} onPress={recordPayment} />
-                    </PopoverFooter>
-                  </View>
-                </PopoverContent>
-              </Popover>
-            </View>
-          ) : null}
-        </Section>
-        ) : null}
-        <Divider />
-        {/* ACTIVITY — the interaction composer (the CRM touch-log shape): the
-            NOTE is the record and the one requirement; the outcome is an
-            optional PILL (tap the active one to deselect); Follow up an
-            always-visible optional date; the primary Log says WHY when
-            disabled. The labelled history sits below, newest first. */}
-        <Section>
-          <SectionHeading>
-            <SectionHeadingTitle>Activity</SectionHeadingTitle>
-            <SectionHeadingMeta>{`${events.length} events`}</SectionHeadingMeta>
-          </SectionHeading>
-          <View style={{ gap: 10 }}>
-            <Text size="sm" weight="semibold">Log an interaction</Text>
-            <ChipGroup
-              accessibilityLabel="Outcome"
-              options={OUTCOME_OPTS}
-              value={logOutcome}
-              onValueChange={(v) => setLogOutcome(v === logOutcome ? "" : v)}
-            />
-            <TextInputField
-              value={logNote}
-              onChangeText={setLogNote}
-              multiline
-              numberOfLines={2}
-              autoGrow
-              placeholder="What was said?"
-              accessibilityLabel="Interaction note"
-            />
-            {attached.length > 0 ? (
-              <FileThumbnailGrid
-                files={attached}
-                itemSize={64}
-                onRemove={(id) => setAttached((prev) => prev.filter((x) => x.id !== id))}
-              />
-            ) : null}
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-              <Text size="sm" color="muted">Follow up</Text>
-              <View style={{ flex: 1 }}>
-                <InlineDatePicker value={followUp} onSave={setFollowUp} placeholder="Optional" accessibilityLabel="Follow-up date" />
-              </View>
-            </View>
-            <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
-              <Button
-                title="Attach files"
-                icon="paperclip"
-                color="secondary"
-                onPress={() => {
-                  void pickFiles({ accept: "application/pdf,image/*", multiple: true }).then((picked) => {
-                    if (picked.length > 0) setAttached((prev) => [...prev, ...toDisplayFiles(picked)]);
-                  });
-                }}
-              />
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 10, flexShrink: 1 }}>
-                {!canLog ? <Text size="xs" color="muted">Write what was said to log it</Text> : null}
-                <Button title="Log" color="primary" disabled={!canLog} onPress={logEvent} />
-              </View>
-            </View>
-          </View>
-          <View style={{ gap: 6 }}>
-            <Text size="xs" weight="medium" color="muted">History</Text>
-            <Timeline items={events} />
-          </View>
-        </Section>
-        <Divider />
-        {/* the destructive operation sits LAST, apart from the work — the same
-            DangerZone the Record template closes with */}
-        <DangerZone
-          title="Delete record"
-          description="Permanently remove this record, its charges, receipts, and files. This can't be undone."
-        >
-          <Button title="Delete record" color="danger" onPress={() => {}} />
-        </DangerZone>
-      </ScrollView>
-      <FileGalleryModal files={galleryFiles} activeIndex={galleryIdx} onIndexChange={setGalleryIdx} />
-      {/* pinned footer — the stage's paper + the way into the full record */}
-      {/* the HANDOFF — never a blocked CTA: pressing it opens the dialog
-          (assignee + a note for the receiving desk); open tasks WARN there */}
-      <DrawerFooter>
-        {remainingTasks > 0 ? (
-          <Text size="xs" color="muted" style={{ flex: 1 }}>
-            {`${remainingTasks} ${remainingTasks === 1 ? "open task" : "open tasks"}`}
-          </Text>
-        ) : (
-          <View style={{ flex: 1 }} />
-        )}
-        <Button title={doc.title} icon={doc.icon} color="secondary" onPress={() => {}} />
-        <Button title="Hand off to Operations" color="primary" onPress={() => setHandoffOpen(true)} />
-      </DrawerFooter>
-      {/* the handoff dialog — initial info for the receiving desk; confirming
-          moves the record off this desk (the drawer closes: it left your
-          register) */}
-      <Dialog width={480} open={handoffOpen} onOpenChange={setHandoffOpen}>
-        <DialogHeader>
-          <DialogHeaderTitle>Hand off to Operations</DialogHeaderTitle>
-        </DialogHeader>
-        <View style={{ paddingHorizontal: 24, paddingBottom: 12, gap: 12 }}>
-          {remainingTasks > 0 ? (
-            <Callout tone="warning">
-              <CalloutText>
-                {`${remainingTasks} ${remainingTasks === 1 ? "task is" : "tasks are"} still open — they carry over to Operations.`}
-              </CalloutText>
-            </Callout>
-          ) : null}
-          <FormField label="Assign to">
-            <MemberSelect members={MEMBERS} value={handoffAssignee} onValueChange={setHandoffAssignee} accessibilityLabel="Receiving assignee" />
-          </FormField>
-          <FormField label="Note for Operations" optional optionalLabel="Optional">
-            <TextInputField
-              value={handoffNote}
-              onChangeText={setHandoffNote}
-              multiline
-              numberOfLines={2}
-              autoGrow
-              placeholder="Anything the next desk should know…"
-              accessibilityLabel="Handoff note"
-            />
-          </FormField>
-        </View>
-        <DialogFooter>
-          <Button title="Cancel" color="secondary" onPress={() => setHandoffOpen(false)} />
-          <Button
-            title="Hand off"
-            color="primary"
-            disabled={handoffAssignee === null}
-            onPress={() => {
-              setHandoffOpen(false);
-              onClose();
-            }}
-          />
-        </DialogFooter>
-      </Dialog>
-    </>
-  );
-}
-
 /** The drawer shell that READS the navigation stack: at the root it titles the
  *  customer and offers the ◀ ▶ sequence; on a pushed screen the header swaps
  *  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, onPaid, tasks, onTasksChange, suggestions, onDismissSuggestion, onClose, onPrev, onNext, position }: {
+function RecordDrawer({ hs, daThu: _daThu, onPaid: _onPaid, onClose, onPrev, onNext, position }: {
   hs: HoSo;
   daThu: boolean;
   onPaid: () => void;
-  tasks: RecTask[];
-  onTasksChange: (next: RecTask[]) => void;
-  suggestions: string[];
-  onDismissSuggestion: (label: string) => void;
   onClose: () => void;
   onPrev?: () => void;
   onNext?: () => void;
@@ -1003,7 +259,12 @@ function RecordDrawer({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, on
             <Text size="md" weight="semibold" tabular>{params.ma ?? ""}</Text>
           </View>
         ) : (
-          hs.khach
+          // The record CODE, not the customer name. The body is `TplRecord`, whose
+          // customer is its own mock — titling this `hs.khach` put "Michael Torres"
+          // above a record reading "Harbor Freight Lines", i.e. one surface
+          // disagreeing with itself. The code is the one identity both sides share,
+          // because it is the prop the drawer passes down.
+          <Text size="md" weight="semibold" tabular>{hs.ma}</Text>
         )
       }
       onPrev={canGoBack ? undefined : onPrev}
@@ -1011,7 +272,13 @@ function RecordDrawer({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, on
       position={canGoBack ? undefined : position}
     >
       <Screen route="">
-        <HoSoWorkspace hs={hs} daThu={daThu} onPaid={onPaid} tasks={tasks} onTasksChange={onTasksChange} suggestions={suggestions} onDismissSuggestion={onDismissSuggestion} onClose={onClose} />
+        {/* THE RECORD SURFACE, not a copy of it. tpl_record renders in `drawer`
+            chrome: same sections, same order, same rules — the rail and the docked
+            discussion collapse (a Drawer has no gutters), and the thread joins the
+            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} />
       </Screen>
       <Screen route="/record/:ma">{(p) => <LinkedRecordScreen ma={p.ma} />}</Screen>
     </Drawer>
@@ -1515,21 +782,10 @@ export function TplItemList() {
   // ONE task state per record — the register column, its peek popover, and the
   // drawer all read and write the same list. Paid state lifts the same way:
   // settling the ledger in the drawer flips the row's Unpaid/Print/menu live.
-  const [taskMap, setTaskMap] = useState<Record<string, RecTask[]>>({});
-  const tasksOf = (hs: HoSo) => taskMap[hs.ma] ?? seedTasks(hs);
-  const setTasksOf = (hs: HoSo, next: RecTask[]) => setTaskMap((prev) => ({ ...prev, [hs.ma]: next }));
   const [paidMap, setPaidMap] = useState<Record<string, boolean>>({});
   const daThuOf = (r: HoSo) => paidMap[r.ma] ?? r.daThu;
-  const [dismissedMap, setDismissedMap] = useState<Record<string, string[]>>({});
-  const suggestionsOf = (r: HoSo) => HANDOFF_TASKS.filter((l) => !(dismissedMap[r.ma] ?? []).includes(l));
-  const dismissSuggestion = (r: HoSo, label: string) =>
-    setDismissedMap((prev) => {
-      const cur = prev[r.ma] ?? [];
-      return cur.includes(label) ? prev : { ...prev, [r.ma]: [...cur, label] };
-    });
   // The register rows are state: the create dialog PREPENDS a real row and
-  // opens its drawer — create-then-refine (the new record's checklist starts
-  // EMPTY; the commons wait as ghost suggestions).
+  // opens its drawer — create-then-refine.
   const [rows, setRows] = useState<HoSo[]>(HO_SO);
   const nextMa = useRef(64);
   const addRow = (khach: string, dienThoai: string, phi: number): string => {
@@ -1546,7 +802,6 @@ export function TplItemList() {
       phuTrach: "Sarah Chen",
     };
     setRows((prev) => [row, ...prev]);
-    setTaskMap((prev) => ({ ...prev, [ma]: [] }));
     return ma;
   };
   // Reveal what was just created: clear every filter that could hide the new
@@ -1766,7 +1021,7 @@ export function TplItemList() {
             }
           >
             {pageRows.map((r) => (
-              <HoSoRow key={r.ma} hs={r} daThu={daThuOf(r)} tasks={tasksOf(r)} onTasksChange={(next) => setTasksOf(r, next)} suggestions={suggestionsOf(r)} onDismissSuggestion={(l) => dismissSuggestion(r, l)} selected={r.ma === openMa} marked={sel.has(r.ma)} selectable={isSelectable(r)} onToggle={(on) => sel.toggle(r.ma, on)} onPress={() => setOpenMa(r.ma)} />
+              <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)} />
             ))}
           </Table>
           {pageRows.length === 0 ? (
@@ -1814,12 +1069,8 @@ export function TplItemList() {
         <ScreenRouter key={openRow.ma}>
           <RecordDrawer
             hs={openRow}
-            suggestions={suggestionsOf(openRow)}
-            onDismissSuggestion={(l) => dismissSuggestion(openRow, l)}
             daThu={daThuOf(openRow)}
             onPaid={() => setPaidMap((prev) => ({ ...prev, [openRow.ma]: true }))}
-            tasks={tasksOf(openRow)}
-            onTasksChange={(next) => setTasksOf(openRow, next)}
             onClose={() => setOpenMa(null)}
             onPrev={seqIndex > 0 ? () => setOpenMa(pageRows[seqIndex - 1].ma) : undefined}
             onNext={seqIndex >= 0 && seqIndex < pageRows.length - 1 ? () => setOpenMa(pageRows[seqIndex + 1].ma) : undefined}