/* Page: Floor (rep) — single-page consolidation of: - Dial Queue (was page-queue) - Pipeline (was page-pipeline) - Calls (was page-calls) - Lead mgmt (was contextual everywhere) - Autodialer (was admin-only on page-platform) The model: queue / pipeline / calls are VIEWS over the same lead dataset, not separate apps. The autodialer is a CAPABILITY toggled here. The lead inspector slides in from the right when a row is selected. The in-call panel (window.InCall) floats globally — shared with all other pages. Three modes: - "live" → queue + autodialer + next-up (default landing) - "pipeline" → kanban / list of MY pipeline - "history" → recent calls + recordings + AI scoring v1 composes the existing PageQueue / PagePipeline / PageCalls in-place under a top mode-toggle. Lead inspector drawer ships in v2 once the underlying components emit a "lead:selected" event. */ (function(){ const { useState, useEffect } = React; // ──────────────────────────────────────────────────────────────────────── // Autodialer — local state pill; persists to localStorage so refresh keeps // the rep's dialer on/off setting. Real auto-dial wires to window.repflowCall // and the Vapi/Convoso connector when ON. // ──────────────────────────────────────────────────────────────────────── function useAutodialer() { const [state, setState] = useState(() => { try { const raw = localStorage.getItem("repflow.autodialer"); return raw ? JSON.parse(raw) : { on: false, paused: false, ratePerHr: 87 }; } catch { return { on: false, paused: false, ratePerHr: 87 }; } }); useEffect(() => { try { localStorage.setItem("repflow.autodialer", JSON.stringify(state)); } catch {} }, [state]); return [state, setState]; } function AutodialerPill({ state, setState }) { const { on, paused, ratePerHr } = state; const status = !on ? "off" : paused ? "paused" : "on"; const dotColor = status === "on" ? "var(--accent-money)" : status === "paused" ? "var(--state-warning)" : "var(--text-tertiary)"; // FIX: previously the Start/Pause/Stop buttons only flipped localStorage. // Now they actually drive the global AutoDialBar via the autodial:* events // it already listens for. Queue is built from the rep's QUEUE rows. function buildAutodialQueue() { const me = (typeof window !== "undefined" && window.me && window.me()) || null; const myId = me?.rep_id || null; const queue = (AppData.QUEUE || []).slice(); const mine = myId ? queue.filter(q => q.assignedRepId === myId || !q.assignedRepId) : queue; mine.sort((a, b) => (a.elapsed - b.elapsed) || (b.score - a.score)); return mine.map(q => ({ id: q.id, lead: q.lead, age: q.age, state: q.state, source: q.source, product: q.product, ap: 0, days: 0, heat: q.elapsed < 30 ? "hot" : q.elapsed < 90 ? "fresh" : "warm", phone: q.phone || null, })); } const startAutodial = () => { const queue = buildAutodialQueue(); if (queue.length === 0) { window.toast && window.toast("Queue empty — nothing to autodial", "warn"); return; } setState(s => ({ ...s, on: true, paused: false })); window.dispatchEvent(new CustomEvent("autodial:start", { detail: { queue } })); }; const pauseAutodial = () => { setState(s => ({ ...s, paused: true })); window.dispatchEvent(new CustomEvent("autodial:pause")); }; const resumeAutodial = () => { setState(s => ({ ...s, paused: false })); window.dispatchEvent(new CustomEvent("autodial:resume")); }; const stopAutodial = () => { setState(s => ({ ...s, on: false, paused: false })); window.dispatchEvent(new CustomEvent("autodial:stop")); }; return (
Autodialer · {status.toUpperCase()} {on && · {ratePerHr}/hr} {!on && ( )} {on && !paused && ( )} {on && paused && ( )} {on && ( )}
); } // ──────────────────────────────────────────────────────────────────────── // Mode toggle — pill row at the top // ──────────────────────────────────────────────────────────────────────── function ModeTabs({ mode, setMode }) { return ( ); } // ──────────────────────────────────────────────────────────────────────── // Quick-stats strip — always visible at top of Live mode // ──────────────────────────────────────────────────────────────────────── function FloorTopStrip({ role }) { // Re-render on data:mutated so kanban stage moves + deal writes flip // Today's number live without a refresh. const [, force] = useState(0); useEffect(() => { const h = () => force(n => n + 1); window.addEventListener("data:mutated", h); window.addEventListener("data:hydrated", h); return () => { window.removeEventListener("data:mutated", h); window.removeEventListener("data:hydrated", h); }; }, []); // GAP-D1 — resolve the actual signed-in viewer instead of REPS[0]=Marcus. const meIdent = (typeof window !== "undefined" && window.me && window.me()) || null; const me = (meIdent?.rep_id && AppData.REPS?.find(r => r.id === meIdent.rep_id)) || (AppData.REPS && AppData.REPS[0]); const tasksOpen = (AppData.TASKS || []).filter(t => t.status === "open" && (!me || !t.repId || t.repId === me.id)).length; const queueLen = (AppData.QUEUE || []).length; const myPipeline = (AppData.PIPELINE || []).filter(p => !me || p.owner === me.id ).length; // Live Today's number: seed value PLUS expected commission on any policies // issued today owned by this rep. _syncPolicyFromPipeline (data.jsx) appends // POLICIES rows when a kanban deal flips to App In / Issued, so this // recomputes the moment the rep clicks the chip. const TARGET = 1800; const todayISO = new Date().toISOString().slice(0, 10); const myPolicies = (AppData.POLICIES || []).filter(p => !me || p.owner === me.id); const todayBumped = myPolicies .filter(p => (p.status === "issued" || p.status === "active") && (p.issuedAt || "").slice(0, 10) === todayISO) .reduce((a, p) => a + (p.expectedCommission || Math.round((p.ap || 0) * (p.compRatePct || 22) / 100) || 0), 0); const today = (me?.today || 0) + todayBumped; const aheadBy = today - TARGET; const todaySub = aheadBy >= 0 ? `$${aheadBy.toLocaleString()} ahead of $${TARGET.toLocaleString()}` : `$${(TARGET - today).toLocaleString()} to target`; return (
= 0 ? "up" : undefined}/>
); } // ──────────────────────────────────────────────────────────────────────── // Live mode — embeds the existing PageQueue (which has queue + side panels) // and overlays the autodialer status. Falls back gracefully if PageQueue // hasn't compiled yet. // ──────────────────────────────────────────────────────────────────────── // Probe /api/twilio-token once on mount. If 503 (env vars missing), show a // CTA so the rep knows why dials are routing to system dialer + transcription // is mic-only. Cached on window so we don't re-probe across page changes. function useTwilioStatus() { const [status, setStatus] = useState(() => window.__twilioStatus || "unknown"); // unknown | ready | unconfigured | error useEffect(() => { if (window.__twilioStatus && window.__twilioStatus !== "unknown") { setStatus(window.__twilioStatus); return; } let cancelled = false; (async () => { try { const r = await fetch("/api/twilio-token", { method: "POST", headers: { "content-type": "application/json" }, body: "{}" }); if (cancelled) return; const next = r.status === 503 ? "unconfigured" : r.ok ? "ready" : "error"; window.__twilioStatus = next; setStatus(next); } catch { if (cancelled) return; window.__twilioStatus = "error"; setStatus("error"); } })(); return () => { cancelled = true; }; }, []); return status; } function TwilioCTA() { const goSettings = () => window.dispatchEvent(new CustomEvent("nav:goto", { detail: { page: "settings" }})); return ( ); } function LiveMode({ onCall, role, autodialer, setAutodialer }) { const Queue = window.PageQueue; const Redial = window.RedialQueuePanel; const Pacing = window.PacingBadge; const twStatus = useTwilioStatus(); // Hot-key R = pull due retries into autodial useEffect(() => { const onKey = (e) => { if (document.activeElement && /input|textarea|select/i.test(document.activeElement.tagName)) return; if ((e.key === "r" || e.key === "R") && !e.metaKey && !e.ctrlKey && !e.altKey) { if (window.pullDueRetries) { e.preventDefault(); window.pullDueRetries(); } } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); return (
Live floor Start the autodialer · press R to pull due retries
{Pacing && (() => { const P = Pacing; return

; })()} {twStatus === "unconfigured" && }

