| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Telecom Commission Dashboard</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| .sidebar { |
| transition: all 0.3s; |
| } |
| .dashboard-card { |
| transition: transform 0.3s, box-shadow 0.3s; |
| } |
| .dashboard-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| .data-table { |
| font-size: 0.875rem; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0"> |
| <div class="p-4 flex items-center"> |
| <i data-feather="bar-chart-2" class="w-6 h-6 mr-2"></i> |
| <span class="text-xl font-semibold">Telecom Dashboard</span> |
| </div> |
| <nav class="mt-6"> |
| <div class="px-4 py-2 text-indigo-200 uppercase text-xs font-semibold tracking-wider"> |
| Main |
| </div> |
| <a href="#" class="flex items-center px-4 py-3 bg-indigo-900 text-white"> |
| <i data-feather="home" class="w-5 h-5 mr-3"></i> |
| <span>Dashboard</span> |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-indigo-200 hover:bg-indigo-700"> |
| <i data-feather="dollar-sign" class="w-5 h-5 mr-3"></i> |
| <span>Commissions</span> |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-indigo-200 hover:bg-indigo-700"> |
| <i data-feather="users" class="w-5 h-5 mr-3"></i> |
| <span>Partners</span> |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-indigo-200 hover:bg-indigo-700"> |
| <i data-feather="shopping-bag" class="w-5 h-5 mr-3"></i> |
| <span>Carriers</span> |
| </a> |
| <div class="px-4 py-2 text-indigo-200 uppercase text-xs font-semibold tracking-wider mt-4"> |
| Reports |
| </div> |
| <a href="#" class="flex items-center px-4 py-3 text-indigo-200 hover:bg-indigo-700"> |
| <i data-feather="pie-chart" class="w-5 h-5 mr-3"></i> |
| <span>Analytics</span> |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-indigo-200 hover:bg-indigo-700"> |
| <i data-feather="file-text" class="w-5 h-5 mr-3"></i> |
| <span>Export Data</span> |
| </a> |
| </nav> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-auto"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="flex justify-between items-center px-6 py-4"> |
| <h1 class="text-2xl font-semibold text-gray-800">Commission Dashboard</h1> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| </div> |
| <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
| <i data-feather="bell"></i> |
| </button> |
| <div class="flex items-center"> |
| <img src="http://static.photos/people/40x40/1" alt="User" class="w-8 h-8 rounded-full mr-2"> |
| <span class="text-gray-700">Admin</span> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="p-6"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="dashboard-card bg-white rounded-lg shadow p-6" data-aos="fade-up"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500 text-sm">Total MRC</p> |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">$25,900.92</h3> |
| </div> |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> |
| <i data-feather="dollar-sign"></i> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center text-sm text-gray-500"> |
| <span class="text-green-500 flex items-center"> |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> |
| 12.5% |
| </span> |
| <span class="ml-2">vs last month</span> |
| </div> |
| </div> |
|
|
| <div class="dashboard-card bg-white rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="100"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500 text-sm">Total Commission</p> |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">$82,206.40</h3> |
| </div> |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| <i data-feather="credit-card"></i> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center text-sm text-gray-500"> |
| <span class="text-green-500 flex items-center"> |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> |
| 8.3% |
| </span> |
| <span class="ml-2">vs last month</span> |
| </div> |
| </div> |
|
|
| <div class="dashboard-card bg-white rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="200"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500 text-sm">DiCom Payout</p> |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">$67,045.80</h3> |
| </div> |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
| <i data-feather="activity"></i> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center text-sm text-gray-500"> |
| <span class="text-green-500 flex items-center"> |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> |
| 6.7% |
| </span> |
| <span class="ml-2">vs last month</span> |
| </div> |
| </div> |
|
|
| <div class="dashboard-card bg-white rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="300"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500 text-sm">Current Month</p> |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">$4,234.00</h3> |
| </div> |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| <i data-feather="calendar"></i> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center text-sm text-gray-500"> |
| <span class="text-green-500 flex items-center"> |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> |
| 3.2% |
| </span> |
| <span class="ml-2">vs last month</span> |
| </div> |
| </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" data-aos="fade-up"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-semibold text-gray-800">Commission by Carrier</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded">Monthly</button> |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded">Quarterly</button> |
| </div> |
| </div> |
| <div class="h-64"> |
| <canvas id="carrierChart"></canvas> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="100"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-semibold text-gray-800">Commission by Partner</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded">Monthly</button> |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded">Quarterly</button> |
| </div> |
| </div> |
| <div class="h-64"> |
| <canvas id="partnerChart"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up"> |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> |
| <h2 class="text-lg font-semibold text-gray-800">Recent Transactions</h2> |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center"> |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> |
| Add New |
| </button> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200 data-table"> |
| <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">Company</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order Date</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Carrier</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">MRC</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payout</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Radcliff County Police Department</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1/3/2025</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">New Voice</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">AT&T Wireless</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$40.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$93.84</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">Paid</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CITY OF FLEMINGSBURG POLICE</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1/7/2025</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">New Voice</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">AT&T Wireless</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$40.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$93.84</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">Paid</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Lantech</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1/8/2025</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Upgrade</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">AT&T Wireless</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$60.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$58.65</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">Paid</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">USDI</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1/8/2025</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">New Voice</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">AT&T Wireless</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$65.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$152.49</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> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">MARION COUNTY EMS</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1/9/2025</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">New Data</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">AT&T Wireless</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$40.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$93.84</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">Paid</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="px-6 py-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">287</span> results |
| </div> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 border rounded text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Previous</button> |
| <button class="px-3 py-1 border rounded text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">1</button> |
| <button class="px-3 py-1 border rounded text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">2</button> |
| <button class="px-3 py-1 border rounded text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">3</button> |
| <button class="px-3 py-1 border rounded text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Next</button> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| const carrierCtx = document.getElementById('carrierChart').getContext('2d'); |
| const carrierChart = new Chart(carrierCtx, { |
| type: 'bar', |
| data: { |
| labels: ['AT&T Wireless', 'Verizon', 'Spectrum', 'Telesystem', 'Vonage', 'Others'], |
| datasets: [{ |
| label: 'Commission by Carrier', |
| data: [65000, 12000, 8000, 5000, 3000, 2000], |
| backgroundColor: [ |
| 'rgba(79, 70, 229, 0.7)', |
| 'rgba(16, 185, 129, 0.7)', |
| 'rgba(59, 130, 246, 0.7)', |
| 'rgba(245, 158, 11, 0.7)', |
| 'rgba(139, 92, 246, 0.7)', |
| 'rgba(156, 163, 175, 0.7)' |
| ], |
| borderColor: [ |
| 'rgba(79, 70, 229, 1)', |
| 'rgba(16, 185, 129, 1)', |
| 'rgba(59, 130, 246, 1)', |
| 'rgba(245, 158, 11, 1)', |
| 'rgba(139, 92, 246, 1)', |
| 'rgba(156, 163, 175, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| ticks: { |
| callback: function(value) { |
| return '$' + value.toLocaleString(); |
| } |
| } |
| } |
| }, |
| plugins: { |
| legend: { |
| display: false |
| }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| return '$' + context.raw.toLocaleString(); |
| } |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const partnerCtx = document.getElementById('partnerChart').getContext('2d'); |
| const partnerChart = new Chart(partnerCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Sandler', 'Telarus', 'Unity', 'LW Tech Solutions', 'Others'], |
| datasets: [{ |
| data: [45000, 25000, 10000, 5000, 2000], |
| backgroundColor: [ |
| 'rgba(79, 70, 229, 0.7)', |
| 'rgba(16, 185, 129, 0.7)', |
| 'rgba(59, 130, 246, 0.7)', |
| 'rgba(245, 158, 11, 0.7)', |
| 'rgba(139, 92, 246, 0.7)' |
| ], |
| borderColor: [ |
| 'rgba(79, 70, 229, 1)', |
| 'rgba(16, 185, 129, 1)', |
| 'rgba(59, 130, 246, 1)', |
| 'rgba(245, 158, 11, 1)', |
| 'rgba(139, 92, 246, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'right', |
| }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| const label = context.label || ''; |
| const value = context.raw || 0; |
| const total = context.dataset.data.reduce((a, b) => a + b, 0); |
| const percentage = Math.round((value / total) * 100); |
| return `${label}: $${value.toLocaleString()} (${percentage}%)`; |
| } |
| } |
| } |
| } |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
