// Campaign Table Component const { useState, useMemo } = React; function CampaignTable({ campaigns, onTriggerCall }) { const [sortBy, setSortBy] = useState('created'); const [sortOrder, setSortOrder] = useState('desc'); const sortedCampaigns = useMemo(() => { const sorted = [...campaigns].sort((a, b) => { let aVal, bVal; switch(sortBy) { case 'name': aVal = a.name.toLowerCase(); bVal = b.name.toLowerCase(); break; case 'totalLeads': aVal = a.totalLeads; bVal = b.totalLeads; break; case 'created': default: aVal = new Date(a.created); bVal = new Date(b.created); } if (sortOrder === 'asc') { return aVal > bVal ? 1 : -1; } else { return aVal < bVal ? 1 : -1; } }); return sorted; }, [campaigns, sortBy, sortOrder]); const handleSort = (column) => { if (sortBy === column) { setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc'); } else { setSortBy(column); setSortOrder('desc'); } }; const SortIcon = ({ column }) => { if (sortBy !== column) return null; return ( {sortOrder === 'asc' ? ( ) : ( )} ); }; const TableHeader = ({ label, column, width }) => ( column && handleSort(column)} style={{ padding: '14px 16px', textAlign: 'left', fontSize: '13px', fontWeight: 600, color: '#5B6B7A', borderBottom: '1px solid #ECECEA', cursor: column ? 'pointer' : 'default', userSelect: 'none', width: width || 'auto' }} >
{label} {column && }
); return (
{sortedCampaigns.map((campaign) => ( e.currentTarget.style.background = '#FAFAFA'} onMouseLeave={(e) => e.currentTarget.style.background = '#fff'} > ))}
{campaign.name} {campaign.aiAgent} {campaign.totalLeads} {campaign.connectedLeads} {campaign.totalCalls} {campaign.connectedCalls}
{campaign.created}
alert('Edit campaign: ' + campaign.name)} icon={ } tooltip="Edit" /> { if (confirm('Delete campaign "' + campaign.name + '"?')) { alert('Delete functionality would be implemented here'); } }} icon={ } tooltip="Delete" />
); }