// crm-accounts.jsx — Accounts + Contacts // ACT_ICONS and ACT_TYPES are defined in crm-leads.jsx (loaded first) const { useState, useEffect, useCallback } = React; function Accounts({ user, showToast, quickAdd, openAccountId, onOpenedAccount }) { const [accounts, setAccounts] = useState([]); const [selected, setSelected] = useState(null); const [showAdd, setShowAdd] = useState(false); const [showImport, setShowImport] = useState(false); const [loading, setLoading] = useState(false); const [statusFilter, setStatusFilter] = useState('active'); // active | closed | all const [search, setSearch] = useState(''); const [industryFilter, setIndustryFilter] = useState(''); const [repFilter, setRepFilter] = useState(''); const [sortCol, setSortCol] = useState('companyName'); const [sortDir, setSortDir] = useState('asc'); const [emailAcc, setEmailAcc] = useState(null); // { id, toEmail, toName } useEffect(() => { if (!quickAdd) return; if (quickAdd.type === 'account') setShowAdd(true); if (quickAdd.type === 'sale') showToast('Open an account and go to the Sales tab to record a sale.', 'default'); }, [quickAdd]); const load = useCallback(async () => { setLoading(true); try { const filters = user.role === 'rep' && !user.isAdmin ? { repId: user.id } : {}; if (statusFilter !== 'active') filters.showClosed = true; const all = await CRM.AccountsAPI.getAll(filters); setAccounts(all); } catch (e) { showToast('Failed to load accounts: ' + e.message, 'error'); } finally { setLoading(false); } }, [user, statusFilter]); useEffect(() => { load(); }, [load]); // Deep-link from the dashboard widgets: open a specific account's detail // once the list has loaded. useEffect(() => { if (!openAccountId || accounts.length === 0) return; const acc = accounts.find(a => a.id === openAccountId); if (acc) setSelected(acc); else showToast('Account not found (it may be closed or outside your assignments).', 'default'); onOpenedAccount?.(); }, [openAccountId, accounts]); const reps = CRM.UsersAPI.getAll().filter(u => u.role === 'rep'); const industries = [...new Set(accounts.map(a => a.industry).filter(Boolean))].sort(); // ── Client-side filtering ────────────────────────────────── let displayed = accounts; if (search) { const s = search.toLowerCase(); displayed = displayed.filter(a => a.companyName?.toLowerCase().includes(s) || a.industry?.toLowerCase().includes(s) || a.address?.toLowerCase().includes(s) ); } if (statusFilter === 'closed') displayed = displayed.filter(a => a.isActive === false); if (industryFilter) displayed = displayed.filter(a => a.industry === industryFilter); if (repFilter) displayed = displayed.filter(a => a.assignedRepId === repFilter || a.assignedRep?.id === repFilter); // ── Client-side sorting ──────────────────────────────────── const toggleSort = col => { if (sortCol === col) setSortDir(d => d === 'asc' ? 'desc' : 'asc'); else { setSortCol(col); setSortDir('asc'); } }; displayed = [...displayed].sort((a, b) => { let av, bv; if (sortCol === 'rep') { av = (a.assignedRep || CRM.UsersAPI.getById(a.assignedRepId))?.name || ''; bv = (b.assignedRep || CRM.UsersAPI.getById(b.assignedRepId))?.name || ''; } else { av = a[sortCol] ?? ''; bv = b[sortCol] ?? ''; } if (typeof av === 'number' && typeof bv === 'number') return sortDir === 'asc' ? av - bv : bv - av; return sortDir === 'asc' ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av)); }); // Paged render — "all statuses" can include thousands of accounts; // mounting every row crashes the tab (renderer OOM). 100 per page with // ‹ › arrows in the status bar above the table. const PAGE_SIZE = 100; const [page, setPage] = useState(0); useEffect(() => { setPage(0); }, [statusFilter, search, industryFilter, repFilter]); const pageCount = Math.max(1, Math.ceil(displayed.length / PAGE_SIZE)); const safePage = Math.min(page, pageCount - 1); const shownAccounts = displayed.slice(safePage * PAGE_SIZE, (safePage + 1) * PAGE_SIZE); const rangeFrom = displayed.length === 0 ? 0 : safePage * PAGE_SIZE + 1; const rangeTo = Math.min(displayed.length, (safePage + 1) * PAGE_SIZE); // ── Sortable column header ───────────────────────────────── const Th = ({ col, label, style }) => { const active = sortCol === col; return ( toggleSort(col)} style={{cursor:'pointer', userSelect:'none', whiteSpace:'nowrap', ...style}}> {label} {active && sortDir === 'asc' ? ' ▲' : ' ▼'} ); }; // Expiring within 90 days const isExpiringSoon = dateStr => { if (!dateStr) return false; const diff = (new Date(dateStr) - new Date()) / 86400000; return diff >= 0 && diff <= 90; }; const active = accounts.filter(a => a.isActive !== false); const closed = accounts.filter(a => a.isActive === false); const hasFilters = search || industryFilter || repFilter; const quickEmail = async (e, acc) => { e.stopPropagation(); try { const contacts = await CRM.ContactsAPI.getByAccount(acc.id); const primary = contacts.find(c => c.isPrimary) || contacts[0]; setEmailAcc({ id: acc.id, toEmail: primary?.email || '', toName: primary?.name || acc.companyName }); } catch { setEmailAcc({ id: acc.id, toEmail: '', toName: acc.companyName }); } }; return (
{/* Filter bar */}
setSearch(e.target.value)} /> {user.isAdmin && ( )}
{/* Count + clear filters */}
{loading ? 'Loading…' : `${displayed.length}${displayed.length !== accounts.length ? ` of ${active.length}` : ''} active account${active.length!==1?'s':''}${closed.length>0?`, ${closed.length} closed`:''}`} {hasFilters && ( )}
{/* Table */}
{/* Pager status bar */}
Showing {rangeFrom.toLocaleString()}–{rangeTo.toLocaleString()} of {displayed.length.toLocaleString()}
Page {safePage + 1} of {pageCount}
{loading && ( )} {!loading && displayed.length === 0 && ( )} {shownAccounts.map(acc => { const rep = acc.assignedRep || CRM.UsersAPI.getById(acc.assignedRepId); const isClosed = acc.isActive === false; const expiring = !isClosed && isExpiringSoon(acc.contractEnd); return ( setSelected(acc)} style={{opacity: isClosed ? 0.65 : 1}}> ); })}
Status
Loading…
{accounts.length === 0 ? 'No accounts yet. Won deals can be converted to accounts.' : 'No accounts match your filters.'}
{acc.companyName.charAt(0)}
{acc.companyName}
{(acc.city || acc.state || acc.address) && (
{(acc.city || acc.state) ? [acc.city, acc.state].filter(Boolean).join(', ') : acc.address.split(',').slice(-2).join(',').trim()}
)}
{acc.industry||'—'} {acc.contractValue ? '$'+Number(acc.contractValue).toLocaleString() : '—'} {acc.singlePurchaseValue ? '$'+Number(acc.singlePurchaseValue).toLocaleString() : '—'} {acc.contractEnd || '—'} {expiring && ⚠️} {rep?.name||'—'} {isClosed ? Closed : Active} e.stopPropagation()} style={{padding:'0 8px'}}>
{selected && ( { setSelected(null); load(); }} showToast={showToast} /> )} {showImport && ( setShowImport(false)} onDone={() => { load(); showToast('Accounts imported successfully!', 'success'); }} /> )} {showAdd && ( setShowAdd(false)} onSave={async data => { try { await CRM.AccountsAPI.create(data); await load(); setShowAdd(false); showToast('Account created!', 'success'); } catch (e) { showToast('Failed to create account: ' + e.message, 'error'); } }} /> )} {emailAcc && ( setEmailAcc(null)} showToast={showToast} /> )}
); } function AccountDetailModal({ account: initialAcc, user, onClose, showToast }) { const [acc, setAcc] = useState(initialAcc); const [tab, setTab] = useState('overview'); const [contacts, setContacts] = useState([]); const [tickets, setTickets] = useState([]); const [ticketCap, setTicketCap] = useState(25); // bound rendered ticket rows const [contactCap, setContactCap] = useState(50); // bound rendered contact cards const [actCap, setActCap] = useState(30); // bound rendered activity timeline const [files, setFiles] = useState([]); const [sales, setSales] = useState([]); const [activities, setActivities] = useState([]); const [syncedEmails, setSyncedEmails] = useState([]); const [orders, setOrders] = useState([]); const [proposals, setProposals] = useState([]); const [actType, setActType] = useState('note'); const [actText, setActText] = useState(''); const [aodUsage, setAodUsage] = useState([]); const [aodLoaded, setAodLoaded] = useState(false); const [uploading, setUploading] = useState(false); const [editing, setEditing] = useState(false); const [saleForm, setSaleForm] = useState({ amount: '', description: '', saleDate: new Date().toISOString().split('T')[0], isSinglePurchase: false }); const [addingSale, setAddingSale] = useState(false); const [savingSale, setSavingSale] = useState(false); const [editingSale, setEditingSale] = useState(null); // sale id being edited const [editSaleForm, setEditSaleForm] = useState({}); const [savingEditSale, setSavingEditSale] = useState(false); const [form, setForm] = useState({...initialAcc}); const [showAddContact, setShowAddContact] = useState(false); const [contactForm, setContactForm] = useState({ name:'', title:'', email:'', phone:'', primary:false }); const [editingContactId, setEditingContactId] = useState(null); const [editContactForm, setEditContactForm] = useState({ name:'', title:'', email:'', phone:'', primary:false }); const [saving, setSaving] = useState(false); const [actioning, setActioning] = useState(false); const [emailing, setEmailing] = useState(false); const [analyzing, setAnalyzing] = useState(false); const closeAccount = async () => { if (!confirm(`Mark "${acc.companyName}" as closed? It will be hidden from the main list.`)) return; setActioning(true); try { const updated = await CRM.AccountsAPI.close(acc.id); setAcc(updated); showToast('Account closed.', 'success'); } catch (e) { showToast('Failed to close account: ' + e.message, 'error'); } finally { setActioning(false); } }; const reopenAccount = async () => { setActioning(true); try { const updated = await CRM.AccountsAPI.reopen(acc.id); setAcc(updated); showToast('Account reopened!', 'success'); } catch (e) { showToast('Failed to reopen account: ' + e.message, 'error'); } finally { setActioning(false); } }; const deleteAccount = async () => { if (!confirm(`Permanently delete "${acc.companyName}"? This cannot be undone.`)) return; setActioning(true); try { await CRM.AccountsAPI.delete(acc.id); showToast('Account deleted.', 'success'); onClose(); } catch (e) { showToast('Failed to delete account: ' + e.message, 'error'); setActioning(false); } }; const loadAod = async () => { if (aodLoaded) return; try { const rows = await CRM.AodAPI.getByAccount(acc.id); setAodUsage(rows); setAodLoaded(true); } catch (e) { showToast('Failed to load AoD usage.', 'error'); } }; const loadActivities = async () => { try { const acts = await CRM.ActivitiesAPI.getByAccountId(acc.id); setActivities(acts); } catch (e) { showToast('Failed to load activities.', 'error'); } }; const addActivity = async () => { if (!actText.trim()) return; try { await CRM.ActivitiesAPI.createForAccount(acc.id, { type: actType, content: actText }); setActText(''); await loadActivities(); showToast('Activity logged!', 'success'); } catch (e) { showToast('Failed to log activity.', 'error'); } }; const load = async () => { // Each API independently catches so a single failure doesn't blank the tab. const failed = []; const safe = async (label, fn, setter, fallback) => { try { setter(await fn()); } catch (e) { failed.push(`${label}: ${e.message}`); setter(fallback); } }; await Promise.all([ safe('contacts', () => CRM.ContactsAPI.getByAccount(acc.id), setContacts, []), safe('tickets', () => CRM.TicketsAPI.getAll({ accountId: acc.id, limit: 500 }), setTickets, []), safe('files', () => CRM.FilesAPI.getByAccount(acc.id), setFiles, []), safe('sales', () => CRM.AccountSalesAPI.getByAccount(acc.id), setSales, []), safe('activities', () => CRM.ActivitiesAPI.getByAccountId(acc.id), setActivities, []), safe('orders', () => CRM.OrderFormsAPI.getByAccount(acc.id), setOrders, []), safe('proposals', () => CRM.ProposalFormsAPI.getByAccount(acc.id), setProposals, []), // Synced M365 email — silently empty if Graph sync is disabled/unavailable CRM.GraphAPI.accountEmails(acc.id).catch(() => []).then(setSyncedEmails), ]); if (failed.length) { console.warn('Account load partial failure:', failed); // Full first error — "tickets: " beats a silent empty tab showToast('Some account data failed to load — ' + failed[0], 'error'); } }; useEffect(() => { load(); }, [acc.id]); const uploadFile = async (e) => { const file = e.target.files[0]; if (!file) return; e.target.value = ''; setUploading(true); try { await CRM.FilesAPI.uploadForAccount(acc.id, file); const fls = await CRM.FilesAPI.getByAccount(acc.id); setFiles(fls); showToast('File uploaded!', 'success'); } catch (err) { showToast('Upload failed: ' + err.message, 'error'); } finally { setUploading(false); } }; const deleteFile = async (id, name) => { if (!confirm(`Delete "${name}"?`)) return; try { await CRM.FilesAPI.delete(id); setFiles(f => f.filter(x => x.id !== id)); showToast('File deleted.'); } catch (e) { showToast('Failed to delete file.', 'error'); } }; const set = (k,v) => setForm(f => ({...f,[k]:v})); const setC = (k,v) => setContactForm(f => ({...f,[k]:v})); const save = async () => { setSaving(true); try { const updated = await CRM.AccountsAPI.update(acc.id, form); setAcc(updated); setEditing(false); showToast('Account updated!', 'success'); } catch (e) { showToast('Failed to save: ' + e.message, 'error'); } finally { setSaving(false); } }; const addContact = async () => { if (!contactForm.name) return; try { await CRM.ContactsAPI.create({ ...contactForm, accountId: acc.id }); setContactForm({ name:'', title:'', email:'', phone:'', primary:false }); setShowAddContact(false); await load(); showToast('Contact added!', 'success'); } catch (e) { showToast('Failed to add contact: ' + e.message, 'error'); } }; const removeContact = async (id) => { if (!confirm('Remove this contact?')) return; try { await CRM.ContactsAPI.delete(id); await load(); showToast('Contact removed.'); } catch (e) { showToast('Failed to remove contact.', 'error'); } }; const startEditContact = c => { setEditingContactId(c.id); setEditContactForm({ name: c.name || '', title: c.title || '', email: c.email || '', phone: c.phone || '', primary: !!c.isPrimary, }); }; const cancelEditContact = () => { setEditingContactId(null); }; const setEC = (k, v) => setEditContactForm(f => ({ ...f, [k]: v })); const saveEditContact = async () => { if (!editContactForm.name.trim()) return showToast('Name is required.', 'error'); try { await CRM.ContactsAPI.update(editingContactId, editContactForm); setEditingContactId(null); await load(); showToast('Contact updated.', 'success'); } catch (e) { showToast('Failed to update contact: ' + e.message, 'error'); } }; const makePrimary = async (id) => { try { await CRM.ContactsAPI.update(id, { primary: true }); await load(); showToast('Primary contact updated.', 'success'); } catch (e) { showToast('Failed to update primary contact.', 'error'); } }; const reps = CRM.UsersAPI.getAll().filter(u => u.role === 'rep'); const openTickets = tickets.filter(t => t.status !== 'closed'); const recordSale = async () => { if (!saleForm.amount || parseFloat(saleForm.amount) <= 0) return; setSavingSale(true); try { const s = await CRM.AccountSalesAPI.create(acc.id, saleForm); setSales(prev => [s, ...prev]); setSaleForm({ amount: '', description: '', saleDate: new Date().toISOString().split('T')[0], isSinglePurchase: false }); setAddingSale(false); showToast('Sale recorded!', 'success'); } catch (e) { showToast('Failed to record sale: ' + e.message, 'error'); } finally { setSavingSale(false); } }; const deleteSale = async (saleId) => { if (!confirm('Delete this sale record?')) return; try { await CRM.AccountSalesAPI.delete(acc.id, saleId); setSales(prev => prev.filter(s => s.id !== saleId)); showToast('Sale deleted.'); } catch (e) { showToast('Failed to delete sale.', 'error'); } }; const startEditSale = (s) => { setEditingSale(s.id); setEditSaleForm({ amount: s.amount, description: s.description || '', saleDate: s.saleDate, isSinglePurchase: s.isSinglePurchase }); }; const updateSale = async () => { if (!editSaleForm.amount || parseFloat(editSaleForm.amount) <= 0) return; setSavingEditSale(true); try { const updated = await CRM.AccountSalesAPI.update(acc.id, editingSale, editSaleForm); setSales(prev => prev.map(s => s.id === editingSale ? updated : s)); setEditingSale(null); showToast('Sale updated!', 'success'); } catch (e) { showToast('Failed to update sale.', 'error'); } finally { setSavingEditSale(false); } }; const renderAodTab = () => { if (!aodLoaded) { return (
⏳
Loading AoD usage data…
); } if (!acc.uri) { return (
🔗
No AoD URI set for this account. Edit the Overview tab to add a URI, then re-import billing data.
); } if (aodUsage.length === 0) { return (
📊
No AoD usage data imported for this account yet.
Use Admin → AoD Import to load billing spreadsheets.
); } // Group by invoiceDate (ISO string) const grouped = {}; aodUsage.forEach(row => { const key = row.invoiceDate; if (!grouped[key]) grouped[key] = []; grouped[key].push(row); }); const periods = Object.keys(grouped).sort((a, b) => b.localeCompare(a)); const fmtDate = (iso) => { if (!iso) return '—'; const [y, m, d] = iso.split('-'); return new Date(Number(y), Number(m) - 1, Number(d)).toLocaleDateString(undefined, { year:'numeric', month:'short', day:'numeric' }); }; const fmtMonth = (iso) => { if (!iso) return '—'; const [y, m] = iso.split('-'); return new Date(Number(y), Number(m) - 1, 1).toLocaleDateString(undefined, { year:'numeric', month:'long' }); }; const fmtNum = (n, dec) => Number(n||0).toLocaleString(undefined, { minimumFractionDigits: dec||2, maximumFractionDigits: dec||2 }); return (
{periods.map(invoiceDate => { const rows = grouped[invoiceDate]; const periodTotal = rows.reduce((s, r) => s + (r.total || 0), 0); const first = rows[0]; return (
{fmtMonth(invoiceDate)}
Period: {fmtDate(first.periodFrom)} – {fmtDate(first.periodTo)} {' · '}Invoice: {fmtDate(invoiceDate)}
${fmtNum(periodTotal)}
{rows.map(r => ( ))}
Description Count Unit Rate Total
{r.description} {fmtNum(r.count, 4)} ${fmtNum(r.unitValue, 4)} ${fmtNum(r.total)}
); })}
); }; const STAT_BADGES = { open:'badge-blue', 'in-progress':'badge-purple', pending:'badge-amber', resolved:'badge-green', closed:'badge-gray' }; const PRI_BADGES = { low:'badge-gray', medium:'badge-amber', high:'badge-red', urgent:'badge-red' }; return (<>
e.stopPropagation()}>
{acc.companyName}
{acc.industry}{acc.address ? ` · ${acc.address}` : ''}
{openTickets.length > 0 && {openTickets.length} open ticket{openTickets.length!==1?'s':''}} {acc.isActive === false && Closed} {user.isAdmin && ( acc.isActive === false ? : )} {user.isAdmin && ( )}
{['overview','contacts','tickets','sales','files','activity','aod','orders','proposals'] .filter(t => t !== 'aod' || CRM.connectors?.aod !== false).map(t => ( ))}
{/* OVERVIEW */} {tab === 'overview' && (
Contract Value
${(acc.contractValue||0).toLocaleString()}
Single Purchase
{acc.singlePurchaseValue ? '$'+Number(acc.singlePurchaseValue).toLocaleString() : '—'}
Contract Start
{acc.contractStart||'—'}
Contract End
{acc.contractEnd||'—'}
{!editing ? ( <>
Account Details
{CRM.connectors?.aod !== false && }
Assignment
{acc.notes &&
} ) : ( <>
set('companyName',e.target.value)} />
set('contractValue',parseFloat(e.target.value)||0)} />
set('singlePurchaseValue',parseFloat(e.target.value)||0)} placeholder="0" />
set('contractStart',e.target.value)} />
set('contractEnd',e.target.value)} />
set('address1',e.target.value)} />
set('address2',e.target.value)} />
set('city',e.target.value)} />
set('state',e.target.value)} maxLength={2} style={{textTransform:'uppercase'}} />
set('zip',e.target.value)} maxLength={10} />
{user.role==='admin' &&
} {CRM.connectors?.aod !== false && (
set('uri',e.target.value)} placeholder="e.g. 25-cintime" />
)}