can you get this worked?
https://khalids-mac-mini.tailbd7b77.ts.net/course-dashboard.html


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


ToolSearch

Question: select:WebFetch


Question: select:WebFetch


WebFetch

Prompt: What is on this page? What errors or issues are visible? Describe the full content and any problems.


ECONNREFUSED


The connection was refused — the server at `khalids-mac-mini.tailbd7b77.ts.net` isn't reachable from my end (I'm running on Anthropic's servers, not on your local network).

To help you fix the page, could you:

1. **Share the HTML file** — what's the path to `course-dashboard.html` on your Mac Mini?
2. **Describe what's broken** — what should it do vs. what's actually happening?

If you tell me the file path I can read it directly and fix it.


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

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


this was about the Udemy dashboard tracker


Error: File does not exist. Note: your current working directory is /Users/khalidbinkalban.


I don't have any saved memory about this project yet. Can you point me to where the file lives? Something like:

```
! find ~ -name "course-dashboard.html" 2>/dev/null
```

Run that in the prompt and it'll show me the path, then I can read and fix it.


i dont know


Bash

find /Users/khalidbinkalban -name "course-dashboard.html" 2>/dev/null

Find course-dashboard.html file


Error: File content (16288 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.


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	  <meta charset="UTF-8" />
5	  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6	  <title>AI Coder — DEWA Utilization Dashboard</title>
7	  <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" />
8	  <style>
9	    /* Guaranteed number font — works even without Google Fonts */
10	    .num { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', 'Book Antiqua', Palatino, serif !important; font-variant-numeric: tabular-nums; }
11	  </style>
12	  <style>
13	    :root {
14	      --white:        #ffffff;
15	      --bg:           #f4f6fb;
16	      --bg-alt:       #eef1f8;
17	      --surface:      #ffffff;
18	      --gold:         #b8822a;
19	      --gold-light:   #e6a93a;
20	      --gold-pale:    #fdf3e1;
21	      --gold-border:  #e8c97a;
22	      --ink:          #141926;
23	      --ink-mid:      #3d4a63;
24	      --ink-soft:     #6b7a99;
25	      --ink-muted:    #9aa3b8;
26	      --border:       #e2e6f0;
27	      --border-dark:  #cdd2e0;
28	      --shadow-sm:    0 1px 3px rgba(20,25,38,0.07), 0 1px 2px rgba(20,25,38,0.04);
29	      --shadow-md:    0 4px 16px rgba(20,25,38,0.09), 0 2px 4px rgba(20,25,38,0.05);
30	      --shadow-lg:    0 14px 36px rgba(20,25,38,0.12), 0 4px 8px rgba(20,25,38,0.06);
31	      --green:        #16a362;
32	      --green-bg:     #edfaf4;
33	      --green-border: #a3dfc3;
34	      --blue:         #2d6fe8;
35	      --blue-bg:      #eff4fd;
36	      --blue-border:  #9bbaf5;
37	      --amber:        #c47d0e;
38	      --amber-bg:     #fff8ec;
39	      --amber-border: #f5cc7a;
40	      --slate-bg:     #f2f4f8;
41	      --slate-border: #d0d5e2;
42	      --violet:       #6d3fd6;
43	      --violet-bg:    #f3effe;
44	      --violet-border:#c4a8f5;
45	      --teal:         #0e8c7a;
46	      --teal-bg:      #e8f8f6;
47	      --teal-border:  #7fd0c6;
48	      --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
49	    }
50
51	    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
52	    html { scroll-behavior: smooth; }
53	    body {
54	      background: var(--bg);
55	      color: var(--ink);
56	      font-family: 'DM Sans', sans-serif;
57	      font-size: 14px;
58	      min-height: 100vh;
59	      -webkit-font-smoothing: antialiased;
60	    }
61
62	    @keyframes fadeUp   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
63	    @keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
64	    @keyframes slideDown{ from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
65	    @keyframes pulse    { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.75); } }
66
67	    /* ── TOPBAR ── */
68	    .topbar {
69	      background: var(--white);
70	      border-bottom: 1px solid var(--border);
71	      padding: 0 56px;
72	      height: 52px;
73	      display: flex; align-items: center; justify-content: space-between;
74	      position: sticky; top: 0; z-index: 100;
75	      box-shadow: var(--shadow-sm);
76	      animation: slideDown .4s ease both;
77	    }
78	    .topbar-brand { display:flex; align-items:center; gap:10px; }
79	    .brand-dot { width:28px; height:28px; background:var(--gold); border-radius:7px; display:flex; align-items:center; justify-content:center; }
80	    .brand-name { font-size:13px; font-weight:600; color:var(--ink); }
81	    .brand-sep  { width:1px; height:18px; background:var(--border-dark); margin:0 4px; }
82	    .brand-sub  { font-size:12px; color:var(--ink-soft); }
83	    .topbar-right { display:flex; align-items:center; gap:20px; }
84	    .topbar-tag   { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-soft); }
85	    .live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
86
87	    /* ── HERO ── */
88	    .hero {
89	      background: var(--white);
90	      border-bottom: 1px solid var(--border);
91	      padding: 44px 56px 40px;
92	      position: relative; overflow: hidden;
93	      animation: fadeIn .5s ease both;
94	    }
95	    .hero-pattern { position:absolute; top:0; right:0; width:480px; height:100%; pointer-events:none; }
96	    .hero-inner { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:48px; }
97	    .hero-left { flex:1; }
98	    .hero-pill {
99	      display:inline-flex; align-items:center; gap:7px;
100	      background:var(--gold-pale); border:1px solid var(--gold-border);

<!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);


Count lines in file


883 /Users/khalidbinkalban/course-dashboard.html


400	      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round">
401	        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
402	      </svg>
403

404	    Learning Analytics
405

406	    DEWA — Udemy Platform
407

408

409

Live data

410

411	      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
412	        <rect x="3" y="4" width="18" height="18" rx="2"/>
413	        <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"/>
414	      </svg>
415	      Mar 18 – Apr 2, 2026
416

417

418

419
420
421
422	  <svg class="hero-pattern" viewBox="0 0 480 220" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMid slice">
423	    <defs>
424	      <pattern id="dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
425	        <circle cx="1" cy="1" r="1" fill="#b8822a" opacity="0.14"/>
426	      </pattern>
427	      <linearGradient id="dfade" x1="0" x2="1" y1="0" y2="0">
428	        <stop offset="0%" stop-color="white"/>
429	        <stop offset="100%" stop-color="white" stop-opacity="0"/>
430	      </linearGradient>
431	      <mask id="dmask"><rect width="480" height="220" fill="url(#dfade)"/></mask>
432	    </defs>
433	    <rect width="480" height="220" fill="url(#dots)" mask="url(#dmask)"/>
434	    <polygon points="430,16 472,40 472,92 430,116 388,92 388,40" stroke="#b8822a" stroke-width="1" fill="none" opacity="0.13"/>
435	    <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"/>
436	  </svg>
437
438

