|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>Enhanced Call Center Dialer</title> |
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
|
|
|
<script src="https://unpkg.com/react@17/umd/react.development.js"></script> |
|
|
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> |
|
|
|
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div id="root"></div> |
|
|
|
|
|
<script type="text/babel"> |
|
|
|
|
|
const Icon = ({ children, className = '' }) => ( |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
|
|
{children} |
|
|
</svg> |
|
|
); |
|
|
const Phone = (props) => <Icon {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></Icon>; |
|
|
const PhoneCall = (props) => <Icon {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /><path d="M14.05 2a9 9 0 0 1 8 7.94" /><path d="M14.05 6A5 5 0 0 1 18 10" /></Icon>; |
|
|
const PhoneOff = (props) => <Icon {...props}><path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91" /><line x1="23" y1="1" x2="1" y2="23" /></Icon>; |
|
|
const Plus = (props) => <Icon {...props}><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></Icon>; |
|
|
const Edit = (props) => <Icon {...props}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /></Icon>; |
|
|
const Trash2 = (props) => <Icon {...props}><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /></Icon>; |
|
|
const Clock = (props) => <Icon {...props}><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></Icon>; |
|
|
const User = (props) => <Icon {...props}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></Icon>; |
|
|
const BarChart3 = (props) => <Icon {...props}><path d="M3 3v18h18" /><path d="M18 17V9" /><path d="M13 17V5" /><path d="M8 17v-3" /></Icon>; |
|
|
const Play = (props) => <Icon {...props}><polygon points="5 3 19 12 5 21 5 3" /></Icon>; |
|
|
const Pause = (props) => <Icon {...props}><rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" /></Icon>; |
|
|
const SkipForward = (props) => <Icon {...props}><polygon points="5 4 15 12 5 20 5 4" /><line x1="19" y1="5" x2="19" y2="19" /></Icon>; |
|
|
|
|
|
|
|
|
const CallCenterDialer = () => { |
|
|
|
|
|
const [contacts, setContacts] = React.useState([ |
|
|
{ id: 1, name: 'John Smith', phone: '+1-555-0123', email: 'john@example.com', status: 'New', priority: 'High' }, |
|
|
{ id: 2, name: 'Sarah Johnson', phone: '+1-555-0124', email: 'sarah@example.com', status: 'Callback', priority: 'Medium' }, |
|
|
{ id: 3, name: 'Mike Wilson', phone: '+1-555-0125', email: 'mike@example.com', status: 'New', priority: 'Low' }, |
|
|
{ id: 4, name: 'Emma Davis', phone: '+1-555-0126', email: 'emma@example.com', status: 'Interested', priority: 'High' }, |
|
|
{ id: 5, name: 'Robert Brown', phone: '+1-555-0127', email: 'robert@example.com', status: 'Not Interested', priority: 'Low' } |
|
|
]); |
|
|
|
|
|
const [callHistory, setCallHistory] = React.useState([]); |
|
|
const [currentCall, setCurrentCall] = React.useState(null); |
|
|
const [isDialing, setIsDialing] = React.useState(false); |
|
|
const [callDuration, setCallDuration] = React.useState(0); |
|
|
const [autoDialing, setAutoDialing] = React.useState(false); |
|
|
const [showAddContact, setShowAddContact] = React.useState(false); |
|
|
const [activeTab, setActiveTab] = React.useState('dialer'); |
|
|
const [callNotes, setCallNotes] = React.useState(''); |
|
|
const [editingContact, setEditingContact] = React.useState(null); |
|
|
const [searchTerm, setSearchTerm] = React.useState(''); |
|
|
|
|
|
const [newContact, setNewContact] = React.useState({ |
|
|
name: '', phone: '', email: '', status: 'New', priority: 'Medium' |
|
|
}); |
|
|
|
|
|
const callTimer = React.useRef(null); |
|
|
const autoDialTimer = React.useRef(null); |
|
|
const autoDialCountdown = React.useRef(0); |
|
|
|
|
|
|
|
|
React.useEffect(() => { |
|
|
if (currentCall && !isDialing) { |
|
|
callTimer.current = setInterval(() => { |
|
|
setCallDuration(prev => prev + 1); |
|
|
}, 1000); |
|
|
} else { |
|
|
clearInterval(callTimer.current); |
|
|
} |
|
|
return () => clearInterval(callTimer.current); |
|
|
}, [currentCall, isDialing]); |
|
|
|
|
|
|
|
|
React.useEffect(() => { |
|
|
if (autoDialing && !currentCall) { |
|
|
const priorityOrder = { 'High': 1, 'Medium': 2, 'Low': 3 }; |
|
|
const availableContacts = contacts |
|
|
.filter(c => c.status === 'New' || c.status === 'Callback') |
|
|
.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]); |
|
|
|
|
|
if (availableContacts.length > 0) { |
|
|
autoDialCountdown.current = 3; |
|
|
const countdownInterval = setInterval(() => { |
|
|
autoDialCountdown.current -= 1; |
|
|
if(autoDialCountdown.current <= 0) { |
|
|
clearInterval(countdownInterval); |
|
|
dialContact(availableContacts[0]); |
|
|
} |
|
|
}, 1000); |
|
|
autoDialTimer.current = setTimeout(() => { }, 3000); |
|
|
} else { |
|
|
setAutoDialing(false); |
|
|
} |
|
|
} |
|
|
return () => { |
|
|
clearTimeout(autoDialTimer.current); |
|
|
}; |
|
|
}, [autoDialing, currentCall, contacts]); |
|
|
|
|
|
const dialContact = (contact) => { |
|
|
if (currentCall) return; |
|
|
setCurrentCall(contact); |
|
|
setIsDialing(true); |
|
|
setCallDuration(0); |
|
|
setCallNotes(''); |
|
|
setTimeout(() => setIsDialing(false), 2000); |
|
|
}; |
|
|
|
|
|
const endCall = () => { |
|
|
if (!currentCall) return; |
|
|
const callRecord = { |
|
|
id: Date.now(), |
|
|
contact: currentCall, |
|
|
duration: callDuration, |
|
|
timestamp: new Date(), |
|
|
notes: callNotes, |
|
|
outcome: 'Completed' |
|
|
}; |
|
|
setCallHistory(prev => [callRecord, ...prev]); |
|
|
setCurrentCall(null); |
|
|
setCallDuration(0); |
|
|
setCallNotes(''); |
|
|
}; |
|
|
|
|
|
const addContact = () => { |
|
|
if (!newContact.name || !newContact.phone) { |
|
|
alert("Name and Phone are required."); |
|
|
return; |
|
|
} |
|
|
const contact = { id: Date.now(), ...newContact }; |
|
|
setContacts(prev => [contact, ...prev]); |
|
|
setNewContact({ name: '', phone: '', email: '', status: 'New', priority: 'Medium' }); |
|
|
setShowAddContact(false); |
|
|
}; |
|
|
|
|
|
const updateContact = (updatedContact) => { |
|
|
setContacts(contacts.map(c => c.id === updatedContact.id ? updatedContact : c)); |
|
|
setEditingContact(null); |
|
|
}; |
|
|
|
|
|
const deleteContact = (contactId) => { |
|
|
if (window.confirm("Are you sure you want to delete this contact?")) { |
|
|
setContacts(prev => prev.filter(c => c.id !== contactId)); |
|
|
} |
|
|
}; |
|
|
|
|
|
const updateContactStatus = (contactId, status) => { |
|
|
setContacts(prev => prev.map(c => c.id === contactId ? { ...c, status } : c)); |
|
|
}; |
|
|
|
|
|
const skipNextContact = () => { |
|
|
const priorityOrder = { 'High': 1, 'Medium': 2, 'Low': 3 }; |
|
|
const availableContacts = contacts |
|
|
.filter(c => c.status === 'New' || c.status === 'Callback') |
|
|
.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]); |
|
|
|
|
|
if (availableContacts.length > 1) { |
|
|
|
|
|
const skippedContact = availableContacts[0]; |
|
|
setContacts(prev => [ |
|
|
...prev.filter(c => c.id !== skippedContact.id), |
|
|
skippedContact |
|
|
]); |
|
|
|
|
|
dialContact(availableContacts[1]); |
|
|
} else if (availableContacts.length === 1) { |
|
|
alert("This is the last contact in the queue."); |
|
|
} else { |
|
|
alert("No contacts available to skip to."); |
|
|
} |
|
|
}; |
|
|
|
|
|
const formatDuration = (seconds) => { |
|
|
const mins = Math.floor(seconds / 60); |
|
|
const secs = seconds % 60; |
|
|
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; |
|
|
}; |
|
|
|
|
|
const getPriorityColor = (priority) => ({ |
|
|
'High': 'text-red-600 bg-red-100', 'Medium': 'text-yellow-600 bg-yellow-100', 'Low': 'text-green-600 bg-green-100' |
|
|
}[priority] || 'text-gray-600 bg-gray-100'); |
|
|
|
|
|
const getStatusColor = (status) => ({ |
|
|
'New': 'text-blue-600 bg-blue-100', 'Callback': 'text-orange-600 bg-orange-100', 'Interested': 'text-teal-600 bg-teal-100', 'Not Interested': 'text-rose-600 bg-rose-100' |
|
|
}[status] || 'text-gray-600 bg-gray-100'); |
|
|
|
|
|
const filteredContacts = contacts.filter(c => |
|
|
c.name.toLowerCase().includes(searchTerm.toLowerCase()) || |
|
|
c.phone.toLowerCase().includes(searchTerm.toLowerCase()) || |
|
|
c.email.toLowerCase().includes(searchTerm.toLowerCase()) |
|
|
); |
|
|
|
|
|
|
|
|
const EditContactForm = ({ contact, onSave, onCancel }) => { |
|
|
const [formState, setFormState] = React.useState(contact); |
|
|
|
|
|
const handleChange = (e) => { |
|
|
const { name, value } = e.target; |
|
|
setFormState(prev => ({ ...prev, [name]: value })); |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<tr className="bg-blue-50"> |
|
|
<td className="p-2"><input name="name" value={formState.name} onChange={handleChange} className="w-full p-2 border rounded"/></td> |
|
|
<td className="p-2"><input name="phone" value={formState.phone} onChange={handleChange} className="w-full p-2 border rounded"/></td> |
|
|
<td className="p-2"><input name="email" value={formState.email} onChange={handleChange} className="w-full p-2 border rounded"/></td> |
|
|
<td className="p-2"> |
|
|
<select name="status" value={formState.status} onChange={handleChange} className="w-full p-2 border rounded"> |
|
|
<option>New</option><option>Callback</option><option>Interested</option><option>Not Interested</option> |
|
|
</select> |
|
|
</td> |
|
|
<td className="p-2"> |
|
|
<select name="priority" value={formState.priority} onChange={handleChange} className="w-full p-2 border rounded"> |
|
|
<option>High</option><option>Medium</option><option>Low</option> |
|
|
</select> |
|
|
</td> |
|
|
<td className="p-2"> |
|
|
<div className="flex gap-2"> |
|
|
<button onClick={() => onSave(formState)} className="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700">Save</button> |
|
|
<button onClick={onCancel} className="px-3 py-1 bg-gray-600 text-white rounded hover:bg-gray-700">Cancel</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
); |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4 font-sans"> |
|
|
<div className="max-w-7xl mx-auto"> |
|
|
<div className="bg-white rounded-xl shadow-lg p-6 mb-6"> |
|
|
<div className="flex justify-between items-center"> |
|
|
<div> |
|
|
<h1 className="text-3xl font-bold text-gray-800 flex items-center gap-3"> |
|
|
<Phone className="text-blue-600" /> Call Center Dialer |
|
|
</h1> |
|
|
<p className="text-gray-600 mt-1">Enhanced call management system</p> |
|
|
</div> |
|
|
<div className="text-right"> |
|
|
{currentCall ? ( |
|
|
<div className="bg-green-50 border border-green-200 rounded-lg p-4 animate-pulse"> |
|
|
<div className="flex items-center gap-2 text-green-700 font-semibold"> |
|
|
<PhoneCall className="w-5 h-5" /> {isDialing ? 'Dialing...' : 'Connected'} |
|
|
</div> |
|
|
<div className="text-lg font-mono text-green-600">{formatDuration(callDuration)}</div> |
|
|
</div> |
|
|
) : autoDialing ? ( |
|
|
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4"> |
|
|
<div className="text-yellow-700 font-semibold">Auto-dialing active...</div> |
|
|
<div className="text-yellow-600">Next call in {autoDialCountdown.current}s</div> |
|
|
</div> |
|
|
) : ( |
|
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4"> |
|
|
<div className="text-gray-500 font-semibold">Ready to dial</div> |
|
|
<div className="text-gray-400">No active call</div> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div className="bg-white rounded-xl shadow-lg mb-6"> |
|
|
<div className="flex border-b"> |
|
|
{[{ id: 'dialer', label: 'Dialer', icon: Phone }, { id: 'contacts', label: 'Contacts', icon: User }, { id: 'history', label: 'Call History', icon: Clock }, { id: 'stats', label: 'Statistics', icon: BarChart3 }].map(tab => ( |
|
|
<button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`flex-grow md:flex-grow-0 flex items-center justify-center gap-2 px-6 py-4 font-medium transition-colors ${activeTab === tab.id ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50' : 'text-gray-600 hover:text-blue-600 hover:bg-gray-50'}`}> |
|
|
<tab.icon className="w-5 h-5" /> <span className="hidden md:inline">{tab.label}</span> |
|
|
</button> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{currentCall && ( |
|
|
<div className="bg-white rounded-xl shadow-lg p-6 mb-6 border-l-4 border-green-500"> |
|
|
<div className="flex justify-between items-start"> |
|
|
<div className="flex-1"> |
|
|
<h3 className="text-xl font-semibold text-gray-800 mb-2">Active Call: {currentCall.name}</h3> |
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div><p className="text-gray-600"><strong>Phone:</strong> {currentCall.phone}</p><p className="text-gray-600"><strong>Email:</strong> {currentCall.email}</p></div> |
|
|
<div><span className={`px-3 py-1 rounded-full text-sm font-medium ${getPriorityColor(currentCall.priority)}`}>{currentCall.priority} Priority</span></div> |
|
|
</div> |
|
|
<div className="mb-4"> |
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Call Notes</label> |
|
|
<textarea value={callNotes} onChange={(e) => setCallNotes(e.target.value)} className="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500" rows="3" placeholder="Add notes..."/> |
|
|
</div> |
|
|
<div className="flex flex-wrap gap-2 mb-4"> |
|
|
<button onClick={() => updateContactStatus(currentCall.id, 'Interested')} className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors">Mark Interested</button> |
|
|
<button onClick={() => updateContactStatus(currentCall.id, 'Callback')} className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors">Schedule Callback</button> |
|
|
<button onClick={() => updateContactStatus(currentCall.id, 'Not Interested')} className="px-4 py-2 bg-rose-600 text-white rounded-lg hover:bg-rose-700 transition-colors">Not Interested</button> |
|
|
</div> |
|
|
</div> |
|
|
<button onClick={endCall} className="ml-4 px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2"><PhoneOff className="w-5 h-5" /> End Call</button> |
|
|
</div> |
|
|
</div> |
|
|
)} |
|
|
|
|
|
<div className="bg-white rounded-xl shadow-lg p-6"> |
|
|
{activeTab === 'dialer' && ( |
|
|
<div> |
|
|
<div className="flex justify-between items-center mb-6"> |
|
|
<h2 className="text-xl font-semibold text-gray-800">Auto Dialer Queue</h2> |
|
|
<div className="flex gap-3"> |
|
|
<button onClick={() => setAutoDialing(!autoDialing)} disabled={currentCall} className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-colors ${autoDialing ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-green-600 text-white hover:bg-green-700'} ${currentCall ? 'opacity-50 cursor-not-allowed' : ''}`}> |
|
|
{autoDialing ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />} {autoDialing ? 'Stop' : 'Start'} |
|
|
</button> |
|
|
<button onClick={skipNextContact} disabled={!autoDialing || currentCall} className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-colors bg-blue-600 text-white hover:bg-blue-700 ${(!autoDialing || currentCall) ? 'opacity-50 cursor-not-allowed' : ''}`}> |
|
|
<SkipForward className="w-4 h-4" /> Skip Next |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
|
{contacts.filter(c => c.status === 'New' || c.status === 'Callback').slice(0, 9).map(contact => ( |
|
|
<div key={contact.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div className="flex justify-between items-start mb-3"> |
|
|
<h3 className="font-semibold text-gray-800">{contact.name}</h3> |
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(contact.priority)}`}>{contact.priority}</span> |
|
|
</div> |
|
|
<p className="text-gray-600 text-sm mb-1">{contact.phone}</p> |
|
|
<p className="text-gray-600 text-sm mb-3 truncate">{contact.email}</p> |
|
|
<div className="flex justify-between items-center"> |
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(contact.status)}`}>{contact.status}</span> |
|
|
<button onClick={() => dialContact(contact)} disabled={currentCall} className={`px-3 py-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-1 text-sm ${currentCall ? 'opacity-50 cursor-not-allowed' : ''}`}> |
|
|
<Phone className="w-4 h-4" /> Call |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
)} |
|
|
|
|
|
{activeTab === 'contacts' && ( |
|
|
<div> |
|
|
<div className="flex flex-col md:flex-row justify-between items-center mb-6 gap-4"> |
|
|
<h2 className="text-xl font-semibold text-gray-800">Contact Management</h2> |
|
|
<div className="flex gap-2 w-full md:w-auto"> |
|
|
<input type="text" placeholder="Search contacts..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full md:w-64 border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500" /> |
|
|
<button onClick={() => setShowAddContact(true)} className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"> |
|
|
<Plus className="w-4 h-4" /> <span className="hidden sm:inline">Add</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{showAddContact && ( |
|
|
<div className="bg-gray-50 rounded-lg p-4 mb-6 border border-gray-200"> |
|
|
<h3 className="font-semibold text-gray-800 mb-4">Add New Contact</h3> |
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4"> |
|
|
<input type="text" placeholder="Name" value={newContact.name} onChange={(e) => setNewContact(prev => ({ ...prev, name: e.target.value }))} className="border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500" /> |
|
|
<input type="tel" placeholder="Phone" value={newContact.phone} onChange={(e) => setNewContact(prev => ({ ...prev, phone: e.target.value }))} className="border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500" /> |
|
|
<input type="email" placeholder="Email" value={newContact.email} onChange={(e) => setNewContact(prev => ({ ...prev, email: e.target.value }))} className="border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500" /> |
|
|
<select value={newContact.status} onChange={(e) => setNewContact(prev => ({ ...prev, status: e.target.value }))} className="border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500"><option>New</option><option>Callback</option></select> |
|
|
<select value={newContact.priority} onChange={(e) => setNewContact(prev => ({ ...prev, priority: e.target.value }))} className="border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500"><option>High</option><option>Medium</option><option>Low</option></select> |
|
|
</div> |
|
|
<div className="flex gap-2"><button onClick={addContact} className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">Add</button><button onClick={() => setShowAddContact(false)} className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">Cancel</button></div> |
|
|
</div> |
|
|
)} |
|
|
|
|
|
<div className="overflow-x-auto"> |
|
|
<table className="w-full text-sm"> |
|
|
<thead><tr className="border-b"><th className="p-3 text-left font-semibold text-gray-700">Name</th><th className="p-3 text-left font-semibold text-gray-700">Phone</th><th className="p-3 text-left font-semibold text-gray-700">Email</th><th className="p-3 text-left font-semibold text-gray-700">Status</th><th className="p-3 text-left font-semibold text-gray-700">Priority</th><th className="p-3 text-left font-semibold text-gray-700">Actions</th></tr></thead> |
|
|
<tbody> |
|
|
{filteredContacts.map(contact => editingContact?.id === contact.id ? ( |
|
|
<EditContactForm key={contact.id} contact={editingContact} onSave={updateContact} onCancel={() => setEditingContact(null)} /> |
|
|
) : ( |
|
|
<tr key={contact.id} className="border-b hover:bg-gray-50"> |
|
|
<td className="p-3 font-medium text-gray-800">{contact.name}</td><td className="p-3 text-gray-600">{contact.phone}</td><td className="p-3 text-gray-600">{contact.email}</td> |
|
|
<td className="p-3"><span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(contact.status)}`}>{contact.status}</span></td> |
|
|
<td className="p-3"><span className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(contact.priority)}`}>{contact.priority}</span></td> |
|
|
<td className="p-3"><div className="flex gap-1"><button onClick={() => dialContact(contact)} disabled={currentCall} className={`p-2 text-blue-600 hover:text-blue-800 rounded-full hover:bg-blue-100 ${currentCall ? 'opacity-50 cursor-not-allowed' : ''}`}><Phone className="w-4 h-4" /></button><button onClick={() => setEditingContact(contact)} className="p-2 text-yellow-600 hover:text-yellow-800 rounded-full hover:bg-yellow-100"><Edit className="w-4 h-4" /></button><button onClick={() => deleteContact(contact.id)} className="p-2 text-red-600 hover:text-red-800 rounded-full hover:bg-red-100"><Trash2 className="w-4 h-4" /></button></div></td> |
|
|
</tr> |
|
|
))} |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
)} |
|
|
|
|
|
{activeTab === 'history' && ( |
|
|
<div> |
|
|
<h2 className="text-xl font-semibold text-gray-800 mb-6">Call History</h2> |
|
|
<div className="space-y-4"> |
|
|
{callHistory.length === 0 ? <p className="text-gray-500 text-center py-8">No call history yet</p> : callHistory.map(call => ( |
|
|
<div key={call.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-sm"> |
|
|
<div className="flex justify-between items-start"> |
|
|
<div><h3 className="font-semibold text-gray-800">{call.contact.name}</h3><p className="text-gray-600">{call.contact.phone}</p><p className="text-sm text-gray-500">{call.timestamp.toLocaleString()}</p> |
|
|
{call.notes && <p className="text-sm text-gray-700 mt-2 bg-gray-50 p-2 rounded"><strong>Notes:</strong> {call.notes}</p>}</div> |
|
|
<div className="text-right"><div className="text-lg font-mono text-blue-600">{formatDuration(call.duration)}</div><span className="text-sm text-green-600">{call.outcome}</span></div> |
|
|
</div> |
|
|
</div> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
)} |
|
|
|
|
|
{activeTab === 'stats' && ( |
|
|
<div> |
|
|
<h2 className="text-xl font-semibold text-gray-800 mb-6">Call Statistics</h2> |
|
|
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-6"> |
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4"><h3 className="font-semibold text-blue-800">Total Contacts</h3><p className="text-3xl font-bold text-blue-600">{contacts.length}</p></div> |
|
|
<div className="bg-green-50 border border-green-200 rounded-lg p-4"><h3 className="font-semibold text-green-800">Calls Made</h3><p className="text-3xl font-bold text-green-600">{callHistory.length}</p></div> |
|
|
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4"><h3 className="font-semibold text-yellow-800">Pending Calls</h3><p className="text-3xl font-bold text-yellow-600">{contacts.filter(c => c.status === 'New' || c.status === 'Callback').length}</p></div> |
|
|
<div className="bg-teal-50 border border-teal-200 rounded-lg p-4"><h3 className="font-semibold text-teal-800">Interested Leads</h3><p className="text-3xl font-bold text-teal-600">{contacts.filter(c => c.status === 'Interested').length}</p></div> |
|
|
<div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4"><h3 className="font-semibold text-indigo-800">Total Call Time</h3><p className="text-3xl font-bold text-indigo-600">{formatDuration(callHistory.reduce((acc, call) => acc + call.duration, 0))}</p></div> |
|
|
<div className="bg-purple-50 border border-purple-200 rounded-lg p-4"><h3 className="font-semibold text-purple-800">Avg. Call Duration</h3><p className="text-3xl font-bold text-purple-600">{callHistory.length > 0 ? formatDuration(Math.round(callHistory.reduce((acc, call) => acc + call.duration, 0) / callHistory.length)) : '00:00'}</p></div> |
|
|
</div> |
|
|
<div className="mt-8"> |
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-4">Status Breakdown</h3> |
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
{['New', 'Callback', 'Interested', 'Not Interested'].map(status => { |
|
|
const count = contacts.filter(c => c.status === status).length; |
|
|
const percentage = contacts.length > 0 ? (count / contacts.length * 100).toFixed(1) : 0; |
|
|
return ( |
|
|
<div key={status} className="border border-gray-200 rounded-lg p-4"> |
|
|
<div className="flex justify-between items-center mb-2"> |
|
|
<span className={`px-2 py-1 rounded-full text-sm font-medium ${getStatusColor(status)}`}>{status}</span> |
|
|
<span className="font-semibold text-gray-700">{count}</span> |
|
|
</div> |
|
|
<div className="w-full bg-gray-200 rounded-full h-2.5"><div className="bg-blue-600 h-2.5 rounded-full transition-all duration-500" style={{ width: `${percentage}%` }}></div></div> |
|
|
<p className="text-sm text-gray-600 mt-1">{percentage}% of total</p> |
|
|
</div> |
|
|
); |
|
|
})} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
ReactDOM.render(<CallCenterDialer />, document.getElementById('root')); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
