@lotics/ui 8.0.0 → 10.0.0

package/examples/tpl_item_list.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors, type ColorName } from "@lotics/ui/colors";
@@ -8,13 +8,21 @@ import { Badge } from "@lotics/ui/badge";
 import { Button } from "@lotics/ui/button";
 import { CardFooter } from "@lotics/ui/card";
 import { CheckboxInput } from "@lotics/ui/checkbox_input";
-import { DetailRow } from "@lotics/ui/detail_row";
+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";
 import { EmptyState } from "@lotics/ui/empty_state";
 import { FloatingActionBar } from "@lotics/ui/floating_action_bar";
 import { FormField } from "@lotics/ui/form_field";
-import { type IconName } from "@lotics/ui/icon";
+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 { Checklist, ChecklistRow } from "@lotics/ui/checklist";
+import { SuggestionChip } from "@lotics/ui/suggestion_chip";
+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";
@@ -26,12 +34,39 @@ import { FilterChip, selectSummary } from "@lotics/ui/filter_chip";
 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 type { PickerOption } from "@lotics/ui/picker";
+import { Picker, 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 } from "@lotics/ui/dialog";
+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 { InlineTagSelect } from "@lotics/ui/inline_tag_select";
+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";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Item List — THE canonical register, and the ONE work-execution list
+// Template · Register — THE canonical register, and the ONE work-execution list
 // shape. A flat, paginated, SELECTABLE list of records: one toolbar row (search +
 // consolidated filters LEFT, New CTA RIGHT) · a light SummaryLine of the filtered
 // view · a sortable, Divider-separated register where every row has a leading
@@ -39,7 +74,7 @@ import { useSelection } from "@lotics/ui/use_selection";
 // gets a DISABLED one), a per-row PRINT action button, and a ⋯ overflow (press the
 // row = the sequenced workspace Drawer) · a select-all band · footer totals +
 // Pagination · a FloatingActionBar for the bulk action over the ticked rows. The
-// example is a case-document register, but this one shape subsumes the old
+// example is a documents-workflow register, but this one shape subsumes the old
 // approvals / dispatch / batch / run screens — register, per-row action, gated
 // selection, and act-on-many all in one.
 // ─────────────────────────────────────────────────────────────────────────────
@@ -51,6 +86,214 @@ const CUSTOMER_OPTIONS: PickerOption[] = [
   "Michael Torres", "Anna Whitfield", "Robert Hayes", "Karen Mitchell",
 ].map((name) => ({ value: name, label: name }));
 