439

440

441	        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
442	          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
443	          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
444	        </svg>
445	        Course Utilization Report
446

447
AI Coder: Vibe Coder
to Agentic Engineer

448

449

450	          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
451	            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
452	            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
453	          </svg>
454	          21 / 43 enrolled — Batch 1
455

456

457	          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
458	            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
459	          </svg>
460	          93 sessions total
461

462

463	          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
464	            <rect x="3" y="4" width="18" height="18" rx="2"/>
465	            <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"/>
466	          </svg>
467	          3 week program
468

469

470	          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
471	            <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"/>
472	          </svg>
473	          Avg. —% complete
474

475

476	          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
477	            <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/>
478	          </svg>
479	          — min watched total
480

481

482

483
484

485

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

495
—

496

497

498

499
—

500

501

502

503

504
505
506
507
508
509
510

511

512

513

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

519
21 /43

520
Enrolled — Batch 1

521

522	        <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>
523	        2 departments
524

525

526
527

528

529

530	        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#b8822a" stroke-width="2" stroke-linecap="round">
531	          <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"/>
532	        </svg>
533

534
—%

535
Average Progress

536

537	        <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>
538	        Across all learners
539

540

541
542

543

544

545	        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c47d0e" stroke-width="2" stroke-linecap="round">
546	          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
547	        </svg>
548

549
—

550
In Progress

551

552	        <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>
553	        Actively learning
554

555

556
557

558

559

560	        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="2" stroke-linecap="round">
561	          <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
562	        </svg>
563

564
—

565
Not Started

566

567	        <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>
568	        0% completed
569

570

571

572
573
574

575

576	      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" stroke-width="2" stroke-linecap="round">
577	        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
578	      </svg>
579	      Learner Progress
580	      21 learners
581

582

583

584
585	          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
586	            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
587	          </svg>
588
589	        <input class="search-input" id="search-input" type="text" placeholder="Search learner..."/>
590

591

592	        <button class="filter-btn active" onclick="setStatus('all',this)">
593	          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
594	            <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"/>
595	            <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"/>
596	          </svg>All
597	        </button>
598	        <button class="filter-btn" onclick="setStatus('in-progress',this)">
599	          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
600	            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
601	          </svg>In Progress
602	        </button>
603	        <button class="filter-btn" onclick="setStatus('not-started',this)">
604	          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
605	            <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
606	          </svg>Not Started
607	        </button>
608

609	      <button class="sort-btn" onclick="toggleSort()">
610	        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
611	          <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"/>
612	        </svg>
613	        High to Low
614	      </button>
615

616

617
618
619

620	    Dept:
621	    <button class="dept-btn active" onclick="setDept('all',this)">All departments</button>
622	    <button class="dept-btn" onclick="setDept('Innovation & The Future',this)">
623	      <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>
624	      Innovation & The Future
625	    </button>
626	    <button class="dept-btn" onclick="setDept('Digital DEWA',this)">
627	      <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>
628	      Digital DEWA
629	    </button>
630

631
632

633

634
Learner

635
Progress

636
Done %

637
Status

638

639

640

641	      <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">
642	        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
643	      </svg>
644	      No learners match your filter.
645

646

647
648
649
650
651	  AI Coder: Vibe Coder to Agentic Engineer · DEWA Cohort · Mar 18 – Apr 2, 2026 · 93 Sessions · 3 Weeks
652
653
654
882

<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round">
        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
      </svg>

    Learning Analytics

    DEWA — Udemy Platform

Live data

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

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

        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
        </svg>
        Course Utilization Report

AI Coder: Vibe Coder
to Agentic Engineer

          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>
          21 / 43 enrolled — Batch 1

          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
          </svg>
          93 sessions total

          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <rect x="3" y="4" width="18" height="18" rx="2"/>
            <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
          </svg>
          3 week program

          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
          </svg>
          Avg. —% complete

          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/>
          </svg>
          — min watched total

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

—

—

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

21 /43

Enrolled — Batch 1

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

        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#b8822a" stroke-width="2" stroke-linecap="round">
          <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
        </svg>

—%

Average Progress

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

        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c47d0e" stroke-width="2" stroke-linecap="round">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
        </svg>

—

In Progress

        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        Actively learning

        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="2" stroke-linecap="round">
          <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
        </svg>

—

Not Started

        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
        0% completed

      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" stroke-width="2" stroke-linecap="round">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
      </svg>
      Learner Progress
      21 learners

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>

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

        <button class="filter-btn active" onclick="setStatus('all',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
            <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
          </svg>All
        </button>
        <button class="filter-btn" onclick="setStatus('in-progress',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>In Progress
        </button>
        <button class="filter-btn" onclick="setStatus('not-started',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
          </svg>Not Started
        </button>

      <button class="sort-btn" onclick="toggleSort()">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/>
        </svg>
        High to Low
      </button>

    Dept:
    <button class="dept-btn active" onclick="setDept('all',this)">All departments</button>
    <button class="dept-btn" onclick="setDept('Innovation & The Future',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
      Innovation & The Future
    </button>
    <button class="dept-btn" onclick="setDept('Digital DEWA',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
      Digital DEWA
    </button>

Learner

Progress

Done %

Status

      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--ink-muted)" stroke-width="1.5" stroke-linecap="round" style="display:block;margin:0 auto 12px">
        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      No learners match your filter.

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


I can see the full file. What specifically isn't working? The file looks structurally complete — it has all the HTML, CSS, and JavaScript. A few things I notice:

1. **Only 19 learners in the data** but the page says "21 enrolled" — 2 people are missing from `RAW`
2. The data has some people at `pct:0` — are those correct or stale numbers?

What's broken visually or functionally? For example:
- Is the page not loading at all?
- Are numbers wrong?
- Is a specific section not rendering?
- Do you need to **update the data** with new progress numbers?


the url i am not able to open it


Check what's listening on web ports


