It's working — returns 200. The URL is:

**`https://my-workspace.tailbd7b77.ts.net/course-dashboard.html`**

A few things to check on your end:
1. **Are you on the same Tailscale network?** It's "tailnet only" (not a public Funnel), so the device you're opening it on must be connected to your Tailscale account.
2. **Is Tailscale running** on the device you're browsing from?

If you want it accessible from any device without Tailscale, I can enable public Funnel — just say the word.


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

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


i am outside my network please fix it and also I want to share it with someone else


Bash

tailscale funnel --bg http://localhost:80 2>&1

Enable Tailscale Funnel to make the server publicly accessible


Available on the internet:

https://my-workspace.tailbd7b77.ts.net/
|-- proxy http://localhost:80

Funnel started and running in the background.
To disable the proxy, run: tailscale funnel --https=443 off
[rerun: b4]


curl -s -o /dev/null -w "%{http_code}" https://my-workspace.tailbd7b77.ts.net/course-dashboard.html

Verify public access works


200
[rerun: b5]


It's now publicly accessible. Share this link with anyone:

**`https://my-workspace.tailbd7b77.ts.net/course-dashboard.html`**

No Tailscale required — works from any browser, anywhere. Note that it stays live as long as your Mac Mini is on and the Python server is running. If it ever goes down, just let me know and I'll restart it.


rote the box on top that showing top rformer Khalid Bin Kalban


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

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


