/* Target Accounts list — Attio-style data grid with ABM scores. */ const { useState: useStateAcc } = React; /* ─── Advanced filter: field catalog + evaluator ─────────────────────── FIELD_CATALOG describes every queryable field on a Company. Each entry declares: - id: stable key used in clause storage - label: shown in the field picker - group: section header in the picker (Identity / Geo / ABM / …) - type: controls which operators + value editor are offered ("text" | "number" | "enum" | "boolean" | "array" | "date") - get: extracts the value from a Company record (returns undefined when missing so operators can treat the field as "empty"). The "contactStats" arg is the per-company {total, requested, accepted} block computed live from loaded CONTACTS. - options: for type=enum, ordered list of allowed values (and optional renderOption to format chips). */ const AF_OPS = { text: [ { id: "contains", label: "contains" }, { id: "not_contains",label: "does not contain" }, { id: "eq", label: "is" }, { id: "neq", label: "is not" }, { id: "starts_with", label: "starts with" }, { id: "ends_with", label: "ends with" }, { id: "is_empty", label: "is empty", unary: true }, { id: "is_not_empty",label: "is not empty", unary: true }, ], number: [ { id: "eq", label: "=" }, { id: "neq", label: "≠" }, { id: "gt", label: ">" }, { id: "gte", label: "≥" }, { id: "lt", label: "<" }, { id: "lte", label: "≤" }, { id: "between", label: "between", pairValue: true }, { id: "is_empty", label: "is empty", unary: true }, { id: "is_not_empty", label: "is not empty", unary: true }, ], enum: [ { id: "in", label: "is any of", multiValue: true }, { id: "not_in", label: "is none of", multiValue: true }, { id: "is_empty", label: "is empty", unary: true }, { id: "is_not_empty", label: "is not empty", unary: true }, ], boolean: [ { id: "eq_true", label: "is true", unary: true }, { id: "eq_false", label: "is false", unary: true }, ], array: [ { id: "any_in", label: "has any of", multiValue: true }, { id: "all_in", label: "has all of", multiValue: true }, { id: "contains_text", label: "any contains text" }, { id: "is_empty", label: "is empty", unary: true }, { id: "is_not_empty", label: "is not empty", unary: true }, ], date: [ { id: "in_last_days", label: "in the last N days" }, { id: "before", label: "before" }, { id: "after", label: "after" }, { id: "is_empty", label: "is empty", unary: true }, { id: "is_not_empty", label: "is not empty", unary: true }, ], }; function buildFieldCatalog(filterOptions) { return [ /* Identity */ { id: "name", label: "Account name", group: "Identity", type: "text", get: (c) => c.name }, { id: "domain", label: "Domain", group: "Identity", type: "text", get: (c) => c.domain || (c.api?.domain) }, { id: "tagline", label: "Tagline", group: "Identity", type: "text", get: (c) => c.api?.tagline }, { id: "description", label: "Description", group: "Identity", type: "text", get: (c) => c.description }, /* Firmographics */ { id: "industry", label: "Industry", group: "Firmographics", type: "enum", get: (c) => c.industry, options: filterOptions?.industry || [] }, { id: "employeeRange", label: "Size", group: "Firmographics", type: "enum", get: (c) => c.employeeRange, options: ["<50", "51-200", "201-500", "501–1k", "1k-5k", "5k-10k", "10k+"] }, { id: "employeeCount", label: "Headcount", group: "Firmographics", type: "number", get: (c) => c.employeeCount }, { id: "yearFounded", label: "Year founded", group: "Firmographics", type: "number", get: (c) => c.yearFounded }, { id: "followerCount", label: "Follower count",group: "Firmographics", type: "number", get: (c) => c.api?.follower_count }, /* Geography */ { id: "hqCity", label: "HQ city", group: "Geography", type: "enum", get: (c) => c.hqCity, options: filterOptions?.hqCity || [] }, { id: "hqCountry", label: "HQ country", group: "Geography", type: "text", get: (c) => c.api?.hq_country || c.hqCountry }, { id: "operatingCountryCount", label: "Operating countries", group: "Geography", type: "number", get: (c) => c.api?.operatingCountryCount }, { id: "totalLocationsCount", label: "Total locations", group: "Geography", type: "number", get: (c) => c.api?.totalLocationsCount }, { id: "spainLocationCount", label: "Spain locations", group: "Geography", type: "number", get: (c) => c.api?.spainLocationCount }, { id: "outsideSpainLocationCount", label: "Other locations", group: "Geography", type: "number", get: (c) => c.api?.outsideSpainLocationCount }, /* Languages */ { id: "englishCountryRatio", label: "English-strong country ratio", group: "Languages", type: "number", get: (c) => c.api?.highestLanguageEnglishCountryRatio }, { id: "englishCountryCount", label: "English-strong country count", group: "Languages", type: "number", get: (c) => c.api?.highestLanguageEnglishCountryCount }, { id: "officialLanguages", label: "Official languages", group: "Languages", type: "array", get: (c) => c.api?.officialLanguages || [] }, /* Scoring */ { id: "executiveTier", label: "Target tier", group: "Scoring", type: "enum", get: (c) => c.api?.executive_english_target_tier, options: ["strong_target", "medium_target", "potential_target", "low_priority", "very_low_priority"], renderOption: (v) => window.TIER_LABEL?.[v] || v }, { id: "executiveScore", label: "Target score (0–10)", group: "Scoring", type: "number", get: (c) => c.api?.executive_english_target_score }, { id: "gtmPriority", label: "GTM priority", group: "Scoring", type: "enum", get: (c) => c.gtmPriority, options: ["high", "medium", "low"], renderOption: (v) => v[0].toUpperCase() + v.slice(1) }, /* ABM (mock-derived; surfaced so the UI is exhaustive) */ { id: "lifecycleStage", label: "Lifecycle", group: "ABM", type: "enum", get: (c) => c.abm?.lifecycleStage, options: filterOptions?.lifecycle || [], renderOption: (v) => window.LIFECYCLE_LABEL?.[v] || v }, { id: "fitScore", label: "Fit score", group: "ABM", type: "number", get: (c) => c.abm?.fitScore }, { id: "intentScore", label: "Intent score", group: "ABM", type: "number", get: (c) => c.abm?.intentScore }, { id: "relationshipScore", label: "Relationship score", group: "ABM", type: "number", get: (c) => c.abm?.relationshipScore }, { id: "priorityScore", label: "Priority score", group: "ABM", type: "number", get: (c) => c.abm?.priorityScore }, { id: "openOpps", label: "Open opportunities", group: "ABM", type: "number", get: (c) => c.abm?.openOpportunitiesCount }, { id: "stakeholders", label: "Stakeholders (mock)", group: "ABM", type: "number", get: (c) => c.abm?.stakeholdersCount }, { id: "lastEngagement", label: "Last engagement", group: "ABM", type: "date", get: (c) => c.abm?.lastEngagementAt }, /* Live contact counts */ { id: "associatedContacts", label: "Associated contacts", group: "Contacts", type: "number", get: (c, ctx) => ctx?.contactStats?.get(c.id)?.total || 0 }, { id: "connectionRequests", label: "Connection requests", group: "Contacts", type: "number", get: (c, ctx) => ctx?.contactStats?.get(c.id)?.requested || 0 }, { id: "connectedContacts", label: "Connected contacts", group: "Contacts", type: "number", get: (c, ctx) => ctx?.contactStats?.get(c.id)?.accepted || 0 }, /* Misc */ { id: "specialties", label: "Specialties", group: "Misc", type: "array", get: (c) => c.specialties || [] }, { id: "tags", label: "Tags", group: "Misc", type: "array", get: (c) => c.tags || [] }, { id: "updatedAt", label: "Last updated", group: "Misc", type: "date", get: (c) => c.api?.updatedAt }, ]; } /* Evaluate a single clause against a Company. Missing values return false for affirmative ops (contains/eq) and true for negations (not_contains/neq/is_empty), so accounts with sparse data don't all get accidentally caught by "is not X" filters. */ function evalClause(clause, company, fieldCatalog, ctx) { const def = fieldCatalog.find(f => f.id === clause.field); if (!def) return true; const raw = def.get(company, ctx); const op = clause.op; const val = clause.value; const present = raw !== undefined && raw !== null && raw !== "" && !(Array.isArray(raw) && raw.length === 0); if (op === "is_empty") return !present; if (op === "is_not_empty") return present; if (op === "eq_true") return raw === true; if (op === "eq_false") return raw === false; if (!present) return false; /* affirmative ops on missing data: exclude */ switch (def.type) { case "text": { const s = String(raw).toLowerCase(); const v = String(val || "").toLowerCase(); if (op === "contains") return s.includes(v); if (op === "not_contains") return !s.includes(v); if (op === "eq") return s === v; if (op === "neq") return s !== v; if (op === "starts_with") return s.startsWith(v); if (op === "ends_with") return s.endsWith(v); return true; } case "number": { const n = Number(raw); if (Number.isNaN(n)) return false; if (op === "between") { const [a, b] = Array.isArray(val) ? val : [val?.from, val?.to]; const lo = Number(a), hi = Number(b); if (Number.isNaN(lo) || Number.isNaN(hi)) return true; return n >= Math.min(lo, hi) && n <= Math.max(lo, hi); } const v = Number(val); if (Number.isNaN(v)) return true; if (op === "eq") return n === v; if (op === "neq") return n !== v; if (op === "gt") return n > v; if (op === "gte") return n >= v; if (op === "lt") return n < v; if (op === "lte") return n <= v; return true; } case "enum": { const arr = Array.isArray(val) ? val : (val == null ? [] : [val]); if (op === "in") return arr.includes(raw); if (op === "not_in") return !arr.includes(raw); return true; } case "array": { const list = Array.isArray(raw) ? raw : [raw]; if (op === "any_in") { const arr = Array.isArray(val) ? val : [val]; return arr.some(v => list.includes(v)); } if (op === "all_in") { const arr = Array.isArray(val) ? val : [val]; return arr.every(v => list.includes(v)); } if (op === "contains_text") { const v = String(val || "").toLowerCase(); return list.some(x => String(x).toLowerCase().includes(v)); } return true; } case "date": { const t = new Date(raw).getTime(); if (Number.isNaN(t)) return false; if (op === "in_last_days") { const days = Number(val); if (Number.isNaN(days)) return true; return (Date.now() - t) <= days * 86400000; } if (op === "before") return t < new Date(val).getTime(); if (op === "after") return t > new Date(val).getTime(); return true; } default: return true; } } function PageAccounts({ onNavigate }) { const apiTotals = window.useApiTotals ? window.useApiTotals() : null; const [filter, setFilter] = useStateAcc("all"); /* all | priority | engaged */ const [sortBy, setSortBy] = useStateAcc("priority"); /* priority | recent | name */ const [groupBy, setGroupBy] = useStateAcc("none"); /* none | lifecycle | industry | priority | owner */ const [search, setSearch] = useStateAcc(""); const [extra, setExtra] = useStateAcc([]); /* locally-added accounts */ const [syncing, setSyncing] = useStateAcc(false); const [addOpen, setAddOpen] = useStateAcc(false); /* Per-column filters. Each value is an array of allowed values (empty = no filter). */ const [columnFilters, setColumnFilters] = useStateAcc({ industry: [], hqCity: [], employeeRange: [], lifecycle: [], priority: [], }); const setColumnFilter = (key, values) => setColumnFilters(prev => ({ ...prev, [key]: values })); const clearAllColumnFilters = () => setColumnFilters({ industry: [], hqCity: [], employeeRange: [], lifecycle: [], priority: [], }); /* Infinite-scroll pagination — show `visibleCount` rows; grow as the user scrolls a sentinel into view. Reset whenever the filtered set changes. */ const PAGE_SIZE = 30; const [visibleCount, setVisibleCount] = useStateAcc(PAGE_SIZE); /* Saved views — capture the current filter/sort/group/column setup so users can flip between recurring lenses without redoing everything by hand. */ const [savedViews, setSavedViews] = useStateAcc([]); const [activeViewId, setActiveViewId] = useStateAcc(null); const captureViewState = () => ({ filter, search, sortBy, groupBy, columnFilters: { ...columnFilters }, visibleCols: { ...visibleCols }, columnOrder: columnOrder.slice(), }); const saveCurrentView = (name) => { const id = "v-" + Date.now().toString(36); const view = { id, name: name.trim(), state: captureViewState() }; setSavedViews(prev => [...prev, view]); setActiveViewId(id); }; const applyView = (view) => { const s = view.state; setFilter(s.filter); setSearch(s.search); setSortBy(s.sortBy); setGroupBy(s.groupBy); setColumnFilters(s.columnFilters || {}); setVisibleCols(s.visibleCols || {}); setColumnOrder(s.columnOrder || DEFAULT_ORDER); setActiveViewId(view.id); }; const deleteView = (id) => { setSavedViews(prev => prev.filter(v => v.id !== id)); if (activeViewId === id) setActiveViewId(null); }; /* Column visibility — Account/Avatar are required; everything else can be hidden. Most columns are off by default; toggle them in the "Edit columns" popover. New columns surface the rich fields shipped by the live /companies endpoint. */ const ALL_COLUMNS = [ /* Defaults visible */ { key: "industry", label: "Industry", width: 130 }, { key: "hq", label: "HQ", width: 110 }, { key: "size", label: "Size", width: 90 }, { key: "lifecycle", label: "Lifecycle", width: 110 }, { key: "priority", label: "Target tier", width: 140 }, { key: "action", label: "Next best action", width: 240 }, /* Identity / contact */ { key: "domain", label: "Domain", width: 160 }, { key: "website", label: "Website", width: 200 }, { key: "linkedin", label: "LinkedIn", width: 120 }, { key: "tagline", label: "Tagline", width: 240 }, /* Headcount & growth */ { key: "employeeCount", label: "Headcount", width: 110 }, { key: "yearFounded", label: "Founded", width: 90 }, { key: "followerCount", label: "Followers", width: 110 }, /* Geographic footprint */ { key: "hqAddress", label: "HQ address", width: 220 }, { key: "countryCount", label: "Countries", width: 100 }, { key: "locationCount", label: "Locations", width: 100 }, { key: "spainLocations", label: "Spain locations", width: 110 }, { key: "otherLocations", label: "Other locations", width: 110 }, /* Languages */ { key: "englishRatio", label: "English-strong", width: 130 }, { key: "officialLangs", label: "Official languages", width: 180 }, /* Sales reasoning */ { key: "targetScore", label: "Target score", width: 110 }, { key: "salesReason", label: "Why this account", width: 280 }, /* ABM (mock-derived; surfaced for completeness) */ { key: "fitScore", label: "Fit score", width: 90 }, { key: "intentScore", label: "Intent score", width: 90 }, { key: "relationshipScore", label: "Relationship", width: 110 }, { key: "priorityScore", label: "Priority score", width: 110 }, { key: "stakeholders", label: "Stakeholders", width: 110 }, { key: "openOpps", label: "Open opps", width: 100 }, { key: "lastEngagement", label: "Last engagement", width: 140 }, /* Live contact counts (derived from loaded CONTACTS) */ { key: "assocContacts", label: "Associated contacts", width: 130 }, { key: "connectionRequests",label: "Connection requests", width: 140 }, { key: "connectedContacts", label: "Connected contacts", width: 130 }, /* Misc */ { key: "specialties", label: "Specialties", width: 220 }, { key: "tags", label: "Tags", width: 200 }, { key: "updated", label: "Updated", width: 110 }, ]; const DEFAULT_VISIBLE = { industry: true, hq: true, size: true, lifecycle: true, priority: true, action: true }; const DEFAULT_ORDER = ALL_COLUMNS.map(c => c.key); const [visibleCols, setVisibleCols] = useStateAcc(DEFAULT_VISIBLE); const [columnOrder, setColumnOrder] = useStateAcc(DEFAULT_ORDER); const toggleCol = (key) => setVisibleCols(prev => ({ ...prev, [key]: !prev[key] })); const resetCols = () => { setVisibleCols(DEFAULT_VISIBLE); setColumnOrder(DEFAULT_ORDER); }; const reorderCols = (fromKey, toKey) => { if (fromKey === toKey) return; setColumnOrder(prev => { const arr = prev.slice(); const from = arr.indexOf(fromKey); const to = arr.indexOf(toKey); if (from < 0 || to < 0) return prev; arr.splice(to, 0, arr.splice(from, 1)[0]); return arr; }); }; const hiddenColCount = ALL_COLUMNS.filter(c => !visibleCols[c.key]).length; /* Advanced filter — array of clauses; each is { id, field, op, value }. The clauses AND together. Filtering happens client-side against the records currently in memory; once backend ships richer query operators the same clauses can be translated into URL params. */ const [advancedFilters, setAdvancedFilters] = useStateAcc([]); const [advancedFilterOpen, setAdvancedFilterOpen] = useStateAcc(false); /* Pre-compute live contact stats per company so each AccountRow can show real "associated / requested / connected" counts without doing a 3-pass .filter() per row. Re-derived whenever the data version bumps (i.e. live data lands). The lookup is a Map keyed by company id; misses default to zeros. */ const apiDataVersion = window.useApiDataVersion ? window.useApiDataVersion() : 0; const contactStatsByCompany = React.useMemo(() => { const m = new Map(); const all = window.CONTACTS || []; for (const c of all) { const cid = c.companyId; if (!cid) continue; let s = m.get(cid); if (!s) { s = { total: 0, requested: 0, accepted: 0 }; m.set(cid, s); } s.total += 1; if (c.linkedinStatus === "pending_sent") s.requested += 1; else if (c.linkedinStatus === "accepted") s.accepted += 1; } return m; }, [apiDataVersion]); /* Multi-selection across filtered results. Stored as a Set of company ids. */ const [selectedIds, setSelectedIds] = useStateAcc(() => new Set()); const [bulkToast, setBulkToast] = useStateAcc(null); /* string shown briefly after a bulk action */ const [peekId, setPeekId] = useStateAcc(null); /* company id shown in the quick-look drawer */ const toggleSelected = (id) => setSelectedIds(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); const selectMany = (ids) => setSelectedIds(prev => { const next = new Set(prev); ids.forEach(id => next.add(id)); return next; }); const deselectMany = (ids) => setSelectedIds(prev => { const next = new Set(prev); ids.forEach(id => next.delete(id)); return next; }); const clearSelection = () => setSelectedIds(new Set()); const flashToast = (msg) => { setBulkToast(msg); setTimeout(() => setBulkToast(null), 2400); }; let list = window.COMPANIES.concat(extra); if (search) { const s = search.toLowerCase(); list = list.filter(c => c.name.toLowerCase().includes(s) || c.industry.toLowerCase().includes(s)); } if (filter === "priority") list = list.filter(c => c.gtmPriority === "high"); if (filter === "engaged") list = list.filter(c => ["engaged", "opportunity"].includes(c.abm.lifecycleStage)); /* Apply column filters. */ if (columnFilters.industry.length) list = list.filter(c => columnFilters.industry.includes(c.industry)); if (columnFilters.hqCity.length) list = list.filter(c => columnFilters.hqCity.includes(c.hqCity)); if (columnFilters.employeeRange.length) list = list.filter(c => columnFilters.employeeRange.includes(c.employeeRange)); if (columnFilters.lifecycle.length) list = list.filter(c => columnFilters.lifecycle.includes(c.abm.lifecycleStage)); if (columnFilters.priority.length) list = list.filter(c => columnFilters.priority.includes(c.gtmPriority)); /* Apply advanced-filter clauses — they AND together. Missing clauses (no field selected yet, no value yet) are ignored. Uses an inline facet snapshot for enum options because the real `filterOptions` object isn't built until later in the function body; this snapshot is good enough to feed back into enum-typed clauses. */ if (advancedFilters.length) { const facetUniverse = window.COMPANIES.concat(extra); const facetUniq = (arr) => Array.from(new Set(arr)).filter(Boolean); const facetSnapshot = { industry: facetUniq(facetUniverse.map(c => c.industry)).sort(), hqCity: facetUniq(facetUniverse.map(c => c.hqCity)).sort(), lifecycle: facetUniq(facetUniverse.map(c => c.abm.lifecycleStage)), }; const catalog = buildFieldCatalog(facetSnapshot); const ctx = { contactStats: contactStatsByCompany }; list = list.filter(c => advancedFilters.every(cl => { if (!cl.field || !cl.op) return true; return evalClause(cl, c, catalog, ctx); })); } if (sortBy === "priority") list.sort((a, b) => b.abm.priorityScore - a.abm.priorityScore); if (sortBy === "recent") list.sort((a, b) => (new Date(b.abm.lastEngagementAt || 0)) - (new Date(a.abm.lastEngagementAt || 0))); if (sortBy === "contacts") list.sort((a, b) => (b.abm.stakeholdersCount || 0) - (a.abm.stakeholdersCount || 0)); if (sortBy === "stale") list.sort((a, b) => { /* "Lack of activity": never-engaged accounts first, then oldest-engaged-first. */ const ta = a.abm.lastEngagementAt ? new Date(a.abm.lastEngagementAt).getTime() : 0; const tb = b.abm.lastEngagementAt ? new Date(b.abm.lastEngagementAt).getTime() : 0; return ta - tb; }); if (sortBy === "name") list.sort((a, b) => a.name.localeCompare(b.name)); /* Reset infinite-scroll window when filters / search / sort change. */ const filterSignature = JSON.stringify([ filter, search, sortBy, groupBy, columnFilters, advancedFilters, ]); React.useEffect(() => { setVisibleCount(PAGE_SIZE); }, [filterSignature]); /* True corpus size lives on the server (`meta.total`). The in-memory `list` is only the records loaded so far; we mix the server total into `totalCount` so the floating pill and infinite-scroll target reflect the real ceiling. When filters or search are active the server total no longer matches what we'd render, so we fall back to the in-memory length. */ const filtersActive = filter !== "all" || search.trim() !== "" || Object.values(columnFilters || {}).some(v => Array.isArray(v) ? v.length : v) || advancedFilters.length > 0; const serverTotal = filtersActive ? null : (apiTotals?.companies ?? null); const totalCount = serverTotal != null ? Math.max(list.length, serverTotal) : list.length; const shownCount = Math.min(visibleCount, totalCount); const visibleList = list.slice(0, Math.min(visibleCount, list.length)); const hasMore = shownCount < totalCount; /* Sentinel ref + IntersectionObserver to grow the window on scroll. If the user is approaching the end of the in-memory list and the server still has more records, fetch the next page. */ /* Continuous prefetch: independent of the sentinel, keep ~3 pages of headroom in memory ahead of the visible window. Fires whenever visibleCount, list.length, or the server total changes — load-more is deduped + idempotent so re-firing is safe. */ React.useEffect(() => { if (filtersActive) return; const target = (apiTotals?.companies ?? Infinity); const HEADROOM_PAGES = 3; const ahead = list.length - visibleCount; if (ahead < HEADROOM_PAGES * PAGE_SIZE && list.length < target) { window.BusinessTeamBoot?.loadMoreCompaniesFromLive(); } }, [visibleCount, list.length, filtersActive, apiTotals?.companies]); /* Sentinel ref + IntersectionObserver — fires as backup near the end of the visible list. */ const sentinelRef = React.useRef(null); React.useEffect(() => { if (!hasMore) return; const el = sentinelRef.current; if (!el) return; const io = new IntersectionObserver(entries => { entries.forEach(e => { if (!e.isIntersecting) return; /* Advance the visible window — but never past records we've actually loaded into memory. Otherwise the sentinel stays in view (since list.slice caps at list.length) and the observer re-fires forever, jumping the count straight to totalCount. */ setVisibleCount(v => Math.min(v + PAGE_SIZE, list.length)); /* Lookahead pre-fetch: keep 2 pages of headroom in memory ahead of where the user is looking. If we're inside the headroom, fire load-more — the boot helper dedupes concurrent calls so firing it on every sentinel hit is safe and keeps scrolling smooth (no visible pause when one page runs out). */ const headroom = 2 * PAGE_SIZE; if (!filtersActive && list.length < (apiTotals?.companies ?? Infinity) && (visibleCount + headroom) >= list.length) { window.BusinessTeamBoot?.loadMoreCompaniesFromLive(); } }); }, { rootMargin: "600px 0px" /* fire earlier so prefetch starts before the user actually reaches the end */ }); io.observe(el); return () => io.disconnect(); }, [hasMore, totalCount, list.length, visibleCount, filtersActive, apiTotals?.companies, filterSignature]); const scrollToTop = () => { const scroller = document.querySelector(".page-scroll"); if (scroller) scroller.scrollTo({ top: 0, behavior: "smooth" }); else window.scrollTo({ top: 0, behavior: "smooth" }); }; /* Jump to a specific page in the (paginated) list. Loads enough rows to cover the page, then scrolls the table viewport so the page's first row sits near the top. Uses a tiny rAF chain so the freshly-rendered rows are in the DOM before we measure them. */ /* Inline loading flag for jump-to-far-page. The fetch can take several seconds for deep jumps (each page = 1 round-trip), so we surface a small banner while in-flight. */ const [paging, setPaging] = useStateAcc(false); /* Jump-to-page in the floating pill. Bumps the visible window up to the last row of the requested page and scrolls so that page's first row sits near the top. If the requested page isn't loaded yet from the API, we fetch enough records first. Uses a tiny rAF chain so the freshly-rendered rows are in the DOM before we measure them. */ const jumpToPage = async (pageIndex) => { const lastRow = pageIndex * PAGE_SIZE; const firstRowIdx = (pageIndex - 1) * PAGE_SIZE; /* 0-indexed within filtered list */ /* If the jump exceeds what's loaded and we're not filtering, pull enough pages from the API to honor it. */ if (!filtersActive && lastRow > window.COMPANIES.length) { setPaging(true); try { await window.BusinessTeamBoot?.ensureCompaniesLoaded(lastRow); } finally { setPaging(false); } } setVisibleCount(v => Math.max(v, Math.min(lastRow, totalCount))); /* Wait two frames so the new rows are committed, then scroll. */ requestAnimationFrame(() => requestAnimationFrame(() => { const scroller = document.querySelector(".page-scroll"); const rows = document.querySelectorAll("[data-account-row]"); const target = rows[firstRowIdx]; if (!scroller || !target) return; const scrollerRect = scroller.getBoundingClientRect(); const targetRect = target.getBoundingClientRect(); const delta = targetRect.top - scrollerRect.top - 80; /* leave headroom for sticky header */ scroller.scrollTo({ top: scroller.scrollTop + delta, behavior: "smooth" }); })); }; /* Unique values for each filterable column — derived from the unfiltered universe so options don't vanish once you pick one. Sorted, lifecycle ordered by stage. */ const universe = window.COMPANIES.concat(extra); const uniq = (arr) => Array.from(new Set(arr)).filter(Boolean); const filterOptions = { industry: uniq(universe.map(c => c.industry)).sort(), hqCity: uniq(universe.map(c => c.hqCity)).sort(), employeeRange: ["<50", "51-200", "201-500", "501–1k", "1k-5k", "5k-10k", "10k+"] .filter(v => universe.some(c => c.employeeRange === v)), lifecycle: uniq(universe.map(c => c.abm.lifecycleStage)), priority: ["high", "medium", "low"].filter(v => universe.some(c => c.gtmPriority === v)), }; const activeColumnFilterCount = Object.values(columnFilters).reduce((n, arr) => n + (arr.length ? 1 : 0), 0); const handleSync = () => { if (syncing) return; setSyncing(true); setTimeout(() => { setSyncing(false); }, 1600); }; return ( <> } tabs={<> setFilter("all")} badge={window.COMPANIES.concat(extra).length}>All accounts setFilter("priority")} badge={window.COMPANIES.concat(extra).filter(c => c.gtmPriority === "high").length}>High priority setFilter("engaged")} badge={window.COMPANIES.concat(extra).filter(c => ["engaged","opportunity"].includes(c.abm.lifecycleStage)).length}>Engaged Customers My accounts } />
setSearch(e.target.value)} style={{ width: "min(180px, 100%)" }} /> Sort: {{ priority: "Priority", recent: "Recent activity", stale: "Lack of activity", contacts: "Number of contacts", name: "Name (A–Z)" }[sortBy]}} items={[ { icon: "trending-up", label: "Priority", active: sortBy === "priority", onClick: () => setSortBy("priority") }, { icon: "clock", label: "Recent activity", active: sortBy === "recent", onClick: () => setSortBy("recent") }, { icon: "alert", label: "Lack of activity", active: sortBy === "stale", onClick: () => setSortBy("stale") }, { icon: "users", label: "Number of contacts", active: sortBy === "contacts", onClick: () => setSortBy("contacts") }, { icon: "sort", label: "Name (A–Z)", active: sortBy === "name", onClick: () => setSortBy("name") }, ]} /> {`Group: ${({ none: "None", lifecycle: "Lifecycle", industry: "Industry", priority: "Priority", owner: "Owner" })[groupBy]}`}} items={[ { icon: "circle", label: "No grouping", active: groupBy === "none", onClick: () => setGroupBy("none") }, { icon: "circle-dot", label: "Lifecycle", active: groupBy === "lifecycle", onClick: () => setGroupBy("lifecycle") }, { icon: "briefcase", label: "Industry", active: groupBy === "industry", onClick: () => setGroupBy("industry") }, { icon: "flag", label: "GTM priority", active: groupBy === "priority", onClick: () => setGroupBy("priority") }, { icon: "user", label: "Owner", active: groupBy === "owner", onClick: () => setGroupBy("owner") }, ]} /> {activeColumnFilterCount > 0 && ( setColumnFilter(key, [])} onClearAll={clearAllColumnFilters} /> )}
setPeekId(id)} columnFilters={columnFilters} filterOptions={filterOptions} onColumnFilter={setColumnFilter} selectedIds={selectedIds} onToggleSelected={toggleSelected} onSelectMany={selectMany} onDeselectMany={deselectMany} visibleCols={visibleCols} columnOrder={columnOrder} contactStatsByCompany={contactStatsByCompany} />
{/* Infinite-scroll sentinel + footer indicator. */}
{hasMore ? (
Loading more accounts…
) : totalCount > PAGE_SIZE ? (
You've reached the end · {totalCount} account{totalCount === 1 ? "" : "s"}
) : null}
{/* Inline indicator while we pre-fetch a far page. */} {paging && (
Loading more accounts from server…
)} {/* Floating pagination pill — shows progress and a back-to-top affordance. */}