Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Mind-Tech Admin</title>

<style>
:root{
  --bg:#0f1217;
  --panel:#161a22;
  --card:#1d2330;
  --ink:#e6e8ee;
  --muted:#9aa3b2;
  --line:#2c3545;
  --accent1:#8b7cfb;
  --accent2:#ff6ec4;
  --ok:#22c55e;
  --err:#ef4444;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:24px;
}

.hdr{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:18px;
}

.hdr h1{
  margin:0;
  font-size:22px;
  font-weight:900;
}

.sub{color:var(--muted);font-weight:600}

.grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:18px;
}
@media(max-width:980px){
  .grid{grid-template-columns:1fr}
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
}

.left .card{padding:16px}

.label{
  font-weight:800;
  margin:10px 0 6px;
}

input{
  width:100%;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:10px;
  padding:10px 12px;
  font:inherit;
}

.btn{
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink);
  padding:10px 14px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
}

.btn.primary{
  background:linear-gradient(90deg,var(--accent2),var(--accent1));
  border:none;
}

.btn:hover{border-color:#3b4458}

.kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}

.kpi{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
}

.kpi .k{color:var(--muted);font-size:12px;font-weight:700}
.kpi .v{font-size:20px;font-weight:900;margin-top:4px}

.tableCard{padding:0}

.toolbar{
  display:flex;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}

.tableWrap{
  overflow-x:auto;
}

table{
  width:100%;
  min-width:1100px;
  border-collapse:collapse;
  table-layout:fixed;
}

th,td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

th{
  background:var(--card);
  font-weight:800;
  color:#c6cbe0;
  text-align:left;
}

tbody tr:nth-child(even){background:#171b24}

.col-mtid{
  width:150px;
  text-align:center;
  white-space:nowrap;
}

.col-week,.col-day,.col-ts{
  width:80px;
  text-align:center;
  white-space:nowrap;
}

.col-ref{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:#20273a;
  border:1px solid #2e3750;
  color:#c9d2f0;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}

.small{color:var(--muted);font-size:12px}

.health.ok{color:var(--ok);font-weight:800}
.health.err{color:var(--err);font-weight:800}

.footerBar{
  padding:12px;
  display:flex;
  justify-content:flex-end;
  border-top:1px solid var(--line);
}

/* Reader */
#reader{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}

#reader .sheet{
  max-width:900px;
  max-height:80vh;
  background:var(--panel);
  border-radius:14px;
  padding:18px;
  overflow:auto;
}

#reader button{
  float:right;
  background:#111827;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:6px 10px;
  font-weight:800;
  cursor:pointer;
}

#reader .body{
  margin-top:14px;
  white-space:pre-wrap;
}
</style>
</head>

<body>
<div class="wrap">

  <div class="hdr">
    <h1>Mind-Tech <span style="background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent">Admin</span></h1>
    <div class="sub">Reflections & Analytics</div>
  </div>

  <div class="grid">

    
    <div class="left">
      <div class="card">
        <div class="label">Admin API Base</div>
        <input id="apiBase" placeholder="https://aitrainer.register-xxx.workers.dev">

        <div class="label">Admin Token</div>
        <input id="token" placeholder="MT-xxxxx">

        <div class="label">MTID</div>
        <input id="mtid">

        <div style="display:flex;gap:10px">
          <div style="flex:1">
            <div class="label">Week</div>
            <input id="week" type="number">
          </div>
          <div style="flex:1">
            <div class="label">Day</div>
            <input id="day" type="number">
          </div>
        </div>

        <div style="display:flex;gap:10px;margin-top:14px">
          <button class="btn primary" id="load">Load</button>
          <button class="btn" id="clear">Clear</button>
        </div>

        <div class="kpis">
          <div class="kpi"><div class="k">Students</div><div class="v" id="kStudents">0</div></div>
          <div class="kpi"><div class="k">Entries</div><div class="v" id="kEntries">0</div></div>
          <div class="kpi"><div class="k">Last</div><div class="v" id="kLast">—</div></div>
        </div>
      </div>
    </div>

    
    <div class="card tableCard">
      <div class="toolbar">
        <div class="small">Results: <span id="count">0</span></div>
        <button class="btn" id="more">Load More</button>
      </div>

      <div class="tableWrap">
        <table>
          <thead>
            <tr>
              <th class="col-mtid">MTID</th>
              <th class="col-week">Week</th>
              <th class="col-day">Day</th>
              <th class="col-ts">Time</th>
              <th class="col-ref">Reflection</th>
            </tr>
          </thead>
          <tbody id="rows"></tbody>
        </table>
      </div>

      <div class="footerBar">
        <button class="btn" id="moreBottom">Load More</button>
      </div>
    </div>

  </div>
</div>

<div id="reader">
  <div class="sheet">
    <button onclick="reader.style.display='none'">Close</button>
    <div class="body" id="readerBody"></div>
  </div>
</div>

<script>
const rows = document.getElementById("rows");
const reader = document.getElementById("reader");
const readerBody = document.getElementById("readerBody");

let items=[], cursor=null;

async function fetchData(reset=true){
  if(reset){items=[];cursor=null}
  const base = apiBase.value.replace(/\/$/,'');
  const qs = new URLSearchParams();
  if(mtid.value) qs.set("mtid",mtid.value);
  if(week.value) qs.set("week",week.value);
  if(day.value) qs.set("day",day.value);
  if(cursor) qs.set("cursor",cursor);
  const res = await fetch(base+"/admin/reflections?"+qs,{
    headers:{Authorization:"Bearer "+token.value}
  });
  const j = await res.json();
  items = items.concat(j.items||[]);
  cursor = j.cursor||null;
  render();
}

function render(){
  rows.innerHTML = items.map((i,n)=>`
    <tr data-n="${n}">
      <td class="col-mtid"><span class="badge">${i.mtid}</span></td>
      <td class="col-week">${i.week}</td>
      <td class="col-day">${i.day}</td>
      <td class="col-ts">${new Date(i.ts).toLocaleString()}</td>
      <td class="col-ref">${i.reflection}</td>
    </tr>
  `).join("");

  document.getElementById("count").textContent = items.length;
  document.getElementById("kEntries").textContent = items.length;
  document.getElementById("kStudents").textContent = new Set(items.map(i=>i.mtid)).size;
  document.getElementById("kLast").textContent =
    items[0]?new Date(items[0].ts).toLocaleDateString():"—";

  rows.querySelectorAll("tr").forEach(tr=>{
    tr.onclick=()=>{
      readerBody.textContent = items[tr.dataset.n].reflection;
      reader.style.display="flex";
    };
  });
}

load.onclick=()=>fetchData(true);
more.onclick=()=>fetchData(false);
moreBottom.onclick=()=>fetchData(false);
clear.onclick=()=>{items=[];render()};
</script>
</body>
</html>