// Main Campaigns App
const { useState, useMemo, useEffect } = React;
// Simple Authentication Wrapper Component
function SimpleAuthWrapper({ children }) {
const [authState, setAuthState] = useState({
loading: true,
authenticated: false,
user: null,
error: null
});
const [emailInput, setEmailInput] = useState('');
useEffect(() => {
// Check if user is already authenticated
const user = window.SimpleAuth.getCurrentUser();
if (user) {
setAuthState({
loading: false,
authenticated: true,
user,
error: null
});
} else {
setAuthState({
loading: false,
authenticated: false,
user: null,
error: null
});
}
}, []);
const handleSignIn = (e) => {
e.preventDefault();
setAuthState(prev => ({ ...prev, error: null }));
try {
const user = window.SimpleAuth.signIn(emailInput);
setAuthState({
loading: false,
authenticated: true,
user,
error: null
});
} catch (error) {
setAuthState(prev => ({
...prev,
error: error.message
}));
}
};
const handleSignOut = () => {
window.SimpleAuth.signOut();
setEmailInput('');
setAuthState({
loading: false,
authenticated: false,
user: null,
error: null
});
};
// Loading state
if (authState.loading) {
return (
);
}
// Not authenticated - show login
if (!authState.authenticated) {
return (
Campaigns - Northstar Fincorp
Enter your authorized email to continue
{authState.error && (
{authState.error}
)}
Only authorized Zomato emails can access this application
);
}
// Authenticated - show app with user context
return (
{React.cloneElement(children, { user: authState.user, onSignOut: handleSignOut })}
);
}
function App({ user, onSignOut }) {
const [data, setData] = useState(window.CAMPAIGNS_DATA);
const [search, setSearch] = useState('');
const [statusFilter, setStatusFilter] = useState('');
const [sortBy, setSortBy] = useState('created_at');
const [selectedCampaign, setSelectedCampaign] = useState(null);
const [showCallModal, setShowCallModal] = useState(false);
// Listen for Firebase real-time updates
useEffect(() => {
const handleCampaignAdded = () => {
console.log('🔄 Campaign added, refreshing React state...');
setData({ ...window.CAMPAIGNS_DATA });
};
const handleCampaignUpdated = () => {
console.log('🔄 Campaign updated, refreshing React state...');
setData({ ...window.CAMPAIGNS_DATA });
};
const handleCampaignRemoved = () => {
console.log('🔄 Campaign removed, refreshing React state...');
setData({ ...window.CAMPAIGNS_DATA });
};
const handleCampaignsReset = () => {
console.log('🗑️ Campaigns reset to demo data');
setData({ ...window.CAMPAIGNS_DATA });
};
window.addEventListener('firebase:campaign:added', handleCampaignAdded);
window.addEventListener('firebase:campaign:updated', handleCampaignUpdated);
window.addEventListener('firebase:campaign:removed', handleCampaignRemoved);
window.addEventListener('firebase:campaigns:reset', handleCampaignsReset);
return () => {
window.removeEventListener('firebase:campaign:added', handleCampaignAdded);
window.removeEventListener('firebase:campaign:updated', handleCampaignUpdated);
window.removeEventListener('firebase:campaign:removed', handleCampaignRemoved);
window.removeEventListener('firebase:campaigns:reset', handleCampaignsReset);
};
}, []);
// Handle refresh button - toggle Dushyant Garg campaign
const handleRefresh = () => {
console.log('🔄 Refresh button clicked');
// Create a deep copy of the data
const newData = {
campaigns: [...data.campaigns],
stats: { ...data.stats }
};
// Check if Dushyant campaign exists
const dushyantIndex = newData.campaigns.findIndex(c => c.name === 'Dushyant Garg');
if (dushyantIndex === -1) {
// Add Dushyant campaign at the beginning
console.log('➕ Adding Dushyant Garg campaign');
// Create a timestamp that's definitely more recent than any other campaign
const now = new Date();
const createdDate = `${now.getDate()} ${now.toLocaleString('en-US', { month: 'short' })}'${now.getFullYear().toString().slice(-2)}, ${now.toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true })}`;
// Calculate scheduled time (2 hours from now)
const scheduledTime = new Date(now.getTime() + 2 * 60 * 60 * 1000);
const hours = scheduledTime.getHours();
const minutes = scheduledTime.getMinutes().toString().padStart(2, '0');
const ampm = hours >= 12 ? 'PM' : 'AM';
const displayHours = hours % 12 || 12;
const scheduledTimeStr = `${displayHours}:${minutes} ${ampm}`;
const dushyantCampaign = {
id: 7,
name: "Dushyant Garg",
aiAgent: "Sales Outreach Bot",
aiAgentLink: "https://example.com/agent/3",
journeyId: "d88blilb30gs739rifbg",
journeyVersion: 19,
totalLeads: 1,
connectedLeads: 0,
connectedLeadsPercentage: 0,
totalCalls: 0,
connectedCalls: 0,
connectedCallsPercentage: 0,
created: createdDate,
createdBy: "T",
status: `Call at ${scheduledTimeStr} (in 2 hours)`,
statusType: "scheduled"
};
newData.campaigns.unshift(dushyantCampaign);
newData.stats.scheduled = 1;
} else {
// Remove Dushyant campaign
console.log('➖ Removing Dushyant Garg campaign');
newData.campaigns.splice(dushyantIndex, 1);
newData.stats.scheduled = 0;
}
// Update both state and window object
window.CAMPAIGNS_DATA = newData;
setData(newData);
console.log('✅ Campaigns count:', newData.campaigns.length);
};
// Filter campaigns based on search and status
const filteredCampaigns = useMemo(() => {
let campaigns = [...data.campaigns];
// Apply search filter
if (search.trim()) {
const query = search.toLowerCase();
campaigns = campaigns.filter(c =>
c.name.toLowerCase().includes(query) ||
c.aiAgent.toLowerCase().includes(query)
);
}
// Apply status filter
if (statusFilter) {
campaigns = campaigns.filter(c => c.statusType === statusFilter);
}
return campaigns;
}, [data.campaigns, search, statusFilter]);
const handleTriggerCall = (campaign) => {
setSelectedCampaign(campaign);
setShowCallModal(true);
};
return (
{/* Header */}
Campaigns
Manage your AI calling campaigns
{user?.email}
{/* Main Content */}
{/* Filters Bar */}
Filter by:
Showing {filteredCampaigns.length} of{' '}
{data.campaigns.length} campaigns
{/* Stats Cards */}
}
label="Running"
value={data.stats.running}
color="#E3F2FD"
textColor="#1565C0"
/>
}
label="Scheduled"
value={data.stats.scheduled}
color="#FFF3E0"
textColor="#E65100"
/>
}
label="Completed"
value={data.stats.completed}
color="#E8F5E9"
textColor="#2E7D32"
/>
}
label="Paused"
value={data.stats.paused}
color="#FFF9C4"
textColor="#F57F17"
/>
}
label="Cancelled"
value={data.stats.cancelled}
color="#FFEBEE"
textColor="#C62828"
/>
}
label="Draft"
value={data.stats.draft}
color="#F5F5F5"
textColor="#616161"
/>
{/* Campaigns Table */}
{/* Call Modal */}
{showCallModal && selectedCampaign && (
{
setShowCallModal(false);
setSelectedCampaign(null);
}}
/>
)}