// Utilities + icons for INLEARN CRM // Expose React hooks globally so each Babel script can use them window.useState = React.useState; window.useEffect = React.useEffect; window.useRef = React.useRef; window.useMemo = React.useMemo; window.useCallback = React.useCallback; window.fmtZAR = (n) => 'R' + (n || 0).toLocaleString('en-ZA'); window.fmtZARShort = (n) => { if (n == null) return '—'; if (n >= 1000) return 'R' + (n/1000).toFixed(n % 1000 === 0 ? 0 : 1) + 'k'; return 'R' + n; }; window.fmtDate = (iso) => { if (!iso) return '—'; const d = new Date(iso); return d.toLocaleDateString('en-ZA', { day: 'numeric', month: 'short' }); }; window.fmtDateLong = (iso) => { if (!iso) return '—'; const d = new Date(iso); return d.toLocaleDateString('en-ZA', { day: 'numeric', month: 'short', year: 'numeric' }); }; window.fmtDateTime = (iso) => { if (!iso) return '—'; const d = new Date(iso); const date = d.toLocaleDateString('en-ZA', { day: 'numeric', month: 'short' }); const time = d.toLocaleTimeString('en-ZA', { hour: '2-digit', minute: '2-digit', hour12: false }); return `${date}, ${time}`; }; window.fmtTimeAgo = (iso) => { if (!iso) return '—'; const d = new Date(iso); const now = new Date(); const diffMs = now - d; const mins = Math.floor(diffMs / 60000); if (mins < 1) return 'just now'; if (mins < 60) return mins + 'm ago'; const hrs = Math.floor(mins/60); if (hrs < 24) return hrs + 'h ago'; const days = Math.floor(hrs/24); if (days < 30) return days + 'd ago'; return d.toLocaleDateString('en-ZA', { day: 'numeric', month: 'short' }); }; window.initials = (name) => name.split(' ').filter(Boolean).slice(0,2).map(s => s[0]).join('').toUpperCase(); // ---------- Three-entity helpers (Contacts / Deals) ---------- window.contactFullName = (c) => c ? `${c.firstName} ${c.lastName}`.trim() : '—'; window.getContact = (contacts, id) => (contacts || []).find(c => c.id === id) || null; window.dealsForContact = (deals, contactId) => (deals || []).filter(d => d.studentId === contactId || d.payerId === contactId); window.lifetimeValue = (deals, contactId) => dealsForContact(deals, contactId).filter(d => d.stage === 'FulfillmentReady') .reduce((s, d) => s + (d.customPackagePrice || 0), 0); window.referralsFor = (contacts, contactId) => (contacts || []).filter(c => (c.relationships || []).some(r => r.kind === 'referredBy' && r.contactId === contactId)); window.isWonStage = (stageId) => stageId === 'FulfillmentReady'; window.isLostStage = (stageId) => stageId === 'LostDisqualified'; window.isActiveStage = (stageId) => !isWonStage(stageId) && !isLostStage(stageId); // Available placeholder tokens for playbook templates (used by the Playbook editor + lead drawer) window.PLAYBOOK_TOKENS = [ { key: '{name}', desc: 'Lead full name' }, { key: '{studentName}', desc: 'Student name (if parent submitted)' }, { key: '{grade}', desc: 'Grade / year (e.g. Grade 10)' }, { key: '{subjects}', desc: 'Subjects (e.g. Mathematics/Accounting)' }, { key: '{package}', desc: 'Selected package (Bronze/Silver/Gold/Platinum)' }, { key: '{price}', desc: 'Monthly package price (R formatted)' }, { key: '{callDate}', desc: 'Clarity call date' }, { key: '{callTime}', desc: 'Clarity call time' }, { key: '{invoiceNumber}', desc: 'Invoice number' }, { key: '{invoiceAmount}', desc: 'Invoice amount (R formatted)' }, ]; // Replace {placeholder} tokens with real values from a lead. window.renderPlaybookText = (text, lead) => { if (!text || !lead) return text || ''; const values = { '{name}': lead.name || '', '{studentName}': lead.studentName || lead.name || '', '{grade}': lead.gradeOrYear || '', '{subjects}': (lead.subjects || []).join('/'), '{package}': lead.selectedPackage || '', '{price}': lead.customPackagePrice ? fmtZAR(lead.customPackagePrice) : '', '{callDate}': lead.clarityCallDate || '', '{callTime}': lead.clarityCallTime || '', '{invoiceNumber}': lead.invoiceNumber || '', '{invoiceAmount}': lead.invoiceAmount ? fmtZAR(lead.invoiceAmount) : '', }; return Object.entries(values).reduce((acc, [k,v]) => acc.split(k).join(v), text); }; // Deterministic pastel for avatar fill, keyed by string window.avatarColor = (s) => { const palette = ['#4F46E5','#059669','#D97706','#DB2777','#0891B2','#7C3AED','#B45309','#0EA5E9']; let h = 0; for (let i=0;i { const { children, size = 16, stroke = 'currentColor', fill = 'none', sw = 1.75, className = '' } = props; return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill, stroke, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round', className, }, children); }; window.Icon = { Search: (p) => , Plus: (p) => , ChevronDown: (p) => , ChevronRight: (p) => , ChevronLeft: (p) => , X: (p) => , Filter: (p) => , Grid: (p) => , Layers: (p) => , Users: (p) => , Pie: (p) => , Settings: (p) => , Inbox: (p) => , Bell: (p) => , Phone: (p) => , Mail: (p) => , Chat: (p) => , Calendar:(p) => , Book: (p) => , School: (p) => , Trash: (p) => , More: (p) => , Logout: (p) => , Shield: (p) => , Sparkles:(p)=> , Trend: (p) => , Alert: (p) => , Check: (p) => , Clock: (p) => , ArrowRight: (p) => , ArrowUp: (p) => , ArrowDown: (p) => , Refresh: (p) => , Dot: (p) => , Money: (p) => , Flame: (p) => , Box: (p) => , Tag: (p) => , };