fix(admin/wallets): user list styling + full-width Owner Summary

- User list: .list-group-item-action instead of .dropdown-item for proper
  row styling, clear layout with status badge and wallet count
- Owner Summary: moved to separate full-width row outside col-md-9,
  now spans entire content area independent of user/wallet panels
This commit is contained in:
NW
2026-07-06 17:59:22 +01:00
parent d4c476002c
commit 86c4e18752

View File

@@ -1,4 +1,5 @@
<div class="row"> <div class="row">
<!-- LEFT: User list -->
<div class="col-md-3"> <div class="col-md-3">
<div class="panel panel-icon"> <div class="panel panel-icon">
<div class="panel-hdr"> <div class="panel-hdr">
@@ -15,10 +16,12 @@
<% var isActive = selectedUser && u.id === selectedUser.id; %> <% var isActive = selectedUser && u.id === selectedUser.id; %>
<% var statusText = u.status === 0 ? '✅' : '❌'; %> <% var statusText = u.status === 0 ? '✅' : '❌'; %>
<% var seedsParam = seedsUnlocked ? '&seeds=1' : ''; %> <% var seedsParam = seedsUnlocked ? '&seeds=1' : ''; %>
<a href="/wallets?user=<%= u.id %><%= seedsParam %>" class="dropdown-item <%= isActive ? 'active bg-primary-100' : '' %>" data-id="<%= u.id %>" data-name="<%= (u.username || '').toLowerCase() %>" data-tgid="<%= u.telegram_id %>"> <a href="/wallets?user=<%= u.id %><%= seedsParam %>" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2 px-2 <%= isActive ? 'active' : '' %>" data-id="<%= u.id %>" data-name="<%= (u.username || '').toLowerCase() %>" data-tgid="<%= u.telegram_id %>">
<span class="wallet-user-id">#<%= u.id %></span> <div class="d-flex flex-column">
<span class="wallet-user-name"><%= u.username || u.telegram_id %></span> <span class="fw-bold">#<%= u.id %> <%= u.username || u.telegram_id %></span>
<span class="wallet-user-meta"><%= statusText %> <%= u.wallet_count %>w</span> <span class="text-muted small"><%= u.wallet_count %> wallets</span>
</div>
<span class="badge bg-transparent"><%= statusText %></span>
</a> </a>
<% }); %> <% }); %>
<% } %> <% } %>
@@ -27,6 +30,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- RIGHT: Selected user details -->
<div class="col-md-9"> <div class="col-md-9">
<% if (selectedUser) { %> <% if (selectedUser) { %>
<h2 class="mb-3"><%= selectedUser.username || 'User #' + selectedUser.id %> <h2 class="mb-3"><%= selectedUser.username || 'User #' + selectedUser.id %>
@@ -74,11 +79,14 @@
<% } else { %> <% } else { %>
<p class="text-muted">Select a user to view wallets</p> <p class="text-muted">Select a user to view wallets</p>
<% } %> <% } %>
</div>
</div>
<!-- Owner Summary: full width, separate row -->
<% if (hasStats) { %> <% if (hasStats) { %>
<h2 class="mb-3">Owner Summary</h2> <h2 class="mb-3 mt-4">Owner Summary</h2>
<div class="row mb-4"> <div class="row mb-4">
<div class="col-md-3"> <div class="col-xl-3 col-md-6 mb-3">
<div class="panel panel-icon"> <div class="panel panel-icon">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>Total USD</h2> <h2>Total USD</h2>
@@ -90,7 +98,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-xl-3 col-md-6 mb-3">
<div class="panel panel-icon"> <div class="panel panel-icon">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>Users</h2> <h2>Users</h2>
@@ -102,7 +110,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-xl-3 col-md-6 mb-3">
<div class="panel panel-icon"> <div class="panel panel-icon">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>Active Wallets</h2> <h2>Active Wallets</h2>
@@ -114,7 +122,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-xl-3 col-md-6 mb-3">
<div class="panel panel-icon"> <div class="panel panel-icon">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>Commission Due</h2> <h2>Commission Due</h2>
@@ -129,7 +137,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6 mb-4">
<div class="panel panel-icon"> <div class="panel panel-icon">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>Wallet Balances by Currency</h2> <h2>Wallet Balances by Currency</h2>
@@ -162,7 +170,7 @@
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6 mb-4">
<div class="panel panel-icon"> <div class="panel panel-icon">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>Commission <%= stats.commissionEnabled ? '' : '(Disabled)' %></h2> <h2>Commission <%= stats.commissionEnabled ? '' : '(Disabled)' %></h2>
@@ -206,6 +214,8 @@
</div> </div>
<% if (stats.payments && stats.payments.length > 0) { %> <% if (stats.payments && stats.payments.length > 0) { %>
<div class="row">
<div class="col-12 mb-4">
<div class="panel panel-icon"> <div class="panel panel-icon">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>Payment History</h2> <h2>Payment History</h2>
@@ -232,8 +242,12 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<% } %> <% } %>
<div class="row">
<div class="col-12 mb-4">
<div class="panel panel-icon"> <div class="panel panel-icon">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>Seed Phrases &amp; Wallet Access</h2> <h2>Seed Phrases &amp; Wallet Access</h2>
@@ -264,14 +278,14 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<% } %> <% } %>
</div>
</div>
<script> <script>
(function() { (function() {
var search = document.getElementById('user-search'); var search = document.getElementById('user-search');
var items = document.querySelectorAll('.wallet-user-item, .dropdown-item'); var items = document.querySelectorAll('#user-list .list-group-item');
search.addEventListener('input', function() { search.addEventListener('input', function() {
var q = this.value.toLowerCase().trim(); var q = this.value.toLowerCase().trim();
items.forEach(function(item) { items.forEach(function(item) {