Hugging Face's logo

Spaces:
offerpk3
/
dailor2.0
Running

App Files Community
offerpk3 commited on
Commit
bbba44f
·
verified ·
1 Parent(s): 11b8a35

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +441 -19
index.html CHANGED
@@ -1,19 +1,441 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Enhanced Call Center Dialer</title>
7
+ <!-- Tailwind CSS via Play CDN -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <!-- React and ReactDOM -->
10
+ <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
11
+ <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
12
+ <!-- Babel for JSX transpilation in the browser -->
13
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
14
+ </head>
15
+ <body class="bg-gray-100">
16
+ <div id="root"></div>
17
+
18
+ <script type="text/babel">
19
+ // Self-contained Icon Components (replaces lucide-react)
20
+ const Icon = ({ children, className = '' }) => (
21
+ <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}>
22
+ {children}
23
+ </svg>
24
+ );
25
+ 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>;
26
+ 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>;
27
+ 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>;
28
+ const Plus = (props) => <Icon {...props}><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></Icon>;
29
+ 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>;
30
+ 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>;
31
+ const Clock = (props) => <Icon {...props}><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></Icon>;
32
+ 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>;
33
+ const BarChart3 = (props) => <Icon {...props}><path d="M3 3v18h18" /><path d="M18 17V9" /><path d="M13 17V5" /><path d="M8 17v-3" /></Icon>;
34
+ const Play = (props) => <Icon {...props}><polygon points="5 3 19 12 5 21 5 3" /></Icon>;
35
+ const Pause = (props) => <Icon {...props}><rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" /></Icon>;
36
+ 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>;
37
+
38
+
39
+ const CallCenterDialer = () => {
40
+ // State management
41
+ const [contacts, setContacts] = React.useState([
42
+ { id: 1, name: 'John Smith', phone: '+1-555-0123', email: 'john@example.com', status: 'New', priority: 'High' },
43
+ { id: 2, name: 'Sarah Johnson', phone: '+1-555-0124', email: 'sarah@example.com', status: 'Callback', priority: 'Medium' },
44
+ { id: 3, name: 'Mike Wilson', phone: '+1-555-0125', email: 'mike@example.com', status: 'New', priority: 'Low' },
45
+ { id: 4, name: 'Emma Davis', phone: '+1-555-0126', email: 'emma@example.com', status: 'Interested', priority: 'High' },
46
+ { id: 5, name: 'Robert Brown', phone: '+1-555-0127', email: 'robert@example.com', status: 'Not Interested', priority: 'Low' }
47
+ ]);
48
+
49
+ const [callHistory, setCallHistory] = React.useState([]);
50
+ const [currentCall, setCurrentCall] = React.useState(null);
51
+ const [isDialing, setIsDialing] = React.useState(false);
52
+ const [callDuration, setCallDuration] = React.useState(0);
53
+ const [autoDialing, setAutoDialing] = React.useState(false);
54
+ const [showAddContact, setShowAddContact] = React.useState(false);
55
+ const [activeTab, setActiveTab] = React.useState('dialer');
56
+ const [callNotes, setCallNotes] = React.useState('');
57
+ const [editingContact, setEditingContact] = React.useState(null);
58
+ const [searchTerm, setSearchTerm] = React.useState('');
59
+
60
+ const [newContact, setNewContact] = React.useState({
61
+ name: '', phone: '', email: '', status: 'New', priority: 'Medium'
62
+ });
63
+
64
+ const callTimer = React.useRef(null);
65
+ const autoDialTimer = React.useRef(null);
66
+ const autoDialCountdown = React.useRef(0);
67
+
68
+ // Call duration timer
69
+ React.useEffect(() => {
70
+ if (currentCall && !isDialing) {
71
+ callTimer.current = setInterval(() => {
72
+ setCallDuration(prev => prev + 1);
73
+ }, 1000);
74
+ } else {
75
+ clearInterval(callTimer.current);
76
+ }
77
+ return () => clearInterval(callTimer.current);
78
+ }, [currentCall, isDialing]);
79
+
80
+ // Smarter auto dialer (with prioritization)
81
+ React.useEffect(() => {
82
+ if (autoDialing && !currentCall) {
83
+ const priorityOrder = { 'High': 1, 'Medium': 2, 'Low': 3 };
84
+ const availableContacts = contacts
85
+ .filter(c => c.status === 'New' || c.status === 'Callback')
86
+ .sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
87
+
88
+ if (availableContacts.length > 0) {
89
+ autoDialCountdown.current = 3;
90
+ const countdownInterval = setInterval(() => {
91
+ autoDialCountdown.current -= 1;
92
+ if(autoDialCountdown.current <= 0) {
93
+ clearInterval(countdownInterval);
94
+ dialContact(availableContacts[0]);
95
+ }
96
+ }, 1000);
97
+ autoDialTimer.current = setTimeout(() => { /* handled by interval */}, 3000);
98
+ } else {
99
+ setAutoDialing(false);
100
+ }
101
+ }
102
+ return () => {
103
+ clearTimeout(autoDialTimer.current);
104
+ };
105
+ }, [autoDialing, currentCall, contacts]);
106
+
107
+ const dialContact = (contact) => {
108
+ if (currentCall) return;
109
+ setCurrentCall(contact);
110
+ setIsDialing(true);
111
+ setCallDuration(0);
112
+ setCallNotes('');
113
+ setTimeout(() => setIsDialing(false), 2000); // Simulate dialing
114
+ };
115
+
116
+ const endCall = () => {
117
+ if (!currentCall) return;
118
+ const callRecord = {
119
+ id: Date.now(),
120
+ contact: currentCall,
121
+ duration: callDuration,
122
+ timestamp: new Date(),
123
+ notes: callNotes,
124
+ outcome: 'Completed'
125
+ };
126
+ setCallHistory(prev => [callRecord, ...prev]);
127
+ setCurrentCall(null);
128
+ setCallDuration(0);
129
+ setCallNotes('');
130
+ };
131
+
132
+ const addContact = () => {
133
+ if (!newContact.name || !newContact.phone) {
134
+ alert("Name and Phone are required.");
135
+ return;
136
+ }
137
+ const contact = { id: Date.now(), ...newContact };
138
+ setContacts(prev => [contact, ...prev]);
139
+ setNewContact({ name: '', phone: '', email: '', status: 'New', priority: 'Medium' });
140
+ setShowAddContact(false);
141
+ };
142
+
143
+ const updateContact = (updatedContact) => {
144
+ setContacts(contacts.map(c => c.id === updatedContact.id ? updatedContact : c));
145
+ setEditingContact(null);
146
+ };
147
+
148
+ const deleteContact = (contactId) => {
149
+ if (window.confirm("Are you sure you want to delete this contact?")) {
150
+ setContacts(prev => prev.filter(c => c.id !== contactId));
151
+ }
152
+ };
153
+
154
+ const updateContactStatus = (contactId, status) => {
155
+ setContacts(prev => prev.map(c => c.id === contactId ? { ...c, status } : c));
156
+ };
157
+
158
+ const skipNextContact = () => {
159
+ const priorityOrder = { 'High': 1, 'Medium': 2, 'Low': 3 };
160
+ const availableContacts = contacts
161
+ .filter(c => c.status === 'New' || c.status === 'Callback')
162
+ .sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
163
+
164
+ if (availableContacts.length > 1) {
165
+ // "Demote" the first contact by setting it to the end of the list to be picked up later
166
+ const skippedContact = availableContacts[0];
167
+ setContacts(prev => [
168
+ ...prev.filter(c => c.id !== skippedContact.id),
169
+ skippedContact
170
+ ]);
171
+ // Immediately dial the next one
172
+ dialContact(availableContacts[1]);
173
+ } else if (availableContacts.length === 1) {
174
+ alert("This is the last contact in the queue.");
175
+ } else {
176
+ alert("No contacts available to skip to.");
177
+ }
178
+ };
179
+
180
+ const formatDuration = (seconds) => {
181
+ const mins = Math.floor(seconds / 60);
182
+ const secs = seconds % 60;
183
+ return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
184
+ };
185
+
186
+ const getPriorityColor = (priority) => ({
187
+ 'High': 'text-red-600 bg-red-100', 'Medium': 'text-yellow-600 bg-yellow-100', 'Low': 'text-green-600 bg-green-100'
188
+ }[priority] || 'text-gray-600 bg-gray-100');
189
+
190
+ const getStatusColor = (status) => ({
191
+ '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'
192
+ }[status] || 'text-gray-600 bg-gray-100');
193
+
194
+ const filteredContacts = contacts.filter(c =>
195
+ c.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
196
+ c.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
197
+ c.email.toLowerCase().includes(searchTerm.toLowerCase())
198
+ );
199
+
200
+ // Edit form component
201
+ const EditContactForm = ({ contact, onSave, onCancel }) => {
202
+ const [formState, setFormState] = React.useState(contact);
203
+
204
+ const handleChange = (e) => {
205
+ const { name, value } = e.target;
206
+ setFormState(prev => ({ ...prev, [name]: value }));
207
+ };
208
+
209
+ return (
210
+ <tr className="bg-blue-50">
211
+ <td className="p-2"><input name="name" value={formState.name} onChange={handleChange} className="w-full p-2 border rounded"/></td>
212
+ <td className="p-2"><input name="phone" value={formState.phone} onChange={handleChange} className="w-full p-2 border rounded"/></td>
213
+ <td className="p-2"><input name="email" value={formState.email} onChange={handleChange} className="w-full p-2 border rounded"/></td>
214
+ <td className="p-2">
215
+ <select name="status" value={formState.status} onChange={handleChange} className="w-full p-2 border rounded">
216
+ <option>New</option><option>Callback</option><option>Interested</option><option>Not Interested</option>
217
+ </select>
218
+ </td>
219
+ <td className="p-2">
220
+ <select name="priority" value={formState.priority} onChange={handleChange} className="w-full p-2 border rounded">
221
+ <option>High</option><option>Medium</option><option>Low</option>
222
+ </select>
223
+ </td>
224
+ <td className="p-2">
225
+ <div className="flex gap-2">
226
+ <button onClick={() => onSave(formState)} className="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700">Save</button>
227
+ <button onClick={onCancel} className="px-3 py-1 bg-gray-600 text-white rounded hover:bg-gray-700">Cancel</button>
228
+ </div>
229
+ </td>
230
+ </tr>
231
+ );
232
+ };
233
+
234
+ return (
235
+ <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4 font-sans">
236
+ <div className="max-w-7xl mx-auto">
237
+ <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
238
+ <div className="flex justify-between items-center">
239
+ <div>
240
+ <h1 className="text-3xl font-bold text-gray-800 flex items-center gap-3">
241
+ <Phone className="text-blue-600" /> Call Center Dialer
242
+ </h1>
243
+ <p className="text-gray-600 mt-1">Enhanced call management system</p>
244
+ </div>
245
+ <div className="text-right">
246
+ {currentCall ? (
247
+ <div className="bg-green-50 border border-green-200 rounded-lg p-4 animate-pulse">
248
+ <div className="flex items-center gap-2 text-green-700 font-semibold">
249
+ <PhoneCall className="w-5 h-5" /> {isDialing ? 'Dialing...' : 'Connected'}
250
+ </div>
251
+ <div className="text-lg font-mono text-green-600">{formatDuration(callDuration)}</div>
252
+ </div>
253
+ ) : autoDialing ? (
254
+ <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
255
+ <div className="text-yellow-700 font-semibold">Auto-dialing active...</div>
256
+ <div className="text-yellow-600">Next call in {autoDialCountdown.current}s</div>
257
+ </div>
258
+ ) : (
259
+ <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
260
+ <div className="text-gray-500 font-semibold">Ready to dial</div>
261
+ <div className="text-gray-400">No active call</div>
262
+ </div>
263
+ )}
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <div className="bg-white rounded-xl shadow-lg mb-6">
269
+ <div className="flex border-b">
270
+ {[{ 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 => (
271
+ <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'}`}>
272
+ <tab.icon className="w-5 h-5" /> <span className="hidden md:inline">{tab.label}</span>
273
+ </button>
274
+ ))}
275
+ </div>
276
+ </div>
277
+
278
+ {currentCall && (
279
+ <div className="bg-white rounded-xl shadow-lg p-6 mb-6 border-l-4 border-green-500">
280
+ <div className="flex justify-between items-start">
281
+ <div className="flex-1">
282
+ <h3 className="text-xl font-semibold text-gray-800 mb-2">Active Call: {currentCall.name}</h3>
283
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
284
+ <div><p className="text-gray-600"><strong>Phone:</strong> {currentCall.phone}</p><p className="text-gray-600"><strong>Email:</strong> {currentCall.email}</p></div>
285
+ <div><span className={`px-3 py-1 rounded-full text-sm font-medium ${getPriorityColor(currentCall.priority)}`}>{currentCall.priority} Priority</span></div>
286
+ </div>
287
+ <div className="mb-4">
288
+ <label className="block text-sm font-medium text-gray-700 mb-2">Call Notes</label>
289
+ <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..."/>
290
+ </div>
291
+ <div className="flex flex-wrap gap-2 mb-4">
292
+ <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>
293
+ <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>
294
+ <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>
295
+ </div>
296
+ </div>
297
+ <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>
298
+ </div>
299
+ </div>
300
+ )}
301
+
302
+ <div className="bg-white rounded-xl shadow-lg p-6">
303
+ {activeTab === 'dialer' && (
304
+ <div>
305
+ <div className="flex justify-between items-center mb-6">
306
+ <h2 className="text-xl font-semibold text-gray-800">Auto Dialer Queue</h2>
307
+ <div className="flex gap-3">
308
+ <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' : ''}`}>
309
+ {autoDialing ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />} {autoDialing ? 'Stop' : 'Start'}
310
+ </button>
311
+ <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' : ''}`}>
312
+ <SkipForward className="w-4 h-4" /> Skip Next
313
+ </button>
314
+ </div>
315
+ </div>
316
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
317
+ {contacts.filter(c => c.status === 'New' || c.status === 'Callback').slice(0, 9).map(contact => (
318
+ <div key={contact.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
319
+ <div className="flex justify-between items-start mb-3">
320
+ <h3 className="font-semibold text-gray-800">{contact.name}</h3>
321
+ <span className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(contact.priority)}`}>{contact.priority}</span>
322
+ </div>
323
+ <p className="text-gray-600 text-sm mb-1">{contact.phone}</p>
324
+ <p className="text-gray-600 text-sm mb-3 truncate">{contact.email}</p>
325
+ <div className="flex justify-between items-center">
326
+ <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(contact.status)}`}>{contact.status}</span>
327
+ <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' : ''}`}>
328
+ <Phone className="w-4 h-4" /> Call
329
+ </button>
330
+ </div>
331
+ </div>
332
+ ))}
333
+ </div>
334
+ </div>
335
+ )}
336
+
337
+ {activeTab === 'contacts' && (
338
+ <div>
339
+ <div className="flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
340
+ <h2 className="text-xl font-semibold text-gray-800">Contact Management</h2>
341
+ <div className="flex gap-2 w-full md:w-auto">
342
+ <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" />
343
+ <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">
344
+ <Plus className="w-4 h-4" /> <span className="hidden sm:inline">Add</span>
345
+ </button>
346
+ </div>
347
+ </div>
348
+
349
+ {showAddContact && (
350
+ <div className="bg-gray-50 rounded-lg p-4 mb-6 border border-gray-200">
351
+ <h3 className="font-semibold text-gray-800 mb-4">Add New Contact</h3>
352
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
353
+ <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" />
354
+ <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" />
355
+ <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" />
356
+ <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>
357
+ <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>
358
+ </div>
359
+ <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>
360
+ </div>
361
+ )}
362
+
363
+ <div className="overflow-x-auto">
364
+ <table className="w-full text-sm">
365
+ <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>
366
+ <tbody>
367
+ {filteredContacts.map(contact => editingContact?.id === contact.id ? (
368
+ <EditContactForm key={contact.id} contact={editingContact} onSave={updateContact} onCancel={() => setEditingContact(null)} />
369
+ ) : (
370
+ <tr key={contact.id} className="border-b hover:bg-gray-50">
371
+ <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>
372
+ <td className="p-3"><span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(contact.status)}`}>{contact.status}</span></td>
373
+ <td className="p-3"><span className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(contact.priority)}`}>{contact.priority}</span></td>
374
+ <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>
375
+ </tr>
376
+ ))}
377
+ </tbody>
378
+ </table>
379
+ </div>
380
+ </div>
381
+ )}
382
+
383
+ {activeTab === 'history' && (
384
+ <div>
385
+ <h2 className="text-xl font-semibold text-gray-800 mb-6">Call History</h2>
386
+ <div className="space-y-4">
387
+ {callHistory.length === 0 ? <p className="text-gray-500 text-center py-8">No call history yet</p> : callHistory.map(call => (
388
+ <div key={call.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-sm">
389
+ <div className="flex justify-between items-start">
390
+ <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>
391
+ {call.notes && <p className="text-sm text-gray-700 mt-2 bg-gray-50 p-2 rounded"><strong>Notes:</strong> {call.notes}</p>}</div>
392
+ <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>
393
+ </div>
394
+ </div>
395
+ ))}
396
+ </div>
397
+ </div>
398
+ )}
399
+
400
+ {activeTab === 'stats' && (
401
+ <div>
402
+ <h2 className="text-xl font-semibold text-gray-800 mb-6">Call Statistics</h2>
403
+ <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-6">
404
+ <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>
405
+ <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>
406
+ <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>
407
+ <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>
408
+ <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>
409
+ <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>
410
+ </div>
411
+ <div className="mt-8">
412
+ <h3 className="text-lg font-semibold text-gray-800 mb-4">Status Breakdown</h3>
413
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
414
+ {['New', 'Callback', 'Interested', 'Not Interested'].map(status => {
415
+ const count = contacts.filter(c => c.status === status).length;
416
+ const percentage = contacts.length > 0 ? (count / contacts.length * 100).toFixed(1) : 0;
417
+ return (
418
+ <div key={status} className="border border-gray-200 rounded-lg p-4">
419
+ <div className="flex justify-between items-center mb-2">
420
+ <span className={`px-2 py-1 rounded-full text-sm font-medium ${getStatusColor(status)}`}>{status}</span>
421
+ <span className="font-semibold text-gray-700">{count}</span>
422
+ </div>
423
+ <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>
424
+ <p className="text-sm text-gray-600 mt-1">{percentage}% of total</p>
425
+ </div>
426
+ );
427
+ })}
428
+ </div>
429
+ </div>
430
+ </div>
431
+ )}
432
+ </div>
433
+ </div>
434
+ </div>
435
+ );
436
+ };
437
+
438
+ ReactDOM.render(<CallCenterDialer />, document.getElementById('root'));
439
+ </script>
440
+ </body>
441
+ </html>