@lotics/ui 3.5.0 → 4.0.0

package/examples/tpl_callsheet.tsx

@@ -0,0 +1,481 @@
+import { useState } from "react";
+import { 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 } from "@lotics/ui/card";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { DatePicker } from "@lotics/ui/date_picker";
+import { Divider } from "@lotics/ui/divider";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { DetailRow } from "@lotics/ui/detail_row";
+import { FormField } from "@lotics/ui/form_field";
+import { formatMoney } from "@lotics/ui/format_money";
+import { Icon, type IconName } from "@lotics/ui/icon";
+import { Popover, PopoverContent, PopoverFooter, PopoverTrigger } from "@lotics/ui/popover";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { Pagination } from "@lotics/ui/pagination";
+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";
+import { InlineSelect } from "@lotics/ui/inline_select";
+import { InlineTextInput } from "@lotics/ui/inline_text_input";
+import { InlineNumberInput } from "@lotics/ui/inline_number_input";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Call console — a salesperson's full operator workspace. NOT the
+// manager's assignment board ("Assign & work"): the rep sees only their leads and
+// works each one end to end without leaving the screen. Two panes — a searchable,
+// filterable QUEUE on the left, and on the right the full lead workspace: call +
+// log the outcome, CAPTURE the applicant (eligibility code, national ID, address,
+// household, income — the fields the application needs), read the history, and
+// CONVERT once qualified. A KPIStrip tracks the rep's day.
+//
+// Reference composition — KPIStrip + SearchInput + ChipGroup (queue) + FormField/
+// TextInputField/NumberInput (data capture) + Timeline (history). No bespoke
+// "call-log" component: logging + capture are template recipes over primitives.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type OutcomeKey = "interested" | "callback" | "not_interested" | "no_answer";
+
+const OUTCOMES: Record<OutcomeKey, { label: string; icon: IconName; color: ColorName; status: string }> = {
+  interested: { label: "Interested", icon: "circle-check", color: "emerald", status: "Warm" },
+  callback: { label: "Call back", icon: "calendar", color: "blue", status: "Following up" },
+  not_interested: { label: "Not interested", icon: "circle-alert", color: "amber", status: "Cold" },
+  no_answer: { label: "No answer", icon: "ban", color: "zinc", status: "No answer" },
+};
+
+// The "number" — the eligibility category the rep assigns to qualify a lead.
+const CODES = [
+  { value: "A1", label: "A1 · Low income" },
+  { value: "B2", label: "B2 · Senior 60+" },
+  { value: "C1", label: "C1 · Disability" },
+  { value: "D1", label: "D1 · Single parent" },
+];
+
+const TODAY = "12/06";
+const TARGET = 15;
+
+interface CallEvent { id: string; time: string; outcome: OutcomeKey; notes?: string; callbackAt?: string }
+interface Lead {
+  id: string; name: string; phone: string; source: string; note: string;
+  code: string | null; idNumber: string; address: string;
+  household: number | null; income: number | null;
+  calls: CallEvent[];
+  /** A scheduled callback — set when logging a "Call back" outcome. */
+  callbackDue?: string;
+  /** Set when the rep hands a qualified lead to the manager to process. */
+  requested?: { at: string; note?: string };
+}
+
+const LEADS: Lead[] = [
+  { id: "L1", name: "Daniel Reyes", phone: "0903 558 214", source: "Facebook", note: "Commented on the June ad — asking about a 2-bedroom unit.", code: null, idNumber: "", address: "", household: null, income: null, calls: [] },
+  { id: "L2", name: "Priya Sharma", phone: "0915 027 884", source: "Hotline", note: "Called the hotline asking what documents she needs to apply.", code: null, idNumber: "", address: "", household: null, income: null, calls: [] },
+  { id: "L3", name: "Marcus Bell", phone: "0922 770 145", source: "Referral", note: "Referred by an existing applicant.", code: null, idNumber: "", address: "", household: null, income: null, calls: [] },
+  { id: "L4", name: "Emily Watson", phone: "0987 220 415", source: "Referral", note: "Wanted a callback after 3pm — she was in a meeting.", code: "A1", idNumber: "079 188 442 015", address: "44 Harbor Rd, District 4", household: 4, income: 9_500_000, callbackDue: "12/06 · 15:00", calls: [
+    { id: "c1", time: "12/06 · 09:18", outcome: "callback", notes: "In a meeting — call back after 3pm to finish the income check.", callbackAt: "12/06 · 15:00" },
+    { id: "c2", time: "06/06 · 15:30", outcome: "no_answer" },
+  ] },
+  { id: "L5", name: "Michael Turner", phone: "0912 384 756", source: "Facebook", note: "Qualifies on income — ready to start the application.", code: "A1", idNumber: "060 199 305 778", address: "12 Maple St, District 7", household: 3, income: 7_200_000, calls: [
+    { id: "c1", time: "12/06 · 10:42", outcome: "interested", notes: "Confirmed income and household. Wants to convert and start documents." },
+    { id: "c2", time: "06/06 · 09:05", outcome: "callback" },
+  ] },
+  { id: "L6", name: "James Holt", phone: "0918 736 245", source: "Website", note: "Downloaded the eligibility guide.", code: null, idNumber: "", address: "", household: null, income: null, calls: [
+    { id: "c1", time: "11/06 · 14:10", outcome: "not_interested", notes: "Found private housing instead." },
+  ] },
+];
+
+const lastOf = (l: Lead) => l.calls[0];
+const calledToday = (l: Lead) => l.calls.some((c) => c.time.startsWith(TODAY));
+const isWarm = (l: Lead) => lastOf(l)?.outcome === "interested";
+const isFollowUp = (l: Lead) => lastOf(l)?.outcome === "callback";
+
+const FILTERS = [
+  { value: "all", label: "All", match: () => true },
+  { value: "tocall", label: "To call", match: (l: Lead) => !calledToday(l) },
+  { value: "followup", label: "Follow-up", match: isFollowUp },
+  { value: "warm", label: "Warm", match: isWarm },
+] as const;
+
+// A picker date (yyyy-MM-dd) + optional time → "dd/MM" or "dd/MM · HH:mm".
+const fmtCallback = (date: string, time: string) => {
+  if (!date) return "";
+  const p = date.split("-");
+  const d = p.length === 3 ? `${p[2]}/${p[1]}` : date;
+  return time ? `${d} · ${time}` : d;
+};
+
+function QueueRow({ lead, active, onPress }: { lead: Lead; active: boolean; onPress: () => void }) {
+  const last = lastOf(lead);
+  return (
+    <PressableRow onPress={onPress} selected={active} style={{ paddingVertical: 16 }}>
+      <View style={{ flex: 1, gap: 5 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Text size="sm" weight="medium" numberOfLines={1} style={{ flexShrink: 1 }}>{lead.name}</Text>
+          {lead.code ? <Badge label={lead.code} color="blue" /> : null}
+        </View>
+        <Text size="xs" color="muted" tabular>{lead.phone}</Text>
+        <Text size="xs" color={lead.callbackDue ? "default" : "muted"}>
+          {lead.callbackDue ? `Due ${lead.callbackDue}` : last ? `${OUTCOMES[last.outcome].status} · ${last.time}` : "Not contacted yet"}
+        </Text>
+      </View>
+      <Badge
+        variant="dot"
+        label={lead.requested ? "Requested" : lead.callbackDue ? "Call back" : calledToday(lead) ? "Called" : "To call"}
+        color={lead.requested ? "amber" : lead.callbackDue ? "violet" : calledToday(lead) ? "emerald" : "blue"}
+      />
+    </PressableRow>
+  );
+}
+
+// The handoff — a qualified lead is REQUESTED for the manager to process (the rep
+// qualifies + captures; the manager runs the receipt / payment / documents). Carries
+// a recap + an optional message so the manager can pick it up cold.
+function RequestGate({ lead, onRequest }: { lead: Lead; onRequest: (note: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const [note, setNote] = useState("");
+  return (
+    <Popover open={open} onOpenChange={setOpen} side="top" align="end">
+      <PopoverTrigger>
+        <Button title="Request to process" color="primary" onPress={() => {}} />
+      </PopoverTrigger>
+      <PopoverContent style={{ width: 340 }} disableBodyScroll>
+        <View style={{ gap: 12 }}>
+          <View style={{ gap: 2 }}>
+            <Text size="sm" weight="semibold">{`Request processing — ${lead.name}`}</Text>
+            <Text size="xs" color="muted">The manager picks this up to generate the receipt, confirm payment, then build the application.</Text>
+          </View>
+          <View style={{ gap: 6 }}>
+            <DetailRow label="Eligibility"><Text size="sm">{CODES.find((c) => c.value === lead.code)?.label ?? "—"}</Text></DetailRow>
+            <DetailRow label="Household"><Text size="sm" tabular>{`${lead.household ?? "—"} people`}</Text></DetailRow>
+            <DetailRow label="Income"><Text size="sm" tabular>{lead.income != null ? formatMoney(lead.income) : "—"}</Text></DetailRow>
+          </View>
+          <FormField label="Message for the manager (optional)">
+            <TextInputField value={note} onChangeText={setNote} multiline numberOfLines={2} autoGrow placeholder="e.g. Wants to start this week — income verified" accessibilityLabel="Message for the manager" />
+          </FormField>
+        </View>
+        <PopoverFooter>
+          <Button title="Send request" color="primary" onPress={() => { setOpen(false); onRequest(note); }} />
+        </PopoverFooter>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// Add a lead the rep sourced themselves — straight into their own queue.
+function CreateLeadGate({ onCreate }: { onCreate: (name: string, phone: string, source: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [source, setSource] = useState("");
+  const valid = name.trim() !== "" && phone.trim() !== "";
+  return (
+    <Popover open={open} onOpenChange={setOpen} side="bottom" align="end">
+      <PopoverTrigger>
+        <Button title="New lead" icon="plus" color="secondary" onPress={() => {}} />
+      </PopoverTrigger>
+      <PopoverContent style={{ width: 320 }} disableBodyScroll>
+        <View style={{ gap: 12 }}>
+          <Text size="sm" weight="semibold">Add a lead</Text>
+          <FormField label="Name"><TextInputField value={name} onChangeText={setName} placeholder="Full name" accessibilityLabel="Lead name" /></FormField>
+          <FormField label="Phone"><TextInputField value={phone} onChangeText={setPhone} placeholder="09xx xxx xxx" accessibilityLabel="Lead phone" /></FormField>
+          <FormField label="Source"><TextInputField value={source} onChangeText={setSource} placeholder="e.g. Walk-in, Referral" accessibilityLabel="Lead source" /></FormField>
+        </View>
+        <PopoverFooter>
+          <Button title="Add lead" color="primary" disabled={!valid} onPress={() => { setOpen(false); onCreate(name, phone, source); setName(""); setPhone(""); setSource(""); }} />
+        </PopoverFooter>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function LeadWorkspace({ lead, onUpdate, onLog, onRequest, onWithdraw }: {
+  lead: Lead;
+  onUpdate: (patch: Partial<Lead>) => void;
+  onLog: (outcome: OutcomeKey, notes: string, callbackDue?: string) => void;
+  onRequest: (note: string) => void;
+  onWithdraw: () => void;
+}) {
+  const [outcome, setOutcome] = useState<OutcomeKey | "">("");
+  const [notes, setNotes] = useState("");
+  const [cbDate, setCbDate] = useState("");
+  const [cbTime, setCbTime] = useState("");
+  const missing = [
+    lead.code === null ? "an eligibility code" : null,
+    !isWarm(lead) ? "a warm call outcome" : null,
+    lead.idNumber.trim() === "" ? "the national ID" : null,
+    lead.income === null ? "income" : null,
+  ].filter((m): m is string => m !== null);
+  const ready = missing.length === 0;
+  const history: TimelineItem[] = lead.calls.map((c) => ({
+    id: c.id,
+    icon: OUTCOMES[c.outcome].icon,
+    iconColor: solid(OUTCOMES[c.outcome].color),
+    label: c.outcome === "callback" && c.callbackAt ? `${OUTCOMES[c.outcome].label} · ${c.callbackAt}` : OUTCOMES[c.outcome].label,
+    description: c.notes,
+    right: <Text size="xs" color="muted" tabular>{c.time}</Text>,
+  }));
+  return (
+    <Card style={{ padding: 0 }}>
+      {lead.requested ? (
+        <>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 14, backgroundColor: colors.amber[50] }}>
+            <View style={{ flex: 1, gap: 2 }}>
+              <Text size="sm" weight="medium">{`Requested to process · ${lead.requested.at}`}</Text>
+              <Text size="xs" color="muted">{lead.requested.note ? `Awaiting the manager — "${lead.requested.note}"` : "Awaiting the manager to pick this up"}</Text>
+            </View>
+            <Button title="Withdraw" color="muted" onPress={onWithdraw} />
+          </View>
+          <Divider />
+        </>
+      ) : null}
+      {/* identity + the call / handoff actions */}
+      <View style={{ padding: 20, gap: 14 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+          <Avatar name={lead.name} size={44} />
+          <View style={{ flex: 1, gap: 1 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+              <Text size="lg" weight="semibold">{lead.name}</Text>
+              {lead.code ? (
+                <Badge label={CODES.find((c) => c.value === lead.code)?.label ?? lead.code} color="blue" />
+              ) : (
+                <Badge label="No code yet" color="zinc" />
+              )}
+            </View>
+            <Text size="sm" color="muted" tabular>{`${lead.phone} · ${lead.source}`}</Text>
+          </View>
+        </View>
+        <Text size="sm" color="muted">{lead.note}</Text>
+        {lead.callbackDue ? (
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <Icon name="calendar" size={14} color={solid("blue")} />
+            <Text size="sm">{`Scheduled callback · ${lead.callbackDue}`}</Text>
+          </View>
+        ) : null}
+        <View style={{ gap: 8 }}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+            <Button title={`Call ${lead.phone}`} color="primary" onPress={() => {}} />
+            <View style={{ flex: 1 }} />
+            {lead.requested ? (
+              <Button title="Requested" color="secondary" disabled onPress={() => {}} />
+            ) : ready ? (
+              <RequestGate lead={lead} onRequest={onRequest} />
+            ) : (
+              <Button title="Request to process" color="secondary" disabled onPress={() => {}} />
+            )}
+          </View>
+          {!lead.requested ? (
+            ready ? (
+              <Text size="xs" color="success">Eligible — hand to the manager to process</Text>
+            ) : (
+              <Text size="xs" color="muted">{`To request processing: ${missing.join(", ")}`}</Text>
+            )
+          ) : null}
+        </View>
+      </View>
+      <Divider />
+
+      {/* log this call — the rep's main action */}
+      <View style={{ padding: 20, gap: 12 }}>
+        <Text size="sm" weight="semibold">Log this call</Text>
+        <ChipGroup
+          accessibilityLabel="Call outcome"
+          options={(Object.keys(OUTCOMES) as OutcomeKey[]).map((k) => ({ label: OUTCOMES[k].label, value: k }))}
+          value={outcome}
+          onValueChange={(v) => setOutcome(v as OutcomeKey)}
+        />
+        {outcome === "callback" ? (
+          <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={notes}
+          onChangeText={setNotes}
+          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={outcome === ""}
+            onPress={() => { if (outcome !== "") { onLog(outcome, notes, outcome === "callback" ? fmtCallback(cbDate, cbTime) : undefined); setOutcome(""); setNotes(""); setCbDate(""); setCbTime(""); } }}
+          />
+        </View>
+      </View>
+      <Divider />
+
+      {/* call history — directly under the log so the two read as one block */}
+      <View style={{ padding: 20, gap: 12 }}>
+        <Text size="sm" weight="semibold">{`Call history · ${lead.calls.length}`}</Text>
+        {lead.calls.length > 0 ? <Timeline items={history} /> : <Text size="sm" color="muted">No calls logged yet.</Text>}
+      </View>
+      <Divider />
+
+      {/* applicant details — each field edits IN PLACE; no form mode, no Save */}
+      <View style={{ padding: 20, gap: 14 }}>
+        <Text size="sm" weight="semibold">Applicant details</Text>
+        <View style={{ gap: 2 }}>
+          <DetailRow label="Eligibility code" labelWidth={140} minHeight={40}>
+            <View style={{ flex: 1 }}>
+              <InlineSelect value={lead.code} onSave={(v) => onUpdate({ code: v })} options={CODES} placeholder="Assign a code…" accessibilityLabel="Eligibility code" />
+            </View>
+          </DetailRow>
+          <DetailRow label="National ID" labelWidth={140} minHeight={40}>
+            <View style={{ flex: 1 }}>
+              <InlineTextInput value={lead.idNumber} onSave={(v) => onUpdate({ idNumber: v })} placeholder="Add national ID…" accessibilityLabel="National ID" />
+            </View>
+          </DetailRow>
+          <DetailRow label="Address" labelWidth={140} minHeight={40}>
+            <View style={{ flex: 1 }}>
+              <InlineTextInput value={lead.address} onSave={(v) => onUpdate({ address: v })} placeholder="Add address…" accessibilityLabel="Address" />
+            </View>
+          </DetailRow>
+          <DetailRow label="Household size" labelWidth={140} minHeight={40}>
+            <View style={{ flex: 1 }}>
+              <InlineNumberInput value={lead.household} onSave={(v) => onUpdate({ household: v })} min={1} max={20} format={(n) => (n == null ? "" : `${n} people`)} placeholder="Add household size…" accessibilityLabel="Household size" />
+            </View>
+          </DetailRow>
+          <DetailRow label="Monthly income" labelWidth={140} minHeight={40}>
+            <View style={{ flex: 1 }}>
+              <InlineNumberInput value={lead.income} onSave={(v) => onUpdate({ income: v })} min={0} format={(n) => (n == null ? "" : formatMoney(n))} placeholder="Add monthly income…" accessibilityLabel="Monthly income" />
+            </View>
+          </DetailRow>
+        </View>
+      </View>
+    </Card>
+  );
+}
+
+const PAGE_SIZE = 8;
+// Filler so the queue spans more than one page — a rep's list runs long.
+const FILLER_LEADS: Lead[] = ["Aiden Cole", "Zoe Hart", "Felix Wood", "Iris Lane", "Owen Pike", "Ruby Shaw", "Leo Vance", "Nina Frost"].map((name, i) => ({
+  id: `LF${i}`, name, phone: `09${20 + i} ${330 + i * 3} ${140 + i * 7}`,
+  source: ["Facebook", "Hotline", "Referral", "Walk-in"][i % 4], note: "New lead — not contacted yet.",
+  code: null, idNumber: "", address: "", household: null, income: null, calls: [],
+}));
+
+export function TplCallsheet() {
+  const [leads, setLeads] = useState<Lead[]>([...LEADS, ...FILLER_LEADS]);
+  const [activeId, setActiveId] = useState<string>(LEADS[0].id);
+  const [filter, setFilter] = useState("all");
+  const [q, setQ] = useState("");
+  const [page, setPage] = useState(0);
+
+  const callsToday = leads.reduce((s, l) => s + l.calls.filter((c) => c.time.startsWith(TODAY)).length, 0);
+  const followUps = leads.filter(isFollowUp).length;
+  const warm = leads.filter(isWarm).length;
+
+  const query = q.trim().toLowerCase();
+  const matchFilter = FILTERS.find((f) => f.value === filter)?.match ?? (() => true);
+  const queue = leads
+    .filter((l) => matchFilter(l) && (query === "" || l.name.toLowerCase().includes(query) || l.phone.includes(query)))
+    .sort((a, b) => (calledToday(a) ? 1 : 0) - (calledToday(b) ? 1 : 0));
+  const safePage = Math.min(page, Math.max(0, Math.ceil(queue.length / PAGE_SIZE) - 1));
+  const pageQueue = queue.slice(safePage * PAGE_SIZE, safePage * PAGE_SIZE + PAGE_SIZE);
+  const active = leads.find((l) => l.id === activeId) ?? leads[0];
+
+  const update = (patch: Partial<Lead>) => setLeads((prev) => prev.map((l) => (l.id === activeId ? { ...l, ...patch } : l)));
+  const log = (outcome: OutcomeKey, notes: string, callbackDue?: string) =>
+    setLeads((prev) => prev.map((l) =>
+      l.id === activeId
+        ? {
+            ...l,
+            callbackDue: outcome === "callback" ? callbackDue || undefined : undefined,
+            calls: [{ id: `c${l.calls.length + 1}t`, time: `${TODAY} · just now`, outcome, notes: notes.trim() || undefined, callbackAt: outcome === "callback" ? callbackDue || undefined : undefined }, ...l.calls],
+          }
+        : l,
+    ));
+  const createLead = (name: string, phone: string, source: string) => {
+    const id = `new-${leads.length}`;
+    const lead: Lead = { id, name: name.trim(), phone: phone.trim(), source: source.trim() || "Manual", note: "Added manually", code: null, idNumber: "", address: "", household: null, income: null, calls: [] };
+    setLeads((prev) => [lead, ...prev]);
+    setActiveId(id);
+  };
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 1140, alignSelf: "center", gap: 16 }}>
+        {/* header */}
+        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12, flexWrap: "wrap" }}>
+          <View style={{ gap: 2, flex: 1 }}>
+            <Text size="xl" weight="semibold">My leads</Text>
+            <Text size="sm" color="muted">Sarah Chen · call each lead, capture their details, log the outcome — convert once they qualify</Text>
+          </View>
+          <CreateLeadGate onCreate={createLead} />
+        </View>
+
+        <KPIStrip
+          items={[
+            { label: "Assigned to me", value: leads.length, format: "number" },
+            { label: "Calls today", value: callsToday, format: "number", caption: `of ${TARGET} target` },
+            { label: "Follow-ups due", value: followUps, format: "number", tone: followUps > 0 ? "warning" : "default" },
+            { label: "Warm leads", value: warm, format: "number", caption: "ready to convert" },
+          ]}
+        />
+
+        {/* two panes — the filtered queue, and the lead being worked */}
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
+          <View style={{ flexGrow: 1, flexBasis: 360 }}>
+            <Card style={{ padding: 0 }}>
+              <View style={{ padding: 16, gap: 10 }}>
+                <SearchInput placeholder="Search name or phone" value={q} onChangeText={(v) => { setQ(v); setPage(0); }} accessibilityLabel="Search my leads" />
+                <ChipGroup
+                  accessibilityLabel="Filter leads"
+                  options={FILTERS.map((f) => ({ label: `${f.label} · ${leads.filter(f.match).length}`, value: f.value }))}
+                  value={filter}
+                  onValueChange={(v) => { setFilter(v); setPage(0); }}
+                />
+              </View>
+              <Divider />
+              {queue.length > 0 ? (
+                <>
+                  {pageQueue.map((l, i) => (
+                    <View key={l.id}>
+                      {i > 0 ? <Divider /> : null}
+                      <QueueRow lead={l} active={l.id === activeId} onPress={() => setActiveId(l.id)} />
+                    </View>
+                  ))}
+                  <Divider />
+                  <View style={{ paddingHorizontal: 16, paddingVertical: 10 }}>
+                    <Pagination page={safePage} pageSize={PAGE_SIZE} rowCount={pageQueue.length} hasMore={(safePage + 1) * PAGE_SIZE < queue.length} total={queue.length} onPageChange={setPage} />
+                  </View>
+                </>
+              ) : (
+                <View style={{ padding: 24 }}><EmptyState message="No leads match" hint="Clear the search or pick another filter" /></View>
+              )}
+            </Card>
+          </View>
+          <View style={{ flexGrow: 1.7, flexBasis: 520 }}>
+            <LeadWorkspace
+              key={active.id}
+              lead={active}
+              onUpdate={update}
+              onLog={log}
+              onRequest={(note) => update({ requested: { at: TODAY, note: note.trim() || undefined } })}
+              onWithdraw={() => update({ requested: undefined })}
+            />
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}