+// The assignable roster — an app feeds `useMembers()` here.
+const MEMBERS: MemberSelectMember[] = [
+  { id: "m1", name: "Sarah Chen" },
+  { id: "m2", name: "David Park" },
+  { id: "m3", name: "Maria Lopez" },
+  { id: "m4", name: "James Walker" },
+];
+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) }));
+
+/** Fake persistence for the inline editors — real apps await their mutation. */
+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 (
+    <Checklist>
+      {/* NARROW anatomy: the title owns its full line (readable in a drawer
+          or peek); assignee + due edit on the indented meta line below */}
+      {tasks.map((t) => (
+        <ChecklistRow
+          key={t.id}
+          control={<CheckCircle checked={t.done} onChange={(on) => patch(t.id, { done: on })} accessibilityLabel={t.label} />}
+          menu={{
+            items: [{ key: "xoa", label: "Delete task", icon: "trash", danger: true, onPress: () => onChange(tasks.filter((x) => x.id !== t.id)) }],
+            accessibilityLabel: `Task options: ${t.label}`,
+          }}
+          meta={
+            <>
+              <View style={{ width: 150 }}>
+                <InlineMemberSelect
+                  background="transparent"
+                  members={MEMBERS}
+                  value={t.assignee}
+                  onSave={(m) => patch(t.id, { assignee: m })}
+                  placeholder="Assign…"
+                  accessibilityLabel={`Assignee · ${t.label}`}
+                />
+              </View>
+              <View style={{ width: 130 }}>
+                <InlineDatePicker
+                  background="transparent"
+                  value={t.due}
+                  onSave={(v) => patch(t.id, { due: v })}
+                  placeholder="Set due…"
+                  accessibilityLabel={`Due · ${t.label}`}
+                />
+              </View>
+            </>
+          }
+        >
+          <InlineTextInput
+            background="transparent"
+            value={t.label}
+            onSave={(v) => patch(t.id, { label: v })}
+            struck={t.done}
+            accessibilityLabel="Task title"
+          />
+        </ChecklistRow>
+      ))}
+      {/* 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" />
+    </Checklist>
+  );
+}
+
+/** 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;
 
@@ -73,29 +316,29 @@ interface HoSo {
 }
 
 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" },
+  { 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" },
 ];
 
 const TABS: { value: Tab; label: string }[] = [
@@ -113,43 +356,44 @@ const ASSIGNEES = [...new Set(HO_SO.map((r) => r.phuTrach))].map((n) => ({ label
 // 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: "ma", label: "Record ID", width: 112, 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 },
+  { key: "trangThai", label: "Status", width: 112, sortable: true },
+  { key: "viec", label: "Tasks", width: 82 },
+  { key: "phi", label: "Fee", width: 116, align: "right", sortable: true },
+  { key: "ngayNhan", label: "Received", width: 72, 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" };
+function docFor(r: HoSo, daThu: boolean): { title: string; icon: IconName } {
+  return daThu ? TRANG_THAI[r.trangThai].doc : { title: "Print payment slip", icon: "receipt" };
 }
 
 // The per-row Print button (the trailing action column) prints the stage's
 // document; the ⋯ menu carries the secondary actions — payment (disabled once
 // collected), edit, and the destructive cancel last.
-function menuFor(r: HoSo): ActionMenuItem[] {
+function menuFor(r: HoSo, daThu: boolean): ActionMenuItem[] {
   return [
-    { 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: () => {} }]) },
+    { key: "thanh_toan", label: "Record payment", icon: "credit-card", disabled: daThu, onPress: () => {} },
+    { key: "sua", label: "Edit record", icon: "pencil", onPress: () => {} },
+    { key: "huy", label: "Cancel record", icon: "trash", danger: true, onPress: () => Alert.alert("Cancel this record?", "The record is closed and removed from the active register — it can't be undone.", [{ text: "Keep record", style: "cancel" }, { text: "Cancel record", style: "destructive", onPress: () => {} }]) },
   ];
 }
 
-function HoSoRow({ hs, selected, marked, selectable, onToggle, onPress }: { hs: HoSo; selected: boolean; marked: boolean; selectable: boolean; onToggle: (on: boolean) => void; onPress: () => void }) {
+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 }) {
   return (
     <TableRow
       onPress={onPress}
       selected={selected}
       marked={marked}
       minHeight={56}
-      accessibilityLabel={`Open case ${hs.ma} — ${hs.khach}`}
+      accessibilityLabel={`Open record ${hs.ma} — ${hs.khach}`}
       leading={<CheckboxInput accessibilityLabel={selectable ? `Select ${hs.ma}` : `${hs.ma} — awaiting docs, not ready to export`} checked={marked} disabled={!selectable} onChange={onToggle} />}
       trailing={
         <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-          <Button title="Print" icon={docFor(hs).icon} color="secondary" onPress={() => {}} />
-          <ActionMenu items={menuFor(hs)} accessibilityLabel={`Actions for ${hs.ma}`} />
+          <Button title="Print" icon={docFor(hs, daThu).icon} color="secondary" onPress={() => {}} />
+          <ActionMenu items={menuFor(hs, daThu)} accessibilityLabel={`Actions for ${hs.ma}`} />
         </View>
       }
     >
@@ -159,17 +403,20 @@ function HoSoRow({ hs, selected, marked, selectable, onToggle, onPress }: { hs:
       <TableCell>
         <View style={{ gap: 2 }}>
           <Text size="sm" weight="medium" numberOfLines={1}>{hs.khach}</Text>
-          <Text size="xs" color="muted" tabular>{hs.dienThoai}</Text>
+          <Text size="xs" color="muted" tabular numberOfLines={1}>{hs.dienThoai}</Text>
         </View>
       </TableCell>
       <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>
-          <Text size="xs" color={hs.daThu ? "muted" : "danger"} tabular>
-            {hs.daThu ? `Paid ${hs.ngayThu}` : "Unpaid"}
+          <Text size="xs" color={daThu ? "muted" : "danger"} tabular>
+            {daThu ? (hs.ngayThu ? `Paid ${hs.ngayThu}` : "Paid today") : "Unpaid"}
           </Text>
         </View>
       </TableCell>
@@ -180,11 +427,146 @@ function HoSoRow({ hs, selected, marked, selectable, onToggle, onPress }: { hs:
   );
 }
 
-// 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);
+// The case workspace behind a register row — the drawer mirrors a REAL record
+// workspace: inline-editable fields (the zinc-50 chips; `InlineStatic` for the
+// system-owned ones) and the record's CHARGES SUMMARY (grouped fee rows with
+// 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 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 · 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 }}>
@@ -196,63 +578,519 @@ function HoSoWorkspace({ hs }: { hs: HoSo }) {
           <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>
+        {/* 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} trailingWidth={76}>
+            <DetailRow label="Customer"><InlineTextInput value={khach} onSave={persist(setKhach)} accessibilityLabel="Customer" /></DetailRow>
+            <DetailRow label="Phone" trailing={<Button title="Call" color="secondary" icon="phone" onPress={() => {}} />}>
+              <InlineTextInput value={dienThoai} onSave={persist(setDienThoai)} accessibilityLabel="Phone" />
+            </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>
+            <DetailRow label="Due" trailing={<Button title="Today" color="secondary" onPress={() => void persist(setDue)(toISODate(new Date()))} />}>
+              <InlineDatePicker value={due} optionalTime onSave={persist(setDue)} placeholder="Set due date…" accessibilityLabel="Due 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">
+              <InlineTagSelect
+                value={tags}
+                onSave={persist(setTags)}
+                options={TAG_OPTIONS}
+                renderTag={renderTagBadge}
+                placeholder="Add tags…"
+                accessibilityLabel="Tags"
+              />
+            </DetailRow>
+            <DetailRow label="Record ID" trailing={<Badge label="System" color="zinc" />}>
+              <InlineStatic value={hs.ma} tabular />
+            </DetailRow>
+          </DetailTable>
+        </Section>
+        <Divider />
+        {/* TASKS — the Record template's section shape: heading + the compact
+            meter, the shared columnar 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. */}
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle>Files</SectionHeadingTitle>
+            <SectionHeadingMeta>{`${files.length} ${files.length === 1 ? "file" : "files"}`}</SectionHeadingMeta>
+            <Button
+              title="Add file"
+              color="secondary"
+              icon="plus"
+              onPress={() => {
+                void pickFiles({ multiple: true }).then((picked) => {
+                  if (picked.length > 0) setFiles((prev) => [...prev, ...toDisplayFiles(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>
+        <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>
-        <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>
+        {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="Open case" color="primary" 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 }: {
+  hs: HoSo;
+  daThu: boolean;
+  onPaid: () => void;
+  tasks: RecTask[];
+  onTasksChange: (next: RecTask[]) => void;
+  suggestions: string[];
+  onDismissSuggestion: (label: string) => void;
+  onClose: () => void;
+  onPrev?: () => void;
+  onNext?: () => void;
+  position?: string;
+}) {
+  const { canGoBack, goBack, params } = useScreenRouter();
+  return (
+    <Drawer
+      open
+      onOpenChange={(o) => !o && onClose()}
+      title={
+        canGoBack ? (
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <IconButton icon="arrow-left" accessibilityLabel="Back" onPress={goBack} />
+            <Text size="md" weight="semibold" tabular>{params.ma ?? ""}</Text>
+          </View>
+        ) : (
+          hs.khach
+        )
+      }
+      width={440}
+      onPrev={canGoBack ? undefined : onPrev}
+      onNext={canGoBack ? undefined : onNext}
+      position={canGoBack ? undefined : position}
+    >
+      <Screen route="">
+        <HoSoWorkspace hs={hs} daThu={daThu} onPaid={onPaid} tasks={tasks} onTasksChange={onTasksChange} suggestions={suggestions} onDismissSuggestion={onDismissSuggestion} onClose={onClose} />
+      </Screen>
+      <Screen route="/record/:ma">{(p) => <LinkedRecordScreen ma={p.ma} />}</Screen>
+    </Drawer>
+  );
+}
+
+/** The PUSHED linked-record screen — a REAL editable workspace, not a peek:
+ *  the drawer HEADER carries the back button (the proper place — see
+ *  RecordDrawer), the fields edit in place with their own state, and the footer
+ *  carries the pushed record's OWN CTAs. */
+function LinkedRecordScreen({ ma }: { ma: string }) {
+  const r = HO_SO.find((x) => x.ma === ma);
+  const [khach, setKhach] = useState(r?.khach ?? "");
+  const [dienThoai, setDienThoai] = useState(r?.dienThoai ?? "");
+  const [assignee, setAssignee] = useState<string | null>(memberIdOf(r?.phuTrach ?? ""));
+  const [ngayNhan, setNgayNhan] = useState(() => (r ? isoReceived(r.ngayNhan) : ""));
+  const [collected, setCollected] = useState(r?.daThu ? "yes" : "no");
+  const [fee, setFee] = useState<number | null>(r?.phi ?? null);
+  if (!r) return null;
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 16 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+          <Badge label={TRANG_THAI[r.trangThai].label} color={TRANG_THAI[r.trangThai].color} />
+          <Text size="sm" color="muted">{`Linked record · ${r.khach}`}</Text>
+        </View>
+        <DetailTable labelWidth={120}>
+          <DetailRow label="Customer"><InlineTextInput value={khach} onSave={persist(setKhach)} accessibilityLabel="Customer" /></DetailRow>
+          <DetailRow label="Phone"><InlineTextInput value={dienThoai} onSave={persist(setDienThoai)} accessibilityLabel="Phone" /></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>
+          <DetailRow label="Fee">
+            <InlineNumberInput value={fee} onSave={persist(setFee)} min={0} format={(v) => (v == null ? "" : formatMoney(v))} accessibilityLabel="Fee" />
+          </DetailRow>
+          <DetailRow label="Collected">
+            <InlineSelect
+              value={collected}
+              onSave={persist(setCollected)}
+              options={[{ value: "yes", label: "Collected" }, { value: "no", label: "Outstanding" }]}
+              accessibilityLabel="Collected"
+              renderOptionContent={(o) => (
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                  <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: o.value === "yes" ? colors.emerald[500] : colors.amber[500] }} />
+                  <Text size="sm">{o.label}</Text>
+                </View>
+              )}
+            />
+          </DetailRow>
+        </DetailTable>
+      </ScrollView>
+      {/* the pushed record's OWN footer — different CTAs from the root case */}
+      <DrawerFooter>
+        <Text size="xs" color="muted" style={{ flex: 1 }}>Changes save in place on this linked record.</Text>
+        <Button title="Print receipt" icon="file-text" color="secondary" onPress={() => {}} />
+        <Button title="Open full record" 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() {
+/** New record is a THREE-field gate — past the popover threshold (1–2
+ *  fields), so it's a Dialog. NOT a wizard: create-then-refine means the
+ *  gate stays minimal and the record's own workspace (the drawer it opens
+ *  into) is where everything else is refined. */
+function CreateRecordDialog({ onCreate }: { onCreate: (khach: string, dienThoai: string, phi: number) => void }) {
+  const [open, setOpen] = useState(false);
   const [khach, setKhach] = useState("");
+  const [dienThoai, setDienThoai] = useState("");
   const [phi, setPhi] = useState<number | null>(null);
+  const create = () => {
+    if (khach.trim() === "") return;
+    onCreate(khach.trim(), dienThoai.trim(), phi ?? 0);
+    setOpen(false);
+    setKhach("");
+    setDienThoai("");
+    setPhi(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>
+    <>
+      <Button title="New record" color="primary" onPress={() => setOpen(true)} />
+      <Dialog width={440} open={open} onOpenChange={setOpen}>
+        <DialogHeader>
+          <DialogHeaderTitle>New record</DialogHeaderTitle>
+        </DialogHeader>
+        <View style={{ paddingHorizontal: 24, paddingBottom: 12, gap: 12 }}>
+          <Text size="xs" color="muted">The record starts in Processing and opens for refinement — details, tasks, and payment live on the record itself.</Text>
           <FormField label="Customer">
-            <Combobox
-              options={CUSTOMER_OPTIONS}
-              onValueChange={(opt) => setKhach(opt.label ?? opt.value)}
-              allowCustom
-              customOptionPlacement="top"
-              customOptionLabel={(q) => `Create new customer “${q}”`}
-            >
-              <ComboboxInput icon="search" placeholder="Search customers, or add a new one…" accessibilityLabel="Customer" />
-              <ComboboxContent />
-            </Combobox>
+            {khach === "" ? (
+              /* find-or-create: the input stays a pure search (reflectSelection
+                 off — a custom "create" pick has no option to reflect anyway);
+                 the pick renders BELOW as the attached line with Change */
+              <Combobox
+                options={CUSTOMER_OPTIONS}
+                onValueChange={(opt) => setKhach(opt.label ?? opt.value)}
+                reflectSelection={false}
+                allowCustom
+                customOptionPlacement="top"
+                customOptionLabel={(q) => `Create new customer “${q}”`}
+              >
+                <ComboboxInput icon="search" placeholder="Search customers, or add a new one…" accessibilityLabel="Customer" />
+                <ComboboxContent />
+              </Combobox>
+            ) : (
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 8, minHeight: 40 }}>
+                <Icon name={CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "building-2" : "plus"} size={16} color={colors.zinc[400]} />
+                <Text size="sm" weight="medium" style={{ flex: 1 }} numberOfLines={1}>
+                  {khach}
+                  {CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "" : "  ·  new customer"}
+                </Text>
+                <Link size="sm" onPress={() => setKhach("")} accessibilityLabel="Change customer">Change</Link>
+              </View>
+            )}
+          </FormField>
+          <FormField label="Phone" optional optionalLabel="Optional">
+            <TextInputField value={dienThoai} onChangeText={setDienThoai} placeholder="(555) 000-0000" accessibilityLabel="Phone" />
           </FormField>
-          <FormField label="Case fee">
-            <NumberInput value={phi} onValueChange={setPhi} min={0} accessibilityLabel="Case fee" />
+          <FormField label="Service fee">
+            <NumberInput value={phi} onValueChange={setPhi} min={0} accessibilityLabel="Service fee" />
           </FormField>
         </View>
-        <PopoverFooter>
-          <Button title="Create case" color="primary" disabled={khach === ""} onPress={() => {}} />
-        </PopoverFooter>
-      </PopoverContent>
-    </Popover>
+        <DialogFooter>
+          <Button title="Cancel" color="secondary" onPress={() => setOpen(false)} />
+          <Button title="Create record" color="primary" disabled={khach.trim() === ""} onPress={create} />
+        </DialogFooter>
+      </Dialog>
+    </>
   );
 }
 
@@ -261,6 +1099,51 @@ export function TplItemList() {
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(0);
   const [openMa, setOpenMa] = useState<string | null>(null);
+  // 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).
+  const [rows, setRows] = useState<HoSo[]>(HO_SO);
+  const nextMa = useRef(64);
+  const createRecord = (khach: string, dienThoai: string, phi: number) => {
+    const now = new Date();
+    const ma = `RC-2026-${String(nextMa.current++).padStart(4, "0")}`;
+    const row: HoSo = {
+      ma,
+      khach,
+      dienThoai,
+      trangThai: "dangxuly",
+      phi,
+      daThu: false,
+      ngayNhan: `${String(now.getDate()).padStart(2, "0")}/${String(now.getMonth() + 1).padStart(2, "0")}`,
+      phuTrach: "Sarah Chen",
+    };
+    setRows((prev) => [row, ...prev]);
+    setTaskMap((prev) => ({ ...prev, [ma]: [] }));
+    // Reveal what was just created: clear every filter that could hide the
+    // new row, land on page 1, open its drawer.
+    setTab("all");
+    setSearch("");
+    setAssignee([]);
+    setFeeStatus(null);
+    setSort(null);
+    setPage(0);
+    setOpenMa(ma);
+  };
   const [sort, setSort] = useState<SortState | null>(null);
   const [assignee, setAssignee] = useState<string[]>([]);
   const [feeStatus, setFeeStatus] = useState<"paid" | "unpaid" | null>(null);
@@ -282,19 +1165,20 @@ export function TplItemList() {
     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);
-
   // Search + status tab filter FIRST, then paging over the filtered ordering.
+  // The SummaryLine reads the pre-tab subset: it respects search/assignee/fee
+  // but keeps all three status counts visible whatever tab is active.
   const q = search.trim().toLowerCase();
-  const filtered = HO_SO.filter((r) => {
-    if (tab !== "all" && r.trangThai !== tab) return false;
+  const preTab = rows.filter((r) => {
     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 (feeStatus === "paid" && !daThuOf(r)) return false;
+    if (feeStatus === "unpaid" && daThuOf(r)) return false;
     if (q && !`${r.ma} ${r.khach} ${r.dienThoai}`.toLowerCase().includes(q)) return false;
     return true;
   });
+  const filtered = preTab.filter((r) => tab === "all" || r.trangThai === tab);
+  const dem = (t: TrangThai) => preTab.filter((r) => r.trangThai === t).length;
+  const phiDaThu = preTab.filter((r) => daThuOf(r)).reduce((s, r) => s + r.phi, 0);
   const assigneeSummary = selectSummary(assignee, ASSIGNEES);
   // Sort the filtered set (one column), then page over that ordering.
   const sorted = sortBy(filtered, sort, (r, key) =>
@@ -319,7 +1203,7 @@ export function TplItemList() {
 
   // 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 openRow = openMa === null ? null : rows.find((r) => r.ma === openMa) ?? null;
   const seqIndex = openRow ? pageRows.findIndex((r) => r.ma === openRow.ma) : -1;
 
   return (
@@ -328,8 +1212,8 @@ export function TplItemList() {
       <View style={{ width: "100%", maxWidth: 1040, alignSelf: "center", gap: 16 }}>
         {/* header — title only; the New case action lives on the toolbar row */}
         <View style={{ gap: 2 }}>
-          <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>
+          <Text size="xl" weight="semibold">Records</Text>
+          <Text size="sm" color="muted">Track each record's status and print the right document for its stage</Text>
         </View>
 
         {/* toolbar — search + consolidated filters LEFT, New case RIGHT, one row.
@@ -341,13 +1225,13 @@ export function TplItemList() {
                 placeholder="Search by ID, name, or phone…"
                 value={search}
                 onChangeText={doiTimKiem}
-                accessibilityLabel="Search cases"
+                accessibilityLabel="Search records"
               />
             </View>
             <Select
               placeholder="Status"
               options={TABS.map((t) => ({
-                label: `${t.label} · ${t.value === "all" ? HO_SO.length : dem(t.value)}`,
+                label: `${t.label} · ${t.value === "all" ? preTab.length : dem(t.value)}`,
                 value: t.value,
               }))}
               value={tab}
@@ -387,14 +1271,14 @@ export function TplItemList() {
               )}
             </FilterChip>
           </View>
-          <TaoHoSoForm />
+          <CreateRecordDialog onCreate={createRecord} />
         </View>
 
-        {/* light summary of the filtered register — each count drills into the matching tab above */}
+        {/* light summary of the filtered register (search/assignee/fee applied; status counts stay visible across tabs) */}
         <SummaryLine
           items={[
             { label: "processing", value: dem("dangxuly") },
-            { label: "awaiting docs", value: dem("chobosung"), tone: "warning", info: "Cases waiting on customer paperwork — their record isn't complete, so they can't be ticked for export until the docs arrive." },
+            { label: "awaiting docs", value: dem("chobosung"), tone: "warning", info: "Records waiting on customer paperwork — they aren't complete, so they can't be ticked for export until the docs arrive." },
             { label: "complete", value: dem("hoantat") },
             { label: "fees collected", value: phiDaThu, format: "currency", compact: true },
           ]}
@@ -410,7 +1294,7 @@ export function TplItemList() {
             onSort={onSort}
             selectAll={
               <CheckboxInput
-                accessibilityLabel="Select all cases on this page"
+                accessibilityLabel="Select all records on this page"
                 checked={sel.allSelected(selectableIds)}
                 indeterminate={sel.indeterminate(selectableIds)}
                 disabled={selectableIds.length === 0}
@@ -419,18 +1303,18 @@ export function TplItemList() {
             }
           >
             {pageRows.map((r) => (
-              <HoSoRow key={r.ma} hs={r} 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)} 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)} />
             ))}
           </Table>
           {pageRows.length === 0 ? (
             <>
               <Divider />
-              <EmptyState message="No matching cases" hint="Try another keyword or switch status" />
+              <EmptyState message="No matching records" 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)}`}
+              {`${filtered.length} records · Total fees ${formatMoney(tongPhi)}`}
             </Text>
             <Pagination
               page={page}
@@ -448,25 +1332,32 @@ export function TplItemList() {
       {/* bulk action over the ticked cases — the shared floating bar */}
       <FloatingActionBar
         count={sel.count}
-        label={sel.count === 1 ? "case selected" : "cases selected"}
+        label={sel.count === 1 ? "record selected" : "records selected"}
         onClear={sel.clear}
       >
         <Button title="Export" color="primary" onPress={() => {}} />
       </FloatingActionBar>
 
-      {/* the case workspace — sequenced over the visible page ordering */}
+      {/* the case workspace — sequenced over the visible page ordering. The
+          ScreenRouter wraps the WHOLE drawer so the header can read the stack
+          (back button + the pushed record's title live in the drawer chrome,
+          like the frontend's record drawers). Keyed by record so ◀ ▶ resets. */}
       {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>
+        <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}
+            position={seqIndex >= 0 ? `${seqIndex + 1}/${pageRows.length}` : undefined}
+          />
+        </ScreenRouter>
       ) : null}
     </View>
   );