<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BM Tracking Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.stat-card { transition: all 0.3s ease; cursor: pointer; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.stat-card:active { transform: scale(0.98); }
.table-row { transition: all 0.2s ease; cursor: pointer; }
.table-row:hover { background-color: #f9fafb; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
.modal.show { display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s; }
.modal-content { background-color: #fefefe; margin: auto; padding: 0; border-radius: 12px; width: 80%; max-width: 1200px; max-height: 90vh; overflow: hidden; animation: slideDown 0.3s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
</style>
</head>
<body class="bg-gray-50">
<!-- Sidebar -->
<div class="flex h-screen overflow-hidden">
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:block">
<div class="p-6">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
<i class="fas fa-chart-line text-white text-xl"></i>
</div>
<h1 class="text-xl font-bold text-gray-800">BM Tracker</h1>
</div>
</div>
<nav class="px-3 space-y-1">
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg">
<i class="fas fa-chart-line w-5 mr-3"></i> Dashboard
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-building w-5 mr-3"></i> Quản lý BMs
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-history w-5 mr-3"></i> Lịch sử Log
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-cog w-5 mr-3"></i> Cài đặt
</a>
</nav>
</aside>
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Header -->
<header class="bg-white border-b border-gray-200 sticky top-0 z-10">
<div class="px-6 py-4 flex items-center justify-between">
<div>
<h2 class="text-2xl font-bold text-gray-800">Dashboard Tổng Quan</h2>
<p class="text-sm text-gray-500 mt-1">Business Manager Tracking System</p>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-2 bg-gray-50 px-4 py-2 rounded-lg border border-gray-200">
<i class="far fa-calendar text-gray-500"></i>
<input type="date" value="2025-12-29" class="bg-transparent text-sm text-gray-700 focus:outline-none">
</div>
<div class="flex items-center space-x-3">
<div class="text-right">
<p class="text-sm font-medium text-gray-700">Admin User</p>
<p class="text-xs text-gray-500">Manager</p>
</div>
<div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-400 rounded-full flex items-center justify-center">
<span class="text-white font-semibold">A</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-6">
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<!-- Card 1: Total BM -->
<div class="stat-card bg-white rounded-xl shadow-sm p-6 border border-gray-100">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<i class="fas fa-building text-blue-600 text-xl"></i>
</div>
</div>
<h3 class="text-gray-500 text-sm font-medium mb-1">Tổng Số BM</h3>
<p class="text-3xl font-bold text-gray-800">150</p>
<p class="text-xs text-gray-500 mt-2">
<i class="fas fa-arrow-up text-blue-500"></i> +2 so với hôm qua
</p>
</div>
<!-- Card 2: BM LIVE (Clickable) -->
<div onclick="openModal('LIVE')" class="stat-card bg-white rounded-xl shadow-sm p-6 border border-gray-100" title="Click để xem chi tiết">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
<i class="fas fa-check-circle text-green-600 text-xl"></i>
</div>
<span class="text-xs font-semibold text-green-600 bg-green-100 px-2 py-1 rounded-full">
85.3%
</span>
</div>
<h3 class="text-gray-500 text-sm font-medium mb-1">BM LIVE</h3>
<p class="text-3xl font-bold text-gray-800">128</p>
<div class="mt-3 bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 85.3%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">
<i class="fas fa-arrow-up text-green-500"></i> +3 so với hôm qua
</p>
</div>
<!-- Card 3: BM DIE (Clickable) -->
<div onclick="openModal('DIE')" class="stat-card bg-white rounded-xl shadow-sm p-6 border border-gray-100" title="Click để xem chi tiết">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
<i class="fas fa-times-circle text-red-600 text-xl"></i>
</div>
<span class="text-xs font-semibold text-red-600 bg-red-100 px-2 py-1 rounded-full">
14.7%
</span>
</div>
<h3 class="text-gray-500 text-sm font-medium mb-1">BM DIE</h3>
<p class="text-3xl font-bold text-gray-800">22</p>
<div class="mt-3 bg-gray-200 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 14.7%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">
Disabled: 8, Limited: 7, Suspended: 5, Other: 2
</p>
</div>
</div>
<!-- InfoBM Distribution Table -->
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 mb-6">
<div class="flex items-center justify-between mb-6">
<div>
<h3 class="text-lg font-semibold text-gray-800">Phân Bố InfoBM</h3>
<p class="text-sm text-gray-500">Giới hạn Ad Account của từng BM</p>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">InfoBM (Số AD được tạo)</th>
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Số lượng BM</th>
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">% trên tổng</th>
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Status breakdown</th>
</tr>
</thead>
<tbody>
<tr onclick="openModal('InfoBM', 5)" class="table-row border-b border-gray-100" title="Click để xem BMs">
<td class="py-3 px-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
<i class="fas fa-ad mr-2"></i>5
</span>
</td>
<td class="py-3 px-4 font-medium">25</td>
<td class="py-3 px-4">
<div class="flex items-center">
<span class="mr-2">16.7%</span>
<div class="flex-1 bg-gray-200 rounded-full h-2 max-w-[100px]">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 16.7%"></div>
</div>
</div>
</td>
<td class="py-3 px-4 text-sm">
<span class="text-green-600">LIVE: 20</span>,
<span class="text-red-600">DIE: 5</span>
</td>
</tr>
<tr onclick="openModal('InfoBM', 10)" class="table-row border-b border-gray-100">
<td class="py-3 px-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
<i class="fas fa-ad mr-2"></i>10
</span>
</td>
<td class="py-3 px-4 font-medium">38</td>
<td class="py-3 px-4">
<div class="flex items-center">
<span class="mr-2">25.3%</span>
<div class="flex-1 bg-gray-200 rounded-full h-2 max-w-[100px]">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 25.3%"></div>
</div>
</div>
</td>
<td class="py-3 px-4 text-sm">
<span class="text-green-600">LIVE: 35</span>,
<span class="text-red-600">DIE: 3</span>
</td>
</tr>
<tr onclick="openModal('InfoBM', 25)" class="table-row border-b border-gray-100">
<td class="py-3 px-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
<i class="fas fa-ad mr-2"></i>25
</span>
</td>
<td class="py-3 px-4 font-medium">52</td>
<td class="py-3 px-4">
<div class="flex items-center">
<span class="mr-2">34.7%</span>
<div class="flex-1 bg-gray-200 rounded-full h-2 max-w-[100px]">
<div class="bg-green-500 h-2 rounded-full" style="width: 34.7%"></div>
</div>
</div>
</td>
<td class="py-3 px-4 text-sm">
<span class="text-green-600">LIVE: 48</span>,
<span class="text-red-600">DIE: 4</span>
</td>
</tr>
<tr onclick="openModal('InfoBM', 50)" class="table-row border-b border-gray-100">
<td class="py-3 px-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
<i class="fas fa-ad mr-2"></i>50
</span>
</td>
<td class="py-3 px-4 font-medium">20</td>
<td class="py-3 px-4">
<div class="flex items-center">
<span class="mr-2">13.3%</span>
<div class="flex-1 bg-gray-200 rounded-full h-2 max-w-[100px]">
<div class="bg-blue-500 h-2 rounded-full" style="width: 13.3%"></div>
</div>
</div>
</td>
<td class="py-3 px-4 text-sm">
<span class="text-green-600">LIVE: 15</span>,
<span class="text-red-600">DIE: 5</span>
</td>
</tr>
<tr onclick="openModal('InfoBM', 100)" class="table-row border-b border-gray-100">
<td class="py-3 px-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
<i class="fas fa-ad mr-2"></i>100
</span>
</td>
<td class="py-3 px-4 font-medium">10</td>
<td class="py-3 px-4">
<div class="flex items-center">
<span class="mr-2">6.7%</span>
<div class="flex-1 bg-gray-200 rounded-full h-2 max-w-[100px]">
<div class="bg-blue-500 h-2 rounded-full" style="width: 6.7%"></div>
</div>
</div>
</td>
<td class="py-3 px-4 text-sm">
<span class="text-green-600">LIVE: 7</span>,
<span class="text-red-600">DIE: 3</span>
</td>
</tr>
<tr onclick="openModal('InfoBM', -1)" class="table-row">
<td class="py-3 px-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
<i class="fas fa-infinity mr-2"></i>Unlimited
</span>
</td>
<td class="py-3 px-4 font-medium">5</td>
<td class="py-3 px-4">
<div class="flex items-center">
<span class="mr-2">3.3%</span>
<div class="flex-1 bg-gray-200 rounded-full h-2 max-w-[100px]">
<div class="bg-purple-500 h-2 rounded-full" style="width: 3.3%"></div>
</div>
</div>
</td>
<td class="py-3 px-4 text-sm">
<span class="text-green-600">LIVE: 3</span>,
<span class="text-red-600">DIE: 2</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Line Chart -->
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Xu Hướng LIVE vs DIE (7 ngày)</h3>
<canvas id="lineChart" height="250"></canvas>
</div>
<!-- Pie Chart -->
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Phân Bố InfoBM</h3>
<canvas id="pieChart"></canvas>
</div>
</div>
</main>
</div>
</div>
<!-- Modal -->
<div id="bmModal" class="modal">
<div class="modal-content">
<div class="flex items-center justify-between p-6 border-b border-gray-200">
<div>
<h3 class="text-xl font-bold text-gray-800" id="modalTitle">BM List</h3>
<p class="text-sm text-gray-500" id="modalSubtitle">Showing BMs</p>
</div>
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<div class="p-6 overflow-y-auto" style="max-height: 70vh;">
<!-- Filters -->
<div class="flex space-x-4 mb-4">
<input type="text" placeholder="Tìm kiếm BM..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Tất cả status</option>
<option>LIVE</option>
<option>DIE</option>
</select>
</div>
<!-- Table -->
<table class="min-w-full">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">BM ID</th>
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">BM Name</th>
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Status</th>
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">InfoBM</th>
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Action</th>
</tr>
</thead>
<tbody id="modalTableBody">
<!-- Dynamic content -->
</tbody>
</table>
</div>
<div class="flex items-center justify-between p-6 border-t border-gray-200">
<p class="text-sm text-gray-600">Hiển thị 1-20 trong tổng số <span id="totalCount">0</span> BMs</p>
<button onclick="closeModal()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
Đóng
</button>
</div>
</div>
</div>
<script>
// Sample data
const sampleBMs = {
'LIVE': [
{ id: '123456789', name: 'BM ABC Corp', status: 'LIVE', infoBM: 25 },
{ id: '234567890', name: 'BM XYZ Ltd', status: 'LIVE', infoBM: 50 },
{ id: '345678901', name: 'BM Tech Solutions', status: 'LIVE', infoBM: 10 },
],
'DIE': [
{ id: '456789012', name: 'BM Digital Agency', status: 'DIE', infoBM: 5 },
{ id: '567890123', name: 'BM Marketing Pro', status: 'DIE', infoBM: 25 },
],
'InfoBM_5': [
{ id: '678901234', name: 'BM Startup A', status: 'LIVE', infoBM: 5 },
{ id: '789012345', name: 'BM Startup B', status: 'DIE', infoBM: 5 },
]
};
function openModal(type, value = null) {
const modal = document.getElementById('bmModal');
const title = document.getElementById('modalTitle');
const subtitle = document.getElementById('modalSubtitle');
const tbody = document.getElementById('modalTableBody');
const totalCount = document.getElementById('totalCount');
let data = [];
if (type === 'LIVE') {
title.textContent = 'BM List - LIVE';
subtitle.textContent = 'Tất cả BMs đang hoạt động';
data = sampleBMs['LIVE'];
} else if (type === 'DIE') {
title.textContent = 'BM List - DIE';
subtitle.textContent = 'Tất cả BMs không hoạt động';
data = sampleBMs['DIE'];
} else if (type === 'InfoBM') {
title.textContent = `BM List - InfoBM: ${value}`;
subtitle.textContent = `BMs có giới hạn ${value} Ad Accounts`;
data = sampleBMs[`InfoBM_${value}`] || [];
}
totalCount.textContent = data.length;
tbody.innerHTML = data.map(bm => `
<tr onclick="goToBMDetail('${bm.id}')" class="table-row border-b border-gray-100">
<td class="py-3 px-4 font-mono text-sm">${bm.id}</td>
<td class="py-3 px-4 font-medium">${bm.name}</td>
<td class="py-3 px-4">
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${bm.status === 'LIVE' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
${bm.status}
</span>
</td>
<td class="py-3 px-4">${bm.infoBM}</td>
<td class="py-3 px-4">
<button onclick="event.stopPropagation(); goToBMDetail('${bm.id}')" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
<i class="fas fa-eye mr-1"></i>View
</button>
</td>
</tr>
`).join('');
modal.classList.add('show');
}
function closeModal() {
document.getElementById('bmModal').classList.remove('show');
}
function goToBMDetail(bmId) {
alert(`Navigating to BM Detail Page: ${bmId}\n(Demo: Sẽ chuyển đến /bm/${bmId})`);
}
// Close modal when clicking outside
window.onclick = function(event) {
const modal = document.getElementById('bmModal');
if (event.target === modal) {
closeModal();
}
}
// Close modal with ESC key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeModal();
}
});
// Line Chart
const lineCtx = document.getElementById('lineChart').getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['23/12', '24/12', '25/12', '26/12', '27/12', '28/12', '29/12'],
datasets: [
{
label: 'LIVE',
data: [120, 122, 125, 123, 126, 127, 128],
borderColor: 'rgb(34, 197, 94)',
backgroundColor: 'rgba(34, 197, 94, 0.1)',
tension: 0.4,
fill: true,
},
{
label: 'DIE',
data: [28, 26, 23, 25, 22, 21, 22],
borderColor: 'rgb(239, 68, 68)',
backgroundColor: 'rgba(239, 68, 68, 0.1)',
tension: 0.4,
fill: true,
}
]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: { display: true, position: 'top' }
}
}
});
// Pie Chart
const pieCtx = document.getElementById('pieChart').getContext('2d');
new Chart(pieCtx, {
type: 'doughnut',
data: {
labels: ['5', '10', '25', '50', '100', 'Unlimited'],
datasets: [{
data: [25, 38, 52, 20, 10, 5],
backgroundColor: [
'rgb(251, 191, 36)',
'rgb(250, 204, 21)',
'rgb(34, 197, 94)',
'rgb(59, 130, 246)',
'rgb(37, 99, 235)',
'rgb(168, 85, 247)'
],
}]
},
options: {
responsive: true,
plugins: {
legend: { position: 'bottom' }
}
}
});
</script>
</body>
</html>
Số dòng: 496