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

  function deptShort(g) {
    if (g === 'DISTRIBUTION POWER')      return 'Distribution Power';
    if (g === 'Innovation & The Future') return 'Innovation & Future';
    if (g === 'Digital DEWA')            return 'Digital DEWA';
    if (g === 'Ducont')                  return 'Ducont';
    return g;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Coder — DEWA Utilization Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,300&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />
  <style>
    /* Guaranteed number font — works even without Google Fonts */
    .num { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', 'Book Antiqua', Palatino, serif !important; font-variant-numeric: tabular-nums; }
  </style>
  <style>
    :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-pattern { position:absolute; top:0; right:0; width:480px; height:100%; pointer-events:none; }
    .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; }

    /* ── TOP PERFORMER ── */
    .performer-card {
      background:var(--ink); border-radius:var(--r-lg);
      padding:24px 26px; min-width:244px; position:relative;
      overflow:hidden; box-shadow:var(--shadow-lg); flex-shrink:0;
      transform:rotate(2deg);
      transition:transform .3s ease;
    }
    .performer-card:hover { transform:rotate(0deg); }
    .performer-card::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(circle at 80% 20%,rgba(184,130,42,.28) 0%,transparent 65%);
      pointer-events:none;
    }
    .performer-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
    .performer-name  { font-family:'Fraunces',serif; font-size:20px; font-weight:600; color:#fff; line-height:1.2; margin-bottom:4px; }
    .performer-score { font-size:11px; color:rgba(255,255,255,.45); margin-bottom:16px; }
    .performer-track { height:4px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
    .performer-fill  { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--gold-light)); transition:width 1.4s cubic-bezier(.16,1,.3,1); }
    .performer-bottom{ display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; }
    .performer-pct   { font-family:'Fraunces',serif; font-size:28px; font-weight:700; color:var(--gold-light); line-height:1; }
    .performer-sub   { font-size:11px; color:rgba(255,255,255,.35); }

    /* ── 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); }

    /* ── 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); }

    .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); }

    /* ── EMPTY ── */
    .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; }
    }
    /* ── TABLET ── */
    @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; }
      /* Card layout for table */
      .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;
      }
    }

    /* ── MOBILE ── */
    @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">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round">
        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
      </svg>
    </div>
    <span class="brand-name">Learning Analytics</span>
    <div class="brand-sep"></div>
    <span class="brand-sub">DEWA — Udemy Platform</span>
  </div>
  <div class="topbar-right">
    <div class="topbar-tag"><div class="live-dot"></div>Live data</div>
    <div class="topbar-tag">
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
        <rect x="3" y="4" width="18" height="18" rx="2"/>
        <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
      </svg>
      Mar 18 – Apr 6, 2026
    </div>
  </div>
</div>

<!-- HERO -->
<header class="hero">
  <svg class="hero-pattern" viewBox="0 0 480 220" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMid slice">
    <defs>
      <pattern id="dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
        <circle cx="1" cy="1" r="1" fill="#b8822a" opacity="0.14"/>
      </pattern>
      <linearGradient id="dfade" x1="0" x2="1" y1="0" y2="0">
        <stop offset="0%" stop-color="white"/>
        <stop offset="100%" stop-color="white" stop-opacity="0"/>
      </linearGradient>
      <mask id="dmask"><rect width="480" height="220" fill="url(#dfade)"/></mask>
    </defs>
    <rect width="480" height="220" fill="url(#dots)" mask="url(#dmask)"/>
    <polygon points="430,16 472,40 472,92 430,116 388,92 388,40" stroke="#b8822a" stroke-width="1" fill="none" opacity="0.13"/>
    <polygon points="430,34 460,51 460,82 430,99 400,82 400,51" stroke="#b8822a" stroke-width="0.7" fill="none" opacity="0.09"/>
  </svg>

  <div class="hero-inner">
    <div class="hero-left">
      <div class="hero-pill">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
        </svg>
        Course Utilization Report
      </div>
      <h1 class="hero-title">AI Coder: <em>Vibe Coder</em><br/>to Agentic Engineer</h1>
      <div class="hero-meta">
        <div class="meta-chip">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>
          <strong>27</strong> / 43 enrolled — Batch 1
        </div>
        <div class="meta-chip">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
          </svg>
          <strong>93</strong> sessions total
        </div>
        <div class="meta-chip">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <rect x="3" y="4" width="18" height="18" rx="2"/>
            <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
          </svg>
          <strong>3</strong> week program
        </div>
        <div class="meta-chip">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
          </svg>
          Avg. <strong id="m-avg">—</strong>% complete
        </div>
        <div class="meta-chip">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/>
          </svg>
          <strong id="m-mins">—</strong> min watched total
        </div>
      </div>
    </div>

  </div>
</header>

<!-- MAIN -->
<main class="main">

  <!-- STAT CARDS -->
  <div class="stats-grid">
    <div class="stat-card" style="animation-delay:.05s">
      <div class="stat-accent" style="background:linear-gradient(90deg,#2d6fe8,#6a9ff5)"></div>
      <div class="stat-icon-wrap" style="background:#eff4fd">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2d6fe8" stroke-width="2" stroke-linecap="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
      </div>
      <div class="stat-num">27<span style="font-size:18px;font-weight:300;color:var(--ink-muted)"> /43</span></div>
      <div class="stat-lbl">Enrolled — Batch 1</div>
      <div class="stat-tag" style="background:#eff4fd;color:#2d6fe8">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="18 15 12 9 6 15"/></svg>
        2 departments
      </div>
    </div>

    <div class="stat-card" style="animation-delay:.13s">
      <div class="stat-accent" style="background:linear-gradient(90deg,#b8822a,#e6a93a)"></div>
      <div class="stat-icon-wrap" style="background:#fdf3e1">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#b8822a" stroke-width="2" stroke-linecap="round">
          <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
        </svg>
      </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:#fdf3e1;color:var(--gold)">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
        Across all learners
      </div>
    </div>

    <div class="stat-card" style="animation-delay:.21s">
      <div class="stat-accent" style="background:linear-gradient(90deg,#c47d0e,#f5a623)"></div>
      <div class="stat-icon-wrap" style="background:#fff8ec">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c47d0e" stroke-width="2" stroke-linecap="round">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
        </svg>
      </div>
      <div class="stat-num" id="s-prog">—</div>
      <div class="stat-lbl">In Progress</div>
      <div class="stat-tag" style="background:#fff8ec;color:var(--amber)">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        Actively learning
      </div>
    </div>

    <div class="stat-card" style="animation-delay:.29s">
      <div class="stat-accent" style="background:linear-gradient(90deg,#9aa3b8,#c0cad9)"></div>
      <div class="stat-icon-wrap" style="background:var(--slate-bg)">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="2" stroke-linecap="round">
          <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
        </svg>
      </div>
      <div class="stat-num" id="s-notstarted">—</div>
      <div class="stat-lbl">Not Started</div>
      <div class="stat-tag" style="background:var(--slate-bg);color:var(--ink-muted)">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
        0% completed
      </div>
    </div>
  </div>

  <!-- TABLE SECTION -->
  <div class="section-head">
    <div class="section-title">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" stroke-width="2" stroke-linecap="round">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
      </svg>
      Learner Progress
      <span class="count-badge" id="count-badge">27 learners</span>
    </div>
    <div class="controls-row">
      <div class="search-wrap">
        <span class="search-icon">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>
        </span>
        <input class="search-input" id="search-input" type="text" placeholder="Search learner..."/>
      </div>
      <div class="filter-group">
        <button class="filter-btn active" onclick="setStatus('all',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
            <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
          </svg>All
        </button>
        <button class="filter-btn" onclick="setStatus('in-progress',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>In Progress
        </button>
        <button class="filter-btn" onclick="setStatus('not-started',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
          </svg>Not Started
        </button>
        <button class="filter-btn" onclick="setStatus('completed',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>Completed
        </button>
        <button class="filter-btn" onclick="setStatus('not-activated',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" 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>Not Activated
        </button>
      </div>
      <button class="sort-btn" onclick="toggleSort()">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/>
        </svg>
        <span id="sort-lbl">High to Low</span>
      </button>
    </div>
  </div>

  <!-- BATCH FILTER -->
  <div class="dept-row batch-row" style="margin-bottom:8px">
    <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)">
      <span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);"></span>
      Batch 1 — before Apr 1
    </button>
    <button class="batch-btn" onclick="setBatch(2,this)">
      <span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--violet);"></span>
      Batch 2 — Apr 1 onwards
    </button>
  </div>

  <!-- DEPARTMENT FILTER -->
  <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('Innovation & The Future',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
      Innovation & The Future
    </button>
    <button class="dept-btn" onclick="setDept('Digital DEWA',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
      Digital DEWA
    </button>
  </div>

  <div class="table-card">
    <div class="table-head">
      <div class="th">Learner</div>
      <div class="th" style="padding-left:4px">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 class="empty-state" id="empty-state">
      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--ink-muted)" stroke-width="1.5" stroke-linecap="round" style="display:block;margin:0 auto 12px">
        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      No learners match your filter.
    </div>
  </div>

</main>

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

<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:'Ahmed Alshehhi',                 pct:100, mins:1354.75, grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Khalid Bin Kalban',              pct:100, mins:928.75,  grp:'Innovation & The Future',  started:'Mar 23' },
    { name:'Shurooq Ahmad Almheiri',         pct:100, mins:866.0,   grp:'Innovation & The Future',  started:'Mar 24' },
    { name:'Muhammad Bilal Arif',            pct:36,  mins:348.25,  grp:'Innovation & The Future',  started:'Mar 28' },
    { name:'Ashish Agarwal',                 pct:85,  mins:1259.5,  grp:'Innovation & The Future',  started:'Mar 29' },
    { name:'Shahul Hameed Mohideen Abdul Kadar', pct:0, mins:0.25,  grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Muna Jassim',                    pct:10,  mins:138.5,   grp:'Innovation & The Future',  started:'Mar 24' },
    { name:'Jamil Al Hasan',                 pct:30,  mins:329.0,   grp:'Innovation & The Future',  started:'Mar 18' },
    { name:'Duaa Suleiman',                  pct:80,  mins:759.75,  grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Atif Sharif',                    pct:35,  mins:368.5,   grp:'Innovation & The Future',  started:'Mar 22' },
    { name:'Atif Waqar',                     pct:25,  mins:348.5,   grp:'Innovation & The Future',  started:'Mar 29' },
    { name:'Saleha Obaid Essa',              pct:8,   mins:90.25,   grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Elsa Prakash',                   pct:10,  mins:102.75,  grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Ayesha Sarwashi',                pct:80,  mins:876.5,   grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Moaza Alhajeri',                 pct:10,  mins:129.75,  grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Adel Al Tamimi',                 pct:75,  mins:786.5,   grp:'Innovation & The Future',  started:'Mar 30' },
    { name:'Karpagavalli Pandian',           pct:0,   mins:0,       grp:'Innovation & The Future',  started:null },
    { name:'Noora Al Sarrah',                pct:10,  mins:156.75,  grp:'Innovation & The Future',  started:'Apr 2' },
    { name:'Aysha Hassan Al Dhuhoori',       pct:45,  mins:449.5,   grp:'Innovation & The Future',  started:'Apr 3' },
    { name:'Wafa Mohamed Bamatraf',          pct:10,  mins:127.0,   grp:'Innovation & The Future',  started:'Apr 6' },
    { name:'Tongtong Wang',                  pct:2,   mins:18.0,    grp:'Innovation & The Future',  started:'Apr 6' },
    { name:'Saeed Aldosari',                 pct:2,   mins:15.25,   grp:'Innovation & The Future',  started:'Apr 6' },
    { name:'Prasanth Mathavan',              pct:0,   mins:0,       grp:'Innovation & The Future',  started:null },
    { name:'Marouane Basta',                 pct:25,  mins:302.75,  grp:'Digital DEWA',             started:'Mar 30' },
    { name:'Shahala Cheralakodan',           pct:25,  mins:289.25,  grp:'Digital DEWA',             started:'Apr 1' },
    { name:'Haseeb Vadakke Painkal',         pct:2,   mins:62.5,    grp:'Digital DEWA',             started:'Apr 1' },
    { name:'Rakesh Gulaganji',               pct:5,   mins:96.0,    grp:'Digital DEWA',             started:'Apr 4' },
    { name:'Ismail',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Chandini Palani',                pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Saravana Kumar',                 pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Nixson Jesuraj',                 pct:48,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Ankur Jain',                     pct:45,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Anusha Gounder',                 pct:40,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Nora Khaled',                    pct:17,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Ashwin Kaleeswaran',             pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 28' },
    { name:'Fatehali Shaikh',                pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 26' },
    { name:'Asjad Lakhani',                  pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Abeth',                          pct:15,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Priyanka Geethik',               pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Sumit Kumar',                    pct:18,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Anjana Elaveetil',               pct:43,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Prem Kishore',                   pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Sumathi Malikarjun',             pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Mohammad Sajid',                 pct:12,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
    { name:'Tharakeswar',                    pct:55,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Akash',                          pct:48,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
    { name:'Kamalesh',                       pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Suriyakumar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Sunil Sahu',                     pct:5,   mins:0,       grp:'Ducont',                   started:'Apr 3' },
    { name:'Athish',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Subhash Chavan',                 pct:100, mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Sekkizhar',                      pct:33,  mins:0,       grp:'Ducont',                   started:null },
    { name:'Selvadurai',                     pct:20,  mins:0,       grp:'Ducont',                   started:'Apr 3' },
    { name:'Sajid Salim',                    pct:19,  mins:0,       grp:'Ducont',                   started:null },
    { name:'Shilkka',                        pct:38,  mins:0,       grp:'Ducont',                   started:'Mar 29' },
    { name:'Rakul',                          pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
  ];

  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 ? '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);
  var top = DATA.slice().sort(function(a,b){ return b.done - a.done; })[0];

  document.getElementById('m-avg').textContent   = avg;
  document.getElementById('m-mins').textContent  = Math.round(totalMins).toLocaleString();
  document.getElementById('s-avg').textContent   = avg;
  document.getElementById('s-prog').textContent  = inProg;
  document.getElementById('s-notstarted').textContent = notStarted;

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

  /* ── HELPERS ── */
  function weekInfo(w) {
    if (w === 0) return { cls:'w0', label:'Not yet' };
    if (w === 1) return { cls:'w1', label:'Week 1' };
    if (w === 2) return { cls:'w2', label:'Week 2' };
    return { cls:'w3', label:'Week 3' };
  }

  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 === 'DISTRIBUTION POWER')      return 'Distribution Power';
    if (g === 'Innovation & The Future') return 'Innovation & Future';
    if (g === 'Digital DEWA')            return 'Digital DEWA';
    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 wk = weekInfo(l.week);
      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>';
      /* card footer shown only on mobile via CSS */
      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>

+    if (g === 'Ducont')                  return 'Ducont';


Edit

    <button class="dept-btn" onclick="setDept('Digital DEWA',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
      Digital DEWA
    </button>
  </div>

    <button class="dept-btn" onclick="setDept('Digital DEWA',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
      Digital DEWA
    </button>
    <button class="dept-btn" onclick="setDept('Ducont',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
      Ducont
    </button>
  </div>