{/* Two-col: queue on the left, redial queue panel on the right */}
{Queue ? :
Loading queue…
}
{Redial ? : null}
); } function PipelineMode({ role }) { const P = window.PagePipeline; return P ?

:

Loading pipeline…
; } function HistoryMode({ role }) { const P = window.PageCalls; return P ?

:

Loading call history…
; } function DealsMode({ role }) { const Form = window.DealWriteForm; const Recent = window.RecentDeals; const meIdent = (typeof window !== "undefined" && window.me && window.me()) || null; const me = (meIdent?.rep_id && AppData.REPS?.find(r => r.id === meIdent.rep_id)) || (AppData.REPS && AppData.REPS[0]); const [refreshKey, setRefreshKey] = useState(0); if (!Form || !Recent) { return
Loading deal-write form…
; } return (
setRefreshKey(k => k + 1)}/>
); } // ──────────────────────────────────────────────────────────────────────── // Follow-ups mode — three sections: // 1. Templates — list of follow-up text templates. Owner edits any; // manager edits only templates owned by their downline; rep is // read-only. // 2. My workflows — workflow assignments for the current rep. Toggle // on/off. Manager+owner see the per-rep matrix instead. // 3. Recent runs — scheduled / sent / pending_creds runs. // ──────────────────────────────────────────────────────────────────────── const TRIGGER_LABEL = { after_call: "after call", after_appt: "after appt", after_app: "after app submitted", after_voicemail: "after voicemail", manual: "manual fire only", }; function FollowupsMode({ role }) { const me = (typeof window !== "undefined" && window.me && window.me()) || null; const isOwner = role === "owner"; const isManager = role === "manager"; const isRep = role === "rep"; // Re-render on mutation events so toggles + saves reflect immediately. const [, force] = useState(0); useEffect(() => { const h = () => force(n => n + 1); window.addEventListener("data:mutated", h); window.addEventListener("data:hydrated", h); return () => { window.removeEventListener("data:mutated", h); window.removeEventListener("data:hydrated", h); }; }, []); const reps = window.AppData?.REPS || []; const templates = window.AppData?.FOLLOWUP_TEMPLATES || []; const workflows = window.AppData?.WORKFLOWS || []; const assigns = window.AppData?.WORKFLOW_ASSIGNMENTS || []; const runs = window.AppData?.FOLLOWUP_RUNS || []; // Reps don't author follow-up systems — they execute them. Show an action // queue (recent calls + active deals → 1-click trigger) plus today's // queued runs. Managers/owners keep the template + workflow authoring UI. if (isRep) { return ; } // Manager scope: filter templates to those owned by downline reps. const downlineIds = (window.scopeRepIds && window.scopeRepIds()) || null; const visibleTemplates = isManager && downlineIds ? templates.filter(t => downlineIds.includes(t.ownerRepId)) : templates; const visibleAssigns = isManager && downlineIds ? assigns.filter(a => downlineIds.includes(a.repId)) : assigns; return (
); } // ──────────────────────────────────────────────────────────────────────── // Rep action queue — replaces the templates editor for reps. // // Design: reps execute, they don't build. The page shows three things: // 1. Calls that just ended → "Send recap" / "Voicemail dropoff" / "Confirm appt" // 2. Active deals owned by me → stage-aware next action ("Day-2 nudge" on App In, etc.) // 3. Already-queued automations today → read-only proof that things are firing // // Every action chip calls AppData.mutate.followupDispatch(templateId, phone, leadId, repId) // which inserts into FOLLOWUP_RUNS and broadcasts data:mutated, so the // "Today's queued" panel updates instantly. // ──────────────────────────────────────────────────────────────────────── function RepActionQueue({ templates, runs, workflows, assignments, me }) { const repId = me?.rep_id; const RECORDINGS = window.AppData?.RECORDINGS || []; const PIPELINE = window.AppData?.PIPELINE || []; // Filter to me. RECORDINGS often have no repId (demo seed), so fall back to "show all". const myCalls = repId ? (RECORDINGS.filter(r => r.repId === repId).length > 0 ? RECORDINGS.filter(r => r.repId === repId) : RECORDINGS.slice(0, 5)) : RECORDINGS.slice(0, 5); const myPipe = repId ? PIPELINE.filter(p => p.owner === repId) : PIPELINE; const myRuns = (repId ? runs.filter(r => !r.repId || r.repId === repId) : runs).slice(0, 8); // Active workflow assignments for me — read-only count, no toggle. const myAssigns = (assignments || []).filter(a => a.repId === repId && a.enabled); const myWorkflowCount = workflows.filter(w => myAssigns.some(a => a.workflowId === w.id)).length; // Match templates to a triggering event, plus any "manual" templates as universal options. const active = templates.filter(t => t.active !== false); const tmplFor = (event) => [ ...active.filter(t => t.triggerEvent === event), ...active.filter(t => t.triggerEvent === "manual"), ]; const stageMap = { // Suggested template event per pipeline stage "New": "after_voicemail", "Contacted": "after_call", "Quoted": "after_appt", "App In": "after_call", "Issued": "after_app", }; const fire = async (template, lead) => { if (!template) return; const phone = lead.phone || "+15125550100"; // demo fallback const leadKey = lead.id || lead.leadId || lead.lead; await AppData.mutate.followupDispatch(template.id, phone, leadKey, repId); window.toast && window.toast(`${template.name} queued for ${lead.lead || lead.name}`, "success"); }; return (
{/* Just-ended calls — fire post-call automations */}

