Spaces:

offerpk3
/

dailor-ui

Running

App Files Files Community

dailor-ui / index.html

offerpk3

Update index.html

5c6ddb7 verified 11 months ago

raw

history blame contribute delete

33.8 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>NexusDial - Advanced Cloud Dialer</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#4f46e5',
	secondary: '#10b981',
	accent: '#f59e0b',
	dark: '#1e293b',
	light: '#f8fafc'
	}
	}
	}
	}
	</script>
	<style>
	@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
	}
	.pulse-animation {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}
	.agent-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	}
	.call-animation {
	animation: ring 1.5s ease infinite;
	}
	@keyframes ring {
	0% { transform: rotate(0); }
	10% { transform: rotate(-5deg); }
	20% { transform: rotate(5deg); }
	30% { transform: rotate(-5deg); }
	40% { transform: rotate(5deg); }
	50% { transform: rotate(0); }
	100% { transform: rotate(0); }
	}
	.sidebar {
	scrollbar-width: thin;
	scrollbar-color: #4f46e5 #e2e8f0;
	}
	.sidebar::-webkit-scrollbar {
	width: 6px;
	}
	.sidebar::-webkit-scrollbar-track {
	background: #e2e8f0;
	}
	.sidebar::-webkit-scrollbar-thumb {
	background-color: #4f46e5;
	border-radius: 3px;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans antialiased">
	<div class="flex h-screen overflow-hidden">
	<!-- Sidebar -->
	<div class="hidden md:flex md:flex-shrink-0">
	<div class="flex flex-col w-64 bg-white border-r border-gray-200">
	<div class="flex items-center justify-center h-16 px-4 bg-primary text-white">
	<div class="flex items-center">
	<i class="fas fa-phone-alt mr-2"></i>
	<span class="text-xl font-semibold">NexusDial</span>
	</div>
	</div>
	<div class="flex flex-col flex-grow overflow-y-auto sidebar">
	<nav class="flex-1 px-2 py-4 space-y-1">
	<a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md bg-indigo-100 text-primary">
	<i class="fas fa-tachometer-alt mr-3"></i>
	Dashboard
	</a>
	<a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900">
	<i class="fas fa-users mr-3"></i>
	Contacts
	</a>
	<a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900">
	<i class="fas fa-chart-line mr-3"></i>
	Analytics
	</a>
	<a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900">
	<i class="fas fa-cog mr-3"></i>
	Settings
	</a>
	<a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900">
	<i class="fas fa-question-circle mr-3"></i>
	Help
	</a>
	</nav>
	<div class="px-4 py-4 border-t border-gray-200">
	<div class="flex items-center">
	<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile">
	<div class="ml-3">
	<p class="text-sm font-medium text-gray-700">Sarah Johnson</p>
	<p class="text-xs font-medium text-gray-500">Admin</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Main Content -->
	<div class="flex flex-col flex-1 overflow-hidden">
	<!-- Top Navigation -->
	<div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
	<div class="flex items-center">
	<button class="md:hidden text-gray-500 focus:outline-none">
	<i class="fas fa-bars"></i>
	</button>
	<h1 class="ml-4 text-lg font-semibold text-gray-800">Dialer Dashboard</h1>
	</div>
	<div class="flex items-center space-x-4">
	<button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none">
	<i class="fas fa-bell"></i>
	</button>
	<button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none">
	<i class="fas fa-envelope"></i>
	</button>
	<div class="relative">
	<button class="flex items-center text-sm text-gray-700 focus:outline-none">
	<span class="sr-only">Open user menu</span>
	<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile">
	</button>
	</div>
	</div>
	</div>

	<!-- Main Content Area -->
	<div class="flex-1 overflow-auto p-4">
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<!-- Left Column -->
	<div class="lg:col-span-2 space-y-6">
	<!-- Campaign Stats -->
	<div class="bg-white rounded-lg shadow p-6">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-lg font-semibold text-gray-800">Campaign Performance</h2>
	<div class="flex space-x-2">
	<button class="px-3 py-1 text-xs bg-primary text-white rounded-md">Today</button>
	<button class="px-3 py-1 text-xs bg-gray-200 text-gray-700 rounded-md">Week</button>
	<button class="px-3 py-1 text-xs bg-gray-200 text-gray-700 rounded-md">Month</button>
	</div>
	</div>
	<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
	<div class="bg-indigo-50 p-4 rounded-lg">
	<div class="text-sm font-medium text-indigo-600">Total Calls</div>
	<div class="mt-1 text-2xl font-semibold text-gray-900">1,248</div>
	<div class="text-xs text-green-600 flex items-center">
	<i class="fas fa-arrow-up mr-1"></i> 12% from yesterday
	</div>
	</div>
	<div class="bg-green-50 p-4 rounded-lg">
	<div class="text-sm font-medium text-green-600">Connected</div>
	<div class="mt-1 text-2xl font-semibold text-gray-900">842</div>
	<div class="text-xs text-green-600 flex items-center">
	<i class="fas fa-arrow-up mr-1"></i> 8% from yesterday
	</div>
	</div>
	<div class="bg-yellow-50 p-4 rounded-lg">
	<div class="text-sm font-medium text-yellow-600">Conversion</div>
	<div class="mt-1 text-2xl font-semibold text-gray-900">312</div>
	<div class="text-xs text-red-600 flex items-center">
	<i class="fas fa-arrow-down mr-1"></i> 3% from yesterday
	</div>
	</div>
	<div class="bg-red-50 p-4 rounded-lg">
	<div class="text-sm font-medium text-red-600">DNC Hits</div>
	<div class="mt-1 text-2xl font-semibold text-gray-900">24</div>
	<div class="text-xs text-green-600 flex items-center">
	<i class="fas fa-arrow-down mr-1"></i> 5% from yesterday
	</div>
	</div>
	</div>
	</div>

	<!-- Dialer Controls -->
	<div class="bg-white rounded-lg shadow p-6">
	<h2 class="text-lg font-semibold text-gray-800 mb-4">Dialer Controls</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Load Contacts</label>
	<div class="flex space-x-2 mb-4">
	<label class="flex-1">
	<div class="flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer">
	<i class="fas fa-file-upload mr-2"></i> Upload CSV
	<input type="file" class="hidden" id="csv-upload" accept=".csv,.txt">
	</div>
	</label>
	<button class="px-4 py-2 bg-primary text-white rounded-md shadow-sm text-sm font-medium hover:bg-indigo-700 focus:outline-none">
	<i class="fas fa-database mr-2"></i> From CRM
	</button>
	</div>

	<label class="block text-sm font-medium text-gray-700 mb-1">Or paste numbers</label>
	<textarea id="paste-list" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary" placeholder="Enter phone numbers, one per line..."></textarea>

	<div class="flex justify-between mt-2">
	<span id="queue-count" class="text-sm text-gray-500">0 numbers in queue</span>
	<button id="clear-queue" class="text-sm text-red-500 hover:text-red-700">
	<i class="fas fa-trash-alt mr-1"></i> Clear
	</button>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Dialer Settings</label>
	<div class="space-y-3">
	<div>
	<label class="block text-xs text-gray-500 mb-1">Dial Mode</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm">
	<option>Predictive (Auto)</option>
	<option>Progressive</option>
	<option>Preview</option>
	<option>Manual</option>
	</select>
	</div>

	<div class="grid grid-cols-2 gap-3">
	<div>
	<label class="block text-xs text-gray-500 mb-1">Max Calls/Hour</label>
	<input type="number" value="60" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm">
	</div>
	<div>
	<label class="block text-xs text-gray-500 mb-1">Call Timeout</label>
	<input type="number" value="30" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm">
	</div>
	</div>

	<div class="flex items-center">
	<input id="enable-recording" type="checkbox" checked class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
	<label for="enable-recording" class="ml-2 block text-sm text-gray-700">Record calls</label>
	</div>

	<div class="flex space-x-2 pt-2">
	<button id="start-dialer" class="flex-1 px-4 py-2 bg-green-600 text-white rounded-md shadow-sm text-sm font-medium hover:bg-green-700 focus:outline-none">
	<i class="fas fa-play mr-2"></i> Start Dialing
	</button>
	<button id="pause-dialer" class="flex-1 px-4 py-2 bg-yellow-500 text-white rounded-md shadow-sm text-sm font-medium hover:bg-yellow-600 focus:outline-none">
	<i class="fas fa-pause mr-2"></i> Pause
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Active Calls -->
	<div class="bg-white rounded-lg shadow overflow-hidden">
	<div class="px-6 py-4 border-b border-gray-200">
	<h2 class="text-lg font-semibold text-gray-800">Active Calls</h2>
	</div>
	<div class="divide-y divide-gray-200">
	<div class="p-4 hover:bg-gray-50">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
	<i class="fas fa-phone-alt call-animation"></i>
	</div>
	</div>
	<div class="ml-4 flex-1">
	<div class="flex items-center justify-between">
	<p class="text-sm font-medium text-gray-900">+1 (555) 123-4567</p>
	<p class="text-xs text-gray-500">02:34</p>
	</div>
	<div class="flex items-center justify-between mt-1">
	<p class="text-xs text-gray-500">Agent: Michael Scott</p>
	<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>
	</div>
	</div>
	</div>
	</div>
	<div class="p-4 hover:bg-gray-50">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
	<i class="fas fa-phone-alt call-animation"></i>
	</div>
	</div>
	<div class="ml-4 flex-1">
	<div class="flex items-center justify-between">
	<p class="text-sm font-medium text-gray-900">+1 (555) 987-6543</p>
	<p class="text-xs text-gray-500">01:12</p>
	</div>
	<div class="flex items-center justify-between mt-1">
	<p class="text-xs text-gray-500">Agent: Dwight Schrute</p>
	<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Ringing</span>
	</div>
	</div>
	</div>
	</div>
	<div class="p-4 hover:bg-gray-50">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<div class="h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
	<i class="fas fa-phone-alt"></i>
	</div>
	</div>
	<div class="ml-4 flex-1">
	<div class="flex items-center justify-between">
	<p class="text-sm font-medium text-gray-900">+1 (555) 456-7890</p>
	<p class="text-xs text-gray-500">00:45</p>
	</div>
	<div class="flex items-center justify-between mt-1">
	<p class="text-xs text-gray-500">Agent: Jim Halpert</p>
	<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">On Hold</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Right Column -->
	<div class="space-y-6">
	<!-- Agent Status -->
	<div class="bg-white rounded-lg shadow overflow-hidden">
	<div class="px-6 py-4 border-b border-gray-200">
	<div class="flex items-center justify-between">
	<h2 class="text-lg font-semibold text-gray-800">Agent Status</h2>
	<span class="text-xs bg-primary text-white px-2 py-1 rounded-full">10 Agents</span>
	</div>
	</div>
	<div class="divide-y divide-gray-200">
	<div class="p-4 hover:bg-gray-50">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Agent">
	</div>
	<div class="ml-4 flex-1">
	<div class="flex items-center justify-between">
	<p class="text-sm font-medium text-gray-900">Michael Scott</p>
	<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">On Call</span>
	</div>
	<div class="mt-1">
	<p class="text-xs text-gray-500">+1 (555) 123-4567 (02:34)</p>
	</div>
	</div>
	</div>
	</div>
	<div class="p-4 hover:bg-gray-50">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Agent">
	</div>
	<div class="ml-4 flex-1">
	<div class="flex items-center justify-between">
	<p class="text-sm font-medium text-gray-900">Dwight Schrute</p>
	<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Ringing</span>
	</div>
	<div class="mt-1">
	<p class="text-xs text-gray-500">+1 (555) 987-6543 (01:12)</p>
	</div>
	</div>
	</div>
	</div>
	<div class="p-4 hover:bg-gray-50">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Agent">
	</div>
	<div class="ml-4 flex-1">
	<div class="flex items-center justify-between">
	<p class="text-sm font-medium text-gray-900">Jim Halpert</p>
	<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">On Hold</span>
	</div>
	<div class="mt-1">
	<p class="text-xs text-gray-500">+1 (555) 456-7890 (00:45)</p>
	</div>
	</div>
	</div>
	</div>
	<div class="p-4 hover:bg-gray-50">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/63.jpg" alt="Agent">
	</div>
	<div class="ml-4 flex-1">
	<div class="flex items-center justify-between">
	<p class="text-sm font-medium text-gray-900">Pam Beesly</p>
	<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Available</span>
	</div>
	<div class="mt-1">
	<p class="text-xs text-gray-500">Ready for next call</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="px-6 py-3 bg-gray-50 text-center">
	<button class="text-sm text-primary hover:text-indigo-700 font-medium">
	<i class="fas fa-plus mr-1"></i> Add Agent
	</button>
	</div>
	</div>

	<!-- Call Disposition -->
	<div class="bg-white rounded-lg shadow p-6">
	<h2 class="text-lg font-semibold text-gray-800 mb-4">Call Disposition</h2>
	<div class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm">
	<option>Interested - Follow up needed</option>
	<option>Not Interested</option>
	<option>Call Back Later</option>
	<option>Do Not Call</option>
	<option>Wrong Number</option>
	<option>No Answer</option>
	<option>Busy</option>
	</select>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
	<textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm" placeholder="Add call notes..."></textarea>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Next Action</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm">
	<option>None</option>
	<option>Schedule Call Back</option>
	<option>Send Email</option>
	<option>Send SMS</option>
	<option>Create Task</option>
	</select>
	</div>

	<div id="callback-container" class="hidden">
	<label class="block text-sm font-medium text-gray-700 mb-1">Callback Date/Time</label>
	<input type="datetime-local" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm">
	</div>

	<button class="w-full px-4 py-2 bg-primary text-white rounded-md shadow-sm text-sm font-medium hover:bg-indigo-700 focus:outline-none">
	<i class="fas fa-save mr-2"></i> Save Disposition
	</button>
	</div>
	</div>

	<!-- Quick Stats -->
	<div class="bg-white rounded-lg shadow p-6">
	<h2 class="text-lg font-semibold text-gray-800 mb-4">Quick Stats</h2>
	<div class="space-y-3">
	<div class="flex justify-between">
	<span class="text-sm text-gray-600">Calls Today</span>
	<span class="text-sm font-medium">124</span>
	</div>
	<div class="flex justify-between">
	<span class="text-sm text-gray-600">Connect Rate</span>
	<span class="text-sm font-medium">67%</span>
	</div>
	<div class="flex justify-between">
	<span class="text-sm text-gray-600">Avg Talk Time</span>
	<span class="text-sm font-medium">2:34</span>
	</div>
	<div class="flex justify-between">
	<span class="text-sm text-gray-600">Conversion Rate</span>
	<span class="text-sm font-medium">25%</span>
	</div>
	<div class="flex justify-between">
	<span class="text-sm text-gray-600">DNC Hits</span>
	<span class="text-sm font-medium">3</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Call Modal -->
	<div id="call-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
	<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
	<div class="fixed inset-0 transition-opacity" aria-hidden="true">
	<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
	</div>
	<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
	<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
	<div>
	<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
	<i class="fas fa-phone-alt text-green-600 call-animation"></i>
	</div>
	<div class="mt-3 text-center sm:mt-5">
	<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Incoming Call</h3>
	<div class="mt-2">
	<p class="text-sm text-gray-500" id="caller-number">+1 (555) 123-4567</p>
	<p class="text-xs text-gray-400 mt-1">John Smith • Acme Corp</p>
	</div>
	</div>
	</div>
	<div class="mt-5 sm:mt-6 grid grid-cols-2 gap-3">
	<button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none sm:text-sm">
	<i class="fas fa-phone mr-2"></i> Answer
	</button>
	<button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:text-sm">
	<i class="fas fa-phone-slash mr-2"></i> Decline
	</button>
	</div>
	</div>
	</div>
	</div>

	<script>
	// Initialize data
	let callQueue = [];
	let isPaused = false;
	let agents = [
	{ id: 1, name: "Michael Scott", status: "on-call", avatar: "https://randomuser.me/api/portraits/men/32.jpg", currentCall: "+1 (555) 123-4567", callDuration: "02:34" },
	{ id: 2, name: "Dwight Schrute", status: "ringing", avatar: "https://randomuser.me/api/portraits/men/44.jpg", currentCall: "+1 (555) 987-6543", callDuration: "01:12" },
	{ id: 3, name: "Jim Halpert", status: "on-hold", avatar: "https://randomuser.me/api/portraits/men/22.jpg", currentCall: "+1 (555) 456-7890", callDuration: "00:45" },
	{ id: 4, name: "Pam Beesly", status: "available", avatar: "https://randomuser.me/api/portraits/women/63.jpg", currentCall: null, callDuration: null },
	{ id: 5, name: "Stanley Hudson", status: "available", avatar: "https://randomuser.me/api/portraits/men/12.jpg", currentCall: null, callDuration: null },
	{ id: 6, name: "Phyllis Vance", status: "available", avatar: "https://randomuser.me/api/portraits/women/45.jpg", currentCall: null, callDuration: null },
	{ id: 7, name: "Kevin Malone", status: "break", avatar: "https://randomuser.me/api/portraits/men/65.jpg", currentCall: null, callDuration: null },
	{ id: 8, name: "Angela Martin", status: "break", avatar: "https://randomuser.me/api/portraits/women/33.jpg", currentCall: null, callDuration: null },
	{ id: 9, name: "Oscar Martinez", status: "training", avatar: "https://randomuser.me/api/portraits/men/76.jpg", currentCall: null, callDuration: null },
	{ id: 10, name: "Kelly Kapoor", status: "wrap-up", avatar: "https://randomuser.me/api/portraits/women/22.jpg", currentCall: null, callDuration: null }
	];

	// DOM Elements
	const csvUpload = document.getElementById('csv-upload');
	const pasteList = document.getElementById('paste-list');
	const queueCount = document.getElementById('queue-count');
	const clearQueueBtn = document.getElementById('clear-queue');
	const startDialerBtn = document.getElementById('start-dialer');
	const pauseDialerBtn = document.getElementById('pause-dialer');
	const callModal = document.getElementById('call-modal');

	// Event Listeners
	csvUpload.addEventListener('change', handleCSVUpload);
	pasteList.addEventListener('input', autoLoadPasteList);
	clearQueueBtn.addEventListener('click', clearQueue);
	startDialerBtn.addEventListener('click', startAutoDialing);
	pauseDialerBtn.addEventListener('click', togglePauseDialer);

	// Functions
	function updateQueueCount() {
	const count = callQueue.length;
	queueCount.textContent = `${count} number${count !== 1 ? 's' : ''} in queue`;
	}

	function handleCSVUpload(event) {
	const file = event.target.files[0];
	if (!file) return;

	const reader = new FileReader();
	reader.onload = function(e) {
	const content = e.target.result;
	callQueue = content.split('\n')
	.map(line => line.trim())
	.filter(line => line !== '');

	updateQueueCount();
	showNotification(`Successfully loaded ${callQueue.length} numbers from CSV`);
	};
	reader.readAsText(file);
	}

	function autoLoadPasteList() {
	const inputText = pasteList.value;
	callQueue = inputText.split('\n')
	.map(line => line.trim())
	.filter(line => line !== '');

	updateQueueCount();
	}

	function clearQueue() {
	callQueue = [];
	pasteList.value = '';
	updateQueueCount();
	showNotification('Call queue has been cleared', 'info');
	}

	function startAutoDialing() {
	if (callQueue.length === 0) {
	showNotification('Please add numbers to the queue first', 'warning');
	return;
	}

	showNotification('Dialer started successfully', 'success');
	isPaused = false;
	startDialerBtn.disabled = true;
	pauseDialerBtn.disabled = false;

	// Simulate calls
	simulateCalls();
	}

	function togglePauseDialer() {
	isPaused = !isPaused;
	if (isPaused) {
	pauseDialerBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Resume';
	showNotification('Dialer paused', 'info');
	} else {
	pauseDialerBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
	showNotification('Dialer resumed', 'success');
	simulateCalls();
	}
	}

	function simulateCalls() {
	if (isPaused \|\| callQueue.length === 0) return;

	// Find available agents
	const availableAgents = agents.filter(agent => agent.status === 'available');
	if (availableAgents.length === 0) {
	setTimeout(simulateCalls, 2000);
	return;
	}

	// Assign calls to available agents
	availableAgents.slice(0, Math.min(availableAgents.length, callQueue.length)).forEach(agent => {
	if (callQueue.length === 0) return;

	const number = callQueue.shift();
	updateQueueCount();

	// Update agent status
	agent.status = 'ringing';
	agent.currentCall = number;
	agent.callDuration = '00:00';

	// Show call modal (simulated)
	showCallModal(number);

	// Simulate call progress
	setTimeout(() => {
	agent.status = 'on-call';
	updateAgentUI(agent);

	// Simulate call ending
	const callDuration = Math.floor(Math.random() * 120) + 30; // 30-150 seconds
	setTimeout(() => {
	agent.status = 'wrap-up';
	agent.callDuration = null;
	updateAgentUI(agent);

	// Return to available after wrap-up
	setTimeout(() => {
	agent.status = 'available';
	agent.currentCall = null;
	updateAgentUI(agent);
	simulateCalls();
	}, 5000);
	}, callDuration * 1000);
	}, 3000);
	});

	// Continue with next batch
	setTimeout(simulateCalls, 2000);
	}

	function updateAgentUI(agent) {
	// In a real app, this would update the specific agent card in the UI
	console.log(`Agent ${agent.name} status updated to ${agent.status}`);
	}

	function showCallModal(number) {
	document.getElementById('caller-number').textContent = number;
	callModal.classList.remove('hidden');

	// Auto-close after 10 seconds if not answered
	setTimeout(() => {
	if (!callModal.classList.contains('hidden')) {
	callModal.classList.add('hidden');
	}
	}, 10000);
	}

	function showNotification(message, type = 'success') {
	// In a real app, this would show a toast notification
	console.log(`Notification (${type}): ${message}`);
	}

	// Initialize
	updateQueueCount();

	// Close modal when clicking outside
	window.addEventListener('click', (event) => {
	if (event.target === callModal) {
	callModal.classList.add('hidden');
	}
	});

	// Handle next action dropdown
	document.querySelector('select').addEventListener('change', function() {
	const callbackContainer = document.getElementById('callback-container');
	if (this.value === 'Schedule Call Back') {
	callbackContainer.classList.remove('hidden');
	} else {
	callbackContainer.classList.add('hidden');
	}
	});
	</script>
	</body>
	</html>