Write

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Champions — DEWA Utilization Dashboard</title>
    <style>
        .num {
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', 'Book Antiqua', Palatino, serif !important;
            font-variant-numeric: tabular-nums;
        }

        :root {
            --white: #ffffff;
            --bg: #f4f6fb;
            --bg-alt: #eef1f8;
            --surface: #ffffff;
            --gold: #b8822a;
            --gold-light: #e6a93a;
            --gold-pale: #fdf3e1;
            --gold-border: #e8c97a;
            --ink: #141926;
            --ink-mid: #3d4a63;
            --ink-soft: #6b7a99;
            --ink-muted: #9aa3b8;
            --border: #e2e6f0;
            --border-dark: #cdd2e0;
            --shadow-sm: 0 1px 3px rgba(20,25,38,0.07), 0 1px 2px rgba(20,25,38,0.04);
            --shadow-md: 0 4px 16px rgba(20,25,38,0.09), 0 2px 4px rgba(20,25,38,0.05);
            --shadow-lg: 0 14px 36px rgba(20,25,38,0.12), 0 4px 8px rgba(20,25,38,0.06);
            --green: #16a362;
            --green-bg: #edfaf4;
            --green-border: #a3dfc3;
            --blue: #2d6fe8;
            --blue-bg: #eff4fd;
            --blue-border: #9bbaf5;
            --amber: #c47d0e;
            --amber-bg: #fff8ec;
            --amber-border: #f5cc7a;
            --slate-bg: #f2f4f8;
            --slate-border: #d0d5e2;
            --violet: #6d3fd6;
            --violet-bg: #f3effe;
            --violet-border: #c4a8f5;
            --teal: #0e8c7a;
            --teal-bg: #e8f8f6;
            --teal-border: #7fd0c6;
            --r-sm: 6px;
            --r-md: 12px;
            --r-lg: 18px;
            --r-xl: 24px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html { scroll-behavior: smooth; }

        body {
            background: var(--bg);
            color: var(--ink);
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(14px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .45; transform: scale(.75); }
        }

        /* TOPBAR */
        .topbar {
            background: var(--white);
            border-bottom: 1px solid var(--border);
            padding: 0 56px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-sm);
            animation: slideDown .4s ease both;
        }
        .topbar-brand { display: flex; align-items: center; gap: 10px; }
        .brand-dot {
            width: 28px; height: 28px;
            background: var(--gold);
            border-radius: 7px;
            display: flex; align-items: center; justify-content: center;
        }
        .brand-name { font-size: 13px; font-weight: 600; color: var(--ink); }
        .brand-sep { width: 1px; height: 18px; background: var(--border-dark); margin: 0 4px; }
        .brand-sub { font-size: 12px; color: var(--ink-soft); }
        .topbar-right { display: flex; align-items: center; gap: 20px; }
        .topbar-tag { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); }
        .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }

        /* HERO */
        .hero {
            background: var(--white);
            border-bottom: 1px solid var(--border);
            padding: 44px 56px 40px;
            position: relative;
            overflow: hidden;
            animation: fadeIn .5s ease both;
        }
        .hero-inner {
            position: relative; z-index: 1;
            display: flex; align-items: flex-start; justify-content: space-between; gap: 48px;
        }
        .hero-left { flex: 1; }
        .hero-pill {
            display: inline-flex; align-items: center; gap: 7px;
            background: var(--gold-pale); border: 1px solid var(--gold-border);
            border-radius: 99px; padding: 5px 13px 5px 9px;
            font-size: 11px; font-weight: 600; color: var(--gold);
            letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px;
        }
        .hero-title {
            font-family: 'Fraunces', serif;
            font-size: 38px; font-weight: 700; line-height: 1.12;
            color: var(--ink); letter-spacing: -.02em; max-width: 520px;
        }
        .hero-title em { font-style: italic; font-weight: 300; color: var(--gold); }
        .hero-meta {
            display: flex; margin-top: 22px;
            border: 1px solid var(--border); border-radius: var(--r-md);
            overflow: hidden; width: fit-content; background: #f9fafc;
        }
        .meta-chip {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 20px; font-size: 12px; color: var(--ink-mid);
            border-right: 1px solid var(--border);
        }
        .meta-chip:last-child { border-right: none; }
        .meta-chip strong { color: var(--ink); font-weight: 600; }

        /* MAIN */
        .main { padding: 32px 56px 56px; }

        /* STAT CARDS */
        .stats-grid {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 16px; margin-bottom: 28px;
        }
        .stat-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--r-lg); padding: 22px 22px 20px;
            position: relative; overflow: hidden;
            box-shadow: var(--shadow-sm); animation: fadeUp .5s ease both;
            transition: box-shadow .25s ease, border-color .25s ease;
        }
        .stat-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-dark); }
        .stat-accent {
            position: absolute; top: 0; left: 0; right: 0; height: 3px;
            border-radius: var(--r-lg) var(--r-lg) 0 0;
        }
        .stat-icon-wrap {
            width: 40px; height: 40px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
        }
        .stat-num {
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
            font-size: 42px; font-weight: 700; line-height: 1;
            letter-spacing: -.02em; color: var(--ink);
        }
        .stat-num .unit { font-size: 24px; font-weight: 300; color: var(--gold); }
        .stat-lbl {
            font-size: 11px; font-weight: 500; color: var(--ink-muted);
            letter-spacing: .07em; text-transform: uppercase; margin-top: 6px;
        }
        .stat-tag {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 11px; font-weight: 500; margin-top: 10px;
            padding: 3px 8px; border-radius: 99px;
        }

        /* SECTION / CONTROLS */
        .section-head {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 10px; gap: 16px; flex-wrap: wrap;
        }
        .section-title { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
        .count-badge {
            background: var(--bg-alt); border: 1px solid var(--border);
            border-radius: 99px; padding: 2px 10px;
            font-size: 11px; font-weight: 500; color: var(--ink-soft);
        }
        .controls-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .dept-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
        .dept-label { font-size: 11px; font-weight: 500; color: var(--ink-muted); letter-spacing: .06em; text-transform: uppercase; }

        .search-wrap { position: relative; }
        .search-icon {
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
            color: var(--ink-muted); pointer-events: none;
        }
        .search-input {
            background: var(--white); border: 1px solid var(--border);
            border-radius: var(--r-sm); padding: 9px 14px 9px 36px;
            width: 220px; color: var(--ink);
            font-family: 'DM Sans', sans-serif; font-size: 13px;
            outline: none; transition: border-color .2s, box-shadow .2s;
            box-shadow: var(--shadow-sm);
        }
        .search-input::placeholder { color: var(--ink-muted); }
        .search-input:focus { border-color: var(--gold-border); box-shadow: 0 0 0 3px var(--gold-pale); }

        .filter-group {
            display: flex; align-items: center;
            background: var(--white); border: 1px solid var(--border);
            border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm);
        }
        .filter-btn {
            display: flex; align-items: center; gap: 6px;
            padding: 8px 13px; font-family: 'DM Sans', sans-serif;
            font-size: 12px; font-weight: 500; color: var(--ink-soft);
            background: transparent; border: none; border-right: 1px solid var(--border);
            cursor: pointer; transition: background .15s, color .15s; white-space: nowrap;
        }
        .filter-btn:last-child { border-right: none; }
        .filter-btn:hover { background: var(--bg); color: var(--ink); }
        .filter-btn.active { background: var(--gold-pale); color: var(--gold); }

        .dept-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px; font-family: 'DM Sans', sans-serif;
            font-size: 11px; font-weight: 500; color: var(--ink-soft);
            background: var(--white); border: 1px solid var(--border);
            border-radius: 99px; cursor: pointer;
            transition: background .15s, color .15s, border-color .15s;
            box-shadow: var(--shadow-sm); white-space: nowrap;
        }
        .dept-btn:hover { background: var(--bg); color: var(--ink); }
        .dept-btn.active { background: var(--gold-pale); border-color: var(--gold-border); color: var(--gold); }

        .sort-btn {
            display: flex; align-items: center; gap: 6px;
            padding: 9px 14px; background: var(--white);
            border: 1px solid var(--border); border-radius: var(--r-sm);
            font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
            color: var(--ink-soft); cursor: pointer; box-shadow: var(--shadow-sm);
            transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
        }
        .sort-btn:hover { background: var(--bg); border-color: var(--border-dark); color: var(--ink); }

        .batch-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px; font-family: 'DM Sans', sans-serif;
            font-size: 11px; font-weight: 500; color: var(--ink-soft);
            background: var(--white); border: 1px solid var(--border);
            border-radius: 99px; cursor: pointer;
            transition: background .15s, color .15s, border-color .15s;
            box-shadow: var(--shadow-sm); white-space: nowrap;
        }
        .batch-btn:hover { background: var(--bg); color: var(--ink); }
        .batch-btn.active { background: var(--gold-pale); border-color: var(--gold-border); color: var(--gold); }

        /* TABLE */
        .table-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md);
        }
        .table-head {
            display: grid; grid-template-columns: 1.4fr 80px 1fr 90px 140px;
            padding: 12px 28px; background: var(--bg-alt);
            border-bottom: 1px solid var(--border); column-gap: 16px;
        }
        .th { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
        .th.right { text-align: right; }
        .th.center { text-align: center; }

        .learner-row {
            display: grid; grid-template-columns: 1.4fr 80px 1fr 90px 140px;
            column-gap: 16px; align-items: center; padding: 15px 24px;
            border-bottom: 1px solid var(--border); transition: background .15s;
            animation: fadeUp .4s ease both;
        }
        .learner-row:last-child { border-bottom: none; }
        .learner-row:hover { background: var(--bg); }

        .learner-info { display: flex; align-items: center; gap: 12px; overflow: hidden; }
        .avatar {
            width: 36px; height: 36px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Fraunces', serif; font-size: 13px; font-weight: 700;
            flex-shrink: 0; border: 2px solid;
        }
        .learner-meta { overflow: hidden; }
        .learner-name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .learner-dept { font-size: 10px; color: var(--ink-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .cell { font-size: 13px; color: var(--ink-soft); }
        .cell.right { text-align: right; }
        .cell.center { text-align: center; }

        .sessions-done {
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
            font-weight: 700; color: var(--ink); font-size: 26px;
            letter-spacing: -0.02em; line-height: 1;
        }
        .progress-cell { padding-right: 8px; padding-left: 4px; }
        .progress-track { height: 6px; background: var(--bg-alt); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
        .progress-fill { height: 100%; border-radius: 99px; transition: width 1.2s cubic-bezier(.16,1,.3,1); }
        .progress-lbl { font-size: 10px; color: var(--ink-muted); margin-top: 4px; }

        .pct-cell {
            text-align: right;
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
            font-size: 24px; font-weight: 700; line-height: 1;
        }
        .pct-cell small { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 400; color: var(--ink-muted); }

        .week-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 99px; font-size: 10px; font-weight: 600; }
        .w0 { background: var(--slate-bg); color: var(--ink-muted); border: 1px solid var(--slate-border); }
        .w1 { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
        .w2 { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
        .w3 { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }

        .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 10px; font-weight: 600; }
        .not-started { background: var(--slate-bg); color: var(--ink-muted); border: 1px solid var(--slate-border); }
        .in-progress { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
        .completed { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
        .not-activated { background: #fff0ee; color: #d64828; border: 1px solid #f5b5a8; }

        .row-num { font-family: 'Fraunces', serif; font-size: 13px; font-weight: 600; color: var(--ink-muted); min-width: 22px; text-align: right; flex-shrink: 0; }

        .batch-pill { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 99px; font-size: 9px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; }
        .batch-1 { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
        .batch-2 { background: var(--violet-bg); color: var(--violet); border: 1px solid var(--violet-border); }

        .empty-state { padding: 56px 24px; text-align: center; color: var(--ink-muted); font-size: 13px; display: none; }
        .card-footer { display: none; }

        /* FOOTER */
        .footer { text-align: center; padding: 20px 56px; font-size: 11px; color: var(--ink-muted); border-top: 1px solid var(--border); background: var(--white); letter-spacing: .05em; }
        .footer strong { color: var(--gold); font-weight: 600; }

        @media (max-width:1140px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .table-head, .learner-row { grid-template-columns: 1.2fr 70px 1fr 80px 130px; column-gap: 10px; }
        }

        @media (max-width:900px) {
            .topbar { padding: 0 16px; height: 48px; }
            .topbar-tag:last-child { display: none; }
            .hero { padding: 24px 16px 20px; }
            .main { padding: 16px 16px 48px; }
            .footer { padding: 14px 16px; font-size: 10px; }
            .hero-inner { flex-direction: column; gap: 16px; }
            .hero-title { font-size: 28px; }
            .hero-meta { flex-wrap: wrap; width: 100%; }
            .meta-chip { padding: 8px 14px; font-size: 11px; flex: 1 1 40%; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .stat-num { font-size: 32px; }
            .stat-card { padding: 16px 16px 14px; }
            .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
            .controls-row { width: 100%; gap: 8px; }
            .search-wrap { width: 100%; }
            .search-input { width: 100%; box-sizing: border-box; }
            .filter-group { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; }
            .filter-btn { flex-shrink: 0; justify-content: center; padding: 10px 12px; font-size: 11px; min-height: 40px; }
            .dept-row, .batch-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
            .dept-btn, .batch-btn { flex-shrink: 0; min-height: 36px; }
            .sort-btn { min-height: 40px; }
            .table-head { display: none; }
            .table-card { background: transparent; border: none; box-shadow: none; }
            .learner-row { display: flex !important; flex-direction: column !important; gap: 0; padding: 0; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; column-gap: 0; transition: box-shadow .2s; }
            .learner-row:active { box-shadow: var(--shadow-md); }
            .learner-row:last-child { border-bottom: 1px solid var(--border); }
            .learner-info { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); width: 100%; }
            .row-num { font-size: 12px; min-width: 18px; }
            .avatar { width: 40px; height: 40px; font-size: 14px; }
            .learner-name { font-size: 14px; }
            .learner-dept { font-size: 11px; margin-top: 3px; }
            .progress-cell { padding: 12px 16px 12px !important; border-bottom: 1px solid var(--border); width: 100%; }
            .sessions-done { font-size: 20px; }
            .pct-cell { display: none !important; }
            .cell.center { display: none !important; }
            .card-footer { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-alt); }
            .card-footer-pct { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif; font-size: 22px; font-weight: 700; }
        }

        @media (max-width:480px) {
            .topbar { padding: 0 14px; height: 46px; }
            .brand-sep, .brand-sub { display: none; }
            .hero { padding: 18px 14px 16px; }
            .hero-pill { font-size: 10px; padding: 4px 10px 4px 8px; margin-bottom: 12px; }
            .hero-title { font-size: 22px; line-height: 1.18; }
            .hero-meta { flex-direction: column; border-radius: var(--r-sm); }
            .meta-chip { flex: 1 1 100%; border-right: none !important; border-bottom: 1px solid var(--border); padding: 9px 14px; }
            .meta-chip:last-child { border-bottom: none; }
            .main { padding: 14px 14px 56px; }
            .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
            .stat-card { padding: 14px 14px 12px; border-radius: var(--r-md); }
            .stat-num { font-size: 26px; }
            .stat-num .unit { font-size: 16px; }
            .stat-icon-wrap { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 10px; }
            .stat-lbl { font-size: 10px; }
            .stat-tag { display: none; }
            .section-title { font-size: 12px; }
            .count-badge { font-size: 10px; }
            .filter-btn { padding: 10px 10px; font-size: 10px; }
            .dept-btn, .batch-btn { font-size: 10px; padding: 6px 10px; }
            .sort-btn { font-size: 11px; padding: 9px 12px; }
            .search-input { font-size: 13px; padding: 10px 14px 10px 34px; }
            .learner-row { border-radius: var(--r-md); margin-bottom: 8px; }
            .learner-info { padding: 12px 14px 10px; }
            .avatar { width: 36px; height: 36px; font-size: 12px; }
            .learner-name { font-size: 13px; }
            .learner-dept { font-size: 10px; }
            .progress-cell { padding: 10px 14px 10px !important; }
            .sessions-done { font-size: 18px; }
            .card-footer { padding: 9px 14px; }
            .card-footer-pct { font-size: 20px; }
            .status-badge { font-size: 9px; padding: 3px 8px; }
            .batch-pill { font-size: 8px; padding: 1px 6px; }
            .footer { font-size: 10px; padding: 12px 14px; }
        }
    </style>
</head>
<body>
    <!-- TOPBAR -->
    <div class="topbar">
        <div class="topbar-brand">
            <div class="brand-dot">🏆</div>
            <span class="brand-name">AI Champions</span>
            <div class="brand-sep"></div>
            <span class="brand-sub">DEWA</span>
        </div>
        <div class="topbar-right">
            <div class="topbar-tag">
                <span class="live-dot"></span>
                <span>Live data</span>
            </div>
        </div>
    </div>

    <!-- HERO -->
    <div class="hero">
        <div class="hero-inner">
            <div class="hero-left">
                <div class="hero-pill">📊 Learning Analytics</div>
                <h1 class="hero-title">AI Champions: <em>Vibe Coder</em> to Agentic Engineer</h1>
                <div class="hero-meta">
                    <div class="meta-chip"><strong>9</strong> enrolled total</div>
                    <div class="meta-chip"><strong>93</strong> sessions total</div>
                    <div class="meta-chip"><strong>3</strong> week program</div>
                    <div class="meta-chip">Avg. <strong id="hero-avg">—</strong>% complete</div>
                    <div class="meta-chip"><strong id="hero-mins">—</strong> min watched total</div>
                </div>
            </div>
        </div>
    </div>

    <!-- STATS -->
    <div class="main">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-accent" style="background: linear-gradient(90deg, #2d6fe8, #9bbaf5);"></div>
                <div class="stat-icon-wrap" style="background: var(--blue-bg); color: var(--blue);">👥</div>
                <div class="stat-num">9</div>
                <div class="stat-lbl">Total Enrolled</div>
                <div class="stat-tag" style="background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border);">5 departments</div>
            </div>

            <div class="stat-card">
                <div class="stat-accent" style="background: linear-gradient(90deg, #c47d0e, #f5cc7a);"></div>
                <div class="stat-icon-wrap" style="background: var(--amber-bg); color: var(--amber);">📈</div>
                <div class="stat-num"><span id="s-avg">—</span><span class="unit">%</span></div>
                <div class="stat-lbl">Average Progress</div>
                <div class="stat-tag" style="background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border);">Across all learners</div>
            </div>

            <div class="stat-card">
                <div class="stat-accent" style="background: linear-gradient(90deg, #c41e8a, #f5a8de);"></div>
                <div class="stat-icon-wrap" style="background: #fef0f9; color: #c41e8a;">⚡</div>
                <div class="stat-num" id="s-prog">—</div>
                <div class="stat-lbl">In Progress</div>
                <div class="stat-tag" style="background: #fef0f9; color: #c41e8a; border: 1px solid #f5a8de;">Actively learning</div>
            </div>

            <div class="stat-card">
                <div class="stat-accent" style="background: linear-gradient(90deg, #0e8c7a, #7fd0c6);"></div>
                <div class="stat-icon-wrap" style="background: var(--teal-bg); color: var(--teal);">⏸</div>
                <div class="stat-num" id="s-notstarted">—</div>
                <div class="stat-lbl">Not Started</div>
                <div class="stat-tag" style="background: var(--teal-bg); color: var(--teal); border: 1px solid var(--teal-border);">0% completed</div>
            </div>
        </div>

        <!-- CONTROLS -->
        <div class="section-head">
            <h2 class="section-title">Learner Progress</h2>
            <span class="count-badge" id="count-badge">9 learners</span>
        </div>

        <div class="controls-row">
            <div class="filter-group">
                <button class="filter-btn active" onclick="setStatus('all', this)">All</button>
                <button class="filter-btn" onclick="setStatus('in-progress', this)">In Progress</button>
                <button class="filter-btn" onclick="setStatus('not-started', this)">Not Started</button>
                <button class="filter-btn" onclick="setStatus('completed', this)">Completed</button>
                <button class="filter-btn" onclick="setStatus('not-activated', this)">Not Activated</button>
            </div>
        </div>

        <div class="dept-row">
            <span class="dept-label">Sort:</span>
            <button class="sort-btn" onclick="toggleSort()"><span id="sort-lbl">High to Low</span></button>
        </div>

        <div class="dept-row">
            <span class="dept-label">Batch:</span>
            <button class="batch-btn active" onclick="setBatch('all', this)">All</button>
            <button class="batch-btn" onclick="setBatch(1, this)">Batch 1 — before Apr 1</button>
            <button class="batch-btn" onclick="setBatch(2, this)">Batch 2 — Apr 1 onwards</button>
        </div>

        <div class="dept-row">
            <span class="dept-label">Dept:</span>
            <button class="dept-btn active" onclick="setDept('all', this)">All departments</button>
            <button class="dept-btn" onclick="setDept('POWER & WATER PLANNING', this)">Power & Water</button>
            <button class="dept-btn" onclick="setDept('BS&HR', this)">BS&HR</button>
            <button class="dept-btn" onclick="setDept('Transmission Power', this)">Transmission Power</button>
            <button class="dept-btn" onclick="setDept('Generation', this)">Generation</button>
            <button class="dept-btn" onclick="setDept('Business Dev & Excellence', this)">Biz Dev</button>
            <button class="dept-btn" onclick="setDept('Internal Audit', this)">Internal Audit</button>
        </div>

        <div style="margin-bottom: 14px;">
            <div class="search-wrap">
                <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <input type="text" id="search-input" class="search-input" placeholder="Search learner...">
            </div>
        </div>

        <!-- TABLE -->
        <div class="table-card">
            <div class="table-head">
                <div class="th">Learner</div>
                <div class="th center">Batch</div>
                <div class="th">Progress</div>
                <div class="th right">Done</div>
                <div class="th center">Status</div>
            </div>
            <div id="learner-list"></div>
        </div>

        <div id="empty-state" class="empty-state">
            No learners match your filter.
        </div>
    </div>

    <!-- FOOTER -->
    <div class="footer">
        <strong>AI Champions: Vibe Coder to Agentic Engineer</strong> · DEWA Cohort · Mar 18 – Apr 9, 2026 · 93 Sessions · 3 Weeks
    </div>

    <script>
        (function () {
            var TOTAL = 93;
            var PALS = [
                { bg: '#eff4fd', bd: '#9bbaf5', tx: '#2d6fe8' },
                { bg: '#fdf3e1', bd: '#e8c97a', tx: '#b8822a' },
                { bg: '#edfaf4', bd: '#a3dfc3', tx: '#16a362' },
                { bg: '#f5f0ff', bd: '#c4a8f5', tx: '#7c3aed' },
                { bg: '#fff0ee', bd: '#f5b5a8', tx: '#d64828' },
                { bg: '#e8f8f6', bd: '#7fd0c6', tx: '#0e8c7a' },
                { bg: '#fef0f9', bd: '#f5a8de', tx: '#c41e8a' },
            ];

            var RAW = [
                { name: 'Sultan Alzaabi',                        pct: 16,  mins: 149.75, grp: 'POWER & WATER PLANNING',    started: 'Apr 7' },
                { name: 'Sahaya Vinoth',                         pct: 0,   mins: 0,      grp: 'BS&HR',                     started: null    },
                { name: 'Mohd Abu Atiyeh',                       pct: 10,  mins: 93.5,   grp: 'BS&HR',                     started: 'Apr 8' },
                { name: 'Saif Bin Haider',                       pct: 2,   mins: 15.0,   grp: 'Transmission Power',        started: 'Apr 9' },
                { name: 'Aisha Mubarak',                         pct: 0,   mins: 2.5,    grp: 'Transmission Power',        started: 'Apr 9' },
                { name: 'Ahmad AlSuwaidi',                       pct: 2,   mins: 30.25,  grp: 'Generation',                started: 'Apr 8' },
                { name: 'Jayakumar Vandavasi Karunamurthy',      pct: 25,  mins: 125.0,  grp: 'Business Dev & Excellence', started: 'Apr 9' },
                { name: 'Mahmoud Tarek Rezk',                    pct: 0,   mins: 0,      grp: 'Business Dev & Excellence', started: null    },
                { name: 'Saeed M Alkamali',                      pct: 0,   mins: 0,      grp: 'Internal Audit',            started: null    },
            ];

            var DATA = [];
            for (var i = 0; i < RAW.length; i++) {
                var r = RAW[i];
                var done = Math.round(r.pct / 100 * TOTAL);
                var status = (!r.started && r.pct === 0) ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';
                var week = done === 0 ? 0 : done <= 31 ? 1 : done <= 62 ? 2 : 3;
                var parts = r.name.split(' ');
                var init = ((parts[0] || '')[0] || '') + ((parts[1] || '')[0] || '');
                var batch = (!r.started || r.started.indexOf('Apr') > -1) ? 2 : 1;
                DATA.push({
                    name: r.name,
                    pct: r.pct,
                    done: done,
                    remaining: TOTAL - done,
                    mins: r.mins,
                    grp: r.grp,
                    status: status,
                    week: week,
                    initials: init.toUpperCase(),
                    pal: PALS[i % PALS.length],
                    started: r.started || null,
                    batch: batch
                });
            }

            /* STATS */
            var totalPct = 0, inProg = 0, notStarted = 0, totalMins = 0;
            for (var j = 0; j < DATA.length; j++) {
                totalPct += DATA[j].pct;
                totalMins += DATA[j].mins;
                if (DATA[j].status === 'in-progress') inProg++;
                if (DATA[j].status === 'not-started') notStarted++;
            }
            var avg = Math.round(totalPct / DATA.length);
            document.getElementById('s-avg').textContent = avg;
            document.getElementById('hero-avg').textContent = avg;
            document.getElementById('s-prog').textContent = inProg;
            document.getElementById('s-notstarted').textContent = notStarted;

            var totalMinsRounded = Math.round(totalMins);
            var minsDisplay = totalMinsRounded >= 60
                ? (totalMinsRounded / 60).toFixed(1) + ' hr'
                : totalMinsRounded + ' min';
            document.getElementById('hero-mins').textContent = minsDisplay;

            /* STATE */
            var activeStatus = 'all';
            var activeDept = 'all';
            var activeBatch = 'all';
            var sortAsc = false;
            var searchQuery = '';

            /* HELPERS */
            function statusIcon(s) {
                if (s === 'completed') return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>';
                if (s === 'in-progress') return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>';
                if (s === 'not-activated') return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>';
                return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>';
            }

            function statusLabel(s) {
                if (s === 'completed') return 'Completed';
                if (s === 'in-progress') return 'In Progress';
                if (s === 'not-activated') return 'Not Activated';
                return 'Not Started';
            }

            function barColor(pct) {
                if (pct >= 100) return 'linear-gradient(90deg,#16a362,#3fcf8e)';
                if (pct >= 66) return 'linear-gradient(90deg,#b8822a,#e6a93a)';
                if (pct >= 33) return 'linear-gradient(90deg,#2d6fe8,#6a9ff5)';
                if (pct > 0) return 'linear-gradient(90deg,#9aa3b8,#c0cad9)';
                return 'transparent';
            }

            function pctColor(pct) {
                if (pct >= 100) return '#16a362';
                if (pct >= 66) return '#b8822a';
                if (pct >= 33) return '#2d6fe8';
                if (pct > 0) return '#9aa3b8';
                return '#c0cad9';
            }

            function deptShort(g) {
                if (g === 'POWER & WATER PLANNING') return 'Power & Water';
                if (g === 'BS&HR') return 'BS&HR';
                if (g === 'Transmission Power') return 'Transmission Power';
                if (g === 'Generation') return 'Generation';
                if (g === 'Business Dev & Excellence') return 'Biz Dev & Excellence';
                if (g === 'Internal Audit') return 'Internal Audit';
                return g;
            }

            /* RENDER */
            function render() {
                var rows = [];
                for (var i = 0; i < DATA.length; i++) {
                    var l = DATA[i];
                    var statusOk = activeStatus === 'all' || l.status === activeStatus;
                    var deptOk = activeDept === 'all' || l.grp === activeDept;
                    var batchOk = activeBatch === 'all' || l.batch === activeBatch;
                    var searchOk = l.name.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
                    if (statusOk && deptOk && batchOk && searchOk) rows.push(l);
                }

                rows.sort(function(a, b) {
                    return sortAsc ? a.done - b.done : b.done - a.done;
                });

                var list = document.getElementById('learner-list');
                var empty = document.getElementById('empty-state');
                var badge = document.getElementById('count-badge');
                badge.textContent = rows.length + (rows.length !== 1 ? ' learners' : ' learner');

                if (rows.length === 0) {
                    list.innerHTML = '';
                    empty.style.display = 'block';
                    return;
                }

                empty.style.display = 'none';

                var html = '';
                for (var i = 0; i < rows.length; i++) {
                    var l = rows[i];
                    var delay = (i * 0.03).toFixed(2) + 's';
                    var minsStr = l.mins < 60 ? Math.round(l.mins) + ' min' : (l.mins / 60).toFixed(1) + ' hr';

                    html += '<div class="learner-row" style="animation-delay:' + delay + '">';
                    html += '<div class="learner-info">';
                    html += '<span class="row-num">' + (i + 1) + '</span>';
                    html += '<div class="avatar" style="background:' + l.pal.bg + ';border-color:' + l.pal.bd + ';color:' + l.pal.tx + '">' + l.initials + '</div>';
                    html += '<div class="learner-meta">';
                    html += '<div class="learner-name">' + l.name + '</div>';
                    html += '<div class="learner-dept">' + deptShort(l.grp) + (l.started ? ' · Started ' + l.started : '') + '</div>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="cell center" style="display:flex;align-items:center;justify-content:flex-start;padding-left:4px;">';
                    html += '<span class="batch-pill batch-' + l.batch + '">Batch ' + l.batch + '</span>';
                    html += '</div>';
                    html += '<div class="cell progress-cell">';
                    html += '<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">';
                    html += '<span class="sessions-done">' + l.done + '</span>';
                    html += '<span style="font-size:11px;color:var(--ink-muted)">of ' + TOTAL + ' sessions · ' + minsStr + ' watched</span>';
                    html += '</div>';
                    html += '<div class="progress-track"><div class="progress-fill" id="pf' + i + '" style="width:0%;background:' + barColor(l.pct) + '"></div></div>';
                    html += '</div>';
                    html += '<div class="pct-cell" style="color:' + pctColor(l.pct) + '">' + l.pct + '<small>%</small></div>';
                    html += '<div class="cell center"><span class="status-badge ' + l.status + '">' + statusIcon(l.status) + statusLabel(l.status) + '</span></div>';
                    html += '<div class="card-footer">';
                    html += '<div style="display:flex;align-items:center;gap:8px;">';
                    html += '<span class="card-footer-pct" style="color:' + pctColor(l.pct) + '">' + l.pct + '%</span>';
                    html += '<span class="batch-pill batch-' + l.batch + '">Batch ' + l.batch + '</span>';
                    html += '</div>';
                    html += '<span class="status-badge ' + l.status + '">' + statusIcon(l.status) + statusLabel(l.status) + '</span>';
                    html += '</div>';
                    html += '</div>';
                }

                list.innerHTML = html;

                var captured = rows;
                setTimeout(function() {
                    for (var j = 0; j < captured.length; j++) {
                        var el = document.getElementById('pf' + j);
                        if (el) el.style.width = captured[j].pct + '%';
                    }
                }, 100);
            }

            /* HANDLERS */
            window.setStatus = function(s, btn) {
                activeStatus = s;
                var btns = document.querySelectorAll('.filter-btn');
                for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
                btn.classList.add('active');
                render();
            };

            window.setDept = function(d, btn) {
                activeDept = d;
                var btns = document.querySelectorAll('.dept-btn');
                for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
                btn.classList.add('active');
                render();
            };

            window.setBatch = function(b, btn) {
                activeBatch = b;
                var btns = document.querySelectorAll('.batch-btn');
                for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
                btn.classList.add('active');
                render();
            };

            window.toggleSort = function() {
                sortAsc = !sortAsc;
                document.getElementById('sort-lbl').textContent = sortAsc ? 'Low to High' : 'High to Low';
                render();
            };

            document.getElementById('search-input').addEventListener('input', function(e) {
                searchQuery = e.target.value;
                render();
            });

            render();
        })();
    </script>
</body>
</html>


File created successfully at: /Users/khalidbinkalban/ai-champions-dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Champions — DEWA Utilization Dashboard</title>
    <style>
        .num {
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', 'Book Antiqua', Palatino, serif !important;
            font-variant-numeric: tabular-nums;
        }

        :root {
            --white: #ffffff;
            --bg: #f4f6fb;
            --bg-alt: #eef1f8;
            --surface: #ffffff;
            --gold: #b8822a;
            --gold-light: #e6a93a;
            --gold-pale: #fdf3e1;
            --gold-border: #e8c97a;
            --ink: #141926;
            --ink-mid: #3d4a63;
            --ink-soft: #6b7a99;
            --ink-muted: #9aa3b8;
            --border: #e2e6f0;
            --border-dark: #cdd2e0;
            --shadow-sm: 0 1px 3px rgba(20,25,38,0.07), 0 1px 2px rgba(20,25,38,0.04);
            --shadow-md: 0 4px 16px rgba(20,25,38,0.09), 0 2px 4px rgba(20,25,38,0.05);
            --shadow-lg: 0 14px 36px rgba(20,25,38,0.12), 0 4px 8px rgba(20,25,38,0.06);
            --green: #16a362;
            --green-bg: #edfaf4;
            --green-border: #a3dfc3;
            --blue: #2d6fe8;
            --blue-bg: #eff4fd;
            --blue-border: #9bbaf5;
            --amber: #c47d0e;
            --amber-bg: #fff8ec;
            --amber-border: #f5cc7a;
            --slate-bg: #f2f4f8;
            --slate-border: #d0d5e2;
            --violet: #6d3fd6;
            --violet-bg: #f3effe;
            --violet-border: #c4a8f5;
            --teal: #0e8c7a;
            --teal-bg: #e8f8f6;
            --teal-border: #7fd0c6;
            --r-sm: 6px;
            --r-md: 12px;
            --r-lg: 18px;
            --r-xl: 24px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html { scroll-behavior: smooth; }

        body {
            background: var(--bg);
            color: var(--ink);
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(14px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .45; transform: scale(.75); }
        }

        /* TOPBAR */
        .topbar {
            background: var(--white);
            border-bottom: 1px solid var(--border);
            padding: 0 56px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-sm);
            animation: slideDown .4s ease both;
        }
        .topbar-brand { display: flex; align-items: center; gap: 10px; }
        .brand-dot {
            width: 28px; height: 28px;
            background: var(--gold);
            border-radius: 7px;
            display: flex; align-items: center; justify-content: center;
        }
        .brand-name { font-size: 13px; font-weight: 600; color: var(--ink); }
        .brand-sep { width: 1px; height: 18px; background: var(--border-dark); margin: 0 4px; }
        .brand-sub { font-size: 12px; color: var(--ink-soft); }
        .topbar-right { display: flex; align-items: center; gap: 20px; }
        .topbar-tag { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); }
        .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }

        /* HERO */
        .hero {
            background: var(--white);
            border-bottom: 1px solid var(--border);
            padding: 44px 56px 40px;
            position: relative;
            overflow: hidden;
            animation: fadeIn .5s ease both;
        }
        .hero-inner {
            position: relative; z-index: 1;
            display: flex; align-items: flex-start; justify-content: space-between; gap: 48px;
        }
        .hero-left { flex: 1; }
        .hero-pill {
            display: inline-flex; align-items: center; gap: 7px;
            background: var(--gold-pale); border: 1px solid var(--gold-border);
            border-radius: 99px; padding: 5px 13px 5px 9px;
            font-size: 11px; font-weight: 600; color: var(--gold);
            letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px;
        }
        .hero-title {
            font-family: 'Fraunces', serif;
            font-size: 38px; font-weight: 700; line-height: 1.12;
            color: var(--ink); letter-spacing: -.02em; max-width: 520px;
        }
        .hero-title em { font-style: italic; font-weight: 300; color: var(--gold); }
        .hero-meta {
            display: flex; margin-top: 22px;
            border: 1px solid var(--border); border-radius: var(--r-md);
            overflow: hidden; width: fit-content; background: #f9fafc;
        }
        .meta-chip {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 20px; font-size: 12px; color: var(--ink-mid);
            border-right: 1px solid var(--border);
        }
        .meta-chip:last-child { border-right: none; }
        .meta-chip strong { color: var(--ink); font-weight: 600; }

        /* MAIN */
        .main { padding: 32px 56px 56px; }

        /* STAT CARDS */
        .stats-grid {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 16px; margin-bottom: 28px;
        }
        .stat-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--r-lg); padding: 22px 22px 20px;
            position: relative; overflow: hidden;
            box-shadow: var(--shadow-sm); animation: fadeUp .5s ease both;
            transition: box-shadow .25s ease, border-color .25s ease;
        }
        .stat-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-dark); }
        .stat-accent {
            position: absolute; top: 0; left: 0; right: 0; height: 3px;
            border-radius: var(--r-lg) var(--r-lg) 0 0;
        }
        .stat-icon-wrap {
            width: 40px; height: 40px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
        }
        .stat-num {
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
            font-size: 42px; font-weight: 700; line-height: 1;
            letter-spacing: -.02em; color: var(--ink);
        }
        .stat-num .unit { font-size: 24px; font-weight: 300; color: var(--gold); }
        .stat-lbl {
            font-size: 11px; font-weight: 500; color: var(--ink-muted);
            letter-spacing: .07em; text-transform: uppercase; margin-top: 6px;
        }
        .stat-tag {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 11px; font-weight: 500; margin-top: 10px;
            padding: 3px 8px; border-radius: 99px;
        }

        /* SECTION / CONTROLS */
        .section-head {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 10px; gap: 16px; flex-wrap: wrap;
        }
        .section-title { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
        .count-badge {
            background: var(--bg-alt); border: 1px solid var(--border);
            border-radius: 99px; padding: 2px 10px;
            font-size: 11px; font-weight: 500; color: var(--ink-soft);
        }
        .controls-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .dept-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
        .dept-label { font-size: 11px; font-weight: 500; color: var(--ink-muted); letter-spacing: .06em; text-transform: uppercase; }

        .search-wrap { position: relative; }
        .search-icon {
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
            color: var(--ink-muted); pointer-events: none;
        }
        .search-input {
            background: var(--white); border: 1px solid var(--border);
            border-radius: var(--r-sm); padding: 9px 14px 9px 36px;
            width: 220px; color: var(--ink);
            font-family: 'DM Sans', sans-serif; font-size: 13px;
            outline: none; transition: border-color .2s, box-shadow .2s;
            box-shadow: var(--shadow-sm);
        }
        .search-input::placeholder { color: var(--ink-muted); }
        .search-input:focus { border-color: var(--gold-border); box-shadow: 0 0 0 3px var(--gold-pale); }

        .filter-group {
            display: flex; align-items: center;
            background: var(--white); border: 1px solid var(--border);
            border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm);
        }
        .filter-btn {
            display: flex; align-items: center; gap: 6px;
            padding: 8px 13px; font-family: 'DM Sans', sans-serif;
            font-size: 12px; font-weight: 500; color: var(--ink-soft);
            background: transparent; border: none; border-right: 1px solid var(--border);
            cursor: pointer; transition: background .15s, color .15s; white-space: nowrap;
        }
        .filter-btn:last-child { border-right: none; }
        .filter-btn:hover { background: var(--bg); color: var(--ink); }
        .filter-btn.active { background: var(--gold-pale); color: var(--gold); }

        .dept-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px; font-family: 'DM Sans', sans-serif;
            font-size: 11px; font-weight: 500; color: var(--ink-soft);
            background: var(--white); border: 1px solid var(--border);
            border-radius: 99px; cursor: pointer;
            transition: background .15s, color .15s, border-color .15s;
            box-shadow: var(--shadow-sm); white-space: nowrap;
        }
        .dept-btn:hover { background: var(--bg); color: var(--ink); }
        .dept-btn.active { background: var(--gold-pale); border-color: var(--gold-border); color: var(--gold); }

        .sort-btn {
            display: flex; align-items: center; gap: 6px;
            padding: 9px 14px; background: var(--white);
            border: 1px solid var(--border); border-radius: var(--r-sm);
            font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
            color: var(--ink-soft); cursor: pointer; box-shadow: var(--shadow-sm);
            transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
        }
        .sort-btn:hover { background: var(--bg); border-color: var(--border-dark); color: var(--ink); }

        .batch-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px; font-family: 'DM Sans', sans-serif;
            font-size: 11px; font-weight: 500; color: var(--ink-soft);
            background: var(--white); border: 1px solid var(--border);
            border-radius: 99px; cursor: pointer;
            transition: background .15s, color .15s, border-color .15s;
            box-shadow: var(--shadow-sm); white-space: nowrap;
        }
        .batch-btn:hover { background: var(--bg); color: var(--ink); }
        .batch-btn.active { background: var(--gold-pale); border-color: var(--gold-border); color: var(--gold); }

        /* TABLE */
        .table-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md);
        }
        .table-head {
            display: grid; grid-template-columns: 1.4fr 80px 1fr 90px 140px;
            padding: 12px 28px; background: var(--bg-alt);
            border-bottom: 1px solid var(--border); column-gap: 16px;
        }
        .th { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
        .th.right { text-align: right; }
        .th.center { text-align: center; }

        .learner-row {
            display: grid; grid-template-columns: 1.4fr 80px 1fr 90px 140px;
            column-gap: 16px; align-items: center; padding: 15px 24px;
            border-bottom: 1px solid var(--border); transition: background .15s;
            animation: fadeUp .4s ease both;
        }
        .learner-row:last-child { border-bottom: none; }
        .learner-row:hover { background: var(--bg); }

        .learner-info { display: flex; align-items: center; gap: 12px; overflow: hidden; }
        .avatar {
            width: 36px; height: 36px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Fraunces', serif; font-size: 13px; font-weight: 700;
            flex-shrink: 0; border: 2px solid;
        }
        .learner-meta { overflow: hidden; }
        .learner-name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .learner-dept { font-size: 10px; color: var(--ink-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .cell { font-size: 13px; color: var(--ink-soft); }
        .cell.right { text-align: right; }
        .cell.center { text-align: center; }

        .sessions-done {
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
            font-weight: 700; color: var(--ink); font-size: 26px;
            letter-spacing: -0.02em; line-height: 1;
        }
        .progress-cell { padding-right: 8px; padding-left: 4px; }
        .progress-track { height: 6px; background: var(--bg-alt); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
        .progress-fill { height: 100%; border-radius: 99px; transition: width 1.2s cubic-bezier(.16,1,.3,1); }
        .progress-lbl { font-size: 10px; color: var(--ink-muted); margin-top: 4px; }

        .pct-cell {
            text-align: right;
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
            font-size: 24px; font-weight: 700; line-height: 1;
        }
        .pct-cell small { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 400; color: var(--ink-muted); }

        .week-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 99px; font-size: 10px; font-weight: 600; }
        .w0 { background: var(--slate-bg); color: var(--ink-muted); border: 1px solid var(--slate-border); }
        .w1 { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
        .w2 { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
        .w3 { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }

        .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 10px; font-weight: 600; }
        .not-started { background: var(--slate-bg); color: var(--ink-muted); border: 1px solid var(--slate-border); }
        .in-progress { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
        .completed { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
        .not-activated { background: #fff0ee; color: #d64828; border: 1px solid #f5b5a8; }

        .row-num { font-family: 'Fraunces', serif; font-size: 13px; font-weight: 600; color: var(--ink-muted); min-width: 22px; text-align: right; flex-shrink: 0; }

        .batch-pill { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 99px; font-size: 9px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; }
        .batch-1 { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
        .batch-2 { background: var(--violet-bg); color: var(--violet); border: 1px solid var(--violet-border); }

        .empty-state { padding: 56px 24px; text-align: center; color: var(--ink-muted); font-size: 13px; display: none; }
        .card-footer { display: none; }

        /* FOOTER */
        .footer { text-align: center; padding: 20px 56px; font-size: 11px; color: var(--ink-muted); border-top: 1px solid var(--border); background: var(--white); letter-spacing: .05em; }
        .footer strong { color: var(--gold); font-weight: 600; }

        @media (max-width:1140px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .table-head, .learner-row { grid-template-columns: 1.2fr 70px 1fr 80px 130px; column-gap: 10px; }
        }

        @media (max-width:900px) {
            .topbar { padding: 0 16px; height: 48px; }
            .topbar-tag:last-child { display: none; }
            .hero { padding: 24px 16px 20px; }
            .main { padding: 16px 16px 48px; }
            .footer { padding: 14px 16px; font-size: 10px; }
            .hero-inner { flex-direction: column; gap: 16px; }
            .hero-title { font-size: 28px; }
            .hero-meta { flex-wrap: wrap; width: 100%; }
            .meta-chip { padding: 8px 14px; font-size: 11px; flex: 1 1 40%; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .stat-num { font-size: 32px; }
            .stat-card { padding: 16px 16px 14px; }
            .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
            .controls-row { width: 100%; gap: 8px; }
            .search-wrap { width: 100%; }
            .search-input { width: 100%; box-sizing: border-box; }
            .filter-group { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; }
            .filter-btn { flex-shrink: 0; justify-content: center; padding: 10px 12px; font-size: 11px; min-height: 40px; }
            .dept-row, .batch-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
            .dept-btn, .batch-btn { flex-shrink: 0; min-height: 36px; }
            .sort-btn { min-height: 40px; }
            .table-head { display: none; }
            .table-card { background: transparent; border: none; box-shadow: none; }
            .learner-row { display: flex !important; flex-direction: column !important; gap: 0; padding: 0; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; column-gap: 0; transition: box-shadow .2s; }
            .learner-row:active { box-shadow: var(--shadow-md); }
            .learner-row:last-child { border-bottom: 1px solid var(--border); }
            .learner-info { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); width: 100%; }
            .row-num { font-size: 12px; min-width: 18px; }
            .avatar { width: 40px; height: 40px; font-size: 14px; }
            .learner-name { font-size: 14px; }
            .learner-dept { font-size: 11px; margin-top: 3px; }
            .progress-cell { padding: 12px 16px 12px !important; border-bottom: 1px solid var(--border); width: 100%; }
            .sessions-done { font-size: 20px; }
            .pct-cell { display: none !important; }
            .cell.center { display: none !important; }
            .card-footer { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-alt); }
            .card-footer-pct { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif; font-size: 22px; font-weight: 700; }
        }

        @media (max-width:480px) {
            .topbar { padding: 0 14px; height: 46px; }
            .brand-sep, .brand-sub { display: none; }
            .hero { padding: 18px 14px 16px; }
            .hero-pill { font-size: 10px; padding: 4px 10px 4px 8px; margin-bottom: 12px; }
            .hero-title { font-size: 22px; line-height: 1.18; }
            .hero-meta { flex-direction: column; border-radius: var(--r-sm); }
            .meta-chip { flex: 1 1 100%; border-right: none !important; border-bottom: 1px solid var(--border); padding: 9px 14px; }
            .meta-chip:last-child { border-bottom: none; }
            .main { padding: 14px 14px 56px; }
            .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
            .stat-card { padding: 14px 14px 12px; border-radius: var(--r-md); }
            .stat-num { font-size: 26px; }
            .stat-num .unit { font-size: 16px; }
            .stat-icon-wrap { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 10px; }
            .stat-lbl { font-size: 10px; }
            .stat-tag { display: none; }
            .section-title { font-size: 12px; }
            .count-badge { font-size: 10px; }
            .filter-btn { padding: 10px 10px; font-size: 10px; }
            .dept-btn, .batch-btn { font-size: 10px; padding: 6px 10px; }
            .sort-btn { font-size: 11px; padding: 9px 12px; }
            .search-input { font-size: 13px; padding: 10px 14px 10px 34px; }
            .learner-row { border-radius: var(--r-md); margin-bottom: 8px; }
            .learner-info { padding: 12px 14px 10px; }
            .avatar { width: 36px; height: 36px; font-size: 12px; }
            .learner-name { font-size: 13px; }
            .learner-dept { font-size: 10px; }
            .progress-cell { padding: 10px 14px 10px !important; }
            .sessions-done { font-size: 18px; }
            .card-footer { padding: 9px 14px; }
            .card-footer-pct { font-size: 20px; }
            .status-badge { font-size: 9px; padding: 3px 8px; }
            .batch-pill { font-size: 8px; padding: 1px 6px; }
            .footer { font-size: 10px; padding: 12px 14px; }
        }
    </style>
</head>
<body>
    <!-- TOPBAR -->
    <div class="topbar">
        <div class="topbar-brand">
            <div class="brand-dot">🏆</div>
            <span class="brand-name">AI Champions</span>
            <div class="brand-sep"></div>
            <span class="brand-sub">DEWA</span>
        </div>
        <div class="topbar-right">
            <div class="topbar-tag">
                <span class="live-dot"></span>
                <span>Live data</span>
            </div>
        </div>
    </div>

    <!-- HERO -->
    <div class="hero">
        <div class="hero-inner">
            <div class="hero-left">
                <div class="hero-pill">📊 Learning Analytics</div>
                <h1 class="hero-title">AI Champions: <em>Vibe Coder</em> to Agentic Engineer</h1>
                <div class="hero-meta">
                    <div class="meta-chip"><strong>9</strong> enrolled total</div>
                    <div class="meta-chip"><strong>93</strong> sessions total</div>
                    <div class="meta-chip"><strong>3</strong> week program</div>
                    <div class="meta-chip">Avg. <strong id="hero-avg">—</strong>% complete</div>
                    <div class="meta-chip"><strong id="hero-mins">—</strong> min watched total</div>
                </div>
            </div>
        </div>
    </div>

    <!-- STATS -->
    <div class="main">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-accent" style="background: linear-gradient(90deg, #2d6fe8, #9bbaf5);"></div>
                <div class="stat-icon-wrap" style="background: var(--blue-bg); color: var(--blue);">👥</div>
                <div class="stat-num">9</div>
                <div class="stat-lbl">Total Enrolled</div>
                <div class="stat-tag" style="background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border);">5 departments</div>
            </div>

            <div class="stat-card">
                <div class="stat-accent" style="background: linear-gradient(90deg, #c47d0e, #f5cc7a);"></div>
                <div class="stat-icon-wrap" style="background: var(--amber-bg); color: var(--amber);">📈</div>
                <div class="stat-num"><span id="s-avg">—</span><span class="unit">%</span></div>
                <div class="stat-lbl">Average Progress</div>
                <div class="stat-tag" style="background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border);">Across all learners</div>
            </div>

            <div class="stat-card">
                <div class="stat-accent" style="background: linear-gradient(90deg, #c41e8a, #f5a8de);"></div>
                <div class="stat-icon-wrap" style="background: #fef0f9; color: #c41e8a;">⚡</div>
                <div class="stat-num" id="s-prog">—</div>
                <div class="stat-lbl">In Progress</div>
                <div class="stat-tag" style="background: #fef0f9; color: #c41e8a; border: 1px solid #f5a8de;">Actively learning</div>
            </div>

            <div class="stat-card">
                <div class="stat-accent" style="background: linear-gradient(90deg, #0e8c7a, #7fd0c6);"></div>
                <div class="stat-icon-wrap" style="background: var(--teal-bg); color: var(--teal);">⏸</div>
                <div class="stat-num" id="s-notstarted">—</div>
                <div class="stat-lbl">Not Started</div>
                <div class="stat-tag" style="background: var(--teal-bg); color: var(--teal); border: 1px solid var(--teal-border);">0% completed</div>
            </div>
        </div>

        <!-- CONTROLS -->
        <div class="section-head">
            <h2 class="section-title">Learner Progress</h2>
            <span class="count-badge" id="count-badge">9 learners</span>
        </div>

        <div class="controls-row">
            <div class="filter-group">
                <button class="filter-btn active" onclick="setStatus('all', this)">All</button>
                <button class="filter-btn" onclick="setStatus('in-progress', this)">In Progress</button>
                <button class="filter-btn" onclick="setStatus('not-started', this)">Not Started</button>
                <button class="filter-btn" onclick="setStatus('completed', this)">Completed</button>
                <button class="filter-btn" onclick="setStatus('not-activated', this)">Not Activated</button>
            </div>
        </div>

        <div class="dept-row">
            <span class="dept-label">Sort:</span>
            <button class="sort-btn" onclick="toggleSort()"><span id="sort-lbl">High to Low</span></button>
        </div>

        <div class="dept-row">
            <span class="dept-label">Batch:</span>
            <button class="batch-btn active" onclick="setBatch('all', this)">All</button>
            <button class="batch-btn" onclick="setBatch(1, this)">Batch 1 — before Apr 1</button>
            <button class="batch-btn" onclick="setBatch(2, this)">Batch 2 — Apr 1 onwards</button>
        </div>

        <div class="dept-row">
            <span class="dept-label">Dept:</span>
            <button class="dept-btn active" onclick="setDept('all', this)">All departments</button>
            <button class="dept-btn" onclick="setDept('POWER & WATER PLANNING', this)">Power & Water</button>
            <button class="dept-btn" onclick="setDept('BS&HR', this)">BS&HR</button>
            <button class="dept-btn" onclick="setDept('Transmission Power', this)">Transmission Power</button>
            <button class="dept-btn" onclick="setDept('Generation', this)">Generation</button>
            <button class="dept-btn" onclick="setDept('Business Dev & Excellence', this)">Biz Dev</button>
            <button class="dept-btn" onclick="setDept('Internal Audit', this)">Internal Audit</button>
        </div>

        <div style="margin-bottom: 14px;">
            <div class="search-wrap">
                <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <input type="text" id="search-input" class="search-input" placeholder="Search learner...">
            </div>
        </div>

        <!-- TABLE -->
        <div class="table-card">
            <div class="table-head">
                <div class="th">Learner</div>
                <div class="th center">Batch</div>
                <div class="th">Progress</div>
                <div class="th right">Done</div>
                <div class="th center">Status</div>
            </div>
            <div id="learner-list"></div>
        </div>

        <div id="empty-state" class="empty-state">
            No learners match your filter.
        </div>
    </div>

    <!-- FOOTER -->
    <div class="footer">
        <strong>AI Champions: Vibe Coder to Agentic Engineer</strong> · DEWA Cohort · Mar 18 – Apr 9, 2026 · 93 Sessions · 3 Weeks
    </div>

    <script>
        (function () {
            var TOTAL = 93;
            var PALS = [
                { bg: '#eff4fd', bd: '#9bbaf5', tx: '#2d6fe8' },
                { bg: '#fdf3e1', bd: '#e8c97a', tx: '#b8822a' },
                { bg: '#edfaf4', bd: '#a3dfc3', tx: '#16a362' },
                { bg: '#f5f0ff', bd: '#c4a8f5', tx: '#7c3aed' },
                { bg: '#fff0ee', bd: '#f5b5a8', tx: '#d64828' },
                { bg: '#e8f8f6', bd: '#7fd0c6', tx: '#0e8c7a' },
                { bg: '#fef0f9', bd: '#f5a8de', tx: '#c41e8a' },
            ];

            var RAW = [
                { name: 'Sultan Alzaabi',                        pct: 16,  mins: 149.75, grp: 'POWER & WATER PLANNING',    started: 'Apr 7' },
                { name: 'Sahaya Vinoth',                         pct: 0,   mins: 0,      grp: 'BS&HR',                     started: null    },
                { name: 'Mohd Abu Atiyeh',                       pct: 10,  mins: 93.5,   grp: 'BS&HR',                     started: 'Apr 8' },
                { name: 'Saif Bin Haider',                       pct: 2,   mins: 15.0,   grp: 'Transmission Power',        started: 'Apr 9' },
                { name: 'Aisha Mubarak',                         pct: 0,   mins: 2.5,    grp: 'Transmission Power',        started: 'Apr 9' },
                { name: 'Ahmad AlSuwaidi',                       pct: 2,   mins: 30.25,  grp: 'Generation',                started: 'Apr 8' },
                { name: 'Jayakumar Vandavasi Karunamurthy',      pct: 25,  mins: 125.0,  grp: 'Business Dev & Excellence', started: 'Apr 9' },
                { name: 'Mahmoud Tarek Rezk',                    pct: 0,   mins: 0,      grp: 'Business Dev & Excellence', started: null    },
                { name: 'Saeed M Alkamali',                      pct: 0,   mins: 0,      grp: 'Internal Audit',            started: null    },
            ];

            var DATA = [];
            for (var i = 0; i < RAW.length; i++) {
                var r = RAW[i];
                var done = Math.round(r.pct / 100 * TOTAL);
                var status = (!r.started && r.pct === 0) ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';
                var week = done === 0 ? 0 : done <= 31 ? 1 : done <= 62 ? 2 : 3;
                var parts = r.name.split(' ');
                var init = ((parts[0] || '')[0] || '') + ((parts[1] || '')[0] || '');
                var batch = (!r.started || r.started.indexOf('Apr') > -1) ? 2 : 1;
                DATA.push({
                    name: r.name,
                    pct: r.pct,
                    done: done,
                    remaining: TOTAL - done,
                    mins: r.mins,
                    grp: r.grp,
                    status: status,
                    week: week,
                    initials: init.toUpperCase(),
                    pal: PALS[i % PALS.length],
                    started: r.started || null,
                    batch: batch
                });
            }

            /* STATS */
            var totalPct = 0, inProg = 0, notStarted = 0, totalMins = 0;
            for (var j = 0; j < DATA.length; j++) {
                totalPct += DATA[j].pct;
                totalMins += DATA[j].mins;
                if (DATA[j].status === 'in-progress') inProg++;
                if (DATA[j].status === 'not-started') notStarted++;
            }
            var avg = Math.round(totalPct / DATA.length);
            document.getElementById('s-avg').textContent = avg;
            document.getElementById('hero-avg').textContent = avg;
            document.getElementById('s-prog').textContent = inProg;
            document.getElementById('s-notstarted').textContent = notStarted;

            var totalMinsRounded = Math.round(totalMins);
            var minsDisplay = totalMinsRounded >= 60
                ? (totalMinsRounded / 60).toFixed(1) + ' hr'
                : totalMinsRounded + ' min';
            document.getElementById('hero-mins').textContent = minsDisplay;

            /* STATE */
            var activeStatus = 'all';
            var activeDept = 'all';
            var activeBatch = 'all';
            var sortAsc = false;
            var searchQuery = '';

            /* HELPERS */
            function statusIcon(s) {
                if (s === 'completed') return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>';
                if (s === 'in-progress') return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>';
                if (s === 'not-activated') return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>';
                return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>';
            }

            function statusLabel(s) {
                if (s === 'completed') return 'Completed';
                if (s === 'in-progress') return 'In Progress';
                if (s === 'not-activated') return 'Not Activated';
                return 'Not Started';
            }

            function barColor(pct) {
                if (pct >= 100) return 'linear-gradient(90deg,#16a362,#3fcf8e)';
                if (pct >= 66) return 'linear-gradient(90deg,#b8822a,#e6a93a)';
                if (pct >= 33) return 'linear-gradient(90deg,#2d6fe8,#6a9ff5)';
                if (pct > 0) return 'linear-gradient(90deg,#9aa3b8,#c0cad9)';
                return 'transparent';
            }

            function pctColor(pct) {
                if (pct >= 100) return '#16a362';
                if (pct >= 66) return '#b8822a';
                if (pct >= 33) return '#2d6fe8';
                if (pct > 0) return '#9aa3b8';
                return '#c0cad9';
            }

            function deptShort(g) {
                if (g === 'POWER & WATER PLANNING') return 'Power & Water';
                if (g === 'BS&HR') return 'BS&HR';
                if (g === 'Transmission Power') return 'Transmission Power';
                if (g === 'Generation') return 'Generation';
                if (g === 'Business Dev & Excellence') return 'Biz Dev & Excellence';
                if (g === 'Internal Audit') return 'Internal Audit';
                return g;
            }

            /* RENDER */
            function render() {
                var rows = [];
                for (var i = 0; i < DATA.length; i++) {
                    var l = DATA[i];
                    var statusOk = activeStatus === 'all' || l.status === activeStatus;
                    var deptOk = activeDept === 'all' || l.grp === activeDept;
                    var batchOk = activeBatch === 'all' || l.batch === activeBatch;
                    var searchOk = l.name.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
                    if (statusOk && deptOk && batchOk && searchOk) rows.push(l);
                }

                rows.sort(function(a, b) {
                    return sortAsc ? a.done - b.done : b.done - a.done;
                });

                var list = document.getElementById('learner-list');
                var empty = document.getElementById('empty-state');
                var badge = document.getElementById('count-badge');
                badge.textContent = rows.length + (rows.length !== 1 ? ' learners' : ' learner');

                if (rows.length === 0) {
                    list.innerHTML = '';
                    empty.style.display = 'block';
                    return;
                }

                empty.style.display = 'none';

                var html = '';
                for (var i = 0; i < rows.length; i++) {
                    var l = rows[i];
                    var delay = (i * 0.03).toFixed(2) + 's';
                    var minsStr = l.mins < 60 ? Math.round(l.mins) + ' min' : (l.mins / 60).toFixed(1) + ' hr';

                    html += '<div class="learner-row" style="animation-delay:' + delay + '">';
                    html += '<div class="learner-info">';
                    html += '<span class="row-num">' + (i + 1) + '</span>';
                    html += '<div class="avatar" style="background:' + l.pal.bg + ';border-color:' + l.pal.bd + ';color:' + l.pal.tx + '">' + l.initials + '</div>';
                    html += '<div class="learner-meta">';
                    html += '<div class="learner-name">' + l.name + '</div>';
                    html += '<div class="learner-dept">' + deptShort(l.grp) + (l.started ? ' · Started ' + l.started : '') + '</div>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="cell center" style="display:flex;align-items:center;justify-content:flex-start;padding-left:4px;">';
                    html += '<span class="batch-pill batch-' + l.batch + '">Batch ' + l.batch + '</span>';
                    html += '</div>';
                    html += '<div class="cell progress-cell">';
                    html += '<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">';
                    html += '<span class="sessions-done">' + l.done + '</span>';
                    html += '<span style="font-size:11px;color:var(--ink-muted)">of ' + TOTAL + ' sessions · ' + minsStr + ' watched</span>';
                    html += '</div>';
                    html += '<div class="progress-track"><div class="progress-fill" id="pf' + i + '" style="width:0%;background:' + barColor(l.pct) + '"></div></div>';
                    html += '</div>';
                    html += '<div class="pct-cell" style="color:' + pctColor(l.pct) + '">' + l.pct + '<small>%</small></div>';
                    html += '<div class="cell center"><span class="status-badge ' + l.status + '">' + statusIcon(l.status) + statusLabel(l.status) + '</span></div>';
                    html += '<div class="card-footer">';
                    html += '<div style="display:flex;align-items:center;gap:8px;">';
                    html += '<span class="card-footer-pct" style="color:' + pctColor(l.pct) + '">' + l.pct + '%</span>';
                    html += '<span class="batch-pill batch-' + l.batch + '">Batch ' + l.batch + '</span>';
                    html += '</div>';
                    html += '<span class="status-badge ' + l.status + '">' + statusIcon(l.status) + statusLabel(l.status) + '</span>';
                    html += '</div>';
                    html += '</div>';
                }

                list.innerHTML = html;

                var captured = rows;
                setTimeout(function() {
                    for (var j = 0; j < captured.length; j++) {
                        var el = document.getElementById('pf' + j);
                        if (el) el.style.width = captured[j].pct + '%';
                    }
                }, 100);
            }

            /* HANDLERS */
            window.setStatus = function(s, btn) {
                activeStatus = s;
                var btns = document.querySelectorAll('.filter-btn');
                for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
                btn.classList.add('active');
                render();
            };

            window.setDept = function(d, btn) {
                activeDept = d;
                var btns = document.querySelectorAll('.dept-btn');
                for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
                btn.classList.add('active');
                render();
            };

            window.setBatch = function(b, btn) {
                activeBatch = b;
                var btns = document.querySelectorAll('.batch-btn');
                for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
                btn.classList.add('active');
                render();
            };

            window.toggleSort = function() {
                sortAsc = !sortAsc;
                document.getElementById('sort-lbl').textContent = sortAsc ? 'Low to High' : 'High to Low';
                render();
            };

            document.getElementById('search-input').addEventListener('input', function(e) {
                searchQuery = e.target.value;
                render();
            });

            render();
        })();
    </script>
</body>
</html>


Created at `/Users/khalidbinkalban/ai-champions-dashboard.html`.

Here's what changed:

- **Title/branding** → "AI Champions" with a trophy icon
- **9 learners only** — the departments kept:
  - Power & Water Planning (Sultan Alzaabi)
  - BS&HR (Sahaya Vinoth, Mohd Abu Atiyeh)
  - Transmission Power (Saif Bin Haider, Aisha Mubarak)
  - Generation (Ahmad AlSuwaidi)
  - Business Dev & Excellence (Jayakumar, Mahmoud Tarek Rezk)
  - Internal Audit (Saeed M Alkamali)
- **Stat cards** reflect the 9-person cohort (avg %, in progress, not started computed live)
- **Dept filter buttons** — removed Innovation, Digital DEWA, Ducont; kept only the 6 remaining departments
- **Hero meta chips** — enrolled shows 9, avg and mins update dynamically from the data


Failed with non-blocking status code: /bin/sh: Bin: command not found

PLAYER_NAME=Khalid Bin Kalban python3 ~/.claude/push_stats.py


Failed with non-blocking status code: /bin/sh: Bin: command not found


share with me the url, so i can share it with my friends


Based on the same pattern as your original file, the URL would be:

```
https://my-workspace.tailbd7b77.ts.net/ai-champions-dashboard.html
```

**However** — your `*.ts.net` domain is a **Tailscale** private network URL. It's only accessible to devices on your own Tailnet, so friends outside your Tailscale network won't be able to open it.

To share it publicly, you have a couple of easy options:

1. **GitHub Pages** — push the HTML file to a GitHub repo and enable Pages (free, instant public URL)
2. **Vercel** — drop the file in this project and deploy (`/vercel deploy`) — you already have the CLI set up
3. **Netlify Drop** — just drag the `.html` file to `app.netlify.com/drop` for an instant public link

The simplest zero-setup option is Netlify Drop — no account needed, takes 10 seconds.


make them all batch 1, remove batch 2 and the filter as well


<tool_use_error>InputValidationError: Read failed due to the following issue:
The parameter `offset` type is expected as `number` but provided as `string`</tool_use_error>

InputValidationError: [
  {
    "expected": "number",
    "code": "invalid_type",
    "path": [
      "offset"
    ],
    "message": "Invalid input: expected number, received string"
  }
]


Error: File content (13863 tokens) exceeds maximum allowed tokens (10000). Use offset and limit parameters to read specific portions of the file, or search for specific content instead of reading the whole file.


<tool_use_error>InputValidationError: Grep failed due to the following issue:
An unexpected parameter `file_path` was provided</tool_use_error>

InputValidationError: [
  {
    "code": "unrecognized_keys",
    "keys": [
      "file_path"
    ],
    "path": [],
    "message": "Unrecognized key: \"file_path\""
  }
]


266:        .batch-btn {
275:        .batch-btn:hover { background: var(--bg); color: var(--ink); }
276:        .batch-btn.active { background: var(--gold-pale); border-color: var(--gold-border); color: var(--gold); }
347:        .batch-pill { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 99px; font-size: 9px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; }
348:        .batch-1 { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
349:        .batch-2 { background: var(--violet-bg); color: var(--violet); border: 1px solid var(--violet-border); }
382:            .dept-row, .batch-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
383:            .dept-btn, .batch-btn { flex-shrink: 0; min-height: 36px; }
423:            .dept-btn, .batch-btn { font-size: 10px; padding: 6px 10px; }
436:            .batch-pill { font-size: 8px; padding: 1px 6px; }
533:            Batch:
534:            <button class="batch-btn active" onclick="setBatch('all', this)">All</button>
535:            <button class="batch-btn" onclick="setBatch(1, this)">Batch 1 — before Apr 1</button>
536:            <button class="batch-btn" onclick="setBatch(2, this)">Batch 2 — Apr 1 onwards</button>
564:
Batch

615:                var batch = (!r.started || r.started.indexOf('Apr') > -1) ? 2 : 1;
628:                    batch: batch
655:            var activeBatch = 'all';
707:                    var batchOk = activeBatch === 'all' || l.batch === activeBatch;
709:                    if (statusOk && deptOk && batchOk && searchOk) rows.push(l);
745:                    html += 'Batch ' + l.batch + '';
759:                    html += 'Batch ' + l.batch + '';
794:            window.setBatch = function(b, btn) {
795:                activeBatch = b;
796:                var btns = document.querySelectorAll('.batch-btn');


Now I'll make all the changes in one go.


Edit

        .table-head {
            display: grid; grid-template-columns: 1.4fr 80px 1fr 90px 140px;

        .table-head {
            display: grid; grid-template-columns: 1.4fr 1fr 90px 140px;


The file /Users/khalidbinkalban/ai-champions-dashboard.html has been updated successfully.

        .table-head {
            display: grid; grid-template-columns: 1.4fr 80px 1fr 90px 140px;

        .table-head {
            display: grid; grid-template-columns: 1.4fr 1fr 90px 140px;

border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md);

-            display: grid; grid-template-columns: 1.4fr 80px 1fr 90px 140px;

+            display: grid; grid-template-columns: 1.4fr 1fr 90px 140px;

padding: 12px 28px; background: var(--bg-alt);

border-bottom: 1px solid var(--border); column-gap: 16px;


        .learner-row {
            display: grid; grid-template-columns: 1.4fr 80px 1fr 90px 140px;

        .learner-row {
            display: grid; grid-template-columns: 1.4fr 1fr 90px 140px;


        .learner-row {
            display: grid; grid-template-columns: 1.4fr 80px 1fr 90px 140px;

        .learner-row {
            display: grid; grid-template-columns: 1.4fr 1fr 90px 140px;

column-gap: 16px; align-items: center; padding: 15px 24px;

border-bottom: 1px solid var(--border); transition: background .15s;


.table-head, .learner-row { grid-template-columns: 1.2fr 70px 1fr 80px 130px; column-gap: 10px; }

.table-head, .learner-row { grid-template-columns: 1.2fr 1fr 80px 130px; column-gap: 10px; }


.stats-grid { grid-template-columns: repeat(2, 1fr); }

-            .table-head, .learner-row { grid-template-columns: 1.2fr 70px 1fr 80px 130px; column-gap: 10px; }

+            .table-head, .learner-row { grid-template-columns: 1.2fr 1fr 80px 130px; column-gap: 10px; }


            Batch:
            <button class="batch-btn active" onclick="setBatch('all', this)">All</button>
            <button class="batch-btn" onclick="setBatch(1, this)">Batch 1 — before Apr 1</button>
            <button class="batch-btn" onclick="setBatch(2, this)">Batch 2 — Apr 1 onwards</button>


            Batch:
            <button class="batch-btn active" onclick="setBatch('all', this)">All</button>
            <button class="batch-btn" onclick="setBatch(1, this)">Batch 1 — before Apr 1</button>
            <button class="batch-btn" onclick="setBatch(2, this)">Batch 2 — Apr 1 onwards</button>

-            <button class="batch-btn active" onclick="setBatch('all', this)">All</button>

-            <button class="batch-btn" onclick="setBatch(1, this)">Batch 1 — before Apr 1</button>

-            <button class="batch-btn" onclick="setBatch(2, this)">Batch 2 — Apr 1 onwards</button>

<button class="dept-btn active" onclick="setDept('all', this)">All departments</button>

<button class="dept-btn" onclick="setDept('POWER & WATER PLANNING', this)">Power & Water</button>


var batch = (!r.started || r.started.indexOf('Apr') > -1) ? 2 : 1;


-                var batch = (!r.started || r.started.indexOf('Apr') > -1) ? 2 : 1;


/* STATE */
var activeStatus = 'all';
var activeDept = 'all';
-            var activeBatch = 'all';
var sortAsc = false;
var searchQuery = '';


                    var batchOk = activeBatch === 'all' || l.batch === activeBatch;
                    var searchOk = l.name.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
                    if (statusOk && deptOk && batchOk && searchOk) rows.push(l);

                    var searchOk = l.name.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
                    if (statusOk && deptOk && searchOk) rows.push(l);


                    var batchOk = activeBatch === 'all' || l.batch === activeBatch;
                    var searchOk = l.name.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
                    if (statusOk && deptOk && batchOk && searchOk) rows.push(l);

                    var searchOk = l.name.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
                    if (statusOk && deptOk && searchOk) rows.push(l);

var statusOk = activeStatus === 'all' || l.status === activeStatus;

var deptOk = activeDept === 'all' || l.grp === activeDept;

-                    var batchOk = activeBatch === 'all' || l.batch === activeBatch;

-                    if (statusOk && deptOk && batchOk && searchOk) rows.push(l);

+                    if (statusOk && deptOk && searchOk) rows.push(l);


html += '
';
                    html += 'Batch ' + l.batch + '';
                    html += '
';


html += '
';
                    html += 'Batch ' + l.batch + '';
                    html += '
';

html += '
' + deptShort(l.grp) + (l.started ? ' · Started ' + l.started : '') + '
';

-                    html += '<div class="cell center" style="display:flex;align-items:center;justify-content:flex-start;padding-left:4px;">';

-                    html += 'Batch ' + l.batch + '';

html += '<div class="cell progress-cell">';

html += '<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">';


html += '
';
                    html += '' + l.pct + '%';
                    html += 'Batch ' + l.batch + '';
                    html += '
';


html += '
';
                    html += '' + l.pct + '%';
                    html += 'Batch ' + l.batch + '';
                    html += '
';

html += '<div style="display:flex;align-items:center;gap:8px;">';

html += '' + statusIcon(l.status) + statusLabel(l.status) + '';


            window.setBatch = function(b, btn) {
                activeBatch = b;
                var btns = document.querySelectorAll('.batch-btn');
                for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
                btn.classList.add('active');
                render();
            };


            window.setBatch = function(b, btn) {
                activeBatch = b;
                var btns = document.querySelectorAll('.batch-btn');
                for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
                btn.classList.add('active');
                render();
            };

-            window.setBatch = function(b, btn) {

-                var btns = document.querySelectorAll('.batch-btn');

-                for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');

-                btn.classList.add('active');


Done. Here's what was changed:

- **Batch filter row** — removed entirely from the UI
- **Batch column** — removed from the table header and all learner rows
- **Grid layout** — updated from 5 columns to 4 columns (`1.4fr 1fr 90px 140px`)
- **All learners** — set to Batch 1
- **JS** — removed `activeBatch` state, `batchOk` filter logic, and `setBatch` handler


remove live data in green


Done.


make it more mobile friendly