Just-ended calls

{myCalls.length} recent Click to fire the automation — no manager approval needed
{myCalls.length === 0 && (
No recent calls.
)} {myCalls.map(call => { const callTmpls = tmplFor("after_call"); const vmTmpls = tmplFor("after_voicemail"); const apptTmpls = tmplFor("after_appt"); return (
{call.lead}
{call.date} · score = 80 ? "var(--accent-money)" : call.score >= 60 ? "var(--state-warning)" : "var(--state-danger)" }}>{call.score} {call.flags?.soa && call.flags.soa !== "n/a" && <> · SOA {call.flags.soa}}
{call.ai &&
{call.ai}
}
{callTmpls[0] && ( )} {vmTmpls[0] && vmTmpls[0].id !== callTmpls[0]?.id && ( )} {apptTmpls[0] && apptTmpls[0].id !== callTmpls[0]?.id && ( )}
); })}
{/* Active deals — stage-aware next action */}

Active deals · suggested next action

{myPipe.length}
{myPipe.length === 0 && (
No active deals — go grab one from the queue.
)} {myPipe.slice(0, 8).map(p => { const event = stageMap[p.stage] || "after_call"; const matches = tmplFor(event); const primary = matches[0]; const secondary = matches[1] && matches[1].id !== primary?.id ? matches[1] : null; return (
{p.lead}
{p.product} · {p.state} · {p.ap ? `$${p.ap.toLocaleString()}` : "—"}
{p.stage} next: {p.next}
{primary && ( )} {secondary && ( )} {!primary && ( no template wired )}
); })}
{/* Today's queued runs — read-only */}

