Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VoiceBot Control Panel | TechSolutions SA</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s; | |
| background: linear-gradient(to bottom, #1e3a8a, #1e40af); | |
| } | |
| .sidebar.collapsed { | |
| width: 80px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .main-content { | |
| transition: all 0.3s; | |
| } | |
| .main-content.expanded { | |
| margin-left: 80px; | |
| } | |
| .call-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .conversation-bubble { | |
| max-width: 80%; | |
| } | |
| .bot-bubble { | |
| background-color: #ebf8ff; | |
| border-radius: 0 1rem 1rem 1rem; | |
| } | |
| .human-bubble { | |
| background-color: #e2e8f0; | |
| border-radius: 1rem 0 1rem 1rem; | |
| } | |
| .nav-section-title { | |
| color: #93c5fd; | |
| letter-spacing: 0.05em; | |
| font-size: 0.7rem; | |
| } | |
| .nav-item { | |
| transition: all 0.2s; | |
| } | |
| .nav-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| transform: translateX(2px); | |
| } | |
| .nav-item.active { | |
| background-color: rgba(255, 255, 255, 0.15); | |
| border-left: 3px solid #60a5fa; | |
| } | |
| .page { | |
| display: none; | |
| } | |
| .page.active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar text-white w-64 flex-shrink-0 flex flex-col h-full"> | |
| <div class="flex items-center justify-between p-4 border-b border-blue-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-2xl text-blue-300 mr-3"></i> | |
| <span class="sidebar-text text-xl font-bold">VoiceBot Control</span> | |
| </div> | |
| <button onclick="toggleSidebar()" class="text-blue-200 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto py-4"> | |
| <!-- Main Section --> | |
| <div class="px-4 mb-6"> | |
| <div class="mb-3 pl-2"> | |
| <span class="nav-section-title">MAIN NAVIGATION</span> | |
| </div> | |
| <nav class="space-y-1"> | |
| <a href="#" onclick="showPage('dashboard')" class="nav-item active flex items-center px-3 py-2.5 text-white rounded-lg"> | |
| <i class="fas fa-chart-line text-blue-300 mr-3 w-5 text-center"></i> | |
| <span class="sidebar-text font-medium">Dashboard</span> | |
| </a> | |
| <a href="#" onclick="showPage('callLogs')" class="nav-item flex items-center px-3 py-2.5 text-blue-100 hover:text-white rounded-lg"> | |
| <i class="fas fa-phone-alt text-blue-300 mr-3 w-5 text-center"></i> | |
| <span class="sidebar-text">Call Logs</span> | |
| </a> | |
| <a href="#" onclick="showPage('scripts')" class="nav-item flex items-center px-3 py-2.5 text-blue-100 hover:text-white rounded-lg"> | |
| <i class="fas fa-scroll text-blue-300 mr-3 w-5 text-center"></i> | |
| <span class="sidebar-text">Scripts</span> | |
| </a> | |
| <a href="#" onclick="showPage('analytics')" class="nav-item flex items-center px-3 py-2.5 text-blue-100 hover:text-white rounded-lg"> | |
| <i class="fas fa-chart-pie text-blue-300 mr-3 w-5 text-center"></i> | |
| <span class="sidebar-text">Analytics</span> | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Management Section --> | |
| <div class="px-4 mb-6"> | |
| <div class="mb-3 pl-2"> | |
| <span class="nav-section-title">CAMPAIGN MANAGEMENT</span> | |
| </div> | |
| <nav class="space-y-1"> | |
| <a href="#" onclick="showPage('leads')" class="nav-item flex items-center px-3 py-2.5 text-blue-100 hover:text-white rounded-lg"> | |
| <i class="fas fa-users text-blue-300 mr-3 w-5 text-center"></i> | |
| <span class="sidebar-text">Leads</span> | |
| </a> | |
| <a href="#" onclick="showPage('campaigns')" class="nav-item flex items-center px-3 py-2.5 text-blue-100 hover:text-white rounded-lg"> | |
| <i class="fas fa-bullhorn text-blue-300 mr-3 w-5 text-center"></i> | |
| <span class="sidebar-text">Campaigns</span> | |
| </a> | |
| <a href="#" onclick="showPage('products')" class="nav-item flex items-center px-3 py-2.5 text-blue-100 hover:text-white rounded-lg"> | |
| <i class="fas fa-boxes text-blue-300 mr-3 w-5 text-center"></i> | |
| <span class="sidebar-text">Products</span> | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Settings Section --> | |
| <div class="px-4"> | |
| <div class="mb-3 pl-2"> | |
| <span class="nav-section-title">SYSTEM SETTINGS</span> | |
| </div> | |
| <nav class="space-y-1"> | |
| <a href="#" onclick="showPage('users')" class="nav-item flex items-center px-3 py-2.5 text-blue-100 hover:text-white rounded-lg"> | |
| <i class="fas fa-user-cog text-blue-300 mr-3 w-5 text-center"></i> | |
| <span class="sidebar-text">Users</span> | |
| </a> | |
| <a href="#" onclick="showPage('integrations')" class="nav-item flex items-center px-3 py-2.5 text-blue-100 hover:text-white rounded-lg"> | |
| <i class="fas fa-plug text-blue-300 mr-3 w-5 text-center"></i> | |
| <span class="sidebar-text">Integrations</span> | |
| </a> | |
| <a href="#" onclick="showPage('settings')" class="nav-item flex items-center px-3 py-2.5 text-blue-100 hover:text-white rounded-lg"> | |
| <i class="fas fa-cog text-blue-300 mr-3 w-5 text-center"></i> | |
| <span class="sidebar-text">System Settings</span> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-blue-800"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-400"> | |
| <div class="sidebar-text"> | |
| <div class="font-medium text-white">Admin User</div> | |
| <div class="text-xs text-blue-200">admin@techsolutions.co.za</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div id="mainContent" class="main-content flex-1 overflow-auto h-full"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-6 py-4"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800" id="pageTitle">VoiceBot Control Panel</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button onclick="showNotification()" class="p-2 text-gray-600 hover:text-gray-900 focus:outline-none relative"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| <button onclick="showHelp()" class="p-2 text-gray-600 hover:text-gray-900 focus:outline-none"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| <button onclick="toggleDarkMode()" class="p-2 text-gray-600 hover:text-gray-900 focus:outline-none"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Pages Container --> | |
| <div id="pagesContainer"> | |
| <!-- Dashboard Page --> | |
| <div id="dashboard" class="page active p-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Total Calls Today</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">142</h3> | |
| <p class="text-green-500 text-sm mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 12% from yesterday | |
| </p> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-phone-alt text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Successful Calls</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">87</h3> | |
| <p class="text-green-500 text-sm mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 61.3% success rate | |
| </p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-check-circle text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Hot Leads</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">32</h3> | |
| <p class="text-red-500 text-sm mt-1"> | |
| <i class="fas fa-arrow-down mr-1"></i> 5% from yesterday | |
| </p> | |
| </div> | |
| <div class="bg-red-100 p-3 rounded-full"> | |
| <i class="fas fa-fire text-red-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Estimated Revenue</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">R284,560</h3> | |
| <p class="text-green-500 text-sm mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 8% from yesterday | |
| </p> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-full"> | |
| <i class="fas fa-rand-sign text-purple-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Row --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Call Volume (Last 7 Days)</h2> | |
| <select class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Last 7 Days</option> | |
| <option>Last 30 Days</option> | |
| <option>This Month</option> | |
| <option>Last Month</option> | |
| </select> | |
| </div> | |
| <div id="callVolumeChart" class="h-64"></div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Lead Status</h2> | |
| </div> | |
| <div id="leadStatusChart" class="h-64"></div> | |
| </div> | |
| </div> | |
| <!-- Recent Calls & Script Editor --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Recent Calls</h2> | |
| <button onclick="showPage('callLogs')" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| View All Calls | |
| </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">Time</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</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">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 text-gray-900">10:24 AM</div> | |
| <div class="text-sm text-gray-500">Today</div> | |
| </td> | |
| <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"> | |
| <span class="text-blue-800 font-medium">JD</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">James Dlamini</div> | |
| <div class="text-sm text-gray-500">+27 82 123 4567</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">4:32</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"> | |
| Converted | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="openCallDetails(1)" class="text-blue-600 hover:text-blue-900 mr-3">Details</button> | |
| <button onclick="createFollowUp('James Dlamini')" class="text-gray-600 hover:text-gray-900">Follow Up</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">09:45 AM</div> | |
| <div class="text-sm text-gray-500">Today</div> | |
| </td> | |
| <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"> | |
| <span class="text-purple-800 font-medium">SN</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Nkosi</div> | |
| <div class="text-sm text-gray-500">+27 83 987 6543</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">2:15</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"> | |
| Interested | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="openCallDetails(2)" class="text-blue-600 hover:text-blue-900 mr-3">Details</button> | |
| <button onclick="createFollowUp('Sarah Nkosi')" class="text-gray-600 hover:text-gray-900">Follow Up</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">09:12 AM</div> | |
| <div class="text-sm text-gray-500">Today</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-pink-100 rounded-full flex items-center justify-center"> | |
| <span class="text-pink-800 font-medium">TM</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Thabo Mbeki</div> | |
| <div class="text-sm text-gray-500">+27 81 555 1234</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">1:48</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-red-100 text-red-800"> | |
| Not Interested | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="openCallDetails(3)" class="text-blue-600 hover:text-blue-900 mr-3">Details</button> | |
| <button onclick="createFollowUp('Thabo Mbeki')" class="text-gray-600 hover:text-gray-900">Follow Up</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Active Script</h2> | |
| <div class="flex space-x-2"> | |
| <button onclick="saveScript()" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-save mr-1"></i> Save | |
| </button> | |
| <button onclick="testScript()" class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-play mr-1"></i> Test | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Script Name</label> | |
| <input type="text" id="scriptName" value="Office Tech - Main Sales Script" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Script Flow</label> | |
| <select id="scriptFlow" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Sales Call - Office Equipment</option> | |
| <option>Follow Up - Interested</option> | |
| <option>Follow Up - Not Sure</option> | |
| <option>Customer Service</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Script Content</label> | |
| <div class="border border-gray-300 rounded-md p-3 bg-gray-50 h-64 overflow-y-auto"> | |
| <div class="mb-3"> | |
| <div class="text-xs font-medium text-gray-500 mb-1">Greeting</div> | |
| <div class="bg-blue-50 p-2 rounded text-sm"> | |
| "Hello, this is [BotName] calling from TechSolutions SA. May I speak with [ContactName]?" | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-xs font-medium text-gray-500 mb-1">Introduction</div> | |
| <div class="bg-blue-50 p-2 rounded text-sm"> | |
| "We're reaching out to businesses in your area about our special offers on office technology solutions. Are you currently looking to upgrade any of your office equipment?" | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-xs font-medium text-gray-500 mb-1">If Yes</div> | |
| <div class="bg-blue-50 p-2 rounded text-sm"> | |
| "Great! What type of equipment are you most interested in? We have printers, laptops, and office accessories currently on promotion." | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-xs font-medium text-gray-500 mb-1">If No</div> | |
| <div class="bg-blue-50 p-2 rounded text-sm"> | |
| "I understand. Would you be open to hearing about our limited-time offers that could help your business save on technology costs?" | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-xs font-medium text-gray-500 mb-1">Closing</div> | |
| <div class="bg-blue-50 p-2 rounded text-sm"> | |
| "Thank you for your time today. Based on our conversation, I'll mark you as [LeadStatus]. Would you prefer we follow up by email or phone?" | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button onclick="addScriptStep()" class="text-gray-600 hover:text-gray-900 text-sm font-medium"> | |
| <i class="fas fa-plus mr-1"></i> Add Step | |
| </button> | |
| <button onclick="optimizeScript()" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-magic mr-1"></i> AI Optimize | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Management --> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Active Campaigns</h2> | |
| <button onclick="openNewCampaignModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-plus mr-1"></i> New Campaign | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition"> | |
| <div class="flex items-start justify-between mb-2"> | |
| <h3 class="font-medium text-gray-800">Office Tech Summer Sale</h3> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Promoting printer and laptop bundles to SMEs in Gauteng</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span><i class="fas fa-phone mr-1"></i> 342 calls</span> | |
| <span><i class="fas fa-fire mr-1"></i> 28 hot leads</span> | |
| <span><i class="fas fa-rand-sign mr-1"></i> R189k</span> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition"> | |
| <div class="flex items-start justify-between mb-2"> | |
| <h3 class="font-medium text-gray-800">Back-to-School IT</h3> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Targeting schools and universities for laptop bulk purchases</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span><i class="fas fa-phone mr-1"></i> 187 calls</span> | |
| <span><i class="fas fa-fire mr-1"></i> 14 hot leads</span> | |
| <span><i class="fas fa-rand-sign mr-1"></i> R312k</span> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition"> | |
| <div class="flex items-start justify-between mb-2"> | |
| <h3 class="font-medium text-gray-800">Q3 Printer Refresh</h3> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Paused</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Follow-up campaign for businesses that showed printer interest</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span><i class="fas fa-phone mr-1"></i> 89 calls</span> | |
| <span><i class="fas fa-fire mr-1"></i> 7 hot leads</span> | |
| <span><i class="fas fa-rand-sign mr-1"></i> R76k</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call Logs Page --> | |
| <div id="callLogs" class="page p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Call Logs</h2> | |
| <div class="flex space-x-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search calls..." class="border border-gray-300 rounded-md px-4 py-2 pl-10 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <select class="border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>All Status</option> | |
| <option>Converted</option> | |
| <option>Interested</option> | |
| <option>Not Interested</option> | |
| <option>No Answer</option> | |
| </select> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <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">Time</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th> | |
| <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">Duration</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">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 text-gray-900">10:24 AM</div> | |
| <div class="text-sm text-gray-500">15 Jun 2023</div> | |
| </td> | |
| <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"> | |
| <span class="text-blue-800 font-medium">JD</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">James Dlamini</div> | |
| <div class="text-sm text-gray-500">+27 82 123 4567</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Office Tech Summer Sale</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">4:32</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"> | |
| Converted | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="openCallDetails(1)" class="text-blue-600 hover:text-blue-900 mr-3">Details</button> | |
| <button onclick="createFollowUp('James Dlamini')" class="text-gray-600 hover:text-gray-900">Follow Up</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">09:45 AM</div> | |
| <div class="text-sm text-gray-500">15 Jun 2023</div> | |
| </td> | |
| <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"> | |
| <span class="text-purple-800 font-medium">SN</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Nkosi</div> | |
| <div class="text-sm text-gray-500">+27 83 987 6543</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Back-to-School IT</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">2:15</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"> | |
| Interested | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="openCallDetails(2)" class="text-blue-600 hover:text-blue-900 mr-3">Details</button> | |
| <button onclick="createFollowUp('Sarah Nkosi')" class="text-gray-600 hover:text-gray-900">Follow Up</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">09:12 AM</div> | |
| <div class="text-sm text-gray-500">15 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-pink-100 rounded-full flex items-center justify-center"> | |
| <span class="text-pink-800 font-medium">TM</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Thabo Mbeki</div> | |
| <div class="text-sm text-gray-500">+27 81 555 1234</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Office Tech Summer Sale</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">1:48</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-red-100 text-red-800"> | |
| Not Interested | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="openCallDetails(3)" class="text-blue-600 hover:text-blue-900 mr-3">Details</button> | |
| <button onclick="createFollowUp('Thabo Mbeki')" class="text-gray-600 hover:text-gray-900">Follow Up</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">14 Jun 2023</div> | |
| <div class="text-sm text-gray-500">3:45 PM</div> | |
| </td> | |
| <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"> | |
| <span class="text-green-800 font-medium">PM</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Peter Molefe</div> | |
| <div class="text-sm text-gray-500">+27 84 321 9876</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Back-to-School IT</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">3:02</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"> | |
| Converted | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="openCallDetails(4)" class="text-blue-600 hover:text-blue-900 mr-3">Details</button> | |
| <button onclick="createFollowUp('Peter Molefe')" class="text-gray-600 hover:text-gray-900">Follow Up</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">14 Jun 2023</div> | |
| <div class="text-sm text-gray-500">11:30 AM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-orange-100 rounded-full flex items-center justify-center"> | |
| <span class="text-orange-800 font-medium">LN</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Lindiwe Ndlovu</div> | |
| <div class="text-sm text-gray-500">+27 83 456 7890</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Q3 Printer Refresh</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">2:45</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"> | |
| Interested | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="openCallDetails(5)" class="text-blue-600 hover:text-blue-900 mr-3">Details</button> | |
| <button onclick="createFollowUp('Lindiwe Ndlovu')" class="text-gray-600 hover:text-gray-900">Follow Up</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Previous | |
| </a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Next | |
| </a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> results | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Previous</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 1 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 2 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 3 | |
| </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Next</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scripts Page --> | |
| <div id="scripts" class="page p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Script Management</h2> | |
| <button onclick="openNewScriptModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-plus mr-1"></i> New Script | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg text-gray-800">Sales Call - Office Equipment</h3> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Main sales script for office technology products including printers, laptops and accessories.</p> | |
| <div class="flex justify-between text-xs text-gray-500 mb-4"> | |
| <span><i class="fas fa-calendar mr-1"></i> Last updated: 12 Jun 2023</span> | |
| <span><i class="fas fa-phone mr-1"></i> 342 calls</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="editScript(1)" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| <button onclick="testScript()" class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-play mr-1"></i> Test | |
| </button> | |
| <button onclick="duplicateScript(1)" class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-copy mr-1"></i> Duplicate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-purple-500"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg text-gray-800">Follow Up - Interested</h3> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Follow-up script for leads who showed interest in previous calls.</p> | |
| <div class="flex justify-between text-xs text-gray-500 mb-4"> | |
| <span><i class="fas fa-calendar mr-1"></i> Last updated: 5 Jun 2023</span> | |
| <span><i class="fas fa-phone mr-1"></i> 187 calls</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="editScript(2)" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| <button onclick="testScript()" class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-play mr-1"></i> Test | |
| </button> | |
| <button onclick="duplicateScript(2)" class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-copy mr-1"></i> Duplicate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg text-gray-800">Follow Up - Not Sure</h3> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Draft</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Script for leads who were unsure about purchasing during initial call.</p> | |
| <div class="flex justify-between text-xs text-gray-500 mb-4"> | |
| <span><i class="fas fa-calendar mr-1"></i> Last updated: 1 Jun 2023</span> | |
| <span><i class="fas fa-phone mr-1"></i> 89 calls</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="editScript(3)" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| <button onclick="testScript()" class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-play mr-1"></i> Test | |
| </button> | |
| <button onclick="duplicateScript(3)" class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-copy mr-1"></i> Duplicate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-red-500"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg text-gray-800">Customer Service</h3> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">Inactive</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Script for handling customer service inquiries and complaints.</p> | |
| <div class="flex justify-between text-xs text-gray-500 mb-4"> | |
| <span><i class="fas fa-calendar mr-1"></i> Last updated: 20 May 2023</span> | |
| <span><i class="fas fa-phone mr-1"></i> 45 calls</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="editScript(4)" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| <button onclick="testScript()" class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-play mr-1"></i> Test | |
| </button> | |
| <button onclick="duplicateScript(4)" class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-copy mr-1"></i> Duplicate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg text-gray-800">Back-to-School Promotion</h3> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">New</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Special script for the back-to-school laptop and tablet promotion.</p> | |
| <div class="flex justify-between text-xs text-gray-500 mb-4"> | |
| <span><i class="fas fa-calendar mr-1"></i> Last updated: 10 Jun 2023</span> | |
| <span><i class="fas fa-phone mr-1"></i> 76 calls</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="editScript(5)" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| <button onclick="testScript()" class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-play mr-1"></i> Test | |
| </button> | |
| <button onclick="duplicateScript(5)" class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-copy mr-1"></i> Duplicate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-indigo-500 flex flex-col items-center justify-center"> | |
| <button onclick="openNewScriptModal()" class="text-blue-600 hover:text-blue-800 flex flex-col items-center"> | |
| <i class="fas fa-plus-circle text-3xl mb-2"></i> | |
| <span class="font-medium">Add New Script</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analytics Page --> | |
| <div id="analytics" class="page p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Analytics Dashboard</h2> | |
| <div class="flex space-x-3"> | |
| <select class="border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Last 7 Days</option> | |
| <option>Last 30 Days</option> | |
| <option>This Month</option> | |
| <option>Last Month</option> | |
| <option>Custom Range</option> | |
| </select> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-download mr-1"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Call Performance</h2> | |
| <select class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>By Campaign</option> | |
| <option>By Script</option> | |
| <option>By Agent</option> | |
| </select> | |
| </div> | |
| <div id="callPerformanceChart" class="h-80"></div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Conversion Funnel</h2> | |
| </div> | |
| <div id="conversionFunnelChart" class="h-80"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Call Times</h2> | |
| </div> | |
| <div id="callTimesChart" class="h-64"></div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Lead Sources</h2> | |
| </div> | |
| <div id="leadSourcesChart" class="h-64"></div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Revenue by Product</h2> | |
| </div> | |
| <div id="revenueByProductChart" class="h-64"></div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Call Duration Distribution</h2> | |
| <select class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>All Calls</option> | |
| <option>Successful Calls</option> | |
| <option>Unsuccessful Calls</option> | |
| </select> | |
| </div> | |
| <div id="callDurationChart" class="h-80"></div> | |
| </div> | |
| </div> | |
| <!-- Leads Page --> | |
| <div id="leads" class="page p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Leads Management</h2> | |
| <div class="flex space-x-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search leads..." class="border border-gray-300 rounded-md px-4 py-2 pl-10 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <select class="border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>All Status</option> | |
| <option>Hot</option> | |
| <option>Warm</option> | |
| <option>Cold</option> | |
| <option>Converted</option> | |
| </select> | |
| <button onclick="openNewLeadModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-plus mr-1"></i> New Lead | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <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">Lead</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</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">Value</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Contact</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-red-100 rounded-full flex items-center justify-center"> | |
| <span class="text-red-800 font-medium">JD</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">James Dlamini</div> | |
| <div class="text-sm text-gray-500">Office Tech</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Capetown Financial</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">+27 82 123 4567</div> | |
| <div class="text-sm text-gray-500">jdlamini@capetownfinancial.co.za</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"> | |
| Converted | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">R17,998</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Today</div> | |
| <div class="text-sm text-gray-500">10:24 AM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="viewLead(1)" class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button onclick="editLead(1)" class="text-gray-600 hover:text-gray-900">Edit</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-yellow-100 rounded-full flex items-center justify-center"> | |
| <span class="text-yellow-800 font-medium">SN</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Nkosi</div> | |
| <div class="text-sm text-gray-500">Back-to-School</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Pretoria High School</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">+27 83 987 6543</div> | |
| <div class="text-sm text-gray-500">snkosi@pretoriahigh.edu.za</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"> | |
| Hot | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">R45,600</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Today</div> | |
| <div class="text-sm text-gray-500">09:45 AM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="viewLead(2)" class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button onclick="editLead(2)" class="text-gray-600 hover:text-gray-900">Edit</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-gray-100 rounded-full flex items-center justify-center"> | |
| <span class="text-gray-800 font-medium">TM</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Thabo Mbeki</div> | |
| <div class="text-sm text-gray-500">Office Tech</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Mbeki Consulting</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">+27 81 555 1234</div> | |
| <div class="text-sm text-gray-500">tm@mbekiconsulting.co.za</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-red-100 text-red-800"> | |
| Cold | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">-</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Today</div> | |
| <div class="text-sm text-gray-500">09:12 AM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="viewLead(3)" class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button onclick="editLead(3)" class="text-gray-600 hover:text-gray-900">Edit</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"> | |
| <span class="text-green-800 font-medium">PM</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Peter Molefe</div> | |
| <div class="text-sm text-gray-500">Back-to-School</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Durban University</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">+27 84 321 9876</div> | |
| <div class="text-sm text-gray-500">pmolefe@durbanuni.ac.za</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"> | |
| Converted | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">R112,500</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Yesterday</div> | |
| <div class="text-sm text-gray-500">3:45 PM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="viewLead(4)" class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button onclick="editLead(4)" class="text-gray-600 hover:text-gray-900">Edit</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-yellow-100 rounded-full flex items-center justify-center"> | |
| <span class="text-yellow-800 font-medium">LN</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Lindiwe Ndlovu</div> | |
| <div class="text-sm text-gray-500">Printer Refresh</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Joburg Legal</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">+27 83 456 7890</div> | |
| <div class="text-sm text-gray-500">lndlovu@joburglegal.co.za</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"> | |
| Hot | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">R24,999</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Yesterday</div> | |
| <div class="text-sm text | |
| </html> |