COMMAND     PID            USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
Cursor     4712 khalidbinkalban   32u  IPv4 0xeccfa443a1bc2cda      0t0  TCP 192.168.1.140:61812->104.18.18.125:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   34u  IPv4 0x1ab23cca8216232e      0t0  TCP 192.168.1.140:54530->ec2-44-205-110-99.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   48u  IPv4 0x74a92c9eb25b58fb      0t0  TCP 192.168.1.140:50435->104.18.19.125:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   51u  IPv4 0xee9c11ed3f0c3d14      0t0  TCP 192.168.1.140:54534->ec2-44-205-110-99.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   54u  IPv4 0xa260bce8c08511bd      0t0  TCP 192.168.1.140:54529->ec2-44-205-110-99.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   71u  IPv4 0xb4490c1538182ccb      0t0  TCP 192.168.1.140:51539->ec2-54-156-192-8.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   73u  IPv4 0x77fecc5c71b04a16      0t0  TCP 192.168.1.140:54527->ec2-44-205-110-99.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   74u  IPv4 0xaf8b2520b2007fd9      0t0  TCP 192.168.1.140:62827->ec2-52-7-224-10.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   75u  IPv4 0x13925ef7dd034bf8      0t0  TCP 192.168.1.140:54532->ec2-44-205-110-99.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   76u  IPv4 0xac274eebe14c1849      0t0  TCP 192.168.1.140:50288->ec2-98-86-206-31.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   77u  IPv4 0xdb3c30dda47c82a3      0t0  TCP 192.168.1.140:62830->ec2-52-7-224-10.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   78u  IPv4 0x781a58aa90489a43      0t0  TCP 192.168.1.140:62825->ec2-52-7-224-10.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor     4712 khalidbinkalban   80u  IPv4 0xe41a951f028a0419      0t0  TCP 192.168.1.140:62826->ec2-52-7-224-10.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor    11172 khalidbinkalban   32u  IPv4 0xe0521a4cd1bfebdb      0t0  TCP 192.168.1.140:50424->ec2-18-213-183-182.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor    11172 khalidbinkalban   34u  IPv4  0xde3225fcd2a1f7a      0t0  TCP 192.168.1.140:51705->ec2-3-224-142-220.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor    11172 khalidbinkalban   35u  IPv4 0x843c23b51f1bbe26      0t0  TCP 192.168.1.140:62833->ec2-52-7-224-10.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor    11172 khalidbinkalban   37u  IPv4 0xb83869694cc3a5fe      0t0  TCP 192.168.1.140:61984->104.18.19.125:https (ESTABLISHED)
Cursor    11172 khalidbinkalban   48u  IPv4 0xfdb74d130ee58d1d      0t0  TCP 192.168.1.140:54526->ec2-44-205-110-99.compute-1.amazonaws.com:https (ESTABLISHED)
Cursor    11172 khalidbinkalban   50u  IPv4 0x96954537cdd83dbe      0t0  TCP 192.168.1.140:63499->104.18.19.125:https (ESTABLISHED)


No web server is running. The file exists at `/Users/khalidbinkalban/course-dashboard.html` but nothing is serving it over HTTP/HTTPS.

