|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Call Center Voice Files Admin</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> |
|
|
.audio-player { |
|
|
width: 100%; |
|
|
background-color: #f3f4f6; |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
|
|
|
.audio-player::-webkit-media-controls-panel { |
|
|
background-color: #f3f4f6; |
|
|
} |
|
|
|
|
|
.waveform { |
|
|
height: 60px; |
|
|
background: linear-gradient(90deg, #3b82f6 0%, #3b82f6 50%, transparent 50%, transparent 100%); |
|
|
background-size: 20px 100%; |
|
|
border-radius: 4px; |
|
|
margin: 10px 0; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.waveform::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); |
|
|
animation: wave 1.5s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes wave { |
|
|
0% { transform: translateX(-100%); } |
|
|
100% { transform: translateX(100%); } |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
transform: translateX(-100%); |
|
|
position: fixed; |
|
|
z-index: 50; |
|
|
height: 100vh; |
|
|
} |
|
|
|
|
|
.sidebar.open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-black text-white w-64 flex-shrink-0"> |
|
|
<div class="p-4 flex items-center justify-between border-b border-gray-800"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-headset text-2xl"></i> |
|
|
<span class="text-xl font-bold">CallCenterPro</span> |
|
|
</div> |
|
|
<button id="sidebar-close" class="md:hidden"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<nav class="p-4"> |
|
|
<div class="mb-8"> |
|
|
<p class="text-gray-400 uppercase text-xs font-semibold mb-2">Main</p> |
|
|
<a href="#" class="block py-2 px-3 rounded bg-gray-800 mb-1"> |
|
|
<i class="fas fa-tachometer-alt mr-2"></i> Dashboard |
|
|
</a> |
|
|
<a href="#" class="block py-2 px-3 rounded hover:bg-gray-800 mb-1"> |
|
|
<i class="fas fa-users mr-2"></i> Agents |
|
|
</a> |
|
|
<a href="#" class="block py-2 px-3 rounded hover:bg-gray-800 mb-1"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> Calls |
|
|
</a> |
|
|
</div> |
|
|
<div class="mb-8"> |
|
|
<p class="text-gray-400 uppercase text-xs font-semibold mb-2">Voice Files</p> |
|
|
<a href="#" class="block py-2 px-3 rounded bg-gray-800 mb-1"> |
|
|
<i class="fas fa-file-audio mr-2"></i> All Recordings |
|
|
</a> |
|
|
<a href="#" class="block py-2 px-3 rounded hover:bg-indigo-700 mb-1"> |
|
|
<i class="fas fa-tags mr-2"></i> Categories |
|
|
</a> |
|
|
<a href="#" class="block py-2 px-3 rounded hover:bg-indigo-700 mb-1"> |
|
|
<i class="fas fa-chart-bar mr-2"></i> Analytics |
|
|
</a> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 uppercase text-xs font-semibold mb-2">Settings</p> |
|
|
<a href="#" class="block py-2 px-3 rounded hover:bg-gray-800 mb-1"> |
|
|
<i class="fas fa-cog mr-2"></i> System Settings |
|
|
</a> |
|
|
<a href="#" class="block py-2 px-3 rounded hover:bg-indigo-700 mb-1"> |
|
|
<i class="fas fa-user-shield mr-2"></i> Permissions |
|
|
</a> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-white shadow-sm z-10"> |
|
|
<div class="flex items-center justify-between p-4"> |
|
|
<div class="flex items-center"> |
|
|
<button id="sidebar-toggle" class="md:hidden mr-4"> |
|
|
<i class="fas fa-bars text-gray-600"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Voice Recordings Management</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> |
|
|
<input type="text" placeholder="Search recordings..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button id="notification-btn" class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
|
|
|
<div id="notification-panel" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-10 border"> |
|
|
<div class="p-3 border-b"> |
|
|
<h3 class="text-sm font-medium">Notifications</h3> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="p-3 hover:bg-gray-50"> |
|
|
<p class="text-sm">New recording available for review</p> |
|
|
<p class="text-xs text-gray-500">2 minutes ago</p> |
|
|
</div> |
|
|
<div class="p-3 hover:bg-gray-50"> |
|
|
<p class="text-sm">System maintenance scheduled</p> |
|
|
<p class="text-xs text-gray-500">1 hour ago</p> |
|
|
</div> |
|
|
<div class="p-3 hover:bg-gray-50"> |
|
|
<p class="text-sm">3 new flagged recordings</p> |
|
|
<p class="text-xs text-gray-500">Today, 10:30 AM</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 border-t text-center"> |
|
|
<a href="/notifications" class="text-sm text-indigo-600 hover:text-indigo-800">View all notifications</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full"> |
|
|
<span class="hidden md:inline">Admin User</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
|
|
|
<div class="grid grid-cols-1 md: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">Total Recordings</p> |
|
|
<p class="text-2xl font-bold">1,248</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> |
|
|
<i class="fas fa-file-audio text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 12% from last week</p> |
|
|
</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">Today's Recordings</p> |
|
|
<p class="text-2xl font-bold">47</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-calendar-day text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 5% from yesterday</p> |
|
|
</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">Flagged Recordings</p> |
|
|
<p class="text-2xl font-bold">28</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-red-100 text-red-600"> |
|
|
<i class="fas fa-flag text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-red-500 text-sm mt-2"><i class="fas fa-arrow-down mr-1"></i> 3% from last week</p> |
|
|
</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">Storage Used</p> |
|
|
<p class="text-2xl font-bold">78%</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
|
|
<i class="fas fa-database text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mt-3"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 mb-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> |
|
|
<div class="flex flex-col md:flex-row md:items-center gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label> |
|
|
<div class="flex items-center"> |
|
|
<input type="date" class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<span class="mx-2 text-gray-500">to</span> |
|
|
<input type="date" class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Agent</label> |
|
|
<select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full md:w-auto"> |
|
|
<option>All Agents</option> |
|
|
<option>John Smith</option> |
|
|
<option>Sarah Johnson</option> |
|
|
<option>Michael Brown</option> |
|
|
<option>Emily Davis</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Status</label> |
|
|
<select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full md:w-auto"> |
|
|
<option>All Statuses</option> |
|
|
<option>Pending Review</option> |
|
|
<option>Reviewed</option> |
|
|
<option>Flagged</option> |
|
|
<option>Archived</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center gap-2"> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center"> |
|
|
<i class="fas fa-filter mr-2"></i> Apply Filters |
|
|
</button> |
|
|
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Reset |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="flex items-center justify-between p-4 border-b"> |
|
|
<h2 class="text-lg font-semibold">Recent Voice Recordings</h2> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="px-3 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 text-sm flex items-center"> |
|
|
<i class="fas fa-download mr-2"></i> Export |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button id="bulk-actions-btn" class="px-3 py-1.5 border rounded-md hover:bg-gray-50 text-sm flex items-center"> |
|
|
<i class="fas fa-tasks mr-2"></i> Bulk Actions |
|
|
<i class="fas fa-chevron-down ml-2 text-xs"></i> |
|
|
</button> |
|
|
<div id="bulk-actions-menu" class="hidden absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg z-10 border"> |
|
|
<div class="py-1"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-check-circle mr-2 text-green-500"></i> Approve Selected</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-flag mr-2 text-red-500"></i> Flag Selected</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-archive mr-2 text-blue-500"></i> Archive Selected</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-trash-alt mr-2 text-red-500"></i> Delete Selected</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</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"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recording</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent</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">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"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-file-audio text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Customer Service Call #1245</div> |
|
|
<div class="text-sm text-gray-500">Call ID: CS-2023-06-15-001</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">John Smith</div> |
|
|
<div class="text-sm text-gray-500">Team A</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Jun 15, 2023</div> |
|
|
<div class="text-sm text-gray-500">10:24 AM</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"> |
|
|
4:32 min |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"> |
|
|
Reviewed |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-play"></i></button> |
|
|
<button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-download"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-file-audio text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Technical Support #8921</div> |
|
|
<div class="text-sm text-gray-500">Call ID: TS-2023-06-15-002</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Sarah Johnson</div> |
|
|
<div class="text-sm text-gray-500">Team B</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Jun 15, 2023</div> |
|
|
<div class="text-sm text-gray-500">11:47 AM</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"> |
|
|
7:15 min |
|
|
</span> |
|
|
</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"> |
|
|
Pending |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-play"></i></button> |
|
|
<button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-download"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-file-audio text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Sales Inquiry #4567</div> |
|
|
<div class="text-sm text-gray-500">Call ID: SL-2023-06-14-001</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Michael Brown</div> |
|
|
<div class="text-sm text-gray-500">Team C</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Jun 14, 2023</div> |
|
|
<div class="text-sm text-gray-500">3:22 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"> |
|
|
5:48 min |
|
|
</span> |
|
|
</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"> |
|
|
Flagged |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-play"></i></button> |
|
|
<button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-download"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-file-audio text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Complaint Resolution #3345</div> |
|
|
<div class="text-sm text-gray-500">Call ID: CR-2023-06-14-002</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Emily Davis</div> |
|
|
<div class="text-sm text-gray-500">Team A</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Jun 14, 2023</div> |
|
|
<div class="text-sm text-gray-500">4:15 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"> |
|
|
12:45 min |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"> |
|
|
Reviewed |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-play"></i></button> |
|
|
<button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-download"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-file-audio text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Product Inquiry #7812</div> |
|
|
<div class="text-sm text-gray-500">Call ID: PI-2023-06-13-001</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Robert Wilson</div> |
|
|
<div class="text-sm text-gray-500">Team B</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Jun 13, 2023</div> |
|
|
<div class="text-sm text-gray-500">9:30 AM</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"> |
|
|
3:15 min |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800"> |
|
|
Archived |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-play"></i></button> |
|
|
<button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-download"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> |
|
|
<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">1248</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-indigo-50 border-indigo-500 text-indigo-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> |
|
|
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"> |
|
|
... |
|
|
</span> |
|
|
<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"> |
|
|
25 |
|
|
</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 id="audio-player-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"> |
|
|
<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white"> |
|
|
<div class="flex justify-between items-center pb-3 border-b"> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Customer Service Call #1245</h3> |
|
|
<button id="close-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600">Agent: <span class="font-medium">John Smith</span></p> |
|
|
<p class="text-sm text-gray-600">Date: <span class="font-medium">Jun 15, 2023 - 10:24 AM</span></p> |
|
|
</div> |
|
|
<div> |
|
|
<span class="px-3 py-1 rounded-full bg-green-100 text-green-800 text-sm font-medium">4:32 min</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="waveform mb-4"></div> |
|
|
|
|
|
<audio controls class="audio-player w-full mb-4"> |
|
|
<source src="#" type="audio/mpeg"> |
|
|
Your browser does not support the audio element. |
|
|
</audio> |
|
|
|
|
|
<div class="flex items-center justify-between mt-6"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 flex items-center"> |
|
|
<i class="fas fa-check mr-2"></i> Approve |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 flex items-center"> |
|
|
<i class="fas fa-flag mr-2"></i> Flag |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 flex items-center"> |
|
|
<i class="fas fa-download mr-2"></i> Download |
|
|
</button> |
|
|
<button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 flex items-center"> |
|
|
<i class="fas fa-share-alt mr-2"></i> Share |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h4 class="font-medium text-gray-800 mb-2">Call Notes</h4> |
|
|
<textarea class="w-full border rounded p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="3" placeholder="Add notes about this call..."></textarea> |
|
|
<div class="flex justify-end mt-2"> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Save Notes</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const notificationBtn = document.getElementById('notification-btn'); |
|
|
const notificationPanel = document.getElementById('notification-panel'); |
|
|
|
|
|
if (notificationBtn && notificationPanel) { |
|
|
notificationBtn.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
notificationPanel.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!notificationBtn.contains(e.target) && !notificationPanel.contains(e.target)) { |
|
|
notificationPanel.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const sidebarToggle = document.getElementById('sidebar-toggle'); |
|
|
const sidebarClose = document.getElementById('sidebar-close'); |
|
|
const sidebar = document.querySelector('.sidebar'); |
|
|
|
|
|
sidebarToggle.addEventListener('click', () => { |
|
|
sidebar.classList.add('open'); |
|
|
}); |
|
|
|
|
|
sidebarClose.addEventListener('click', () => { |
|
|
sidebar.classList.remove('open'); |
|
|
}); |
|
|
|
|
|
|
|
|
const bulkActionsBtn = document.getElementById('bulk-actions-btn'); |
|
|
const bulkActionsMenu = document.getElementById('bulk-actions-menu'); |
|
|
|
|
|
bulkActionsBtn.addEventListener('click', () => { |
|
|
bulkActionsMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!bulkActionsBtn.contains(e.target) && !bulkActionsMenu.contains(e.target)) { |
|
|
bulkActionsMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const playButtons = document.querySelectorAll('button:has(.fa-play)'); |
|
|
const audioModal = document.getElementById('audio-player-modal'); |
|
|
const closeModal = document.getElementById('close-modal'); |
|
|
|
|
|
playButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
audioModal.classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
audioModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', (e) => { |
|
|
if (e.target === audioModal) { |
|
|
audioModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const waveforms = document.querySelectorAll('.waveform'); |
|
|
waveforms.forEach(wave => { |
|
|
const duration = Math.random() * 2 + 1; |
|
|
wave.style.animationDuration = `${duration}s`; |
|
|
}); |
|
|
</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=itsusony/vioce" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
