@lotics/ui 3.5.0 → 4.0.0

package/examples/tpl_crm_desk.tsx

@@ -0,0 +1,541 @@
+import { useState } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid, type ColorName } from "@lotics/ui/colors";
+import { Avatar } from "@lotics/ui/avatar";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card, CardFooter, CardHeader, CardHeaderMeta, CardHeaderTitle } from "@lotics/ui/card";
+import { CheckboxInput } from "@lotics/ui/checkbox_input";
+import { DetailRow } from "@lotics/ui/detail_row";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
+import { FloatingActionBar } from "@lotics/ui/floating_action_bar";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { FormField } from "@lotics/ui/form_field";
+import { type IconName } from "@lotics/ui/icon";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { MenuListItem } from "@lotics/ui/menu_list_item";
+import { NumberInput } from "@lotics/ui/number_input";
+import { Peek } from "@lotics/ui/peek";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { DatePicker } from "@lotics/ui/date_picker";
+import { FilterPill } from "@lotics/ui/filter_pill";
+import { Popover, PopoverContent, PopoverTrigger } from "@lotics/ui/popover";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { SearchInput } from "@lotics/ui/search_input";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { TimePicker } from "@lotics/ui/time_picker";
+import { Timeline, type TimelineItem } from "@lotics/ui/timeline";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · CRM — workbench. The whole CRM app as ONE register: the
+// "Unassigned" pile (checkboxes → bulk-assign) stacked above the per-rep KPI
+// cards, all over ONE shared lead dataset filtered by one search + one chip
+// row. The centerpiece: any lead row opens the shared workspace Drawer —
+// an inline log-call composer + call history, and ◀ ▶ / ←→ sequencing over
+// the screen's flat visible ordering (pile first, then each rep's rows).
+// ─────────────────────────────────────────────────────────────────────────────
+
+const HOM_NAY = "12/06";
+
+const TRANG_THAI = {
+  moi: { label: "New", color: "blue", rank: 0 },
+  dang_theo: { label: "Following", color: "amber", rank: 1 },
+  khong_quan_tam: { label: "Not interested", color: "zinc", rank: 2 },
+  tiem_nang: { label: "Interested", color: "emerald", rank: 3 },
+} as const satisfies Record<string, { label: string; color: ColorName; rank: number }>;
+
+type TrangThaiKey = keyof typeof TRANG_THAI;
+const TRANG_THAI_KEYS = Object.keys(TRANG_THAI) as TrangThaiKey[];
+
+// Chip row over the whole screen: All · Unassigned (the pile only) · one
+// chip per status.
+type FilterKey = "all" | "chua_giao" | TrangThaiKey;
+const FILTER_KEYS: FilterKey[] = ["all", "chua_giao", ...TRANG_THAI_KEYS];
+
+type KetQua = "quan_tam" | "hen_goi_lai" | "chua_quan_tam" | "khong_nghe";
+
+// Each outcome carries the status it implies; logging only ever upgrades
+// (rank-monotonic), so one "no answer" never erases an "interested".
+const KET_QUA: Record<KetQua, { label: string; icon: IconName; color: string; trangThai: TrangThaiKey }> = {
+  quan_tam: { label: "Interested", icon: "circle-check", color: solid("emerald"), trangThai: "tiem_nang" },
+  hen_goi_lai: { label: "Call back", icon: "calendar", color: solid("blue"), trangThai: "dang_theo" },
+  chua_quan_tam: { label: "Not interested", icon: "circle-alert", color: solid("amber"), trangThai: "khong_quan_tam" },
+  khong_nghe: { label: "No answer", icon: "ban", color: colors.zinc[400], trangThai: "dang_theo" },
+};
+
+// yyyy-MM-dd → dd/MM (+ optional time).
+const fmtCallback = (date: string, time: string) => {
+  if (!date) return "";
+  const [, m, d] = date.split("-");
+  return time ? `${d}/${m} · ${time}` : `${d}/${m}`;
+};
+
+interface CallEvent { id: string; time: string; nguoiGoi: string; ketQua: KetQua; ghiChu?: string; callbackAt?: string }
+
+interface Rep { id: string; ten: string; vaiTro: string; dienThoai: string }
+
+const REPS: Rep[] = [
+  { id: "nv1", ten: "Sarah Chen", vaiTro: "Telesales — South team", dienThoai: "0905 332 718" },
+  { id: "nv2", ten: "David Park", vaiTro: "Telesales — North team", dienThoai: "0934 661 027" },
+  { id: "nv3", ten: "Maria Lopez", vaiTro: "Telesales — afternoon shift", dienThoai: "0917 482 305" },
+];
+
+interface Lead {
+  id: string; ten: string; dienThoai: string; nguon: string; ngayTao: string;
+  ghiChuTiepNhan: string; phuTrach: string | null; trangThai: TrangThaiKey; calls: CallEvent[];
+}
+
+const LEADS: Lead[] = [
+  { id: "kh01", ten: "Michael Turner", dienThoai: "0912 384 756", nguon: "Facebook", ngayTao: "02/06", ghiChuTiepNhan: "Asked about a bulk order", phuTrach: "nv1", trangThai: "tiem_nang", calls: [
+    { id: "c1", time: "12/06 · 10:42", nguoiGoi: "Sarah Chen", ketQua: "quan_tam", ghiChu: "Needs 2,000 cartons/month, asked about volume discounts. Send price list via WhatsApp before 13/06." },
+    { id: "c2", time: "06/06 · 09:05", nguoiGoi: "Sarah Chen", ketQua: "hen_goi_lai" },
+    { id: "c3", time: "04/06 · 16:40", nguoiGoi: "Sarah Chen", ketQua: "khong_nghe" },
+  ] },
+  { id: "kh02", ten: "Emily Watson", dienThoai: "0987 220 415", nguon: "Referral", ngayTao: "03/06", ghiChuTiepNhan: "Referred by a current client — needs a quote this week", phuTrach: "nv1", trangThai: "dang_theo", calls: [
+    { id: "c1", time: "12/06 · 09:18", nguoiGoi: "Sarah Chen", ketQua: "hen_goi_lai", ghiChu: "In a meeting — call back after 3pm.", callbackAt: "12/06 · 15:00" },
+    { id: "c2", time: "06/06 · 15:30", nguoiGoi: "Sarah Chen", ketQua: "khong_nghe" },
+  ] },
+  { id: "kh03", ten: "James Holt", dienThoai: "0918 736 245", nguon: "Website", ngayTao: "30/05", ghiChuTiepNhan: "Downloaded the price list from the homepage", phuTrach: "nv1", trangThai: "khong_quan_tam", calls: [
+    { id: "c1", time: "02/06 · 10:40", nguoiGoi: "Sarah Chen", ketQua: "chua_quan_tam", ghiChu: "Has an in-house packaging line — no need to buy externally." },
+  ] },
+  { id: "kh04", ten: "Rachel Kim", dienThoai: "0936 471 802", nguon: "Hotline", ngayTao: "01/06", ghiChuTiepNhan: "Called in asking about the warranty policy", phuTrach: "nv2", trangThai: "dang_theo", calls: [
+    { id: "c1", time: "08/06 · 11:00", nguoiGoi: "David Park", ketQua: "hen_goi_lai", ghiChu: "Comparing us with their current supplier — call back once they have the competitor's price." },
+    { id: "c2", time: "03/06 · 14:45", nguoiGoi: "David Park", ketQua: "khong_nghe" },
+  ] },
+  { id: "kh05", ten: "Laura Bennett", dienThoai: "0945 112 908", nguon: "Referral", ngayTao: "05/06", ghiChuTiepNhan: "Referred by a past client — call early", phuTrach: "nv2", trangThai: "tiem_nang", calls: [
+    { id: "c1", time: "10/06 · 16:10", nguoiGoi: "David Park", ketQua: "quan_tam", ghiChu: "Trial order of 500 cartons, delivery before 20/06. Needs a quote including shipping to Portland." },
+    { id: "c2", time: "07/06 · 09:30", nguoiGoi: "David Park", ketQua: "hen_goi_lai" },
+  ] },
+  { id: "kh06", ten: "Daniel Reyes", dienThoai: "0903 558 214", nguon: "Facebook", ngayTao: "09/06", ghiChuTiepNhan: "Commented on the June ad post", phuTrach: "nv3", trangThai: "moi", calls: [] },
+  { id: "kh07", ten: "Hannah Cole", dienThoai: "0908 336 415", nguon: "WhatsApp", ngayTao: "08/06", ghiChuTiepNhan: "Interested in the combo bundle, comparing two price tiers", phuTrach: "nv3", trangThai: "dang_theo", calls: [
+    { id: "c1", time: "12/06 · 11:05", nguoiGoi: "Maria Lopez", ketQua: "hen_goi_lai", ghiChu: "Line busy — try again early afternoon." },
+  ] },
+  { id: "kh08", ten: "Peter Vance", dienThoai: "0912 445 873", nguon: "Facebook", ngayTao: "12/06", ghiChuTiepNhan: "Asked for wholesale pricing, call back in the afternoon", phuTrach: null, trangThai: "moi", calls: [] },
+  { id: "kh09", ten: "Olivia Grant", dienThoai: "0987 305 214", nguon: "WhatsApp", ngayTao: "12/06", ghiChuTiepNhan: "Messaged about rigid boxes with a printed logo", phuTrach: null, trangThai: "moi", calls: [] },
+  { id: "kh10", ten: "Victor Lane", dienThoai: "0903 771 458", nguon: "Website", ngayTao: "11/06", ghiChuTiepNhan: "Left a consultation form on the homepage", phuTrach: null, trangThai: "moi", calls: [] },
+  { id: "kh11", ten: "Nora Walsh", dienThoai: "0936 208 117", nguon: "Referral", ngayTao: "11/06", ghiChuTiepNhan: "Referred by a past client — call early", phuTrach: null, trangThai: "moi", calls: [] },
+  { id: "kh12", ten: "Adam Foster", dienThoai: "0978 605 332", nguon: "Hotline", ngayTao: "10/06", ghiChuTiepNhan: "", phuTrach: null, trangThai: "moi", calls: [] },
+];
+
+const goiHomNay = (lead: Lead) => lead.calls.filter((c) => c.time.startsWith(HOM_NAY)).length;
+const goiHomNayCuaRep = (leads: Lead[], repId: string) =>
+  leads.filter((l) => l.phuTrach === repId).reduce((sum, l) => sum + goiHomNay(l), 0);
+
+// Member dossier behind the owner name in the drawer — a SECONDARY
+// reference (the primary row press opens the lead workspace, never a peek).
+function PhuTrachPeek({ rep, dangGiu }: { rep: Rep; dangGiu: number }) {
+  return (
+    <View style={{ gap: 10 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+        <Avatar name={rep.ten} size={32} />
+        <View style={{ gap: 1, flex: 1 }}>
+          <Text size="sm" weight="semibold">{rep.ten}</Text>
+          <Text size="xs" color="muted">{rep.vaiTro}</Text>
+        </View>
+      </View>
+      <Divider />
+      {[["Phone", rep.dienThoai], ["Holding", `${dangGiu} leads`]].map(([label, value]) => (
+        <DetailRow key={label} label={label}>
+          <Text size="sm" tabular>{value}</Text>
+        </DetailRow>
+      ))}
+      <Divider />
+      <Button title="Open staff profile" color="secondary" onPress={() => {}} />
+    </View>
+  );
+}
+
+// The append-only target setter: a new target is written as a new row, the
+// old history stays — past per-day verdicts never re-compute.
+function ChiTieuGate({ chiTieu, onSave }: { chiTieu: number; onSave: (n: number) => void }) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState<number | null>(chiTieu);
+  const [apDung, setApDung] = useState("In effect since 08/06 · set by Alex Morgan");
+  const confirm = () => {
+    if (draft === null) return;
+    onSave(draft); setApDung("In effect from today · set by you"); setOpen(false);
+  };
+  return (
+    <FilterPill
+      label="Target"
+      summary={String(chiTieu)}
+      align="end"
+      open={open}
+      onOpenChange={setOpen}
+      footer={
+        <>
+          <Button title="Cancel" color="secondary" onPress={() => setOpen(false)} />
+          <Button title="Save target" color="primary" disabled={draft === null || draft < 1} onPress={confirm} />
+        </>
+      }
+    >
+      <View style={{ gap: 12 }}>
+        <View style={{ gap: 2 }}>
+          <Text size="sm" weight="semibold">Daily call target</Text>
+          <Text size="xs" color="muted">A new target applies from today onward — past days' results stay unchanged.</Text>
+        </View>
+        <FormField label="Calls/day/rep">
+          <NumberInput value={draft} onValueChange={setDraft} min={1} accessibilityLabel="Calls per day per rep" />
+        </FormField>
+        <Text size="xs" color="muted">{apDung}</Text>
+      </View>
+    </FilterPill>
+  );
+}
+
+// The drawer body — keyed by lead id from the caller, so the inline composer's
+// draft state resets when sequencing steps. The lead itself lives in the page's
+// shared state: logging here moves every number on the register.
+function LeadWorkspace(props: { lead: Lead; rep: Rep | null; dangGiu: number; onLog: (ketQua: KetQua, ghiChu: string, callbackAt?: string) => void }) {
+  const { lead, rep, dangGiu, onLog } = props;
+  const [ketQua, setKetQua] = useState<KetQua | "">("");
+  const [ghiChu, setGhiChu] = useState("");
+  const [cbDate, setCbDate] = useState("");
+  const [cbTime, setCbTime] = useState("");
+  const tt = TRANG_THAI[lead.trangThai];
+  const lienHeCuoi = lead.calls[0]?.time ?? null;
+  const timelineItems: TimelineItem[] = lead.calls.map((c) => ({
+    id: c.id, icon: KET_QUA[c.ketQua].icon, iconColor: KET_QUA[c.ketQua].color,
+    label: c.ketQua === "hen_goi_lai" && c.callbackAt ? `${KET_QUA[c.ketQua].label} · ${c.callbackAt} — ${c.nguoiGoi}` : `${KET_QUA[c.ketQua].label} — ${c.nguoiGoi}`,
+    description: c.ghiChu,
+    right: <Text size="xs" color="muted" tabular>{c.time}</Text>,
+  }));
+
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 24 }}>
+        {/* hero: the phone is what a caller needs first — selectable, no fake CTA */}
+        <View style={{ gap: 10 }}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+            <Text size="xl" weight="semibold" tabular userSelect="auto">{lead.dienThoai}</Text>
+            <Badge label={tt.label} color={tt.color} />
+          </View>
+          <View style={{ gap: 6 }}>
+            <DetailRow label="Source" labelWidth={120} minHeight={24}><Text size="sm">{lead.nguon}</Text></DetailRow>
+            <DetailRow label="Created" labelWidth={120} minHeight={24}><Text size="sm" tabular>{lead.ngayTao}</Text></DetailRow>
+            <DetailRow label="Owner" labelWidth={120} minHeight={24}>
+              {rep ? (
+                <Peek accessibilityLabel={`Staff profile for ${rep.ten}`} content={<PhuTrachPeek rep={rep} dangGiu={dangGiu} />}>
+                  <Text size="sm">{rep.ten}</Text>
+                </Peek>
+              ) : (
+                <Text size="sm" color="muted">Unassigned — tick rows in the Unassigned section to assign</Text>
+              )}
+            </DetailRow>
+            <DetailRow label="Last contact" labelWidth={120} minHeight={24}><Text size="sm" color={lienHeCuoi ? "default" : "muted"} tabular>{lienHeCuoi ?? "Not contacted yet"}</Text></DetailRow>
+            {lead.ghiChuTiepNhan ? (
+              <DetailRow label="Intake note" labelWidth={120} minHeight={24}><Text size="sm" style={{ flex: 1 }} numberOfLines={2}>{lead.ghiChuTiepNhan}</Text></DetailRow>
+            ) : null}
+          </View>
+        </View>
+
+        <Divider />
+
+        {/* log this call — inline composer, matching the Call console */}
+        <View style={{ gap: 12 }}>
+          <Text size="sm" weight="semibold">Log this call</Text>
+          <ChipGroup
+            accessibilityLabel="Call outcome"
+            options={(Object.keys(KET_QUA) as KetQua[]).map((k) => ({ label: KET_QUA[k].label, value: k }))}
+            value={ketQua}
+            onValueChange={(v) => setKetQua(v as KetQua)}
+          />
+          {ketQua === "hen_goi_lai" ? (
+            <View style={{ flexDirection: "row", gap: 12, flexWrap: "wrap" }}>
+              <View style={{ flexGrow: 1, flexBasis: 160 }}>
+                <FormField label="Call back on"><DatePicker value={cbDate} onValueChange={setCbDate} format="date" /></FormField>
+              </View>
+              <View style={{ flexGrow: 1, flexBasis: 120 }}>
+                <FormField label="At (optional)"><TimePicker value={cbTime} onValueChange={setCbTime} /></FormField>
+              </View>
+            </View>
+          ) : null}
+          <TextInputField value={ghiChu} onChangeText={setGhiChu} multiline numberOfLines={3} autoGrow placeholder="Notes — what was discussed, and the next step" accessibilityLabel="Call notes" />
+          <View style={{ flexDirection: "row" }}>
+            <View style={{ flex: 1 }} />
+            <Button title="Log call" color="primary" disabled={ketQua === ""} onPress={() => { if (ketQua !== "") { onLog(ketQua, ghiChu, ketQua === "hen_goi_lai" ? fmtCallback(cbDate, cbTime) : undefined); setKetQua(""); setGhiChu(""); setCbDate(""); setCbTime(""); } }} />
+          </View>
+        </View>
+
+        <Divider />
+
+        {/* contact history */}
+        <View style={{ gap: 12 }}>
+          <Text size="sm" weight="semibold">{`Contact history · ${lead.calls.length}`}</Text>
+          {timelineItems.length === 0 ? (
+            <EmptyState message="No calls yet" hint="Log the first call above" />
+          ) : (
+            <Timeline items={timelineItems} />
+          )}
+        </View>
+      </ScrollView>
+
+      {/* pinned footer — the drawer's escalation, commit action at the right edge */}
+      <DrawerFooter>
+        <Text size="xs" color="muted" style={{ flex: 1 }}>When a lead agrees to buy, convert them into a case — the order continues in the Cases module.</Text>
+        <Button title="Create case" color="primary" onPress={() => {}} />
+      </DrawerFooter>
+    </>
+  );
+}
+
+export function TplCrmDesk() {
+  const [leads, setLeads] = useState<Lead[]>(LEADS);
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
+  const [assignOpen, setAssignOpen] = useState(false);
+  const [filter, setFilter] = useState<FilterKey>("all");
+  const [chiTieu, setChiTieu] = useState(10);
+  const [openId, setOpenId] = useState<string | null>(null);
+
+  // ONE dataset, ONE search + chip row over every row on screen: the pile is
+  // phuTrach === null; the rep cards group the rest. "Unassigned" shows the
+  // pile alone; a status chip narrows pile AND rep rows to that status.
+  const tu = search.trim().toLowerCase();
+  const matchSearch = (l: Lead) => tu === "" || l.ten.toLowerCase().includes(tu) || l.dienThoai.replace(/\s/g, "").includes(tu.replace(/\s/g, ""));
+  const matchStatus = (l: Lead) => filter === "all" || filter === "chua_giao" || l.trangThai === filter;
+  const pile = leads.filter((l) => l.phuTrach === null);
+  const visiblePile = pile.filter((l) => matchSearch(l) && matchStatus(l));
+  const giuBoi = (repId: string) => leads.filter((l) => l.phuTrach === repId);
+  const rowsOf = (repId: string) => giuBoi(repId).filter((l) => matchSearch(l) && matchStatus(l));
+  const showReps = filter !== "chua_giao";
+
+  // The drawer sequences over the FLAT visible ordering — pile rows first,
+  // then each rep card's rows — so ◀ ▶ walks the screen top to bottom. When
+  // the open lead falls out (a logged call moved it past the status filter),
+  // the chevrons disappear but the drawer stays on the lead.
+  const sequence = [...visiblePile, ...(showReps ? REPS.flatMap((r) => rowsOf(r.id)) : [])];
+  const openLead = leads.find((l) => l.id === openId) ?? null;
+  const seqIndex = openLead ? sequence.findIndex((l) => l.id === openLead.id) : -1;
+  const rep = openLead?.phuTrach ? REPS.find((r) => r.id === openLead.phuTrach) ?? null : null;
+
+  const tongGoiHomNay = leads.reduce((sum, l) => sum + goiHomNay(l), 0);
+  const datKpi = REPS.filter((r) => goiHomNayCuaRep(leads, r.id) >= chiTieu).length;
+  const countFor = (key: FilterKey) =>
+    key === "all" ? leads.length : key === "chua_giao" ? pile.length : leads.filter((l) => l.trangThai === key).length;
+  const labelFor = (key: FilterKey) =>
+    key === "all" ? "All" : key === "chua_giao" ? "Unassigned" : TRANG_THAI[key].label;
+
+  const allVisibleSelected = visiblePile.length > 0 && visiblePile.every((l) => selected.has(l.id));
+  const someVisibleSelected = visiblePile.some((l) => selected.has(l.id));
+
+  function toggleMany(ids: string[], on: boolean) {
+    const next = new Set(selected);
+    ids.forEach((id) => (on ? next.add(id) : next.delete(id)));
+    setSelected(next);
+  }
+
+  function toggleOne(id: string, on: boolean) {
+    const next = new Set(selected);
+    if (on) next.add(id); else next.delete(id);
+    setSelected(next);
+  }
+
+  // Sets the owner of every selected lead — the SAME action assigns an
+  // unassigned pile lead AND reassigns a rep's lead to another rep (every
+  // checkbox, pile or rep, feeds this one shared selection).
+  function giaoCho(repId: string) {
+    setLeads((prev) => prev.map((l) => (selected.has(l.id) ? { ...l, phuTrach: repId } : l)));
+    setSelected(new Set()); setAssignOpen(false);
+  }
+
+  // Logging a call prepends the event AND upgrades the lead's status — never
+  // downgrades — so every number on the register (chips, strip, badges) moves live.
+  function ghiCuocGoi(leadId: string, ketQua: KetQua, ghiChu: string, callbackAt?: string) {
+    setLeads((prev) => prev.map((l) => {
+      if (l.id !== leadId) return l;
+      const moi = KET_QUA[ketQua].trangThai;
+      const trangThai = TRANG_THAI[moi].rank > TRANG_THAI[l.trangThai].rank ? moi : l.trangThai;
+      const nguoiGoi = REPS.find((r) => r.id === l.phuTrach)?.ten ?? "Alex Morgan";
+      const call: CallEvent = { id: `c_moi_${l.calls.length + 1}`, time: `${HOM_NAY} · just now`, nguoiGoi, ketQua, ghiChu: ghiChu || undefined, callbackAt: callbackAt || undefined };
+      return { ...l, trangThai, calls: [call, ...l.calls] };
+    }));
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: colors.zinc[50] }}>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 28 }}>
+        <View style={{ width: "100%", maxWidth: 960, alignSelf: "center", gap: 16 }}>
+          {/* header band — one primary; it cedes primary to "Assign to…" while a selection is live */}
+          <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
+            <View style={{ gap: 2, flex: 1 }}>
+              <Text size="xl" weight="semibold">CRM — workbench</Text>
+              <Text size="sm" color="muted">One list: assign new leads to reps and track who hits today's call target</Text>
+            </View>
+            <Button title="Add lead" color={selected.size > 0 ? "secondary" : "primary"} onPress={() => {}} />
+          </View>
+
+          {/* the strip is informational — the chips below own filtering */}
+          <KPIStrip
+            items={[
+              { label: "Total leads", value: leads.length, caption: `${REPS.length} reps calling` },
+              { label: "Calls today", value: tongGoiHomNay, caption: "logged from the lead drawer" },
+              { label: "Hit KPI today", value: `${datKpi}/${REPS.length}`, tone: datKpi < REPS.length ? "warning" : "default", caption: `target ${chiTieu} calls/rep` },
+              { label: "Unassigned", value: pile.length, tone: pile.length > 0 ? "warning" : "default", caption: "tick rows to bulk-assign", info: "Leads nobody owns yet — filter with the Unassigned chip below and assign them in bulk." },
+            ]}
+          />
+
+          {/* toolbar: ONE search over every row + filter chips (one active) + the target gate */}
+          <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
+            <View style={{ flexGrow: 1, flexBasis: 220, maxWidth: 300 }}>
+              <SearchInput placeholder="Search by name or phone…" value={search} onChangeText={setSearch} accessibilityLabel="Search leads" />
+            </View>
+            <ChipGroup
+              accessibilityLabel="Filter leads"
+              options={FILTER_KEYS.map((key) => ({ label: `${labelFor(key)} · ${countFor(key)}`, value: key }))}
+              value={filter}
+              onValueChange={setFilter}
+            />
+            <View style={{ flex: 1 }} />
+            <ChiTieuGate chiTieu={chiTieu} onSave={setChiTieu} />
+          </View>
+
+          {/* the pile, FIRST — same banded register as the rep cards below.
+              Each row is two press targets: the checkbox selects, the body opens. */}
+          <Card style={{ padding: 0 }}>
+            <CardHeader>
+              {/* select-all on the LEFT, aligned with the row checkboxes */}
+              <CheckboxInput accessibilityLabel="Select all unassigned leads" checked={allVisibleSelected} indeterminate={!allVisibleSelected && someVisibleSelected} onChange={(on) => toggleMany(visiblePile.map((l) => l.id), on)} disabled={visiblePile.length === 0} />
+              <CardHeaderTitle info="New leads with no rep yet — tick rows (or the header box), then assign in the bar below">Unassigned</CardHeaderTitle>
+              <CardHeaderMeta>{`${pile.length} leads`}</CardHeaderMeta>
+            </CardHeader>
+            {pile.length === 0 ? (
+              <View style={{ paddingVertical: 20 }}>
+                <EmptyState message="Every lead is assigned" hint="New leads arrive via “Add lead” or the signup form." />
+              </View>
+            ) : visiblePile.length === 0 ? (
+              <View style={{ paddingVertical: 20 }}>
+                <EmptyState message="No unassigned leads match the filters" hint="Try another keyword or pick the All chip." />
+              </View>
+            ) : (
+              <View>
+                {visiblePile.map((l, i) => (
+                  <View key={l.id}>
+                    {i > 0 ? <Divider /> : null}
+                  <PressableRow
+                    onPress={() => setOpenId(l.id)}
+                    selected={l.id === openId}
+                    marked={selected.has(l.id)}
+                    style={{ gap: 8 }}
+                  >
+                    <CheckboxInput accessibilityLabel={`Select ${l.ten}`} checked={selected.has(l.id)} onChange={(on) => toggleOne(l.id, on)} />
+                    <Pressable
+                      accessibilityLabel={`Open record for ${l.ten}`}
+                      accessibilityRole="button"
+                      onPress={() => setOpenId(l.id)}
+                      style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12, minHeight: 56 }}
+                    >
+                      <View style={{ flex: 1, gap: 2 }}>
+                        <View style={{ flexDirection: "row", alignItems: "baseline", gap: 10 }}>
+                          <Text size="sm" weight="medium" numberOfLines={1} userSelect="none">{l.ten}</Text>
+                          <Text size="sm" color="muted" tabular userSelect="none">{l.dienThoai}</Text>
+                        </View>
+                        <Text size="sm" color="muted" numberOfLines={1} userSelect="none">{l.ghiChuTiepNhan ? `${l.nguon} · ${l.ghiChuTiepNhan}` : l.nguon}</Text>
+                      </View>
+                      <Text size="xs" color={l.ngayTao === HOM_NAY ? "default" : "muted"} tabular userSelect="none">{l.ngayTao}</Text>
+                    </Pressable>
+                  </PressableRow>
+                  </View>
+                ))}
+              </View>
+            )}
+            <CardFooter>
+              <Text size="xs" color="muted" style={{ flex: 1 }}>
+                {selected.size > 0 ? `${selected.size} of ${pile.length} leads selected — assign in the bar below` : "Press a row to open the record — tick to bulk-assign"}
+              </Text>
+            </CardFooter>
+          </Card>
+
+          {/* one banded card per rep — header carries the verdict, body the leads */}
+          {showReps ? REPS.map((r) => {
+            const goi = goiHomNayCuaRep(leads, r.id);
+            const dat = goi >= chiTieu;
+            const rows = rowsOf(r.id);
+            const allRepSelected = rows.length > 0 && rows.every((l) => selected.has(l.id));
+            const someRepSelected = rows.some((l) => selected.has(l.id));
+            return (
+              <Card key={r.id} style={{ padding: 0 }}>
+                {/* header = identity + the verdict only; the select-all (aligned
+                    with the row boxes) transfers this rep's whole book at once */}
+                <CardHeader>
+                  <CheckboxInput accessibilityLabel={`Select all of ${r.ten}'s leads`} checked={allRepSelected} indeterminate={!allRepSelected && someRepSelected} onChange={(on) => toggleMany(rows.map((l) => l.id), on)} disabled={rows.length === 0} />
+                  <Avatar name={r.ten} size={28} />
+                  <View style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 8 }}>
+                    <Text size="sm" weight="semibold" numberOfLines={1} style={{ flexShrink: 1 }}>{r.ten}</Text>
+                    <Text size="sm" weight="medium" color={dat ? "success" : goi === 0 ? "danger" : "warning"}>{dat ? "On target" : "Behind"}</Text>
+                  </View>
+                </CardHeader>
+                {rows.length === 0 ? (
+                  <EmptyState message="No leads match the filters" hint="Change the keyword or pick the All chip to see everything" />
+                ) : (
+                  <View>
+                    {rows.map((l, i) => (
+                      <View key={l.id}>
+                        {i > 0 ? <Divider /> : null}
+                      <PressableRow onPress={() => setOpenId(l.id)} selected={l.id === openId} marked={selected.has(l.id)} style={{ minHeight: 64, gap: 8 }}>
+                        <CheckboxInput accessibilityLabel={`Select ${l.ten}`} checked={selected.has(l.id)} onChange={(on) => toggleOne(l.id, on)} />
+                        <Pressable
+                          accessibilityRole="button"
+                          accessibilityLabel={`Open record for ${l.ten}`}
+                          onPress={() => setOpenId(l.id)}
+                          style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12 }}
+                        >
+                          <View style={{ flex: 1, gap: 2 }}>
+                            <Text weight="medium" numberOfLines={1}>{l.ten}</Text>
+                            <Text size="sm" color="muted" numberOfLines={1}>{l.calls[0] ? (l.calls[0].ghiChu ?? KET_QUA[l.calls[0].ketQua].label) : "Never contacted"}</Text>
+                          </View>
+                          <Text size="xs" color="muted" tabular>{l.calls[0]?.time ?? "—"}</Text>
+                          <Badge variant="dot" label={TRANG_THAI[l.trangThai].label} color={TRANG_THAI[l.trangThai].color} />
+                        </Pressable>
+                      </PressableRow>
+                      </View>
+                    ))}
+                  </View>
+                )}
+                {/* the rep's numbers — calls-vs-target + book size — moved out of
+                    the busy header into a quiet summary footer */}
+                <CardFooter>
+                  <Text size="xs" color="muted" tabular style={{ flex: 1 }}>{`${goi}/${chiTieu} calls today · ${giuBoi(r.id).length} leads held`}</Text>
+                </CardFooter>
+              </Card>
+            );
+          }) : null}
+        </View>
+      </ScrollView>
+
+      {/* assign / reassign every selected lead (pile OR rep) in one move */}
+      <FloatingActionBar count={selected.size} label="leads selected" onClear={() => setSelected(new Set())} clearLabel="Clear selection">
+        <Popover open={assignOpen} onOpenChange={setAssignOpen} side="top" align="end">
+          <PopoverTrigger>
+            <Button title="Assign" color="primary" />
+          </PopoverTrigger>
+          <PopoverContent style={{ width: 320 }}>
+            <View style={{ paddingHorizontal: 12, paddingTop: 10, paddingBottom: 6 }}>
+              <Text size="xs" color="muted" transform="uppercase" numberOfLines={2}>{`Assign ${selected.size} leads to`}</Text>
+            </View>
+            <View style={{ paddingHorizontal: 6, paddingBottom: 8, gap: 2 }}>
+              {REPS.map((r) => (
+                <MenuListItem key={r.id} icon={<Avatar name={r.ten} size={28} />} title={r.ten} description={`${giuBoi(r.id).length} leads · ${goiHomNayCuaRep(leads, r.id)} calls today`} onPress={() => giaoCho(r.id)} />
+              ))}
+            </View>
+          </PopoverContent>
+        </Popover>
+      </FloatingActionBar>
+
+      {/* the shared lead workspace — body keyed by lead id so per-lead state
+          resets when ◀ ▶ (or ←/→) steps through the visible list */}
+      {openLead ? (
+        <Drawer
+          open onOpenChange={(o) => !o && setOpenId(null)} title={openLead.ten} width={600}
+          onPrev={seqIndex > 0 ? () => setOpenId(sequence[seqIndex - 1].id) : undefined}
+          onNext={seqIndex >= 0 && seqIndex < sequence.length - 1 ? () => setOpenId(sequence[seqIndex + 1].id) : undefined}
+          position={seqIndex >= 0 ? `${seqIndex + 1}/${sequence.length}` : undefined}
+        >
+          <LeadWorkspace key={openLead.id} lead={openLead} rep={rep} dangGiu={rep ? giuBoi(rep.id).length : 0} onLog={(kq, gc, cb) => ghiCuocGoi(openLead.id, kq, gc, cb)} />
+        </Drawer>
+      ) : null}
+    </View>
+  );
+}