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>78</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">78</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>
    <button class="dept-btn" onclick="setDept('POWER & WATER PLANNING',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
      Power & Water
    </button>
    <button class="dept-btn" onclick="setDept('BS&HR',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
      BS&HR
    </button>
    <button class="dept-btn" onclick="setDept('Transmission Power',this)">
      <svg width="9" height="9" 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>
      Transmission
    </button>
    <button class="dept-btn" onclick="setDept('Generation',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="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
      Generation
    </button>
    <button class="dept-btn" onclick="setDept('Business Dev & Excellence',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
      Biz Dev
    </button>
    <button class="dept-btn" onclick="setDept('Internal Audit',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
      Internal Audit
    </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:'Sultan Alzaabi',                    pct:16,  mins:149.75,  grp:'POWER & WATER PLANNING',      started:'Apr 7' },
    { name:'Sahaya Vinoth',                     pct:0,   mins:0,       grp:'BS&HR',                       started:null },
    { name:'Mohd Abu Atiyeh',                   pct:10,  mins:93.5,    grp:'BS&HR',                       started:'Apr 8' },
    { name:'Saif Bin Haider',                   pct:2,   mins:15.0,    grp:'Transmission Power',          started:'Apr 9' },
    { name:'Aisha Mubarak',                     pct:0,   mins:2.5,     grp:'Transmission Power',          started:'Apr 9' },
    { name:'Ahmad AlSuwaidi',                   pct:2,   mins:30.25,   grp:'Generation',                  started:'Apr 8' },
    { name:'Jayakumar Vandavasi Karunamurthy',  pct:25,  mins:125.0,   grp:'Business Dev & Excellence',   started:'Apr 9' },
    { name:'Mahmoud Tarek Rezk',                pct:0,   mins:0,       grp:'Business Dev & Excellence',   started:null },
    { name:'Saeed M Alkamali',                  pct:0,   mins:0,       grp:'Internal Audit',              started:null },
    { name:'Ismail',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Chandini Palani',                pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Saravana Kumar',                 pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Nixson Jesuraj',                 pct:48,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Ankur Jain',                     pct:45,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Anusha Gounder',                 pct:40,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Nora Khaled',                    pct:17,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Ashwin Kaleeswaran',             pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 28' },
    { name:'Fatehali Shaikh',                pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 26' },
    { name:'Asjad Lakhani',                  pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Abeth',                          pct:15,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Priyanka Geethik',               pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Sumit Kumar',                    pct:18,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Anjana Elaveetil',               pct:43,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Prem Kishore',                   pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Sumathi Malikarjun',             pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Mohammad Sajid',                 pct:12,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
    { name:'Tharakeswar',                    pct:55,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Akash',                          pct:48,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
    { name:'Kamalesh',                       pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Suriyakumar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Sunil Sahu',                     pct:5,   mins:0,       grp:'Ducont',                   started:'Apr 3' },
    { name:'Athish',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Subhash Chavan',                 pct:100, mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Sekkizhar',                      pct:33,  mins:0,       grp:'Ducont',                   started:null },
    { name:'Selvadurai',                     pct:20,  mins:0,       grp:'Ducont',                   started:'Apr 3' },
    { name:'Sajid Salim',                    pct:19,  mins:0,       grp:'Ducont',                   started:null },
    { name:'Shilkka',                        pct:38,  mins:0,       grp:'Ducont',                   started:'Mar 29' },
    { name:'Rakul',                          pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
  ];

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

  /* ── STATS ── */
  var totalPct = 0, inProg = 0, notStarted = 0, totalMins = 0;
  for (var j = 0; j < DATA.length; j++) {
    totalPct += DATA[j].pct;
    totalMins += DATA[j].mins;
    if (DATA[j].status === 'in-progress') inProg++;
    if (DATA[j].status === 'not-started') notStarted++;
  }
  var avg = Math.round(totalPct / DATA.length);
  var top = DATA.slice().sort(function(a,b){ return b.done - a.done; })[0];

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

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

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

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

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

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

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

  function deptShort(g) {
    if (g === '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>

-    var status = !r.started ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';

+    var status = (!r.started && r.pct === 0) ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';


Done. Refresh — users with actual progress will now correctly show "In Progress" regardless of whether a start date was recorded.


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_10thApril2026.xlsx'

add this list progress for Ducont employees


Bash

python3 -c "
import openpyxl
wb = openpyxl.load_workbook('/Users/khalidbinkalban/Downloads/DEWA Course Tracking sheet_10thApril2026.xlsx', data_only=True)
ws = wb.active
for row in ws.iter_rows(values_only=True):
    if any(v is not None for v in row):
        print(row)
" 2>&1

Read updated Ducont Excel file


('S\xa0NO', 'Resource Name', 'Job Title', 'Course Start date', 'Overall Progress %', 'Completion Date', 'DEWA Email ID')
(1, 'Ismail', 'Program Manager', datetime.datetime(2026, 3, 27, 0, 0), 1, '7th April', 'ismail.mubarack@dewa.gov.ae')
(2, 'Chandini', 'Change Manager & Design thinking facilitators', datetime.datetime(2026, 3, 27, 0, 0), 0.52, None, 'Chandini.palani@dewa.gov.ae')
(3, 'Saravana Kumar', 'Business Analyst', datetime.datetime(2026, 3, 27, 0, 0), 0.8, None, 'Saravanakumar.s@dewa.gov.ae')
(4, 'Nixson Jesuraj', 'Business Analyst', datetime.datetime(2026, 3, 27, 0, 0), 0.8, None, 'nixson.jesuraj@dewa.gov.ae')
(5, 'Ankur Jain', 'Power Platform & Copilot Trainer', datetime.datetime(2026, 3, 30, 0, 0), 0.73, None, 'ankur.jain@dewa.gov.ae')
(6, 'Anusha', 'Power Platform & Copilot Trainer + Open Technology', datetime.datetime(2026, 3, 30, 0, 0), 0.73, None, 'anusha.gounder@dewa.gov.ae')
(7, 'Nora', 'Communication Specialist', datetime.datetime(2026, 3, 30, 0, 0), 0.17, None, 'nora.khaled@dewa.gov.ae')
(8, 'Ashwin Kaleeswaran', 'Solution Architect', datetime.datetime(2026, 3, 28, 0, 0), 0.52, None, 'ashwin.kaleeswaran@dewa.gov.ae')
(9, 'Fatehali', 'Designer', datetime.datetime(2026, 3, 26, 0, 0), 0.76, None, 'fatehali.shaikh@dewa.gov.ae')
(10, 'Asjad Lakhani', 'Lead Agentic Ai Developer', datetime.datetime(2026, 3, 31, 0, 0), 0.54, None, 'asjad.lakhani@dewa.gov.ae')
(11, 'Abeth', 'Microsoft Administrator', datetime.datetime(2026, 4, 1, 0, 0), 0.3, None, 'abeth.siluvairajan@dewa.gov.ae')
(12, 'Priyanka Geethik', 'Lead Agentic Ai Developer', datetime.datetime(2026, 3, 31, 0, 0), 0.6, None, None)
(13, 'Sumit Kumar\xa0', 'Senior Agentic Ai Developer', datetime.datetime(2026, 4, 1, 0, 0), 0.18, None, None)
(14, 'Anjana Elaveetil', 'Power Platform & Agentic AI Developer', datetime.datetime(2026, 3, 31, 0, 0), 0.54, None, 'anjana.sukumaran@dewa.gov.ae')
(15, 'Prem Kishore', 'Power Platform & Agentic AI Developer', datetime.datetime(2026, 3, 31, 0, 0), 1, '7th April', 'prem.kishore@dewa.gov.ae')
(16, 'Sumathi Malikarjun', 'Power Platform & Agentic AI Developer', datetime.datetime(2026, 4, 1, 0, 0), 0.3, None, 'sumathi.malikarjun@dewa.gov.ae')
(17, 'Mohammad Sajid', 'Power Platform & Agentic AI Developer', datetime.datetime(2026, 4, 2, 0, 0), 0.4, None, 'mohammadsajid.r@dewa.gov.in')
(18, 'Tharakeswar', 'Lead Agentic Ai Developer', datetime.datetime(2026, 3, 27, 0, 0), 1, '9th April', 'tharakeswar.karakambadi@dewa.gov.ae')
(19, 'Akash', 'Senior Agentic Ai Developer', datetime.datetime(2026, 4, 2, 0, 0), 0.6, None, 'Akash.Rankhamb@dewa.gov.ae')
(20, 'Kamalesh ', 'Power Platform & Agentic AI Developer', datetime.datetime(2026, 3, 31, 0, 0), 1, '7th April', 'kamalesh.karmegam@dewa.gov.ae')
(21, 'Suriyakumar', 'Power Platform & Agentic Developer', datetime.datetime(2026, 4, 1, 0, 0), 1, '7th April', 'suriya.kumar@dewa.gov.ae')
(22, 'Sunil Sahu', 'Lead Agentic Ai Developer', datetime.datetime(2026, 4, 3, 0, 0), 0.05, None, None)
(23, 'Athish', 'Power Platform & Agentic Developer', datetime.datetime(2026, 3, 31, 0, 0), 1, '7th April', 'athish.venkatesan@dewa.gov.ae')
(24, 'Subhash Chavan', 'Power Platform & Agentic AI Developer', datetime.datetime(2026, 3, 30, 0, 0), 1, '6th April', 'Subhash.chavan@dewa.gov.ae')
(25, 'Sekkizhar', 'EA', None, 0.62, None, None)
(26, 'Selvadurai', 'Ai Architect', datetime.datetime(2026, 4, 3, 0, 0), 0.2, None, None)
(27, 'Sajid Salim', 'Lead Emerging Technology', None, 0.19, None, None)
(28, 'Shilkka', 'BA', datetime.datetime(2026, 3, 29, 0, 0), 0.38, None, 'NA')
(29, 'Rakul', 'Power Platform & Agentic AI Developer', datetime.datetime(2026, 3, 31, 0, 0), 1, '7th April', 'G.Rakul@dewa.gov.ae')
[rerun: b15]


Got the updates. Several Ducont learners progressed significantly, and Tharakeswar is now a new completion at 100%.


790	    { name:'Aisha Mubarak',                     pct:0,   mins:2.5,     grp:'Transmission Power',          started:'Apr 9' },
791	    { name:'Ahmad AlSuwaidi',                   pct:2,   mins:30.25,   grp:'Generation',                  started:'Apr 8' },
792	    { name:'Jayakumar Vandavasi Karunamurthy',  pct:25,  mins:125.0,   grp:'Business Dev & Excellence',   started:'Apr 9' },
793	    { name:'Mahmoud Tarek Rezk',                pct:0,   mins:0,       grp:'Business Dev & Excellence',   started:null },
794	    { name:'Saeed M Alkamali',                  pct:0,   mins:0,       grp:'Internal Audit',              started:null },
795	    { name:'Ismail',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
796	    { name:'Chandini Palani',                pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
797	    { name:'Saravana Kumar',                 pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
798	    { name:'Nixson Jesuraj',                 pct:48,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
799	    { name:'Ankur Jain',                     pct:45,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
800	    { name:'Anusha Gounder',                 pct:40,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
801	    { name:'Nora Khaled',                    pct:17,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
802	    { name:'Ashwin Kaleeswaran',             pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 28' },
803	    { name:'Fatehali Shaikh',                pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 26' },
804	    { name:'Asjad Lakhani',                  pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
805	    { name:'Abeth',                          pct:15,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
806	    { name:'Priyanka Geethik',               pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
807	    { name:'Sumit Kumar',                    pct:18,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
808	    { name:'Anjana Elaveetil',               pct:43,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
809	    { name:'Prem Kishore',                   pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
810	    { name:'Sumathi Malikarjun',             pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
811	    { name:'Mohammad Sajid',                 pct:12,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
812	    { name:'Tharakeswar',                    pct:55,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
813	    { name:'Akash',                          pct:48,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
814	    { name:'Kamalesh',                       pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
815	    { name:'Suriyakumar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Apr 1' },
816	    { name:'Sunil Sahu',                     pct:5,   mins:0,       grp:'Ducont',                   started:'Apr 3' },
817	    { name:'Athish',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
818	    { name:'Subhash Chavan',                 pct:100, mins:0,       grp:'Ducont',                   started:'Mar 30' },
819	    { name:'Sekkizhar',                      pct:33,  mins:0,       grp:'Ducont',                   started:null },
820	    { name:'Selvadurai',                     pct:20,  mins:0,       grp:'Ducont',                   started:'Apr 3' },
821	    { name:'Sajid Salim',                    pct:19,  mins:0,       grp:'Ducont',                   started:null },
822	    { name:'Shilkka',                        pct:38,  mins:0,       grp:'Ducont',                   started:'Mar 29' },
823	    { name:'Rakul',                          pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
824	  ];

    { name:'Aisha Mubarak',                     pct:0,   mins:2.5,     grp:'Transmission Power',          started:'Apr 9' },
    { name:'Ahmad AlSuwaidi',                   pct:2,   mins:30.25,   grp:'Generation',                  started:'Apr 8' },
    { name:'Jayakumar Vandavasi Karunamurthy',  pct:25,  mins:125.0,   grp:'Business Dev & Excellence',   started:'Apr 9' },
    { name:'Mahmoud Tarek Rezk',                pct:0,   mins:0,       grp:'Business Dev & Excellence',   started:null },
    { name:'Saeed M Alkamali',                  pct:0,   mins:0,       grp:'Internal Audit',              started:null },
    { 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' },
  ];


Edit

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

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