V40-V43: band umur vote (BARU/VALID/KADALUARSA, scan simpan semua umur) → REVOTE = VALID langsung (V42) → tag mint 1-hari + badge VOTE ULANG SEGERA (V43) ; klaim recovery jendela lewat + parse respons dict rows (B7/B8) ; backend mysql test_mariadb ; oracle test_dashboard/distribute/get_voters/mariadb ; images web/scan/dist/claim rebuild + push

static/app.js

@@ -14,8 +14,16 @@
   var timer = null;
   var originalRows = null;
   var originalPager = null;
+  var originalBands = null;
   var DEBOUNCE_MS = 200;
 
+  var GROUP_LABEL = {
+    baru: 'BARU',
+    revote: 'REVOTE',
+    valid: 'VALID',
+    kadaluarsa: 'KADALUARSA'
+  };
+
   function escapeHtml(text) {
     var el = document.createElement('div');
     el.textContent = text == null ? '' : String(text);
@@ -36,15 +44,34 @@
     return String(value).slice(0, 10);
   }
 
+  function hideBands(on) {
+    var bands = document.querySelectorAll('.band-list');
+    if (on && originalBands === null) {
+      originalBands = Array.prototype.map.call(bands, function (el) {
+        return el.style.display || '';
+      });
+      Array.prototype.forEach.call(bands, function (el) {
+        el.style.display = 'none';
+      });
+    } else if (!on && originalBands !== null) {
+      Array.prototype.forEach.call(bands, function (el, i) {
+        el.style.display = originalBands[i] || '';
+      });
+      originalBands = null;
+    }
+  }
+
   function setSearchMode(on) {
     if (on && originalRows === null) {
       originalRows = rows.innerHTML;
       originalPager = pager.style.display || '';
+      hideBands(true);
     } else if (!on && originalRows !== null) {
       rows.innerHTML = originalRows;
       pager.style.display = originalPager;
       originalRows = null;
       originalPager = null;
+      hideBands(false);
       if (result) {
         result.textContent = '';
       }
@@ -56,9 +83,15 @@
       rows.innerHTML = '<div class="empty">TAK ADA AKUN COCOK</div>';
     } else {
       rows.innerHTML = data.results.map(function (r) {
-        return '<div class="list-row">' +
+        var tag = '<span class="group-tag tag-' + r.group + '">' +
+          (GROUP_LABEL[r.group] || r.group) + '</span>';
+        var badge = r.expired ?
+          '<span class="expired-badge">VOTE ULANG</span>' : '';
+        var warn = r.expiring ?
+          '<span class="warn-badge">VOTE ULANG SEGERA</span>' : '';
+        return '<div class="list-row' + (r.expired ? ' expired' : '') + '">' +
           '<span class="rank">' + r.rank + '</span>' +
-          '<span class="owner">' + escapeHtml(r.owner) + '</span>' +
+          '<span class="owner">' + escapeHtml(r.owner) + tag + warn + badge + '</span>' +
           '<span class="stake" data-label="STAKE (VEX)">' + vex(r.staked) + '</span>' +
           '<span class="reward" data-label="TOTAL REWARD (VEX)">' + vex(r.total_reward) + '</span>' +
           '<span class="vote-date" data-label="VOTE TERAKHIR">' + shortdate(r.last_vote) + '</span>' +

static/style.css

@@ -13,6 +13,9 @@
   --surface-card: #141414;
   --on-dark: #ffffff;
   --link: #c3d9f3;
+  --amber: #d4a017;
+  --amber-dim: #8a6d1a;
+  --mint: #7fd4b0;
 
   /* typography — DESIGN.md substitutes: Saira Condensed (Display),
      EB Garamond (Text Regular), JetBrains Mono (Monospace) */
@@ -231,7 +234,9 @@ button.pill {
   grid-template-columns: 200px 200px 120px 1fr;
 }
 .voter-list .list-header,
-.voter-list .list-row {
+.voter-list .list-row,
+.band-list .list-header,
+.band-list .list-row {
   grid-template-columns: 72px repeat(4, 1fr);
 }
 .list-header {
@@ -257,6 +262,75 @@ button.pill {
   color: var(--on-dark);
   overflow-wrap: anywhere;
 }
+
+/* ————— band BARU / KADALUARSA (V40) ————— */
+.band-list { margin-top: var(--sp-xl); }
+.section-caption {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding: var(--sp-md) var(--sp-sm) 0;
+}
+.section-legend {
+  margin-top: var(--sp-xs);
+  padding: 0 var(--sp-sm);
+  color: var(--muted-soft);
+}
+.section-legend { color: var(--amber-dim); }
+.section-legend.mint-legend { color: var(--mint); }
+.section-legend.warn-legend { color: var(--amber-dim); }
+
+.list-row.expired {
+  border-left: 2px solid var(--amber);
+  background: rgba(212, 160, 23, 0.12);
+}
+.list-row.expired:nth-child(odd) { background: rgba(212, 160, 23, 0.12); }
+.list-row.expired .owner,
+.list-row.expired .stake,
+.list-row.expired .reward { color: var(--amber); }
+
+.expired-badge {
+  display: inline-block;
+  margin-left: var(--sp-sm);
+  padding: 2px 8px;
+  border: 1px solid var(--amber);
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 2px;
+  color: var(--amber);
+  vertical-align: middle;
+}
+.warn-badge {
+  display: inline-block;
+  margin-left: var(--sp-sm);
+  padding: 2px 8px;
+  border: 1px dashed var(--amber-dim);
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 2px;
+  color: var(--amber-dim);
+  vertical-align: middle;
+}
+.group-tag {
+  display: inline-block;
+  margin-left: var(--sp-sm);
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 2px;
+  color: var(--muted);
+  border: 1px solid var(--hairline-strong);
+  vertical-align: middle;
+}
+.tag-baru { color: var(--link); border-color: var(--link); }
+.tag-valid { color: var(--muted); }
+.tag-revote { color: var(--mint); border-color: var(--mint); }
+.tag-kadaluarsa { color: var(--amber); border-color: var(--amber); }
 .stake,
 .reward {
   font-family: var(--font-display);
@@ -267,9 +341,7 @@ button.pill {
   font-variant-numeric: tabular-nums;
 }
 .list-row .vote-date { text-align: center; }
-.list-header span:nth-child(3),
-.list-header span:nth-child(4) { text-align: center; }
-.voter-list .list-header span:nth-child(n+3) { text-align: center; }
+.list-header span:nth-child(n+3) { text-align: center; }
 .pay-list .list-header span:nth-child(2),
 .pay-list .list-header span:nth-child(3) { text-align: center; }
 .pay-list .list-header span:nth-child(4) { text-align: left; }
@@ -345,7 +417,9 @@ button.pill {
   .list-header,
   .list-row { grid-template-columns: 56px 1fr 160px 1fr; gap: var(--sp-md); }
   .voter-list .list-header,
-  .voter-list .list-row { grid-template-columns: 56px 1fr 160px 1fr 1fr; }
+  .voter-list .list-row,
+  .band-list .list-header,
+  .band-list .list-row { grid-template-columns: 56px 1fr 160px 1fr 1fr; }
   .pay-list .list-header,
   .pay-list .list-row { grid-template-columns: 180px 180px 110px 1fr; }
   .spec-list, .stats, .search, .search-result { margin-left: var(--sp-md); margin-right: var(--sp-md); }