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

<!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 9, 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>69</strong> enrolled 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">
            <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">69</div>
      <div class="stat-lbl">Total Enrolled</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>
        3 companies
      </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">78 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>
    <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>

  <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 9, 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:1355.0,  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:1208.5,  grp:'Innovation & The Future',     started:'Mar 24' },
    { name:'Saleha Obaid Essa',                 pct:100, mins:1066.0,  grp:'Innovation & The Future',     started:'Mar 26' },
    { name:'Adel Al Tamimi',                    pct:100, mins:1011.25, grp:'Innovation & The Future',     started:'Mar 30' },
    { name:'Muhammad Bilal Arif',               pct:60,  mins:578.25,  grp:'Innovation & The Future',     started:'Mar 28' },
    { name:'Ashish Agarwal',                    pct:85,  mins:1643.5,  grp:'Innovation & The Future',     started:'Mar 29' },
    { name:'Ayesha Sarwashi',                   pct:95,  mins:1014.0,  grp:'Innovation & The Future',     started:'Mar 26' },
    { name:'Duaa Suleiman',                     pct:95,  mins:888.25,  grp:'Innovation & The Future',     started:'Mar 25' },
    { name:'Atif Waqar',                        pct:65,  mins:984.25,  grp:'Innovation & The Future',     started:'Mar 29' },
    { name:'Atif Sharif',                       pct:55,  mins:578.25,  grp:'Innovation & The Future',     started:'Mar 22' },
    { name:'Aysha Hassan Al Dhuhoori',          pct:75,  mins:765.25,  grp:'Innovation & The Future',     started:'Apr 3' },
    { name:'Tongtong Wang',                     pct:75,  mins:773.25,  grp:'Innovation & The Future',     started:'Apr 6' },
    { name:'Muna Jassim',                       pct:40,  mins:575.75,  grp:'Innovation & The Future',     started:'Mar 24' },
    { name:'Noora Al Sarrah',                   pct:35,  mins:366.5,   grp:'Innovation & The Future',     started:'Apr 2' },
    { name:'Jamil Al Hasan',                    pct:30,  mins:329.0,   grp:'Innovation & The Future',     started:'Mar 18' },
    { name:'Wafa Mohd Mubarak Albalooshi',      pct:30,  mins:289.25,  grp:'Innovation & The Future',     started:'Apr 7' },
    { name:'Elsa Prakash',                      pct:25,  mins:301.5,   grp:'Innovation & The Future',     started:'Mar 25' },
    { name:'Karpagavalli Pandian',              pct:20,  mins:209.75,  grp:'Innovation & The Future',     started:'Apr 8' },
    { name:'Khalid Abdulaziz Alali',            pct:16,  mins:181.0,   grp:'Innovation & The Future',     started:'Apr 7' },
    { name:'Wafa Mohamed Bamatraf',             pct:16,  mins:143.25,  grp:'Innovation & The Future',     started:'Apr 6' },
    { name:'Moaza Alhajeri',                    pct:10,  mins:129.75,  grp:'Innovation & The Future',     started:'Mar 26' },
    { name:'Shahul Hameed Mohideen Abdul Kadar',pct:2,   mins:36.0,    grp:'Innovation & The Future',     started:'Mar 26' },
    { name:'Saeed Aldosari',                    pct:2,   mins:15.25,   grp:'Innovation & The Future',     started:'Apr 6' },
    { name:'Yaseen Tahir',                      pct:2,   mins:36.25,   grp:'Innovation & The Future',     started:'Apr 8' },
    { name:'Carl Apolinario',                   pct:2,   mins:0,       grp:'Innovation & The Future',     started:null },
    { name:'Abdallah Alkamali',                 pct:2,   mins:18.5,    grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Ebtesam Almarzooqi',                pct:2,   mins:2.5,     grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Ibaad Khot',                        pct:0,   mins:3.75,    grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Hessa Alyassi',                     pct:0,   mins:3.75,    grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Prasanth Mathavan',                 pct:0,   mins:0,       grp:'Innovation & The Future',     started:null },
    { name:'Marouane Basta',                    pct:75,  mins:878.25,  grp:'Digital DEWA',                started:'Mar 30' },
    { name:'Shahala Cheralakodan',              pct:50,  mins:556.75,  grp:'Digital DEWA',                started:'Apr 1' },
    { name:'Haseeb Vadakke Painkal',            pct:25,  mins:222.25,  grp:'Digital DEWA',                started:'Apr 1' },
    { name:'Ummehani Rangwala',                 pct:16,  mins:211.75,  grp:'Digital DEWA',                started:'Apr 7' },
    { name:'Rakesh Gulaganji',                  pct:16,  mins:178.0,   grp:'Digital DEWA',                started:'Apr 4' },
    { name:'Sachin Patil',                      pct:10,  mins:74.75,   grp:'Digital DEWA',                started:'Apr 7' },
    { name:'Muhammed Shafi',                    pct:0,   mins:3.75,    grp:'Digital DEWA',                started:'Apr 8' },
    { name:'Mohammed Fowza',                    pct:0,   mins:0,       grp:'Digital DEWA',                started:null },
    { name:'Mohammed Ayub',                     pct:0,   mins:0,       grp:'Digital DEWA',                started:null },
    { 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:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Nixson Jesuraj',                 pct:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Ankur Jain',                     pct:73,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Anusha Gounder',                 pct:73,  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:76,  mins:0,       grp:'Ducont',                   started:'Mar 26' },
    { name:'Asjad Lakhani',                  pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Abeth',                          pct:30,  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:54,  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:40,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
    { name:'Tharakeswar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Akash',                          pct:60,  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:62,  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 && r.pct === 0) ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';
    var week   = done === 0 ? 0 : done <= 31 ? 1 : done <= 62 ? 2 : 3;
    var parts  = r.name.split(' ');
    var init   = ((parts[0] || '')[0] || '') + ((parts[1] || '')[0] || '');
    var batch = (!r.started || r.started.indexOf('Apr') > -1) ? 2 : 1;
    DATA.push({
      name: r.name, pct: r.pct, done: done,
      remaining: TOTAL - done,
      mins: r.mins, grp: r.grp,
      status: status, week: week,
      initials: init.toUpperCase(),
      pal: PALS[i % PALS.length],
      started: r.started || null,
      batch: batch
    });
  }

  /* ── STATS ── */
  var totalPct = 0, inProg = 0, notStarted = 0, totalMins = 0;
  for (var j = 0; j < DATA.length; j++) {
    totalPct += DATA[j].pct;
    totalMins += DATA[j].mins;
    if (DATA[j].status === 'in-progress') inProg++;
    if (DATA[j].status === 'not-started') notStarted++;
  }
  var avg = Math.round(totalPct / DATA.length);
  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 === 'Innovation & The Future')  return 'Innovation & Future';
    if (g === 'Digital DEWA')             return 'Digital DEWA';
    if (g === 'Ducont')                   return 'Ducont';
    if (g === 'POWER & WATER PLANNING')   return 'Power & Water';
    if (g === 'BS&HR')                    return 'BS&HR';
    if (g === 'Transmission Power')       return 'Transmission Power';
    if (g === 'Generation')               return 'Generation';
    if (g === 'Business Dev & Excellence') return 'Biz Dev & Excellence';
    if (g === 'Internal Audit')            return 'Internal Audit';
    return g;
  }

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

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

    var list  = document.getElementById('learner-list');
    var empty = document.getElementById('empty-state');
    var badge = document.getElementById('count-badge');

    badge.textContent = rows.length + (rows.length !== 1 ? ' learners' : ' learner');

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

    var html = '';
    for (var i = 0; i < rows.length; i++) {
      var l  = rows[i];
      var 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>


Removed.


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 12thApril2026.xlsx'
- Reflect the list
- Make Ashish Agarwal completed
- Elsa Prakash completed
- Tongtong Wang Completed
- Atif Waqar completed
- Muna Jassim Completed
- Ayesha Al Dhuhoori completed
- Muhammad Bilal Completed
- Ayesha Sarwashi completed
- Saleha Ibaud completed
- Adel AlTamimi completed
-


Bash

python3 - <<'EOF'
import openpyxl
wb = openpyxl.load_workbook('/Users/khalidbinkalban/Downloads/DEWA Course Tracking sheet 12thApril2026.xlsx')
print("Sheets:", wb.sheetnames)
ws = wb.active
print("Active sheet:", ws.title)
for i, row in enumerate(ws.iter_rows(values_only=True)):
    print(i, row)
    if i > 3:
        break
EOF

Preview Excel sheet structure


Sheets: ['DEWA Tracking sheet']
Active sheet: DEWA Tracking sheet
0 ('S\xa0NO', 'Resource Name', 'Job Title', 'Overall Progress %', 'Completion Date', 'DEWA Email ID')
1 (1, 'Ismail', 'Program Manager', 1, '7th April', 'ismail.mubarack@dewa.gov.ae')
2 (2, 'Chandini', 'Change Manager & Design thinking facilitators', 1, '12th April', 'Chandini.palani@dewa.gov.ae')
3 (3, 'Saravana Kumar', 'Business Analyst', 1, '11th April', 'Saravanakumar.s@dewa.gov.ae')
4 (4, 'Nixson Jesuraj', 'Business Analyst', 1, '11th April', 'nixson.jesuraj@dewa.gov.ae')
[rerun: b16]


python3 - <<'EOF'
import openpyxl
wb = openpyxl.load_workbook('/Users/khalidbinkalban/Downloads/DEWA Course Tracking sheet 12thApril2026.xlsx')
ws = wb.active
print("All rows:")
for i, row in enumerate(ws.iter_rows(values_only=True)):
    if i == 0: continue  # skip header
    print(i, row)
EOF

Read all Ducont Excel rows


All rows:
1 (1, 'Ismail', 'Program Manager', 1, '7th April', 'ismail.mubarack@dewa.gov.ae')
2 (2, 'Chandini', 'Change Manager & Design thinking facilitators', 1, '12th April', 'Chandini.palani@dewa.gov.ae')
3 (3, 'Saravana Kumar', 'Business Analyst', 1, '11th April', 'Saravanakumar.s@dewa.gov.ae')
4 (4, 'Nixson Jesuraj', 'Business Analyst', 1, '11th April', 'nixson.jesuraj@dewa.gov.ae')
5 (5, 'Ankur Jain', 'Power Platform & Copilot Trainer', 1, '11th April', 'ankur.jain@dewa.gov.ae')
6 (6, 'Anusha', 'Power Platform & Copilot Trainer + Open Technology', 1, '11th April', 'anusha.gounder@dewa.gov.ae')
7 (7, 'Nora', 'Communication Specialist', 1, '12th April', 'nora.khaled@dewa.gov.ae')
8 (8, 'Ashwin Kaleeswaran', 'Solution Architect', 1, '11th April', 'ashwin.kaleeswaran@dewa.gov.ae')
9 (9, 'Fatehali', 'Designer', 1, '12th April', 'fatehali.shaikh@dewa.gov.ae')
10 (10, 'Asjad Lakhani', 'Lead Agentic Ai Developer', 1, '12th April', 'asjad.lakhani@dewa.gov.ae')
11 (11, 'Abeth', 'Microsoft Administrator', 1, '11th April', 'abeth.siluvairajan@dewa.gov.ae')
12 (12, 'Priyanka Geethik', 'Lead Agentic Ai Developer', 1, '12th April', None)
13 (13, 'Sumit Kumar\xa0', 'Senior Agentic Ai Developer', 1, '11th April', 'sumit.kumar@dewa.gov.ae')
14 (14, 'Anjana Elaveetil', 'Power Platform & Agentic AI Developer', 1, '12th April', 'anjana.sukumaran@dewa.gov.ae')
15 (15, 'Prem Kishore', 'Power Platform & Agentic AI Developer', 1, '7th April', 'prem.kishore@dewa.gov.ae')
16 (16, 'Sumathi Malikarjun', 'Power Platform & Agentic AI Developer', 1, '12th April', 'sumathi.malikarjun@dewa.gov.ae')
17 (17, 'Mohammad Sajid', 'Power Platform & Agentic AI Developer', 1, '12th April', 'mohammadsajid.r@dewa.gov.in')
18 (18, 'Tharakeswar', 'Lead Agentic Ai Developer', 1, '9th April', 'tharakeswar.karakambadi@dewa.gov.ae')
19 (19, 'Akash', 'Senior Agentic Ai Developer', 1, '11th April', 'Akash.Rankhamb@dewa.gov.ae')
20 (20, 'Kamalesh ', 'Power Platform & Agentic AI Developer', 1, '7th April', 'kamalesh.karmegam@dewa.gov.ae')
21 (21, 'Suriyakumar', 'Power Platform & Agentic Developer', 1, '7th April', 'suriya.kumar@dewa.gov.ae')
22 (22, 'Sunil Sahu', 'Lead Agentic Ai Developer', 1, '12th April', None)
23 (23, 'Athish', 'Power Platform & Agentic Developer', 1, '7th April', 'athish.venkatesan@dewa.gov.ae')
24 (24, 'Subhash Chavan', 'Power Platform & Agentic AI Developer', 1, '11 th April ', 'Subhash.chavan@dewa.gov.ae')
25 (25, 'Sekkizhar', 'EA', 1, '12th April', None)
26 (26, 'Selvadurai', 'Ai Architect', 1, '12th April', None)
27 (27, 'Sajid Salim', 'Lead Emerging Technology', 1, '12th April', None)
28 (28, 'Shilkka', 'BA', 1, '11th April', 'NA')
29 (29, 'Rakul', 'Power Platform & Agentic AI Developer', 1, '7th April', 'G.Rakul@dewa.gov.ae')
30 (None, None, None, None, None, None)
31 (None, None, None, None, None, None)
32 (None, None, None, None, None, None)
33 (None, None, None, None, None, None)
34 (None, None, None, None, None, None)
35 (None, None, None, None, None, None)
[rerun: b17]


All Ducont are now at 100%. Let me now update the dashboard — all Ducont to 100%, plus the manually specified DEWA completions.


770	    { name:'Asjad Lakhani',                  pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
771	    { name:'Abeth',                          pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
772	    { name:'Priyanka Geethik',               pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
773	    { name:'Sumit Kumar',                    pct:18,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
774	    { name:'Anjana Elaveetil',               pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
775	    { name:'Prem Kishore',                   pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
776	    { name:'Sumathi Malikarjun',             pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
777	    { name:'Mohammad Sajid',                 pct:40,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
778	    { name:'Tharakeswar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
779	    { name:'Akash',                          pct:60,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
780	    { name:'Kamalesh',                       pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
781	    { name:'Suriyakumar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Apr 1' },
782	    { name:'Sunil Sahu',                     pct:5,   mins:0,       grp:'Ducont',                   started:'Apr 3' },
783	    { name:'Athish',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
784	    { name:'Subhash Chavan',                 pct:100, mins:0,       grp:'Ducont',                   started:'Mar 30' },
785	    { name:'Sekkizhar',                      pct:62,  mins:0,       grp:'Ducont',                   started:null },
786	    { name:'Selvadurai',                     pct:20,  mins:0,       grp:'Ducont',                   started:'Apr 3' },
787	    { name:'Sajid Salim',                    pct:19,  mins:0,       grp:'Ducont',                   started:null },
788	    { name:'Shilkka',                        pct:38,  mins:0,       grp:'Ducont',                   started:'Mar 29' },
789	    { name:'Rakul',                          pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
790	  ];
791
792	  var DATA = [];
793	  for (var i = 0; i < RAW.length; i++) {
794	    var r    = RAW[i];
795	    var done = Math.round(r.pct / 100 * TOTAL);
796	    var status = (!r.started && r.pct === 0) ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';
797	    var week   = done === 0 ? 0 : done <= 31 ? 1 : done <= 62 ? 2 : 3;
798	    var parts  = r.name.split(' ');
799	    var init   = ((parts[0] || '')[0] || '') + ((parts[1] || '')[0] || '');
800	    var batch = (!r.started || r.started.indexOf('Apr') > -1) ? 2 : 1;
801	    DATA.push({
802	      name: r.name, pct: r.pct, done: done,
803	      remaining: TOTAL - done,
804	      mins: r.mins, grp: r.grp,
805	      status: status, week: week,
806	      initials: init.toUpperCase(),
807	      pal: PALS[i % PALS.length],
808	      started: r.started || null,
809	      batch: batch
810	    });
811	  }
812
813	  /* ── STATS ── */
814	  var totalPct = 0, inProg = 0, notStarted = 0, totalMins = 0;
815	  for (var j = 0; j < DATA.length; j++) {
816	    totalPct += DATA[j].pct;
817	    totalMins += DATA[j].mins;
818	    if (DATA[j].status === 'in-progress') inProg++;
819	    if (DATA[j].status === 'not-started') notStarted++;
820	  }
821	  var avg = Math.round(totalPct / DATA.length);
822	  var top = DATA.slice().sort(function(a,b){ return b.done - a.done; })[0];
823
824	  document.getElementById('m-avg').textContent   = avg;
825	  document.getElementById('m-mins').textContent  = Math.round(totalMins).toLocaleString();
826	  document.getElementById('s-avg').textContent   = avg;
827	  document.getElementById('s-prog').textContent  = inProg;
828	  document.getElementById('s-notstarted').textContent = notStarted;
829

    { name:'Asjad Lakhani',                  pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Abeth',                          pct:30,  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:54,  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:40,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
    { name:'Tharakeswar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Akash',                          pct:60,  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:62,  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 && r.pct === 0) ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';
    var week   = done === 0 ? 0 : done <= 31 ? 1 : done <= 62 ? 2 : 3;
    var parts  = r.name.split(' ');
    var init   = ((parts[0] || '')[0] || '') + ((parts[1] || '')[0] || '');
    var batch = (!r.started || r.started.indexOf('Apr') > -1) ? 2 : 1;
    DATA.push({
      name: r.name, pct: r.pct, done: done,
      remaining: TOTAL - done,
      mins: r.mins, grp: r.grp,
      status: status, week: week,
      initials: init.toUpperCase(),
      pal: PALS[i % PALS.length],
      started: r.started || null,
      batch: batch
    });
  }

  /* ── STATS ── */
  var totalPct = 0, inProg = 0, notStarted = 0, totalMins = 0;
  for (var j = 0; j < DATA.length; j++) {
    totalPct += DATA[j].pct;
    totalMins += DATA[j].mins;
    if (DATA[j].status === 'in-progress') inProg++;
    if (DATA[j].status === 'not-started') notStarted++;
  }
  var avg = Math.round(totalPct / DATA.length);
  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;


742	    { name:'Moaza Alhajeri',                    pct:10,  mins:129.75,  grp:'Innovation & The Future',     started:'Mar 26' },
743	    { name:'Shahul Hameed Mohideen Abdul Kadar',pct:2,   mins:36.0,    grp:'Innovation & The Future',     started:'Mar 26' },
744	    { name:'Saeed Aldosari',                    pct:2,   mins:15.25,   grp:'Innovation & The Future',     started:'Apr 6' },
745	    { name:'Yaseen Tahir',                      pct:2,   mins:36.25,   grp:'Innovation & The Future',     started:'Apr 8' },
746	    { name:'Carl Apolinario',                   pct:2,   mins:0,       grp:'Innovation & The Future',     started:null },
747	    { name:'Abdallah Alkamali',                 pct:2,   mins:18.5,    grp:'Innovation & The Future',     started:'Apr 9' },
748	    { name:'Ebtesam Almarzooqi',                pct:2,   mins:2.5,     grp:'Innovation & The Future',     started:'Apr 9' },
749	    { name:'Ibaad Khot',                        pct:0,   mins:3.75,    grp:'Innovation & The Future',     started:'Apr 9' },
750	    { name:'Hessa Alyassi',                     pct:0,   mins:3.75,    grp:'Innovation & The Future',     started:'Apr 9' },
751	    { name:'Prasanth Mathavan',                 pct:0,   mins:0,       grp:'Innovation & The Future',     started:null },
752	    { name:'Marouane Basta',                    pct:75,  mins:878.25,  grp:'Digital DEWA',                started:'Mar 30' },
753	    { name:'Shahala Cheralakodan',              pct:50,  mins:556.75,  grp:'Digital DEWA',                started:'Apr 1' },
754	    { name:'Haseeb Vadakke Painkal',            pct:25,  mins:222.25,  grp:'Digital DEWA',                started:'Apr 1' },
755	    { name:'Ummehani Rangwala',                 pct:16,  mins:211.75,  grp:'Digital DEWA',                started:'Apr 7' },
756	    { name:'Rakesh Gulaganji',                  pct:16,  mins:178.0,   grp:'Digital DEWA',                started:'Apr 4' },
757	    { name:'Sachin Patil',                      pct:10,  mins:74.75,   grp:'Digital DEWA',                started:'Apr 7' },
758	    { name:'Muhammed Shafi',                    pct:0,   mins:3.75,    grp:'Digital DEWA',                started:'Apr 8' },
759	    { name:'Mohammed Fowza',                    pct:0,   mins:0,       grp:'Digital DEWA',                started:null },
760	    { name:'Mohammed Ayub',                     pct:0,   mins:0,       grp:'Digital DEWA',                started:null },
761	    { name:'Ismail',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
762	    { name:'Chandini Palani',                pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
763	    { name:'Saravana Kumar',                 pct:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
764	    { name:'Nixson Jesuraj',                 pct:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
765	    { name:'Ankur Jain',                     pct:73,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
766	    { name:'Anusha Gounder',                 pct:73,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
767	    { name:'Nora Khaled',                    pct:17,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
768	    { name:'Ashwin Kaleeswaran',             pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 28' },
769	    { name:'Fatehali Shaikh',                pct:76,  mins:0,       grp:'Ducont',                   started:'Mar 26' },
770	    { name:'Asjad Lakhani',                  pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
771	    { name:'Abeth',                          pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },

    { name:'Moaza Alhajeri',                    pct:10,  mins:129.75,  grp:'Innovation & The Future',     started:'Mar 26' },
    { name:'Shahul Hameed Mohideen Abdul Kadar',pct:2,   mins:36.0,    grp:'Innovation & The Future',     started:'Mar 26' },
    { name:'Saeed Aldosari',                    pct:2,   mins:15.25,   grp:'Innovation & The Future',     started:'Apr 6' },
    { name:'Yaseen Tahir',                      pct:2,   mins:36.25,   grp:'Innovation & The Future',     started:'Apr 8' },
    { name:'Carl Apolinario',                   pct:2,   mins:0,       grp:'Innovation & The Future',     started:null },
    { name:'Abdallah Alkamali',                 pct:2,   mins:18.5,    grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Ebtesam Almarzooqi',                pct:2,   mins:2.5,     grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Ibaad Khot',                        pct:0,   mins:3.75,    grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Hessa Alyassi',                     pct:0,   mins:3.75,    grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Prasanth Mathavan',                 pct:0,   mins:0,       grp:'Innovation & The Future',     started:null },
    { name:'Marouane Basta',                    pct:75,  mins:878.25,  grp:'Digital DEWA',                started:'Mar 30' },
    { name:'Shahala Cheralakodan',              pct:50,  mins:556.75,  grp:'Digital DEWA',                started:'Apr 1' },
    { name:'Haseeb Vadakke Painkal',            pct:25,  mins:222.25,  grp:'Digital DEWA',                started:'Apr 1' },
    { name:'Ummehani Rangwala',                 pct:16,  mins:211.75,  grp:'Digital DEWA',                started:'Apr 7' },
    { name:'Rakesh Gulaganji',                  pct:16,  mins:178.0,   grp:'Digital DEWA',                started:'Apr 4' },
    { name:'Sachin Patil',                      pct:10,  mins:74.75,   grp:'Digital DEWA',                started:'Apr 7' },
    { name:'Muhammed Shafi',                    pct:0,   mins:3.75,    grp:'Digital DEWA',                started:'Apr 8' },
    { name:'Mohammed Fowza',                    pct:0,   mins:0,       grp:'Digital DEWA',                started:null },
    { name:'Mohammed Ayub',                     pct:0,   mins:0,       grp:'Digital DEWA',                started:null },
    { 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:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Nixson Jesuraj',                 pct:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Ankur Jain',                     pct:73,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Anusha Gounder',                 pct:73,  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:76,  mins:0,       grp:'Ducont',                   started:'Mar 26' },
    { name:'Asjad Lakhani',                  pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Abeth',                          pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },


Now I'll update all the DEWA completions and all Ducont to 100% in one go:


Edit

    { name:'Muhammad Bilal Arif',               pct:60,  mins:578.25,  grp:'Innovation & The Future',     started:'Mar 28' },
    { name:'Ashish Agarwal',                    pct:85,  mins:1643.5,  grp:'Innovation & The Future',     started:'Mar 29' },
    { name:'Ayesha Sarwashi',                   pct:95,  mins:1014.0,  grp:'Innovation & The Future',     started:'Mar 26' },

    { name:'Muhammad Bilal Arif',               pct:100, mins:578.25,  grp:'Innovation & The Future',     started:'Mar 28' },
    { name:'Ashish Agarwal',                    pct:100, mins:1643.5,  grp:'Innovation & The Future',     started:'Mar 29' },
    { name:'Ayesha Sarwashi',                   pct:100, mins:1014.0,  grp:'Innovation & The Future',     started:'Mar 26' },