124:    .performer-card {
129:    .performer-card::before {
318:      .performer-card { min-width:unset; }
484:    <div class="performer-card">


Edit

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

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


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

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

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

<!DOCTYPE html>

  <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" />

      <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>

    Learning Analytics

    DEWA — Udemy Platform

Live data

      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
        <rect x="3" y="4" width="18" height="18" rx="2"/>
        <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
      </svg>
      Mar 18 – Apr 6, 2026

  <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>

        <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

AI Coder: Vibe Coder
to Agentic Engineer

          <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>
          29 / 43 enrolled — Batch 1

          <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>
          93 sessions total

          <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>
          3 week program

          <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. —% complete

          <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>
          — min watched total

        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#e6a93a" stroke-width="1.8" stroke-linecap="round">
          <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
          <path d="M4 22h16"/>
          <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
          <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
          <path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/>
        </svg>
        Top Performer

—

—

        <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>

29 /43

Enrolled — Batch 1

        <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 departments

        <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>

—%

Average Progress

        <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

        <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>

—

In Progress

        <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

        <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>

—

Not Started

        <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

      <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
      29 learners

          <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>

        <input class="search-input" id="search-input" type="text" placeholder="Search learner..."/>

        <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="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>
        High to Low
      </button>

    Dept:
    <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('DISTRIBUTION POWER',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>
      Distribution Power
    </button>

Learner

Progress

Done %

Status

      <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.

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

+    .performer-card:hover { transform:rotate(0deg); }

background:radial-gradient(circle at 80% 20%,rgba(184,130,42,.28) 0%,transparent 65%);


Done. The Top Performer card now sits at a slight 2° tilt, and straightens out on hover. Refresh the page to see it.


still the black box of the top performer is there please remove it completely


483

484

485

486
487

488

489	        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#e6a93a" stroke-width="1.8" stroke-linecap="round">
490	          <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
491	          <path d="M4 22h16"/>
492	          <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
493	          <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
494	          <path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/>
495	        </svg>
496	        Top Performer
497

498
—

499

500

501

502
—

503

504

505

506

507
[result-id: r5]

        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#e6a93a" stroke-width="1.8" stroke-linecap="round">
          <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
          <path d="M4 22h16"/>
          <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
          <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
          <path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/>
        </svg>
        Top Performer

—

—


-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#e6a93a" stroke-width="1.8" stroke-linecap="round">


Done. The Top Performer card is removed. Refresh the page.


add the starting date for each + the website is not showing the name


710	  }
711
712	  /* ── STATS ── */
713	  var totalPct = 0, inProg = 0, notStarted = 0, totalMins = 0;
714	  for (var j = 0; j < DATA.length; j++) {
715	    totalPct += DATA[j].pct;
716	    totalMins += DATA[j].mins;
717	    if (DATA[j].status === 'in-progress') inProg++;
718	    if (DATA[j].status === 'not-started') notStarted++;
719	  }
720	  var avg = Math.round(totalPct / DATA.length);
721	  var top = DATA.slice().sort(function(a,b){ return b.done - a.done; })[0];
722
723	  document.getElementById('m-avg').textContent   = avg;
724	  document.getElementById('m-mins').textContent  = Math.round(totalMins).toLocaleString();
725	  document.getElementById('s-avg').textContent   = avg;
726	  document.getElementById('s-prog').textContent  = inProg;
727	  document.getElementById('s-notstarted').textContent = notStarted;
728	  document.getElementById('p-name').textContent  = top.name;
729	  document.getElementById('p-score').textContent = top.grp;
730	  document.getElementById('p-pct').textContent   = top.pct + '%';
731	  document.getElementById('p-sub').textContent   = top.done + ' of ' + TOTAL + ' sessions';
732
733	  setTimeout(function() {
734	    document.getElementById('p-bar').style.width = top.pct + '%';
735	  }, 400);
736
737	  /* ── STATE ── */
738	  var activeStatus = 'all';
739	  var activeDept   = 'all';
740	  var sortAsc      = false;
741	  var searchQuery  = '';
742
743	  /* ── HELPERS ── */
744	  function weekInfo(w) {
745	    if (w === 0) return { cls:'w0', label:'Not yet' };
746	    if (w === 1) return { cls:'w1', label:'Week 1' };
747	    if (w === 2) return { cls:'w2', label:'Week 2' };
748	    return { cls:'w3', label:'Week 3' };
749	  }
750
751	  function statusIcon(s) {
752	    if (s === 'completed')
753	      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>';
754	    if (s === 'in-progress')
755	      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>';
756	    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>';
757	  }
758
759	  function statusLabel(s) {
[result-id: r6]

  }

  /* ── 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;
  document.getElementById('p-name').textContent  = top.name;
  document.getElementById('p-score').textContent = top.grp;
  document.getElementById('p-pct').textContent   = top.pct + '%';
  document.getElementById('p-sub').textContent   = top.done + ' of ' + TOTAL + ' sessions';

  setTimeout(function() {
    document.getElementById('p-bar').style.width = top.pct + '%';
  }, 400);

  /* ── STATE ── */
  var activeStatus = 'all';
  var activeDept   = '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>';
    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) {


Found the issue. The JavaScript still tries to update the removed performer card elements (`p-name`, `p-bar`, etc.), which crashes the script before the learner list renders — that's why names aren't showing.


  document.getElementById('p-name').textContent  = top.name;
  document.getElementById('p-score').textContent = top.grp;
  document.getElementById('p-pct').textContent   = top.pct + '%';
  document.getElementById('p-sub').textContent   = top.done + ' of ' + TOTAL + ' sessions';

  setTimeout(function() {
    document.getElementById('p-bar').style.width = top.pct + '%';
  }, 400);


  document.getElementById('p-name').textContent  = top.name;
  document.getElementById('p-score').textContent = top.grp;
  document.getElementById('p-pct').textContent   = top.pct + '%';
  document.getElementById('p-sub').textContent   = top.done + ' of ' + TOTAL + ' sessions';

  setTimeout(function() {
    document.getElementById('p-bar').style.width = top.pct + '%';
  }, 400);

<!DOCTYPE html>

  <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" />

      <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>

    Learning Analytics

    DEWA — Udemy Platform

Live data

      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
        <rect x="3" y="4" width="18" height="18" rx="2"/>
        <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
      </svg>
      Mar 18 – Apr 6, 2026

  <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>

        <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

AI Coder: Vibe Coder
to Agentic Engineer

          <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>
          29 / 43 enrolled — Batch 1

          <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>
          93 sessions total

          <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>
          3 week program

          <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. —% complete

          <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>
          — min watched total

        <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>

29 /43

Enrolled — Batch 1

        <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 departments

        <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>

—%

Average Progress

        <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

        <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>

—

In Progress

        <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

        <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>

—

Not Started

        <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

      <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
      29 learners

          <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>

        <input class="search-input" id="search-input" type="text" placeholder="Search learner..."/>

        <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="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>
        High to Low
      </button>

    Dept:
    <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('DISTRIBUTION POWER',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>
      Distribution Power
    </button>

Learner

Progress

Done %

Status

      <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.

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

document.getElementById('s-avg').textContent   = avg;

document.getElementById('s-prog').textContent  = inProg;

-  document.getElementById('p-name').textContent  = top.name;

-  document.getElementById('p-score').textContent = top.grp;

-  document.getElementById('p-pct').textContent   = top.pct + '%';

-  document.getElementById('p-sub').textContent   = top.done + ' of ' + TOTAL + ' sessions';

-    document.getElementById('p-bar').style.width = top.pct + '%';


Now also fix the `started` date — it's currently shown under the dept name but let me make it its own visible line so it's clearer:


800	      return;
801	    }
802	    empty.style.display = 'none';
803
804	    var html = '';
805	    for (var i = 0; i < rows.length; i++) {
806	      var l  = rows[i];
807	      var wk = weekInfo(l.week);
808	      var delay = (i * 0.03).toFixed(2) + 's';
809	      var minsStr = l.mins < 60
810	        ? Math.round(l.mins) + ' min'
811	        : (l.mins / 60).toFixed(1) + ' hr';
812	      html += '
';
813	      html +=   '
';
814	      html +=     '
' + l.initials + '
';
815	      html +=     '
';
816	      html +=       '
' + l.name + '
';
817	      html +=       '
' + deptShort(l.grp) + (l.started ? ' · Started ' + l.started : '') + '
';
818	      html +=     '
';
819	      html +=   '
';
820	      html +=   '
';
821	      html +=     '
';
822	      html +=       '' + l.done + '';
823	      html +=       'of ' + TOTAL + ' sessions · ' + minsStr + ' watched';
824	      html +=     '
';
825	      html +=     '

';
826	      html +=   '
';
827	      html +=   '
' + l.pct + '%
';
828	      html +=   '
' + statusIcon(l.status) + statusLabel(l.status) + '
';
829	      /* card footer shown only on mobile via CSS */
[result-id: r7]

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 += '
';
      html +=   '
';
      html +=     '
' + l.initials + '
';
      html +=     '
';
      html +=       '
' + l.name + '
';
      html +=       '
' + deptShort(l.grp) + (l.started ? ' · Started ' + l.started : '') + '
';
      html +=     '
';
      html +=   '
';
      html +=   '
';
      html +=     '
';
      html +=       '' + l.done + '';
      html +=       'of ' + TOTAL + ' sessions · ' + minsStr + ' watched';
      html +=     '
';
      html +=     '

';
      html +=   '
';
      html +=   '
' + l.pct + '%
';
      html +=   '
' + statusIcon(l.status) + statusLabel(l.status) + '
';
      /* card footer shown only on mobile via CSS */


The start date is already in there — looks good. The main fix (removing broken JS references) should restore everything. Refresh the page and both the learner names and start dates should now show correctly.


make ahmad alshehhi first, then khalid Bin kalban, then Shurooq for the top


The three 100% completers will sort to the top since they have the highest progress. I just need to reorder them in the data array so Ahmed → Khalid → Shurooq comes first (JavaScript's sort is stable, so ties keep their original order).


  var RAW = [
    { name:'Muhammad Bilal Arif',            pct:36,  mins:348.25,  grp:'Innovation & The Future',  started:'Mar 28' },
    { name:'Ashish Agarwal',                 pct:85,  mins:1259.5,  grp:'Innovation & The Future',  started:'Mar 29' },
    { name:'Shahul Hameed Mohideen Abdul Kadar', pct:0, mins:0.25,  grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Muna Jassim',                    pct:10,  mins:138.5,   grp:'Innovation & The Future',  started:'Mar 24' },
    { name:'Jamil Al Hasan',                 pct:30,  mins:329.0,   grp:'Innovation & The Future',  started:'Mar 18' },
    { name:'Khalid Bin Kalban',              pct:100, mins:928.75,  grp:'Innovation & The Future',  started:'Mar 23' },
    { name:'Duaa Suleiman',                  pct:80,  mins:759.75,  grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Atif Sharif',                    pct:35,  mins:368.5,   grp:'Innovation & The Future',  started:'Mar 22' },
    { name:'Atif Waqar',                     pct:25,  mins:348.5,   grp:'Innovation & The Future',  started:'Mar 29' },
    { name:'Saleha Obaid Essa',              pct:8,   mins:90.25,   grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Elsa Prakash',                   pct:10,  mins:102.75,  grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Shurooq Ahmad Almheiri',         pct:100, mins:866.0,   grp:'Innovation & The Future',  started:'Mar 24' },
    { name:'Ahmed Alshehhi',                 pct:100, mins:1354.75, grp:'Innovation & The Future',  started:'Mar 25' },

  var RAW = [
    { name:'Ahmed Alshehhi',                 pct:100, mins:1354.75, grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Khalid Bin Kalban',              pct:100, mins:928.75,  grp:'Innovation & The Future',  started:'Mar 23' },
    { name:'Shurooq Ahmad Almheiri',         pct:100, mins:866.0,   grp:'Innovation & The Future',  started:'Mar 24' },
    { name:'Muhammad Bilal Arif',            pct:36,  mins:348.25,  grp:'Innovation & The Future',  started:'Mar 28' },
    { name:'Ashish Agarwal',                 pct:85,  mins:1259.5,  grp:'Innovation & The Future',  started:'Mar 29' },
    { name:'Shahul Hameed Mohideen Abdul Kadar', pct:0, mins:0.25,  grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Muna Jassim',                    pct:10,  mins:138.5,   grp:'Innovation & The Future',  started:'Mar 24' },
    { name:'Jamil Al Hasan',                 pct:30,  mins:329.0,   grp:'Innovation & The Future',  started:'Mar 18' },
    { name:'Duaa Suleiman',                  pct:80,  mins:759.75,  grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Atif Sharif',                    pct:35,  mins:368.5,   grp:'Innovation & The Future',  started:'Mar 22' },
    { name:'Atif Waqar',                     pct:25,  mins:348.5,   grp:'Innovation & The Future',  started:'Mar 29' },
    { name:'Saleha Obaid Essa',              pct:8,   mins:90.25,   grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Elsa Prakash',                   pct:10,  mins:102.75,  grp:'Innovation & The Future',  started:'Mar 25' },


  var RAW = [
    { name:'Muhammad Bilal Arif',            pct:36,  mins:348.25,  grp:'Innovation & The Future',  started:'Mar 28' },
    { name:'Ashish Agarwal',                 pct:85,  mins:1259.5,  grp:'Innovation & The Future',  started:'Mar 29' },
    { name:'Shahul Hameed Mohideen Abdul Kadar', pct:0, mins:0.25,  grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Muna Jassim',                    pct:10,  mins:138.5,   grp:'Innovation & The Future',  started:'Mar 24' },
    { name:'Jamil Al Hasan',                 pct:30,  mins:329.0,   grp:'Innovation & The Future',  started:'Mar 18' },
    { name:'Khalid Bin Kalban',              pct:100, mins:928.75,  grp:'Innovation & The Future',  started:'Mar 23' },
    { name:'Duaa Suleiman',                  pct:80,  mins:759.75,  grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Atif Sharif',                    pct:35,  mins:368.5,   grp:'Innovation & The Future',  started:'Mar 22' },
    { name:'Atif Waqar',                     pct:25,  mins:348.5,   grp:'Innovation & The Future',  started:'Mar 29' },
    { name:'Saleha Obaid Essa',              pct:8,   mins:90.25,   grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Elsa Prakash',                   pct:10,  mins:102.75,  grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Shurooq Ahmad Almheiri',         pct:100, mins:866.0,   grp:'Innovation & The Future',  started:'Mar 24' },
    { name:'Ahmed Alshehhi',                 pct:100, mins:1354.75, grp:'Innovation & The Future',  started:'Mar 25' },

  var RAW = [
    { name:'Ahmed Alshehhi',                 pct:100, mins:1354.75, grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Khalid Bin Kalban',              pct:100, mins:928.75,  grp:'Innovation & The Future',  started:'Mar 23' },
    { name:'Shurooq Ahmad Almheiri',         pct:100, mins:866.0,   grp:'Innovation & The Future',  started:'Mar 24' },
    { name:'Muhammad Bilal Arif',            pct:36,  mins:348.25,  grp:'Innovation & The Future',  started:'Mar 28' },
    { name:'Ashish Agarwal',                 pct:85,  mins:1259.5,  grp:'Innovation & The Future',  started:'Mar 29' },
    { name:'Shahul Hameed Mohideen Abdul Kadar', pct:0, mins:0.25,  grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Muna Jassim',                    pct:10,  mins:138.5,   grp:'Innovation & The Future',  started:'Mar 24' },
    { name:'Jamil Al Hasan',                 pct:30,  mins:329.0,   grp:'Innovation & The Future',  started:'Mar 18' },
    { name:'Duaa Suleiman',                  pct:80,  mins:759.75,  grp:'Innovation & The Future',  started:'Mar 25' },
    { name:'Atif Sharif',                    pct:35,  mins:368.5,   grp:'Innovation & The Future',  started:'Mar 22' },
    { name:'Atif Waqar',                     pct:25,  mins:348.5,   grp:'Innovation & The Future',  started:'Mar 29' },
    { name:'Saleha Obaid Essa',              pct:8,   mins:90.25,   grp:'Innovation & The Future',  started:'Mar 26' },
    { name:'Elsa Prakash',                   pct:10,  mins:102.75,  grp:'Innovation & The Future',  started:'Mar 25' },

+    { name:'Ahmed Alshehhi',                 pct:100, mins:1354.75, grp:'Innovation & The Future',  started:'Mar 25' },

+    { name:'Khalid Bin Kalban',              pct:100, mins:928.75,  grp:'Innovation & The Future',  started:'Mar 23' },

+    { name:'Shurooq Ahmad Almheiri',         pct:100, mins:866.0,   grp:'Innovation & The Future',  started:'Mar 24' },

-    { name:'Khalid Bin Kalban',              pct:100, mins:928.75,  grp:'Innovation & The Future',  started:'Mar 23' },

-    { name:'Shurooq Ahmad Almheiri',         pct:100, mins:866.0,   grp:'Innovation & The Future',  started:'Mar 24' },

-    { name:'Ahmed Alshehhi',                 pct:100, mins:1354.75, grp:'Innovation & The Future',  started:'Mar 25' },

{ name:'Ayesha Sarwashi',                pct:80,  mins:876.5,   grp:'Innovation & The Future',  started:'Mar 26' },

{ name:'Moaza Alhajeri',                 pct:10,  mins:129.75,  grp:'Innovation & The Future',  started:'Mar 26' },

{ name:'Adel Al Tamimi',                 pct:75,  mins:786.5,   grp:'Innovation & The Future',  started:'Mar 30' },


Done. Refresh and Ahmed Alshehhi will be #1, Khalid Bin Kalban #2, Shurooq #3 at the top of the list.


remote all Distribution Power employees and remove the tag also


    { name:'Moaza AlFaihan',                 pct:5,   mins:41.75,   grp:'DISTRIBUTION POWER',       started:'Mar 30' },
    { name:'Abdulaziz Alfili',               pct:0,   mins:0.25,    grp:'DISTRIBUTION POWER',       started:'Apr 1' },


    { name:'Moaza AlFaihan',                 pct:5,   mins:41.75,   grp:'DISTRIBUTION POWER',       started:'Mar 30' },
    { name:'Abdulaziz Alfili',               pct:0,   mins:0.25,    grp:'DISTRIBUTION POWER',       started:'Apr 1' },

{ name:'Shahala Cheralakodan',           pct:25,  mins:289.25,  grp:'Digital DEWA',             started:'Apr 1' },

{ name:'Haseeb Vadakke Painkal',         pct:2,   mins:62.5,    grp:'Digital DEWA',             started:'Apr 1' },

{ name:'Rakesh Gulaganji',               pct:5,   mins:96.0,    grp:'Digital DEWA',             started:'Apr 4' },

-    { name:'Moaza AlFaihan',                 pct:5,   mins:41.75,   grp:'DISTRIBUTION POWER',       started:'Mar 30' },

-    { name:'Abdulaziz Alfili',               pct:0,   mins:0.25,    grp:'DISTRIBUTION POWER',       started:'Apr 1' },


    <button class="dept-btn" onclick="setDept('DISTRIBUTION POWER',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>
      Distribution Power
    </button>


    <button class="dept-btn" onclick="setDept('DISTRIBUTION POWER',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>
      Distribution Power
    </button>

-    <button class="dept-btn" onclick="setDept('DISTRIBUTION POWER',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>


Also fix the enrolled count back to 27 and departments to 2:


<!DOCTYPE html>

  <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" />

      <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>

    Learning Analytics

    DEWA — Udemy Platform

Live data

      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
        <rect x="3" y="4" width="18" height="18" rx="2"/>
        <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
      </svg>
      Mar 18 – Apr 6, 2026

  <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>

        <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

AI Coder: Vibe Coder
to Agentic Engineer

          <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>
          29 / 43 enrolled — Batch 1

          <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>
          93 sessions total

          <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>
          3 week program

          <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. —% complete

          <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>
          — min watched total

        <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>

29 /43

Enrolled — Batch 1

        <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 departments

        <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>

—%

Average Progress

        <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

        <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>

—

In Progress

        <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

        <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>

—

Not Started

        <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

      <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
      29 learners

          <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>

        <input class="search-input" id="search-input" type="text" placeholder="Search learner..."/>

        <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="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>
        High to Low
      </button>

    Dept:
    <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>

Learner

Progress

Done %

Status

      <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.

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


29 /43

Enrolled — Batch 1

        <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 departments

27 /43

Enrolled — Batch 1

        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="18 15 12 9 6 15"/></svg>
        2 departments


27 /43

Enrolled — Batch 1

        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="18 15 12 9 6 15"/></svg>
        2 departments

<!DOCTYPE html>

  <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" />

      <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>

    Learning Analytics

    DEWA — Udemy Platform

Live data

      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
        <rect x="3" y="4" width="18" height="18" rx="2"/>
        <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
      </svg>
      Mar 18 – Apr 6, 2026

  <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>

        <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

AI Coder: Vibe Coder
to Agentic Engineer

          <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>
          27 / 43 enrolled — Batch 1

          <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>
          93 sessions total

          <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>
          3 week program

          <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. —% complete

          <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>
          — min watched total

        <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>

29 /43

Enrolled — Batch 1

        <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 departments

        <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>

—%

Average Progress

        <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

        <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>

—

In Progress

        <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

        <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>

—

Not Started

        <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

      <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
      29 learners

          <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>

        <input class="search-input" id="search-input" type="text" placeholder="Search learner..."/>

        <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="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>
        High to Low
      </button>

    Dept:
    <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>

Learner

Progress

Done %

Status

      <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.

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


<!DOCTYPE html>

  <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" />

      <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>

    Learning Analytics

    DEWA — Udemy Platform

Live data

      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
        <rect x="3" y="4" width="18" height="18" rx="2"/>
        <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
      </svg>
      Mar 18 – Apr 6, 2026

  <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>

        <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

AI Coder: Vibe Coder
to Agentic Engineer

          <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>
          27 / 43 enrolled — Batch 1

          <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>
          93 sessions total

          <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>
          3 week program

          <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. —% complete

          <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>
          — min watched total

        <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>

27 /43

Enrolled — Batch 1

        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="18 15 12 9 6 15"/></svg>
        2 departments

        <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>

—%

Average Progress

        <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

        <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>

—

In Progress

        <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

        <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>

—

Not Started

        <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

      <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
      29 learners

          <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>

        <input class="search-input" id="search-input" type="text" placeholder="Search learner..."/>

        <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="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>
        High to Low
      </button>

    Dept:
    <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>

Learner

Progress

Done %

Status

      <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.

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


Done. Both Distribution Power employees removed, the dept filter tag gone, and counts updated to 27 learners / 2 departments. Refresh the page.


add the order numbers from 1st till the end, and also add the names of whomever dn't activate their account yet


I'll add row numbers to every learner and give "not activated" users (Karpagavalli & Prasanth — enrolled but never opened the course) their own distinct badge.


285	    .w1 { background:var(--blue-bg);  color:var(--blue);      border:1px solid var(--blue-border); }
286	    .w2 { background:var(--amber-bg); color:var(--amber);     border:1px solid var(--amber-border); }
287	    .w3 { background:var(--green-bg); color:var(--green);     border:1px solid var(--green-border); }
288
289	    .status-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; font-size:10px; font-weight:600; }
290	    .not-started { background:var(--slate-bg); color:var(--ink-muted); border:1px solid var(--slate-border); }
291	    .in-progress  { background:var(--amber-bg); color:var(--amber);     border:1px solid var(--amber-border); }
292	    .completed    { background:var(--green-bg); color:var(--green);     border:1px solid var(--green-border); }
293
294	    /* ── EMPTY ── */
[result-id: r8]

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

    /* ── EMPTY ── */


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

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


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

<!DOCTYPE html>

  <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" />

      <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>

    Learning Analytics

    DEWA — Udemy Platform

Live data

      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
        <rect x="3" y="4" width="18" height="18" rx="2"/>
        <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
      </svg>
      Mar 18 – Apr 6, 2026

  <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>

        <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

AI Coder: Vibe Coder
to Agentic Engineer

          <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>
          27 / 43 enrolled — Batch 1

          <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>
          93 sessions total

          <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>
          3 week program

          <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. —% complete

          <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>
          — min watched total

        <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>

27 /43

Enrolled — Batch 1

        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="18 15 12 9 6 15"/></svg>
        2 departments

        <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>

—%

Average Progress

        <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

        <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>

—

In Progress

        <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

        <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>

—

Not Started

        <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

      <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
      27 learners

          <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>

        <input class="search-input" id="search-input" type="text" placeholder="Search learner..."/>

        <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="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>
        High to Low
      </button>

    Dept:
    <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>

Learner

Progress

Done %

Status

      <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.

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

.w3 { background:var(--green-bg); color:var(--green);     border:1px solid var(--green-border); }

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

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


Now update the status logic to detect not-activated, and update statusIcon/statusLabel:


    var done = Math.round(r.pct / 100 * TOTAL);
    var status = done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';

    var done = Math.round(r.pct / 100 * TOTAL);
    var status = !r.started ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';


    var done = Math.round(r.pct / 100 * TOTAL);
    var status = done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';

    var done = Math.round(r.pct / 100 * TOTAL);
    var status = !r.started ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';

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

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


  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>';
    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) {
    return s === 'completed' ? 'Completed' : s === 'in-progress' ? 'In Progress' : 'Not Started';
  }

  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 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>';
    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) {
    return s === 'completed' ? 'Completed' : s === 'in-progress' ? 'In Progress' : 'Not Started';
  }

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

-    return s === 'completed' ? 'Completed' : s === 'in-progress' ? 'In Progress' : 'Not Started';

+    if (s === 'completed')     return 'Completed';

+    if (s === 'in-progress')   return 'In Progress';

+    if (s === 'not-activated') return 'Not Activated';


Now add the row number to each rendered row:


html +=   '
';
      html +=     '
' + l.initials + '
';


html +=   '
';
      html +=     '
' + l.initials + '
';

html += '<div class="learner-row" style="animation-delay:' + delay + '">';

html +=     '<div class="learner-meta">';


Also add a "Not Activated" filter 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('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>


        <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>

+        <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">

<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">


Done. Refresh the page. Here's what changed:

- **Row numbers** (1, 2, 3…) appear before each learner
- **Karpagavalli Pandian** and **Prasanth Mathavan** now show a red **"Not Activated"** badge — they enrolled but never opened the course
- A **"Not Activated" filter button** added so you can quickly isolate them


who ever started before 1st of April consider it batch 1 who ever started after 1st of April consider it batch 2


I'll add a Batch 1/2 label to each learner and batch filter buttons.


700	    var week   = done === 0 ? 0 : done <= 31 ? 1 : done <= 62 ? 2 : 3;
701	    var parts  = r.name.split(' ');
702	    var init   = ((parts[0] || '')[0] || '') + ((parts[1] || '')[0] || '');
703	    DATA.push({
704	      name: r.name, pct: r.pct, done: done,
705	      remaining: TOTAL - done,
706	      mins: r.mins, grp: r.grp,
707	      status: status, week: week,
708	      initials: init.toUpperCase(),
709	      pal: PALS[i % PALS.length],
710	      started: r.started || null
711	    });
712	  }
713
714	  /* ── STATS ── */
715	  var totalPct = 0, inProg = 0, notStarted = 0, totalMins = 0;
716	  for (var j = 0; j < DATA.length; j++) {
717	    totalPct += DATA[j].pct;
718	    totalMins += DATA[j].mins;
719	    if (DATA[j].status === 'in-progress') inProg++;
720	    if (DATA[j].status === 'not-started') notStarted++;
721	  }
722	  var avg = Math.round(totalPct / DATA.length);
723	  var top = DATA.slice().sort(function(a,b){ return b.done - a.done; })[0];
724
725	  document.getElementById('m-avg').textContent   = avg;
726	  document.getElementById('m-mins').textContent  = Math.round(totalMins).toLocaleString();
727	  document.getElementById('s-avg').textContent   = avg;
728	  document.getElementById('s-prog').textContent  = inProg;
729	  document.getElementById('s-notstarted').textContent = notStarted;
[result-id: r9]

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

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