Update index.html

index.html

@@ -966,6 +966,20 @@ tbody tr:last-child td { border-bottom: none; }
             <div class="panel-b"><div class="dist" id="dist"></div></div>
           </div>
 
+          <div class="panel">
+            <div class="panel-h">
+              <h3>CLASS ALLOCATION ROSTERS (4A · 4B · 4C · 4D · SASTERA)</h3>
+            </div>
+            <div class="panel-b">
+              <div class="dist" style="grid-template-columns: repeat(5, 1fr);" id="classDist">
+                <!-- Class counters rendered here -->
+              </div>
+              <div id="classTables" style="display: flex; flex-direction: column; gap: 20px; margin-top: 16px;">
+                <!-- Tables for 4A, 4B, 4C, 4D, SASTERA will be injected here -->
+              </div>
+            </div>
+          </div>
+
           <div class="panel">
             <div class="tools">
               <div class="search"><input type="search" id="search" placeholder="filter rows…"></div>
@@ -976,6 +990,14 @@ tbody tr:last-child td { border-bottom: none; }
                 <option>Account</option>
                 <option>Art / Other</option>
               </select>
+              <select class="select" id="classFilter">
+                <option value="">ALL CLASSES</option>
+                <option value="4A">4A (Science Top)</option>
+                <option value="4B">4B (Science)</option>
+                <option value="4C">4C (Account)</option>
+                <option value="4D">4D (Reka Cipta)</option>
+                <option value="SASTERA">SASTERA</option>
+              </select>
               <a class="link hidden" id="sheetLink" href="#" target="_blank" rel="noopener">OPEN SHEET →</a>
             </div>
             <div class="table-wrap">
@@ -1104,11 +1126,120 @@ tbody tr:last-child td { border-bottom: none; }
     if (x.includes("account")) return "a";
     return "o";
   }
+
+  function assignClasses(list) {
+    // Collect Science students and sort by Science Probability descending & Confidence
+    const scienceStudents = [];
+    const confRank = { "high": 3, "medium": 2, "borderline": 1 };
+
+    list.forEach((r) => {
+      const stream = (r["Recommended Stream"] || "").trim();
+      const prob = parseFloat(r["Prob Science %"]) || 0;
+      const conf = (r["Confidence"] || "").toLowerCase().trim();
+
+      if (stream === "Science") {
+        scienceStudents.push({ row: r, prob, confScore: confRank[conf] || 0 });
+      } else if (stream === "Account") {
+        r["Assigned Class"] = "4C";
+      } else if (stream === "Reka Cipta") {
+        r["Assigned Class"] = "4D";
+      } else {
+        r["Assigned Class"] = "SASTERA";
+      }
+    });
+
+    // Sort science candidates: Highest probability and highest confidence first
+    scienceStudents.sort((a, b) => {
+      if (b.prob !== a.prob) return b.prob - a.prob;
+      return b.confScore - a.confScore;
+    });
+
+    // Equally distribute Science candidates between 4A (Top) and 4B
+    const half = Math.ceil(scienceStudents.length / 2);
+    scienceStudents.forEach((item, idx) => {
+      item.row["Assigned Class"] = idx < half ? "4A" : "4B";
+    });
+  }
+
+  function renderClassRosters() {
+    const classNames = ["4A", "4B", "4C", "4D", "SASTERA"];
+    const classMeta = {
+      "4A": { title: "Class 4A — Science (High Confidence / Top)", badge: "tag-s" },
+      "4B": { title: "Class 4B — Science", badge: "tag-s" },
+      "4C": { title: "Class 4C — Account", badge: "tag-a" },
+      "4D": { title: "Class 4D — Reka Cipta", badge: "tag-r" },
+      "SASTERA": { title: "Class SASTERA — Art / Humanities", badge: "tag-o" }
+    };
+
+    const counts = { "4A": 0, "4B": 0, "4C": 0, "4D": 0, "SASTERA": 0 };
+    rows.forEach(r => {
+      const c = r["Assigned Class"];
+      if (counts[c] !== undefined) counts[c]++;
+    });
+
+    // Render KPI bars for class distribution
+    $("classDist").innerHTML = classNames.map(c => {
+      const cnt = counts[c];
+      const pct = rows.length ? Math.round((cnt / rows.length) * 100) : 0;
+      return '<div class="dist-item"><div class="name">' + c + ' <b>' + cnt + '</b></div>' +
+        '<div class="dist-bar"><i class="' + barClass(c === "4A" || c === "4B" ? "Science" : (c === "4C" ? "Account" : (c === "4D" ? "Reka" : "Art"))) + '" style="width:' + pct + '%"></i></div></div>';
+    }).join("");
+
+    // Render 5 tables
+    $("classTables").innerHTML = classNames.map(c => {
+      const members = rows.filter(r => r["Assigned Class"] === c);
+      const meta = classMeta[c];
+
+      let rowsHtml = members.map((m, idx) => `
+        <tr>
+          <td>${idx + 1}</td>
+          <td><b>${esc(m["Name"] || m["Nama"] || "Student " + (idx + 1))}</b></td>
+          <td><span class="tag ${streamTag(m["Recommended Stream"])}">${esc(m["Recommended Stream"] || "")}</span></td>
+          <td><span class="tag ${confTag(m["Confidence"])}">${esc(m["Confidence"] || "N/A")}</span></td>
+          <td>${esc(m["Prob Science %"] ? m["Prob Science %"] + "%" : "-")}</td>
+        </tr>
+      `).join("");
+
+      if (!members.length) {
+        rowsHtml = `<tr><td colspan="5" style="text-align:center; color: var(--text-3); padding: 12px;">No students assigned to ${c}</td></tr>`;
+      }
+
+      return `
+        <div style="border: 1px solid var(--line); background: var(--panel-2);">
+          <div style="padding: 10px 14px; border-bottom: 1px solid var(--line); display:flex; justify-content:space-between; align-items:center;">
+            <strong style="font-family: var(--mono); font-size: 12px; color: var(--cyan); letter-spacing: 0.08em;">${meta.title}</strong>
+            <span class="tag ${meta.badge}">${members.length} Students</span>
+          </div>
+          <div style="max-height: 220px; overflow-y: auto;">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 40px;">#</th>
+                  <th>Student Name</th>
+                  <th>Stream</th>
+                  <th>Confidence</th>
+                  <th>Science %</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${rowsHtml}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      `;
+    }).join("");
+  }
+
   function show(data) {
     $("empty").classList.add("hidden");
     $("results").classList.remove("hidden");
     const list = data.rows || data.rows_preview || [];
     rows = list;
+
+    // Apply 5-class assignment logic
+    assignClasses(rows);
+
     $("kpiTotal").textContent = data.total ?? list.length;
     $("kpiOk").textContent = data.ok ?? 0;
     $("kpiFail").textContent = data.failed ?? 0;
@@ -1131,7 +1262,10 @@ tbody tr:last-child td { border-bottom: none; }
       $("sheetLink").href = data.sheet_url;
       $("sheetLink").classList.remove("hidden");
     } else $("sheetLink").classList.add("hidden");
