Cool, the navigation bar is working file but the pages on the navigation bar are blank and it's giving me an "Error 404: This page could not be found", so create those now. Create a page for Appointments, Call Logs, Leads, Analytics, Settings and Logout - Initial Deployment
98d935d
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gym Outsourcing - Appointments</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> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 70px; | |
| } | |
| .sidebar.collapsed .nav-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-text { | |
| display: none; | |
| } | |
| .main-content { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed + .main-content { | |
| margin-left: 70px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar (same as dashboard) --> | |
| <div class="sidebar bg-dark text-white w-64 flex flex-col"> | |
| <div class="p-4 flex items-center space-x-2 border-b border-gray-700 cursor-pointer" onclick="toggleSidebar()"> | |
| <div class="bg-primary p-2 rounded-lg"> | |
| <i class="fas fa-dumbbell text-white text-xl"></i> | |
| </div> | |
| <span class="logo-text text-xl font-bold">Gym Outsourcing</span> | |
| </div> | |
| <div class="p-4 border-b border-gray-700"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center"> | |
| <span class="text-white font-bold">GO</span> | |
| </div> | |
| <div class="nav-text"> | |
| <p class="font-medium">Admin Dashboard</p> | |
| <p class="text-gray-400 text-sm">Super Admin</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <ul class="space-y-1 p-2"> | |
| <li> | |
| <a href="dashboard.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white"> | |
| <i class="fas fa-home"></i> | |
| <span class="nav-text">Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="appointments.html" class="flex items-center space-x-3 p-3 rounded-lg bg-primary text-white"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <span class="nav-text">Appointments</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="call-logs.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white"> | |
| <i class="fas fa-phone"></i> | |
| <span class="nav-text">Call Logs</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="leads.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white"> | |
| <i class="fas fa-users"></i> | |
| <span class="nav-text">Leads</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="analytics.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white"> | |
| <i class="fas fa-chart-line"></i> | |
| <span class="nav-text">Analytics</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="settings.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white"> | |
| <i class="fas fa-cog"></i> | |
| <span class="nav-text">Settings</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="p-4 border-t border-gray-700"> | |
| <a href="logout.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white w-full"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| <span class="nav-text">Logout</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content flex-1 overflow-y-auto ml-64"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm p-4 flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold text-dark">Appointments</h1> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors"> | |
| <i class="fas fa-plus mr-2"></i> New Appointment | |
| </button> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-gray-500 text-xl"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center"> | |
| <span class="text-white text-sm">GO</span> | |
| </div> | |
| <span class="font-medium">Admin</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Appointments Content --> | |
| <main class="p-6"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold">Upcoming Appointments</h2> | |
| <div class="flex space-x-2"> | |
| <input type="text" placeholder="Search appointments..." class="border border-gray-300 rounded-lg px-3 py-1 text-sm"> | |
| <select class="border border-gray-300 rounded-lg px-3 py-1 text-sm"> | |
| <option>All Status</option> | |
| <option>Confirmed</option> | |
| <option>Pending</option> | |
| <option>Cancelled</option> | |
| </select> | |
| </div> | |
| </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">Client</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date & Time</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="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">John Smith</div> | |
| <div class="text-sm text-gray-500">+1 (555) 123-4567</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Personal Training</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Tomorrow, 3:00 PM</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">Confirmed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-blue-600 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <!-- More appointment rows would go here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500">Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span> appointments</div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Previous</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| function toggleSidebar() { | |
| const sidebar = document.querySelector('.sidebar'); | |
| sidebar.classList.toggle('collapsed'); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ARIST069/test-3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gym Outsourcing - AI Receptionist Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3b82f6', | |
| secondary: '#10b981', | |
| dark: '#1f2937', | |
| light: '#f9fafb', | |
| accent: '#f59e0b', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 70px; | |
| } | |
| .sidebar.collapsed .nav-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-text { | |
| display: none; | |
| } | |
| .main-content { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed + .main-content { | |
| margin-left: 70px; | |
| } | |
| .call-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .waveform { | |
| background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%); | |
| height: 40px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .waveform::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q 25 10, 50 20 T 100 20 T 150 20 T 200 20' stroke='%23ffffff' fill='none' stroke-width='2' opacity='0.3'/%3E%3Cpath d='M0 25 Q 25 15, 50 25 T 100 25 T 150 25 T 200 25' stroke='%23ffffff' fill='none' stroke-width='2' opacity='0.2'/%3E%3C/svg%3E"); | |
| background-size: 200px 40px; | |
| animation: wave 1.5s linear infinite; | |
| } | |
| @keyframes wave { | |
| 0% { background-position-x: 0; } | |
| 100% { background-position-x: 200px; } | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-dark text-white w-64 flex flex-col"> | |
| <div class="p-4 flex items-center space-x-2 border-b border-gray-700 cursor-pointer" onclick="toggleSidebar()"> | |
| <div class="bg-primary p-2 rounded-lg"> | |
| <i class="fas fa-dumbbell text-white text-xl"></i> | |
| </div> | |
| <span class="logo-text text-xl font-bold">Gym Outsourcing</span> | |
| </div> | |
| <div class="p-4 border-b border-gray-700"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center"> | |
| <span class="text-white font-bold">GO</span> | |
| </div> | |
| <div class="nav-text"> | |
| <p class="font-medium">Admin Dashboard</p> | |
| <p class="text-gray-400 text-sm">Super Admin</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <ul class="space-y-1 p-2"> | |
| <li> | |
| <a href="dashboard.html" class="flex items-center space-x-3 p-3 rounded-lg bg-primary text-white"> | |
| <i class="fas fa-home"></i> | |
| <span class="nav-text">Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="appointments.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <span class="nav-text">Appointments</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="call-logs.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white"> | |
| <i class="fas fa-phone"></i> | |
| <span class="nav-text">Call Logs</span> | |
| <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">12</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="leads.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white"> | |
| <i class="fas fa-users"></i> | |
| <span class="nav-text">Leads</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="analytics.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white"> | |
| <i class="fas fa-chart-line"></i> | |
| <span class="nav-text">Analytics</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="settings.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white"> | |
| <i class="fas fa-cog"></i> | |
| <span class="nav-text">Settings</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="p-4 border-t border-gray-700"> | |
| <button class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white w-full"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| <span class="nav-text">Logout</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content flex-1 overflow-y-auto ml-64"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm p-4 flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold text-dark">AI Voice Receptionist Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <button onclick="document.getElementById('apiSettingsModal').classList.remove('hidden')" | |
| class="flex items-center space-x-2 text-gray-600 hover:text-primary"> | |
| <i class="fas fa-plug"></i> | |
| <span class="hidden md:inline">API Connections</span> | |
| </button> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-gray-500 text-xl"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center"> | |
| <span class="text-white text-sm">GO</span> | |
| </div> | |
| <span class="font-medium">Admin</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="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">Total Calls</p> | |
| <h3 class="text-2xl font-bold">248</h3> | |
| <p class="text-green-500 text-sm flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> 12% from last week | |
| </p> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-phone text-primary 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">Appointments Booked</p> | |
| <h3 class="text-2xl font-bold">156</h3> | |
| <p class="text-green-500 text-sm flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> 8% from last week | |
| </p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-calendar-check text-secondary 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">Call Pickup Rate</p> | |
| <h3 class="text-2xl font-bold">63%</h3> | |
| <p class="text-red-500 text-sm flex items-center"> | |
| <i class="fas fa-arrow-down mr-1"></i> 3% from last week | |
| </p> | |
| </div> | |
| <div class="bg-yellow-100 p-3 rounded-full"> | |
| <i class="fas fa-percentage text-accent 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">Avg. Call Duration</p> | |
| <h3 class="text-2xl font-bold">2:45</h3> | |
| <p class="text-green-500 text-sm flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> 15% from last week | |
| </p> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-full"> | |
| <i class="fas fa-clock text-purple-500 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Calls and Appointments --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- Recent Calls --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold">Recent Calls</h2> | |
| <button class="text-primary text-sm font-medium">View All</button> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Call Item --> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150 call-card"> | |
| <div class="flex items-start space-x-3"> | |
| <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-phone text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">John Smith</p> | |
| <p class="text-sm text-gray-500">+1 (555) 123-4567</p> | |
| <div class="flex items-center mt-1 text-xs text-gray-500"> | |
| <span class="mr-3">Today, 10:30 AM</span> | |
| <span class="flex items-center"> | |
| <i class="fas fa-clock mr-1"></i> 2:45 | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <div class="text-xs"> | |
| <span class="text-gray-500">Appointment:</span> | |
| <span class="font-medium ml-1">Booked for Tomorrow, 3 PM</span> | |
| </div> | |
| <button class="text-primary text-xs font-medium flex items-center"> | |
| <i class="fas fa-play mr-1"></i> Play Recording | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Call Item --> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150 call-card"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-phone-slash text-red-500"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Sarah Johnson</p> | |
| <p class="text-sm text-gray-500">+1 (555) 987-6543</p> | |
| <div class="flex items-center mt-1 text-xs text-gray-500"> | |
| <span class="mr-3">Today, 9:15 AM</span> | |
| <span class="flex items-center"> | |
| <i class="fas fa-clock mr-1"></i> 0:12 | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Missed</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <div class="text-xs"> | |
| <span class="text-gray-500">Appointment:</span> | |
| <span class="font-medium ml-1">Not booked</span> | |
| </div> | |
| <button class="text-primary text-xs font-medium flex items-center"> | |
| <i class="fas fa-play mr-1"></i> Play Voicemail | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Call Item --> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150 call-card"> | |
| <div class="flex items-start space-x-3"> | |
| <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-phone text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Michael Brown</p> | |
| <p class="text-sm text-gray-500">+1 (555) 456-7890</p> | |
| <div class="flex items-center mt-1 text-xs text-gray-500"> | |
| <span class="mr-3">Yesterday, 4:45 PM</span> | |
| <span class="flex items-center"> | |
| <i class="fas fa-clock mr-1"></i> 4:22 | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <div class="text-xs"> | |
| <span class="text-gray-500">Appointment:</span> | |
| <span class="font-medium ml-1">Booked for Friday, 10 AM</span> | |
| </div> | |
| <button class="text-primary text-xs font-medium flex items-center"> | |
| <i class="fas fa-play mr-1"></i> Play Recording | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upcoming Appointments --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold">Upcoming Appointments</h2> | |
| <button class="text-primary text-sm font-medium">View All</button> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Appointment Item --> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-start space-x-3"> | |
| <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-user text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">John Smith</p> | |
| <p class="text-sm text-gray-500">New member consultation</p> | |
| <div class="flex items-center mt-1 text-xs text-gray-500"> | |
| <span class="mr-3">Tomorrow, 3:00 PM</span> | |
| <span class="flex items-center"> | |
| <i class="fas fa-phone mr-1"></i> Called today, 10:30 AM | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="text-xs bg-primary text-white px-3 py-1 rounded-full hover:bg-blue-600 transition-colors"> | |
| Confirm | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Appointment Item --> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-start space-x-3"> | |
| <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-user text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Michael Brown</p> | |
| <p class="text-sm text-gray-500">Personal training session</p> | |
| <div class="flex items-center mt-1 text-xs text-gray-500"> | |
| <span class="mr-3">Friday, 10:00 AM</span> | |
| <span class="flex items-center"> | |
| <i class="fas fa-phone mr-1"></i> Called yesterday, 4:45 PM | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="text-xs bg-green-100 text-green-800 px-3 py-1 rounded-full"> | |
| Confirmed | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Appointment Item --> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-start space-x-3"> | |
| <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-user text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Emily Wilson</p> | |
| <p class="text-sm text-gray-500">Nutrition consultation</p> | |
| <div class="flex items-center mt-1 text-xs text-gray-500"> | |
| <span class="mr-3">Saturday, 11:30 AM</span> | |
| <span class="flex items-center"> | |
| <i class="fas fa-phone mr-1"></i> Called yesterday, 2:15 PM | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="text-xs bg-primary text-white px-3 py-1 rounded-full hover:bg-blue-600 transition-colors"> | |
| Confirm | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call Analytics and Transcript --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Call Analytics --> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Call Analytics</h2> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-primary text-white px-3 py-1 rounded-full">Today</button> | |
| <button class="text-xs bg-gray-100 text-gray-700 px-3 py-1 rounded-full">Week</button> | |
| <button class="text-xs bg-gray-100 text-gray-700 px-3 py-1 rounded-full">Month</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <!-- Chart Placeholder --> | |
| <div class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-chart-bar text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-500">Call analytics chart</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call Transcript --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold">Latest Call Transcript</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-sm"></i> | |
| </div> | |
| <span class="ml-2 font-medium">AI Assistant</span> | |
| </div> | |
| <span class="text-xs text-gray-500">10:30 AM</span> | |
| </div> | |
| <div class="ml-10 bg-blue-50 p-3 rounded-lg"> | |
| <p class="text-sm">Hello, this is Gym Outsourcing calling to schedule your free consultation. Are you available to talk right now?</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center"> | |
| <i class="fas fa-user text-white text-sm"></i> | |
| </div> | |
| <span class="ml-2 font-medium">John Smith</span> | |
| </div> | |
| <span class="text-xs text-gray-500">10:31 AM</span> | |
| </div> | |
| <div class="ml-10 bg-green-50 p-3 rounded-lg"> | |
| <p class="text-sm">Yes, I can talk now. I filled out your website form earlier.</p> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-sm"></i> | |
| </div> | |
| <span class="ml-2 font-medium">AI Assistant</span> | |
| </div> | |
| <span class="text-xs text-gray-500">10:32 AM</span> | |
| </div> | |
| <div class="ml-10 bg-blue-50 p-3 rounded-lg"> | |
| <p class="text-sm">Great! We have openings tomorrow at 3 PM or Friday at 10 AM. Which works better for you?</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center"> | |
| <button class="text-primary text-sm font-medium flex items-center justify-center w-full"> | |
| <i class="fas fa-arrow-down mr-2"></i> Load More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call Recording Player --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold">Call Recording</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="waveform rounded-lg mb-4"></div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-500">0:00</span> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-700 hover:text-primary"> | |
| <i class="fas fa-backward"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center hover:bg-blue-600"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="text-gray-700 hover:text-primary"> | |
| <i class="fas fa-forward"></i> | |
| </button> | |
| </div> | |
| <span class="text-sm text-gray-500">2:45</span> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <button class="text-sm text-gray-700 hover:text-primary flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-sm text-gray-700 hover:text-primary flex items-center"> | |
| <i class="fas fa-share-alt mr-2"></i> Share | |
| </button> | |
| <button class="text-sm text-gray-700 hover:text-primary flex items-center"> | |
| <i class="fas fa-trash-alt mr-2"></i> Delete | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar function | |
| function toggleSidebar() { | |
| const sidebar = document.querySelector('.sidebar'); | |
| sidebar.classList.toggle('collapsed'); | |
| } | |
| // Save API keys function | |
| function saveApiKeys() { | |
| const vapiKey = document.getElementById('vapiKey').value; | |
| const airtableKey = document.getElementById('airtableKey').value; | |
| const googleKey = document.getElementById('googleKey').value; | |
| // Here you would typically send these to your backend | |
| localStorage.setItem('vapiKey', vapiKey); | |
| localStorage.setItem('airtableKey', airtableKey); | |
| localStorage.setItem('googleKey', googleKey); | |
| alert('API keys saved successfully!'); | |
| document.getElementById('apiSettingsModal').classList.add('hidden'); | |
| } | |
| // Sample data for the dashboard | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Load saved API keys if they exist | |
| if (localStorage.getItem('vapiKey')) { | |
| document.getElementById('vapiKey').value = localStorage.getItem('vapiKey'); | |
| } | |
| if (localStorage.getItem('airtableKey')) { | |
| document.getElementById('airtableKey').value = localStorage.getItem('airtableKey'); | |
| } | |
| if (localStorage.getItem('googleKey')) { | |
| document.getElementById('googleKey').value = localStorage.getItem('googleKey'); | |
| } | |
| // Toggle sidebar | |
| const toggleSidebar = document.createElement('button'); | |
| toggleSidebar.innerHTML = '<i class="fas fa-bars"></i>'; | |
| toggleSidebar.className = 'fixed top-4 left-4 z-50 bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-primary md:hidden'; | |
| document.body.appendChild(toggleSidebar); | |
| const sidebar = document.querySelector('.sidebar'); | |
| const mainContent = document.querySelector('.main-content'); | |
| toggleSidebar.addEventListener('click', function() { | |
| sidebar.classList.toggle('collapsed'); | |
| }); | |
| // Simulate loading data | |
| setTimeout(() => { | |
| // This would be replaced with actual API calls to Vapi and Airtable | |
| console.log('Loading data from Vapi and Airtable...'); | |
| }, 1000); | |
| // Sample function to play call recording | |
| const playButtons = document.querySelectorAll('[class*="fa-play"]'); | |
| playButtons.forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| alert('Playing call recording...'); | |
| }); | |
| }); | |
| // Sample function to confirm appointments | |
| const confirmButtons = document.querySelectorAll('button:contains("Confirm")'); | |
| confirmButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| this.textContent = 'Confirmed'; | |
| this.classList.remove('bg-primary', 'hover:bg-blue-600'); | |
| this.classList.add('bg-green-100', 'text-green-800'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |