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

  <!-- BATCH FILTER -->
  <div class="dept-row batch-row" style="margin-bottom:8px">

<!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" 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' },
  ];

  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>

-  <div class="dept-row" style="margin-bottom:8px">

+  <div class="dept-row batch-row" style="margin-bottom:8px">


Done. Refresh on your phone. Key mobile improvements:

- **Topbar** — compact, hides redundant labels on small screens
- **Hero** — tighter padding, smaller title, stacked meta chips
- **Stat cards** — better proportions, cleaner spacing
- **Filters** — horizontally scrollable (swipe left/right), no wrapping mess
- **Learner cards** — larger tap targets, cleaner card footer with % + Batch tag + Status all in one row
- **Batch tag** now shows in card footer on mobile instead of hidden


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

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


'/Users/khalidbinkalban/Downloads/DEWA Course Tracking sheet (2).xlsx'

Take this list
add it to the dashboard
this list for Ducont employees add it as a new tag


Bash

python3 -c "
import openpyxl
wb = openpyxl.load_workbook('/Users/khalidbinkalban/Downloads/DEWA Course Tracking sheet (2).xlsx', data_only=True)
for sheet in wb.sheetnames:
    print('SHEET:', sheet)
    ws = wb[sheet]
    for row in ws.iter_rows(min_row=1, max_row=5, values_only=True):
        print(row)
    print('...')
" 2>&1

Preview Excel file structure


Error: Exit code 1
Traceback (most recent call last):
  File "<string>", line 2, in <module>
ModuleNotFoundError: No module named 'openpyxl'
[rerun: b6]


pip3 install openpyxl -q && python3 -c "
import openpyxl
wb = openpyxl.load_workbook('/Users/khalidbinkalban/Downloads/DEWA Course Tracking sheet (2).xlsx', data_only=True)
for sheet in wb.sheetnames:
    print('SHEET:', sheet)
    ws = wb[sheet]
    for row in ws.iter_rows(values_only=True):
        print(row)
" 2>&1

Install openpyxl and read Excel file


WARNING: You are using pip version 21.2.4; however, version 26.0.1 is available.
You should consider upgrading via the '/Library/Developer/CommandLineTools/usr/bin/python3 -m pip install --upgrade pip' command.
SHEET: DEWA Tracking sheet
('S\xa0NO', 'Resource Name', 'Job Title', 'Company', 'status', 'Course Start date', 'Overall Progress %', 'Completion Date', 'DEWA Email ID')
(1, 'Ismail', 'Program Manager', 'Ducont', 'Registered', datetime.datetime(2026, 3, 27, 0, 0), 1, datetime.datetime(2026, 7, 4, 0, 0), 'ismail.mubarack@dewa.gov.ae')
(2, 'Chandini', 'Change Manager & Design thinking facilitators', 'Ducont', 'Registered', datetime.datetime(2026, 3, 27, 0, 0), 0.52, None, 'Chandini.palani@dewa.gov.ae')
(3, 'Saravana Kumar', 'Business Analyst', 'Ducont', 'Registered', datetime.datetime(2026, 3, 27, 0, 0), 0.54, None, 'Saravanakumar.s@dewa.gov.ae')
(4, 'Nixson Jesuraj', 'Business Analyst', 'Ducont', 'Registered', datetime.datetime(2026, 3, 27, 0, 0), 0.48, None, 'nixson.jesuraj@dewa.gov.ae')
(5, 'Ankur Jain', 'Power Platform & Copilot Trainer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 30, 0, 0), 0.45, None, 'ankur.jain@dewa.gov.ae')
(6, 'Anusha', 'Power Platform & Copilot Trainer + Open Technology', 'Ducont', 'Registered', datetime.datetime(2026, 3, 30, 0, 0), 0.4, None, 'anusha.gounder@dewa.gov.ae')
(7, 'Nora', 'Communication Specialist', 'Ducont', 'Registered', datetime.datetime(2026, 3, 30, 0, 0), 0.17, None, 'nora.khaled@dewa.gov.ae')
(8, 'Ashwin Kaleeswaran', 'Solution Architect', 'Ducont', 'Registered', datetime.datetime(2026, 3, 28, 0, 0), 0.52, None, 'ashwin.kaleeswaran@dewa.gov.ae')
(9, 'Fatehali', 'Designer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 26, 0, 0), 0.6, None, 'fatehali.shaikh@dewa.gov.ae')
(10, 'Asjad Lakhani', 'Lead Agentic Ai Developer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 31, 0, 0), 1, None, 'asjad.lakhani@dewa.gov.ae')
(11, 'Abeth', 'Microsoft Administrator', 'Ducont', 'Registered', datetime.datetime(2026, 4, 1, 0, 0), 0.15, None, None)
(12, 'Priyanka Geethik', 'Lead Agentic Ai Developer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 31, 0, 0), 0.6, None, None)
(13, 'Sumit Kumar\xa0', 'Senior Agentic Ai Developer', 'Ducont', 'Registered', datetime.datetime(2026, 4, 1, 0, 0), 0.18, None, None)
(14, 'Anjana Elaveetil', 'Power Platform & Agentic AI Developer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 31, 0, 0), 0.43, None, 'anjana.sukumaran@dewa.gov.ae')
(15, 'Prem Kishore', 'Power Platform & Agentic AI Developer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 31, 0, 0), 1, datetime.datetime(2026, 7, 4, 0, 0), 'prem.kishore@dewa.gov.ae')
(16, 'Sumathi Malikarjun', 'Power Platform & Agentic AI Developer', 'Ducont', 'Registered', datetime.datetime(2026, 4, 1, 0, 0), 0.3, None, 'sumathi.malikarjun@dewa.gov.ae')
(17, 'Mohammad Sajid', 'Power Platform & Agentic AI Developer', 'Ducont', 'Registered', datetime.datetime(2026, 4, 2, 0, 0), 0.12, None, 'NA')
(18, 'Tharakeswar', 'Lead Agentic Ai Developer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 27, 0, 0), 0.55, None, 'tharakeswar.karakambadi@dewa.gov.ae')
(19, 'Akash', 'Senior Agentic Ai Developer', 'Ducont', 'Registered', datetime.datetime(2026, 4, 2, 0, 0), 0.48, None, None)
(20, 'Kamalesh ', 'Power Platform & Agentic AI Developer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 31, 0, 0), 1, datetime.datetime(2026, 7, 4, 0, 0), 'kamalesh.karmegam@dewa.gov.ae')
(21, 'Suriyakumar', 'Power Platform & Agentic Developer', 'Ducont', 'Registered', datetime.datetime(2026, 4, 1, 0, 0), 1, datetime.datetime(2026, 7, 4, 0, 0), 'suriya.kumar@dewa.gov.ae')
(22, 'Sunil Sahu', 'Lead Agentic Ai Developer', 'Ducont', 'Registered', datetime.datetime(2026, 4, 3, 0, 0), 0.05, None, None)
(23, 'Athish', 'Power Platform & Agentic Developer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 31, 0, 0), 1, datetime.datetime(2026, 7, 4, 0, 0), 'athish.venkatesan@dewa.gov.ae')
(24, 'Subhash Chavan', 'Power Platform & Agentic AI Developer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 30, 0, 0), 1, None, 'Subhash.chavan@dewa.gov.ae')
(25, 'Sekkizhar', 'EA', 'Ducont', 'Registered', None, 0.33, None, None)
(26, 'Selvadurai', 'Ai Architect', 'Ducont', 'Registered', datetime.datetime(2026, 4, 3, 0, 0), 0.2, None, None)
(27, 'Sajid Salim', 'Lead Emerging Technology', 'Ducont', 'Registered', None, 0.19, None, None)
(28, 'Shilkka', 'BA', 'Ducont', 'Registered', datetime.datetime(2026, 3, 29, 0, 0), 0.38, None, 'NA')
(29, 'Rakul', 'Power Platform & Agentic AI Developer', 'Ducont', 'Registered', datetime.datetime(2026, 3, 31, 0, 0), 1, datetime.datetime(2026, 7, 4, 0, 0), 'G.Rakul@dewa.gov.ae')
(None, None, None, None, None, None, None, None, None)
(None, None, None, None, None, None, None, None, None)
(None, None, None, None, None, None, None, None, None)
(None, None, None, None, None, None, None, None, None)
(None, None, None, None, None, None, None, None, None)
(None, None, None, None, None, None, None, None, None)
[result-id: r19]
[rerun: b7]


Got all 29 Ducont employees. Now adding them to the dashboard with a new Ducont tag.


700	  AI Coder: Vibe Coder to Agentic Engineer · DEWA Cohort · Mar 18 – Apr 6, 2026 · 93 Sessions · 3 Weeks
701
702
703


715	  ];
716
717	  var RAW = [
718	    { name:'Ahmed Alshehhi',                 pct:100, mins:1354.75, grp:'Innovation & The Future',  started:'Mar 25' },
719	    { name:'Khalid Bin Kalban',              pct:100, mins:928.75,  grp:'Innovation & The Future',  started:'Mar 23' },
720	    { name:'Shurooq Ahmad Almheiri',         pct:100, mins:866.0,   grp:'Innovation & The Future',  started:'Mar 24' },
721	    { name:'Muhammad Bilal Arif',            pct:36,  mins:348.25,  grp:'Innovation & The Future',  started:'Mar 28' },
722	    { name:'Ashish Agarwal',                 pct:85,  mins:1259.5,  grp:'Innovation & The Future',  started:'Mar 29' },
723	    { name:'Shahul Hameed Mohideen Abdul Kadar', pct:0, mins:0.25,  grp:'Innovation & The Future',  started:'Mar 26' },
724	    { name:'Muna Jassim',                    pct:10,  mins:138.5,   grp:'Innovation & The Future',  started:'Mar 24' },
725	    { name:'Jamil Al Hasan',                 pct:30,  mins:329.0,   grp:'Innovation & The Future',  started:'Mar 18' },
726	    { name:'Duaa Suleiman',                  pct:80,  mins:759.75,  grp:'Innovation & The Future',  started:'Mar 25' },
727	    { name:'Atif Sharif',                    pct:35,  mins:368.5,   grp:'Innovation & The Future',  started:'Mar 22' },
728	    { name:'Atif Waqar',                     pct:25,  mins:348.5,   grp:'Innovation & The Future',  started:'Mar 29' },
729	    { name:'Saleha Obaid Essa',              pct:8,   mins:90.25,   grp:'Innovation & The Future',  started:'Mar 26' },
[result-id: r21]

  ];

  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' },


730	    { name:'Elsa Prakash',                   pct:10,  mins:102.75,  grp:'Innovation & The Future',  started:'Mar 25' },
731	    { name:'Ayesha Sarwashi',                pct:80,  mins:876.5,   grp:'Innovation & The Future',  started:'Mar 26' },
732	    { name:'Moaza Alhajeri',                 pct:10,  mins:129.75,  grp:'Innovation & The Future',  started:'Mar 26' },
733	    { name:'Adel Al Tamimi',                 pct:75,  mins:786.5,   grp:'Innovation & The Future',  started:'Mar 30' },
734	    { name:'Karpagavalli Pandian',           pct:0,   mins:0,       grp:'Innovation & The Future',  started:null },
735	    { name:'Noora Al Sarrah',                pct:10,  mins:156.75,  grp:'Innovation & The Future',  started:'Apr 2' },
736	    { name:'Aysha Hassan Al Dhuhoori',       pct:45,  mins:449.5,   grp:'Innovation & The Future',  started:'Apr 3' },
737	    { name:'Wafa Mohamed Bamatraf',          pct:10,  mins:127.0,   grp:'Innovation & The Future',  started:'Apr 6' },
738	    { name:'Tongtong Wang',                  pct:2,   mins:18.0,    grp:'Innovation & The Future',  started:'Apr 6' },
739	    { name:'Saeed Aldosari',                 pct:2,   mins:15.25,   grp:'Innovation & The Future',  started:'Apr 6' },
740	    { name:'Prasanth Mathavan',              pct:0,   mins:0,       grp:'Innovation & The Future',  started:null },
741	    { name:'Marouane Basta',                 pct:25,  mins:302.75,  grp:'Digital DEWA',             started:'Mar 30' },
742	    { name:'Shahala Cheralakodan',           pct:25,  mins:289.25,  grp:'Digital DEWA',             started:'Apr 1' },
743	    { name:'Haseeb Vadakke Painkal',         pct:2,   mins:62.5,    grp:'Digital DEWA',             started:'Apr 1' },
744	    { name:'Rakesh Gulaganji',               pct:5,   mins:96.0,    grp:'Digital DEWA',             started:'Apr 4' },
745	  ];
746
747	  var DATA = [];
748	  for (var i = 0; i < RAW.length; i++) {
749	    var r    = RAW[i];
[result-id: r22]

    { 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' },
  ];

  var DATA = [];
  for (var i = 0; i < RAW.length; i++) {
    var r    = RAW[i];


Edit

    { 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:'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' },
  ];