-    const prefer = ["Name","Nama","Class","Kelas","ID","Recommended Stream","Second Stream","Confidence","Prob Science %","Prob Reka Cipta %","Prob Account %","Prob Art / Other %","Key Subjects","Status"];
+
+    renderClassRosters();
+
+    const prefer = ["Name","Nama","Class","Kelas","Assigned Class","Recommended Stream","Second Stream","Confidence","Prob Science %","Prob Reka Cipta %","Prob Account %","Prob Art / Other %","Key Subjects","Status"];
     let all = data.columns || (list[0] ? Object.keys(list[0]) : []);
     const ordered = [];
     prefer.forEach((c) => {
@@ -1139,14 +1273,17 @@ tbody tr:last-child td { border-bottom: none; }
       if (real && !ordered.includes(real)) ordered.push(real);
     });
     all.forEach((c) => { if (!ordered.includes(c)) ordered.push(c); });
-    cols = ordered.slice(0, 12);
+    cols = ordered.slice(0, 13);
     filter();
   }
+
   function filter() {
     const q = ($("search").value || "").toLowerCase().trim();
     const stream = $("streamFilter").value;
+    const assignedClass = $("classFilter") ? $("classFilter").value : "";
     let list = rows;
     if (stream) list = list.filter((r) => (r["Recommended Stream"] || "") === stream);
+    if (assignedClass) list = list.filter((r) => (r["Assigned Class"] || "") === assignedClass);
     if (q) list = list.filter((r) => cols.some((c) => String(r[c] ?? "").toLowerCase().includes(q)));
     $("thead").innerHTML = "<tr>" + cols.map((c) => "<th>" + esc(c) + "</th>").join("") + "</tr>";
     $("tbody").innerHTML = list.length ? list.map((r) => {
@@ -1159,6 +1296,9 @@ tbody tr:last-child td { border-bottom: none; }
         if (c === "Recommended Stream") {
           return '<td><span class="tag ' + streamTag(String(v)) + '">' + esc(String(v)) + "</span></td>";
         }
+        if (c === "Assigned Class") {
+          return '<td><span class="tag tag-ok" style="font-weight:700;">' + esc(String(v)) + "</span></td>";
+        }
         if (c === "Confidence") {
           return '<td><span class="tag ' + confTag(String(v)) + '">' + esc(String(v)) + "</span></td>";
         }
@@ -1170,6 +1310,7 @@ tbody tr:last-child td { border-bottom: none; }
   }
   $("search").addEventListener("input", filter);
   $("streamFilter").addEventListener("change", filter);
+  if ($("classFilter")) $("classFilter").addEventListener("change", filter);
   async function runCsv() {
     if (!file) return;
     load(true);