Queued for me today

{myRuns.length} {myWorkflowCount} workflow{myWorkflowCount === 1 ? "" : "s"} running for you
{myRuns.length === 0 && (
Nothing queued yet. Fire one above and it'll show up here.
)} {myRuns.map(r => { const t = templates.find(x => x.id === r.templateId); const when = r.scheduledFor ? new Date(r.scheduledFor) : null; const whenLbl = when ? `${when.getMonth()+1}/${when.getDate()} ${when.getHours()}:${String(when.getMinutes()).padStart(2,"0")}` : "—"; return (
{t?.name || r.templateId} · {r.recipient}
{r.channel}
{whenLbl}
{r.status}
); })}
); } function TemplatesSection({ templates, reps, me, canEdit, isOwner, downlineIds }) { const [editing, setEditing] = useState(null); // null = list, {} = new, {id,...} = edit if (editing !== null) { return setEditing(null)} />; } return (

Follow-up templates

{templates.length} {canEdit && ( )}
{templates.length === 0 && (
No templates yet. {canEdit ? "Add one above." : "Ask your manager to set some up."}
)} {templates.map(t => { const owner = reps.find(r => r.id === t.ownerRepId); const editable = canEdit && (isOwner || (downlineIds || []).includes(t.ownerRepId)); return (
{t.name} {t.channel} · {TRIGGER_LABEL[t.triggerEvent] || t.triggerEvent} · {t.delayMinutes}m {!t.active && inactive}
{t.body}
{owner && (
owner: {owner.name} · scope: {t.scope}
)}
{editable && ( )}
); })}
); } function TemplateEditor({ initial, reps, me, isOwner, downlineIds, onClose }) { const isNew = !initial.id; const [t, setT] = useState({ id: initial.id || null, name: initial.name || "", body: initial.body || "", channel: initial.channel || "sms", delayMinutes: initial.delayMinutes ?? 30, triggerEvent: initial.triggerEvent || "after_call", scope: initial.scope || "rep", active: initial.active !== false, ownerRepId: initial.ownerRepId || (me && me.rep_id) || (reps[0] && reps[0].id), }); const set = (k, v) => setT(x => ({ ...x, [k]: v })); const ownableReps = isOwner ? reps : reps.filter(r => (downlineIds || []).includes(r.id)); const save = async () => { if (!t.name.trim() || !t.body.trim()) return; try { await window.AppData.mutate.followupTemplateSave({ ...t }); onClose(); } catch {} }; const remove = async () => { if (!t.id) return; if (!confirm(`Delete template "${t.name}"?`)) return; try { await window.AppData.mutate.followupTemplateDelete(t.id); onClose(); } catch {} }; return (

{isNew ? "New template" : "Edit template"}

set("name", e.target.value)} placeholder="Post-call recap" /> set("delayMinutes", parseInt(e.target.value || "0", 10))}/>