/* Calendar, Tasks, Content, Knowledge, Automation, Admin */ const { useState: useStateMisc } = React; /* ─────────────────────────── Calendar ─────────────────────────── */ function PageCalendar({ onNavigate }) { const week = ["2026-05-18", "2026-05-19", "2026-05-20", "2026-05-21", "2026-05-22", "2026-05-23", "2026-05-24"]; const hours = Array.from({ length: 11 }).map((_, i) => 8 + i); /* 8 → 18 */ const [events, setEvents] = useStateMisc(window.CALENDAR_EVENTS); const [active, setActive] = useStateMisc(null); const [newOpen, setNewOpen] = useStateMisc(false); const [newSlot, setNewSlot] = useStateMisc(null); /* { day, start } */ const [dragId, setDragId] = useStateMisc(null); const [dropTarget, setDropTarget] = useStateMisc(null); /* { day, hour } */ const [resizing, setResizing] = useStateMisc(null); /* { id, edge, startY, origStart, origEnd } */ const resizingRef = React.useRef(null); const openNew = (slot) => { setNewSlot(slot || null); setNewOpen(true); }; /* Resize an event by dragging its top or bottom border. Snaps to 15-min increments. */ React.useEffect(() => { if (!resizing) return; const SNAP = 15; /* minutes */ const MIN_DUR = 15; const CAL_START = 8 * 60; const CAL_END = 19 * 60; const toMin = (s) => { const [h, m] = s.split(":").map(Number); return h * 60 + m; }; const toStr = (mins) => `${String(Math.floor(mins / 60)).padStart(2, "0")}:${String(mins % 60).padStart(2, "0")}`; const onMove = (e) => { const dy = e.clientY - resizing.startY; const dMin = Math.round(dy / SNAP) * SNAP; /* 60px per hour → 1px = 1min */ setEvents(prev => prev.map(ev => { if (ev.id !== resizing.id) return ev; let startMin = toMin(resizing.origStart); let endMin = toMin(resizing.origEnd); if (resizing.edge === "top") { startMin = Math.max(CAL_START, Math.min(startMin + dMin, endMin - MIN_DUR)); } else { endMin = Math.min(CAL_END, Math.max(endMin + dMin, startMin + MIN_DUR)); } return { ...ev, start: toStr(startMin), end: toStr(endMin) }; })); }; const onUp = () => { const wasResizing = !!resizingRef.current; resizingRef.current = null; setResizing(null); if (wasResizing) { /* suppress the synthetic click that follows mouseup on the underlying cell */ const swallow = (e) => { e.stopPropagation(); e.preventDefault(); }; document.addEventListener("click", swallow, { capture: true, once: true }); } }; document.addEventListener("mousemove", onMove); document.addEventListener("mouseup", onUp); return () => { document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); }; }, [resizing]); /* Move event to a new {day, hour} slot, preserving duration. */ const rescheduleEvent = (evId, day, hour) => { setEvents(prev => prev.map(e => { if (e.id !== evId) return e; const [sh, sm] = e.start.split(":").map(Number); const [eh, em] = e.end.split(":").map(Number); const durMin = (eh * 60 + em) - (sh * 60 + sm); const newStart = `${String(hour).padStart(2, "0")}:00`; const endTotal = hour * 60 + durMin; const newEnd = `${String(Math.floor(endTotal / 60)).padStart(2, "0")}:${String(endTotal % 60).padStart(2, "0")}`; return { ...e, day, start: newStart, end: newEnd }; })); }; return ( <> } />
{week.map(d => { const date = new Date(d); const isToday = d === "2026-05-22"; return (
{date.toLocaleDateString("en-GB", { weekday: "short" })}
{date.getDate()}
); })} {hours.map(h => (
{String(h).padStart(2, "0")}:00
{week.map(d => { const evs = events.filter(e => e.day === d && parseInt(e.start) === h); const isTarget = dropTarget && dropTarget.day === d && dropTarget.hour === h; /* Duration of the currently-dragged event, in minutes — drives the dashed preview height. */ const draggedEv = dragId ? events.find(e => e.id === dragId) : null; let draggedDurMin = 60; if (draggedEv) { const [dsh, dsm] = draggedEv.start.split(":").map(Number); const [deh, dem] = draggedEv.end.split(":").map(Number); draggedDurMin = (deh * 60 + dem) - (dsh * 60 + dsm); } /* Don't render the preview past 19:00 — cap to remaining minutes in the day. */ const calEndMin = 19 * 60; const previewMin = Math.min(draggedDurMin, calEndMin - h * 60); const previewEndH = Math.floor((h * 60 + previewMin) / 60); const previewEndM = (h * 60 + previewMin) % 60; const previewEndStr = `${String(previewEndH).padStart(2, "0")}:${String(previewEndM).padStart(2, "0")}`; return (
{ if (e.target.closest("button")) return; openNew({ day: d, start: `${String(h).padStart(2, "0")}:00` }); }} onDragOver={(e) => { if (!dragId) return; e.preventDefault(); if (!isTarget) setDropTarget({ day: d, hour: h }); }} onDragLeave={() => { if (isTarget) setDropTarget(null); }} onDrop={(e) => { e.preventDefault(); if (dragId) { rescheduleEvent(dragId, d, h); setDragId(null); setDropTarget(null); } }} style={{ borderLeft: "1px solid var(--line)", borderBottom: "1px solid var(--line)", height: 60, position: "relative", padding: 3, cursor: "pointer", /* Elevate the active drop target so its (possibly overflowing) duration preview paints above neighbouring cells, instead of being clipped behind them. */ zIndex: isTarget && dragId ? 20 : 1, /* When something is being dragged over this cell, the dashed preview below renders the outline at the exact event duration. Otherwise (hover only) fall back to a light tint. */ background: isTarget && !dragId ? "color-mix(in oklch, var(--accent) 14%, transparent)" : "transparent", transition: "background 120ms", }} onMouseEnter={(e) => { if (!isTarget) e.currentTarget.style.background = "color-mix(in oklch, var(--accent) 4%, transparent)"; }} onMouseLeave={(e) => { if (!isTarget) e.currentTarget.style.background = "transparent"; }} > {/* Drop preview — sized to the dragged meeting's duration, so the user can see exactly where (and how long) it will land. */} {isTarget && dragId && (
{String(h).padStart(2, "0")}:00 – {previewEndStr}
{previewMin >= 45 && (
{previewMin} min
)}
)} {evs.map(ev => { const startMin = parseInt(ev.start.split(":")[1]); const endH = parseInt(ev.end.split(":")[0]); const endM = parseInt(ev.end.split(":")[1]); const durMin = (endH * 60 + endM) - (h * 60 + startMin); const company = getCompany(ev.companyId); const tone = ev.type === "account_review" ? "violet" : ev.type === "internal" ? "neutral" : "blue"; const colors = { violet: { bg: "var(--accent-soft)", bd: "var(--accent)", fg: "var(--accent-ink)" }, blue: { bg: "var(--blue-soft)", bd: "var(--blue)", fg: "var(--blue-ink)" }, neutral: { bg: "var(--inset)", bd: "var(--ink-4)", fg: "var(--ink-2)" } }; const c = colors[tone]; const isResizingThis = resizing && resizing.id === ev.id; const beginResize = (edge) => (e) => { e.preventDefault(); e.stopPropagation(); const r = { id: ev.id, edge, startY: e.clientY, origStart: ev.start, origEnd: ev.end }; resizingRef.current = r; setResizing(r); }; return ( ); })}
); })} ))}
setActive(null)} onOpenAccount={(id) => { setActive(null); onNavigate("account-detail", { companyId: id }); }} /> { setNewOpen(false); setNewSlot(null); }} onCreate={(ev) => { setEvents(prev => [...prev, ev]); setNewOpen(false); setNewSlot(null); }} /> ); } function NewEventModal({ open, slot, onClose, onCreate }) { const [title, setTitle] = useStateMisc(""); const [day, setDay] = useStateMisc("2026-05-22"); const [start, setStart] = useStateMisc("10:00"); const [duration, setDuration] = useStateMisc(30); /* minutes */ const [type, setType] = useStateMisc("meeting"); const [location, setLocation] = useStateMisc("Google Meet"); const [companyId, setCompanyId] = useStateMisc(""); const [attendees, setAttendees] = useStateMisc([CURRENT_USER.id]); const [desc, setDesc] = useStateMisc(""); React.useEffect(() => { if (!open) return; setTitle(""); setDay(slot?.day || "2026-05-22"); setStart(slot?.start || "10:00"); setDuration(30); setType("meeting"); setLocation("Google Meet"); setCompanyId(""); setAttendees([CURRENT_USER.id]); setDesc(""); }, [open, slot]); const computeEnd = (s, mins) => { const [h, m] = s.split(":").map(Number); const total = h * 60 + m + mins; return `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(total % 60).padStart(2, "0")}`; }; const handle = () => { if (!title.trim()) return; onCreate({ id: "ev-" + Math.random().toString(36).slice(2, 8), title, type, day, start, end: computeEnd(start, duration), location, companyId: companyId || null, attendees, description: desc, }); }; const toggleAttendee = (id) => { setAttendees(prev => prev.includes(id) ? prev.filter(a => a !== id) : [...prev, id]); }; const TYPES = [ { id: "meeting", label: "External meeting", tone: "blue", icon: "users" }, { id: "account_review", label: "Account review", tone: "violet", icon: "target" }, { id: "internal", label: "Internal", tone: "neutral", icon: "users-2" }, ]; /* candidate attendees: users + recent contacts */ const userOpts = window.USERS; const contactOpts = window.CONTACTS.slice(0, 6); return ( } >
setTitle(e.target.value)} placeholder="e.g. Pricing walkthrough with Mango" />
{TYPES.map(t => { const selected = type === t.id; const c = ({ violet: "var(--accent)", blue: "var(--blue)", neutral: "var(--ink-3)" })[t.tone]; return ( ); })}
setDay(e.target.value)} /> setStart(e.target.value)} />
{[15, 30, 45, 60, 90].map(m => ( ))} ends {computeEnd(start, duration)}
setLocation(e.target.value)} options={[ { value: "Google Meet", label: "Google Meet" }, { value: "Zoom", label: "Zoom" }, { value: "Microsoft Teams", label: "Microsoft Teams" }, { value: "Phone", label: "Phone call" }, { value: "Onsite", label: "Onsite" }, { value: "Internal", label: "Internal" }, ]} /> setCompanyId(e.target.value)} options={[{ value: "", label: "—" }, ...window.COMPANIES.map(c => ({ value: c.id, label: c.name }))]} />
{[...userOpts, ...contactOpts.filter(c => companyId ? c.companyId === companyId : true)].map(p => { const id = p.id; const name = p.name || `${p.firstName} ${p.lastName}`; const src = p.profilePictureUrl; const isUser = !!p.email && !p.headline; const selected = attendees.includes(id); return ( ); })}
setDesc(e.target.value)} placeholder="Agenda, context, links…" />
AI will prep talking points and a draft agenda 30 min before the event.
); } function EventDetailModal({ ev, onClose, onOpenAccount }) { if (!ev) return null; const company = getCompany(ev.companyId); const attendees = (ev.attendees || []).map(id => getUser(id) || (window.CONTACTS.find(c => c.id === id) && { id, name: `${window.CONTACTS.find(c => c.id === id).firstName} ${window.CONTACTS.find(c => c.id === id).lastName}`, src: window.CONTACTS.find(c => c.id === id).profilePictureUrl, })).filter(Boolean); return ( {company && } }>
{ev.location}} /> {company && {company.name}} />} {attendees.map((a, i) =>
0 ? -6 : 0 }}>
)}
} /> {ev.type.replace(/_/g, " ")}} />
AI prep: 3 talking points + draft agenda ready 30 minutes before start.
); } function DetailRow({ k, v }) { return (
{k}
{v}
); } /* ─────────────────────────── Tasks ─────────────────────────── */ function PageTasks() { const [tasks, setTasks] = useStateMisc(window.TASKS); const [filter, setFilter] = useStateMisc("open"); const [newOpen, setNewOpen] = useStateMisc(false); const [editing, setEditing] = useStateMisc(null); const filtered = tasks.filter(t => { if (filter === "open") return t.status !== "done" && t.status !== "cancelled"; if (filter === "done") return t.status === "done"; if (filter === "mine") return t.assignedUserId === CURRENT_USER.id; return true; }); const toggle = (id) => setTasks(prev => prev.map(t => { if (t.id !== id) return t; return { ...t, status: t.status === "done" ? "todo" : "done" }; })); const saveEdits = (patch) => setTasks(prev => prev.map(t => t.id === editing.id ? { ...t, ...patch } : t)); const deleteTask = () => { setTasks(prev => prev.filter(t => t.id !== editing.id)); setEditing(null); }; return ( <> } tabs={<> setFilter("open")} badge={tasks.filter(t => t.status !== "done").length}>Open setFilter("mine")} badge={tasks.filter(t => t.assignedUserId === CURRENT_USER.id).length}>Mine setFilter("done")} badge={tasks.filter(t => t.status === "done").length}>Done setFilter("all")}>All } />
setNewOpen(false)} onSubmit={(t) => { setTasks(prev => [t, ...prev]); setNewOpen(false); }} /> setEditing(null)} onSubmit={(patch) => { saveEdits(patch); setEditing(null); }} onDelete={deleteTask} /> ); } function TaskModal({ open, onClose, onSubmit, onDelete, editing }) { const isEdit = !!editing; const [title, setTitle] = useStateMisc(""); const [description, setDescription] = useStateMisc(""); const [priority, setPriority] = useStateMisc("medium"); const [companyIds, setCompanyIds] = useStateMisc([]); const [contactIds, setContactIds] = useStateMisc([]); const [ownerId, setOwnerId] = useStateMisc(CURRENT_USER.id); const [status, setStatus] = useStateMisc("todo"); const [due, setDue] = useStateMisc("2026-05-25"); const [confirmDel, setConfirmDel] = useStateMisc(false); React.useEffect(() => { if (!open) return; if (isEdit) { setTitle(editing.title || ""); setDescription(editing.description || ""); setPriority(editing.priority || "medium"); /* Read either the new arrays or the legacy single id */ setCompanyIds(editing.companyIds || (editing.companyId ? [editing.companyId] : [])); setContactIds(editing.contactIds || (editing.contactId ? [editing.contactId] : [])); setOwnerId(editing.assignedUserId || CURRENT_USER.id); setStatus(editing.status || "todo"); setDue((editing.dueAt || "2026-05-25T09:00:00.000Z").slice(0, 10)); } else { setTitle(""); setDescription(""); setPriority("medium"); setCompanyIds([]); setContactIds([]); setOwnerId(CURRENT_USER.id); setStatus("todo"); setDue("2026-05-25"); } setConfirmDel(false); }, [open, isEdit, editing]); const handle = () => { if (!title.trim()) return; const payload = { title, description, priority, companyIds, contactIds, /* Keep legacy single-id fields populated with the first selection so existing UI that reads task.companyId / task.contactId keeps working transparently. */ companyId: companyIds[0] || null, contactId: contactIds[0] || null, assignedUserId: ownerId, status, dueAt: due + "T09:00:00.000Z", }; if (isEdit) { onSubmit(payload); } else { onSubmit({ id: "task-" + Math.random().toString(36).slice(2, 8), opportunityId: null, createdAt: new Date().toISOString(), ...payload, }); } }; /* Contacts list filtered to selected companies (or all if no company picked) */ const contactPool = window.CONTACTS.filter(c => companyIds.length === 0 || companyIds.includes(c.companyId)); return ( Delete this task? ) : ( <> ) ) : ( <> ) } >
setTitle(e.target.value)} placeholder="What needs to happen?" /> setDescription(e.target.value)} placeholder="Add context, links or instructions…" /> {/* Owner — single user */} setPriority(e.target.value)} options={[ { value: "high", label: "High" }, { value: "medium", label: "Medium" }, { value: "low", label: "Low" }, ]} /> {/* Accounts — multi */} { setCompanyIds(ids); /* Drop any selected contact that no longer matches the company filter */ setContactIds(prev => prev.filter(cid => { const c = window.CONTACTS.find(x => x.id === cid); return !c || ids.length === 0 || ids.includes(c.companyId); })); }} options={window.COMPANIES} getKey={(c) => c.id} getLabel={(c) => c.name} getSubLabel={(c) => c.industry} renderAvatar={(c) => } placeholder="Add an account…" /> {/* Contacts — multi (filtered by selected companies) */} c.id} getLabel={(c) => `${c.firstName} ${c.lastName}`} getSubLabel={(c) => `${c.position}${c.companyName ? " · " + c.companyName : ""}`} renderAvatar={(c) => } placeholder={companyIds.length ? "Add a contact at the selected account(s)…" : "Add a contact…"} emptyHint={companyIds.length && contactPool.length === 0 ? "No contacts at the selected account(s)." : null} /> setStatus(e.target.value)} options={[ { value: "todo", label: "To do" }, { value: "in_progress", label: "In progress" }, { value: "blocked", label: "Blocked" }, { value: "done", label: "Done" }, { value: "cancelled", label: "Cancelled" }, ]} /> setDue(e.target.value)} />
); } /* Owner picker — single user, button + popover with avatars */ function UserPicker({ value, onChange }) { const [open, setOpen] = useStateMisc(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const onDown = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDown); return () => document.removeEventListener("mousedown", onDown); }, [open]); const current = window.USERS.find(u => u.id === value); return (
{open && (
{window.USERS.map(u => ( ))}
)}
); } /* Generic multi-tag picker — selected items render as chips with × buttons, adding a chip opens a search popover. */ function MultiTagPicker({ ids, onChange, options, getKey, getLabel, getSubLabel, renderAvatar, placeholder, emptyHint }) { const [open, setOpen] = useStateMisc(false); const [q, setQ] = useStateMisc(""); const ref = React.useRef(null); const inputRef = React.useRef(null); React.useEffect(() => { if (!open) return; const onDown = (e) => { if (!ref.current?.contains(e.target)) { setOpen(false); setQ(""); } }; document.addEventListener("mousedown", onDown); return () => document.removeEventListener("mousedown", onDown); }, [open]); const selected = ids.map(id => options.find(o => getKey(o) === id)).filter(Boolean); const filtered = options.filter(o => { if (ids.includes(getKey(o))) return false; if (!q) return true; return (getLabel(o) + " " + (getSubLabel(o) || "")).toLowerCase().includes(q.toLowerCase()); }).slice(0, 8); const remove = (id) => onChange(ids.filter(x => x !== id)); const add = (id) => { onChange([...ids, id]); setQ(""); inputRef.current?.focus(); }; return (
{ setOpen(true); inputRef.current?.focus(); }} style={{ display: "flex", flexWrap: "wrap", gap: 4, padding: 5, minHeight: 36, background: "var(--surface)", border: `1px solid ${open ? "var(--accent)" : "var(--line-strong)"}`, boxShadow: open ? "0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent)" : "none", borderRadius: 7, cursor: "text", alignItems: "center", }} > {selected.map(o => ( {renderAvatar?.(o)} {getLabel(o)} ))} { setQ(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} placeholder={selected.length === 0 ? placeholder : ""} style={{ flex: 1, minWidth: 120, padding: "4px 6px", border: "none", outline: "none", background: "transparent", fontSize: 13, color: "var(--ink)", }} onKeyDown={(e) => { if (e.key === "Backspace" && !q && selected.length > 0) { remove(getKey(selected[selected.length - 1])); } else if (e.key === "Escape") { setOpen(false); inputRef.current?.blur(); } else if (e.key === "Enter" && filtered[0]) { e.preventDefault(); add(getKey(filtered[0])); } }} />
{open && (
{emptyHint && filtered.length === 0 ? (
{emptyHint}
) : filtered.length === 0 ? (
{q ? "No matches." : "All added."}
) : filtered.map(o => ( ))}
)}
); } function TasksList({ tasks, onToggle = () => {}, onEdit }) { if (tasks.length === 0) return ; return ( {tasks.map((t, i) => { const company = getCompany(t.companyId); const contact = getContact(t.contactId); const user = getUser(t.assignedUserId); const done = t.status === "done"; const overdue = !done && new Date(t.dueAt) < new Date("2026-05-21T00:00:00Z"); return (
onEdit?.(t)} style={{ display: "grid", gridTemplateColumns: "30px 1fr auto auto auto auto", padding: "14px 18px", gap: 14, alignItems: "center", borderBottom: i < tasks.length - 1 ? "1px solid var(--line)" : "none", background: done ? "var(--surface-2)" : "var(--surface)", opacity: done ? 0.65 : 1, cursor: onEdit ? "pointer" : "default", transition: "background 120ms", }} onMouseEnter={(e) => { if (onEdit) e.currentTarget.style.background = done ? "var(--inset)" : "var(--surface-2)"; }} onMouseLeave={(e) => { if (onEdit) e.currentTarget.style.background = done ? "var(--surface-2)" : "var(--surface)"; }} >
{t.title}
{t.description}
{company &&
{company.name}
} {!company &&
} {t.priority}
{overdue && "OVERDUE · "}{fmtDate(t.dueAt, { day: "2-digit", month: "short" })}
); })} ); } /* ─────────────────────────── Content ─────────────────────────── */ function PageContent() { return ( <> } />
{window.CONTENT.map(c => (
{c.type.replace(/_/g, " ")}
{c.title}
{c.description}
{c.approved ? Approved : Pending review} {c.language.toUpperCase()}
))}
); } /* ─────────────────────────── Knowledge ─────────────────────────── */ function PageKnowledge() { const product = window.CONTENT && { differentiators: ["Company-first CRM model", "Unified contact conversation workspace", "AI next-best actions", "LinkedIn relationship intelligence"], pitch: [ "Replace fragmented sales tools with one ABM operating system.", "Centralize every stakeholder conversation and signal.", "Use AI to prioritize accounts and personalize outreach.", ], objections: [ { q: "We already use a CRM", a: "BusinessTeam complements CRM workflows with ABM execution, relationship intelligence and multi-channel workspace built around target accounts." }, { q: "Our team already uses LinkedIn manually", a: "BusinessTeam adds structure, visibility, sync, prioritization and team coordination to LinkedIn prospecting." }, ], }; return ( <> } />
Positioning

BusinessTeam helps revenue teams identify target accounts, map buying committees, engage stakeholders with AI-personalized outreach, and orchestrate multi-channel ABM execution from one collaborative workspace.

Differentiators
    {product.differentiators.map((d, i) =>
  • {d}
    • )}
Pitch elements
{product.pitch.map((p, i) => (
{String(i+1).padStart(2,"0")} {p}
))}
Objection handling
{product.objections.map((o, i) => (
"{o.q}"
→ {o.a}
))}
); } /* ─────────────────────────── Automation ─────────────────────────── */ function PageAutomation() { const [dryRun, setDryRun] = useStateMisc(true); const [pace, setPace] = useStateMisc("careful"); return ( <> } />
{/* Campaign builder */} Draft} />
{["Owner", "C-level", "VP", "Director", "Head"].map(s => {s})}
LinkedIn
40 / day
{[ { id: "fast", label: "Fast · 1–2 min" }, { id: "careful", label: "Careful · 2–5 min" }, { id: "stealth", label: "Stealth · 5–10 min" }, ].map(p => ( ))}
{/* Preview */} 3 of 40} />
{window.CONTACTS.filter(c => ["c_level", "vp", "director", "head"].includes(c.seniority) && c.linkedinStatus !== "accepted").slice(0, 5).map(c => (
{c.firstName} {c.lastName}
{c.headline}
{SENIORITY_LABEL[c.seniority]}
))}
AI-personalized invite (preview)
"Hi {"{firstName}"}, came across your work at {"{companyName}"} — I lead an ABM platform helping {"{department}"} leaders coordinate execution across stakeholders. Would love to swap notes."
{/* Recent sync runs */} Refresh} /> {[ { id: "sync-1", type: "LinkedIn relations sync", fetched: 823, synced: 137, status: "completed_with_warning", at: "2026-05-20T04:08Z", note: "Large response — frontend should prefer summarized sync." }, { id: "sync-2", type: "Sent invitations sync", fetched: 380, synced: 252, status: "completed", at: "2026-05-20T06:45Z", note: "Optimized with preload." }, { id: "sync-3", type: "Manager+Head invite send", fetched: 0, synced: 28, status: "completed", at: "2026-05-19T12:30Z", note: "Dry run successful." }, ].map(s => (
{s.type}
{s.note}
{s.fetched} fetched
{s.synced} synced
{fmtRelative(s.at)}
))}
); } function ConfigRow({ label, hint, children }) { return (
{label}
{hint &&
{hint}
}
{children}
); } function SafetyToggle({ label, defaultOn }) { const [on, setOn] = useStateMisc(defaultOn); return ( ); } /* ─────────────────────────── Admin ─────────────────────────── */ function PageAdmin() { const [section, setSection] = useStateMisc("organization"); return (
{[ ["organization", "Organization", "building"], ["pitch", "Company Pitch", "presentation"], ["icp", "ABM setup", "target"], ["products", "Products catalog", "briefcase"], ["team", "Team members", "users"], ["ai", "AI agents", "sparkles"], ["competitors", "Competitors", "shield"], ["notifications","Notifications", "bell"], ].map(([id, label, icon]) => ( ))}
{section === "organization" && } {section === "pitch" && } {section === "icp" && } {section === "products" && } {section === "team" && } {section === "ai" && } {section === "competitors" && } {section === "notifications" && }
); } function AdminOrg() { return (
{/* Identity */}

Brand identity

How your organization shows up across the platform and outreach.
{/* Website + thumbnail */}
Website
{/* Website + thumbnail */}
Website
 {/* Contact */}

Contact details

Used in email signatures and outbound footers.
Headquarters
 {/* Web & social */}

Web & social

Where prospects can find you. Verified accounts boost outreach response rates.
 {/* Brand colors — separate trailing block */}

Brand colors

Used by AI to match outreach assets and email templates.
); } /* Contact emails block — phone (single) + dynamic list of emails with a per-row role label + "Add email" text button. */ function ContactEmailsBlock() { const [phone, setPhone] = useStateMisc("+34 932 000 100"); const [emails, setEmails] = useStateMisc([ { id: "e1", label: "General", value: "hello@businessteam.example" }, { id: "e2", label: "Support", value: "support@businessteam.example" }, { id: "e3", label: "Billing", value: "billing@businessteam.example" }, ]); const ROLE_OPTIONS = ["General", "Support", "Billing", "Sales", "Press", "Privacy", "Careers", "Partnerships", "Other"]; const update = (id, key, val) => setEmails(prev => prev.map(e => e.id === id ? { ...e, [key]: val } : e)); const remove = (id) => setEmails(prev => prev.filter(e => e.id !== id)); const addEmail = () => { const used = new Set(emails.map(e => e.label)); const nextLabel = ROLE_OPTIONS.find(r => !used.has(r)) || "Other"; setEmails(prev => [...prev, { id: "e-" + Math.random().toString(36).slice(2, 6), label: nextLabel, value: "" }]); }; return (
Emails {emails.length}
{emails.map(em => (
update(em.id, "value", e.target.value)} placeholder="name@company.com" style={{ padding: "8px 10px", fontSize: 13, background: "var(--surface)", border: "1px solid var(--line-strong)", borderRadius: 7, color: "var(--ink)", outline: "none", }} />
))}
); } /* Address list — primary HQ + optional additional offices + "Add location" CTA */ function AddressList() { const [addrs, setAddrs] = useStateMisc([ { id: "hq", label: "Headquarters", street: "Carrer de la Diputació, 246", city: "Barcelona", postal: "08007", country: "Spain", primary: true }, ]); const addLocation = () => { const id = "addr-" + Math.random().toString(36).slice(2, 6); setAddrs(prev => [...prev, { id, label: "Office", street: "", city: "", postal: "", country: "", primary: false }]); }; const update = (id, key, val) => setAddrs(prev => prev.map(a => a.id === id ? { ...a, [key]: val } : a)); const remove = (id) => setAddrs(prev => prev.filter(a => a.id !== id)); const setPrimary = (id) => setAddrs(prev => prev.map(a => ({ ...a, primary: a.id === id }))); return (
{addrs.map(a => (
update(a.id, "label", e.target.value)} placeholder="Label (e.g. NYC office)" style={{ flex: 1, padding: "4px 6px", fontSize: 12.5, fontWeight: 600, background: "transparent", border: "1px solid transparent", borderRadius: 5, color: "var(--ink)", outline: "none", }} onFocus={(e) => { e.currentTarget.style.background = "var(--surface-2)"; e.currentTarget.style.borderColor = "var(--line-strong)"; }} onBlur={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "transparent"; }} /> {a.primary ? Primary : } {!a.primary && remove(a.id)} />}
update(a.id, "street", v)} /> update(a.id, "city", v)} /> update(a.id, "postal", v)} /> update(a.id, "country", v)} />
))}
); } /* Website preview — URL field on the left, screenshot-style thumbnail card on the right */ function WebsitePreview() { const [url, setUrl] = useStateMisc("https://businessteam.example"); const [thumbUrl, setThumbUrl] = useStateMisc(null); const fileRef = React.useRef(null); const onFile = (e) => { const f = e.target.files?.[0]; if (!f) return; const reader = new FileReader(); reader.onload = () => setThumbUrl(reader.result); reader.readAsDataURL(f); e.target.value = ""; }; const cleanHost = url.replace(/^https?:\/\//, "").replace(/\/$/, ""); return (
setUrl(e.target.value)} placeholder="https://your-site.com" style={{ flex: 1, padding: "8px 10px", fontSize: 13, background: "transparent", border: "none", outline: "none", color: "var(--ink)" }} />
{thumbUrl && }
Preview is auto-fetched from your site's OG image and used in shared links.
{/* Thumbnail card */}
fileRef.current?.click()} title="Click to replace preview image" >
{thumbUrl ? ( Website preview ) : ( /* Synthetic preview: mock browser frame + B mark */ <>
BusinessTeam
{[0, 1, 2].map(i => )}
)}
{cleanHost}
{thumbUrl ? "Custom upload" : "Auto-fetched OG image"}
); } /* Brand color theme — primary / secondary / tertiary swatches with picker. */ function BrandColorTheme() { const PALETTES = [ { id: "indigo", name: "Indigo Pulse", colors: ["#5B5BD6", "#0E1530", "#F2F0EA"] }, { id: "violet", name: "Violet Studio", colors: ["#7C3AED", "#1E1330", "#F6F4FA"] }, { id: "ember", name: "Ember Suite", colors: ["#E36F36", "#2A1A12", "#F8F0E8"] }, { id: "jade", name: "Jade Office", colors: ["#1FA37A", "#0E2A20", "#EEF6F0"] }, { id: "graphite",name: "Graphite", colors: ["#1F2937", "#6B7280", "#F4F4F5"] }, ]; const [primary, setPrimary] = useStateMisc("#5B5BD6"); const [secondary, setSecondary] = useStateMisc("#0E1530"); const [tertiary, setTertiary] = useStateMisc("#F2F0EA"); const [openPicker, setOpenPicker] = useStateMisc(null); /* "primary" | "secondary" | "tertiary" | null */ const applyPalette = (p) => { setPrimary(p.colors[0]); setSecondary(p.colors[1]); setTertiary(p.colors[2]); }; const matchingPaletteId = PALETTES.find(p => p.colors[0].toLowerCase() === primary.toLowerCase() && p.colors[1].toLowerCase() === secondary.toLowerCase() && p.colors[2].toLowerCase() === tertiary.toLowerCase() )?.id; return (
{/* Three swatch fields */}
setOpenPicker(openPicker === "primary" ? null : "primary")} /> setOpenPicker(openPicker === "secondary" ? null : "secondary")} /> setOpenPicker(openPicker === "tertiary" ? null : "tertiary")} />
{/* Live preview pill */}
B
BusinessTeam
Sample of how your colors appear on a card
{/* Presets */}
Or pick a preset
{PALETTES.map(p => { const active = matchingPaletteId === p.id; return ( ); })}
); } function SwatchField({ label, value, onChange, open, onToggle }) { const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const onDown = (e) => { if (!ref.current?.contains(e.target)) onToggle(); }; document.addEventListener("mousedown", onDown); return () => document.removeEventListener("mousedown", onDown); }, [open, onToggle]); const QUICK = ["#5B5BD6", "#7C3AED", "#E36F36", "#1FA37A", "#0EA5E9", "#EF4444", "#0E1530", "#1F2937", "#6B7280", "#F2F0EA", "#F6F4FA", "#FFFFFF"]; return (
{label}
{open && (
Pick a color
{QUICK.map(c => (
onChange(e.target.value)} style={{ width: 28, height: 28, border: "1px solid var(--line-strong)", borderRadius: 6, padding: 0, cursor: "pointer", background: "transparent" }} /> onChange(e.target.value)} className="mono" style={{ flex: 1, padding: "6px 8px", fontSize: 12, background: "var(--surface)", border: "1px solid var(--line-strong)", borderRadius: 6, color: "var(--ink)", outline: "none" }} />
)}
); } /* Logo uploader — square dropzone with current logo preview */ function LogoField() { const [logoUrl, setLogoUrl] = useStateMisc(null); const fileRef = React.useRef(null); const handleFile = (file) => { if (!file) return; if (!file.type.startsWith("image/")) return; const reader = new FileReader(); reader.onload = () => setLogoUrl(reader.result); reader.readAsDataURL(file); }; const onInputChange = (e) => { handleFile(e.target.files?.[0]); e.target.value = ""; }; const [dragOver, setDragOver] = useStateMisc(false); return (
Logo
fileRef.current?.click()} onDragOver={(e) => { e.preventDefault(); setDragOver(true); }} onDragLeave={() => setDragOver(false)} onDrop={(e) => { e.preventDefault(); setDragOver(false); handleFile(e.dataTransfer.files?.[0]); }} style={{ width: 112, height: 112, borderRadius: 14, background: logoUrl ? "var(--surface)" : "var(--ink)", color: "#fff", fontWeight: 700, fontSize: 40, letterSpacing: "-0.02em", display: "flex", alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.06)", border: dragOver ? "2px dashed var(--accent)" : "2px solid transparent", cursor: "pointer", transition: "border-color 120ms", }} > {logoUrl ? ( Organization logo ) : ( <>
B )} {/* hover overlay */}
{logoUrl ? "Replace" : "Drop image"}
{logoUrl && setLogoUrl(null)} />}
PNG or SVG · 1:1 · <1 MB
); } /* Social account row — icon + URL field + verified status */ function SocialField({ icon, label, value, verified, placeholder }) { return (
{label}
{value && ( verified ? Verified : )}
{value && ( )}
); } function AdminPitch() { return (

Messaging framework

used by copilot
Your AI copilot draws on these to draft outreach, summarize accounts and recommend content. Keep them tight and specific.

Value pillars

{[ "Company-centric ABM", "Relationship intelligence", "Omnichannel engagement", "AI-assisted execution", "Strategic orchestration", ].map(v => )}

Pain points we address

{[ "Fragmented CRM data", "Low-context outreach", "Poor account coordination", "Manual research burden", "Weak signal detection", ].map(v => )}

Proof points

{[ "Centralized stakeholder map", "Unified communication timeline", "AI next-best actions", "LinkedIn relationship sync", ].map(v => )}
); } /* Editable chip — visually a Badge with an inline remove affordance */ function PitchChip({ label, tone }) { const [hover, setHover] = useStateMisc(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: "relative", display: "inline-flex" }} > {label} {hover && ( )} ); } function AdminICP() { const useCases = [ { id: "uc-hr-spain", name: "HR leadership in Spanish mid-market and enterprise", description: "HR directors, people leaders and talent leaders in Spanish companies with complex workforce needs.", active: true, target: { departments: "Human Resources", seniority: "Owner → Manager", geo: "Spain · 200+ employees" }, scoringRules: [ ["company.employee_count", "≥ 500", "+15"], ["contact.department", "= human_resources", "+25"], ["contact.seniority", "∈ [director, head, c_level]", "+30"], ["linkedin.status", "= accepted", "+20"], ], personas: [ { id: "p1", name: "Pilar — HR Director / VP People", department: "Human Resources", seniority: "Director / VP", description: "Senior HR leader responsible for workforce strategy, talent management and operational HR across multi-site organizations.", painPoints: ["Fragmented HR tools", "Manual workforce reporting", "Limited stakeholder visibility", "High admin burden"], interests: ["Workforce analytics", "Employee experience", "Retention strategy", "HR digital transformation"], keywords: ["people ops", "HR transformation", "HRIS", "talent ops"], solutions: ["Unified workforce timeline", "AI HR insights", "Stakeholder mapping", "Automated reporting"], }, { id: "p2", name: "Carla — Head of Talent Acquisition", department: "Human Resources", seniority: "Head / Manager", description: "Owns the hiring funnel, employer brand and recruiter productivity in scaling organizations.", painPoints: ["Slow pipeline velocity", "Weak candidate signal", "Recruiter productivity", "Disjointed sourcing tools"], interests: ["Sourcing automation", "Employer brand", "Candidate experience", "Recruiter enablement"], keywords: ["TA", "recruiting", "sourcing", "employer brand"], solutions: ["ABM-style sourcing", "Candidate intelligence", "Automated outreach"], }, ], }, ]; const [activeUC, setActiveUC] = useStateMisc(useCases[0].id); const uc = useCases.find(u => u.id === activeUC) || useCases[0]; return (

ABM setup

Define ideal customer profiles, scoring rules, and the buyer personas your team targets within each use case.
{/* Use-case tabs */}
{useCases.map(u => ( setActiveUC(u.id)}> {u.name.split(" in ")[0]} ))}
{/* Use case header */}
{uc.name}
{uc.active && Active}
{uc.description}
{/* Target company description */}
Edit}>Target company
{/* Scoring rules */}
Add rule}>Scoring rules
{uc.scoringRules.map((r, i) => ( ))}
Field Condition Score
{r[0]} {r[1]} {r[2]}
{/* Buyer personas */}
Add persona}> Buyer personas {uc.personas.length}
{uc.personas.map(p => )}
); } function PersonaCard({ persona }) { return (
{/* Identity header */}
{persona.name}
{persona.department} {persona.seniority}
{persona.description}
{/* Attribute grid */}
); } function AdminProducts() { return (

Products catalog

The products your AI copilot draws from when drafting outreach and handling objections.
); } function AdminCompetitors() { return (

Competitors

How you position against each competitor. Powers AI-suggested objection handling.
); } const PRODUCTS = [ { id: "p-platform", name: "AI ABM CRM Platform", category: "Platform", status: "GA", description: "Company-centric CRM combining relationship intelligence, omnichannel outreach, AI insights and sales orchestration.", pricing: "From €120 / seat / month", targetUseCases: ["ABM execution", "LinkedIn prospecting", "Stakeholder mapping", "High-touch sales"], differentiators: ["Company-first CRM model", "Unified conversation workspace", "AI next-best actions", "LinkedIn relationship intelligence"], features: ["Omni-channel inbox", "Buying committee mapping", "AI account briefs", "Pipeline kanban"], }, { id: "p-relate", name: "Relationship Graph", category: "Module", status: "GA", description: "Continuously synced LinkedIn relationship layer across the team — see who already knows whom across target accounts.", pricing: "Included with Premium · €40 / seat add-on on Standard", targetUseCases: ["Warm intros", "Multi-threaded outreach", "Champion detection"], differentiators: ["Cross-team graph view", "Unipile sync", "Invite-state awareness"], features: ["Live LinkedIn sync", "Pending/accepted tracking", "Graph search"], }, { id: "p-copilot", name: "Sales Copilot", category: "AI Add-on", status: "Beta", description: "On-demand AI for drafting outreach, summarizing accounts, recommending next steps and surfacing weak buying signals.", pricing: "€60 / seat / month", targetUseCases: ["Personalized outreach", "Meeting prep", "Account briefs", "Risk detection"], differentiators: ["Trained on your messaging framework", "Grounded in your knowledge base", "Inline rewrites"], features: ["Drafting", "Summaries", "Next-best-action", "Risk alerts"], }, ]; const COMPETITORS = [ { id: "c-sf", name: "Salesforce Sales Cloud", category: "Incumbent CRM", logoTone: "blue", strengths: ["Mature platform", "Wide ecosystem", "Reporting depth"], weaknesses: ["Contact-centric, not account-centric", "Slow to set up", "Limited LinkedIn integration"], ourPosition: "BusinessTeam is the ABM execution layer alongside Salesforce — we add company-centric workflows, LinkedIn relationship intelligence and AI-personalized outreach without ripping out the system of record.", winRate: 0.61, dealsLast90: 14, objections: [ { q: "We already have Salesforce", a: "Most customers keep SFDC as the system of record. BusinessTeam plugs in and runs ABM execution + outreach on top." }, { q: "Aren't you just another CRM?", a: "We're company-first by design. The unit of work is the account, not the contact. The conversation workspace is the centerpiece." }, ], }, { id: "c-hubspot", name: "HubSpot Sales Hub", category: "All-in-one growth", logoTone: "warm", strengths: ["Easy onboarding", "Marketing integration", "SMB friendly"], weaknesses: ["Weak for enterprise ABM", "Limited stakeholder mapping", "No LinkedIn relationship layer"], ourPosition: "HubSpot wins inbound + SMB. BusinessTeam wins multi-stakeholder, high-touch B2B selling where mapping buying committees and orchestrating teams matters.", winRate: 0.74, dealsLast90: 9, objections: [ { q: "HubSpot's cheaper", a: "True for SMB. At enterprise sizes, our ABM-specific feature set replaces 3+ point tools, which usually nets out lower TCO." }, ], }, { id: "c-apollo", name: "Apollo.io", category: "Sales engagement", logoTone: "violet", strengths: ["Large contact database", "Cold outreach automation", "Aggressive pricing"], weaknesses: ["Spammy reputation", "Light on relationship intelligence", "No multi-channel workspace"], ourPosition: "Apollo is for high-volume cold outreach. BusinessTeam is for premium, relationship-driven, multi-channel motions where personalization and warm intros matter.", winRate: 0.68, dealsLast90: 11, objections: [ { q: "Apollo has more contacts", a: "Volume isn't the bottleneck for enterprise ABM — context and warm relationships are. We focus there." }, ], }, { id: "c-linsn", name: "LinkedIn Sales Navigator", category: "Prospecting tool", logoTone: "blue", strengths: ["Best-in-class LinkedIn data", "Brand trust"], weaknesses: ["Not a CRM", "No team orchestration", "Manual workflow"], ourPosition: "Sales Navigator is a great input layer. BusinessTeam adds team coordination, multi-channel execution, AI orchestration and a CRM around it.", winRate: 0.81, dealsLast90: 6, objections: [], }, ]; function ProductsList() { return (
{PRODUCTS.map(p => )}
); } function ProductCard({ p }) { return (
{p.name}
{p.status}
{p.category} · {p.pricing}
{p.description}
); } function CompetitorsList() { return (
{COMPETITORS.map(c => )}
); } function CompetitorCard({ c }) { const [expanded, setExpanded] = useStateMisc(false); const tone = c.logoTone || "neutral"; const toneInk = ({ blue: "var(--blue)", warm: "var(--warm)", violet: "var(--accent)", neutral: "var(--ink-3)" })[tone]; const toneSoft = ({ blue: "var(--blue-soft)", warm: "var(--warm-soft)", violet: "var(--accent-soft)", neutral: "var(--inset)" })[tone]; return (
{/* Header */}
{c.name.split(/\s+/).slice(0, 2).map(w => w[0]).join("")}
{c.name}
{c.category}
{c.ourPosition}
Win rate (90d)
= 0.5 ? "var(--green-ink)" : "var(--red-ink)" }}> {Math.round(c.winRate * 100)}%
{c.dealsLast90} deals
{/* Quick attributes */}
{/* Battlecard / objections */} {c.objections.length > 0 && (
{expanded && (
{c.objections.map((o, i) => (
"{o.q}"
→{o.a}
))}
)}
)}
); } function PersonaAttr({ icon, label, items, tone, mono }) { return (
{label} {items.length}
{items.map((it, i) => ( {mono ? {it} : it} ))}
); } function AdminTeam() { /* Per-user channel connection state — keyed by userId */ const CHANNEL_STATES = { "guy-lansing-0030809": { linkedin: "connected", email: "needs_reconnect", calendar: "not_connected", whatsapp: "not_connected" }, "sales-lead-demo": { linkedin: "not_connected", email: "connected", calendar: "connected", whatsapp: "not_connected" }, "amelie-nadeau": { linkedin: "connected", email: "connected", calendar: "connected", whatsapp: "not_connected" }, "rohan-kapoor": { linkedin: "not_connected", email: "not_connected", calendar: "not_connected", whatsapp: "not_connected" }, }; const [teams, setTeams] = useStateMisc([ { id: "revenue", name: "Revenue", tone: "violet", lead: "guy-lansing-0030809", description: "Core revenue org" }, { id: "enterprise", name: "Enterprise Sales", tone: "blue", lead: "amelie-nadeau", description: "Strategic accounts > €100k ARR" }, { id: "outbound", name: "Outbound", tone: "warm", lead: "rohan-kapoor", description: "Pipeline generation & ABM" }, ]); const [members, setMembers] = useStateMisc(window.USERS); const [editing, setEditing] = useStateMisc(null); /* "create" | teamId | null */ const [newName, setNewName] = useStateMisc(""); const [newTone, setNewTone] = useStateMisc("green"); const memberCountFor = (teamName) => members.filter(m => m.team === teamName).length; const handleCreateTeam = () => { const name = newName.trim(); if (!name) return; const id = name.toLowerCase().replace(/[^a-z0-9]+/g, "-"); setTeams(prev => [...prev, { id, name, tone: newTone, description: "" }]); setNewName(""); setNewTone("green"); setEditing(null); }; const handleDeleteTeam = (teamId) => { setTeams(prev => prev.filter(t => t.id !== teamId)); setEditing(null); }; const assignMemberTeam = (memberId, teamName) => { setMembers(prev => prev.map(m => m.id === memberId ? { ...m, team: teamName } : m)); }; return (
{/* Members header + stats */}

Team members

Each member's connected accounts power outreach, sync and AI personalization.
{/* Stats strip */}
{[ ["Members", members.length, null], ["LinkedIn", Object.values(CHANNEL_STATES).filter(c => c.linkedin === "connected").length + " / " + members.length, "connected"], ["Email", Object.values(CHANNEL_STATES).filter(c => c.email === "connected").length + " / " + members.length, "needs"], ["Calendar", Object.values(CHANNEL_STATES).filter(c => c.calendar === "connected").length + " / " + members.length, null], ["WhatsApp", Object.values(CHANNEL_STATES).filter(c => c.whatsapp === "connected").length + " / " + members.length, null], ].map(([label, value, hint], i, arr) => (
{label}
{value}
{hint === "needs" &&
1 reconnection
}
))}
{members.map(u => ( assignMemberTeam(u.id, name)} /> ))} {/* Invite slot */}
{/* Teams card — last */}

Teams

Group members into teams to scope dashboards, pipelines and quotas.
{editing !== "create" && ( )}
{/* Create team inline form */} {editing === "create" && (
Team name
setNewName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") handleCreateTeam(); if (e.key === "Escape") setEditing(null); }} placeholder="e.g. EMEA Mid-Market" style={{ width: "100%", padding: "8px 10px", fontSize: 13, background: "var(--surface)", border: "1px solid var(--line-strong)", borderRadius: 7, color: "var(--ink)", outline: "none", }} />
Color
{["violet","blue","green","warm","red","neutral"].map(t => (
)}
{teams.map(team => { const leadUser = members.find(m => m.id === team.lead); const teamMembers = members.filter(m => m.team === team.name); return (
{team.name}
{team.description &&
{team.description}
}
{teamMembers.slice(0, 5).map((m, i) => (
0 ? -6 : 0, border: "2px solid var(--surface)", borderRadius: "50%" }}>
))} {teamMembers.length === 0 && ( No members yet )} {teamMembers.length > 0 && ( {teamMembers.length} )}
{leadUser && (
Lead: {leadUser.name.split(" ")[0]}
)}
); })}
); } /* Business-card style member card */ function MemberCard({ user, channels, teams, onAssignTeam }) { const [picking, setPicking] = useStateMisc(false); const [avatarUrl, setAvatarUrl] = useStateMisc(user.avatarUrl || null); const [openChannel, setOpenChannel] = useStateMisc(null); /* "linkedin" | "email" | "calendar" | "whatsapp" | null */ const cardRef = React.useRef(null); const fileRef = React.useRef(null); React.useEffect(() => { if (!picking) return; const onClick = (e) => { if (!cardRef.current?.contains(e.target)) setPicking(false); }; document.addEventListener("mousedown", onClick); return () => document.removeEventListener("mousedown", onClick); }, [picking]); const handleFile = (e) => { const f = e.target.files?.[0]; if (!f) return; const reader = new FileReader(); reader.onload = () => setAvatarUrl(reader.result); reader.readAsDataURL(f); e.target.value = ""; }; const currentTeam = teams?.find(t => t.name === user.team); const dotColor = currentTeam ? ({ violet: "var(--accent)", blue: "var(--blue)", green: "var(--green)", warm: "var(--warm)", red: "var(--red)", neutral: "var(--ink-4)" })[currentTeam.tone] : "var(--ink-4)"; return (
{/* Top "stripe" — soft brand gradient */}
{/* Identity */}
fileRef.current?.click()} title="Change profile picture" style={{ width: 56, height: 56, borderRadius: "50%", border: "3px solid var(--surface)", overflow: "hidden", background: "var(--surface)", position: "relative", cursor: "pointer", display: "inline-block", }} >

{user.name}

{user.id === CURRENT_USER.id && You}
{user.title && (
{user.title}
)} {/* Team chip — clickable, opens picker */}
{picking && (
Assign team
{teams.map(t => ( ))}
)}
{user.email}
{user.phone && (
{user.phone}
)}
{user.role} Active
{/* Channel connections */}
Connected accounts
setOpenChannel(openChannel === "linkedin" ? null : "linkedin")} /> setOpenChannel(openChannel === "email" ? null : "email")} /> setOpenChannel(openChannel === "calendar" ? null : "calendar")} /> setOpenChannel(openChannel === "whatsapp" ? null : "whatsapp")} />
{openChannel && (
setOpenChannel(null)} />
)}
); } /* Per-channel chip — color + dot + label encode state */ function ChannelChip({ name, icon, status, active, onClick }) { const conf = { connected: { dot: "var(--green)", bg: "var(--green-soft)", border: "color-mix(in oklch, var(--green) 25%, transparent)", label: "Linked", fg: "var(--green-ink)" }, needs_reconnect: { dot: "var(--red)", bg: "var(--red-soft)", border: "color-mix(in oklch, var(--red) 25%, transparent)", label: "Reconnect", fg: "var(--red-ink)" }, not_connected: { dot: "var(--ink-5)", bg: "var(--inset)", border: "var(--line)", label: "Not linked",fg: "var(--ink-3)" }, }[status]; return ( ); } /* Channel configuration panel — appears beneath the chip row when a chip is active. */ function ChannelPanel({ channel, status, user, onClose }) { const connected = status === "connected"; const needsReconnect = status === "needs_reconnect"; const Header = ({ title, hint }) => (
{title}
{hint}
); const StatusRow = () => (
{needsReconnect ? "Authentication expired — please reconnect." : connected ? "Connected and syncing." : "Not connected."}
); if (channel === "linkedin") { return ( <>
{connected || needsReconnect ? ( <> ktnY30WMQkSy587…} /> linkedin.com/in/{user.id.split("-")[0]}} /> } /> } />
{needsReconnect && }
) : ( )} ); } if (channel === "email") { return ( <>
{(connected || needsReconnect) ? ( <> {user.email}} /> } /> } /> } /> } /> } />
{needsReconnect && }
) : (
)} ); } if (channel === "calendar") { return ( <>
{(connected || needsReconnect) ? ( <> {user.email}} /> } /> — } /> } />
{needsReconnect && }
) : (
)} ); } if (channel === "whatsapp") { return ( <>
{(connected || needsReconnect) ? ( <> +34 600 12 34 56} /> } /> } /> } />
{needsReconnect && }
) : ( <>
Business phone number
Display name
)} ); } return null; } const kvInput = { padding: "5px 8px", fontSize: 12, background: "var(--surface)", border: "1px solid var(--line-strong)", borderRadius: 5, color: "var(--ink)", outline: "none", width: "100%", fontFamily: "inherit", }; const kvSelect = { ...kvInput, appearance: "none", backgroundImage: "url(\"data:image/svg+xml;utf8,\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 6px center", paddingRight: 22, }; const panelActions = { display: "flex", gap: 6, marginTop: 10, paddingTop: 10, borderTop: "1px solid var(--line)", flexWrap: "wrap", }; function ChannelKV({ k, v }) { return (
{k} {v}
); } function MiniToggle({ defaultOn }) { const [on, setOn] = React.useState(!!defaultOn); return ( ); } function ConnectViaProvider({ provider }) { return (
Connect via {provider} to enable this channel.
); } function AdminIntegrations() { const items = [ { id: "li", channel: "LinkedIn", via: "Unipile", status: "connected", icon: "linkedin", acct: "ktnY30WMQkSy5872oubphw" }, { id: "em", channel: "Email", via: "Gmail", status: "not_connected", icon: "mail" }, { id: "ca", channel: "Calendar", via: "Google Calendar", status: "not_connected", icon: "calendar" }, { id: "wa", channel: "WhatsApp", via: "WhatsApp Business",status: "not_connected", icon: "message-circle" }, ]; return (
{items.map(it => (
{it.channel}
via {it.via}
{it.status === "connected" ? Connected : Not connected}
{it.acct && (
acct {it.acct.slice(0, 14)}…
)}
{it.status === "connected" ? : }
))}
); } function AdminAI() { return (
{[ { id: "ren", name: "Role enrichment", purpose: "Infer department + seniority from current position titles.", model: "GPT-4o · 0.99 confidence avg", updated: "2026-05-19T20:52:58Z" }, { id: "outr", name: "Outreach draft", purpose: "Personalized LinkedIn / email drafts using account + contact context.", model: "GPT-4o · custom prompt", updated: null }, { id: "summ", name: "Account summarizer", purpose: "Synthesize conversations and signals into account briefs.", model: "GPT-4o", updated: "2026-05-20T07:02:00Z" }, { id: "nba", name: "Next-best-action", purpose: "Recommend the highest-impact action for each contact / account.", model: "GPT-4o", updated: "2026-05-20T07:02:00Z" }, ].map(a => (
{a.name} Live
{a.purpose}
{a.model} · Updated {a.updated ? fmtRelative(a.updated) : "never"}
))}
); } function AdminNotifications() { const [channels, setChannels] = useStateMisc({ in_app: true, email: true, push: false, slack: false, }); const [digest, setDigest] = useStateMisc("realtime"); /* realtime | daily | weekly */ const [quietHours, setQuietHours] = useStateMisc(true); const initialPrefs = { mention: { inApp: true, email: true, push: true, slack: false }, reply: { inApp: true, email: true, push: true, slack: false }, li_accepted: { inApp: true, email: false, push: true, slack: false }, account_change: { inApp: true, email: false, push: false, slack: false }, stage_change: { inApp: true, email: true, push: false, slack: true }, task_due: { inApp: true, email: true, push: true, slack: false }, task_overdue: { inApp: true, email: true, push: true, slack: true }, sync_issue: { inApp: true, email: true, push: false, slack: true }, ai_recommend: { inApp: true, email: false, push: false, slack: false }, weak_signal: { inApp: true, email: false, push: false, slack: false }, team_note: { inApp: true, email: false, push: false, slack: false }, }; const [prefs, setPrefs] = useStateMisc(initialPrefs); const togglePref = (event, channel) => { setPrefs(prev => ({ ...prev, [event]: { ...prev[event], [channel]: !prev[event][channel] }})); }; const EVENT_GROUPS = [ { id: "conversations", title: "Conversations & relationships", icon: "messages", events: [ ["mention", "I'm mentioned in a note or thread", "Direct mentions by teammates."], ["reply", "A prospect replies", "Incoming reply on any channel."], ["li_accepted", "LinkedIn invitation accepted", "A new prospect connects."], ["team_note", "Teammate adds a note on my account", "Internal collaboration signal."], ]}, { id: "accounts", title: "Accounts & pipeline", icon: "building", events: [ ["account_change", "Account lifecycle changes", "Target → Engaged, Engaged → Opportunity, etc."], ["stage_change", "Opportunity stage moves", "Pipeline progression on owned opportunities."], ]}, { id: "tasks", title: "Tasks & execution", icon: "check-square", events: [ ["task_due", "Task due today", "Morning reminder for active tasks."], ["task_overdue", "Task overdue", "An assigned task missed its deadline."], ["sync_issue", "Sync or integration issue", "LinkedIn / email / calendar disconnects."], ]}, { id: "ai", title: "AI & signals", icon: "sparkles", events: [ ["ai_recommend", "AI recommends an action", "Next-best-action surfaces a high-impact suggestion."], ["weak_signal", "Weak buying signal detected", "Profile view, content engagement, job change, etc."], ]}, ]; return (
{/* Delivery channels */}

Delivery channels

Where notifications are sent. The matrix below uses these channels per-event.
{[ ["in_app", "In-app", "Inbox + bell badge", "messages", true], ["email", "Email", "guy.lansing@nelc.es", "mail", true], ["push", "Push", "Mobile app on iOS", "phone", false], ["slack", "Slack", "Connect to receive in Slack","link", false], ].map(([key, label, hint, icon, available], i, arr) => (
{label}
{hint}
{available ? ( setChannels(prev => ({ ...prev, [key]: !prev[key] }))} /> ) : ( )}
))}
{/* Notification matrix */}

Notification preferences

Pick which channels you want for each event. Channels you've turned off above are disabled.
{/* Matrix header */}
Event
In-app
Email
Push
Slack
{EVENT_GROUPS.map((group, gi) => (
0 ? "1px solid var(--line)" : "none", borderBottom: "1px solid var(--line)", fontSize: 11, fontWeight: 600, color: "var(--ink-2)", display: "flex", alignItems: "center", gap: 6, }}> {group.title}
{group.events.map(([eventId, title, hint], i, arr) => (
{title}
{hint}
{["inApp", "email", "push", "slack"].map((ch, idx) => { const chKey = ["in_app", "email", "push", "slack"][idx]; const channelOn = channels[chKey]; const cellOn = prefs[eventId]?.[ch]; return (
channelOn && togglePref(eventId, ch)} />
); })}
))} ))} {/* Digest + quiet hours */}

Delivery cadence

How often the inbox + email rolls up notifications.
{[ { id: "realtime", label: "Real-time", hint: "Notify as events happen." }, { id: "daily", label: "Daily digest", hint: "Roll up once each morning (08:00)." }, { id: "weekly", label: "Weekly summary", hint: "Monday morning rollup." }, ].map(o => ( ))}

Quiet hours

Mute push + email during these hours. Critical alerts always go through.
setQuietHours(q => !q)} />
Critical events (reply from prospect, sync down) bypass quiet hours.
); } /* Reusable toggle */ function Toggle({ on, onChange, disabled }) { return ( ); } function AdminBilling() { return (
Current plan
Premium
Renews 31 Dec 2026
3 of 10 used} /> Active} />
); } function AdminSecurity() { return (
Security
Session, SSO and audit settings for the workspace.
 ); } function Field({ label, value, multiline, icon, compact, placeholder, onChange }) { const controlled = typeof onChange === "function"; const commonProps = controlled ? { value: value || "", onChange: (e) => onChange(e.target.value) } : { defaultValue: value }; return (
{icon && } {label}
{multiline ? (