<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard BM - Tổng quan Sức khỏe & Liên kết</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
}
}
}
}
</script>
<style>
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.card-active { border-left-color: currentColor !important; background: linear-gradient(to right, rgba(99, 102, 241, 0.05), transparent); }
.chart-expand {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
opacity: 0;
}
.chart-expand.show {
max-height: 600px;
opacity: 1;
}
</style>
</head>
<body class="bg-gray-100 font-sans text-sm min-h-screen">
<!-- Header -->
<header class="w-full bg-white shadow-sm border-b border-gray-200">
<div class="max-w-[1920px] mx-auto px-4 py-2 flex justify-end items-center gap-4">
<button class="text-gray-500 hover:text-gray-700">
<i class="fa-regular fa-bell text-xl"></i>
</button>
<div class="h-8 w-8 rounded-full overflow-hidden border border-gray-300">
<i class="fa-solid fa-circle-user text-3xl text-gray-400"></i>
</div>
</div>
</header>
<main class="max-w-[1920px] mx-auto px-4 py-4 space-y-4">
<!-- Alert Bar -->
<section class="border border-green-300 rounded-lg p-3 flex flex-col md:flex-row justify-between items-start md:items-center gap-3 bg-green-50">
<div class="flex items-start gap-3">
<div class="mt-1">
<i class="fas fa-check-circle text-2xl text-green-600"></i>
</div>
<div>
<h3 class="text-green-800 uppercase text-xs tracking-wide font-extrabold">KHÔI PHỤC TÀI KHOẢN THÀNH CÔNG</h3>
<p class="text-green-700 text-xs mt-0.5">Hệ thống vừa phát hiện <span class="font-bold border-b border-green-700">05 BM</span> đã tự động Re-Live thành công.</p>
</div>
</div>
<div class="flex items-center gap-2 self-end md:self-auto">
<button class="bg-green-500 hover:bg-green-600 text-white text-xs font-bold py-1.5 px-4 rounded transition-colors">
<i class="fas fa-eye mr-1"></i> XEM CHI TIẾT
</button>
<button class="text-green-800 hover:text-green-900 px-2">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</section>
<!-- Global Filters (Tag, Nhóm, BM) -->
<section class="bg-white rounded-lg p-3 shadow-sm flex flex-col lg:flex-row justify-between items-center gap-4">
<div class="flex flex-wrap items-center gap-3 w-full lg:w-auto">
<div class="flex items-center gap-2 text-gray-700 font-semibold mr-2">
<i class="fa-solid fa-filter"></i>
<span>BỘ LỌC CHUNG</span>
</div>
<select class="form-select bg-gray-50 border-gray-200 text-xs rounded-md py-1.5 pl-3 pr-8">
<option>Tất cả Tag</option>
<option>G-Nuôi</option>
<option>G-Thuê</option>
</select>
<select class="form-select bg-gray-50 border-gray-200 text-xs rounded-md py-1.5 pl-3 pr-8">
<option>Tất cả Nhóm</option>
</select>
<select class="form-select bg-gray-50 border-gray-200 text-xs rounded-md py-1.5 pl-3 pr-8">
<option>Tất cả BM</option>
</select>
</div>
<div class="flex items-center gap-2 w-full lg:w-auto justify-end">
<button class="bg-white border border-gray-300 text-gray-600 hover:bg-gray-50 text-xs font-medium py-1.5 px-4 rounded uppercase">RESET</button>
<button class="bg-green-500 hover:bg-green-600 text-white text-xs font-bold py-1.5 px-4 rounded uppercase flex items-center gap-2">
<i class="fas fa-download"></i> XUẤT BÁO CÁO
</button>
</div>
</section>
<!-- ==================== VÙNG 1: SNAPSHOT (Point-in-time) ==================== -->
<section class="bg-gray-50 rounded-xl p-4 border border-gray-200">
<!-- Zone 1 Header -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4">
<div class="flex items-center gap-2">
<i class="fas fa-camera text-indigo-500"></i>
<h2 class="font-bold text-gray-700 uppercase text-sm">SNAPSHOT TÌNH TRẠNG</h2>
<span class="bg-indigo-100 text-indigo-600 text-[10px] font-semibold px-2 py-0.5 rounded">Point-in-time</span>
</div>
<div class="flex items-center gap-2">
<span class="text-xs text-gray-500">Xem tại ngày:</span>
<input type="date" value="2026-01-17" class="form-input bg-white border-gray-200 text-xs rounded-md py-1.5 px-3">
<button class="bg-indigo-500 hover:bg-indigo-600 text-white text-xs font-bold py-1.5 px-3 rounded">
<i class="fas fa-sync-alt mr-1"></i> Cập nhật
</button>
</div>
</div>
<!-- Hint: Click card để xem trend -->
<div class="mb-3 text-xs text-gray-500 flex items-center gap-1">
<i class="fas fa-lightbulb text-yellow-500"></i>
<span>Click vào card để xem biểu đồ trend theo thời gian</span>
</div>
<!-- Row 1: Summary Cards (4 cards) -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-4">
<!-- Card 1: Tổng số BM -->
<div onclick="toggleChart('total-bm')" class="card-item bg-white rounded-xl shadow-sm p-4 card-hover transition-all cursor-pointer border-l-4 border-l-purple-500 hover:border-l-purple-600" data-card="total-bm">
<div class="flex justify-between items-start mb-3">
<p class="text-xs font-semibold text-gray-500 uppercase">TỔNG SỐ BM</p>
<div class="p-1.5 bg-purple-100 rounded-lg">
<i class="fas fa-layer-group text-purple-600"></i>
</div>
</div>
<h2 class="text-3xl font-bold text-gray-800 mb-3">25,000</h2>
<!-- Progress bar Live/Die -->
<div class="h-2 bg-gray-200 rounded-full overflow-hidden mb-2">
<div class="h-full bg-green-500" style="width: 75%"></div>
</div>
<div class="flex items-center justify-between text-xs mb-3">
<span class="text-green-600 font-medium"><i class="fas fa-circle text-[8px] mr-1"></i>18,750 Live (75%)</span>
<span class="text-red-500"><i class="fas fa-circle text-[8px] mr-1"></i>6,250 Die</span>
</div>
<!-- Biến động -->
<div class="pt-2 border-t flex items-center gap-3 text-xs">
<span class="text-gray-500">SO VỚI HÔM QUA:</span>
<span class="text-green-500 font-medium"><i class="fas fa-arrow-up"></i> 155</span>
<span class="text-red-500 font-medium"><i class="fas fa-arrow-down"></i> 42</span>
</div>
<!-- Click hint -->
<div class="mt-2 text-[10px] text-indigo-400 flex items-center gap-1">
<i class="fas fa-chart-line"></i>
<span>Click để xem trend</span>
</div>
</div>
<!-- Card 2: Sức khỏe Via -->
<div onclick="toggleChart('via-health')" class="card-item bg-white rounded-xl shadow-sm p-4 card-hover transition-all cursor-pointer border-l-4 border-l-orange-500 hover:border-l-orange-600" data-card="via-health">
<div class="flex justify-between items-start mb-2">
<p class="text-xs font-semibold text-gray-500 uppercase">SỨC KHỎE VIA</p>
<div class="p-1.5 bg-orange-100 rounded-lg">
<i class="fas fa-shield-halved text-orange-600"></i>
</div>
</div>
<!-- BM Gốc -->
<div class="mb-3">
<div class="text-[10px] text-gray-500 mb-1 font-semibold uppercase">BM Gốc (quan trọng)</div>
<div class="flex items-center gap-3">
<div class="text-center">
<div class="text-lg font-bold text-gray-400">12</div>
<div class="text-[10px] text-gray-500">☠️ Fatal</div>
</div>
<div class="text-center">
<div class="text-lg font-bold text-red-600">156</div>
<div class="text-[10px] text-gray-500">🔴 Khẩn</div>
</div>
<div class="text-center">
<div class="text-lg font-bold text-green-500">8,340</div>
<div class="text-[10px] text-gray-500">🟢 OK</div>
</div>
</div>
</div>
<!-- BM Trung gian -->
<div class="border-t pt-2">
<div class="text-[10px] text-gray-400 mb-1">BM TRUNG GIAN</div>
<div class="flex items-center gap-3 text-[10px]">
<span class="text-gray-400">☠️ 45</span>
<span class="text-red-400">🔴 234</span>
<span class="text-green-400">🟢 15,213</span>
</div>
</div>
<!-- Click hint -->
<div class="mt-2 text-[10px] text-indigo-400 flex items-center gap-1">
<i class="fas fa-chart-line"></i>
<span>Click để xem trend</span>
</div>
</div>
<!-- Card 3: Admin Matching -->
<div onclick="toggleChart('admin-matching')" class="card-item bg-white rounded-xl shadow-sm p-4 card-hover transition-all cursor-pointer border-l-4 border-l-violet-500 hover:border-l-violet-600" data-card="admin-matching">
<div class="flex justify-between items-start mb-2">
<p class="text-xs font-semibold text-gray-500 uppercase">ADMIN MATCHING</p>
<div class="p-1.5 bg-violet-100 rounded-lg">
<i class="fas fa-link text-violet-600"></i>
</div>
</div>
<!-- Phần trăm chính -->
<div class="text-3xl font-bold text-gray-800 mb-1">89%</div>
<!-- Progress bar -->
<div class="h-2 bg-gray-200 rounded-full overflow-hidden mb-2">
<div class="h-full bg-violet-500" style="width: 89%"></div>
</div>
<!-- Chi tiết 3 loại -->
<div class="flex items-center gap-2 text-[10px] mb-1">
<span class="text-green-600"><i class="fas fa-check"></i> 12,450</span>
<span class="text-blue-500"><i class="fas fa-circle"></i> 890</span>
<span class="text-yellow-500"><i class="fas fa-exclamation-triangle"></i> 156</span>
</div>
<div class="flex items-center gap-2 text-[10px] text-gray-400">
<span>Auto</span>
<span>Manual</span>
<span>Chưa match</span>
</div>
<!-- Alert -->
<div class="mt-2 pt-2 border-t">
<div class="flex items-center gap-1 text-[10px] text-yellow-600">
<i class="fas fa-exclamation-triangle"></i>
<span>23 admin cần review</span>
</div>
</div>
<!-- Click hint -->
<div class="mt-1 text-[10px] text-indigo-400 flex items-center gap-1">
<i class="fas fa-chart-line"></i>
<span>Click để xem trend</span>
</div>
</div>
<!-- Card 4: Xác minh Doanh nghiệp -->
<div onclick="toggleChart('verification')" class="card-item bg-white rounded-xl shadow-sm p-4 card-hover transition-all cursor-pointer border-l-4 border-l-teal-500 hover:border-l-teal-600" data-card="verification">
<div class="flex justify-between items-start mb-2">
<p class="text-xs font-semibold text-gray-500 uppercase">XÁC MINH DN</p>
<div class="p-1.5 bg-teal-100 rounded-lg">
<i class="fas fa-building-columns text-teal-600"></i>
</div>
</div>
<!-- 3 trạng thái -->
<div class="flex items-center gap-3 mb-2">
<div class="text-center">
<div class="text-lg font-bold text-green-600">18,500</div>
<div class="text-[10px] text-gray-500">✅ Đã XM</div>
</div>
<div class="text-center">
<div class="text-lg font-bold text-yellow-500">234</div>
<div class="text-[10px] text-gray-500">⏳ Chờ</div>
</div>
<div class="text-center">
<div class="text-lg font-bold text-gray-400">6,266</div>
<div class="text-[10px] text-gray-500">❌ Chưa</div>
</div>
</div>
<!-- Progress bar -->
<div class="h-2 bg-gray-200 rounded-full overflow-hidden flex mb-1">
<div class="h-full bg-green-500" style="width: 74%"></div>
<div class="h-full bg-yellow-400" style="width: 1%"></div>
<div class="h-full bg-gray-300" style="width: 25%"></div>
</div>
<div class="text-[10px] text-gray-500 mb-2">74% đã xác minh</div>
<!-- Click hint -->
<div class="text-[10px] text-indigo-400 flex items-center gap-1">
<i class="fas fa-chart-line"></i>
<span>Click để xem trend</span>
</div>
</div>
</div>
<!-- ==================== EXPANDABLE CHART AREA ==================== -->
<!-- Chart: Tổng số BM -->
<div id="chart-total-bm" class="chart-expand bg-white rounded-xl shadow-sm mb-4">
<div class="p-5">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4">
<div class="flex items-center gap-3">
<div class="p-2 bg-purple-100 rounded-lg">
<i class="fas fa-layer-group text-purple-600 text-lg"></i>
</div>
<div>
<h3 class="font-bold text-gray-700 uppercase text-sm">BIỂU ĐỒ TỔNG SỐ BM</h3>
<p class="text-xs text-gray-500">Trend số lượng BM theo thời gian</p>
</div>
</div>
<div class="flex items-center gap-3">
<div class="bg-gray-100 p-1 rounded-lg flex text-[10px] font-medium">
<button class="bg-white text-gray-800 shadow-sm px-3 py-1.5 rounded-md">Tháng này</button>
<button class="text-gray-500 hover:text-gray-700 px-3 py-1.5">3 tháng</button>
<button class="text-gray-500 hover:text-gray-700 px-3 py-1.5">6 tháng</button>
</div>
<button onclick="event.stopPropagation(); closeChart('total-bm')" class="p-2 hover:bg-gray-100 rounded-lg text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- Chart Placeholder -->
<div class="h-64 bg-gradient-to-br from-purple-50 to-indigo-50 rounded-lg flex items-center justify-center text-gray-400 relative">
<div class="absolute inset-4">
<!-- Fake chart lines -->
<svg class="w-full h-full" viewBox="0 0 400 200">
<polyline fill="none" stroke="#a855f7" stroke-width="2" points="0,180 40,170 80,160 120,155 160,140 200,130 240,120 280,100 320,80 360,60 400,40"/>
<polyline fill="none" stroke="#22c55e" stroke-width="2" stroke-dasharray="5,5" points="0,185 40,175 80,168 120,165 160,155 200,148 240,140 280,125 320,110 360,95 400,80"/>
<polyline fill="none" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5" points="0,195 40,195 80,192 120,190 160,185 200,182 240,180 280,175 320,170 360,165 400,160"/>
</svg>
</div>
<div class="text-center z-10 bg-white/80 px-4 py-2 rounded-lg">
<div class="text-xs font-medium text-gray-600">Biểu đồ: Total / Live / Die theo ngày</div>
</div>
</div>
<!-- Legend -->
<div class="flex justify-center gap-6 mt-4 text-xs font-medium">
<div class="flex items-center gap-2">
<span class="w-3 h-0.5 bg-purple-500"></span>
<span class="text-gray-600">TỔNG BM</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-0.5 bg-green-500 border-dashed"></span>
<span class="text-gray-600">LIVE</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-0.5 bg-red-500 border-dashed"></span>
<span class="text-gray-600">DIE</span>
</div>
</div>
</div>
</div>
<!-- Chart: Sức khỏe Via -->
<div id="chart-via-health" class="chart-expand bg-white rounded-xl shadow-sm mb-4">
<div class="p-5">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4">
<div class="flex items-center gap-3">
<div class="p-2 bg-orange-100 rounded-lg">
<i class="fas fa-shield-halved text-orange-600 text-lg"></i>
</div>
<div>
<h3 class="font-bold text-gray-700 uppercase text-sm">BIỂU ĐỒ SỨC KHỎE VIA</h3>
<p class="text-xs text-gray-500">Trend Fatal / Khẩn cấp / OK theo thời gian</p>
</div>
</div>
<div class="flex items-center gap-3">
<div class="bg-gray-100 p-1 rounded-lg flex text-[10px] font-medium">
<button class="bg-white text-gray-800 shadow-sm px-3 py-1.5 rounded-md">Tháng này</button>
<button class="text-gray-500 hover:text-gray-700 px-3 py-1.5">3 tháng</button>
<button class="text-gray-500 hover:text-gray-700 px-3 py-1.5">6 tháng</button>
</div>
<button onclick="event.stopPropagation(); closeChart('via-health')" class="p-2 hover:bg-gray-100 rounded-lg text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- Chart Placeholder -->
<div class="h-64 bg-gradient-to-br from-orange-50 to-red-50 rounded-lg flex items-center justify-center text-gray-400 relative">
<div class="absolute inset-4">
<!-- Fake stacked area -->
<svg class="w-full h-full" viewBox="0 0 400 200">
<!-- OK (green) -->
<polygon fill="rgba(34, 197, 94, 0.3)" points="0,200 0,50 40,55 80,52 120,48 160,45 200,50 240,48 280,42 320,40 360,38 400,35 400,200"/>
<!-- Khẩn (red) -->
<polygon fill="rgba(239, 68, 68, 0.4)" points="0,50 40,55 80,52 120,48 160,45 200,50 240,48 280,42 320,40 360,38 400,35 400,25 360,28 320,30 280,32 240,38 200,40 160,35 120,38 80,42 40,45 0,40"/>
<!-- Fatal (gray) -->
<polygon fill="rgba(156, 163, 175, 0.5)" points="0,40 40,45 80,42 120,38 160,35 200,40 240,38 280,32 320,30 360,28 400,25 400,20 360,22 320,24 280,26 240,32 200,34 160,30 120,33 80,37 40,40 0,35"/>
</svg>
</div>
<div class="text-center z-10 bg-white/80 px-4 py-2 rounded-lg">
<div class="text-xs font-medium text-gray-600">Stacked Area: OK / Khẩn cấp / Fatal</div>
</div>
</div>
<!-- Legend -->
<div class="flex justify-center gap-6 mt-4 text-xs font-medium">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-green-500/30 rounded"></span>
<span class="text-gray-600">OK (2+ Via)</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-red-500/40 rounded"></span>
<span class="text-gray-600">KHẨN CẤP (1 Via)</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-gray-500/50 rounded"></span>
<span class="text-gray-600">FATAL (0 Via)</span>
</div>
</div>
</div>
</div>
<!-- Chart: Admin Matching -->
<div id="chart-admin-matching" class="chart-expand bg-white rounded-xl shadow-sm mb-4">
<div class="p-5">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4">
<div class="flex items-center gap-3">
<div class="p-2 bg-violet-100 rounded-lg">
<i class="fas fa-link text-violet-600 text-lg"></i>
</div>
<div>
<h3 class="font-bold text-gray-700 uppercase text-sm">BIỂU ĐỒ ADMIN MATCHING</h3>
<p class="text-xs text-gray-500">Trend % match theo thời gian</p>
</div>
</div>
<div class="flex items-center gap-3">
<div class="bg-gray-100 p-1 rounded-lg flex text-[10px] font-medium">
<button class="bg-white text-gray-800 shadow-sm px-3 py-1.5 rounded-md">Tháng này</button>
<button class="text-gray-500 hover:text-gray-700 px-3 py-1.5">3 tháng</button>
<button class="text-gray-500 hover:text-gray-700 px-3 py-1.5">6 tháng</button>
</div>
<button onclick="event.stopPropagation(); closeChart('admin-matching')" class="p-2 hover:bg-gray-100 rounded-lg text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- Chart Placeholder -->
<div class="h-64 bg-gradient-to-br from-violet-50 to-purple-50 rounded-lg flex items-center justify-center text-gray-400 relative">
<div class="absolute inset-4">
<svg class="w-full h-full" viewBox="0 0 400 200">
<!-- % line -->
<polyline fill="none" stroke="#8b5cf6" stroke-width="3" points="0,160 40,155 80,145 120,140 160,130 200,120 240,100 280,80 320,60 360,45 400,40"/>
<!-- Target line 90% -->
<line x1="0" y1="40" x2="400" y2="40" stroke="#22c55e" stroke-width="1" stroke-dasharray="5,5"/>
<text x="405" y="44" fill="#22c55e" font-size="10">90%</text>
</svg>
</div>
<div class="text-center z-10 bg-white/80 px-4 py-2 rounded-lg">
<div class="text-xs font-medium text-gray-600">Line chart: % Admin matched</div>
</div>
</div>
<!-- Legend -->
<div class="flex justify-center gap-6 mt-4 text-xs font-medium">
<div class="flex items-center gap-2">
<span class="w-3 h-0.5 bg-violet-500"></span>
<span class="text-gray-600">% MATCHED</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-0.5 bg-green-500 border-dashed"></span>
<span class="text-gray-600">TARGET 90%</span>
</div>
</div>
</div>
</div>
<!-- Chart: Xác minh DN -->
<div id="chart-verification" class="chart-expand bg-white rounded-xl shadow-sm mb-4">
<div class="p-5">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4">
<div class="flex items-center gap-3">
<div class="p-2 bg-teal-100 rounded-lg">
<i class="fas fa-building-columns text-teal-600 text-lg"></i>
</div>
<div>
<h3 class="font-bold text-gray-700 uppercase text-sm">BIỂU ĐỒ XÁC MINH DOANH NGHIỆP</h3>
<p class="text-xs text-gray-500">Trend % xác minh theo thời gian</p>
</div>
</div>
<div class="flex items-center gap-3">
<div class="bg-gray-100 p-1 rounded-lg flex text-[10px] font-medium">
<button class="bg-white text-gray-800 shadow-sm px-3 py-1.5 rounded-md">Tháng này</button>
<button class="text-gray-500 hover:text-gray-700 px-3 py-1.5">3 tháng</button>
<button class="text-gray-500 hover:text-gray-700 px-3 py-1.5">6 tháng</button>
</div>
<button onclick="event.stopPropagation(); closeChart('verification')" class="p-2 hover:bg-gray-100 rounded-lg text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- Chart Placeholder -->
<div class="h-64 bg-gradient-to-br from-teal-50 to-green-50 rounded-lg flex items-center justify-center text-gray-400 relative">
<div class="absolute inset-4">
<svg class="w-full h-full" viewBox="0 0 400 200">
<!-- Stacked bars simulation -->
<rect x="10" y="100" width="25" height="100" fill="rgba(20, 184, 166, 0.6)"/>
<rect x="10" y="95" width="25" height="5" fill="rgba(234, 179, 8, 0.6)"/>
<rect x="10" y="60" width="25" height="35" fill="rgba(209, 213, 219, 0.6)"/>
<rect x="50" y="90" width="25" height="110" fill="rgba(20, 184, 166, 0.6)"/>
<rect x="50" y="85" width="25" height="5" fill="rgba(234, 179, 8, 0.6)"/>
<rect x="50" y="55" width="25" height="30" fill="rgba(209, 213, 219, 0.6)"/>
<rect x="90" y="80" width="25" height="120" fill="rgba(20, 184, 166, 0.6)"/>
<rect x="90" y="75" width="25" height="5" fill="rgba(234, 179, 8, 0.6)"/>
<rect x="90" y="50" width="25" height="25" fill="rgba(209, 213, 219, 0.6)"/>
<rect x="130" y="70" width="25" height="130" fill="rgba(20, 184, 166, 0.6)"/>
<rect x="130" y="65" width="25" height="5" fill="rgba(234, 179, 8, 0.6)"/>
<rect x="130" y="45" width="25" height="20" fill="rgba(209, 213, 219, 0.6)"/>
<rect x="170" y="60" width="25" height="140" fill="rgba(20, 184, 166, 0.6)"/>
<rect x="170" y="55" width="25" height="5" fill="rgba(234, 179, 8, 0.6)"/>
<rect x="170" y="40" width="25" height="15" fill="rgba(209, 213, 219, 0.6)"/>
</svg>
</div>
<div class="text-center z-10 bg-white/80 px-4 py-2 rounded-lg">
<div class="text-xs font-medium text-gray-600">Stacked Bar: Đã XM / Chờ / Chưa</div>
</div>
</div>
<!-- Legend -->
<div class="flex justify-center gap-6 mt-4 text-xs font-medium">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-teal-500/60 rounded"></span>
<span class="text-gray-600">ĐÃ XÁC MINH</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-yellow-500/60 rounded"></span>
<span class="text-gray-600">ĐANG CHỜ</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-gray-300/60 rounded"></span>
<span class="text-gray-600">CHƯA XÁC MINH</span>
</div>
</div>
</div>
</div>
<!-- Row 2: Action Items (5 ô) -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2">
<i class="fas fa-clipboard-list text-gray-500"></i>
<h2 class="font-bold text-gray-700 uppercase text-sm">VIỆC CẦN LÀM HÔM NAY</h2>
</div>
<button class="text-xs text-blue-600 hover:text-blue-700 font-medium">Xem tất cả <i class="fas fa-arrow-right"></i></button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-3">
<!-- 1. Khẩn cấp - BM còn 1 Via -->
<div class="bg-red-50 border border-red-200 rounded-xl p-3 cursor-pointer hover:bg-red-100 transition-colors">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-[10px] font-bold">156</span>
<span class="text-xs font-bold text-red-700">🔴 KHẨN CẤP</span>
</div>
<div class="text-[11px] text-red-600 mb-1">BM Gốc chỉ còn 1 Via</div>
<div class="text-[10px] text-red-500 mb-2">→ Cần add Via backup NGAY</div>
<div class="bg-red-100 rounded-lg p-2 mb-2">
<div class="flex items-center gap-1 text-[10px] text-red-700">
<i class="fas fa-chart-bar"></i>
<span class="font-semibold">4,500 Ads at risk</span>
</div>
<div class="flex items-center gap-1 text-[10px] text-red-600">
<i class="fas fa-dollar-sign"></i>
<span>$125,000/tháng</span>
</div>
</div>
<button class="w-full py-1.5 bg-red-500 text-white rounded-lg text-[10px] font-bold hover:bg-red-600">
Xử lý ngay <i class="fas fa-arrow-right"></i>
</button>
</div>
<!-- 2. Fatal - BM mất hết Via -->
<div class="bg-gray-100 border border-gray-300 rounded-xl p-3 cursor-pointer hover:bg-gray-200 transition-colors">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-gray-500 text-white rounded-full flex items-center justify-center text-[10px] font-bold">12</span>
<span class="text-xs font-bold text-gray-700">☠️ ĐÃ MẤT</span>
</div>
<div class="text-[11px] text-gray-600 mb-1">BM Gốc mất hết Via</div>
<div class="text-[10px] text-gray-500 mb-2">→ Không cứu được</div>
<div class="bg-gray-200 rounded-lg p-2 mb-2">
<div class="flex items-center gap-1 text-[10px] text-gray-700">
<i class="fas fa-chart-bar"></i>
<span class="font-semibold">340 Ads đã mất</span>
</div>
<div class="flex items-center gap-1 text-[10px] text-gray-600">
<i class="fas fa-money-bill-wave"></i>
<span>$45,000 đã mất</span>
</div>
</div>
<button class="w-full py-1.5 bg-gray-500 text-white rounded-lg text-[10px] font-bold hover:bg-gray-600">
Xem chi tiết
</button>
</div>
<!-- 3. Alert Bảo mật -->
<div class="bg-orange-50 border border-orange-300 rounded-xl p-3 cursor-pointer hover:bg-orange-100 transition-colors">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-[10px] font-bold">23</span>
<span class="text-xs font-bold text-orange-700">🚨 BẢO MẬT</span>
</div>
<div class="text-[11px] text-orange-600 mb-1">Admin lạ cần kiểm tra</div>
<div class="text-[10px] text-orange-500 mb-2">→ Không match Via nào của ta</div>
<div class="bg-orange-100 rounded-lg p-2 mb-2">
<div class="flex items-center gap-1 text-[10px] text-orange-700">
<i class="fas fa-exclamation-triangle"></i>
<span class="font-semibold">Có thể là hacker!</span>
</div>
<div class="flex items-center gap-1 text-[10px] text-orange-600">
<i class="fas fa-search"></i>
<span>Cần verify ngay</span>
</div>
</div>
<button class="w-full py-1.5 bg-orange-500 text-white rounded-lg text-[10px] font-bold hover:bg-orange-600">
Kiểm tra <i class="fas fa-arrow-right"></i>
</button>
</div>
<!-- 4. Cần xác minh -->
<div class="bg-violet-50 border border-violet-200 rounded-xl p-3 cursor-pointer hover:bg-violet-100 transition-colors">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-violet-500 text-white rounded-full flex items-center justify-center text-[10px] font-bold">157</span>
<span class="text-xs font-bold text-violet-700">⚠️ CẦN XÁC MINH</span>
</div>
<div class="space-y-1 text-[10px] text-violet-600 mb-2">
<div>• 89 Admin chưa match</div>
<div>• 23 BM chưa có Token</div>
<div>• 45 Token hết hạn</div>
</div>
<button class="w-full py-1.5 bg-violet-500 text-white rounded-lg text-[10px] font-bold hover:bg-violet-600">
Review <i class="fas fa-arrow-right"></i>
</button>
</div>
<!-- 5. Thống kê ngày -->
<div class="bg-gray-50 border border-gray-200 rounded-xl p-3">
<div class="flex items-center gap-2 mb-2">
<i class="fas fa-chart-pie text-gray-400"></i>
<span class="text-xs font-bold text-gray-700">📊 SO VỚI HÔM QUA</span>
</div>
<div class="space-y-1.5 text-[10px]">
<div class="flex items-center justify-between">
<span class="text-gray-600">Via die:</span>
<span class="font-semibold text-red-500">+45</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-600">BM xuống Khẩn cấp:</span>
<span class="font-semibold text-yellow-500">+28</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-600">BM xuống Fatal:</span>
<span class="font-semibold text-gray-500">+3</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-600">Admin match:</span>
<span class="font-semibold text-green-500">+120</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== VÙNG 2: BIỂU ĐỒ CỐ ĐỊNH (Range) ==================== -->
<section class="bg-blue-50 rounded-xl p-4 border border-blue-200">
<!-- Zone 2 Header -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4">
<div class="flex items-center gap-2">
<i class="fas fa-chart-line text-blue-500"></i>
<h2 class="font-bold text-gray-700 uppercase text-sm">BIỂU ĐỒ THEO THỜI GIAN</h2>
<span class="bg-blue-100 text-blue-600 text-[10px] font-semibold px-2 py-0.5 rounded">Range</span>
</div>
<div class="flex items-center gap-2">
<span class="text-xs text-gray-500">Khoảng thời gian:</span>
<div class="bg-white p-1 rounded-lg flex text-[10px] font-medium border border-blue-200">
<button class="bg-blue-500 text-white px-3 py-1.5 rounded-md">7 ngày</button>
<button class="text-gray-500 hover:text-gray-700 px-3 py-1.5">30 ngày</button>
<button class="text-gray-500 hover:text-gray-700 px-3 py-1.5">90 ngày</button>
</div>
<span class="text-xs text-gray-400 hidden lg:inline">hoặc</span>
<input type="date" value="2026-01-10" class="form-input bg-white border-blue-200 text-xs rounded-md py-1.5 px-2 w-28 hidden lg:block">
<span class="text-xs text-gray-400 hidden lg:inline">→</span>
<input type="date" value="2026-01-17" class="form-input bg-white border-blue-200 text-xs rounded-md py-1.5 px-2 w-28 hidden lg:block">
</div>
</div>
<!-- Charts Grid -->
<div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
<!-- Biểu đồ chi tiêu BM -->
<div class="bg-white rounded-xl shadow-sm p-5">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
<h3 class="font-bold text-gray-700 uppercase text-sm">
<i class="fa-solid fa-chart-line mr-2 text-blue-500"></i>CHI TIÊU BM
</h3>
<div class="flex flex-wrap items-center gap-3">
<div class="flex items-center gap-2 bg-green-50 px-3 py-1.5 rounded-lg border border-green-100">
<div class="bg-green-500 rounded-full w-5 h-5 flex items-center justify-center text-white text-[10px]">
<i class="fa-solid fa-dollar-sign"></i>
</div>
<div>
<div class="text-[10px] text-gray-500 uppercase leading-none">TỔNG USD</div>
<div class="text-xs font-bold text-green-600 leading-none">$22,500</div>
</div>
</div>
<div class="flex items-center gap-2 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-100">
<div class="bg-blue-500 rounded-full w-5 h-5 flex items-center justify-center text-white text-[10px]">
<i class="fa-solid fa-dong-sign"></i>
</div>
<div>
<div class="text-[10px] text-gray-500 uppercase leading-none">TỔNG VND</div>
<div class="text-xs font-bold text-blue-600 leading-none">550M</div>
</div>
</div>
</div>
</div>
<!-- Chart Placeholder -->
<div class="h-64 bg-gradient-to-br from-green-50 to-blue-50 rounded-lg flex items-center justify-center text-gray-400">
<div class="text-center">
<i class="fas fa-chart-area text-4xl mb-2"></i>
<div class="text-xs">Biểu đồ chi tiêu theo ngày</div>
</div>
</div>
<!-- Legend -->
<div class="flex justify-center gap-6 mt-4 text-xs font-medium">
<div class="flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-green-500"></span>
<span class="text-gray-600">CHI TIÊU USD ($)</span>
</div>
<div class="flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
<span class="text-gray-600">CHI TIÊU VND (TRIỆU)</span>
</div>
</div>
</div>
<!-- Biến động thêm/die -->
<div class="bg-white rounded-xl shadow-sm p-5">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4">
<h3 class="font-bold text-gray-700 uppercase text-sm mb-4 md:mb-0">
<i class="fa-solid fa-chart-column mr-2 text-purple-500"></i>BIẾN ĐỘNG THÊM/DIE (BM)
</h3>
<div class="flex gap-3">
<div class="bg-green-50 text-green-700 px-3 py-1.5 rounded-md text-xs border border-green-100 text-center">
<span class="font-semibold block text-[10px] text-gray-500 uppercase">TỔNG THÊM</span>
<span class="font-bold text-lg">155</span>
</div>
<div class="bg-red-50 text-red-700 px-3 py-1.5 rounded-md text-xs border border-red-100 text-center">
<span class="font-semibold block text-[10px] text-gray-500 uppercase">TỔNG DIE</span>
<span class="font-bold text-lg">42</span>
</div>
</div>
</div>
<!-- Chart Placeholder -->
<div class="h-64 bg-gradient-to-br from-green-50 to-red-50 rounded-lg flex items-center justify-center text-gray-400">
<div class="text-center">
<i class="fas fa-chart-bar text-4xl mb-2"></i>
<div class="text-xs">Biểu đồ biến động theo ngày</div>
</div>
</div>
<!-- Legend -->
<div class="flex justify-center gap-6 mt-4 text-xs font-medium">
<div class="flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-green-500"></span>
<span class="text-gray-600">BM THÊM MỚI</span>
</div>
<div class="flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-red-500"></span>
<span class="text-gray-600">BM DIE</span>
</div>
</div>
</div>
</div>
</section>
</main>
<script>
let activeChart = null;
function toggleChart(chartId) {
const chartEl = document.getElementById('chart-' + chartId);
const cardEl = document.querySelector(`[data-card="${chartId}"]`);
// If clicking the same card, close it
if (activeChart === chartId) {
closeChart(chartId);
return;
}
// Close any open chart first
if (activeChart) {
closeChart(activeChart);
}
// Open new chart
chartEl.classList.add('show');
cardEl.classList.add('card-active');
activeChart = chartId;
// Scroll to chart smoothly
setTimeout(() => {
chartEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}, 100);
}
function closeChart(chartId) {
const chartEl = document.getElementById('chart-' + chartId);
const cardEl = document.querySelector(`[data-card="${chartId}"]`);
chartEl.classList.remove('show');
cardEl.classList.remove('card-active');
if (activeChart === chartId) {
activeChart = null;
}
}
</script>
</body>
</html>
Số dòng: 809