    { name:'Ismail',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Chandini Palani',                pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Saravana Kumar',                 pct:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Nixson Jesuraj',                 pct:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Ankur Jain',                     pct:73,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Anusha Gounder',                 pct:73,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Nora Khaled',                    pct:17,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Ashwin Kaleeswaran',             pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 28' },
    { name:'Fatehali Shaikh',                pct:76,  mins:0,       grp:'Ducont',                   started:'Mar 26' },
    { name:'Asjad Lakhani',                  pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Abeth',                          pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Priyanka Geethik',               pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Sumit Kumar',                    pct:18,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Anjana Elaveetil',               pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Prem Kishore',                   pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Sumathi Malikarjun',             pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Mohammad Sajid',                 pct:40,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
    { name:'Tharakeswar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Akash',                          pct:60,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
    { name:'Kamalesh',                       pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Suriyakumar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Sunil Sahu',                     pct:5,   mins:0,       grp:'Ducont',                   started:'Apr 3' },
    { name:'Athish',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Subhash Chavan',                 pct:100, mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Sekkizhar',                      pct:62,  mins:0,       grp:'Ducont',                   started:null },
    { name:'Selvadurai',                     pct:20,  mins:0,       grp:'Ducont',                   started:'Apr 3' },
    { name:'Sajid Salim',                    pct:19,  mins:0,       grp:'Ducont',                   started:null },
    { name:'Shilkka',                        pct:38,  mins:0,       grp:'Ducont',                   started:'Mar 29' },
    { name:'Rakul',                          pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Coder — DEWA Utilization Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,300&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />
  <style>
    /* Guaranteed number font — works even without Google Fonts */
    .num { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', 'Book Antiqua', Palatino, serif !important; font-variant-numeric: tabular-nums; }
  </style>
  <style>
    :root {
      --white:        #ffffff;
      --bg:           #f4f6fb;
      --bg-alt:       #eef1f8;
      --surface:      #ffffff;
      --gold:         #b8822a;
      --gold-light:   #e6a93a;
      --gold-pale:    #fdf3e1;
      --gold-border:  #e8c97a;
      --ink:          #141926;
      --ink-mid:      #3d4a63;
      --ink-soft:     #6b7a99;
      --ink-muted:    #9aa3b8;
      --border:       #e2e6f0;
      --border-dark:  #cdd2e0;
      --shadow-sm:    0 1px 3px rgba(20,25,38,0.07), 0 1px 2px rgba(20,25,38,0.04);
      --shadow-md:    0 4px 16px rgba(20,25,38,0.09), 0 2px 4px rgba(20,25,38,0.05);
      --shadow-lg:    0 14px 36px rgba(20,25,38,0.12), 0 4px 8px rgba(20,25,38,0.06);
      --green:        #16a362;
      --green-bg:     #edfaf4;
      --green-border: #a3dfc3;
      --blue:         #2d6fe8;
      --blue-bg:      #eff4fd;
      --blue-border:  #9bbaf5;
      --amber:        #c47d0e;
      --amber-bg:     #fff8ec;
      --amber-border: #f5cc7a;
      --slate-bg:     #f2f4f8;
      --slate-border: #d0d5e2;
      --violet:       #6d3fd6;
      --violet-bg:    #f3effe;
      --violet-border:#c4a8f5;
      --teal:         #0e8c7a;
      --teal-bg:      #e8f8f6;
      --teal-border:  #7fd0c6;
      --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    @keyframes fadeUp   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
    @keyframes slideDown{ from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
    @keyframes pulse    { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.75); } }

    /* ── TOPBAR ── */
    .topbar {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 0 56px;
      height: 52px;
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 100;
      box-shadow: var(--shadow-sm);
      animation: slideDown .4s ease both;
    }
    .topbar-brand { display:flex; align-items:center; gap:10px; }
    .brand-dot { width:28px; height:28px; background:var(--gold); border-radius:7px; display:flex; align-items:center; justify-content:center; }
    .brand-name { font-size:13px; font-weight:600; color:var(--ink); }
    .brand-sep  { width:1px; height:18px; background:var(--border-dark); margin:0 4px; }
    .brand-sub  { font-size:12px; color:var(--ink-soft); }
    .topbar-right { display:flex; align-items:center; gap:20px; }
    .topbar-tag   { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-soft); }
    .live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }

    /* ── HERO ── */
    .hero {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 44px 56px 40px;
      position: relative; overflow: hidden;
      animation: fadeIn .5s ease both;
    }
    .hero-pattern { position:absolute; top:0; right:0; width:480px; height:100%; pointer-events:none; }
    .hero-inner { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:48px; }
    .hero-left { flex:1; }
    .hero-pill {
      display:inline-flex; align-items:center; gap:7px;
      background:var(--gold-pale); border:1px solid var(--gold-border);
      border-radius:99px; padding:5px 13px 5px 9px;
      font-size:11px; font-weight:600; color:var(--gold);
      letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px;
    }
    .hero-title {
      font-family:'Fraunces',serif; font-size:38px; font-weight:700;
      line-height:1.12; color:var(--ink); letter-spacing:-.02em; max-width:520px;
    }
    .hero-title em { font-style:italic; font-weight:300; color:var(--gold); }
    .hero-meta {
      display:flex; margin-top:22px;
      border:1px solid var(--border); border-radius:var(--r-md);
      overflow:hidden; width:fit-content; background:#f9fafc;
    }
    .meta-chip {
      display:flex; align-items:center; gap:8px;
      padding:10px 20px; font-size:12px; color:var(--ink-mid);
      border-right:1px solid var(--border);
    }
    .meta-chip:last-child { border-right:none; }
    .meta-chip strong { color:var(--ink); font-weight:600; }

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

    /* ── MAIN ── */
    .main { padding:32px 56px 56px; }

    /* ── STAT CARDS ── */
    .stats-grid {
      display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;
    }
    .stat-card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-lg); padding:22px 22px 20px;
      position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
      animation:fadeUp .5s ease both;
      transition:box-shadow .25s ease, border-color .25s ease;
    }
    .stat-card:hover { box-shadow:var(--shadow-md); border-color:var(--border-dark); }
    .stat-accent { position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--r-lg) var(--r-lg) 0 0; }
    .stat-icon-wrap { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
    .stat-num { font-family:'Fraunces','Georgia','Palatino Linotype',Palatino,serif; font-size:42px; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--ink); }
    .stat-num .unit { font-size:24px; font-weight:300; color:var(--gold); }
    .stat-lbl { font-size:11px; font-weight:500; color:var(--ink-muted); letter-spacing:.07em; text-transform:uppercase; margin-top:6px; }
    .stat-tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500; margin-top:10px; padding:3px 8px; border-radius:99px; }

    /* ── SECTION / CONTROLS ── */
    .section-head {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:10px; gap:16px; flex-wrap:wrap;
    }
    .section-title { font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; }
    .count-badge   { background:var(--bg-alt); border:1px solid var(--border); border-radius:99px; padding:2px 10px; font-size:11px; font-weight:500; color:var(--ink-soft); }
    .controls-row  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

    .dept-row {
      display:flex; align-items:center; gap:8px;
      margin-bottom:14px; flex-wrap:wrap;
    }
    .dept-label { font-size:11px; font-weight:500; color:var(--ink-muted); letter-spacing:.06em; text-transform:uppercase; }

    .search-wrap { position:relative; }
    .search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-muted); pointer-events:none; }
    .search-input {
      background:var(--white); border:1px solid var(--border);
      border-radius:var(--r-sm); padding:9px 14px 9px 36px; width:220px;
      color:var(--ink); font-family:'DM Sans',sans-serif; font-size:13px; outline:none;
      transition:border-color .2s, box-shadow .2s; box-shadow:var(--shadow-sm);
    }
    .search-input::placeholder { color:var(--ink-muted); }
    .search-input:focus { border-color:var(--gold-border); box-shadow:0 0 0 3px var(--gold-pale); }

    .filter-group {
      display:flex; align-items:center; background:var(--white);
      border:1px solid var(--border); border-radius:var(--r-sm);
      overflow:hidden; box-shadow:var(--shadow-sm);
    }
    .filter-btn {
      display:flex; align-items:center; gap:6px;
      padding:8px 13px;
      font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
      color:var(--ink-soft); background:transparent;
      border:none; border-right:1px solid var(--border);
      cursor:pointer; transition:background .15s, color .15s; white-space:nowrap;
    }
    .filter-btn:last-child { border-right:none; }
    .filter-btn:hover  { background:var(--bg); color:var(--ink); }
    .filter-btn.active { background:var(--gold-pale); color:var(--gold); }

    .dept-btn {
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 12px;
      font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
      color:var(--ink-soft); background:var(--white);
      border:1px solid var(--border); border-radius:99px;
      cursor:pointer; transition:background .15s, color .15s, border-color .15s;
      box-shadow:var(--shadow-sm); white-space:nowrap;
    }
    .dept-btn:hover  { background:var(--bg); color:var(--ink); }
    .dept-btn.active { background:var(--gold-pale); border-color:var(--gold-border); color:var(--gold); }

    .sort-btn {
      display:flex; align-items:center; gap:6px; padding:9px 14px;
      background:var(--white); border:1px solid var(--border); border-radius:var(--r-sm);
      font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
      color:var(--ink-soft); cursor:pointer; box-shadow:var(--shadow-sm);
      transition:background .15s, border-color .15s, color .15s; white-space:nowrap;
    }
    .sort-btn:hover { background:var(--bg); border-color:var(--border-dark); color:var(--ink); }

    /* ── TABLE ── */
    .table-card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-md);
    }
    .table-head {
      display:grid;
      grid-template-columns: 1.4fr 80px 1fr 90px 140px;
      padding:12px 28px; background:var(--bg-alt); border-bottom:1px solid var(--border);
      column-gap: 16px;
    }
    .th { font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }
    .th.right  { text-align:right; }
    .th.center { text-align:center; }

    .learner-row {
      display:grid;
      grid-template-columns: 1.4fr 80px 1fr 90px 140px;
      column-gap: 16px;
      align-items:center; padding:15px 24px;
      border-bottom:1px solid var(--border);
      transition:background .15s;
      animation:fadeUp .4s ease both;
    }
    .learner-row:last-child { border-bottom:none; }
    .learner-row:hover { background:var(--bg); }

    .learner-info { display:flex; align-items:center; gap:12px; overflow:hidden; }
    .avatar {
      width:36px; height:36px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-family:'Fraunces',serif; font-size:13px; font-weight:700;
      flex-shrink:0; border:2px solid;
    }
    .learner-meta { overflow:hidden; }
    .learner-name { font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .learner-dept { font-size:10px; color:var(--ink-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .cell { font-size:13px; color:var(--ink-soft); }
    .cell.right  { text-align:right; }
    .cell.center { text-align:center; }
    .sessions-done { font-family:'Fraunces','Georgia','Palatino Linotype',Palatino,serif; font-weight:700; color:var(--ink); font-size:26px; letter-spacing:-0.02em; line-height:1; }

    .progress-cell { padding-right:8px; padding-left:4px; }
    .progress-track { height:6px; background:var(--bg-alt); border-radius:99px; overflow:hidden; border:1px solid var(--border); }
    .progress-fill  { height:100%; border-radius:99px; transition:width 1.2s cubic-bezier(.16,1,.3,1); }
    .progress-lbl   { font-size:10px; color:var(--ink-muted); margin-top:4px; }

    .pct-cell { text-align:right; font-family:'Fraunces','Georgia','Palatino Linotype',Palatino,serif; font-size:24px; font-weight:700; line-height:1; }
    .pct-cell small { font-family:'DM Sans',sans-serif; font-size:11px; font-weight:400; color:var(--ink-muted); }

    .week-badge { display:inline-flex; align-items:center; justify-content:center; padding:3px 10px; border-radius:99px; font-size:10px; font-weight:600; }
    .w0 { background:var(--slate-bg); color:var(--ink-muted); border:1px solid var(--slate-border); }
    .w1 { background:var(--blue-bg);  color:var(--blue);      border:1px solid var(--blue-border); }
    .w2 { background:var(--amber-bg); color:var(--amber);     border:1px solid var(--amber-border); }
    .w3 { background:var(--green-bg); color:var(--green);     border:1px solid var(--green-border); }

    .status-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; font-size:10px; font-weight:600; }
    .not-started    { background:var(--slate-bg); color:var(--ink-muted); border:1px solid var(--slate-border); }
    .in-progress    { background:var(--amber-bg); color:var(--amber);     border:1px solid var(--amber-border); }
    .completed      { background:var(--green-bg); color:var(--green);     border:1px solid var(--green-border); }
    .not-activated  { background:#fff0ee; color:#d64828; border:1px solid #f5b5a8; }

    .row-num { font-family:'Fraunces',serif; font-size:13px; font-weight:600; color:var(--ink-muted); min-width:22px; text-align:right; flex-shrink:0; }

    .batch-pill { display:inline-flex; align-items:center; padding:1px 7px; border-radius:99px; font-size:9px; font-weight:700; letter-spacing:.06em; vertical-align:middle; }
    .batch-1 { background:var(--blue-bg); color:var(--blue); border:1px solid var(--blue-border); }
    .batch-2 { background:var(--violet-bg); color:var(--violet); border:1px solid var(--violet-border); }

    .batch-btn {
      display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
      font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
      color:var(--ink-soft); background:var(--white);
      border:1px solid var(--border); border-radius:99px;
      cursor:pointer; transition:background .15s, color .15s, border-color .15s;
      box-shadow:var(--shadow-sm); white-space:nowrap;
    }
    .batch-btn:hover  { background:var(--bg); color:var(--ink); }
    .batch-btn.active { background:var(--gold-pale); border-color:var(--gold-border); color:var(--gold); }

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

    /* ── FOOTER ── */
    .footer {
      text-align:center; padding:20px 56px; font-size:11px;
      color:var(--ink-muted); border-top:1px solid var(--border);
      background:var(--white); letter-spacing:.05em;
    }
    .footer strong { color:var(--gold); font-weight:600; }

    @media (max-width:1140px) {
      .stats-grid { grid-template-columns:repeat(2,1fr); }
      .table-head,.learner-row { grid-template-columns:1.2fr 70px 1fr 80px 130px; column-gap:10px; }
    }
    /* ── TABLET ── */
    @media (max-width:900px) {
      .topbar { padding:0 16px; height:48px; }
      .topbar-tag:last-child { display:none; }
      .hero { padding:24px 16px 20px; }
      .main { padding:16px 16px 48px; }
      .footer { padding:14px 16px; font-size:10px; }
      .hero-inner { flex-direction:column; gap:16px; }
      .hero-title { font-size:28px; }
      .hero-meta { flex-wrap:wrap; width:100%; }
      .meta-chip { padding:8px 14px; font-size:11px; flex:1 1 40%; }
      .stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
      .stat-num { font-size:32px; }
      .stat-card { padding:16px 16px 14px; }
      .section-head { flex-direction:column; align-items:flex-start; gap:10px; }
      .controls-row { width:100%; gap:8px; }
      .search-wrap { width:100%; }
      .search-input { width:100%; box-sizing:border-box; }
      .filter-group { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; display:flex; flex-wrap:nowrap; }
      .filter-btn { flex-shrink:0; justify-content:center; padding:10px 12px; font-size:11px; min-height:40px; }
      .dept-row, .batch-row { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
      .dept-btn, .batch-btn { flex-shrink:0; min-height:36px; }
      .sort-btn { min-height:40px; }
      /* Card layout for table */
      .table-head { display:none; }
      .table-card { background:transparent; border:none; box-shadow:none; }
      .learner-row {
        display:flex !important;
        flex-direction:column !important;
        gap:0; padding:0;
        margin-bottom:10px;
        border:1px solid var(--border);
        border-radius:var(--r-lg);
        background:var(--white);
        box-shadow:var(--shadow-sm);
        overflow:hidden; column-gap:0;
        transition:box-shadow .2s;
      }
      .learner-row:active { box-shadow:var(--shadow-md); }
      .learner-row:last-child { border-bottom:1px solid var(--border); }
      .learner-info {
        padding:14px 16px 12px;
        border-bottom:1px solid var(--border);
        width:100%;
      }
      .row-num { font-size:12px; min-width:18px; }
      .avatar { width:40px; height:40px; font-size:14px; }
      .learner-name { font-size:14px; }
      .learner-dept { font-size:11px; margin-top:3px; }
      .progress-cell {
        padding:12px 16px 12px !important;
        border-bottom:1px solid var(--border);
        width:100%;
      }
      .sessions-done { font-size:20px; }
      .pct-cell { display:none !important; }
      .cell.center { display:none !important; }
      .card-footer {
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        padding:10px 16px;
        background:var(--bg-alt);
      }
      .card-footer-pct {
        font-family:'Fraunces','Georgia','Palatino Linotype',Palatino,serif;
        font-size:22px; font-weight:700;
      }
    }

    /* ── MOBILE ── */
    @media (max-width:480px) {
      .topbar { padding:0 14px; height:46px; }
      .brand-sep, .brand-sub { display:none; }
      .hero { padding:18px 14px 16px; }
      .hero-pill { font-size:10px; padding:4px 10px 4px 8px; margin-bottom:12px; }
      .hero-title { font-size:22px; line-height:1.18; }
      .hero-meta { flex-direction:column; border-radius:var(--r-sm); }
      .meta-chip { flex:1 1 100%; border-right:none !important; border-bottom:1px solid var(--border); padding:9px 14px; }
      .meta-chip:last-child { border-bottom:none; }
      .main { padding:14px 14px 56px; }
      .stats-grid { grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px; }
      .stat-card { padding:14px 14px 12px; border-radius:var(--r-md); }
      .stat-num { font-size:26px; }
      .stat-num .unit { font-size:16px; }
      .stat-icon-wrap { width:32px; height:32px; border-radius:8px; margin-bottom:10px; }
      .stat-lbl { font-size:10px; }
      .stat-tag { display:none; }
      .section-title { font-size:12px; }
      .count-badge { font-size:10px; }
      .filter-btn { padding:10px 10px; font-size:10px; }
      .dept-btn, .batch-btn { font-size:10px; padding:6px 10px; }
      .sort-btn { font-size:11px; padding:9px 12px; }
      .search-input { font-size:13px; padding:10px 14px 10px 34px; }
      .learner-row { border-radius:var(--r-md); margin-bottom:8px; }
      .learner-info { padding:12px 14px 10px; }
      .avatar { width:36px; height:36px; font-size:12px; }
      .learner-name { font-size:13px; }
      .learner-dept { font-size:10px; }
      .progress-cell { padding:10px 14px 10px !important; }
      .sessions-done { font-size:18px; }
      .card-footer { padding:9px 14px; }
      .card-footer-pct { font-size:20px; }
      .status-badge { font-size:9px; padding:3px 8px; }
      .batch-pill { font-size:8px; padding:1px 6px; }
      .footer { font-size:10px; padding:12px 14px; }
    }
  </style>
</head>
<body>

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

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

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

  </div>
</header>

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

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

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

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

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

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

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

  <!-- DEPARTMENT FILTER -->
  <div class="dept-row">
    <span class="dept-label">Dept:</span>
    <button class="dept-btn active" onclick="setDept('all',this)">All departments</button>
    <button class="dept-btn" onclick="setDept('Innovation & The Future',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
      Innovation & The Future
    </button>
    <button class="dept-btn" onclick="setDept('Digital DEWA',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
      Digital DEWA
    </button>
    <button class="dept-btn" onclick="setDept('Ducont',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
      Ducont
    </button>
    <button class="dept-btn" onclick="setDept('POWER & WATER PLANNING',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
      Power & Water
    </button>
    <button class="dept-btn" onclick="setDept('BS&HR',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
      BS&HR
    </button>
    <button class="dept-btn" onclick="setDept('Transmission Power',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      Transmission
    </button>
    <button class="dept-btn" onclick="setDept('Generation',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
      Generation
    </button>
    <button class="dept-btn" onclick="setDept('Business Dev & Excellence',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
      Biz Dev
    </button>
    <button class="dept-btn" onclick="setDept('Internal Audit',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
      Internal Audit
    </button>
  </div>

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

</main>

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

<script>
(function () {
  var TOTAL = 93;

  var PALS = [
    { bg:'#eff4fd', bd:'#9bbaf5', tx:'#2d6fe8' },
    { bg:'#fdf3e1', bd:'#e8c97a', tx:'#b8822a' },
    { bg:'#edfaf4', bd:'#a3dfc3', tx:'#16a362' },
    { bg:'#f5f0ff', bd:'#c4a8f5', tx:'#7c3aed' },
    { bg:'#fff0ee', bd:'#f5b5a8', tx:'#d64828' },
    { bg:'#e8f8f6', bd:'#7fd0c6', tx:'#0e8c7a' },
    { bg:'#fef0f9', bd:'#f5a8de', tx:'#c41e8a' },
  ];

  var RAW = [
    { name:'Ahmed Alshehhi',                    pct:100, mins:1355.0,  grp:'Innovation & The Future',     started:'Mar 25' },
    { name:'Khalid Bin Kalban',                 pct:100, mins:928.75,  grp:'Innovation & The Future',     started:'Mar 23' },
    { name:'Shurooq Ahmad Almheiri',            pct:100, mins:1208.5,  grp:'Innovation & The Future',     started:'Mar 24' },
    { name:'Saleha Obaid Essa',                 pct:100, mins:1066.0,  grp:'Innovation & The Future',     started:'Mar 26' },
    { name:'Adel Al Tamimi',                    pct:100, mins:1011.25, grp:'Innovation & The Future',     started:'Mar 30' },
    { name:'Muhammad Bilal Arif',               pct:60,  mins:578.25,  grp:'Innovation & The Future',     started:'Mar 28' },
    { name:'Ashish Agarwal',                    pct:85,  mins:1643.5,  grp:'Innovation & The Future',     started:'Mar 29' },
    { name:'Ayesha Sarwashi',                   pct:95,  mins:1014.0,  grp:'Innovation & The Future',     started:'Mar 26' },
    { name:'Duaa Suleiman',                     pct:95,  mins:888.25,  grp:'Innovation & The Future',     started:'Mar 25' },
    { name:'Atif Waqar',                        pct:65,  mins:984.25,  grp:'Innovation & The Future',     started:'Mar 29' },
    { name:'Atif Sharif',                       pct:55,  mins:578.25,  grp:'Innovation & The Future',     started:'Mar 22' },
    { name:'Aysha Hassan Al Dhuhoori',          pct:75,  mins:765.25,  grp:'Innovation & The Future',     started:'Apr 3' },
    { name:'Tongtong Wang',                     pct:75,  mins:773.25,  grp:'Innovation & The Future',     started:'Apr 6' },
    { name:'Muna Jassim',                       pct:40,  mins:575.75,  grp:'Innovation & The Future',     started:'Mar 24' },
    { name:'Noora Al Sarrah',                   pct:35,  mins:366.5,   grp:'Innovation & The Future',     started:'Apr 2' },
    { name:'Jamil Al Hasan',                    pct:30,  mins:329.0,   grp:'Innovation & The Future',     started:'Mar 18' },
    { name:'Wafa Mohd Mubarak Albalooshi',      pct:30,  mins:289.25,  grp:'Innovation & The Future',     started:'Apr 7' },
    { name:'Elsa Prakash',                      pct:25,  mins:301.5,   grp:'Innovation & The Future',     started:'Mar 25' },
    { name:'Karpagavalli Pandian',              pct:20,  mins:209.75,  grp:'Innovation & The Future',     started:'Apr 8' },
    { name:'Khalid Abdulaziz Alali',            pct:16,  mins:181.0,   grp:'Innovation & The Future',     started:'Apr 7' },
    { name:'Wafa Mohamed Bamatraf',             pct:16,  mins:143.25,  grp:'Innovation & The Future',     started:'Apr 6' },
    { name:'Moaza Alhajeri',                    pct:10,  mins:129.75,  grp:'Innovation & The Future',     started:'Mar 26' },
    { name:'Shahul Hameed Mohideen Abdul Kadar',pct:2,   mins:36.0,    grp:'Innovation & The Future',     started:'Mar 26' },
    { name:'Saeed Aldosari',                    pct:2,   mins:15.25,   grp:'Innovation & The Future',     started:'Apr 6' },
    { name:'Yaseen Tahir',                      pct:2,   mins:36.25,   grp:'Innovation & The Future',     started:'Apr 8' },
    { name:'Carl Apolinario',                   pct:2,   mins:0,       grp:'Innovation & The Future',     started:null },
    { name:'Abdallah Alkamali',                 pct:2,   mins:18.5,    grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Ebtesam Almarzooqi',                pct:2,   mins:2.5,     grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Ibaad Khot',                        pct:0,   mins:3.75,    grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Hessa Alyassi',                     pct:0,   mins:3.75,    grp:'Innovation & The Future',     started:'Apr 9' },
    { name:'Prasanth Mathavan',                 pct:0,   mins:0,       grp:'Innovation & The Future',     started:null },
    { name:'Marouane Basta',                    pct:75,  mins:878.25,  grp:'Digital DEWA',                started:'Mar 30' },
    { name:'Shahala Cheralakodan',              pct:50,  mins:556.75,  grp:'Digital DEWA',                started:'Apr 1' },
    { name:'Haseeb Vadakke Painkal',            pct:25,  mins:222.25,  grp:'Digital DEWA',                started:'Apr 1' },
    { name:'Ummehani Rangwala',                 pct:16,  mins:211.75,  grp:'Digital DEWA',                started:'Apr 7' },
    { name:'Rakesh Gulaganji',                  pct:16,  mins:178.0,   grp:'Digital DEWA',                started:'Apr 4' },
    { name:'Sachin Patil',                      pct:10,  mins:74.75,   grp:'Digital DEWA',                started:'Apr 7' },
    { name:'Muhammed Shafi',                    pct:0,   mins:3.75,    grp:'Digital DEWA',                started:'Apr 8' },
    { name:'Mohammed Fowza',                    pct:0,   mins:0,       grp:'Digital DEWA',                started:null },
    { name:'Mohammed Ayub',                     pct:0,   mins:0,       grp:'Digital DEWA',                started:null },
    { name:'Sultan Alzaabi',                    pct:16,  mins:149.75,  grp:'POWER & WATER PLANNING',      started:'Apr 7' },
    { name:'Sahaya Vinoth',                     pct:0,   mins:0,       grp:'BS&HR',                       started:null },
    { name:'Mohd Abu Atiyeh',                   pct:10,  mins:93.5,    grp:'BS&HR',                       started:'Apr 8' },
    { name:'Saif Bin Haider',                   pct:2,   mins:15.0,    grp:'Transmission Power',          started:'Apr 9' },
    { name:'Aisha Mubarak',                     pct:0,   mins:2.5,     grp:'Transmission Power',          started:'Apr 9' },
    { name:'Ahmad AlSuwaidi',                   pct:2,   mins:30.25,   grp:'Generation',                  started:'Apr 8' },
    { name:'Jayakumar Vandavasi Karunamurthy',  pct:25,  mins:125.0,   grp:'Business Dev & Excellence',   started:'Apr 9' },
    { name:'Mahmoud Tarek Rezk',                pct:0,   mins:0,       grp:'Business Dev & Excellence',   started:null },
    { name:'Saeed M Alkamali',                  pct:0,   mins:0,       grp:'Internal Audit',              started:null },
    { name:'Ismail',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Chandini Palani',                pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Saravana Kumar',                 pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Nixson Jesuraj',                 pct:48,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Ankur Jain',                     pct:45,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Anusha Gounder',                 pct:40,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Nora Khaled',                    pct:17,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Ashwin Kaleeswaran',             pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 28' },
    { name:'Fatehali Shaikh',                pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 26' },
    { name:'Asjad Lakhani',                  pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Abeth',                          pct:15,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Priyanka Geethik',               pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Sumit Kumar',                    pct:18,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Anjana Elaveetil',               pct:43,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Prem Kishore',                   pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Sumathi Malikarjun',             pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Mohammad Sajid',                 pct:12,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
    { name:'Tharakeswar',                    pct:55,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
    { name:'Akash',                          pct:48,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
    { name:'Kamalesh',                       pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Suriyakumar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Apr 1' },
    { name:'Sunil Sahu',                     pct:5,   mins:0,       grp:'Ducont',                   started:'Apr 3' },
    { name:'Athish',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
    { name:'Subhash Chavan',                 pct:100, mins:0,       grp:'Ducont',                   started:'Mar 30' },
    { name:'Sekkizhar',                      pct:33,  mins:0,       grp:'Ducont',                   started:null },
    { name:'Selvadurai',                     pct:20,  mins:0,       grp:'Ducont',                   started:'Apr 3' },
    { name:'Sajid Salim',                    pct:19,  mins:0,       grp:'Ducont',                   started:null },
    { name:'Shilkka',                        pct:38,  mins:0,       grp:'Ducont',                   started:'Mar 29' },
    { name:'Rakul',                          pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
  ];

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

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

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

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

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

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

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

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

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

  function deptShort(g) {
    if (g === 'Innovation & The Future')  return 'Innovation & Future';
    if (g === 'Digital DEWA')             return 'Digital DEWA';
    if (g === 'Ducont')                   return 'Ducont';
    if (g === 'POWER & WATER PLANNING')   return 'Power & Water';
    if (g === 'BS&HR')                    return 'BS&HR';
    if (g === 'Transmission Power')       return 'Transmission Power';
    if (g === 'Generation')               return 'Generation';
    if (g === 'Business Dev & Excellence') return 'Biz Dev & Excellence';
    if (g === 'Internal Audit')            return 'Internal Audit';
    return g;
  }

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

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

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

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

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

    var html = '';
    for (var i = 0; i < rows.length; i++) {
      var l  = rows[i];
      var wk = weekInfo(l.week);
      var delay = (i * 0.03).toFixed(2) + 's';
      var minsStr = l.mins < 60
        ? Math.round(l.mins) + ' min'
        : (l.mins / 60).toFixed(1) + ' hr';
      html += '<div class="learner-row" style="animation-delay:' + delay + '">';
      html +=   '<div class="learner-info">';
      html +=     '<span class="row-num">' + (i + 1) + '</span>';
      html +=     '<div class="avatar" style="background:' + l.pal.bg + ';border-color:' + l.pal.bd + ';color:' + l.pal.tx + '">' + l.initials + '</div>';
      html +=     '<div class="learner-meta">';
      html +=       '<div class="learner-name">' + l.name + '</div>';
      html +=       '<div class="learner-dept">' + deptShort(l.grp) + (l.started ? ' · Started ' + l.started : '') + '</div>';
      html +=     '</div>';
      html +=   '</div>';
      html +=   '<div class="cell center" style="display:flex;align-items:center;justify-content:flex-start;padding-left:4px;">';
      html +=     '<span class="batch-pill batch-' + l.batch + '">Batch ' + l.batch + '</span>';
      html +=   '</div>';
      html +=   '<div class="cell progress-cell">';
      html +=     '<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">';
      html +=       '<span class="sessions-done">' + l.done + '</span>';
      html +=       '<span style="font-size:11px;color:var(--ink-muted)">of ' + TOTAL + ' sessions · ' + minsStr + ' watched</span>';
      html +=     '</div>';
      html +=     '<div class="progress-track"><div class="progress-fill" id="pf' + i + '" style="width:0%;background:' + barColor(l.pct) + '"></div></div>';
      html +=   '</div>';
      html +=   '<div class="pct-cell" style="color:' + pctColor(l.pct) + '">' + l.pct + '<small>%</small></div>';
      html +=   '<div class="cell center"><span class="status-badge ' + l.status + '">' + statusIcon(l.status) + statusLabel(l.status) + '</span></div>';
      /* card footer shown only on mobile via CSS */
      html +=   '<div class="card-footer">';
      html +=     '<div style="display:flex;align-items:center;gap:8px;">';
      html +=       '<span class="card-footer-pct" style="color:' + pctColor(l.pct) + '">' + l.pct + '%</span>';
      html +=       '<span class="batch-pill batch-' + l.batch + '">Batch ' + l.batch + '</span>';
      html +=     '</div>';
      html +=     '<span class="status-badge ' + l.status + '">' + statusIcon(l.status) + statusLabel(l.status) + '</span>';
      html +=   '</div>';
      html += '</div>';
    }
    list.innerHTML = html;

    var captured = rows;
    setTimeout(function() {
      for (var j = 0; j < captured.length; j++) {
        var el = document.getElementById('pf' + j);
        if (el) el.style.width = captured[j].pct + '%';
      }
    }, 100);
  }

  /* ── HANDLERS ── */
  window.setStatus = function(s, btn) {
    activeStatus = s;
    var btns = document.querySelectorAll('.filter-btn');
    for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
    btn.classList.add('active');
    render();
  };

  window.setDept = function(d, btn) {
    activeDept = d;
    var btns = document.querySelectorAll('.dept-btn');
    for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
    btn.classList.add('active');
    render();
  };

  window.setBatch = function(b, btn) {
    activeBatch = b;
    var btns = document.querySelectorAll('.batch-btn');
    for (var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
    btn.classList.add('active');
    render();
  };

  window.toggleSort = function() {
    sortAsc = !sortAsc;
    document.getElementById('sort-lbl').textContent = sortAsc ? 'Low to High' : 'High to Low';
    render();
  };

  document.getElementById('search-input').addEventListener('input', function(e) {
    searchQuery = e.target.value;
    render();
  });

  render();
})();
</script>
</body>
</html>

-    { name:'Saravana Kumar',                 pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 27' },

-    { name:'Nixson Jesuraj',                 pct:48,  mins:0,       grp:'Ducont',                   started:'Mar 27' },

-    { name:'Ankur Jain',                     pct:45,  mins:0,       grp:'Ducont',                   started:'Mar 30' },

-    { name:'Anusha Gounder',                 pct:40,  mins:0,       grp:'Ducont',                   started:'Mar 30' },

+    { name:'Saravana Kumar',                 pct:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },

+    { name:'Nixson Jesuraj',                 pct:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },

+    { name:'Ankur Jain',                     pct:73,  mins:0,       grp:'Ducont',                   started:'Mar 30' },

+    { name:'Anusha Gounder',                 pct:73,  mins:0,       grp:'Ducont',                   started:'Mar 30' },

-    { name:'Fatehali Shaikh',                pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 26' },

-    { name:'Asjad Lakhani',                  pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },

-    { name:'Abeth',                          pct:15,  mins:0,       grp:'Ducont',                   started:'Apr 1' },

+    { name:'Fatehali Shaikh',                pct:76,  mins:0,       grp:'Ducont',                   started:'Mar 26' },

+    { name:'Asjad Lakhani',                  pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },

+    { name:'Abeth',                          pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },

-    { name:'Anjana Elaveetil',               pct:43,  mins:0,       grp:'Ducont',                   started:'Mar 31' },

+    { name:'Anjana Elaveetil',               pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },

-    { name:'Mohammad Sajid',                 pct:12,  mins:0,       grp:'Ducont',                   started:'Apr 2' },

-    { name:'Tharakeswar',                    pct:55,  mins:0,       grp:'Ducont',                   started:'Mar 27' },

-    { name:'Akash',                          pct:48,  mins:0,       grp:'Ducont',                   started:'Apr 2' },

+    { name:'Mohammad Sajid',                 pct:40,  mins:0,       grp:'Ducont',                   started:'Apr 2' },

+    { name:'Tharakeswar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },

+    { name:'Akash',                          pct:60,  mins:0,       grp:'Ducont',                   started:'Apr 2' },

-    { name:'Sekkizhar',                      pct:33,  mins:0,       grp:'Ducont',                   started:null },

+    { name:'Sekkizhar',                      pct:62,  mins:0,       grp:'Ducont',                   started:null },


'/Users/khalidbinkalban/Downloads/DEWA Course Tracking sheet_10thApril2026.xlsx'  add this list progress for Ducont employees


Conversation compacted


This session is being continued from a previous conversation that ran out of context. The summary below covers the earlier portion of the conversation.

Summary:
1. Primary Request and Intent:
   The user's primary goal throughout this conversation was to build, serve, and iteratively update a live DEWA course tracking dashboard for the Udemy course "AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks". Key requests included:
   - Getting the dashboard accessible via a public URL
   - Updating learner data from CSV/Excel files on multiple occasions
   - UI improvements: removing the Top Performer card, adding row numbers, batch labels (B1/B2), start dates, not-activated badges, department filters, mobile enhancements
   - Adding Ducont employees as a new company group
   - Controlling sort order (Ahmed Alshehhi → Khalid Bin Kalban → Shurooq at top)
   - Removing Distribution Power employees permanently
   - Keeping data current across multiple CSV/Excel updates

2. Key Technical Concepts:
   - Single-file standalone HTML dashboard (no framework, no build step)
   - Python HTTP server (`python3 -m http.server 80`) for local serving
   - Tailscale Funnel for public HTTPS access without port-forwarding
   - Tailscale Serve (`tailscale serve`) vs Funnel (`tailscale funnel`) distinction
   - CSS Grid layout (5-column: `1.4fr 80px 1fr 90px 140px`)
   - Stable JavaScript Array.sort() for preserving custom ordering of ties
   - openpyxl Python library for reading Excel files
   - Status logic combining `started` field and `pct` value
   - Batch segmentation (Batch 1 = started before Apr 1, Batch 2 = Apr 1+)
   - Mobile-first CSS with horizontal scroll filters and card-based learner layout

3. Files and Code Sections:
   - `/Users/khalidbinkalban/course-dashboard.html` — main dashboard file (~1100+ lines)
     - Central file for all changes. Self-contained HTML/CSS/JS.
     - **Status logic** (critical fix):
       ```javascript
       var status = (!r.started && r.pct === 0) ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';
       ```
     - **Batch logic**:
       ```javascript
       var batch = (!r.started || r.started.indexOf('Apr') > -1) ? 2 : 1;
       ```
     - **Grid layout** (5 columns including Batch):
       ```css
       grid-template-columns: 1.4fr 80px 1fr 90px 140px;
       ```
     - **RAW data array** — all learner data with `name`, `pct`, `mins`, `grp`, `started` fields
     - **Current top of RAW** (ordered for stable sort):
       ```javascript
       { name:'Ahmed Alshehhi',       pct:100, mins:1355.0,  grp:'Innovation & The Future', started:'Mar 25' },
       { name:'Khalid Bin Kalban',    pct:100, mins:928.75,  grp:'Innovation & The Future', started:'Mar 23' },
       { name:'Shurooq Ahmad Almheiri', pct:100, mins:1208.5, grp:'Innovation & The Future', started:'Mar 24' },
       { name:'Saleha Obaid Essa',    pct:100, mins:1066.0,  grp:'Innovation & The Future', started:'Mar 26' },
       { name:'Adel Al Tamimi',       pct:100, mins:1011.25, grp:'Innovation & The Future', started:'Mar 30' },
       ```
     - **deptShort function**:
       ```javascript
       function deptShort(g) {
         if (g === 'Innovation & The Future')   return 'Innovation & Future';
         if (g === 'Digital DEWA')              return 'Digital DEWA';
         if (g === 'Ducont')                    return 'Ducont';
         if (g === 'POWER & WATER PLANNING')    return 'Power & Water';
         if (g === 'BS&HR')                     return 'BS&HR';
         if (g === 'Transmission Power')        return 'Transmission Power';
         if (g === 'Generation')                return 'Generation';
         if (g === 'Business Dev & Excellence') return 'Biz Dev & Excellence';
         if (g === 'Internal Audit')            return 'Internal Audit';
         return g;
       }
       ```
     - **Render function** — builds HTML for each row including row number, avatar, batch pill column, progress bar, pct, status badge, and mobile card footer
     - **setBatch handler** added for batch filter buttons
     - **Status badges**: `.not-started`, `.in-progress`, `.completed`, `.not-activated` (red)
     - **Batch pills**: `.batch-1` (blue), `.batch-2` (violet)

   - `/Users/khalidbinkalban/journey.html` — created then deleted per user request ("I did a mistake — should be in a different terminal")
   - `/Users/khalidbinkalban/vibe-code-stats.html` — created then deleted per user request

4. Errors and Fixes:
   - **Connection refused on khalids-mac-mini URL**: No web server running. Fixed by starting Python HTTP server on port 80 and configuring Tailscale Funnel. The device is named "my-workspace" not "khalids-mac-mini".
   - **Learner names not showing after performer card removal**: Removing the performer card HTML left orphaned JS references (`document.getElementById('p-name').textContent`, `p-bar`, etc.) which threw null errors and crashed the script before the learner list rendered. Fixed by removing those JS lines.
   - **Not-Activated shown for users with progress**: Status logic `!r.started ? 'not-activated'` incorrectly flagged Sekkizhar (33%), Sajid Salim (19%), Carl Apolinario (2%) as not-activated. Fixed to `(!r.started && r.pct === 0) ? 'not-activated'`.
   - **openpyxl not installed**: `pip3 install openpyxl -q` before reading Excel files.
   - **URL down after idle**: Python HTTP server process died. Restarted server and re-ran `tailscale funnel --bg http://localhost:80`.
   - **Tailscale serve syntax changed**: `tailscale serve --bg https / http://localhost:80` rejected; correct syntax is `tailscale serve --bg http://localhost:80`.

5. Problem Solving:
   - Established persistent public URL via Tailscale Funnel (https://my-workspace.tailbd7b77.ts.net/course-dashboard.html)
   - Built robust data update workflow: read CSV/Excel → update RAW array → update stat numbers → update dept buttons
   - Maintained user-specified ordering of top completions using stable sort + RAW array ordering
   - Handled Distribution Power removal as a permanent decision (not re-added even when they appeared in later CSVs)
   - Managed growing number of departments (now 9 buttons in dept filter row, horizontally scrollable on mobile)
   - Server restarts needed periodically as Python HTTP server dies when session goes idle

6. All User Messages:
   - "can you get this worked? https://khalids-mac-mini.tailbd7b77.ts.net/course-dashboard.html"
   - "this was about the Udemy dashboard tracker"
   - "not working" (after first server setup)
   - "still the black box of the top performer is there please remove it completely"
   - [CSV path] "uplate the dashboard based on the attached information, please include the start date of the course course"
   - "add the order numbers from 1st till the end, and also add the names of whomever dn't activate their account yet"
   - "who ever started before 1st of April consider it batch 1 who ever started after 1st of April consider it batch 2"
   - "fix the batch 1 and 2 tag but them exactly in the middle between leanrer name and progress and all in the same olumn all same st"
   - "bring it to the left a bit little bit far from progress column"
   - "enuance the ui for mo I've use" (enhance UI for mobile use)
   - "make ahmad alshehhi first, then khalid Bin kalban, then Shurooq for the top"
   - "remote all Distribution Power employees and remove the tag also"
   - "add the starting date for each + the website is not showing the name"
   - [Ducont Excel path] "Take this list add it to the dashboard this list for Ducont employees add it as a new tag"
   - [Journey txt + EZ design system] (shared files for a different project)
   - "I did a mistake" (about journey/vibe-code-stats pages)
   - "remove the last activities you did it should be in a different terminal"
   - [CSV Apr 8 path] "update the dashboard based on this data"
   - "url is not working" (server died)
   - "its showing me some of the users are not activated although they already progressed in the course"
   - [CSV Apr 9 path] "update the leader board"
   - "url is not working" (server died again)
   - [Ducont Excel Apr 10 path] "add this list progress for Ducont employees"

7. Pending Tasks:
   - Making the server persistent (offered to user but not confirmed): setting up Python HTTP server as a launchd service so it survives reboots
   - No other explicit pending tasks

8. Current Work:
   The most recent work was updating Ducont employee progress from the Excel file `/Users/khalidbinkalban/Downloads/DEWA Course Tracking sheet_10thApril2026.xlsx`. The Ducont section of the RAW array was replaced with updated percentage values:
   - Saravana Kumar: 54→80%, Nixson Jesuraj: 48→80%, Ankur Jain: 45→73%, Anusha Gounder: 40→73%, Fatehali Shaikh: 60→76%, Asjad Lakhani: 100→54%, Abeth: 15→30%, Anjana Elaveetil: 43→54%, Mohammad Sajid: 12→40%, Tharakeswar: 55→**100%** (new completion), Akash: 48→60%, Sekkizhar: 33→62%

   The edit was completed successfully. Total enrolled remains 78 (the Ducont update only changed progress percentages, not headcount).

9. Optional Next Step:
   The Ducont update was just completed successfully. No next step is immediately required unless the user provides another data file or makes a new request. The dashboard is live at `https://my-workspace.tailbd7b77.ts.net/course-dashboard.html` and reflects all updates through April 10, 2026.

If you need specific details from before compaction (like exact code snippets, error messages, or content you generated), read the full transcript at: /Users/khalidbinkalban/.claude/projects/-Users-khalidbinkalban/5b26ebf8-14dc-49a4-bd48-6b6847fc4c4f.jsonl
Continue the conversation from where it left off without asking the user any further questions. Resume directly — do not acknowledge the summary, do not recap what was happening, do not preface with "I'll continue" or similar. Pick up the last task as if the break never happened.


## plugin:context7:context7
Use this server to fetch current documentation whenever the user asks about a library, framework, SDK, API, CLI tool, or cloud service -- even well-known ones like React, Next.js, Prisma, Express, Tailwind, Django, or Spring Boot. This includes API syntax, configuration, version migration, library-specific debugging, setup instructions, and CLI tool usage. Use even when you think you know the answer -- your training data may not reflect recent changes. Prefer this over web search for library docs.

Do not use for: refactoring, writing scripts from scratch, debugging business logic, code review, or general programming concepts.


The dashboard is live at `https://my-workspace.tailbd7b77.ts.net/course-dashboard.html` with the latest Ducont progress updates applied.


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

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


keep this leadboard for
- Innovation & The Future
- Digital DEWA
- Ducont
only


Error: File content (21608 tokens) exceeds maximum allowed tokens (10000). Use offset and limit parameters to read specific portions of the file, or search for specific content instead of reading the whole file.


<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\""
  }
]


746:    { name:'Ahmed Alshehhi',                    pct:100, mins:1355.0,  grp:'Innovation & The Future',     started:'Mar 25' },
747:    { name:'Khalid Bin Kalban',                 pct:100, mins:928.75,  grp:'Innovation & The Future',     started:'Mar 23' },
748:    { name:'Shurooq Ahmad Almheiri',            pct:100, mins:1208.5,  grp:'Innovation & The Future',     started:'Mar 24' },
749:    { name:'Saleha Obaid Essa',                 pct:100, mins:1066.0,  grp:'Innovation & The Future',     started:'Mar 26' },
750:    { name:'Adel Al Tamimi',                    pct:100, mins:1011.25, grp:'Innovation & The Future',     started:'Mar 30' },
751:    { name:'Muhammad Bilal Arif',               pct:60,  mins:578.25,  grp:'Innovation & The Future',     started:'Mar 28' },
752:    { name:'Ashish Agarwal',                    pct:85,  mins:1643.5,  grp:'Innovation & The Future',     started:'Mar 29' },
753:    { name:'Ayesha Sarwashi',                   pct:95,  mins:1014.0,  grp:'Innovation & The Future',     started:'Mar 26' },
754:    { name:'Duaa Suleiman',                     pct:95,  mins:888.25,  grp:'Innovation & The Future',     started:'Mar 25' },
755:    { name:'Atif Waqar',                        pct:65,  mins:984.25,  grp:'Innovation & The Future',     started:'Mar 29' },
756:    { name:'Atif Sharif',                       pct:55,  mins:578.25,  grp:'Innovation & The Future',     started:'Mar 22' },
757:    { name:'Aysha Hassan Al Dhuhoori',          pct:75,  mins:765.25,  grp:'Innovation & The Future',     started:'Apr 3' },
758:    { name:'Tongtong Wang',                     pct:75,  mins:773.25,  grp:'Innovation & The Future',     started:'Apr 6' },
759:    { name:'Muna Jassim',                       pct:40,  mins:575.75,  grp:'Innovation & The Future',     started:'Mar 24' },
760:    { name:'Noora Al Sarrah',                   pct:35,  mins:366.5,   grp:'Innovation & The Future',     started:'Apr 2' },
761:    { name:'Jamil Al Hasan',                    pct:30,  mins:329.0,   grp:'Innovation & The Future',     started:'Mar 18' },
762:    { name:'Wafa Mohd Mubarak Albalooshi',      pct:30,  mins:289.25,  grp:'Innovation & The Future',     started:'Apr 7' },
763:    { name:'Elsa Prakash',                      pct:25,  mins:301.5,   grp:'Innovation & The Future',     started:'Mar 25' },
764:    { name:'Karpagavalli Pandian',              pct:20,  mins:209.75,  grp:'Innovation & The Future',     started:'Apr 8' },
765:    { name:'Khalid Abdulaziz Alali',            pct:16,  mins:181.0,   grp:'Innovation & The Future',     started:'Apr 7' },
766:    { name:'Wafa Mohamed Bamatraf',             pct:16,  mins:143.25,  grp:'Innovation & The Future',     started:'Apr 6' },
767:    { name:'Moaza Alhajeri',                    pct:10,  mins:129.75,  grp:'Innovation & The Future',     started:'Mar 26' },
768:    { name:'Shahul Hameed Mohideen Abdul Kadar',pct:2,   mins:36.0,    grp:'Innovation & The Future',     started:'Mar 26' },
769:    { name:'Saeed Aldosari',                    pct:2,   mins:15.25,   grp:'Innovation & The Future',     started:'Apr 6' },
770:    { name:'Yaseen Tahir',                      pct:2,   mins:36.25,   grp:'Innovation & The Future',     started:'Apr 8' },
771:    { name:'Carl Apolinario',                   pct:2,   mins:0,       grp:'Innovation & The Future',     started:null },
772:    { name:'Abdallah Alkamali',                 pct:2,   mins:18.5,    grp:'Innovation & The Future',     started:'Apr 9' },
773:    { name:'Ebtesam Almarzooqi',                pct:2,   mins:2.5,     grp:'Innovation & The Future',     started:'Apr 9' },
774:    { name:'Ibaad Khot',                        pct:0,   mins:3.75,    grp:'Innovation & The Future',     started:'Apr 9' },
775:    { name:'Hessa Alyassi',                     pct:0,   mins:3.75,    grp:'Innovation & The Future',     started:'Apr 9' },
776:    { name:'Prasanth Mathavan',                 pct:0,   mins:0,       grp:'Innovation & The Future',     started:null },
777:    { name:'Marouane Basta',                    pct:75,  mins:878.25,  grp:'Digital DEWA',                started:'Mar 30' },
778:    { name:'Shahala Cheralakodan',              pct:50,  mins:556.75,  grp:'Digital DEWA',                started:'Apr 1' },
779:    { name:'Haseeb Vadakke Painkal',            pct:25,  mins:222.25,  grp:'Digital DEWA',                started:'Apr 1' },
780:    { name:'Ummehani Rangwala',                 pct:16,  mins:211.75,  grp:'Digital DEWA',                started:'Apr 7' },
781:    { name:'Rakesh Gulaganji',                  pct:16,  mins:178.0,   grp:'Digital DEWA',                started:'Apr 4' },
782:    { name:'Sachin Patil',                      pct:10,  mins:74.75,   grp:'Digital DEWA',                started:'Apr 7' },
783:    { name:'Muhammed Shafi',                    pct:0,   mins:3.75,    grp:'Digital DEWA',                started:'Apr 8' },
784:    { name:'Mohammed Fowza',                    pct:0,   mins:0,       grp:'Digital DEWA',                started:null },
785:    { name:'Mohammed Ayub',                     pct:0,   mins:0,       grp:'Digital DEWA',                started:null },
786:    { name:'Sultan Alzaabi',                    pct:16,  mins:149.75,  grp:'POWER & WATER PLANNING',      started:'Apr 7' },
787:    { name:'Sahaya Vinoth',                     pct:0,   mins:0,       grp:'BS&HR',                       started:null },
788:    { name:'Mohd Abu Atiyeh',                   pct:10,  mins:93.5,    grp:'BS&HR',                       started:'Apr 8' },
789:    { name:'Saif Bin Haider',                   pct:2,   mins:15.0,    grp:'Transmission Power',          started:'Apr 9' },
790:    { name:'Aisha Mubarak',                     pct:0,   mins:2.5,     grp:'Transmission Power',          started:'Apr 9' },
791:    { name:'Ahmad AlSuwaidi',                   pct:2,   mins:30.25,   grp:'Generation',                  started:'Apr 8' },
792:    { name:'Jayakumar Vandavasi Karunamurthy',  pct:25,  mins:125.0,   grp:'Business Dev & Excellence',   started:'Apr 9' },
793:    { name:'Mahmoud Tarek Rezk',                pct:0,   mins:0,       grp:'Business Dev & Excellence',   started:null },
794:    { name:'Saeed M Alkamali',                  pct:0,   mins:0,       grp:'Internal Audit',              started:null },
795:    { name:'Ismail',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
796:    { name:'Chandini Palani',                pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
797:    { name:'Saravana Kumar',                 pct:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
798:    { name:'Nixson Jesuraj',                 pct:80,  mins:0,       grp:'Ducont',                   started:'Mar 27' },
799:    { name:'Ankur Jain',                     pct:73,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
800:    { name:'Anusha Gounder',                 pct:73,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
801:    { name:'Nora Khaled',                    pct:17,  mins:0,       grp:'Ducont',                   started:'Mar 30' },
802:    { name:'Ashwin Kaleeswaran',             pct:52,  mins:0,       grp:'Ducont',                   started:'Mar 28' },
803:    { name:'Fatehali Shaikh',                pct:76,  mins:0,       grp:'Ducont',                   started:'Mar 26' },
804:    { name:'Asjad Lakhani',                  pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
805:    { name:'Abeth',                          pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
806:    { name:'Priyanka Geethik',               pct:60,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
807:    { name:'Sumit Kumar',                    pct:18,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
808:    { name:'Anjana Elaveetil',               pct:54,  mins:0,       grp:'Ducont',                   started:'Mar 31' },
809:    { name:'Prem Kishore',                   pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
810:    { name:'Sumathi Malikarjun',             pct:30,  mins:0,       grp:'Ducont',                   started:'Apr 1' },
811:    { name:'Mohammad Sajid',                 pct:40,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
812:    { name:'Tharakeswar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Mar 27' },
813:    { name:'Akash',                          pct:60,  mins:0,       grp:'Ducont',                   started:'Apr 2' },
814:    { name:'Kamalesh',                       pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
815:    { name:'Suriyakumar',                    pct:100, mins:0,       grp:'Ducont',                   started:'Apr 1' },
816:    { name:'Sunil Sahu',                     pct:5,   mins:0,       grp:'Ducont',                   started:'Apr 3' },
817:    { name:'Athish',                         pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },
818:    { name:'Subhash Chavan',                 pct:100, mins:0,       grp:'Ducont',                   started:'Mar 30' },
819:    { name:'Sekkizhar',                      pct:62,  mins:0,       grp:'Ducont',                   started:null },
820:    { name:'Selvadurai',                     pct:20,  mins:0,       grp:'Ducont',                   started:'Apr 3' },
821:    { name:'Sajid Salim',                    pct:19,  mins:0,       grp:'Ducont',                   started:null },
822:    { name:'Shilkka',                        pct:38,  mins:0,       grp:'Ducont',                   started:'Mar 29' },
823:    { name:'Rakul',                          pct:100, mins:0,       grp:'Ducont',                   started:'Mar 31' },


Now let me check the stats and filter buttons sections.


211:    .dept-btn {
220:    .dept-btn:hover  { background:var(--bg); color:var(--ink); }
221:    .dept-btn.active { background:var(--gold-pale); border-color:var(--gold-border); color:var(--gold); }
349:      .dept-btn, .batch-btn { flex-shrink:0; min-height:36px; }
419:      .dept-btn, .batch-btn { font-size:10px; padding:6px 10px; }
497:          78 enrolled total
503:          93 sessions total
522:          — min watched total
544:
Total Enrolled

669:    <button class="dept-btn active" onclick="setDept('all',this)">All departments</button>
670:    <button class="dept-btn" onclick="setDept('Innovation & The Future',this)">
674:    <button class="dept-btn" onclick="setDept('Digital DEWA',this)">
678:    <button class="dept-btn" onclick="setDept('Ducont',this)">
682:    <button class="dept-btn" onclick="setDept('POWER & WATER PLANNING',this)">
684:      Power & Water
686:    <button class="dept-btn" onclick="setDept('BS&HR',this)">
690:    <button class="dept-btn" onclick="setDept('Transmission Power',this)">
692:      Transmission
694:    <button class="dept-btn" onclick="setDept('Generation',this)">
696:      Generation
698:    <button class="dept-btn" onclick="setDept('Business Dev & Excellence',this)">
702:    <button class="dept-btn" onclick="setDept('Internal Audit',this)">
704:      Internal Audit
733:  var TOTAL = 93;
786:    { name:'Sultan Alzaabi',                    pct:16,  mins:149.75,  grp:'POWER & WATER PLANNING',      started:'Apr 7' },
787:    { name:'Sahaya Vinoth',                     pct:0,   mins:0,       grp:'BS&HR',                       started:null },
788:    { name:'Mohd Abu Atiyeh',                   pct:10,  mins:93.5,    grp:'BS&HR',                       started:'Apr 8' },
789:    { name:'Saif Bin Haider',                   pct:2,   mins:15.0,    grp:'Transmission Power',          started:'Apr 9' },
790:    { name:'Aisha Mubarak',                     pct:0,   mins:2.5,     grp:'Transmission Power',          started:'Apr 9' },
791:    { name:'Ahmad AlSuwaidi',                   pct:2,   mins:30.25,   grp:'Generation',                  started:'Apr 8' },
792:    { name:'Jayakumar Vandavasi Karunamurthy',  pct:25,  mins:125.0,   grp:'Business Dev & Excellence',   started:'Apr 9' },
793:    { name:'Mahmoud Tarek Rezk',                pct:0,   mins:0,       grp:'Business Dev & Excellence',   started:null },
794:    { name:'Saeed M Alkamali',                  pct:0,   mins:0,       grp:'Internal Audit',              started:null },
829:    var done = Math.round(r.pct / 100 * TOTAL);
830:    var status = (!r.started && r.pct === 0) ? 'not-activated' : done === 0 ? 'not-started' : done >= TOTAL ? 'completed' : 'in-progress';
837:      remaining: TOTAL - done,
848:  var totalPct = 0, inProg = 0, notStarted = 0, totalMins = 0;
850:    totalPct += DATA[j].pct;
851:    totalMins += DATA[j].mins;
855:  var avg = Math.round(totalPct / DATA.length);
859:  document.getElementById('m-mins').textContent  = Math.round(totalMins).toLocaleString();
916:    if (g === 'POWER & WATER PLANNING')   return 'Power & Water';
917:    if (g === 'BS&HR')                    return 'BS&HR';
918:    if (g === 'Transmission Power')       return 'Transmission Power';
919:    if (g === 'Generation')               return 'Generation';
920:    if (g === 'Business Dev & Excellence') return 'Biz Dev & Excellence';
921:    if (g === 'Internal Audit')            return 'Internal Audit';
975:      html +=       'of ' + TOTAL + ' sessions · ' + minsStr + ' watched';
1013:    var btns = document.querySelectorAll('.dept-btn');


530
531
532
533
534

535

536

537

538	        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2d6fe8" stroke-width="2" stroke-linecap="round">
539	          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
540	          <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
541	        </svg>
542

543
78

544
Total Enrolled

545

546	        <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>
547	        3 companies
548

549

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

78

Total Enrolled

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


667

668	    Dept:
669	    <button class="dept-btn active" onclick="setDept('all',this)">All departments</button>
670	    <button class="dept-btn" onclick="setDept('Innovation & The Future',this)">
671	      <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>
672	      Innovation & The Future
673	    </button>
674	    <button class="dept-btn" onclick="setDept('Digital DEWA',this)">
675	      <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>
676	      Digital DEWA
677	    </button>
678	    <button class="dept-btn" onclick="setDept('Ducont',this)">
679	      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
680	      Ducont
681	    </button>
682	    <button class="dept-btn" onclick="setDept('POWER & WATER PLANNING',this)">
683	      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
684	      Power & Water
685	    </button>
686	    <button class="dept-btn" onclick="setDept('BS&HR',this)">
687	      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
688	      BS&HR
689	    </button>
690	    <button class="dept-btn" onclick="setDept('Transmission Power',this)">
691	      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
692	      Transmission
693	    </button>
694	    <button class="dept-btn" onclick="setDept('Generation',this)">
695	      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
696	      Generation
697	    </button>
698	    <button class="dept-btn" onclick="setDept('Business Dev & Excellence',this)">
699	      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
700	      Biz Dev
701	    </button>
702	    <button class="dept-btn" onclick="setDept('Internal Audit',this)">
703	      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
704	      Internal Audit
705	    </button>
706

707
708

    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('Ducont',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
      Ducont
    </button>
    <button class="dept-btn" onclick="setDept('POWER & WATER PLANNING',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
      Power & Water
    </button>
    <button class="dept-btn" onclick="setDept('BS&HR',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
      BS&HR
    </button>
    <button class="dept-btn" onclick="setDept('Transmission Power',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      Transmission
    </button>
    <button class="dept-btn" onclick="setDept('Generation',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
      Generation
    </button>
    <button class="dept-btn" onclick="setDept('Business Dev & Excellence',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
      Biz Dev
    </button>
    <button class="dept-btn" onclick="setDept('Internal Audit',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
      Internal Audit
    </button>


Now I have everything I need. I'll make all changes at once:


Edit

    <button class="dept-btn" onclick="setDept('POWER & WATER PLANNING',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
      Power & Water
    </button>
    <button class="dept-btn" onclick="setDept('BS&HR',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
      BS&HR
    </button>
    <button class="dept-btn" onclick="setDept('Transmission Power',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      Transmission
    </button>
    <button class="dept-btn" onclick="setDept('Generation',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
      Generation
    </button>
    <button class="dept-btn" onclick="setDept('Business Dev & Excellence',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
      Biz Dev
    </button>
    <button class="dept-btn" onclick="setDept('Internal Audit',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
      Internal Audit
    </button>