@lotics/ui 3.5.0 → 4.0.0

package/examples/tpl_convert.tsx

@@ -0,0 +1,490 @@
+import { ReactNode, 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 { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card } from "@lotics/ui/card";
+import { DetailRow } from "@lotics/ui/detail_row";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
+import { FileBadge } from "@lotics/ui/file_badge";
+import { FileDropzone } from "@lotics/ui/file_dropzone";
+import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
+import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
+import type { DisplayFile } from "@lotics/ui/file_thumbnail";
+import { Icon, type IconName } from "@lotics/ui/icon";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { Pagination } from "@lotics/ui/pagination";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { Stepper } from "@lotics/ui/stepper";
+import { formatMoney } from "@lotics/ui/format_money";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { DatePicker } from "@lotics/ui/date_picker";
+import { FormField } from "@lotics/ui/form_field";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { TimePicker } from "@lotics/ui/time_picker";
+import { Timeline, type TimelineItem } from "@lotics/ui/timeline";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Conversion desk — the manager's back half. Reps hand off qualified
+// leads (Call console's "Request to process"); here the manager runs each into an
+// application through a STAGED process: receipt → payment → documents → collect →
+// submit. The queue is a full-width PAGINATED list (ready for a long backlog);
+// opening an applicant slides in a DRAWER showing the WHOLE process at once — a
+// horizontal Stepper plus every stage stacked and visible (no click-to-reveal),
+// the current stage's action pinned in the footer. The collect stage pairs a
+// required-document checklist with a free FILE DUMP for anything extra. The
+// drawer's ◀▶ keys walk the manager down the queue without closing it.
+//
+// Reference composition — Drawer (list nav) + Stepper + FileBadge (+ placeholder)
+// + Pagination + DetailRow.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const CODES: Record<string, string> = {
+  A1: "A1 · Low income",
+  B2: "B2 · Senior 60+",
+  C1: "C1 · Disability",
+};
+
+const STAGES = [
+  { key: "receipt", label: "Receipt", sub: "Generate the application receipt" },
+  { key: "payment", label: "Payment", sub: "Confirm the fee was paid" },
+  { key: "documents", label: "Documents", sub: "Generate the application paperwork" },
+  { key: "collect", label: "Collect", sub: "Collect the applicant's documents" },
+  { key: "submit", label: "Submit", sub: "Submit to the housing authority" },
+];
+
+const GENERATED_DOCS = ["Application form", "Eligibility declaration", "Cover letter to the authority"];
+const REQUIRED = ["National ID copy", "Income statement (3 months)", "Household registration", "Proof of current residence"];
+
+// A self-contained SVG data-URI "scan" so a seeded upload's thumbnail AND its
+// preview render offline; dropped files are real blobs (createObjectURL).
+const scan = (id: string, label: string, bg: string): DisplayFile => ({
+  id,
+  filename: `${label.toLowerCase().replace(/[^a-z0-9]+/g, "_")}.svg`,
+  mimeType: "image/svg+xml",
+  url:
+    "data:image/svg+xml," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="420" height="560"><rect width="100%" height="100%" fill="${bg}"/><text x="210" y="290" fill="#ffffff" font-family="sans-serif" font-size="28" text-anchor="middle">${label}</text></svg>`,
+    ),
+});
+
+// Call logging mirrors the Call console — same primitives, same look/feel, kept as
+// the manager's own copy so each page iterates independently (not extracted).
+type OutcomeKey = "interested" | "callback" | "not_interested" | "no_answer";
+const OUTCOMES: Record<OutcomeKey, { label: string; icon: IconName; color: ColorName }> = {
+  interested: { label: "Interested", icon: "circle-check", color: "emerald" },
+  callback: { label: "Call back", icon: "calendar", color: "blue" },
+  not_interested: { label: "Not interested", icon: "circle-alert", color: "amber" },
+  no_answer: { label: "No answer", icon: "ban", color: "zinc" },
+};
+const TODAY = "12/06";
+// 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 DocItem { name: string; received: boolean; file?: string }
+interface CallEvent { id: string; time: string; outcome: OutcomeKey; notes?: string; callbackAt?: string }
+interface Applicant {
+  id: string; name: string; phone: string; code: string; idNumber: string; household: number; income: number; fee: number;
+  requestedBy: string; requestedAt: string; note?: string;
+  stage: number;
+  docs: DocItem[];
+  uploads: DisplayFile[];
+  calls: CallEvent[];
+  callbackDue?: string;
+}
+
+const fileName = (name: string) => `${name.toLowerCase().replace(/[^a-z0-9]+/g, "_")}.pdf`;
+const docList = (received = false): DocItem[] => REQUIRED.map((name) => ({ name, received, file: received ? fileName(name) : undefined }));
+
+const REQUESTERS = ["Sarah Chen", "David Park", "Mai Tran"];
+const FILLER_NAMES = ["James Carter", "Olivia Brooks", "Daniel Foster", "Sophia Reed", "William Hughes", "Grace Coleman", "Henry Mills", "Ava Sutton", "Lucas Grant", "Chloe Barrett", "Nathan Ross"];
+const filler = (name: string, i: number): Applicant => {
+  const stage = i % 5;
+  return {
+    id: `AF${i}`, name, phone: `09${30 + i} ${410 + i * 3} ${220 + i * 7}`, code: ["A1", "B2", "C1"][i % 3],
+    idNumber: `0${55 + i} ${160 + i} ${305 + i} ${700 + i}`,
+    household: 2 + (i % 4), income: 5_000_000 + (i % 6) * 800_000, fee: 500_000,
+    requestedBy: REQUESTERS[i % 3], requestedAt: `${(i % 12) + 1}/06`,
+    stage, docs: docList(stage > 3), uploads: [], calls: [],
+  };
+};
+
+const APPLICANTS: Applicant[] = [
+  { id: "AP1", name: "Michael Turner", phone: "0912 384 756", code: "A1", idNumber: "060 199 305 778", household: 3, income: 7_200_000, fee: 500_000, requestedBy: "Sarah Chen", requestedAt: "12/06", note: "Income verified — wants to start this week.", stage: 0, docs: docList(), uploads: [], calls: [{ id: "cAP1a", time: "12/06 · 10:42", outcome: "interested", notes: "Confirmed income and household. Wants to convert and start documents." }] },
+  { id: "AP2", name: "Emily Watson", phone: "0987 220 415", code: "A1", idNumber: "079 188 442 015", household: 4, income: 9_500_000, fee: 500_000, requestedBy: "Sarah Chen", requestedAt: "11/06", callbackDue: "12/06 · 15:00", stage: 3, docs: docList().map((d, i) => (i < 2 ? { ...d, received: true, file: fileName(d.name) } : d)), uploads: [scan("u1AP2", "Site photo", "#1e3a8a")], calls: [{ id: "cAP2a", 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: "cAP2b", time: "06/06 · 15:30", outcome: "no_answer" }] },
+  { id: "AP3", name: "Laura Bennett", phone: "0934 510 882", code: "B2", idNumber: "055 162 770 904", household: 2, income: 5_400_000, fee: 500_000, requestedBy: "David Park", requestedAt: "10/06", stage: 4, docs: docList(true), uploads: [], calls: [{ id: "cAP3a", time: "10/06 · 11:20", outcome: "interested", notes: "Senior — qualifies on B2. Daughter will help with the documents." }] },
+  ...FILLER_NAMES.map(filler),
+];
+
+const PAGE_SIZE = 8;
+
+function QueueRow({ app, active, onPress }: { app: Applicant; active: boolean; onPress: () => void }) {
+  const submitted = app.stage >= STAGES.length;
+  return (
+    <PressableRow onPress={onPress} selected={active} marked={active} style={{ paddingVertical: 14 }}>
+      <View style={{ flex: 1, gap: 4 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Text size="sm" weight="medium" numberOfLines={1} style={{ flexShrink: 1 }}>{app.name}</Text>
+          <Badge label={app.code} color="blue" />
+        </View>
+        <Text size="xs" color="muted">{`Requested by ${app.requestedBy} · ${app.requestedAt}`}</Text>
+      </View>
+      <Badge variant="dot" label={submitted ? "Submitted" : STAGES[app.stage].label} color={submitted ? "emerald" : "blue"} />
+    </PressableRow>
+  );
+}
+
+// A document line — a FileBadge (or a same-footprint placeholder) + name + meta.
+function FileRow({ name, meta, mimeType, placeholder, tone, action }: {
+  name: string; meta?: string; mimeType?: string; placeholder?: boolean; tone?: "received" | "ready"; action?: ReactNode;
+}) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+      <FileBadge size={30} mimeType={mimeType} placeholder={placeholder} />
+      <View style={{ flex: 1 }}>
+        <Text size="sm" weight="medium">{name}</Text>
+        {meta ? <Text size="xs" color="muted">{meta}</Text> : null}
+      </View>
+      {action ?? (tone === "received" ? <Badge variant="dot" label="Received" color="emerald" /> : tone === "ready" ? <Badge variant="dot" label="Generated" color="blue" /> : null)}
+    </View>
+  );
+}
+
+// The extra-documents zone — the data-capture attachment field: a thumbnail grid
+// (click to preview in the gallery, ✕ to delete) above a dropzone. Read-only once
+// the stage is done.
+function UploadsField({ uploads, editable, onAdd, onRemove }: {
+  uploads: DisplayFile[]; editable: boolean; onAdd: (files: DisplayFile[]) => void; onRemove: (id: string) => void;
+}) {
+  const [active, setActive] = useState<number | null>(null);
+  return (
+    <View style={{ gap: 10 }}>
+      {uploads.length > 0 ? (
+        <FileThumbnailGrid
+          files={uploads}
+          itemSize={76}
+          onFilePress={(f) => setActive(uploads.findIndex((x) => x.id === f.id))}
+          onRemove={editable ? onRemove : undefined}
+        />
+      ) : null}
+      {editable ? (
+        <FileDropzone
+          height={88}
+          label="Drop extra documents"
+          hint="or click to browse · PDF, images"
+          dropLabel="Release to attach"
+          accept="application/pdf,image/*"
+          accessibilityLabel="Attach extra documents"
+          onFiles={(dropped) =>
+            onAdd(dropped.map((f, i) => ({ id: `up_${f.name}_${uploads.length + i}`, filename: f.name, mimeType: f.type || "application/octet-stream", url: URL.createObjectURL(f) })))
+          }
+        />
+      ) : uploads.length === 0 ? (
+        <Text size="sm" color="muted">No extra files.</Text>
+      ) : null}
+      <FileGalleryModal files={uploads} activeIndex={active} onIndexChange={setActive} captionHint="ESC to close · ←/→ to move" />
+    </View>
+  );
+}
+
+// One stage, always rendered — done shows its result, current its work, later
+// stages a muted preview. Nothing hides behind a click.
+function StageSection({ app, index, onMarkDoc, onAddUploads, onRemoveUpload }: {
+  app: Applicant; index: number; onMarkDoc: (name: string, received: boolean) => void; onAddUploads: (files: DisplayFile[]) => void; onRemoveUpload: (id: string) => void;
+}) {
+  const status = app.stage > index ? "done" : app.stage === index ? "current" : "pending";
+  const collected = app.docs.filter((d) => d.received).length;
+
+  const head = (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+      <Text size="xs" weight="semibold" color="muted" tabular>{`Step ${index + 1}`}</Text>
+      <Text size="sm" weight="semibold">{STAGES[index].label}</Text>
+      <View style={{ flex: 1 }} />
+      {status === "done" ? <Badge variant="dot" label="Done" color="emerald" />
+        : status === "current" ? <Badge variant="dot" label="Now" color="blue" />
+          : <Text size="xs" color="muted">Locked</Text>}
+    </View>
+  );
+
+  let body: ReactNode = null;
+  if (status === "pending") {
+    body = <Text size="sm" color="muted">{`Unlocks after ${STAGES[index - 1].label.toLowerCase()}.`}</Text>;
+  } else if (index === 0) {
+    body = <FileRow name="Application fee receipt" meta={status === "done" ? `${formatMoney(app.fee)} · issued` : formatMoney(app.fee)} mimeType="application/pdf" tone={status === "done" ? "ready" : undefined} />;
+  } else if (index === 1) {
+    body = (
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+        <Icon name="circle-check" size={18} color={status === "done" ? colors.emerald[600] : colors.zinc[300]} />
+        <Text size="sm" color={status === "done" ? "default" : "muted"}>{status === "done" ? `Payment confirmed · ${formatMoney(app.fee)} received` : `Confirm the ${formatMoney(app.fee)} fee once it lands.`}</Text>
+      </View>
+    );
+  } else if (index === 2) {
+    body = (
+      <View style={{ gap: 10 }}>
+        {GENERATED_DOCS.map((d) => (
+          <FileRow key={d} name={d} mimeType="application/pdf" meta={status === "done" ? "generated" : "template"} tone={status === "done" ? "ready" : undefined} />
+        ))}
+      </View>
+    );
+  } else if (index === 3) {
+    body = (
+      <View style={{ gap: 16 }}>
+        <View style={{ gap: 8 }}>
+          <Text size="xs" color="muted" transform="uppercase">{`Required documents · ${collected}/${app.docs.length}`}</Text>
+          {app.docs.map((d) => (
+            <FileRow
+              key={d.name}
+              name={d.name}
+              meta={d.received ? `${d.file} · received` : "Awaiting upload"}
+              mimeType={d.received ? "application/pdf" : undefined}
+              placeholder={!d.received}
+              action={status === "current"
+                ? (d.received ? <Button title="Remove" color="muted" onPress={() => onMarkDoc(d.name, false)} /> : <Button title="Upload" color="secondary" onPress={() => onMarkDoc(d.name, true)} />)
+                : (d.received ? <Badge variant="dot" label="Received" color="emerald" /> : undefined)}
+            />
+          ))}
+        </View>
+        <View style={{ gap: 8 }}>
+          <Text size="xs" color="muted" transform="uppercase">Additional documents</Text>
+          <UploadsField uploads={app.uploads} editable={status === "current"} onAdd={onAddUploads} onRemove={onRemoveUpload} />
+        </View>
+      </View>
+    );
+  } else {
+    body = status === "done" ? (
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+        <Icon name="circle-check" size={18} color={colors.emerald[600]} />
+        <Text size="sm">Submitted to the housing authority.</Text>
+      </View>
+    ) : (
+      <View style={{ gap: 6, padding: 14, borderRadius: 10, backgroundColor: colors.zinc[50] }}>
+        <DetailRow label="Applicant" labelWidth={120}><Text size="sm" weight="medium">{app.name}</Text></DetailRow>
+        <DetailRow label="Eligibility" labelWidth={120}><Text size="sm">{CODES[app.code]}</Text></DetailRow>
+        <DetailRow label="Documents" labelWidth={120}><Text size="sm" tabular>{`${app.docs.length} collected · ${app.uploads.length} extra`}</Text></DetailRow>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ gap: 10, opacity: status === "pending" ? 0.55 : 1 }}>
+      {head}
+      <View style={{ paddingLeft: 2 }}>{body}</View>
+    </View>
+  );
+}
+
+// The call log — mirrors the Call console's composer + history, the manager's own
+// copy. The manager can call a lead and read what the rep already discussed.
+function CallLog({ calls, phone, callbackDue, onLog }: {
+  calls: CallEvent[]; phone: string; callbackDue?: string; onLog: (outcome: OutcomeKey, notes: string, callbackDue?: string) => void;
+}) {
+  const [outcome, setOutcome] = useState<OutcomeKey | "">("");
+  const [notes, setNotes] = useState("");
+  const [cbDate, setCbDate] = useState("");
+  const [cbTime, setCbTime] = useState("");
+  const history: TimelineItem[] = 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 (
+    <View style={{ gap: 14 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
+        <Button title={`Call ${phone}`} color="primary" onPress={() => {}} />
+        {callbackDue ? (
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <Icon name="calendar" size={14} color={solid("blue")} />
+            <Text size="sm">{`Callback · ${callbackDue}`}</Text>
+          </View>
+        ) : null}
+      </View>
+      <View style={{ 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>
+      <View style={{ gap: 12 }}>
+        <Text size="sm" weight="semibold">{`Call history · ${calls.length}`}</Text>
+        {calls.length > 0 ? <Timeline items={history} /> : <Text size="sm" color="muted">No calls logged yet.</Text>}
+      </View>
+    </View>
+  );
+}
+
+function ConvertDetail({ app, onAdvance, onLogCall, onMarkDoc, onAddUploads, onRemoveUpload }: {
+  app: Applicant; onAdvance: () => void; onLogCall: (outcome: OutcomeKey, notes: string, callbackDue?: string) => void; onMarkDoc: (name: string, received: boolean) => void; onAddUploads: (files: DisplayFile[]) => void; onRemoveUpload: (id: string) => void;
+}) {
+  const submitted = app.stage >= STAGES.length;
+  const allDocs = app.docs.every((d) => d.received);
+
+  const cta = submitted ? <Button title="Submitted" color="muted" disabled onPress={() => {}} />
+    : app.stage === 0 ? <Button title="Generate receipt" color="primary" onPress={onAdvance} />
+      : app.stage === 1 ? <Button title="Confirm payment received" color="primary" onPress={onAdvance} />
+        : app.stage === 2 ? <Button title="Generate documents" color="primary" onPress={onAdvance} />
+          : app.stage === 3 ? <Button title="Mark all collected" color="primary" disabled={!allDocs} onPress={onAdvance} />
+            : <Button title="Submit application" color="primary" onPress={onAdvance} />;
+
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 20, gap: 18 }}>
+        {app.note ? (
+          <View style={{ padding: 12, borderRadius: 10, backgroundColor: colors.amber[50] }}>
+            <Text size="sm">{`"${app.note}"`}</Text>
+          </View>
+        ) : null}
+        <View style={{ gap: 6 }}>
+          <DetailRow label="Requested by" labelWidth={120}><Text size="sm">{`${app.requestedBy} · ${app.requestedAt}`}</Text></DetailRow>
+          <DetailRow label="National ID" labelWidth={120}><Text size="sm" tabular>{app.idNumber}</Text></DetailRow>
+          <DetailRow label="Household" labelWidth={120}><Text size="sm" tabular>{`${app.household} people · ${formatMoney(app.income)}/mo`}</Text></DetailRow>
+        </View>
+
+        <Divider />
+        <CallLog calls={app.calls} phone={app.phone} callbackDue={app.callbackDue} onLog={onLogCall} />
+
+        <Divider />
+        <View style={{ gap: 10 }}>
+          <Text size="sm" weight="semibold">Conversion</Text>
+          <Stepper steps={STAGES.map((s) => s.label)} current={app.stage} color={colors.blue[600]} accessibilityLabel="Conversion progress" />
+        </View>
+        <Divider />
+
+        <View style={{ gap: 18 }}>
+          {STAGES.map((s, i) => (
+            <View key={s.key} style={{ gap: 18 }}>
+              {i > 0 ? <Divider /> : null}
+              <StageSection app={app} index={i} onMarkDoc={onMarkDoc} onAddUploads={onAddUploads} onRemoveUpload={onRemoveUpload} />
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+      <DrawerFooter>
+        <Text size="sm" color="muted" numberOfLines={1} style={{ flex: 1 }}>
+          {submitted ? "Submitted to the housing authority" : `Step ${app.stage + 1} of ${STAGES.length} · ${STAGES[app.stage].label}`}
+        </Text>
+        {cta}
+      </DrawerFooter>
+    </>
+  );
+}
+
+export function TplConvert() {
+  const [apps, setApps] = useState<Applicant[]>(APPLICANTS);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [page, setPage] = useState(0);
+
+  const activeIdx = activeId ? apps.findIndex((a) => a.id === activeId) : -1;
+  const active = activeIdx >= 0 ? apps[activeIdx] : null;
+
+  const update = (patch: Partial<Applicant>) => setApps((prev) => prev.map((a) => (a.id === activeId ? { ...a, ...patch } : a)));
+  const advance = () => active && update({ stage: active.stage + 1 });
+  const logCall = (outcome: OutcomeKey, notes: string, callbackDue?: string) =>
+    active && update({
+      callbackDue: outcome === "callback" ? callbackDue || undefined : undefined,
+      calls: [{ id: `c${active.calls.length + 1}${active.id}`, time: `${TODAY} · just now`, outcome, notes: notes.trim() || undefined, callbackAt: outcome === "callback" ? callbackDue || undefined : undefined }, ...active.calls],
+    });
+  const markDoc = (name: string, received: boolean) =>
+    active && update({ docs: active.docs.map((d) => (d.name === name ? { ...d, received, file: received ? fileName(name) : undefined } : d)) });
+  const addUploads = (files: DisplayFile[]) => active && update({ uploads: [...active.uploads, ...files] });
+  const removeUpload = (id: string) => active && update({ uploads: active.uploads.filter((u) => u.id !== id) });
+
+  const inConversion = apps.filter((a) => a.stage < STAGES.length).length;
+  const awaitingPayment = apps.filter((a) => a.stage === 1).length;
+  const collecting = apps.filter((a) => a.stage === 3).length;
+  const submitted = apps.filter((a) => a.stage >= STAGES.length).length;
+
+  const pageApps = apps.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+        <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
+          <View style={{ gap: 2 }}>
+            <Text size="xl" weight="semibold">Conversion desk</Text>
+            <Text size="sm" color="muted">Process each requested lead into an application — receipt, payment, documents, then submit</Text>
+          </View>
+
+          <KPIStrip
+            items={[
+              { label: "In conversion", value: inConversion, format: "number" },
+              { label: "Awaiting payment", value: awaitingPayment, format: "number", tone: awaitingPayment > 0 ? "warning" : "default" },
+              { label: "Collecting docs", value: collecting, format: "number" },
+              { label: "Submitted", value: submitted, format: "number", caption: "this period" },
+            ]}
+          />
+
+          <Card style={{ padding: 0 }}>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 12 }}>
+              <Text size="xs" color="muted" transform="uppercase">{`Requested · ${apps.length}`}</Text>
+            </View>
+            <Divider />
+            {pageApps.map((a, i) => (
+              <View key={a.id}>
+                {i > 0 ? <Divider /> : null}
+                <QueueRow app={a} active={a.id === activeId} onPress={() => setActiveId(a.id)} />
+              </View>
+            ))}
+            <Divider />
+            <View style={{ paddingHorizontal: 16, paddingVertical: 10 }}>
+              <Pagination
+                page={page}
+                pageSize={PAGE_SIZE}
+                rowCount={pageApps.length}
+                hasMore={(page + 1) * PAGE_SIZE < apps.length}
+                total={apps.length}
+                onPageChange={setPage}
+              />
+            </View>
+          </Card>
+        </View>
+      </ScrollView>
+
+      <Drawer
+        open={active != null}
+        onOpenChange={(o) => { if (!o) setActiveId(null); }}
+        width={560}
+        title={active ? (
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <Text size="md" weight="semibold">{active.name}</Text>
+            <Badge label={active.code} color="blue" />
+          </View>
+        ) : undefined}
+        position={active ? `${activeIdx + 1}/${apps.length}` : undefined}
+        onPrev={active && activeIdx > 0 ? () => setActiveId(apps[activeIdx - 1].id) : undefined}
+        onNext={active && activeIdx < apps.length - 1 ? () => setActiveId(apps[activeIdx + 1].id) : undefined}
+      >
+        {active ? (
+          <ConvertDetail key={active.id} app={active} onAdvance={advance} onLogCall={logCall} onMarkDoc={markDoc} onAddUploads={addUploads} onRemoveUpload={removeUpload} />
+        ) : null}
+      </Drawer>
+    </View>
+  );
+}