From 9c0fe8baa0e2a633f6a037fa09d9302e9583eed9 Mon Sep 17 00:00:00 2001
From: Power BI Dev <PtmPowerBIDev@pertamina.com>
Date: Sun, 9 Aug 2026 18:35:43 +0700
Subject: [PATCH] Tambah filter kelas di halaman Input Nilai

- /nilai/<kode>: dropdown "Tampilkan kelas" menyaring tabel Nilai per
  Komponen & Nilai per Mahasiswa sekaligus (tanpa reload); baris
  ringkasan (rata-rata/% lulus MK) ikut disembunyikan saat filter aktif
  karena angkanya dihitung dari seluruh MK, bukan per kelas
- /nilai/<kode>/komponen/<i>: filter serupa + kolom Kelas ditambahkan
  di tabel Nilai Mahasiswa (halaman paling sering dipakai dosen isi
  nilai per sesi/tugas)
- Muncul otomatis hanya bila MK punya >1 kelas

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/templates/form_nilai.html          | 54 +++++++++++++++++++++++---
 app/templates/form_nilai_komponen.html | 41 ++++++++++++++++++-
 2 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/app/templates/form_nilai.html b/app/templates/form_nilai.html
index fc455cb..fba2cbc 100644
--- a/app/templates/form_nilai.html
+++ b/app/templates/form_nilai.html
@@ -89,6 +89,21 @@
   </details>
   {% endif %}
 
+  {% set ada_kelas = grid and grid|selectattr('kelas')|list|length > 0 %}
+  {% if ada_kelas %}
+  {% set semua_kelas = grid|map(attribute='kelas')|select|unique|sort|list %}
+  <div class="filter-baris">
+    <label for="filter-kelas">Tampilkan kelas:</label>
+    <select id="filter-kelas" style="width:auto">
+      <option value="">Semua</option>
+      {% for k in semua_kelas %}
+      <option value="{{ k }}">Kelas {{ k }}</option>
+      {% endfor %}
+    </select>
+    <span id="filter-kelas-info" class="keterangan" style="margin:0"></span>
+  </div>
+  {% endif %}
+
   {% if grid and tabel_komponen and komponen_daftar %}
   <h2 class="bagian">NILAI PER KOMPONEN <span style="font-weight:normal;font-style:italic;color:var(--grey)">— nilai mahasiswa berdasarkan komponen</span></h2>
   <p class="keterangan">Angka = rata-rata skor mentah tiap sesi/tugas komponen itu yang diikuti mahasiswa (bukan lewat Sub-CPMK). Ketik untuk menimpa —
@@ -109,7 +124,7 @@
       <tbody>
         {% for r in tabel_komponen %}
         {% set ri = loop.index0 %}
-        <tr>
+        <tr data-kelas="{{ r.kelas or '' }}">
           <td class="tengah">{{ loop.index }}
             <input type="hidden" name="nim_{{ ri }}" value="{{ r.nim }}">
             <input type="hidden" name="nama_{{ ri }}" value="{{ r.nama }}"></td>
@@ -142,7 +157,6 @@
   <h2 class="bagian">NILAI PER MAHASISWA <span style="font-weight:normal;font-style:italic;color:var(--grey)">— nilai mahasiswa berdasarkan Sub-CPMK</span></h2>
   <form method="post" action="/nilai/{{ peta.kode }}">
     <div class="gulir">
-    {% set ada_kelas = grid|selectattr('kelas')|list|length > 0 %}
     {% set n_kiri = 4 if ada_kelas else 3 %}
     <table class="grid">
       <thead>
@@ -158,7 +172,7 @@
       <tbody>
         {% for m in grid %}
         {% set i = loop.index0 %}
-        <tr>
+        <tr data-kelas="{{ m.kelas or '' }}">
           <td class="tengah">{{ loop.index }}
             <input type="hidden" name="nim_{{ i }}" value="{{ m.nim }}">
             <input type="hidden" name="nama_{{ i }}" value="{{ m.nama }}"></td>
@@ -174,7 +188,7 @@
         </tr>
         {% endfor %}
         {% if per_mhs and hasil %}
-        <tr class="total">
+        <tr class="total" data-kelas="__total__" title="Dihitung dari seluruh mahasiswa MK ini, tidak per kelas">
           <td colspan="{{ n_kiri }}" style="text-align:right">Rata-rata kelas (tersimpan)</td>
           {% for s in peta.subs %}
           {% set info = hasil.sub.get(s.kode) %}
@@ -182,7 +196,7 @@
           {% endfor %}
           <td class="tengah">{{ '%.1f'|format(akhir.values()|sum / akhir|length) if akhir else '—' }}</td>
         </tr>
-        <tr class="total">
+        <tr class="total" data-kelas="__total__" title="Dihitung dari seluruh mahasiswa MK ini, tidak per kelas">
           <td colspan="{{ n_kiri }}" style="text-align:right">% lulus (≥ {{ ambang|round(0)|int }})</td>
           {% for s in peta.subs %}
           {% set info = hasil.sub.get(s.kode) %}
@@ -383,4 +397,34 @@
   {% endif %}
   </details>
   {% endif %}
+
+  {% if ada_kelas %}
+  <script>
+    (function () {
+      var pilih = document.getElementById('filter-kelas');
+      var info = document.getElementById('filter-kelas-info');
+      var baris = document.querySelectorAll('table.grid tbody tr[data-kelas]');
+
+      function perbarui() {
+        var v = pilih.value, n = 0, total = 0;
+        baris.forEach(function (tr) {
+          var kelas = tr.dataset.kelas;
+          if (kelas === '__total__') {
+            // baris rata-rata/% lulus: dihitung dari seluruh MK, cuma masuk akal saat "Semua"
+            tr.style.display = v === '' ? '' : 'none';
+            return;
+          }
+          total++;
+          var tampil = v === '' || kelas === v;
+          tr.style.display = tampil ? '' : 'none';
+          if (tampil) n++;
+        });
+        info.textContent = v === '' ? '' : n + ' dari ' + total + ' mahasiswa ditampilkan';
+      }
+
+      pilih.addEventListener('change', perbarui);
+      perbarui();
+    })();
+  </script>
+  {% endif %}
 {% endblock %}
diff --git a/app/templates/form_nilai_komponen.html b/app/templates/form_nilai_komponen.html
index ce939d9..3742dda 100644
--- a/app/templates/form_nilai_komponen.html
+++ b/app/templates/form_nilai_komponen.html
@@ -96,6 +96,20 @@
     </label>
     {% endif %}
     <h2 class="bagian">NILAI MAHASISWA</h2>
+    {% set ada_kelas = grid|selectattr('kelas')|list|length > 0 %}
+    {% if ada_kelas %}
+    {% set semua_kelas = grid|map(attribute='kelas')|select|unique|sort|list %}
+    <div class="filter-baris">
+      <label for="filter-kelas">Tampilkan kelas:</label>
+      <select id="filter-kelas" style="width:auto">
+        <option value="">Semua</option>
+        {% for k in semua_kelas %}
+        <option value="{{ k }}">Kelas {{ k }}</option>
+        {% endfor %}
+      </select>
+      <span id="filter-kelas-info" class="keterangan" style="margin:0"></span>
+    </div>
+    {% endif %}
     <div class="gulir" style="max-height:480px;overflow-y:auto">
     <table class="grid">
       <thead>
@@ -103,17 +117,19 @@
           <th style="width:44px" class="tengah">No.</th>
           <th style="width:112px">NIM</th>
           <th style="min-width:150px">Nama</th>
+          {% if ada_kelas %}<th style="width:60px" class="tengah">Kelas</th>{% endif %}
           <th class="tengah" style="width:140px">Nilai (0–100)</th>
         </tr>
       </thead>
       <tbody>
         {% for m in grid %}
-        <tr>
+        <tr data-kelas="{{ m.kelas or '' }}">
           <td class="tengah">{{ loop.index }}
             <input type="hidden" name="nim_{{ loop.index0 }}" value="{{ m.nim }}">
             <input type="hidden" name="nama_{{ loop.index0 }}" value="{{ m.nama }}"></td>
           <td>{{ m.nim }}</td>
           <td>{{ m.nama }}</td>
+          {% if ada_kelas %}<td class="tengah">{{ m.kelas or '—' }}</td>{% endif %}
           <td class="isian"><input type="number" name="nilai_{{ loop.index0 }}"
             min="0" max="100" step="any"
             value="{{ '%g'|format(m.nilai_awal) if m.nilai_awal is not none else '' }}"></td>
@@ -129,6 +145,29 @@
     </div>
   </form>
 
+  {% if ada_kelas %}
+  <script>
+    (function () {
+      var pilih = document.getElementById('filter-kelas');
+      var info = document.getElementById('filter-kelas-info');
+      var baris = document.querySelectorAll('table.grid tbody tr[data-kelas]');
+
+      function perbarui() {
+        var v = pilih.value, n = 0;
+        baris.forEach(function (tr) {
+          var tampil = v === '' || tr.dataset.kelas === v;
+          tr.style.display = tampil ? '' : 'none';
+          if (tampil) n++;
+        });
+        info.textContent = v === '' ? '' : n + ' dari ' + baris.length + ' mahasiswa ditampilkan';
+      }
+
+      pilih.addEventListener('change', perbarui);
+      perbarui();
+    })();
+  </script>
+  {% endif %}
+
   {% if komponen.tugas %}
   <script>
     const BENTUK_TEMPLATE = {