The simplest fix — start a local web server with Python (it's already installed on your Mac):


python3 -m http.server 80 --directory /Users/khalidbinkalban &>/tmp/webserver.log &
echo "PID: $!"

Start Python HTTP server on port 80


PID: 49576


sleep 1 && curl -s -o /dev/null -w "%{http_code}" http://localhost/course-dashboard.html

Test if server is serving the file


Server is up and serving. Try the URL again:

**`https://khalids-mac-mini.tailbd7b77.ts.net/course-dashboard.html`**

> **Note:** This server will stop if you close this terminal/session. To make it persistent across reboots, I can set it up as a launchd service — just say the word.


not working


lsof -i :80 2>/dev/null | grep LISTEN && curl -v http://localhost/course-dashboard.html 2>&1 | head -20

Check if port 80 is listening and test connection


Python  49576 khalidbinkalban    5u  IPv6 0x6ae213a93573ce31      0t0  TCP *:http (LISTEN)
* Host localhost:80 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed

  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0*   Trying [::1]:80...
* Connected to localhost (::1) port 80
> GET /course-dashboard.html HTTP/1.1
> Host: localhost
> User-Agent: curl/8.7.1
> Accept: */*
>
* Request completely sent off
* HTTP 1.0, assume close after body
< HTTP/1.0 200 OK
< Server: SimpleHTTP/0.6 Python/3.9.6
< Date: Mon, 06 Apr 2026 16:03:36 GMT
< Content-type: text/html
< Content-Length: 42844
< Last-Modified: Thu, 02 Apr 2026 16:17:28 GMT


which tailscale && tailscale status 2>&1 | head -5

Check Tailscale status


/usr/local/bin/tailscale
100.72.97.47  my-workspace  kkalban10@  macOS  -

# Funnel on:
#     - https://khalids-mac-mini-epl-tracker.tailbd7b77.ts.net:8443
#     - https://my-workspace.tailbd7b77.ts.net:8443


Check Tailscale serve configuration


# Funnel on:
#     - https://khalids-mac-mini-epl-tracker.tailbd7b77.ts.net:8443
#     - https://my-workspace.tailbd7b77.ts.net:8443

https://khalids-mac-mini-epl-tracker.tailbd7b77.ts.net:8443 (Funnel on)
|-- / proxy http://localhost:3001

https://my-workspace.tailbd7b77.ts.net:8443 (Funnel on)
|-- / proxy http://localhost:3001


Found the issue. Your device is named `my-workspace`, not `khalids-mac-mini`. That URL doesn't point to this machine. Also, Tailscale Serve is configured on port 8443, not 443.

Let me set up Tailscale Serve to expose the dashboard on this machine:


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

Configure Tailscale serve to proxy HTTPS to local port 80


Error: Exit code 1
Error: the CLI for serve and funnel has changed. You can run the following command instead:
	- tailscale serve --bg http://localhost:80

Please see https://tailscale.com/kb/1242/tailscale-serve for more information.
2026/04/06 20:04:02 try `tailscale serve --help` for usage info


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

Configure Tailscale serve on port 80


Available within your tailnet:

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

Serve started and running in the background.
To disable the proxy, run: tailscale serve --https=443 off


Done. The dashboard is now accessible at:

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

The old URL (`khalids-mac-mini.tailbd7b77.ts.net`) won't work — this machine's Tailscale name is `my-workspace`. Use the link above instead.


1	User First Name,User Last Name,User Email,External ID,User Groups,Course ID,Course Title,Course Locale,Course Duration,% Marked Completed,Minutes Video Consumed,Date Enrolled,Date Started,First Date Completed,Date Completed,Date Last Active,Course Category,Assigned,Assigned By,User Is Deactivated,Certificate
2	Prasanth,Mathavan,prasanth.mathavan@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,0,0,2026-04-03 06:15:52+00:00,,,,02/04/2026,"Software Engineering, Web Development",FALSE,,No,
3	Moaza,AlFaihan,Moaza.AlFaihan@dewa.gov.ae,,DISTRIBUTION POWER,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,5,41.75,2026-03-30 03:25:54+00:00,2026-03-30 03:27:03+00:00,,,31/03/2026,"Software Engineering, Web Development",FALSE,,No,
4	Abdulaziz,Alfili,abdulaziz.alfili@dewa.gov.ae,,DISTRIBUTION POWER,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,0,0.25,2026-04-01 05:08:52+00:00,2026-04-01 05:42:33+00:00,,,31/03/2026,"Software Engineering, Web Development",FALSE,,No,
5	Muhammad Bilal,Arif,Muhammad.Arif@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,36,348.25,2026-03-24 03:34:31+00:00,2026-03-28 15:47:10+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
6	Ashish,Agarwal,AshishA@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,85,1259.5,2026-03-29 05:41:13+00:00,2026-03-29 10:52:50+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
7	Shahul Hameed Mohideen Abdul,Kadar,Shahul.H@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,0,0.25,2026-03-18 08:01:41+00:00,2026-03-26 11:42:54+00:00,,,26/03/2026,"Software Engineering, Web Development",FALSE,,No,
8	Muna,,Muna.Jassim@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,10,138.5,2026-03-24 03:54:14+00:00,2026-03-24 04:08:38+00:00,,,05/04/2026,"Software Engineering, Web Development",FALSE,,No,
9	Jamil,ALhasan,jamil.alhasan@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,30,329,2026-03-18 06:55:47+00:00,2026-03-18 07:13:15+00:00,,,03/04/2026,"Software Engineering, Web Development",FALSE,,No,
10	Khalid,Bin Kalban,khalid.binkalban@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,100,928.75,2026-03-18 07:28:37+00:00,2026-03-23 05:27:58+00:00,2026-04-05 05:24:42+00:00,2026-04-05 05:24:42+00:00,04/04/2026,"Software Engineering, Web Development",FALSE,,No,https://udemy-certificate.s3.amazonaws.com/pdf/UC-f603e69c-8121-44f9-8829-2c8e542670c5.pdf
11	Duaa,Suleiman,duaa.suleiman@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,80,759.75,2026-03-24 05:06:14+00:00,2026-03-25 18:11:49+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
12	Atif,Sharif,atif.sharif@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,35,368.5,2026-03-22 10:41:11+00:00,2026-03-22 10:49:19+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
13	Atif,Waqar,atif.waqar@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,25,348.5,2026-03-20 06:39:35+00:00,2026-03-29 10:22:04+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
14	Saleha Obaid,Essa,saleha.essa@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,8,90.25,2026-03-26 04:46:59+00:00,2026-03-26 04:55:40+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
15	Elsa,Prakash,elsa.prakash@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,10,102.75,2026-03-25 15:05:59+00:00,2026-03-25 15:11:51+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
16	Shurooq,Almheiri,shurooq.almheiri@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,100,866,2026-03-24 04:58:35+00:00,2026-03-24 05:10:19+00:00,2026-04-05 18:34:10+00:00,2026-04-05 18:34:10+00:00,05/04/2026,"Software Engineering, Web Development",FALSE,,No,https://udemy-certificate.s3.amazonaws.com/pdf/UC-8c18a6f1-75b8-4f20-af99-ab844c0f9b53.pdf
17	Ahmed,Alshehhi,Ahmed.Alshehhi@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,100,1354.75,2026-03-25 03:33:04+00:00,2026-03-25 03:34:57+00:00,2026-04-04 23:56:01+00:00,2026-04-04 23:56:01+00:00,05/04/2026,"Software Engineering, Web Development",FALSE,,No,https://udemy-certificate.s3.amazonaws.com/pdf/UC-39fd94a2-eee1-4612-acb8-68f4cf7527f2.pdf
18	Ayesha,Sarwashi,Ayesha.Ali@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,80,876.5,2026-03-26 04:38:06+00:00,2026-03-26 04:42:10+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
19	Moaza,Alhajeri,moaza.alhajeri@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,10,129.75,2026-03-26 05:23:42+00:00,2026-03-26 05:27:39+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
20	Karpagavalli,,karpagavalli.pandian@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,0,0,2026-04-05 15:10:41+00:00,,,,05/04/2026,"Software Engineering, Web Development",FALSE,,No,
21	Adel,Al Tamimi,adel.altamimi@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,75,786.5,2026-03-30 14:35:12+00:00,2026-03-30 14:36:39+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
22	Marouane,Basta,marouane.basta@dewa.gov.ae,,Digital DEWA,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,25,302.75,2026-03-30 09:07:55+00:00,2026-03-30 09:11:24+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
23	Shahala,,shahala.cheralakodan@dewa.gov.ae,,Digital DEWA,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,25,289.25,2026-04-01 10:22:18+00:00,2026-04-01 10:23:49+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
24	Haseeb Vadakke,Painkal,Haseeb.Painkal@dewa.gov.ae,,Digital DEWA,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,2,62.5,2026-04-01 04:38:19+00:00,2026-04-01 04:41:30+00:00,,,02/04/2026,"Software Engineering, Web Development",FALSE,,No,
25	Rakesh,Gulaganji,rakesh.gulaganji@dewa.gov.ae,,Digital DEWA,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,5,96,2026-04-04 14:53:56+00:00,2026-04-04 14:55:02+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
26	Noora,Al Sarrah,noora.alsarah@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,10,156.75,2026-04-02 10:21:53+00:00,2026-04-02 13:20:10+00:00,,,05/04/2026,"Software Engineering, Web Development",FALSE,,No,
27	Aysha Hassan,Al Dhuhoori,Aysha.AlDhuhoori@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,45,449.5,2026-04-03 05:25:14+00:00,2026-04-03 17:15:13+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
28	Wafa Mohamed,Bamatraf,Wafa.Bamatraf@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,10,127,2026-04-06 06:56:29+00:00,2026-04-06 07:36:10+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
29	Tongtong,Wang,Tongtong.Wang@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,2,18,2026-04-06 08:11:59+00:00,2026-04-06 08:56:42+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
30	Saeed,Aldosari,saeed.aldosari@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,2,15.25,2026-04-06 10:38:40+00:00,2026-04-06 10:39:43+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
31
[result-id: r1]

User First Name,User Last Name,User Email,External ID,User Groups,Course ID,Course Title,Course Locale,Course Duration,% Marked Completed,Minutes Video Consumed,Date Enrolled,Date Started,First Date Completed,Date Completed,Date Last Active,Course Category,Assigned,Assigned By,User Is Deactivated,Certificate
Prasanth,Mathavan,prasanth.mathavan@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,0,0,2026-04-03 06:15:52+00:00,,,,02/04/2026,"Software Engineering, Web Development",FALSE,,No,
Moaza,AlFaihan,Moaza.AlFaihan@dewa.gov.ae,,DISTRIBUTION POWER,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,5,41.75,2026-03-30 03:25:54+00:00,2026-03-30 03:27:03+00:00,,,31/03/2026,"Software Engineering, Web Development",FALSE,,No,
Abdulaziz,Alfili,abdulaziz.alfili@dewa.gov.ae,,DISTRIBUTION POWER,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,0,0.25,2026-04-01 05:08:52+00:00,2026-04-01 05:42:33+00:00,,,31/03/2026,"Software Engineering, Web Development",FALSE,,No,
Muhammad Bilal,Arif,Muhammad.Arif@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,36,348.25,2026-03-24 03:34:31+00:00,2026-03-28 15:47:10+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Ashish,Agarwal,AshishA@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,85,1259.5,2026-03-29 05:41:13+00:00,2026-03-29 10:52:50+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Shahul Hameed Mohideen Abdul,Kadar,Shahul.H@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,0,0.25,2026-03-18 08:01:41+00:00,2026-03-26 11:42:54+00:00,,,26/03/2026,"Software Engineering, Web Development",FALSE,,No,
Muna,,Muna.Jassim@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,10,138.5,2026-03-24 03:54:14+00:00,2026-03-24 04:08:38+00:00,,,05/04/2026,"Software Engineering, Web Development",FALSE,,No,
Jamil,ALhasan,jamil.alhasan@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,30,329,2026-03-18 06:55:47+00:00,2026-03-18 07:13:15+00:00,,,03/04/2026,"Software Engineering, Web Development",FALSE,,No,
Khalid,Bin Kalban,khalid.binkalban@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,100,928.75,2026-03-18 07:28:37+00:00,2026-03-23 05:27:58+00:00,2026-04-05 05:24:42+00:00,2026-04-05 05:24:42+00:00,04/04/2026,"Software Engineering, Web Development",FALSE,,No,https://udemy-certificate.s3.amazonaws.com/pdf/UC-f603e69c-8121-44f9-8829-2c8e542670c5.pdf
Duaa,Suleiman,duaa.suleiman@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,80,759.75,2026-03-24 05:06:14+00:00,2026-03-25 18:11:49+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Atif,Sharif,atif.sharif@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,35,368.5,2026-03-22 10:41:11+00:00,2026-03-22 10:49:19+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Atif,Waqar,atif.waqar@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,25,348.5,2026-03-20 06:39:35+00:00,2026-03-29 10:22:04+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Saleha Obaid,Essa,saleha.essa@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,8,90.25,2026-03-26 04:46:59+00:00,2026-03-26 04:55:40+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Elsa,Prakash,elsa.prakash@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,10,102.75,2026-03-25 15:05:59+00:00,2026-03-25 15:11:51+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Shurooq,Almheiri,shurooq.almheiri@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,100,866,2026-03-24 04:58:35+00:00,2026-03-24 05:10:19+00:00,2026-04-05 18:34:10+00:00,2026-04-05 18:34:10+00:00,05/04/2026,"Software Engineering, Web Development",FALSE,,No,https://udemy-certificate.s3.amazonaws.com/pdf/UC-8c18a6f1-75b8-4f20-af99-ab844c0f9b53.pdf
Ahmed,Alshehhi,Ahmed.Alshehhi@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,100,1354.75,2026-03-25 03:33:04+00:00,2026-03-25 03:34:57+00:00,2026-04-04 23:56:01+00:00,2026-04-04 23:56:01+00:00,05/04/2026,"Software Engineering, Web Development",FALSE,,No,https://udemy-certificate.s3.amazonaws.com/pdf/UC-39fd94a2-eee1-4612-acb8-68f4cf7527f2.pdf
Ayesha,Sarwashi,Ayesha.Ali@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,80,876.5,2026-03-26 04:38:06+00:00,2026-03-26 04:42:10+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Moaza,Alhajeri,moaza.alhajeri@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,10,129.75,2026-03-26 05:23:42+00:00,2026-03-26 05:27:39+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Karpagavalli,,karpagavalli.pandian@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,0,0,2026-04-05 15:10:41+00:00,,,,05/04/2026,"Software Engineering, Web Development",FALSE,,No,
Adel,Al Tamimi,adel.altamimi@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,75,786.5,2026-03-30 14:35:12+00:00,2026-03-30 14:36:39+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Marouane,Basta,marouane.basta@dewa.gov.ae,,Digital DEWA,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,25,302.75,2026-03-30 09:07:55+00:00,2026-03-30 09:11:24+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Shahala,,shahala.cheralakodan@dewa.gov.ae,,Digital DEWA,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,25,289.25,2026-04-01 10:22:18+00:00,2026-04-01 10:23:49+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Haseeb Vadakke,Painkal,Haseeb.Painkal@dewa.gov.ae,,Digital DEWA,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,2,62.5,2026-04-01 04:38:19+00:00,2026-04-01 04:41:30+00:00,,,02/04/2026,"Software Engineering, Web Development",FALSE,,No,
Rakesh,Gulaganji,rakesh.gulaganji@dewa.gov.ae,,Digital DEWA,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,5,96,2026-04-04 14:53:56+00:00,2026-04-04 14:55:02+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Noora,Al Sarrah,noora.alsarah@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,10,156.75,2026-04-02 10:21:53+00:00,2026-04-02 13:20:10+00:00,,,05/04/2026,"Software Engineering, Web Development",FALSE,,No,
Aysha Hassan,Al Dhuhoori,Aysha.AlDhuhoori@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,45,449.5,2026-04-03 05:25:14+00:00,2026-04-03 17:15:13+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Wafa Mohamed,Bamatraf,Wafa.Bamatraf@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,10,127,2026-04-06 06:56:29+00:00,2026-04-06 07:36:10+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Tongtong,Wang,Tongtong.Wang@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,2,18,2026-04-06 08:11:59+00:00,2026-04-06 08:56:42+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,
Saeed,Aldosari,saeed.aldosari@dewa.gov.ae,,Innovation & The Future,7053781,AI Coder: Vibe Coder to Agentic Engineer in 3 Weeks,en_US,974,2,15.25,2026-04-06 10:38:40+00:00,2026-04-06 10:39:43+00:00,,,06/04/2026,"Software Engineering, Web Development",FALSE,,No,


uplate the dashboard based on the attached information, please include the start date of the course course


Got the new data. 29 learners now (up from 19), 3 completions (Khalid, Shurooq, Ahmed), and 3 departments. Let me update the dashboard.


100	      background:var(--gold-pale); border:1px solid var(--gold-border);
101	      border-radius:99px; padding:5px 13px 5px 9px;
102	      font-size:11px; font-weight:600; color:var(--gold);
103	      letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px;
104	    }
105	    .hero-title {
106	      font-family:'Fraunces',serif; font-size:38px; font-weight:700;
107	      line-height:1.12; color:var(--ink); letter-spacing:-.02em; max-width:520px;
108	    }
109	    .hero-title em { font-style:italic; font-weight:300; color:var(--gold); }
110	    .hero-meta {
111	      display:flex; margin-top:22px;
112	      border:1px solid var(--border); border-radius:var(--r-md);
113	      overflow:hidden; width:fit-content; background:#f9fafc;
114	    }
115	    .meta-chip {
116	      display:flex; align-items:center; gap:8px;
117	      padding:10px 20px; font-size:12px; color:var(--ink-mid);
118	      border-right:1px solid var(--border);
119	    }
120	    .meta-chip:last-child { border-right:none; }
121	    .meta-chip strong { color:var(--ink); font-weight:600; }
122
123	    /* ── TOP PERFORMER ── */
124	    .performer-card {
125	      background:var(--ink); border-radius:var(--r-lg);
126	      padding:24px 26px; min-width:244px; position:relative;
127	      overflow:hidden; box-shadow:var(--shadow-lg); flex-shrink:0;
128	    }
129	    .performer-card::before {
130	      content:''; position:absolute; inset:0;
131	      background:radial-gradient(circle at 80% 20%,rgba(184,130,42,.28) 0%,transparent 65%);
132	      pointer-events:none;
133	    }
134	    .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; }
135	    .performer-name  { font-family:'Fraunces',serif; font-size:20px; font-weight:600; color:#fff; line-height:1.2; margin-bottom:4px; }
136	    .performer-score { font-size:11px; color:rgba(255,255,255,.45); margin-bottom:16px; }
137	    .performer-track { height:4px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
138	    .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); }
139	    .performer-bottom{ display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; }
140	    .performer-pct   { font-family:'Fraunces',serif; font-size:28px; font-weight:700; color:var(--gold-light); line-height:1; }
141	    .performer-sub   { font-size:11px; color:rgba(255,255,255,.35); }
142
143	    /* ── MAIN ── */
144	    .main { padding:32px 56px 56px; }
145
146	    /* ── STAT CARDS ── */
147	    .stats-grid {
148	      display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;
149	    }
150	    .stat-card {
151	      background:var(--surface); border:1px solid var(--border);
152	      border-radius:var(--r-lg); padding:22px 22px 20px;
153	      position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
154	      animation:fadeUp .5s ease both;
155	      transition:box-shadow .25s ease, border-color .25s ease;
156	    }
157	    .stat-card:hover { box-shadow:var(--shadow-md); border-color:var(--border-dark); }
158	    .stat-accent { position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--r-lg) var(--r-lg) 0 0; }
159	    .stat-icon-wrap { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
160	    .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); }
161	    .stat-num .unit { font-size:24px; font-weight:300; color:var(--gold); }
162	    .stat-lbl { font-size:11px; font-weight:500; color:var(--ink-muted); letter-spacing:.07em; text-transform:uppercase; margin-top:6px; }
163	    .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; }
164
165	    /* ── SECTION / CONTROLS ── */
166	    .section-head {
167	      display:flex; align-items:center; justify-content:space-between;
168	      margin-bottom:10px; gap:16px; flex-wrap:wrap;
169	    }
170	    .section-title { font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; }
171	    .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); }
172	    .controls-row  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
173
174	    .dept-row {
175	      display:flex; align-items:center; gap:8px;
176	      margin-bottom:14px; flex-wrap:wrap;
177	    }
178	    .dept-label { font-size:11px; font-weight:500; color:var(--ink-muted); letter-spacing:.06em; text-transform:uppercase; }
179
180	    .search-wrap { position:relative; }
181	    .search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-muted); pointer-events:none; }
182	    .search-input {
183	      background:var(--white); border:1px solid var(--border);
184	      border-radius:var(--r-sm); padding:9px 14px 9px 36px; width:220px;
185	      color:var(--ink); font-family:'DM Sans',sans-serif; font-size:13px; outline:none;
186	      transition:border-color .2s, box-shadow .2s; box-shadow:var(--shadow-sm);
187	    }
188	    .search-input::placeholder { color:var(--ink-muted); }
189	    .search-input:focus { border-color:var(--gold-border); box-shadow:0 0 0 3px var(--gold-pale); }
190
191	    .filter-group {
192	      display:flex; align-items:center; background:var(--white);
193	      border:1px solid var(--border); border-radius:var(--r-sm);
194	      overflow:hidden; box-shadow:var(--shadow-sm);
195	    }
196	    .filter-btn {
197	      display:flex; align-items:center; gap:6px;
198	      padding:8px 13px;
199	      font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
200	      color:var(--ink-soft); background:transparent;
201	      border:none; border-right:1px solid var(--border);
202	      cursor:pointer; transition:background .15s, color .15s; white-space:nowrap;
203	    }
204	    .filter-btn:last-child { border-right:none; }
205	    .filter-btn:hover  { background:var(--bg); color:var(--ink); }
206	    .filter-btn.active { background:var(--gold-pale); color:var(--gold); }
207
208	    .dept-btn {
209	      display:inline-flex; align-items:center; gap:6px;
210	      padding:6px 12px;
211	      font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
212	      color:var(--ink-soft); background:var(--white);
213	      border:1px solid var(--border); border-radius:99px;
214	      cursor:pointer; transition:background .15s, color .15s, border-color .15s;
215	      box-shadow:var(--shadow-sm); white-space:nowrap;
216	    }
217	    .dept-btn:hover  { background:var(--bg); color:var(--ink); }
218	    .dept-btn.active { background:var(--gold-pale); border-color:var(--gold-border); color:var(--gold); }
219
220	    .sort-btn {
221	      display:flex; align-items:center; gap:6px; padding:9px 14px;
222	      background:var(--white); border:1px solid var(--border); border-radius:var(--r-sm);
223	      font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
224	      color:var(--ink-soft); cursor:pointer; box-shadow:var(--shadow-sm);
225	      transition:background .15s, border-color .15s, color .15s; white-space:nowrap;
226	    }
227	    .sort-btn:hover { background:var(--bg); border-color:var(--border-dark); color:var(--ink); }
228
229	    /* ── TABLE ── */
230	    .table-card {
231	      background:var(--surface); border:1px solid var(--border);
232	      border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-md);
233	    }
234	    .table-head {
235	      display:grid;
236	      grid-template-columns: 1.4fr 1fr 90px 140px;
237	      padding:12px 28px; background:var(--bg-alt); border-bottom:1px solid var(--border);
238	      column-gap: 16px;
239	    }
240	    .th { font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }
241	    .th.right  { text-align:right; }
242	    .th.center { text-align:center; }
243
244	    .learner-row {
245	      display:grid;
246	      grid-template-columns: 1.4fr 1fr 90px 140px;
247	      column-gap: 16px;
248	      align-items:center; padding:15px 24px;
249	      border-bottom:1px solid var(--border);
250	      transition:background .15s;
251	      animation:fadeUp .4s ease both;
252	    }
253	    .learner-row:last-child { border-bottom:none; }
254	    .learner-row:hover { background:var(--bg); }
255
256	    .learner-info { display:flex; align-items:center; gap:12px; overflow:hidden; }
257	    .avatar {
258	      width:36px; height:36px; border-radius:50%;
259	      display:flex; align-items:center; justify-content:center;
260	      font-family:'Fraunces',serif; font-size:13px; font-weight:700;
261	      flex-shrink:0; border:2px solid;
262	    }
263	    .learner-meta { overflow:hidden; }
264	    .learner-name { font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
265	    .learner-dept { font-size:10px; color:var(--ink-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
266
267	    .cell { font-size:13px; color:var(--ink-soft); }
268	    .cell.right  { text-align:right; }
269	    .cell.center { text-align:center; }
270	    .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; }
271
272	    .progress-cell { padding-right:8px; padding-left:4px; }
273	    .progress-track { height:6px; background:var(--bg-alt); border-radius:99px; overflow:hidden; border:1px solid var(--border); }
274	    .progress-fill  { height:100%; border-radius:99px; transition:width 1.2s cubic-bezier(.16,1,.3,1); }
275	    .progress-lbl   { font-size:10px; color:var(--ink-muted); margin-top:4px; }
276
277	    .pct-cell { text-align:right; font-family:'Fraunces','Georgia','Palatino Linotype',Palatino,serif; font-size:24px; font-weight:700; line-height:1; }
278	    .pct-cell small { font-family:'DM Sans',sans-serif; font-size:11px; font-weight:400; color:var(--ink-muted); }
279
280	    .week-badge { display:inline-flex; align-items:center; justify-content:center; padding:3px 10px; border-radius:99px; font-size:10px; font-weight:600; }
281	    .w0 { background:var(--slate-bg); color:var(--ink-muted); border:1px solid var(--slate-border); }
282	    .w1 { background:var(--blue-bg);  color:var(--blue);      border:1px solid var(--blue-border); }
283	    .w2 { background:var(--amber-bg); color:var(--amber);     border:1px solid var(--amber-border); }
284	    .w3 { background:var(--green-bg); color:var(--green);     border:1px solid var(--green-border); }
285
286	    .status-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; font-size:10px; font-weight:600; }
287	    .not-started { background:var(--slate-bg); color:var(--ink-muted); border:1px solid var(--slate-border); }
288	    .in-progress  { background:var(--amber-bg); color:var(--amber);     border:1px solid var(--amber-border); }
289	    .completed    { background:var(--green-bg); color:var(--green);     border:1px solid var(--green-border); }
290
291	    /* ── EMPTY ── */
292	    .empty-state { padding:56px 24px; text-align:center; color:var(--ink-muted); font-size:13px; display:none; }
293	    .card-footer  { display:none; }
294
295	    /* ── FOOTER ── */
296	    .footer {
297	      text-align:center; padding:20px 56px; font-size:11px;
298	      color:var(--ink-muted); border-top:1px solid var(--border);
299	      background:var(--white); letter-spacing:.05em;
300	    }
301	    .footer strong { color:var(--gold); font-weight:600; }
302
303	    @media (max-width:1140px) {
304	      .stats-grid { grid-template-columns:repeat(2,1fr); }
305	      .table-head,.learner-row { grid-template-columns:1.2fr 1fr 80px 130px; column-gap:12px; }
306	    }
307	    /* ── TABLET ── */
308	    @media (max-width:900px) {
309	      .topbar { padding:0 20px; }
310	      .topbar-tag:last-child { display:none; }
311	      .hero { padding:28px 20px 24px; }
312	      .main { padding:20px 20px 40px; }
313	      .footer { padding:16px 20px; }
314	      .hero-inner { flex-direction:column; gap:20px; }
315	      .hero-title { font-size:30px; }
316	      .hero-meta { flex-wrap:wrap; width:100%; }
317	      .meta-chip { padding:8px 14px; font-size:11px; flex:1 1 40%; }
318	      .performer-card { min-width:unset; }
319	      .stats-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
320	      .stat-num { font-size:34px; }
321	      .section-head { flex-direction:column; align-items:flex-start; gap:10px; }
322	      .controls-row { width:100%; flex-wrap:wrap; gap:8px; }
323	      .search-wrap { flex:1 1 100%; }
324	      .search-input { width:100%; }
325	      .filter-group { flex:1 1 100%; }
326	      .filter-btn { flex:1; justify-content:center; padding:9px 8px; font-size:11px; }
327	      .dept-row { flex-wrap:wrap; }
328	      /* Card layout for table */
329	      .table-head { display:none; }
330	      .table-card { border-radius:var(--r-lg); background:transparent; border:none; box-shadow:none; }
331	      .learner-row {
332	        display:flex !important;
333	        flex-direction:column !important;
334	        gap:0;
335	        padding:0;
336	        margin-bottom:10px;
337	        border:1px solid var(--border);
338	        border-radius:var(--r-lg);
339	        background:var(--white);
340	        box-shadow:var(--shadow-sm);
341	        overflow:hidden;
342	        column-gap:0;
343	      }
344	      .learner-row:hover { background:var(--white); }
345	      .learner-row:last-child { border-bottom:1px solid var(--border); }
346	      /* Card top: avatar + name + dept */
347	      .learner-info {
348	        padding:14px 16px 12px;
349	        border-bottom:1px solid var(--border);
350	        width:100%;
351	      }
352	      /* Card body: sessions + bar */
353	      .progress-cell {
354	        padding:12px 16px 10px !important;
355	        border-bottom:1px solid var(--border);
356	        width:100%;
357	      }
358	      /* Card footer: pct + status side by side */
359	      .pct-cell {
360	        display:none !important;
361	      }
362	      .cell.center { display:none !important; }
363	      .card-footer {
364	        display:flex !important;
365	        align-items:center;
366	        justify-content:space-between;
367	        padding:11px 16px;
368	        border-top:1px solid var(--border);
369	        background:var(--bg-alt);
370	      }
371	      .card-footer-pct {
372	        font-family:'Fraunces','Georgia','Palatino Linotype',Palatino,serif;
373	        font-size:22px; font-weight:700; color:var(--ink);
374	      }
375	      .cell.center { text-align:left; }
376	      .sessions-done { font-size:22px; }
377	    }
378
379	    /* ── MOBILE ── */
380	    @media (max-width:480px) {
381	      .hero-title { font-size:24px; }
382	      .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
383	      .stat-num { font-size:28px; }
384	      .stat-icon-wrap { width:32px; height:32px; }
385	      .stat-tag { display:none; }
386	      .meta-chip { flex:1 1 100%; border-right:none !important; border-bottom:1px solid var(--border); }
387	      .meta-chip:last-child { border-bottom:none; }
388	      .hero-meta { flex-direction:column; }
389	      .filter-btn span, .filter-btn svg + * { font-size:11px; }
390	      .dept-btn { font-size:10px; padding:5px 9px; }
391	    }
392	  </style>
393
394
395
396
397

398

399

[result-id: r2]

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

    /* ── 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 1fr 80px 130px; column-gap:12px; }
    }
    /* ── TABLET ── */
    @media (max-width:900px) {
      .topbar { padding:0 20px; }
      .topbar-tag:last-child { display:none; }
      .hero { padding:28px 20px 24px; }
      .main { padding:20px 20px 40px; }
      .footer { padding:16px 20px; }
      .hero-inner { flex-direction:column; gap:20px; }
      .hero-title { font-size:30px; }
      .hero-meta { flex-wrap:wrap; width:100%; }
      .meta-chip { padding:8px 14px; font-size:11px; flex:1 1 40%; }
      .performer-card { min-width:unset; }
      .stats-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
      .stat-num { font-size:34px; }
      .section-head { flex-direction:column; align-items:flex-start; gap:10px; }
      .controls-row { width:100%; flex-wrap:wrap; gap:8px; }
      .search-wrap { flex:1 1 100%; }
      .search-input { width:100%; }
      .filter-group { flex:1 1 100%; }
      .filter-btn { flex:1; justify-content:center; padding:9px 8px; font-size:11px; }
      .dept-row { flex-wrap:wrap; }
      /* Card layout for table */
      .table-head { display:none; }
      .table-card { border-radius:var(--r-lg); 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;
      }
      .learner-row:hover { background:var(--white); }
      .learner-row:last-child { border-bottom:1px solid var(--border); }
      /* Card top: avatar + name + dept */
      .learner-info {
        padding:14px 16px 12px;
        border-bottom:1px solid var(--border);
        width:100%;
      }
      /* Card body: sessions + bar */
      .progress-cell {
        padding:12px 16px 10px !important;
        border-bottom:1px solid var(--border);
        width:100%;
      }
      /* Card footer: pct + status side by side */
      .pct-cell {
        display:none !important;
      }
      .cell.center { display:none !important; }
      .card-footer {
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        padding:11px 16px;
        border-top:1px solid var(--border);
        background:var(--bg-alt);
      }
      .card-footer-pct {
        font-family:'Fraunces','Georgia','Palatino Linotype',Palatino,serif;
        font-size:22px; font-weight:700; color:var(--ink);
      }
      .cell.center { text-align:left; }
      .sessions-done { font-size:22px; }
    }

    /* ── MOBILE ── */
    @media (max-width:480px) {
      .hero-title { font-size:24px; }
      .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
      .stat-num { font-size:28px; }
      .stat-icon-wrap { width:32px; height:32px; }
      .stat-tag { display:none; }
      .meta-chip { flex:1 1 100%; border-right:none !important; border-bottom:1px solid var(--border); }
      .meta-chip:last-child { border-bottom:none; }
      .hero-meta { flex-direction:column; }
      .filter-btn span, .filter-btn svg + * { font-size:11px; }
      .dept-btn { font-size:10px; padding:5px 9px; }
    }
  </style>


Got it — updating everything from the new CSV data. Changes: 29 learners, 3 completions, 3 departments, updated progress numbers, and adding each learner's course start date.


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

<!DOCTYPE html>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Coder — DEWA Utilization Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,300&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />

      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round">
        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
      </svg>

    Learning Analytics

    DEWA — Udemy Platform

Live data

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

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

        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
        </svg>
        Course Utilization Report

AI Coder: Vibe Coder
to Agentic Engineer

          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>
          21 / 43 enrolled — Batch 1

          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
          </svg>
          93 sessions total

          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <rect x="3" y="4" width="18" height="18" rx="2"/>
            <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
          </svg>
          3 week program

          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
          </svg>
          Avg. —% complete

          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
            <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/>
          </svg>
          — min watched total

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

—

—

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

21 /43

Enrolled — Batch 1

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

        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#b8822a" stroke-width="2" stroke-linecap="round">
          <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
        </svg>

—%

Average Progress

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

        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c47d0e" stroke-width="2" stroke-linecap="round">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
        </svg>

—

In Progress

        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        Actively learning

        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="2" stroke-linecap="round">
          <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
        </svg>

—

Not Started

        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
        0% completed

      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" stroke-width="2" stroke-linecap="round">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
      </svg>
      Learner Progress
      21 learners

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>

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

        <button class="filter-btn active" onclick="setStatus('all',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
            <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
          </svg>All
        </button>
        <button class="filter-btn" onclick="setStatus('in-progress',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>In Progress
        </button>
        <button class="filter-btn" onclick="setStatus('not-started',this)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
          </svg>Not Started
        </button>

      <button class="sort-btn" onclick="toggleSort()">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/>
        </svg>
        High to Low
      </button>

    Dept:
    <button class="dept-btn active" onclick="setDept('all',this)">All departments</button>
    <button class="dept-btn" onclick="setDept('Innovation & The Future',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
      Innovation & The Future
    </button>
    <button class="dept-btn" onclick="setDept('Digital DEWA',this)">
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
      Digital DEWA
    </button>

Learner

Progress

Done %

Status

      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--ink-muted)" stroke-width="1.5" stroke-linecap="round" style="display:block;margin:0 auto 12px">
        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      No learners match your filter.

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