Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Agent Management 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: '#6366f1', | |
| secondary: '#8b5cf6', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .chart-container { | |
| position: relative; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| position: absolute; | |
| z-index: 50; | |
| height: 100vh; | |
| } | |
| .sidebar-open { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h1 class="text-xl font-bold text-primary flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> | |
| AgentSync | |
| </h1> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto p-4"> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white"> | |
| <i class="fas fa-chart-pie mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" id="agents-link" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-users mr-3"></i> | |
| Agents | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-tasks mr-3"></i> | |
| Tasks | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| Analytics | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Teams</h3> | |
| <div class="mt-2 space-y-1"> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <span class="w-2 h-2 mr-3 rounded-full bg-green-500"></span> | |
| Support Team | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <span class="w-2 h-2 mr-3 rounded-full bg-blue-500"></span> | |
| Sales Team | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <span class="w-2 h-2 mr-3 rounded-full bg-purple-500"></span> | |
| Marketing Team | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Sarah Johnson</p> | |
| <p class="text-xs text-gray-500">Admin</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top navigation --> | |
| <header class="bg-white border-b border-gray-200"> | |
| <div class="flex items-center justify-between px-6 py-4"> | |
| <div class="flex items-center"> | |
| <button id="sidebar-toggle" class="md:hidden text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h2 class="text-lg font-semibold text-gray-800 ml-4">Dashboard Overview</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main content area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- 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-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Agents</p> | |
| <p class="text-2xl font-bold text-gray-800 mt-1">42</p> | |
| <p class="text-xs text-green-500 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 12% from last month | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-indigo-50 text-primary"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Tasks Completed</p> | |
| <p class="text-2xl font-bold text-gray-800 mt-1">1,248</p> | |
| <p class="text-xs text-green-500 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 8% from last week | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-green-50 text-green-500"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Success Rate</p> | |
| <p class="text-2xl font-bold text-gray-800 mt-1">92%</p> | |
| <p class="text-xs text-red-500 mt-1"> | |
| <i class="fas fa-arrow-down mr-1"></i> 2% from last week | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-purple-50 text-purple-500"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Avg. Time/Task</p> | |
| <p class="text-2xl font-bold text-gray-800 mt-1">24m</p> | |
| <p class="text-xs text-green-500 mt-1"> | |
| <i class="fas fa-arrow-down mr-1"></i> 15% from last week | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-blue-50 text-blue-500"> | |
| <i class="fas fa-clock text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts and main content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Performance chart --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800">Agent Performance</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-primary text-white rounded-lg">Week</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-lg">Month</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-lg">Year</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="performanceChart" height="300"></canvas> | |
| </div> | |
| </div> | |
| <!-- Top performers --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6">Top Performers</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-primary"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Alex Johnson</p> | |
| <p class="text-xs text-gray-500">98% success rate</p> | |
| </div> | |
| <div class="ml-auto text-sm font-medium text-primary">1,248 pts</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500"> | |
| <i class="fas fa-medal"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Maria Garcia</p> | |
| <p class="text-xs text-gray-500">96% success rate</p> | |
| </div> | |
| <div class="ml-auto text-sm font-medium text-purple-500">1,156 pts</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500"> | |
| <i class="fas fa-medal"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Sam Wilson</p> | |
| <p class="text-xs text-gray-500">95% success rate</p> | |
| </div> | |
| <div class="ml-auto text-sm font-medium text-blue-500">1,102 pts</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500"> | |
| <i class="fas fa-award"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Lisa Chen</p> | |
| <p class="text-xs text-gray-500">94% success rate</p> | |
| </div> | |
| <div class="ml-auto text-sm font-medium text-green-500">1,045 pts</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500"> | |
| <i class="fas fa-award"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">David Kim</p> | |
| <p class="text-xs text-gray-500">93% success rate</p> | |
| </div> | |
| <div class="ml-auto text-sm font-medium text-yellow-500">998 pts</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent activity and task distribution --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Recent activity --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6">Recent Activity</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-primary mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Alex Johnson completed task #T-1248</p> | |
| <p class="text-xs text-gray-500">Customer onboarding - 24m 12s</p> | |
| <p class="text-xs text-gray-400 mt-1">10 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500 mt-1"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">New agent added - Sarah Miller</p> | |
| <p class="text-xs text-gray-500">Assigned to Support Team</p> | |
| <p class="text-xs text-gray-400 mt-1">45 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mt-1"> | |
| <i class="fas fa-tasks"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Batch of 24 tasks assigned</p> | |
| <p class="text-xs text-gray-500">Distributed across Sales Team</p> | |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mt-1"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Weekly report generated</p> | |
| <p class="text-xs text-gray-500">Overall success rate: 92% (+2%)</p> | |
| <p class="text-xs text-gray-400 mt-1">5 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task distribution --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6">Task Distribution</h3> | |
| <div class="chart-container"> | |
| <canvas id="taskDistributionChart" height="250"></canvas> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 rounded-full bg-primary mr-2"></span> | |
| <span class="text-sm text-gray-600">Completed</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 rounded-full bg-yellow-400 mr-2"></span> | |
| <span class="text-sm text-gray-600">In Progress</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span> | |
| <span class="text-sm text-gray-600">Pending</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span> | |
| <span class="text-sm text-gray-600">Failed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Sidebar toggle for mobile | |
| const sidebarToggle = document.getElementById('sidebar-toggle'); | |
| const sidebar = document.getElementById('sidebar'); | |
| sidebarToggle.addEventListener('click', () => { | |
| sidebar.classList.toggle('sidebar-open'); | |
| }); | |
| // Performance chart | |
| const performanceCtx = document.getElementById('performanceChart').getContext('2d'); | |
| const performanceChart = new Chart(performanceCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], | |
| datasets: [ | |
| { | |
| label: 'Tasks Completed', | |
| data: [320, 450, 510, 600, 720, 800, 950], | |
| borderColor: '#6366f1', | |
| backgroundColor: 'rgba(99, 102, 241, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Success Rate', | |
| data: [85, 87, 89, 90, 91, 92, 92], | |
| borderColor: '#10b981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| ticks: { | |
| callback: function(value) { | |
| if (this.datasetIndex === 1) { | |
| return value + '%'; | |
| } | |
| return value; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Task distribution chart | |
| const taskDistributionCtx = document.getElementById('taskDistributionChart').getContext('2d'); | |
| const taskDistributionChart = new Chart(taskDistributionCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Completed', 'In Progress', 'Pending', 'Failed'], | |
| datasets: [{ | |
| data: [65, 15, 15, 5], | |
| backgroundColor: [ | |
| '#6366f1', | |
| '#f59e0b', | |
| '#10b981', | |
| '#ef4444' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| cutout: '70%', | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| } | |
| } | |
| }); | |
| // Simulate data updates | |
| setInterval(() => { | |
| // Update performance chart | |
| const performanceData = performanceChart.data.datasets[0].data; | |
| const newValue = performanceData[performanceData.length - 1] + Math.floor(Math.random() * 50) - 20; | |
| performanceData.shift(); | |
| performanceData.push(newValue > 0 ? newValue : 50); | |
| const successData = performanceChart.data.datasets[1].data; | |
| const newSuccess = successData[successData.length - 1] + Math.floor(Math.random() * 4) - 1; | |
| successData.shift(); | |
| successData.push(newSuccess > 80 && newSuccess < 100 ? newSuccess : 92); | |
| performanceChart.update(); | |
| // Update task distribution | |
| const taskData = taskDistributionChart.data.datasets[0].data; | |
| taskData[0] = 60 + Math.floor(Math.random() * 15); | |
| taskData[1] = 10 + Math.floor(Math.random() * 10); | |
| taskData[2] = 15 + Math.floor(Math.random() * 10); | |
| taskData[3] = 100 - taskData[0] - taskData[1] - taskData[2]; | |
| taskDistributionChart.update(); | |
| }, 5000); | |
| </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=Uberpu/uberpu-agent-sync" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |