Spaces:
Sleeping
Sleeping
File size: 7,416 Bytes
58c1398 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | <div class="admin-section" id="section-users">
<!-- Premium Welcome Banner -->
<div class="welcome-banner compact admin-banner">
<div class="welcome-text">
<h1>User Directory</h1>
<p>Administer access, monitor balances, and enforce security policies across all accounts.</p>
</div>
<div class="dashboard-controls">
<button class="btn-premium small" onclick="loadUserManagement()">
<i class="fa-solid fa-sync"></i> Refresh List
</button>
</div>
<div class="admin-banner-decoration"></div>
</div>
<!-- Stats & Filters Toolbar -->
<div class="users-toolbar animate-up">
<div class="wallet-kpi-grid wallet-kpi-grid-inline">
<div class="wallet-kpi-card">
<div class="wallet-kpi-accent"></div>
<div class="wallet-kpi-label">Total Users</div>
<div class="wallet-kpi-value" id="total-users-val">0</div>
</div>
<div class="wallet-kpi-card">
<div class="wallet-kpi-accent balance"></div>
<div class="wallet-kpi-label">Active Accounts</div>
<div class="wallet-kpi-value" id="active-users-val">0</div>
</div>
<div class="wallet-kpi-card">
<div class="wallet-kpi-accent low-balance"></div>
<div class="wallet-kpi-label">Disabled / Blocked</div>
<div class="wallet-kpi-value" id="disabled-users-val">0</div>
</div>
</div>
<div class="wallet-controls wallet-controls-inline">
<div class="wallet-search-wrap wallet-search-wrap-inline">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" id="user-mgmt-search" placeholder="Search ID, Name or Phone..." oninput="applyUserMgmtFilters()" class="input-hover-effect">
</div>
<div class="u-filter-tabs-metallic">
<button class="u-tab-m active" onclick="filterUserMgmt('all', this)">All</button>
<button class="u-tab-m" onclick="filterUserMgmt('admin', this)">Admins</button>
<button class="u-tab-m" onclick="filterUserMgmt('admin-user', this)">Agents</button>
<button class="u-tab-m" onclick="filterUserMgmt('user', this)">Users</button>
</div>
</div>
</div>
<!-- Metallic Users Grid -->
<div class="users-grid-universal animate-up" id="users-mgmt-grid">
<!-- Cards injected via JS -->
</div>
<!-- Change Password Modal -->
<div id="user-change-pass-modal" class="custom-modal">
<div class="auth-card-metallic">
<div class="modal-header-primary">
<i class="fa-solid fa-key"></i>
<h3>Change User Password</h3>
</div>
<p class="change-pass-info">Confirm to change user password.</p>
<div class="security-prompt">
<label>New Password:</label>
<div class="input-metallic-group">
<i class="fa-solid fa-lock"></i>
<input type="text" id="change-pass-new" readonly>
</div>
</div>
<p class="error-text" id="change-pass-error"></p>
<div class="button-group-metallic">
<button onclick="closeChangePasswordModal()" class="btn-metallic secondary">Cancel</button>
<button id="final-change-pass-btn" class="btn-metallic primary">Confirm Change</button>
</div>
</div>
</div>
<!-- Secure Deletion Modal (Role-Based and Protected) -->
<div id="user-delete-modal" class="custom-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 1000; justify-content: center; align-items: center;">
<div class="auth-card-metallic delete-box hover" style="background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; max-width: 450px; width: 90%; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden;">
<div style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; padding: 24px 20px; text-align: center;">
<i class="fa-solid fa-triangle-exclamation" style="font-size: 2.2rem; margin-bottom: 12px; display: block;"></i>
<h3 style="margin: 0; font-size: 1.4rem; font-weight: 600;">Delete User Account</h3>
</div>
<div style="padding: 28px;">
<p style="background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-left: 4px solid #ef4444; padding: 16px; border-radius: 10px; margin-bottom: 24px; color: var(--text-color); font-size: 0.95rem;">
<i class="fa-solid fa-circle-exclamation" style="color: #ef4444; margin-right: 10px;"></i>
<strong id="delete-target-name" style="color: #ef4444;"></strong> will be permanently deleted. This action cannot be undone.
</p>
<div style="margin-bottom: 24px;">
<label style="display: block; margin-bottom: 10px; font-weight: 500; color: var(--text-muted); font-size: 0.9rem;">
<i class="fa-solid fa-shield-halved" style="margin-right: 8px; color: var(--primary-color);"></i>
Enter Admin Password to Confirm:
</label>
<div class="input-metallic-group input-hover" style="display: flex; align-items: center; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; transition: var(--transition);">
<i class="fa-solid fa-key" style="color: var(--text-muted); margin-right: 14px; font-size: 1rem;"></i>
<input type="password" id="admin-auth-pass" placeholder="Enter your admin password" style="flex: 1; background: transparent; border: none; color: var(--text-color); font-size: 1rem; outline: none;">
</div>
<p class="error-text" id="delete-error" style="color: #ef4444; font-size: 0.85rem; margin-top: 10px; min-height: 20px;"></p>
</div>
<div style="display: flex; gap: 14px;">
<button onclick="closeDeleteModal()" class="btn-hover" style="flex: 1; padding: 14px 20px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px;">
<i class="fa-solid fa-xmark"></i>Cancel
</button>
<button id="final-delete-btn" class="btn-hover" style="flex: 1; padding: 14px 20px; border-radius: 12px; border: none; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; font-weight: 600; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); display: flex; align-items: center; justify-content: center; gap: 8px;">
<i class="fa-solid fa-trash-can"></i>Delete User
</button>
</div>
</div>
</div>
</div>
</div>
|