07-mockup-dashboard.html

45.13 KB • 02/10/2026 07:21:16 • HTML

Tải về
07-mockup-dashboard.html
Html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thiết kế Mockup Dashboard — Tích hợp TKQC thuê ngoài (F005)</title>
<style>
  :root {
    --bg: #f1f5f9;
    --card-bg: #ffffff;
    --surface: #ffffff;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    
    --primary: #2563eb;
    --primary-light: #eff6ff;
    
    /* App Colors from Screenshot */
    --purple: #6d28d9;
    --purple-light: #f5f3ff;
    --blue: #2563eb;
    --blue-light: #eff6ff;
    --green: #059669;
    --green-light: #ecfdf5;
    --red: #dc2626;
    --red-light: #fef2f2;
    --orange: #d97706;
    --orange-light: #fffbeb;
    
    /* Highlight for F005 additions (Clear & Clean) */
    --new-accent: #059669;
    --new-bg: #ecfdf5;
    --new-border: #a7f3d0;
    
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    padding: 2rem 1.25rem 5rem;
    background: var(--bg);
    color: var(--text-dark);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }
  .wrap { max-width: 1180px; margin: 0 auto; }

  /* Document Header */
  .doc-header-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-card);
  }
  .doc-title { font-size: 1.65rem; font-weight: 800; color: var(--text-dark); margin: 0 0 0.5rem; }
  .doc-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; color: var(--text-muted); font-size: 0.88rem; }
  
  .badge-tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.8rem; font-weight: 700;
  }
  .badge-f005 { background: var(--blue-light); color: var(--blue); }
  .badge-new { background: var(--new-bg); color: var(--new-accent); border: 1px solid var(--new-border); }
  .badge-exist { background: #f1f5f9; color: var(--text-muted); }

  /* Formula Callout Banner */
  .formula-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  .formula-icon {
    font-size: 1.5rem;
    background: var(--primary-light);
    color: var(--primary);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .formula-content { flex: 1; }
  .formula-title { font-size: 0.92rem; font-weight: 750; color: var(--text-dark); margin-bottom: 0.25rem; }
  .formula-text {
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-light);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    display: inline-block;
    margin: 0.2rem 0;
  }
  .formula-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.2rem; }

  /* Section Titles */
  h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 2.5rem 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .h2-num {
    background: var(--primary);
    color: #ffffff;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
  }
  .section-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; }
  .section-desc code { background: #e2e8f0; color: var(--text-dark); padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 0.88em; font-weight: 600; }

  /* Mockup Container */
  .mockup-container {
    background: #ffffff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .mockup-toolbar {
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .mockup-title { font-size: 1.05rem; font-weight: 800; color: var(--text-dark); display: flex; align-items: center; gap: 0.5rem; }
  .mockup-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 0.85rem; }
  
  .filter-pill-group {
    display: flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    border: 1px solid var(--border);
  }
  .filter-pill {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
  }
  .filter-pill.active {
    background: #ffffff;
    color: var(--text-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .filter-pill.active.new-pill {
    background: var(--new-bg);
    color: var(--new-accent);
    border: 1px solid var(--new-border);
  }
  
  .filter-dropdown {
    background: #ffffff;
    border: 1px solid var(--border-strong);
    color: var(--text-dark);
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
  .filter-dropdown.new-dropdown {
    background: var(--new-bg);
    border-color: var(--new-border);
    color: var(--new-accent);
  }

  .mockup-body { padding: 1.25rem; }

  /* Top 4 KPI Grid */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
  }
  
  .kpi-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .kpi-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  .kpi-icon-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
  }
  .kpi-icon-sq {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
  }
  .icon-purple { background: var(--purple-light); color: var(--purple); }
  .icon-blue { background: var(--blue-light); color: var(--blue); }
  .icon-green { background: var(--green-light); color: var(--green); }
  .icon-red { background: var(--red-light); color: var(--red); }
  
  .kpi-val-usd { font-size: 1.45rem; font-weight: 800; margin-bottom: 0.15rem; }
  .kpi-val-vnd { font-size: 1rem; font-weight: 700; }
  .val-purple { color: var(--purple); }
  .val-blue { color: var(--blue); }
  .val-green { color: var(--green); }
  .val-red { color: var(--red); }
  
  .delta-text { font-size: 0.75rem; font-weight: 600; }
  .delta-up { color: var(--green); }
  .delta-down { color: var(--red); }

  /* Total Debt Dark Card */
  .kpi-card-dark {
    background: #18181b;
    border: 1px solid #18181b;
    color: #ffffff;
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
  }
  .kpi-card-dark .kpi-icon-box { color: #ffffff; }

  /* New Highlight KPI Card for F005 */
  .kpi-card-new {
    background: var(--new-bg);
    border: 1.5px solid var(--new-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
  }

  /* Section Title inside Mockup */
  .section-label {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dark);
    margin: 1.25rem 0 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Profit 3-Cards Row (App Style) */
  .profit-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
  }
  .profit-solid-card {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .p-card-blue { background: #5067eb; }
  .p-card-purple { background: #5c77fa; }
  .p-card-green { background: #059669; border: 2px solid #10b981; }

  .profit-val-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 0.5rem; }
  .p-val-block { display: flex; flex-direction: column; }
  .p-label { font-size: 0.7rem; opacity: 0.85; text-transform: uppercase; font-weight: 600; }
  .p-num { font-size: 1.15rem; font-weight: 800; }

  /* Tables */
  .table-box {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
  }
  table.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
    background: #ffffff;
  }
  table.app-table th {
    background: #f8fafc;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
  }
  table.app-table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-dark);
    font-weight: 500;
  }
  table.app-table tr:last-child td { border-bottom: none; }
  table.app-table tbody tr:hover { background: #f8fafc; }
  
  .td-right { text-align: right; }
  .th-right { text-align: right; }

  /* Highlight Column for F005 additions */
  table.app-table th.th-new-col {
    background: var(--new-bg);
    color: var(--new-accent);
    font-weight: 800;
  }
  table.app-table td.td-new-col {
    background: var(--new-bg);
    color: var(--new-accent);
    font-weight: 700;
  }

  /* Status Pills */
  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
  }
  .pill-purple { background: var(--purple-light); color: var(--purple); }
  .pill-green { background: var(--green-light); color: var(--green); }
  .pill-yellow { background: var(--orange-light); color: var(--orange); }
  .pill-red { background: var(--red-light); color: var(--red); }
  .pill-gray { background: #f1f5f9; color: var(--text-muted); }

  /* Status Bar Container */
  .status-bar-container {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    font-size: 0.88rem;
  }
  .status-item { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
  .status-dot { width: 9px; height: 9px; border-radius: 50%; }

  /* Spec Table */
  .spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.9rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .spec-table th, .spec-table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    text-align: left;
  }
  .spec-table th { background: #f8fafc; font-weight: 750; color: var(--text-dark); }

  .footer {
    text-align: center;
    margin-top: 3rem;
    color: var(--text-muted);
    font-size: 0.85rem;
  }

  /* ===== Phân biệt có sẵn / mới =====
     Mọi màu của phần có sẵn trong khung mockup quy về xám;
     chỉ phần mới có màu xanh lá, viền đậm và nhãn mũi tên. */
  .mockup-container {
    --purple: #64748b; --purple-light: #f1f5f9;
    --blue: #64748b;   --blue-light: #f1f5f9;
    --green: #64748b;  --green-light: #f1f5f9;
    --red: #64748b;    --red-light: #f1f5f9;
    --orange: #64748b; --orange-light: #f1f5f9;
  }
  .mockup-container .kpi-card { background: #f8fafc; }
  .mockup-container .kpi-card-dark { background: #f8fafc; border-color: var(--border); color: var(--text-dark); }
  .mockup-container .kpi-card-dark .kpi-icon-box { color: var(--text-muted); }
  .mockup-container .p-card-blue,
  .mockup-container .p-card-purple { background: #f8fafc; color: var(--text-dark); border: 1px solid var(--border); }

  .new-flag-base, .kpi-card-new::after, .p-card-green::after, .new-label::after {
    content: "↙ MỚI"; position: absolute; top: -11px; right: 10px;
    background: var(--new-accent); color: #ffffff; font-size: 0.68rem; font-weight: 800;
    letter-spacing: 0.04em; padding: 0.08rem 0.55rem; border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  }
  .mockup-container .kpi-card.kpi-card-new,
  .kpi-card-new { position: relative; background: var(--new-bg); border: 2px solid var(--new-accent); }
  .kpi-card-new span, .kpi-card-new div { color: var(--new-accent) !important; }
  .p-card-green { position: relative; background: var(--new-accent) !important; border: 2px solid #047857; color: #ffffff; }

  .section-label.new-label { position: relative; color: var(--new-accent); }
  .section-label.new-label::before { content: "➜"; margin-right: 0.4rem; }
  .section-label.new-label > span:first-child { margin-right: auto; }
  .section-label.new-label::after { position: static; margin-left: 0.6rem; }
  .table-box.new-box { border: 2px solid var(--new-accent); }

  table.app-table th.th-new-col { background: var(--new-bg); color: var(--new-accent);
    box-shadow: inset 2px 0 0 var(--new-accent), inset -2px 0 0 var(--new-accent), inset 0 2px 0 var(--new-accent); }
  table.app-table th.th-new-col::before { content: "⬇ "; }
  table.app-table td.td-new-col { background: var(--new-bg); color: var(--new-accent);
    box-shadow: inset 2px 0 0 var(--new-accent), inset -2px 0 0 var(--new-accent); }
  table.app-table td.td-new-col .status-pill { background: #ffffff; color: var(--new-accent); border: 1px solid var(--new-border); }

  .filter-pill.new-pill, .filter-dropdown.new-dropdown, .new-check {
    background: var(--new-bg) !important; color: var(--new-accent) !important;
    border: 2px solid var(--new-accent) !important; font-weight: 700;
  }
  .filter-pill.new-pill::before, .filter-dropdown.new-dropdown::before, .new-check::before { content: "➜ "; }
  .new-check { border-radius: 8px; padding: 0.25rem 0.6rem; }

  .legend { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.6rem; }
  .legend .sw { display: inline-block; width: 26px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 0.35rem; }
  .legend .sw-old { background: #f8fafc; border: 1px solid var(--border-strong); }
  .legend .sw-new { background: var(--new-bg); border: 2px solid var(--new-accent); }
</style>
</head>
<body>
<div class="wrap">

  <!-- Document Header -->
  <div class="doc-header-card">
    <h1 class="doc-title">Thiết kế Mockup Dashboard — Tích hợp TKQC thuê ngoài</h1>
    <div class="doc-meta">
      <span class="badge-tag badge-f005">Tính năng F005</span>
      <span>Cập nhật: 2026-10-02</span>
    </div>
    <div class="legend">
      <span><span class="sw sw-old"></span>Xám — đã có sẵn, giữ nguyên</span>
      <span><span class="sw sw-new"></span>Xanh lá, viền đậm, có mũi tên <strong style="color:var(--new-accent)">➜ / ⬇ / ↙ MỚI</strong> — phần cần làm mới</span>
    </div>
  </div>

  <!-- Formula Callout Banner -->
  <div class="formula-card">
    <div class="formula-icon">💡</div>
    <div class="formula-content">
      <div class="formula-title">Nguyên tắc ghi nhận &amp; Tính toán lợi nhuận chuẩn (BR-13)</div>
      <div class="formula-text">Lợi nhuận TK thuê = (% Phí topup khách - % Phí thuê đối tác) × Chi tiêu thực tế - Tổn thất phát sinh</div>
      <div class="formula-sub">Tính toán độc lập theo chi tiêu thực tế (Spend) dựa trên tỷ lệ phí chốt cố định trên đơn, khấu trừ các trường hợp vượt hạn mức hoặc sự cố tài chính.</div>
    </div>
  </div>

  <!-- ================= SECTION 1: DASHBOARD CHÍNH ================= -->
  <h2><span class="h2-num">1</span> Dashboard chính (Executive Overview)</h2>
  <div class="section-desc">
    Tích hợp các chỉ số kinh doanh từ nguồn TKQC thuê ngoài vào bức tranh tài chính tổng quan:
    <code>Bộ lọc Nguồn &amp; Đối tác</code> · <code>Thẻ Lợi nhuận TK thuê</code> · <code>Cột Lãi TK thuê</code> · <code>Bảng Hiệu quả theo bên thứ 3</code>
  </div>

  <div class="mockup-container">
    <div class="mockup-toolbar">
      <div class="mockup-title">
        <span>📊 Dashboard Tổng Quan Quản Trị</span>
      </div>
      <div class="mockup-controls">
        <span style="font-weight:700">Nguồn:</span>
        <div class="filter-pill-group">
          <div class="filter-pill">Tất cả</div>
          <div class="filter-pill">Nội bộ</div>
          <div class="filter-pill active new-pill">Thuê ngoài</div>
        </div>
        <div class="filter-dropdown new-dropdown">
          Đối tác: Tất cả ▾
        </div>
      </div>
    </div>
    <div class="mockup-body">
      
      <!-- Top 4 KPIs -->
      <div class="kpi-grid">
        <div class="kpi-card">
          <div class="kpi-card-header">
            <div class="kpi-icon-box">
              <div class="kpi-icon-sq icon-purple">💳</div>
              <span>Ví khách hàng</span>
            </div>
          </div>
          <div>
            <div class="kpi-val-usd val-purple">$ 28.178,84</div>
            <div class="kpi-val-vnd val-purple">đ 90,439,784</div>
          </div>
        </div>

        <div class="kpi-card">
          <div class="kpi-card-header">
            <div class="kpi-icon-box">
              <div class="kpi-icon-sq icon-blue">⚖️</div>
              <span>Topup khách hàng</span>
            </div>
          </div>
          <div>
            <div class="kpi-val-usd val-blue">
              $ 3.115,06 <span class="delta-text delta-up">▲ +12.4%</span>
            </div>
            <div class="kpi-val-vnd val-blue">
              đ 14,490,000 <span class="delta-text delta-up">▲ +33%</span>
            </div>
          </div>
        </div>

        <div class="kpi-card">
          <div class="kpi-card-header">
            <div class="kpi-icon-box">
              <div class="kpi-icon-sq icon-green">🎯</div>
              <span>Chi tiêu (Spend)</span>
            </div>
          </div>
          <div>
            <div class="kpi-val-usd val-green">
              $ 3.790,97 <span class="delta-text delta-down">▼ -5.2%</span>
            </div>
            <div class="kpi-val-vnd val-green">
              đ 10,282,598 <span class="delta-text delta-up">▲ +15.2%</span>
            </div>
          </div>
        </div>

        <div class="kpi-card-dark">
          <div class="kpi-card-header">
            <div class="kpi-icon-box">
              <div class="kpi-icon-sq icon-red">📊</div>
              <span>Tổng dư nợ</span>
            </div>
          </div>
          <div>
            <div class="kpi-val-usd val-red">$ 5.202.075,35</div>
            <div class="kpi-val-vnd val-red">đ 2,775,000</div>
          </div>
        </div>
      </div>

      <!-- Profit Section -->
      <div class="section-label">
        <span>Cơ cấu lợi nhuận</span>
        <span style="font-size:0.8rem; font-weight:600; color:var(--text-muted)">[Spend | Topup]</span>
      </div>
      <div class="profit-cards-row">
        <div class="profit-solid-card p-card-blue">
          <div style="font-size:0.82rem; font-weight:600">Lợi nhuận cho thuê</div>
          <div class="profit-val-row">
            <div class="p-val-block"><span class="p-label">USD</span><span class="p-num">$ 158,85</span></div>
            <div class="p-val-block" style="text-align:right"><span class="p-label">VND</span><span class="p-num">đ 403,220.01</span></div>
          </div>
        </div>

        <div class="profit-solid-card p-card-purple">
          <div style="font-size:0.82rem; font-weight:600">Lợi nhuận khác</div>
          <div class="profit-val-row">
            <div class="p-val-block"><span class="p-label">USD</span><span class="p-num">$ 0</span></div>
            <div class="p-val-block" style="text-align:right"><span class="p-label">VND</span><span class="p-num">đ 0</span></div>
          </div>
        </div>

        <!-- NEW PROFIT CARD F005 -->
        <div class="profit-solid-card p-card-green">
          <div style="font-size:0.82rem; font-weight:700">Lợi nhuận TK thuê ngoài</div>
          <div class="profit-val-row">
            <div class="p-val-block"><span class="p-label">USD (Lãi ròng)</span><span class="p-num">$ 310,00</span></div>
            <div class="p-val-block" style="text-align:right"><span class="p-label">Phí đối tác</span><span class="p-num">$ 384,40</span></div>
          </div>
        </div>
      </div>

      <!-- Group Profit Table -->
      <div class="section-label">Lợi nhuận theo nhóm doanh nghiệp</div>
      <div class="table-box">
        <table class="app-table">
          <thead>
            <tr>
              <th>Nhóm doanh nghiệp</th>
              <th class="th-right">USD</th>
              <th class="th-right">TOTAL USD</th>
              <th class="th-right">VND</th>
              <th class="th-right">TOTAL VND</th>
              <th class="th-right th-new-col">LÃI TK THUÊ</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><strong>THAILAND</strong></td>
              <td class="td-right">$ 116,07</td>
              <td class="td-right">$ 2.907,96</td>
              <td class="td-right">đ 0</td>
              <td class="td-right">đ 0</td>
              <td class="td-right td-new-col">$ 186,00</td>
            </tr>
            <tr>
              <td><strong>KHÁCH LẺ</strong></td>
              <td class="td-right">$ 41,57</td>
              <td class="td-right">$ 852,64</td>
              <td class="td-right">đ 228,172.83</td>
              <td class="td-right">đ 5,281,250</td>
              <td class="td-right td-new-col">$ 124,00</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Partner Profit Table (NEW SECTION) -->
      <div class="section-label new-label">
        <span>Hiệu quả kinh doanh theo bên thứ 3 (Đối tác cung ứng)</span>
      </div>
      <div class="table-box new-box">
        <table class="app-table">
          <thead>
            <tr>
              <th>Đối tác cung ứng</th>
              <th class="th-right">TK bàn giao</th>
              <th class="th-right">Tổng chi tiêu</th>
              <th class="th-right">Doanh thu phí</th>
              <th class="th-right">Phí thuê đối tác</th>
              <th class="th-right th-new-col">Lợi nhuận ròng</th>
              <th class="th-right">Tổn thất phát sinh</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span class="status-pill pill-purple">Agency A</span></td>
              <td class="td-right">12</td>
              <td class="td-right">$ 6.200,00</td>
              <td class="td-right">$ 496,00 <span style="font-size:0.75rem; color:var(--text-muted)">(8%)</span></td>
              <td class="td-right" style="color:var(--red)">$ 310,00 <span style="font-size:0.75rem; color:var(--text-muted)">(5%)</span></td>
              <td class="td-right td-new-col">$ 186,00 <span style="font-size:0.75rem; color:var(--green)">(3%)</span></td>
              <td class="td-right">$ 0,00</td>
            </tr>
            <tr>
              <td><span class="status-pill pill-purple">Agency B</span></td>
              <td class="td-right">5</td>
              <td class="td-right">$ 2.480,00</td>
              <td class="td-right">$ 198,40 <span style="font-size:0.75rem; color:var(--text-muted)">(8%)</span></td>
              <td class="td-right" style="color:var(--red)">$ 74,40 <span style="font-size:0.75rem; color:var(--text-muted)">(3%)</span></td>
              <td class="td-right td-new-col">$ 124,00 <span style="font-size:0.75rem; color:var(--green)">(5%)</span></td>
              <td class="td-right" style="color:var(--red)">$ 18,00 <span style="font-size:0.75rem; color:var(--red)">(Vượt limit)</span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Account Status Bar -->
      <div class="section-label">Tổng quan trạng thái TKQC thuê ngoài</div>
      <div class="status-bar-container">
        <div class="status-item"><div class="status-dot" style="background:var(--green)"></div> Đang hoạt động: <strong>14</strong></div>
        <div class="status-item"><div class="status-dot" style="background:var(--orange)"></div> Có dư nợ: <strong>1</strong></div>
        <div class="status-item"><div class="status-dot" style="background:var(--red)"></div> Vô hiệu hóa (Die/Kháng): <strong>2</strong></div>
        <div class="status-item"><div class="status-dot" style="background:var(--purple)"></div> Chờ thu hồi: <strong>1</strong></div>
        <div class="status-item"><div class="status-dot" style="background:var(--text-muted)"></div> Sẵn sàng cấp phát: <strong>9</strong></div>
      </div>

    </div>
  </div>

  <!-- ================= SECTION 2: DASHBOARD SUPPORT ================= -->
  <h2><span class="h2-num">2</span> Dashboard Support (Điều phối &amp; Xử lý yêu cầu)</h2>
  <div class="section-desc">
    Giám sát hàng đợi điều phối, phát hiện kịp thời các yêu cầu bị chậm trễ hoặc phát sinh lỗi phân quyền:
    <code>Hàng đợi đối tác</code> · <code>Đơn kẹt/lỗi bên thứ 3</code> · <code>Bộ 3 Cảnh báo rủi ro</code> · <code>Bảng SLA đối tác</code>
  </div>

  <div class="mockup-container">
    <div class="mockup-toolbar">
      <div class="mockup-title">
        <span>🎧 Tổng Hợp Yêu Cầu Đang Chờ Xử Lý (Support)</span>
      </div>
      <div class="mockup-controls">
        <div class="filter-dropdown">Doanh nghiệp: Tất cả ▾</div>
        <div class="filter-dropdown new-dropdown">Đối tác: Tất cả ▾</div>
      </div>
    </div>
    <div class="mockup-body">
      
      <!-- Queue KPIs -->
      <div class="kpi-grid">
        <div class="kpi-card">
          <span style="font-size:0.8rem; color:var(--text-muted); font-weight:600">Yêu cầu cấp TKQC</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--text-dark); margin-top:0.2rem">11 đơn</div>
          <span style="font-size:0.75rem; color:var(--text-muted)">Đang chờ xử lý nội bộ</span>
        </div>
        <div class="kpi-card">
          <span style="font-size:0.8rem; color:var(--text-muted); font-weight:600">Thu hồi &amp; Hoàn số dư</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--text-dark); margin-top:0.2rem">0 đơn</div>
          <span style="font-size:0.75rem; color:var(--text-muted)">Đang xử lý</span>
        </div>
        <div class="kpi-card">
          <span style="font-size:0.8rem; color:var(--text-muted); font-weight:600">Chuyển số dư nội bộ</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--text-dark); margin-top:0.2rem">0 đơn</div>
          <span style="font-size:0.75rem; color:var(--text-muted)">Đang xử lý</span>
        </div>
        <div class="kpi-card kpi-card-new">
          <span style="font-size:0.8rem; color:var(--green); font-weight:700">Yêu cầu bên thứ 3</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--green); margin-top:0.2rem">4 đơn</div>
          <span style="font-size:0.75rem; color:var(--green)">Chờ đối tác phân bổ</span>
        </div>
      </div>

      <!-- Alert KPIs -->
      <div class="kpi-grid">
        <div class="kpi-card">
          <span style="font-size:0.8rem; color:var(--text-muted); font-weight:600">Đơn nội bộ kẹt / lỗi</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--text-dark); margin-top:0.2rem">3 đơn</div>
          <span style="font-size:0.75rem; color:var(--text-muted)">Quá hạn hệ thống</span>
        </div>
        <div class="kpi-card kpi-card-new">
          <span style="font-size:0.8rem; font-weight:700">Đơn bên thứ 3 kẹt / lỗi</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--orange); margin-top:0.2rem">2 đơn</div>
          <span style="font-size:0.75rem; color:var(--orange)">1 Chậm xử lý · 1 Từ chối</span>
        </div>
        <div class="kpi-card kpi-card-new" style="grid-column: span 2">
          <span style="font-size:0.8rem; font-weight:700">Bộ 3 Cảnh báo rủi ro TKQC thuê ngoài</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--red); margin-top:0.2rem">3 tài khoản phát sinh cảnh báo</div>
          <span style="font-size:0.75rem; color:var(--red)">• 1 Lệch hạn mức &nbsp; • 1 Hoạt động ngoài luồng &nbsp; • 1 Mất quyền Admin BM</span>
        </div>
      </div>

      <!-- Problem Orders Table -->
      <div class="section-label">
        <span>Đơn kẹt / lỗi cần xử lý khẩn cấp</span>
        <div class="filter-pill-group">
          <div class="filter-pill">Tất cả</div>
          <div class="filter-pill">Topup</div>
          <div class="filter-pill">Chuyển tiền</div>
          <div class="filter-pill active new-pill">Bên thứ 3 (2)</div>
        </div>
      </div>
      <div class="table-box">
        <table class="app-table">
          <thead>
            <tr>
              <th>Phân loại</th>
              <th>Vấn đề</th>
              <th>Mã đơn</th>
              <th>Khách hàng</th>
              <th class="th-new-col">Đối tác</th>
              <th>Trạng thái chi tiết</th>
              <th>Thao tác</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span class="status-pill pill-purple">Bên thứ 3</span></td>
              <td><span class="status-pill pill-yellow">Kẹt (Quá hạn)</span></td>
              <td><code>YC-0412</code></td>
              <td><strong>Công ty TNHH Volec</strong></td>
              <td class="td-new-col"><strong>Agency A</strong></td>
              <td>Chờ đối tác xử lý (Đã gửi 42 phút trước)</td>
              <td><button class="filter-dropdown" style="padding:0.2rem 0.5rem; cursor:pointer">Đôn đốc</button></td>
            </tr>
            <tr>
              <td><span class="status-pill pill-purple">Bên thứ 3</span></td>
              <td><span class="status-pill pill-red">Lỗi (Từ chối)</span></td>
              <td><code>YC-0413</code></td>
              <td><strong>Minh Anh Co.</strong></td>
              <td class="td-new-col"><strong>Agency B</strong></td>
              <td>Đối tác từ chối ("Hết hạn mức ngày")</td>
              <td><button class="filter-dropdown" style="padding:0.2rem 0.5rem; cursor:pointer">Đổi TK khác</button></td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Partner SLA Table -->
      <div class="section-label new-label">
        <span>Theo dõi tiến độ &amp; SLA xử lý theo bên thứ 3</span>
      </div>
      <div class="table-box new-box">
        <table class="app-table">
          <thead>
            <tr>
              <th>Đối tác cung ứng</th>
              <th class="th-right">Đang chờ</th>
              <th class="th-right">Quá hạn</th>
              <th class="th-right">Từ chối</th>
              <th class="th-right">Link hết hạn</th>
              <th class="th-right th-new-col">SLA xử lý trung bình</th>
              <th>Đánh giá hiệu suất</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span class="status-pill pill-purple">Agency A</span></td>
              <td class="td-right">3</td>
              <td class="td-right" style="color:var(--red)">1</td>
              <td class="td-right">0</td>
              <td class="td-right">0</td>
              <td class="td-right td-new-col">42 phút</td>
              <td><span class="status-pill pill-green">✓ Đạt yêu cầu</span></td>
            </tr>
            <tr>
              <td><span class="status-pill pill-purple">Agency B</span></td>
              <td class="td-right">1</td>
              <td class="td-right">0</td>
              <td class="td-right" style="color:var(--red)">1</td>
              <td class="td-right" style="color:var(--red)">1</td>
              <td class="td-right td-new-col">1 giờ 15 phút</td>
              <td><span class="status-pill pill-yellow">▲ Cần cải thiện</span></td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>

  <!-- ================= SECTION 3: CUSTOMER ANALYTICS ================= -->
  <h2><span class="h2-num">3</span> Phân tích khách hàng (Customer Analytics)</h2>
  <div class="section-desc">
    Đánh giá cơ cấu khách hàng sử dụng dịch vụ và tỷ trọng đóng góp lợi nhuận từ nguồn TKQC thuê ngoài:
    <code>Thẻ Khách dùng TK thuê</code> · <code>Tab phân khúc TK thuê</code> · <code>Cột TKQC thuê ngoài</code>
  </div>

  <div class="mockup-container">
    <div class="mockup-toolbar">
      <div class="mockup-title">
        <span>👥 Báo Cáo Phân Tích &amp; Phân Khúc Khách Hàng</span>
      </div>
      <div class="mockup-controls">
        <span style="font-weight:700">Nguồn:</span>
        <div class="filter-pill-group">
          <div class="filter-pill active">Tất cả</div>
          <div class="filter-pill">Nội bộ</div>
          <div class="filter-pill new-pill">Thuê ngoài</div>
        </div>
      </div>
    </div>
    <div class="mockup-body">
      
      <!-- Top KPIs -->
      <div class="kpi-grid">
        <div class="kpi-card">
          <span style="font-size:0.8rem; color:var(--text-muted); font-weight:600">Tổng khách hàng</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--text-dark); margin-top:0.2rem">267</div>
          <span style="font-size:0.75rem; color:var(--text-muted)">Doanh nghiệp active</span>
        </div>
        <div class="kpi-card">
          <span style="font-size:0.8rem; color:var(--text-muted); font-weight:600">Tổng chi tiêu 30 ngày</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--text-dark); margin-top:0.2rem">$ 23.298.759</div>
          <span style="font-size:0.75rem; color:var(--text-muted)">Toàn hệ thống</span>
        </div>
        <div class="kpi-card">
          <span style="font-size:0.8rem; color:var(--text-muted); font-weight:600">TKQC đang chạy</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--text-dark); margin-top:0.2rem">1.020</div>
          <span style="font-size:0.75rem; color:var(--text-muted)">Tỷ lệ LIVE: <strong>21,11%</strong></span>
        </div>
        <div class="kpi-card kpi-card-new">
          <span style="font-size:0.8rem; color:var(--green); font-weight:700">Khách dùng TK thuê ngoài</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--green); margin-top:0.2rem">6</div>
          <span style="font-size:0.75rem; color:var(--green)">Chiếm 2,2% tổng khách</span>
        </div>
      </div>

      <!-- Segment Tabs -->
      <div class="filter-pill-group" style="margin-bottom:1rem">
        <div class="filter-pill active">Tất cả (267)</div>
        <div class="filter-pill">Strategic (12)</div>
        <div class="filter-pill">Growth (45)</div>
        <div class="filter-pill">Normal (180)</div>
        <div class="filter-pill">Risk (30)</div>
        <div class="filter-pill new-pill" style="font-weight:700">Có dùng TK thuê (6)</div>
      </div>

      <!-- Customers Table -->
      <div class="table-box">
        <table class="app-table">
          <thead>
            <tr>
              <th>Doanh nghiệp / Khách hàng</th>
              <th class="th-right">Chi tiêu 30 ngày</th>
              <th>Cơ cấu TK sử dụng <span style="font-size:0.75rem; color:var(--text-muted)">(Tổng · LIVE · DIE)</span></th>
              <th class="th-new-col">TKQC thuê ngoài <span style="font-size:0.75rem">(Đang dùng · Chi tiêu · Lãi ròng)</span></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><strong>Công ty TNHH Volec</strong></td>
              <td class="td-right">$ 58.691,69</td>
              <td>364 <span class="status-pill pill-green">185 LIVE</span> <span class="status-pill pill-red">170 DIE</span></td>
              <td class="td-new-col">8 TK &nbsp;·&nbsp; $ 4.100,00 &nbsp;·&nbsp; <strong>$ 123,00</strong></td>
            </tr>
            <tr>
              <td><strong>Minh Anh Media</strong></td>
              <td class="td-right">$ 7.276,64</td>
              <td>10 <span class="status-pill pill-green">10 LIVE</span> <span class="status-pill pill-gray">0 DIE</span></td>
              <td class="td-new-col">2 TK &nbsp;·&nbsp; $ 1.240,00 &nbsp;·&nbsp; <strong>$ 37,20</strong></td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>

  <!-- ================= SECTION 4: INVENTORY MANAGEMENT ================= -->
  <h2><span class="h2-num">4</span> Phân vùng Kho TK thuê bên thứ 3 (Inventory Management)</h2>
  <div class="section-desc">
    Khu vực quản lý kho chuyên biệt cho tài khoản thuê ngoài, tích hợp cảnh báo rủi ro tự động:
    <code>Thẻ trạng thái kho</code> · <code>Bộ lọc đa chiều</code> · <code>Cờ cảnh báo an toàn BR-21</code>
  </div>

  <div class="mockup-container">
    <div class="mockup-toolbar">
      <div class="mockup-title">
        <span>📦 Phân Vùng Kho TK Thuê Bên Thứ 3</span>
      </div>
      <div class="mockup-controls">
        <div class="filter-pill-group">
          <div class="filter-pill active">Kho tài khoản</div>
          <div class="filter-pill">Yêu cầu nạp / trả</div>
          <div class="filter-pill">Cấp cho khách</div>
          <div class="filter-pill">Thu hồi quyền BM</div>
        </div>
      </div>
    </div>
    <div class="mockup-body">
      
      <!-- Inventory KPIs -->
      <div class="kpi-grid">
        <div class="kpi-card kpi-card-new">
          <span style="font-size:0.8rem; color:var(--green); font-weight:700">Sẵn sàng cấp phát</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--green); margin-top:0.2rem">9</div>
          <span style="font-size:0.75rem; color:var(--green)">Đã kiểm tra an toàn</span>
        </div>
        <div class="kpi-card kpi-card-new">
          <span style="font-size:0.8rem; font-weight:700">Đang bàn giao</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--text-dark); margin-top:0.2rem">17</div>
          <span style="font-size:0.75rem; color:var(--text-muted)">Khách hàng đang chạy</span>
        </div>
        <div class="kpi-card kpi-card-new">
          <span style="font-size:0.8rem; font-weight:700">Đang xử lý sự cố</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--orange); margin-top:0.2rem">2</div>
          <span style="font-size:0.75rem; color:var(--orange)">Thu hồi · Hoàn tiền · Kháng</span>
        </div>
        <div class="kpi-card kpi-card-new">
          <span style="font-size:0.8rem; font-weight:700">Vô hiệu hóa (Die)</span>
          <div style="font-size:1.4rem; font-weight:800; color:var(--red); margin-top:0.2rem">2</div>
          <span style="font-size:0.75rem; color:var(--red)">Cần kháng hoặc tất toán</span>
        </div>
      </div>

      <!-- Filters Row -->
      <div style="display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; margin-bottom:1rem">
        <div class="filter-dropdown new-dropdown">Đối tác: Tất cả ▾</div>
        <div class="filter-dropdown new-dropdown">Trạng thái: Tất cả ▾</div>
        <label class="new-check" style="display:flex; align-items:center; gap:0.35rem; font-size:0.85rem; cursor:pointer">
          <input type="checkbox" checked> Có cảnh báo rủi ro (BR-21)
        </label>
        <div class="filter-dropdown new-dropdown">Kỳ: Tháng này ▾</div>
        <input type="text" placeholder="🔍 Tìm theo tên hoặc UID..." style="margin-left:auto; border:1px solid var(--border-strong); border-radius:8px; padding:0.35rem 0.75rem; font-size:0.85rem; background:#ffffff">
      </div>

      <!-- Inventory Table -->
      <div class="table-box">
        <table class="app-table">
          <thead>
            <tr>
              <th>Tài khoản quảng cáo (UID)</th>
              <th>Đối tác cung ứng</th>
              <th>Trạng thái kho</th>
              <th class="th-right th-new-col">Chi tiêu kỳ</th>
              <th class="th-right th-new-col">Lợi nhuận ròng</th>
              <th class="th-new-col">Cảnh báo an toàn (BR-21)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><strong>Content_A5</strong> <code style="font-size:0.78rem">7229923968078827</code></td>
              <td><span class="status-pill pill-purple">Agency A</span></td>
              <td><span class="status-pill pill-green">Đang giao khách</span></td>
              <td class="td-right td-new-col">$ 1.200,00</td>
              <td class="td-right td-new-col">$ 36,00</td>
              <td class="td-new-col"><span class="status-pill pill-green">✓ Bình thường</span></td>
            </tr>
            <tr>
              <td><strong>Trexo_93</strong> <code style="font-size:0.78rem">8603752630757499</code></td>
              <td><span class="status-pill pill-purple">Agency B</span></td>
              <td><span class="status-pill pill-gray">Lưu kho</span></td>
              <td class="td-right td-new-col">$ 40,00</td>
              <td class="td-right td-new-col">—</td>
              <td class="td-new-col"><span class="status-pill pill-red">🔴 Hoạt động ngoài luồng</span></td>
            </tr>
            <tr>
              <td><strong>Credit_US</strong> <code style="font-size:0.78rem">1027732693091102</code></td>
              <td><span class="status-pill pill-purple">Agency A</span></td>
              <td><span class="status-pill pill-green">Đang giao khách</span></td>
              <td class="td-right td-new-col">$ 3.500,00</td>
              <td class="td-right td-new-col">$ 105,00</td>
              <td class="td-new-col"><span class="status-pill pill-yellow">▲ Lệch hạn mức (Limit)</span></td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>

  <!-- ================= SECTION 5: SPECIFICATION TABLE ================= -->
  <h2><span class="h2-num">5</span> Bảng đối chiếu kỹ thuật &amp; Luồng tương tác UI</h2>
  <table class="spec-table">
    <thead>
      <tr>
        <th>Màn hình</th>
        <th>Thành phần UI (Hạng mục F005)</th>
        <th>Nguồn dữ liệu &amp; Logic tính toán</th>
        <th>Hành vi tương tác khi Click</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>Dashboard chính</strong></td>
        <td>Thẻ <em>Lợi nhuận TK thuê ngoài</em></td>
        <td>Tổng (% topup khách − % phí thuê) × chi tiêu thực, trừ các khoản lỗ</td>
        <td>Mở modal báo cáo phân tích lợi nhuận chi tiết theo từng đối tác</td>
      </tr>
      <tr>
        <td><strong>Dashboard chính</strong></td>
        <td>Bảng <em>Hiệu quả theo bên thứ 3</em></td>
        <td>Gộp theo đối tác, cộng chi tiêu và doanh thu phí</td>
        <td>Lọc toàn bộ dữ liệu Dashboard theo đối tác được chọn</td>
      </tr>
      <tr>
        <td><strong>Dashboard Support</strong></td>
        <td>Thẻ <em>Yêu cầu bên thứ 3</em></td>
        <td>Đếm yêu cầu đang chờ đối tác xử lý</td>
        <td>Lọc bảng danh sách đơn đang chờ phản hồi từ đối tác</td>
      </tr>
      <tr>
        <td><strong>Dashboard Support</strong></td>
        <td>Thẻ <em>Bộ 3 Cảnh báo rủi ro</em></td>
        <td>Đếm số lượng TK vi phạm 1 trong 3 quy tắc an toàn</td>
        <td>Chuyển hướng đến danh sách tài khoản vi phạm để xử lý</td>
      </tr>
      <tr>
        <td><strong>Phân tích khách hàng</strong></td>
        <td>Nhóm cột <em>TKQC thuê ngoài</em></td>
        <td>Trích xuất số lượng TK và chi tiêu thực tế của khách hàng</td>
        <td>Mở danh sách các TK thuê khách đang giữ quyền</td>
      </tr>
      <tr>
        <td><strong>Kho TK thuê bên thứ 3</strong></td>
        <td>Toàn bộ phân vùng và cột <em>Cảnh báo an toàn</em></td>
        <td>Kết quả kiểm tra tự động 3 quy tắc cảnh báo (BR-21)</td>
        <td>Hiển thị popup chi tiết sai lệch hạn mức / log hoạt động ngoài luồng</td>
      </tr>
    </tbody>
  </table>

  <div class="footer">
    Nolimit Ads Manager · Tài liệu Mockup Dashboard · Tính năng F005 · Cập nhật: 2026-10-02
  </div>

</div>
</body>
</html>

Số dòng: 1114