Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI VoiceCall Pro - Multichannel Calling System</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"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); | |
| } | |
| .ring-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); | |
| } | |
| 70% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); | |
| } | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .call-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .page { | |
| display: none; | |
| } | |
| .page.active { | |
| display: block; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .call-transcript { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .pipeline-stage { | |
| min-height: 150px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 gradient-bg text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-blue-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2 text-xl"></i> | |
| <span class="text-xl font-bold">AI VoiceCall Pro</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-white sidebar-item dashboard-link" data-page="dashboard"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-blue-200 hover:text-white sidebar-item ai-calls-link" data-page="ai-calls"> | |
| <i class="fas fa-robot mr-3"></i> | |
| AI Call Automation | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-blue-200 hover:text-white sidebar-item manual-calls-link" data-page="manual-calls"> | |
| <i class="fas fa-headset mr-3"></i> | |
| Manual Calling | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-blue-200 hover:text-white sidebar-item pipeline-link" data-page="pipeline"> | |
| <i class="fas fa-project-diagram mr-3"></i> | |
| Pipeline Management | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-blue-200 hover:text-white sidebar-item analytics-link" data-page="analytics"> | |
| <i class="fas fa-chart-bar mr-3"></i> | |
| Analytics | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-blue-200 hover:text-white sidebar-item crm-link" data-page="crm"> | |
| <i class="fas fa-users mr-3"></i> | |
| CRM Integration | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-blue-200 hover:text-white sidebar-item settings-link" data-page="settings"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| </div> | |
| <div class="mt-auto mb-4"> | |
| <div class="p-4 bg-blue-800 rounded-lg"> | |
| <h3 class="text-sm font-medium text-white">System Status</h3> | |
| <div class="mt-2"> | |
| <div class="flex justify-between text-xs text-blue-200"> | |
| <span>Call Capacity</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="w-full bg-blue-900 rounded-full h-2 mt-1"> | |
| <div class="bg-green-400 h-2 rounded-full progress-bar" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-xs text-blue-200"> | |
| <span>AI Accuracy</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="w-full bg-blue-900 rounded-full h-2 mt-1"> | |
| <div class="bg-green-400 h-2 rounded-full progress-bar" style="width: 92%"></div> | |
| </div> | |
| </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 md:hidden"> | |
| <button class="text-gray-500 focus:outline-none mobile-menu-btn"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 px-4"> | |
| <div class="relative max-w-md"> | |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input class="block w-full py-2 pl-10 pr-3 text-sm bg-gray-100 border border-transparent rounded-md focus:bg-white focus:border-blue-300 focus:ring-blue-300 focus:outline-none" placeholder="Search"> | |
| </div> | |
| </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 notifications-btn"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full notification-dot"></span> | |
| </button> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-2 focus:outline-none user-menu-btn"> | |
| <img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile"> | |
| <span class="hidden md:block text-sm font-medium text-gray-700">John Doe</span> | |
| </button> | |
| <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 user-menu"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 gradient-bg text-white"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dashboard-link" data-page="dashboard">Dashboard</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 ai-calls-link" data-page="ai-calls">AI Call Automation</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 manual-calls-link" data-page="manual-calls">Manual Calling</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 pipeline-link" data-page="pipeline">Pipeline Management</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 analytics-link" data-page="analytics">Analytics</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 crm-link" data-page="crm">CRM Integration</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 settings-link" data-page="settings">Settings</a> | |
| </div> | |
| </div> | |
| <!-- Main content area - All Pages --> | |
| <div class="flex-1 overflow-auto p-4"> | |
| <!-- Dashboard Page --> | |
| <div id="dashboard" class="page active"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">AI VoiceCall Dashboard</h1> | |
| <p class="text-gray-600">Manage your multichannel calling campaigns across Vodacom, Tigo, Airtel, Halotel, and TTCL</p> | |
| </div> | |
| <!-- Stats cards --> | |
| <div class="grid grid-cols-1 gap-5 mt-6 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm font-medium text-gray-500 truncate">Total Calls Today</div> | |
| <div class="mt-1 text-3xl font-semibold text-gray-900">1,254</div> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm font-medium text-gray-500 truncate">Successful Calls</div> | |
| <div class="mt-1 text-3xl font-semibold text-green-600">982</div> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm font-medium text-gray-500 truncate">Pipeline Progress</div> | |
| <div class="mt-1 text-3xl font-semibold text-purple-600">78%</div> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm font-medium text-gray-500 truncate">Follow-ups Needed</div> | |
| <div class="mt-1 text-3xl font-semibold text-yellow-600">156</div> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-redo"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick actions and telecom providers --> | |
| <div class="grid grid-cols-1 gap-5 mt-6 lg:grid-cols-3"> | |
| <div class="p-5 bg-white rounded-lg shadow lg:col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-900">Quick Actions</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none new-campaign-btn"> | |
| <i class="fas fa-plus mr-1"></i> New Campaign | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="p-4 bg-blue-50 rounded-lg cursor-pointer hover:bg-blue-100 transition duration-150 call-card start-ai-calls"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Start AI Calls</h3> | |
| <p class="text-sm text-gray-500">Automated pipeline</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-green-50 rounded-lg cursor-pointer hover:bg-green-100 transition duration-150 call-card start-manual-calls"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-3"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Manual Calls</h3> | |
| <p class="text-sm text-gray-500">Human intervention</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-purple-50 rounded-lg cursor-pointer hover:bg-purple-100 transition duration-150 call-card view-pipeline"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-3"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Pipeline View</h3> | |
| <p class="text-sm text-gray-500">Manage leads</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-yellow-50 rounded-lg cursor-pointer hover:bg-yellow-100 transition duration-150 call-card view-analytics"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-3"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Analytics</h3> | |
| <p class="text-sm text-gray-500">Performance metrics</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Telecom Providers</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer telecom-provider" data-provider="vodacom"> | |
| <img src="https://via.placeholder.com/40?text=V" class="w-10 h-10 rounded-full mr-3" alt="Vodacom"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Vodacom</h3> | |
| <p class="text-sm text-gray-500">Active calls: 342</p> | |
| </div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer telecom-provider" data-provider="tigo"> | |
| <img src="https://via.placeholder.com/40?text=T" class="w-10 h-10 rounded-full mr-3" alt="Tigo"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Tigo</h3> | |
| <p class="text-sm text-gray-500">Active calls: 278</p> | |
| </div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer telecom-provider" data-provider="airtel"> | |
| <img src="https://via.placeholder.com/40?text=A" class="w-10 h-10 rounded-full mr-3" alt="Airtel"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Airtel</h3> | |
| <p class="text-sm text-gray-500">Active calls: 195</p> | |
| </div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer telecom-provider" data-provider="halotel"> | |
| <img src="https://via.placeholder.com/40?text=H" class="w-10 h-10 rounded-full mr-3" alt="Halotel"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Halotel</h3> | |
| <p class="text-sm text-gray-500">Active calls: 132</p> | |
| </div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer telecom-provider" data-provider="ttcl"> | |
| <img src="https://via.placeholder.com/40?text=TT" class="w-10 h-10 rounded-full mr-3" alt="TTCL"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">TTCL</h3> | |
| <p class="text-sm text-gray-500">Active calls: 87</p> | |
| </div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active calls and recent activities --> | |
| <div class="grid grid-cols-1 gap-5 mt-6 lg:grid-cols-2"> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-900">Active Calls</h2> | |
| <button class="px-3 py-1 text-sm text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 focus:outline-none view-all-calls"> | |
| View All | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center p-3 border border-gray-100 rounded-lg active-call" data-call-id="1"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center ring-animation"> | |
| <i class="fas fa-phone text-blue-600"></i> | |
| </div> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full"></span> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="text-sm font-medium text-gray-900">+255 784 123 456</h3> | |
| <p class="text-sm text-gray-500">Vodacom | 2:34 min</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-blue-600 focus:outline-none view-call-details"> | |
| <i class="fas fa-comment-alt"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-red-600 focus:outline-none end-call"> | |
| <i class="fas fa-phone-slash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-100 rounded-lg active-call" data-call-id="2"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-headset text-green-600"></i> | |
| </div> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full"></span> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="text-sm font-medium text-gray-900">+255 713 987 654</h3> | |
| <p class="text-sm text-gray-500">Airtel | 1:12 min</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-blue-600 focus:outline-none view-call-details"> | |
| <i class="fas fa-comment-alt"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-red-600 focus:outline-none end-call"> | |
| <i class="fas fa-phone-slash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-100 rounded-lg active-call" data-call-id="3"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-purple-600"></i> | |
| </div> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-yellow-500 rounded-full"></span> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="text-sm font-medium text-gray-900">+255 762 555 123</h3> | |
| <p class="text-sm text-gray-500">Tigo | AI follow-up</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-blue-600 focus:outline-none view-call-details"> | |
| <i class="fas fa-comment-alt"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-red-600 focus:outline-none end-call"> | |
| <i class="fas fa-phone-slash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-900">Recent Activities</h2> | |
| <button class="px-3 py-1 text-sm text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 focus:outline-none view-all-activities"> | |
| View All | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-check text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-900">Call completed</h3> | |
| <p class="text-sm text-gray-500">+255 784 123 456 (Vodacom) - Duration: 3:12</p> | |
| <p class="text-xs text-gray-400 mt-1">2 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-redo text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-900">Follow-up scheduled</h3> | |
| <p class="text-sm text-gray-500">+255 713 987 654 (Airtel) - Tomorrow at 10:30 AM</p> | |
| <p class="text-xs text-gray-400 mt-1">15 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-900">Call failed</h3> | |
| <p class="text-sm text-gray-500">+255 762 555 123 (Tigo) - Line busy</p> | |
| <p class="text-xs text-gray-400 mt-1">32 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-purple-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-900">AI model updated</h3> | |
| <p class="text-sm text-gray-500">New conversation flows deployed</p> | |
| <p class="text-xs text-gray-400 mt-1">1 hour ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call controls --> | |
| <div class="mt-6 p-5 bg-white rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Call Controls</h2> | |
| <div class="flex flex-wrap items-center justify-between"> | |
| <div class="w-full sm:w-auto mb-4 sm:mb-0"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Select Telecom Provider</label> | |
| <select class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm telecom-select"> | |
| <option>Vodacom</option> | |
| <option>Tigo</option> | |
| <option>Airtel</option> | |
| <option>Halotel</option> | |
| <option>TTCL</option> | |
| </select> | |
| </div> | |
| <div class="w-full sm:w-auto mb-4 sm:mb-0"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Call Mode</label> | |
| <select class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm call-mode-select"> | |
| <option>AI Automated</option> | |
| <option>Manual Calling</option> | |
| <option>AI with Human Backup</option> | |
| </select> | |
| </div> | |
| <div class="w-full sm:w-auto mb-4 sm:mb-0"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> | |
| <input type="text" class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm phone-number-input" placeholder="Enter phone number"> | |
| </div> | |
| <div class="w-full sm:w-auto"> | |
| <button class="w-full sm:w-auto px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center justify-center start-call-btn"> | |
| <i class="fas fa-phone mr-2"></i> Start Call | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-sm font-medium text-gray-700 mb-2">Call Script (AI Mode)</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-3"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm flex-1"> | |
| <p class="text-sm text-gray-800">Hello, this is an automated call from our service center. How are you today?</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 bg-gray-100 rounded-full p-2 mr-3"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm flex-1"> | |
| <p class="text-sm text-gray-800 italic">Customer response will appear here...</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-3"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm flex-1"> | |
| <p class="text-sm text-gray-800">Based on your response, I can offer you our special promotion...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Calls Page --> | |
| <div id="ai-calls" class="page"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">AI Call Automation</h1> | |
| <p class="text-gray-600">Configure and manage your AI-powered automated calling campaigns</p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-5 lg:grid-cols-3"> | |
| <div class="lg:col-span-2"> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-900">Active AI Campaigns</h2> | |
| <button class="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none create-ai-campaign"> | |
| <i class="fas fa-plus mr-1"></i> New Campaign | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Calls</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Success Rate</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Customer Follow-ups</div> | |
| <div class="text-sm text-gray-500">Vodacom, Airtel</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,234 / 5,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 h-2 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 rounded-full bg-green-500" style="width: 78%"></div> | |
| </div> | |
| <span class="text-sm text-gray-500">78%</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3 edit-campaign"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900 pause-campaign"><i class="fas fa-pause"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Product Survey</div> | |
| <div class="text-sm text-gray-500">Tigo, Halotel</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Paused</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">876 / 2,500</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 h-2 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 rounded-full bg-yellow-500" style="width: 65%"></div> | |
| </div> | |
| <span class="text-sm text-gray-500">65%</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3 edit-campaign"><i class="fas fa-edit"></i></button> | |
| <button class="text-green-600 hover:text-green-900 resume-campaign"><i class="fas fa-play"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Service Renewal</div> | |
| <div class="text-sm text-gray-500">TTCL, Vodacom</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,456 / 10,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 h-2 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 rounded-full bg-green-500" style="width: 82%"></div> | |
| </div> | |
| <span class="text-sm text-gray-500">82%</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3 edit-campaign"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900 pause-campaign"><i class="fas fa-pause"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="mt-5 p-5 bg-white rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">AI Call Script Editor</h2> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Script Name</label> | |
| <input type="text" class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="Customer Follow-up v2"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Script Description</label> | |
| <textarea class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" rows="2">Standard follow-up script for customer satisfaction surveys</textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Call Flow</label> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-3"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm flex-1"> | |
| <textarea class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" rows="2">Hello, this is an automated call from our service center. How are you today?</textarea> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 bg-gray-100 rounded-full p-2 mr-3"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm flex-1"> | |
| <div class="text-sm text-gray-500 mb-2">Customer Response</div> | |
| <select class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option>Positive</option> | |
| <option>Neutral</option> | |
| <option>Negative</option> | |
| <option>Request Human</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-3"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm flex-1"> | |
| <textarea class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" rows="2">Based on your response, I can offer you our special promotion...</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Cancel | |
| </button> | |
| <button class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Save Script | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">AI Model Performance</h2> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Intent Recognition</span> | |
| <span>89%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 89%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Sentiment Analysis</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Response Accuracy</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Human Handoff Rate</span> | |
| <span>12%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 12%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-5 p-5 bg-white rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Recent AI Call Logs</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-3"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-900">+255 784 123 456</h3> | |
| <p class="text-sm text-gray-500">Successful call | Duration: 2:45</p> | |
| <p class="text-xs text-gray-400 mt-1">10 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-yellow-100 rounded-full p-2 mr-3"> | |
| <i class="fas fa-robot text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-900">+255 713 987 654</h3> | |
| <p class="text-sm text-gray-500">Human handoff | Sentiment: Negative</p> | |
| <p class="text-xs text-gray-400 mt-1">25 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-red-100 rounded-full p-2 mr-3"> | |
| <i class="fas fa-robot text-red-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-900">+255 762 555 123</h3> | |
| <p class="text-sm text-gray-500">Call failed | No answer</p> | |
| <p class="text-xs text-gray-400 mt-1">42 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-full p-2 mr-3"> | |
| <i class="fas fa-robot text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-900">+255 688 456 789</h3> | |
| <p class="text-sm text-gray-500">Successful call | Upsell opportunity</p> | |
| <p class="text-xs text-gray-400 mt-1">1 hour ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| View All Logs | |
| </button> | |
| </div> | |
| <div class="mt-5 p-5 bg-white rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">AI Model Training</h2> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Upload Call Transcripts</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none"> | |
| <span>Upload a file</span> | |
| <input type="file" class="sr-only"> | |
| </label> | |
| <p class="pl-1">or drag and drop</p> | |
| </div> | |
| <p class="text-xs text-gray-500">CSV, JSON up to 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Train Model | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manual Calls Page --> | |
| <div id="manual-calls" class="page"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Manual Calling</h1> | |
| <p class="text-gray-600">Human-in-the-loop calling with AI assistance</p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-5 lg:grid-cols-3"> | |
| <div class="lg:col-span-2"> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-900">Call Controls</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| <span class="w-2 h-2 mr-1 rounded-full bg-green-500"></span> | |
| Ready | |
| </span> | |
| <button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none toggle-availability"> | |
| <i class="fas fa-toggle-off mr-1"></i> Available | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> | |
| <div class="p-4 bg-blue-50 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Current Call</h3> | |
| <p class="text-sm text-gray-500">Waiting for next call...</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="px-3 py-1 text-sm bg-red-100 text-red-600 rounded-md hover:bg-red-200 focus:outline-none end-call-btn" disabled> | |
| <i class="fas fa-phone-slash mr-1"></i> End | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-yellow-100 text-yellow-600 rounded-md hover:bg-yellow-200 focus:outline-none hold-call-btn" disabled> | |
| <i class="fas fa-pause mr-1"></i> Hold | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-green-100 text-green-600 rounded-md hover:bg-green-200 focus:outline-none transfer-call-btn" disabled> | |
| <i class="fas fa-exchange-alt mr-1"></i> Transfer | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-purple-50 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-3"> | |
| <i class="fas fa-user-tie"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Customer Info</h3> | |
| <p class="text-sm text-gray-500">No active call</p> | |
| </div> | |
| </div> | |
| <div class="text-sm"> | |
| <div class="flex mb-1"> | |
| <span class="w-24 text-gray-500">Name:</span> | |
| <span class="text-gray-700">-</span> | |
| </div> | |
| <div class="flex mb-1"> | |
| <span class="w-24 text-gray-500">Account:</span> | |
| <span class="text-gray-700">-</span> | |
| </div> | |
| <div class="flex"> | |
| <span class="w-24 text-gray-500">Last Call:</span> | |
| <span class="text-gray-700">-</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-4 bg-gray-50 rounded-lg"> | |
| <h3 class="text-sm font-medium text-gray-900 mb-2">Call Notes</h3> | |
| <textarea class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" rows="3" placeholder="Enter call notes..." disabled></textarea> | |
| <div class="mt-2 flex justify-between"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-blue-600 focus:outline-none" disabled> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-blue-600 focus:outline-none" disabled> | |
| <i class="fas fa-tag"></i> | |
| </button> | |
| </div> | |
| <button class="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none save-notes-btn" disabled> | |
| Save Notes | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-4 bg-gray-50 rounded-lg call-transcript"> | |
| <h3 class="text-sm font-medium text-gray-900 mb-2">Call Transcript</h3> | |
| <div class="text-sm text-gray-500 italic">No active call. Transcript will appear here when a call is in progress.</div> | |
| </div> | |
| </div> | |
| <div class="mt-5 p-5 bg-white rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Call Queue</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone Number</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Provider</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Purpose</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Wait Time</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">+255 784 123 456</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">Vodacom</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">Service Follow-up</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">0:45</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 accept-call">Accept</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">+255 713 987 654</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">Airtel</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">Complaint Resolution</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">1:12</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 accept-call">Accept</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">+255 762 555 123</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">Tigo</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">AI Handoff</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">2:05</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 accept-call">Accept</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Quick Dial</h2> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> | |
| <input type="text" class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm quick-dial-number" placeholder="Enter phone number"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label> | |
| <select class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm quick-dial-provider"> | |
| <option>Vodacom</option> | |
| <option>Tigo</option> | |
| <option>Airtel</option> | |
| <option>Halotel</option> | |
| <option>TTCL</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Call Purpose</label> | |
| <select class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm quick-dial-purpose"> | |
| <option>Follow-up</option> | |
| <option>Sales</option> | |
| <option>Support</option> | |
| <option>Survey</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <button class="w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 quick-dial-btn"> | |
| <i class="fas fa-phone mr-2"></i> Dial Now | |
| </button> | |
| </div> | |
| <div class="mt-5 p-5 bg-white rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Call Scripts</h2> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <h3 class="text-sm font-medium text-gray-900">Standard Greeting</h3> | |
| <p class="text-sm text-gray-500 mt-1">"Hello, this is [Your Name] calling from [Company]. How are you today?"</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <h3 class="text-sm font-medium text-gray-900">Service Follow-up</h3> | |
| <p class="text-sm text-gray-500 mt-1">"I'm calling to follow up on your recent service request. Has everything been resolved to your satisfaction?"</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <h3 class="text-sm font-medium text-gray-900">Complaint Resolution</h3> | |
| <p class="text-sm text-gray-500 mt-1">"I understand you've had an issue with [service]. Let me see how I can help resolve this for you."</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <h3 class="text-sm font-medium text-gray-900">Closing Statement</h3> | |
| <p class="text-sm text-gray-500 mt-1">"Thank you for your time today. Is there anything else I can assist you with before we end this call?"</p> | |
| </div> | |
| </div> | |
| <button class="mt-3 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| View All Scripts | |
| </button> | |
| </div> | |
| <div class="mt-5 p-5 bg-white rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">AI Assistance</h2> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Customer Sentiment</label> | |
| <div class="p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-2/3"> | |
| <div class="text-sm text-gray-500">No active call</div> | |
| </div> | |
| <div class="w-1/3 text-right"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> | |
| Neutral | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Suggested Responses</label> | |
| <div class="space-y-2"> | |
| <div class="p-3 bg-blue-50 rounded-lg cursor-pointer hover:bg-blue-100"> | |
| <p class="text-sm text-gray-700">"I understand your concern. Let me check how we can resolve this for you."</p> | |
| </div> | |
| <div class="p-3 bg-blue-50 rounded-lg cursor-pointer hover:bg-blue-100"> | |
| <p class="text-sm text-gray-700">"That's a great question. Our records show that..."</p> | |
| </div> | |
| <div class="p-3 bg-blue-50 rounded-lg cursor-pointer hover:bg-blue-100"> | |
| <p class="text-sm text-gray-700">"I appreciate your feedback. Let me document this for our quality team."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Ask AI Assistant</label> | |
| <div class="flex"> | |
| <input type="text" class="flex-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Type your question..."> | |
| <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pipeline Management Page --> | |
| <div id="pipeline" class="page"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Pipeline Management</h1> | |
| <p class="text-gray-600">Track and manage your leads through the calling pipeline</p> | |
| </div> | |
| <div class="p-5 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-900">Sales Pipeline</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none add-lead-btn"> | |
| <i class="fas fa-plus mr-1"></i> Add Lead | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none filter-pipeline-btn"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <div class="inline-block min-w-full align-middle"> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-4 pipeline-stages"> | |
| <!-- New Leads --> | |
| <div class="p-3 bg-gray-50 rounded-lg pipeline-stage"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="text-sm font-medium text-gray-900">New Leads</h3> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">24</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-white rounded-lg shadow-sm cursor-move lead-card" draggable="true" data-lead-id="1"> | |
| <div class="flex justify-between"> | |
| <h4 class="text-sm font-medium text-gray-900">John Smith</h4> | |
| <span class="text-xs text-gray-500">Vodacom</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Interested in premium plan</p> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-xs text-gray-400">Today, 10:30 AM</span> | |
| <button class="text-blue-600 hover:text-blue-900 text-xs"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-white rounded-lg shadow-sm cursor-move lead-card" draggable="true" data-lead-id="2"> | |
| <div class="flex justify-between"> | |
| <h4 class="text-sm font-medium text-gray-900">Sarah Johnson</h4> | |
| <span class="text-xs text-gray-500">Airtel</span> | |
| </div> | |
| <p class="text | |
| </html> |