dashboard: kolom TOTAL REWARD per pemilih + TXID jadi link explorer

static/app.js

@@ -60,6 +60,7 @@
           '<span class="rank">' + r.rank + '</span>' +
           '<span class="owner">' + escapeHtml(r.owner) + '</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>' +
           '</div>';
       }).join('');

static/style.css

@@ -193,7 +193,11 @@ button.pill {
 }
 .pay-list .list-header,
 .pay-list .list-row {
-  grid-template-columns: 1fr 170px 110px 280px;
+  grid-template-columns: 180px 170px 110px 1fr;
+}
+.voter-list .list-header,
+.voter-list .list-row {
+  grid-template-columns: 72px repeat(4, 1fr);
 }
 .list-header {
   font-family: var(--font-mono);
@@ -218,7 +222,8 @@ button.pill {
   color: var(--on-dark);
   overflow-wrap: anywhere;
 }
-.stake {
+.stake,
+.reward {
   font-family: var(--font-display);
   font-size: 20px;
   letter-spacing: 1px;
@@ -229,6 +234,7 @@ button.pill {
 .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; }
 .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; }
@@ -238,6 +244,11 @@ button.pill {
   color: var(--muted);
   overflow-wrap: anywhere;
 }
+.txid a {
+  color: var(--muted);
+  text-decoration: underline;
+}
+.txid a:hover { color: var(--on-dark); }
 .empty {
   font-family: var(--font-mono);
   font-size: 12px;
@@ -298,6 +309,8 @@ button.pill {
 @media (max-width: 1024px) {
   .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; }
   .spec-list, .stats, .search, .search-result { margin-left: var(--sp-md); margin-right: var(--sp-md); }
   .stats { grid-template-columns: repeat(2, 1fr); }
   .spec-cell:nth-child(3) { border-left: none; }
@@ -322,14 +335,18 @@ button.pill {
   .list-row .owner { grid-column: 2; font-size: 18px; }
   .list-row .stake,
   .list-row .vote-date,
-  .list-row .txid { grid-column: 2; }
-  .list-row .stake { text-align: left; }
+  .list-row .txid,
+  .list-row .reward { grid-column: 2; }
+  .list-row .stake,
+  .list-row .reward { text-align: left; }
   .list-row .vote-date { text-align: left; }
   .list-row .txid { font-size: 12px; }
-  .list-row .stake { overflow-wrap: anywhere; }
+  .list-row .stake,
+  .list-row .reward { overflow-wrap: anywhere; }
   .list-row .stake::before,
   .list-row .vote-date::before,
-  .list-row .txid::before {
+  .list-row .txid::before,
+  .list-row .reward::before {
     content: attr(data-label);
     display: block;
     font-family: var(--font-mono);